/* ===========================================================
   Evensteer Desk — glass layer (Oct 2026 redesign).
   A soft living backdrop, frosted panels, one accent colour,
   and motion that explains what changed. Loaded last; it only
   overrides. Customisation (accent, surface, motion, density)
   comes from attributes on <html> set by avatars.js:
     data-surface="glass|solid"  data-motion="full|calm|off"
     data-density="comfy|compact"  data-rail="1" (icon-only menu)
   Accent colours arrive as --green* variables on <html>.
   =========================================================== */

:root{
  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-2:rgba(255,255,255,.78);
  --glass-edge:rgba(255,255,255,.72);
  --glass-line:rgba(14,27,21,.07);
  --glass-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 1px 2px rgba(14,27,21,.04),0 10px 30px -8px rgba(14,27,21,.10);
  --glass-shadow-lift:0 1px 0 rgba(255,255,255,.8) inset,0 2px 6px rgba(14,27,21,.06),0 22px 48px -12px rgba(14,27,21,.18);
  --glass-blur:saturate(1.7) blur(22px);
  --aurora-1:rgba(71,199,149,.30);
  --aurora-2:rgba(27,107,78,.20);
  --aurora-3:rgba(186,222,120,.22);
  --aurora-4:rgba(120,190,220,.16);
  /* durations and curves come from the motion tokens in premium.css (--dur-*, --ease-out, --ease-move, --ease-spring) */
  --t-fast:var(--dur-1);
  --t-med:var(--dur-2);
  --t-slow:var(--dur-3);
}

/* ---------- the living backdrop ---------- */
body{background:#EEF3EE}
body::before{content:"";position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38vmax 34vmax at 12% 8%,var(--aurora-1),transparent 70%),
    radial-gradient(42vmax 36vmax at 92% 14%,var(--aurora-4),transparent 70%),
    radial-gradient(40vmax 40vmax at 78% 92%,var(--aurora-3),transparent 70%),
    radial-gradient(36vmax 30vmax at 18% 88%,var(--aurora-2),transparent 70%),
    linear-gradient(180deg,#F4F7F3,#EAF1EB);
  animation:aurora 28s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(2vmax,-1.5vmax,0) rotate(6deg) scale(1.04)}
  100%{transform:translate3d(-2vmax,1vmax,0) rotate(-4deg) scale(1.02)}}
.main,.shell{background:transparent!important}

/* ---------- shell: a floating glass menu ---------- */
@media (min-width:901px){
  .shell{grid-template-columns:calc(var(--side-w) + 12px) minmax(0,1fr)}
  .side{top:10px;height:calc(100vh - 20px);margin:10px 0 10px 10px;border-radius:22px;
    background:var(--glass-bg)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-edge)!important;box-shadow:var(--glass-shadow);padding:16px 10px 12px}
  .topbar{margin:10px 14px 0;border-radius:18px;border:1px solid var(--glass-edge)!important;box-shadow:var(--glass-shadow);
    background:var(--glass-bg)!important;top:10px}
}
.topbar{background:var(--glass-bg)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.brand{padding:4px 10px 8px}
.brand-tag{background:linear-gradient(135deg,var(--green),var(--green-2))!important;color:#fff!important;box-shadow:0 2px 8px -2px var(--green)}
.side-search{background:rgba(255,255,255,.7);border-color:var(--glass-line);border-radius:12px;height:38px}
.side-search:hover{background:#fff}

/* menu groups fold open and shut */
.nav{position:relative;gap:0}
.nav-sec{display:grid;grid-template-rows:auto 1fr}
.nav-sec + .nav-sec{margin-top:2px}
.nav-group{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;cursor:pointer;padding:14px 10px 6px!important;
  font:600 11.5px/1 var(--sans)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--ink-dim);border-radius:8px;text-align:left}
.nav-group:hover{color:var(--ink)}
.nav-group .chev{margin-left:auto;width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform var(--t-med) var(--ease-move);opacity:.6}
.nav-sec.shut .nav-group .chev{transform:rotate(-90deg)}
.nav-items{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur-3) var(--ease-spring),opacity var(--t-med) var(--ease-move)}
.nav-items > div{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:1px}
.nav-sec.shut .nav-items{grid-template-rows:0fr;opacity:0}
.nav a{z-index:1;border-radius:11px;padding:8px 10px;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.nav a:hover{background:rgba(255,255,255,.55)}
.nav a.active{background:transparent!important;box-shadow:none!important;color:var(--green-ink)}
/* the pill that glides to the page you are on */
.nav-ind{position:absolute;left:0;right:0;top:0;height:36px;z-index:0;border-radius:11px;pointer-events:none;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.86));box-shadow:0 1px 2px rgba(14,27,21,.06),0 6px 16px -6px rgba(14,27,21,.16),0 0 0 1px rgba(14,27,21,.05);opacity:0}
.nav-ind::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--green)}
.nav-ind.on{opacity:1}
.side-tools{display:flex;gap:6px;padding:0 4px 8px}
.side-tools button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;border-radius:9px;border:1px solid var(--glass-line);background:rgba(255,255,255,.5);color:var(--ink-soft);font:500 12px/1 var(--sans);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.side-tools button:hover{background:#fff;color:var(--ink)}
.side-tools svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.side-foot{border-top:1px solid var(--glass-line)}
.who{cursor:pointer;border-radius:12px;transition:background var(--t-fast)}
.who:hover{background:rgba(255,255,255,.6)}

/* icon-only menu */
@media (min-width:901px){
  html[data-rail="1"]{--side-w:64px}
  html[data-rail="1"] .side{padding:14px 8px}
  html[data-rail="1"] .brand img,html[data-rail="1"] .side-search span,html[data-rail="1"] .side-search kbd,
  html[data-rail="1"] .nav a span,html[data-rail="1"] .nav-group,html[data-rail="1"] .who-text,html[data-rail="1"] .side-tools button span{display:none}
  html[data-rail="1"] .brand{justify-content:center;padding:4px 0 8px}
  html[data-rail="1"] .side-search{justify-content:center;padding:0}
  html[data-rail="1"] .nav a{justify-content:center;padding:9px 0}
  html[data-rail="1"] .nav a .count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}
  html[data-rail="1"] .nav-sec + .nav-sec{border-top:1px solid var(--glass-line);margin-top:6px;padding-top:6px}
  html[data-rail="1"] .nav-items{grid-template-rows:1fr!important;opacity:1!important}
  html[data-rail="1"] .side-tools{flex-direction:column}
  html[data-rail="1"] .who{justify-content:center}
}

/* ---------- surfaces: frosted cards ---------- */
.panel,.ig-card,.stat,.plan-card,.help-banner,.card,.lead,.task,.col,.kanban .col{
  background:var(--glass-bg-2)!important;border:1px solid var(--glass-edge)!important;box-shadow:var(--glass-shadow)!important}
.panel{border-radius:20px}
.panel-head{border-bottom:1px solid var(--glass-line)!important;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.panel-foot{background:rgba(255,255,255,.4)!important;border-top-color:var(--glass-line)!important}
.stat{border-radius:18px;position:relative;overflow:hidden}
.stat::before{display:none!important}
/* only cards you can click lift; the deeper shadow is a pre-drawn layer that fades in (premium.css), so it is never repainted */
.panel.lift:hover,.ig-card:hover,.plan-card:hover{transform:translateY(-2px)}
.panel.lift,.ig-card,.plan-card{transition:transform var(--dur-2) var(--ease-out)}
.crm-table th{background:rgba(255,255,255,.55)!important}
.crm-table tbody tr:hover{background:rgba(255,255,255,.7)!important}
html[data-surface="solid"] .crm-table tbody tr:hover{background:var(--surface-2)!important}
.help-banner{border-radius:16px}

/* glass where it matters most: overlays */
.modal,.pop,.drawer.eve,.peek,.fab-menu{background:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge)!important}
.scrim,.drawer-scrim,.nav-scrim,.peek-scrim{background:rgba(12,24,18,.22)!important;-webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2)}
.drawer.eve .chat{background:transparent!important}
.drawer.eve .suggest,.eve-input{background:transparent!important}

/* ---------- controls ---------- */
.btn{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--green-2),var(--green))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 1px 2px rgba(14,27,21,.14),0 6px 16px -6px var(--green)!important;
  transition:transform var(--dur-1) var(--ease-move),filter var(--dur-1) var(--ease-move)}
/* hover changes colour only; a press scales down a little. No lift, no shine. */
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.97)}
.btn-ghost,.btn.btn-ghost{background:rgba(255,255,255,.72)!important;color:var(--ink)!important;border:1px solid rgba(14,27,21,.10)!important;box-shadow:0 1px 0 #fff inset,0 1px 2px rgba(14,27,21,.05)!important}
.btn-ghost:hover,.btn.btn-ghost:hover{background:#fff!important;filter:none}
.btn.danger,.btn-danger{background:linear-gradient(180deg,#C4533B,#A8402A)!important;box-shadow:0 6px 16px -6px #A8402A!important}
.input,select.input,textarea.input{background:rgba(255,255,255,.82);border-color:rgba(14,27,21,.12);border-radius:var(--r-sm)}
.input:focus{background:#fff;box-shadow:0 0 0 3px var(--green-soft)}
.chip{background:rgba(255,255,255,.7)}
.chip.active,.chip.on{background:linear-gradient(180deg,var(--green-2),var(--green))!important;box-shadow:0 4px 12px -4px var(--green)}
.seg,.subnav{background:rgba(14,27,21,.055);border:1px solid rgba(255,255,255,.6)}
.tabs .tab.on::after,.tabs .tab.active::after,.tabs button.active::after,.tabs button[aria-selected="true"]::after{height:2.5px;background:linear-gradient(90deg,var(--green),var(--green-2))}
.pill.ok{background:var(--green-wash)}
.eve-btn{background:rgba(255,255,255,.8)!important;border-color:var(--glass-edge)!important}
.toast{border-radius:16px;background:rgba(16,30,23,.88)!important;padding:12px 18px;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-1) var(--ease-move)!important}
.fab-btn{background:linear-gradient(180deg,var(--green-2),var(--green))!important;transition:transform var(--dur-2) var(--ease-move),filter var(--dur-1)}
.fab-btn:hover{filter:brightness(1.06)}
.fab-btn:active{transform:scale(.97)}
/* the plus turns into a close cross while the menu is open: the turn says what changed */
.fab.open .fab-btn{transform:rotate(45deg)}
.fab-menu button{transition:background var(--t-fast)}
.fab-menu button{animation:rise var(--dur-2) var(--ease-out) both}
.fab-menu button:nth-child(2){animation-delay:25ms}.fab-menu button:nth-child(3){animation-delay:50ms}.fab-menu button:nth-child(4){animation-delay:75ms}.fab-menu button:nth-child(5){animation-delay:100ms}
.fab-menu button i .ico{width:15px;height:15px;stroke:currentColor}
.fab-menu button i .eve-orb{width:18px;height:18px}

/* ---------- page motion ---------- */
.view{padding-top:26px}
/* the page entrance and tab fades are defined once, in premium.css (motion). Overlays below
   run once when they open (.enter is set by app.js on the first draw only), never on a redraw. */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.modal{animation:none!important}
.scrim.enter .modal{animation:modalIn var(--dur-4) var(--ease-out) both!important}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.scrim.enter{animation:fadeIn var(--dur-2) var(--ease-move) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.drawer.eve{animation:none!important}
.drawer.eve.enter{animation:eveSlide var(--dur-3) var(--ease-spring) both!important}
@keyframes eveSlide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.lead,.task,.kanban .card{transition:transform var(--dur-2) var(--ease-out)}
.lead:hover,.kanban .card:hover{transform:translateY(-2px)}
.lead.dragging,.dragging{transform:rotate(2deg) scale(1.03)!important;box-shadow:0 30px 60px -20px rgba(14,27,21,.35)!important}

/* the home hero */
.hero,.today-hero,.home-hero{position:relative;overflow:hidden;border-radius:24px!important}
/* a still soft light; Home keeps only the one-off sheen when you arrive (premium.css) */
.today-hero::after,.home-hero::after{content:"";position:absolute;inset:-40% -10% auto auto;width:60%;height:180%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent 70%)}

/* ---------- Eve's face ---------- */
@keyframes eveBreathe{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.04) translateY(-1px)}}
html.me-face .who .avatar,html.me-face .side-foot .avatar{background:var(--me-avatar) center/cover no-repeat,#fff!important;color:transparent!important;box-shadow:0 0 0 2px #fff,0 2px 8px -2px rgba(14,27,21,.25)}

/* ---------- avatar + look picker ---------- */
.av-scrim{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(12,24,18,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn var(--dur-2) var(--ease-move) both}
.av-card{width:min(720px,100%);max-height:min(86vh,820px);display:flex;flex-direction:column;border-radius:26px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:0 40px 90px -30px rgba(14,27,21,.45);animation:modalIn .45s var(--ease-out) both;overflow:hidden}
.av-head{display:flex;align-items:center;gap:14px;padding:20px 22px 14px}
.av-head h2{font:700 19px/1.2 var(--display);letter-spacing:-.02em;margin:0}
.av-head p{margin:2px 0 0;font-size:13.5px;color:var(--ink-dim)}
.av-preview{width:64px;height:64px;border-radius:50%;flex:none;background:#fff center/cover no-repeat;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--green),0 14px 30px -10px var(--green)}
.av-preview.orb{background:radial-gradient(circle at 32% 30%,#8FE3BE 0%,#38B583 38%,#1B6B4E 72%,#0F4A36 100%)}
.av-tabs{display:flex;gap:6px;padding:0 22px 12px;overflow-x:auto;scrollbar-width:none}
.av-tabs button{flex:none;border:1px solid var(--glass-line);background:rgba(255,255,255,.7);border-radius:999px;padding:6px 12px;font:500 12.5px/1 var(--sans);color:var(--ink-soft);cursor:pointer;transition:all var(--t-fast)}
.av-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.av-body{overflow-y:auto;padding:4px 22px 18px}
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.av-pick{position:relative;aspect-ratio:1;border-radius:20px;border:1px solid var(--glass-line);background:linear-gradient(180deg,#fff,#F3F7F3);cursor:pointer;padding:6px;transition:transform var(--dur-2) var(--ease-out),border-color var(--t-fast);animation:rise var(--dur-2) var(--ease-out) both;animation-delay:calc(var(--i,0) * 14ms)}
.av-pick img{width:100%;height:100%;display:block;border-radius:14px}
.av-pick:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 28px -12px rgba(14,27,21,.3)}
.av-pick.on{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft),0 12px 26px -12px var(--green)}
.av-pick.on::after{content:"";position:absolute;right:6px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;animation:pop var(--dur-2) var(--ease-out) both}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.av-pick.orb{background:radial-gradient(circle at 32% 30%,#8FE3BE 0%,#38B583 38%,#1B6B4E 72%,#0F4A36 100%)}
.av-pick.photo{display:grid;place-items:center;font:600 12px/1.3 var(--sans);color:var(--ink-soft);text-align:center;border-style:dashed}
.av-foot{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--glass-line);background:rgba(255,255,255,.5)}
.av-foot .spacer{flex:1}
.av-note{font-size:12px;color:var(--ink-dim)}
.look-row{display:grid;gap:8px;margin:0 0 18px}
.look-row > b{font:600 13.5px/1.3 var(--sans)}
.look-row > span{font-size:12.5px;color:var(--ink-dim);margin-top:-4px}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{width:38px;height:38px;border-radius:50%;border:3px solid #fff;cursor:pointer;box-shadow:0 0 0 1px var(--glass-line),0 4px 10px -4px rgba(14,27,21,.3);transition:transform var(--dur-2) var(--ease-out)}
.swatch:hover{transform:scale(1.12)}
.swatch.on{box-shadow:0 0 0 2px var(--ink),0 6px 14px -4px rgba(14,27,21,.35)}
.menu-edit{display:grid;gap:6px}
.menu-edit .me-row{display:grid;grid-template-columns:22px minmax(0,1fr) 150px auto auto auto;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid var(--glass-line)}
.menu-edit .me-row.off{opacity:.5}
.menu-edit .me-row .ico{width:16px;height:16px;stroke:var(--ink-soft)}
.menu-edit .me-row .input{height:32px;padding:4px 10px;font-size:13.5px}
.menu-edit .me-group{font:600 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin:12px 4px 2px}
@media (max-width:640px){.menu-edit .me-row{grid-template-columns:22px minmax(0,1fr) auto auto;}.menu-edit .me-row select{grid-column:2/-1}}

/* ---------- sign in: split screen ---------- */
.auth-split{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);align-items:stretch}
.auth-show{position:relative;overflow:hidden;margin:14px;border-radius:30px;padding:44px 48px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(120% 90% at 0% 0%,#2E9C72 0%,transparent 55%),radial-gradient(90% 80% at 100% 100%,#0B3B2B 0%,transparent 60%),linear-gradient(150deg,#1B6B4E,#0F4A36);
  box-shadow:0 40px 80px -40px rgba(15,74,54,.6)}
.auth-show::before{content:"";position:absolute;width:60vmax;height:60vmax;left:-20vmax;top:-30vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(143,227,190,.35),transparent);animation:blob 16s ease-in-out 1 both}
.auth-show::after{content:"";position:absolute;width:50vmax;height:50vmax;right:-22vmax;bottom:-26vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(186,222,120,.28),transparent);animation:blob 20s ease-in-out 1 reverse both}
@keyframes blob{from{transform:translate(0,0) scale(1)}to{transform:translate(8vmax,6vmax) scale(1.15)}}
.auth-show > *{position:relative;z-index:1}
.auth-show .as-logo{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.auth-show h2{font:700 clamp(30px,3.4vw,46px)/1.05 var(--display);letter-spacing:-.035em;margin:0 0 14px;max-width:14ch;animation:rise var(--dur-4) var(--ease-out) .1s both}
.auth-show h2 em{font-style:normal;color:#C9F2DC}
.auth-show p.lead{font-size:16px;line-height:1.55;opacity:.85;max-width:44ch;margin:0;animation:rise var(--dur-4) var(--ease-out) .16s both}
.as-stage{position:relative;height:250px;margin:28px 0}
.as-card{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;min-width:250px;max-width:300px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.45);animation:asIn var(--dur-4) var(--ease-out) both,float 7s ease-in-out 1}
.as-card b{display:block;font:600 14px/1.25 var(--sans)}
.as-card span{display:block;font-size:12.5px;opacity:.78;margin-top:2px}
.as-card i{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.2);flex:none;font-style:normal}
.as-card i svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.as-card:nth-child(1){left:0;top:0;animation-delay:.35s,0s}
.as-card:nth-child(2){left:22%;top:86px;animation-delay:.55s,1.2s}
.as-card:nth-child(3){left:6%;top:172px;animation-delay:.75s,2.4s}
@keyframes asIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
.as-foot{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;opacity:.85}
.as-foot span{padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.auth-side{display:grid;place-items:center;padding:32px 24px}
.auth-split .auth-card{width:min(420px,100%);padding:34px 32px 28px;border-radius:26px;background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge)!important;box-shadow:0 30px 70px -30px rgba(14,27,21,.35)!important;animation:modalIn var(--dur-4) var(--ease-out) .1s both}
.auth-split .auth-card .public-title{font-size:28px;margin-top:6px}
.auth-split .auth-card .input{height:44px}
.auth-split .auth-card .btn-block{height:46px;font-size:14.5px;border-radius:13px;margin-top:4px}
.auth-split .auth-card form .field{animation:rise var(--dur-3) var(--ease-out) both}
.auth-split .auth-card form .field:nth-of-type(1){animation-delay:.16s}
.auth-split .auth-card form .field:nth-of-type(2){animation-delay:.2s}
.auth-split .auth-card form .btn{animation:rise var(--dur-3) var(--ease-out) .24s both}
.auth-secure{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:12px;color:var(--ink-dim)}
.auth-secure svg{width:14px;height:14px;fill:none;stroke:var(--green);stroke-width:1.6}
.btn.is-busy{pointer-events:none}
.btn.is-busy::before{content:"";width:16px;height:16px;margin-right:8px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .auth-split{grid-template-columns:1fr}
  .auth-show{margin:10px;padding:26px 24px;min-height:auto;gap:12px}
  .auth-show h2{font-size:28px;max-width:none}
  .as-stage,.as-foot{display:none}
  .auth-side{padding:8px 14px 32px;align-items:start}
  .auth-split .auth-card{padding:26px 20px}
}
/* other public pages sit on the same backdrop */
.public{background:transparent!important}
.public-card{background:rgba(255,255,255,.76)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge)!important;border-radius:24px!important;box-shadow:0 30px 70px -30px rgba(14,27,21,.3)!important}

/* ---------- choices ---------- */
html[data-surface="solid"] body::before{animation:none;background:linear-gradient(180deg,#F4F7F3,#EEF2ED)}
html[data-surface="solid"] body::after{display:none}
html[data-surface="solid"] .panel,html[data-surface="solid"] .stat,html[data-surface="solid"] .ig-card,html[data-surface="solid"] .lead,html[data-surface="solid"] .help-banner{background:#fff!important}
html[data-surface="solid"] .side,html[data-surface="solid"] .topbar{background:rgba(255,255,255,.96)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-density="compact"] .view{padding:18px 26px 80px}
html[data-density="compact"] .panel-body{padding:12px 14px}
html[data-density="compact"] .panel-head{min-height:44px;padding:9px 14px}
html[data-density="compact"] .crm-table td{padding:9px 12px}
html[data-density="compact"] .nav a{padding:6px 10px}
html[data-density="compact"] .nav-ind{height:32px}
html[data-motion="calm"] body::before{animation:none}
/* Calm: short fades, no stagger, no ambient motion (premium.css motion section scales the durations) */
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  body::before{animation:none}
}
@media (max-width:900px){
  .side{background:rgba(255,255,255,.9)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
  .tabbar{background:rgba(255,255,255,.78)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-top:1px solid var(--glass-edge)!important}
  .view{padding:18px 14px calc(150px + env(safe-area-inset-bottom))}
}

/* ---------- fixes found on screen ---------- */
.hero{background:radial-gradient(120% 140% at 100% 0%,var(--green-2) 0%,var(--green) 40%,var(--green-ink) 100%)!important;border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 60px -28px var(--green)!important}
.hero .btn{background:#fff!important;color:var(--green-ink)!important;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)!important}
.hero .btn:hover{background:#F2FAF5!important}
.hero .btn-ghost,.hero .btn.btn-ghost{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.32)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.22)!important}
.hero-stat{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.18)!important;border-radius:16px!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.auth-show .as-logo{align-self:flex-start}
/* a button squeezed by the text beside it clipped its own label ("e Asia/Du"); the text wraps instead */
.btn{flex-shrink:0}
.auth-show p.as-lead{font-size:16px;line-height:1.55;opacity:.85;max-width:44ch;margin:0;animation:rise var(--dur-4) var(--ease-out) .16s both}
@media (min-width:901px){
  .side{overflow:hidden!important}
  .nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;margin:0 -4px;padding:0 4px;mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav-group{padding:11px 10px 4px!important}
  .nav a{padding:6.5px 10px}
  .nav-ind{height:33px}
}
.av-head,.av-tabs,.av-foot{flex:none}.av-tabs button{line-height:1.2}

/* Eve's panel */
.eve-face-btn{position:relative;border:0;background:none;padding:0;cursor:pointer;border-radius:50%;flex:none}
.eve-face-btn:hover .eve-orb{transform:scale(1.08)}
.eve-live{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#3CC48A;box-shadow:0 0 0 2px #fff}
.eve-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:#3CC48A;animation:ping 2.2s cubic-bezier(0,0,.2,1) 3}
@keyframes ping{75%,100%{transform:scale(2.2);opacity:0}}
.drawer.eve .eve-head{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));border-bottom-color:var(--glass-line)}
.drawer.eve .eve-orb.lg{width:44px;height:44px}
/* only the newest message rises in; the rest stay put when the panel redraws */
.drawer.eve .msg:last-child{animation:rise var(--dur-2) var(--ease-out) both}
.drawer.eve .msg.agent .bubble{background:rgba(255,255,255,.9);border-color:var(--glass-line);box-shadow:0 6px 18px -10px rgba(14,27,21,.2)}
.drawer.eve .msg.user .bubble{background:linear-gradient(180deg,var(--green-2),var(--green));box-shadow:0 8px 18px -10px var(--green)}
.drawer.eve .eve-orb.sm{width:28px;height:28px}
.eve-input .input{background:rgba(255,255,255,.9);border-color:rgba(14,27,21,.1)}
.eve-send{background:linear-gradient(180deg,var(--green-2),var(--green))!important;box-shadow:0 8px 18px -8px var(--green)}

/* ---------- scrolling that feels like a phone ---------- */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
html{-webkit-tap-highlight-color:transparent}
/* every click redraws the whole view, so the browser's scroll anchoring would pick a new anchor
   and shift the page by whatever opened above it (a filter row, a panel). The reader stays put instead. */
html,body{overflow-anchor:none}
html:not(.lenis){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:not(.lenis){scroll-behavior:auto}}
body::before{will-change:transform;contain:strict}
body::after{contain:strict}
.topbar{-webkit-backdrop-filter:saturate(1.6) blur(14px)!important;backdrop-filter:saturate(1.6) blur(14px)!important}
html.is-scrolling body::before{animation-play-state:paused}
#chat,.drawer.eve .chat,#ib-msgs,.ib-list,.modal-body,.av-body,.peek,.kanban,.board,.nav{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* boards only hold sideways movement, so a wheel at a board's end still scrolls the page */
.kanban,.board{overscroll-behavior-y:auto}
/* sideways strips show a soft fade on an edge with more to see (hscroll.js sets hs-l and hs-r) */
.hs-l{--hs-l:28px}
.hs-r{--hs-r:28px}
.hs-l,.hs-r{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--hs-l,0px),#000 calc(100% - var(--hs-r,0px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--hs-l,0px),#000 calc(100% - var(--hs-r,0px)),transparent 100%)}
.hs-drag{cursor:grabbing;user-select:none}
@media (max-width:900px){
  .kanban,.board,.mb-board,.hscroll{scroll-snap-type:x proximity;scroll-padding-inline:14px}
  .kanban > *,.board > *,.mb-board > *{scroll-snap-align:start}
}

/* ---------- Eve (eve-3d.js): one felt character, live where she is big, an animated picture where she is small ---------- */
/* the small round Eves: her head and sprout, breathing and blinking (models/eve-plush-v1/eve-orb.webp) */
.eve-orb{background:url("models/eve-plush-v1/eve-orb-still.webp") 50% 42%/cover no-repeat,radial-gradient(circle at 50% 30%,#fff,#DDEFE4)!important;box-shadow:0 0 0 2px #fff,0 4px 12px -4px rgba(14,27,21,.35)!important;filter:none!important;animation:none!important}
/* (her stills are tiny and show at once; eve-3d.js adds eve-anim once the animated pictures have arrived) */
html.eve-anim .eve-orb{background-image:url("models/eve-plush-v1/eve-orb.webp"),radial-gradient(circle at 50% 30%,#fff,#DDEFE4)!important}
.drawer.eve .eve-orb.lg{width:44px;height:44px}
/* a big Eve: her picture shows at once (moving once it has arrived) and stays on devices without 3D; the live Eve fades in
   over it, framed the same */
.eve-stage{flex:none;padding:10px 14px 0}
.eve3d-slot{position:relative;height:250px;border-radius:22px;overflow:hidden;background:radial-gradient(120% 90% at 50% 15%,#EEF8F2,#CDEAD9);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 30px -18px rgba(14,27,21,.35)}
.eve3d-slot::before{content:"";position:absolute;inset:0;background:url("models/eve-plush-v1/eve-still.webp") center/contain no-repeat;transition:opacity .5s ease}
html.eve-anim .eve3d-slot::before{background-image:url("models/eve-plush-v1/eve-idle.webp")}
.eve3d-slot:has(.eve3d-host.ready)::before{opacity:0}
.eve3d-wait{display:none}
.eve3d-host{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;cursor:pointer}
.eve3d-host.ready{opacity:1}
.eve3d-host canvas{display:block;width:100%!important;height:100%!important}
@media (max-width:640px){.eve3d-slot{height:200px}}

/* the floating Eve on every Desk page: drag her anywhere, make her smaller, Ask Eve */
/* every click goes through her to the page; eve-3d.js grabs her body only where no page control lies underneath */
.eve-float{position:fixed;z-index:44;width:150px;display:grid;gap:7px;user-select:none;-webkit-user-select:none;pointer-events:none;transition:opacity .18s ease;animation:efIn .55s var(--ease-out) backwards}
.eve-float.ef-see{opacity:.25}
.eve-float.ef-dragging{opacity:1}
html.ef-grab,html.ef-grab *{cursor:grab!important}
html:has(.eve-float.ef-dragging),html:has(.eve-float.ef-dragging) *{cursor:grabbing!important}
/* no frame: she stands on the page itself, with only her own soft floor shadow */
.eve-float .ef-stage{height:178px;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.eve-float .ef-bar{opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease}
.eve-float.ef-near .ef-bar,.eve-float:focus-within .ef-bar{opacity:1;transform:none;pointer-events:auto}
@media (hover:none){.eve-float .ef-bar{opacity:1;transform:none;pointer-events:auto}}
.ef-bar{display:flex;gap:6px;align-items:center}
.ef-ask{flex:1;height:30px;border:0;border-radius:999px;background:linear-gradient(180deg,var(--green-2),var(--green));color:#fff;font:600 12.5px/1 var(--sans);box-shadow:0 8px 18px -8px var(--green);cursor:pointer}
.ef-min{width:30px;height:30px;flex:none;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(14,27,21,.1);background:rgba(255,255,255,.92);box-shadow:0 6px 14px -8px rgba(14,27,21,.35);cursor:pointer}
.ef-min svg{width:12px;height:12px;fill:none;stroke:var(--ink-soft);stroke-width:1.8;stroke-linecap:round}
.ef-ask:focus-visible,.ef-min:focus-visible,.ef-open:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.ef-open{display:none}
.eve-float.min{width:auto}
.eve-float.min .ef-stage,.eve-float.min .ef-bar{display:none}
.eve-float.min .ef-open{display:block;width:60px;height:60px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;pointer-events:auto}
.eve-float.min .ef-open .eve-orb{display:block;width:60px;height:60px;border-radius:50%}
@keyframes efIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:640px){.eve-float{width:120px}.eve-float .ef-stage{height:144px;border-radius:22px}.ef-ask{font-size:12px}}
@media print{.eve-float{display:none}}

/* Eve on the sign-in screens: she stands on a soft light disc at the side of the green panel */
.auth-show .auth-eve{position:absolute;right:2%;bottom:56px;width:min(40%,330px);height:min(64%,420px);z-index:1;border-radius:0;overflow:visible;box-shadow:none;
  background:radial-gradient(circle at 50% 60%,rgba(236,248,241,.96) 0 33%,rgba(236,248,241,.35) 33.4%,rgba(236,248,241,0) 46%)}
.auth-show .as-stage{z-index:2}
.as-card:nth-child(2){left:14%}
@media (max-width:900px){
  .auth-show .auth-eve{right:6px;top:6px;bottom:auto;width:120px;height:150px}
  .auth-show h2,.auth-show p.as-lead{max-width:calc(100% - 118px)}
}

/* who is who */
.pchip{display:inline-flex;align-items:center;gap:4px;max-width:100%;margin:3px 0;padding:2px 9px;border-radius:999px;font:500 12px/1.5 var(--sans);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent;cursor:pointer}
.pchip.client{background:var(--green-wash);color:var(--green-ink)}
.pchip.lead{background:#EAF0FB;color:#2F4F8A}
.pchip.none{background:transparent;border-style:dashed;border-color:rgba(14,27,21,.25);color:var(--ink-soft)}
.pchip.none:hover{border-color:var(--green);color:var(--green-ink)}
.bk-who{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.pl-row{display:grid!important;grid-template-columns:130px 78px minmax(0,1fr) auto;align-items:center;gap:10px}
.pl-kind{font-size:12px;color:var(--ink-dim)}
.pl-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-rules{display:grid;gap:12px}
.pl-rule{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.pl-rule input{margin-top:3px}
.pl-rule > span{display:grid;gap:2px}
@media (max-width:640px){.pl-row{grid-template-columns:1fr auto}.pl-kind{display:none}}
.eve3d-slot.no3d .eve3d-wait{display:none}

/* keyboard focus: a field that is not a .input (the top search box and similar) still shows where focus is */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.input:focus-visible{outline:none}
/* a page control sits under her (eve-3d.js checkCover): see-through until it scrolls away; the hover fade still applies */
/* on her figure, not the window: the window's entrance animation runs again on each redraw and holds its opacity */
/* no fade between the two: the window is placed again on each redraw, which would start a fade over from full every time */
.eve-float .ef-stage{transition:none}
.eve-float.ef-cover .ef-stage,.eve-float.ef-see .ef-stage{opacity:.3}
.eve-float.ef-cover.ef-near:not(.ef-see) .ef-stage{opacity:1}
/* room at the end of every page, so its last buttons can be scrolled clear of her */
@media (min-width:901px){html:has(.eve-float:not(.min)) #view:not(.view-inbox){padding-bottom:max(var(--view-pad-bottom,0px),210px)}}

/* the pin on each menu item (views.js): shown on hover or focus, always on for a pinned page; never in the narrow rail */
.nav-li{position:relative}
.nav-pin{all:unset;position:absolute;right:6px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:grid;place-items:center;border-radius:6px;color:var(--ink-dim);opacity:0;cursor:pointer;transition:opacity .15s,background .15s}
.nav-pin svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.nav-li:hover .nav-pin,.nav-pin:focus-visible,.nav-pin.on{opacity:.75}
.nav-pin:hover{opacity:1;background:var(--surface-2)}
.nav-pin:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.nav-pin.on{color:var(--green)}
.nav-li:has(.count) .nav-pin:not(.on){right:30px}
html[data-rail="1"] .nav-pin{display:none}
@media (pointer:coarse){.nav-pin{opacity:.6}}