/* ===========================================================
   Evensteer Desk — premium layer.
   Simple like Apple's own apps: system type, calm surfaces, one
   accent (the Forest Light green), soft depth, quick and quiet
   motion. Loaded last; it only overrides.
   =========================================================== */

:root{
  --bg:#F4F6F3;
  --surface:#FFFFFF;
  --surface-2:#F8FAF7;
  --glass:rgba(250,251,249,.78);
  --hair:rgba(14,27,21,.08);
  --hair-2:rgba(14,27,21,.14);
  --ink:#0F1A15;
  --ink-soft:#44524A;
  --ink-dim:#6B7870;
  --green:#1B6B4E;
  --green-2:#22835F;
  --green-ink:#14533C;
  --green-wash:#E8F2EC;
  --green-soft:rgba(27,107,78,.10);
  --amber:#8A5A0B;
  --gold-wash:#FBF1DC;
  --red:#B4412B;
  --red-wash:#FBEAE6;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--display);
  /* the old typewriter labels become the system face; real code keeps a code face */
  --mono:var(--sans);
  --code:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --r:12px;
  --r-lg:16px;
  --r-xl:22px;
  --shadow:0 1px 1px rgba(14,27,21,.03),0 2px 6px rgba(14,27,21,.04),0 12px 32px rgba(14,27,21,.05);
  --shadow-lift:0 2px 4px rgba(14,27,21,.05),0 18px 44px rgba(14,27,21,.10);
  --shadow-pop:0 10px 30px rgba(14,27,21,.14),0 2px 6px rgba(14,27,21,.06);
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.16,1,.3,1);
  --side-w:252px;
  --paper:var(--bg);--paper-2:#EDF1EC;--card:var(--surface);--card-2:var(--surface-2);--line:var(--hair);--line-strong:var(--hair-2);
}

html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 14.5px/1.5 var(--sans);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
*,*::before,*::after{font-family:inherit}
code,kbd,.mono,pre,textarea.mono,input.mono{font-family:var(--code)!important}
h1,h2,h3,h4,.page-title,.public-title{font-family:var(--display);letter-spacing:-.022em}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:8px}
::selection{background:rgba(34,131,95,.22)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(14,27,21,.16);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(14,27,21,.28)}

/* every label, number and time in the same calm family; numbers line up */
.panel-head .eyebrow,.col-head,.stat .label,.field label,.f-label,.fg-head,.log-time,.log-event,.actor,.t,.task-meta,.crm-table th,.chip i,.tabs .tab i,.tabs .n,.th-sort,.mc-dow span,.cal-dow span,.room-badge,.pill,.small,.hint{font-family:var(--sans)!important;letter-spacing:-.003em!important;text-transform:none!important}
.value,.stat .value,.bar-value,.chart-value,td,.count,.pill,.mc-day{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:14px;padding:18px 12px 14px;background:linear-gradient(180deg,#FBFCFA 0%,#F5F8F4 100%);border-right:1px solid var(--hair);overflow-y:auto;scrollbar-width:thin}
.brand{display:flex;align-items:center;gap:10px;padding:2px 10px 4px}
.brand img{height:24px;width:auto}
.brand-tag{font:600 12px/1 var(--sans);letter-spacing:0;color:var(--green-ink);background:var(--green-wash);border:0;border-radius:999px;padding:4px 8px}
.side-search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid var(--hair);border-radius:10px;background:var(--surface);color:var(--ink-dim);font-size:13.5px;cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.side-search:hover{border-color:var(--hair-2);box-shadow:0 1px 6px rgba(14,27,21,.06)}
.side-search svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;flex:none}
.side-search span{flex:1;text-align:left}
.side-search kbd{font-size:10.5px;color:var(--ink-dim);background:var(--surface-2);border:1px solid var(--hair);border-radius:6px;padding:1px 5px}
.nav{display:flex;flex-direction:column;gap:1px}
.nav-group{font:600 12px/1 var(--sans);color:var(--ink-dim);padding:16px 10px 6px;letter-spacing:.01em!important;text-transform:none!important}
.nav-group:first-child{padding-top:4px}
.nav a{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;color:var(--ink-soft);font-size:13.5px;font-weight:450;transition:background .18s var(--ease),color .18s var(--ease)}
.nav a:hover{background:rgba(14,27,21,.045);color:var(--ink)}
.nav a.active{background:var(--surface);color:var(--green-ink);font-weight:600;box-shadow:0 1px 2px rgba(14,27,21,.06),0 0 0 1px var(--hair)}
.nav a.active::before{display:none}
.nav .ico{width:17px;height:17px;stroke:currentColor;opacity:.85;flex:none}
.nav a.active .ico{opacity:1;stroke:var(--green)}
.nav .count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--green);color:#fff;font:600 11px/20px var(--sans);text-align:center}
.side-foot{margin-top:auto;padding:10px 6px 0;border-top:1px solid var(--hair)}
.who{display:flex;align-items:center;gap:10px;border:0!important;padding:4px}
.who .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#1B6B4E,#2E9C72);color:#fff;font:600 12px/32px var(--sans);text-align:center;flex:none}
.who-text{display:grid;min-width:0}
.who-text b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-text span{font-size:12px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-note{display:none}

.main{min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;height:56px;padding:0 28px;background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid var(--hair)}
.crumb{font:600 14.5px/1 var(--display);color:var(--ink);letter-spacing:-.01em}
.crumb b{display:none}
.topbar .practice{display:none}
.topbar .menu-btn{display:none}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.icon-btn:hover{background:rgba(14,27,21,.06);color:var(--ink)}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bell{position:relative}
.bell-dot{position:absolute;top:-1px;right:-3px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font:600 9.5px/15px var(--sans);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.topbar .top-link{font-size:13.5px;font-weight:500;color:var(--ink-soft);padding:6px 10px;border-radius:9px}
.topbar .top-link:hover{background:rgba(14,27,21,.06);color:var(--ink)}
.ai-btn{display:none}

/* Eve's button and her mark: a soft living orb */
.eve-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 8px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);color:var(--ink);font:600 13.5px/1 var(--sans);cursor:pointer;box-shadow:0 1px 2px rgba(14,27,21,.05);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.eve-btn:hover{box-shadow:0 4px 14px rgba(27,107,78,.16);transform:translateY(-1px)}
.eve-orb{display:inline-block;width:20px;height:20px;border-radius:50%;flex:none;background:radial-gradient(circle at 32% 30%,#8FE3BE 0%,#38B583 38%,#1B6B4E 72%,#0F4A36 100%);box-shadow:inset 0 -2px 4px rgba(0,0,0,.18),0 0 0 3px rgba(56,181,131,.12);animation:orb 6s ease-in-out infinite}
.eve-orb.sm{width:24px;height:24px}
.eve-orb.lg{width:34px;height:34px}
@keyframes orb{0%,100%{filter:hue-rotate(0deg) saturate(1);transform:scale(1)}50%{filter:hue-rotate(-12deg) saturate(1.15);transform:scale(1.04)}}

/* ---------- page ---------- */
.view{width:100%;max-width:1200px;margin-inline:auto;padding:32px 40px 96px}
.view-enter{animation:pageIn .42s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:2px 0 22px}
.page-title{font-size:clamp(26px,2.4vw,32px);line-height:1.12;font-weight:700;letter-spacing:-.028em;color:var(--ink)}
.page-sub{color:var(--ink-dim);font-size:14.5px;line-height:1.5;margin-top:6px;max-width:64ch}
.page-sub b{color:var(--ink-soft);font-weight:600}
.head-actions{gap:8px}

/* tabs inside a section, as a quiet segmented row */
.subnav{display:inline-flex;gap:2px;padding:3px;margin:0 0 0 14px;border-radius:11px;background:rgba(14,27,21,.06)}
.subnav a{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:12px;font-weight:500;color:var(--ink-soft);transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
.subnav a:hover{color:var(--ink)}
.subnav a.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(14,27,21,.10)}
.subnav i{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;line-height:18px;text-align:center}

/* the tip at the top of a page: one quiet line, not a box */
.help-banner{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:none;padding:12px 14px;margin:0 0 20px;gap:12px;align-items:center}
.help-banner p{font-size:13.5px;color:var(--ink-soft)}
.help-banner p b{color:var(--ink);font-weight:600}
.hb-ico{background:var(--green-wash)!important;color:var(--green)!important;border-radius:10px!important}
.warn-banner{background:var(--gold-wash);border-color:#F0DFB8}

/* ---------- surfaces ---------- */
.panel,.ig-card,.stat,.public-card,.plan-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.panel{overflow:hidden}
.panel-head{min-height:52px;padding:12px 18px;border-bottom:1px solid var(--hair);gap:10px}
.panel-head .eyebrow{font:600 14.5px/1.3 var(--display)!important;color:var(--ink);letter-spacing:-.01em!important}
.panel-head .hint{font-size:12px;color:var(--ink-dim)}
.panel-body{padding:16px 18px}
.panel-foot{border-top:1px solid var(--hair);background:var(--surface-2);font-size:12px;color:var(--ink-dim)}
.stats,.grid.stats{gap:14px}
.stat{padding:18px 20px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stat:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.stat::after,.stat::before{display:none!important}
.stat .value{font:700 28px/1.1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.stat .label{font-size:13.5px;color:var(--ink-soft);margin-top:6px}
.stat .delta{font-size:12px;margin-top:8px}

/* ---------- controls ---------- */
.btn{height:36px;padding:0 15px;border-radius:10px;font:600 13.5px/1 var(--sans);letter-spacing:-.006em;background:var(--green);color:#fff;border:1px solid transparent;box-shadow:0 1px 2px rgba(14,27,21,.10),inset 0 1px 0 rgba(255,255,255,.12);transition:background .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{background:var(--green-ink);box-shadow:0 4px 12px rgba(27,107,78,.22)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-sm{height:30px;padding:0 12px;font-size:12px;border-radius:9px}
.btn-ghost,.btn.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--hair-2);box-shadow:0 1px 1px rgba(14,27,21,.04)}
.btn-ghost:hover,.btn.btn-ghost:hover{background:var(--surface-2);border-color:rgba(14,27,21,.22);box-shadow:0 1px 3px rgba(14,27,21,.08)}
.btn-quiet{border:0;background:none;color:var(--green);font-weight:500;cursor:pointer;border-radius:8px;padding:4px 6px}
.btn-quiet:hover{background:var(--green-soft)}
.btn-ai,.btn.btn-ai{background:var(--green)}
.btn-block{width:100%}
.input,select.input,textarea.input{border:1px solid var(--hair-2);background:var(--surface);border-radius:10px;font:400 14.5px/1.4 var(--sans);color:var(--ink);padding:9px 12px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.input:hover{border-color:rgba(14,27,21,.24)}
.input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.input::placeholder{color:#97A39B}
.input-sm{padding:6px 10px;font-size:13.5px;border-radius:8px}
.field label{font-size:12px!important;font-weight:550;color:var(--ink-soft)}
.check-line input,.perm input,input[type=checkbox],input[type=radio]{accent-color:var(--green)}
.seg{background:rgba(14,27,21,.05);border:0;border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;border-radius:8px;font-size:12px;font-weight:500;color:var(--ink-soft);padding:5px 12px;background:transparent}
.seg button.active,.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(14,27,21,.10)}

/* tabs: one underline that slides */
.tabs,.page-tabs{border-bottom:1px solid var(--hair);gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .tab,.tabs button{position:relative;border:0;background:none;padding:10px 12px;font-size:13.5px;font-weight:500;color:var(--ink-dim);border-radius:0;white-space:nowrap;transition:color .18s var(--ease)}
.tabs .tab:hover,.tabs button:hover{color:var(--ink)}
.tabs .tab.on,.tabs .tab.active,.tabs button.active,.tabs button[aria-selected="true"]{color:var(--ink);font-weight:600}
.tabs .tab.on::after,.tabs .tab.active::after,.tabs button.active::after,.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--green);animation:tabIn .28s var(--ease)}
@keyframes tabIn{from{transform:scaleX(.4);opacity:0}to{transform:none;opacity:1}}
.tabs .n,.tabs .tab i{font-style:normal;font-size:12px;color:var(--ink-dim);background:rgba(14,27,21,.06);border-radius:999px;padding:1px 6px;margin-left:4px}

.pill{border-radius:999px;font-size:12px;font-weight:550;padding:3px 9px;line-height:1.3}
.pill.ok{background:var(--green-wash);color:var(--green-ink)}
.pill.wait{background:var(--gold-wash);color:var(--amber)}
.pill.warn{background:var(--red-wash);color:#8E3522}
.pill.grey{background:rgba(14,27,21,.06);color:var(--ink-soft)}
.chip{border:1px solid var(--hair-2);background:var(--surface);border-radius:999px;font-size:12px;padding:5px 11px;color:var(--ink-soft);transition:all .18s var(--ease)}
.chip:hover{border-color:var(--green);color:var(--green-ink)}
.chip.active,.chip.on{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- tables and lists ---------- */
.table-panel{overflow:hidden}
.crm-table th{background:var(--surface-2);font-size:12px!important;font-weight:600;color:var(--ink-dim);padding:11px 14px;border-bottom:1px solid var(--hair)}
.crm-table td{padding:13px 14px;border-bottom:1px solid var(--hair);font-size:13.5px}
.crm-table tbody tr{transition:background .15s var(--ease)}
.crm-table tbody tr:hover{background:#F6F9F5}
.crm-table tbody tr:last-child td{border-bottom:0}
.mini-avatar{background:linear-gradient(135deg,#1B6B4E,#2E9C72);font-family:var(--sans)!important;font-weight:600;font-size:9px}
.avatar{background:linear-gradient(135deg,#1B6B4E,#2E9C72);color:#fff;font-family:var(--sans)}
.act,.log-row,.member,.task{border-bottom-color:var(--hair)}
.empty{color:var(--ink-dim);font-size:13.5px;padding:28px 18px;text-align:center}

/* ---------- overlays ---------- */
.scrim,.drawer-scrim,.nav-scrim{background:rgba(15,26,21,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal{border-radius:var(--r-xl);border:1px solid var(--hair);box-shadow:var(--shadow-pop);animation:popIn .32s var(--spring) both}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.pop{border-radius:14px;border:1px solid var(--hair);box-shadow:var(--shadow-pop);animation:popIn .22s var(--ease) both}
.toast{border-radius:14px;background:rgba(20,32,26,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-size:13.5px;box-shadow:var(--shadow-pop)}
.fab{bottom:24px;right:24px}
.fab > button,.fab-main{box-shadow:0 10px 26px rgba(27,107,78,.32)!important}

/* ---------- Eve ---------- */
.drawer.eve{display:flex;flex-direction:column;width:min(440px,100%);background:var(--surface);border-left:1px solid var(--hair);box-shadow:-24px 0 60px rgba(14,27,21,.14);animation:eveIn .38s var(--ease) both}
@keyframes eveIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.eve-head{display:flex;align-items:center;gap:12px;padding:16px 16px 14px 18px;border-bottom:1px solid var(--hair)}
.eve-title{display:grid;flex:1;min-width:0}
.eve-title b{font:700 16px/1.2 var(--display);letter-spacing:-.015em}
.eve-title span{font-size:12px;color:var(--ink-dim)}
.drawer.eve .chat{flex:1;overflow-y:auto;padding:18px 16px 10px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,#FBFCFA,#F6F9F5)}
.drawer.eve .msg{display:flex;gap:9px;align-items:flex-end;max-width:100%}
.drawer.eve .msg.user{justify-content:flex-end}
.drawer.eve .bubble{max-width:86%;padding:10px 13px;border-radius:18px;font-size:14.5px;line-height:1.5;box-shadow:0 1px 1px rgba(14,27,21,.04)}
.drawer.eve .msg.agent .bubble{background:var(--surface);border:1px solid var(--hair);border-bottom-left-radius:6px;color:var(--ink)}
.drawer.eve .msg.user .bubble{background:var(--green);color:#fff;border-bottom-right-radius:6px}
.drawer.eve .bubble p{margin:0}
.drawer.eve .bubble p + p,.drawer.eve .bubble p + ul,.drawer.eve .bubble ul + p{margin-top:6px}
.drawer.eve .bubble p.eve-lead{font-weight:600}
.drawer.eve .bubble ul{margin:6px 0 0;padding-left:18px;list-style:disc}
.drawer.eve .bubble li{margin:2px 0}
.drawer.eve .bubble li::marker{color:var(--green)}
.drawer.eve .w{opacity:0;animation:wIn .22s var(--ease) forwards;animation-delay:var(--d)}
@keyframes wIn{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:none}}
.dots{display:inline-flex;gap:4px;padding:4px 2px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-dim);opacity:.4;animation:dot 1.1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:.9}}
.drawer.eve .tool-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.drawer.eve .tool{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--green-ink);background:var(--green-wash);border-radius:999px;padding:3px 9px}
.drawer.eve .tool svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.drawer.eve .tool i{font-style:normal;color:var(--ink-soft)}
.eve-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.eve-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--green-ink);background:var(--green-wash);border-radius:999px;padding:5px 11px;transition:background .18s var(--ease)}
.eve-link:hover{background:#D9EAE0}
.drawer.eve .suggest{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px 0;border-top:1px solid var(--hair);background:var(--surface)}
.eve-input{display:flex;gap:8px;align-items:center;padding:10px 14px 14px;background:var(--surface)}
.eve-input .input{flex:1;height:42px;border-radius:999px;padding:0 16px;background:var(--surface-2)}
.eve-send{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;background:var(--green);color:#fff;cursor:pointer;flex:none;transition:transform .15s var(--ease),background .18s var(--ease)}
.eve-send:hover{background:var(--green-ink)}
.eve-send:active{transform:scale(.94)}
.eve-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- phones and tablets ---------- */
.tabbar,.nav-scrim{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;z-index:60;width:min(300px,86vw);height:100%;flex-direction:column;align-items:stretch;overflow-y:auto;padding:18px 12px 24px;border-right:1px solid var(--hair);border-bottom:0;transform:translateX(-102%);transition:transform .32s var(--ease);box-shadow:none}
  .side .nav{flex-direction:column;gap:1px}
  .side .nav a{padding:10px 12px;font-size:14.5px;white-space:normal}
  .side .nav .count,.side .side-foot{display:flex}
  body.nav-open .side{transform:none;box-shadow:24px 0 60px rgba(14,27,21,.18)}
  body.nav-open .nav-scrim{display:block;position:fixed;inset:0;z-index:55}
  .topbar .menu-btn{display:inline-grid}
  .topbar{padding:0 10px 0 6px;height:52px}
  .topbar .top-link{display:none}
  .view{padding:20px 16px 110px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-top:1px solid var(--hair)}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;padding:4px 0;border:0;background:none;color:var(--ink-dim);font:500 10.5px/1 var(--sans);cursor:pointer}
  .tabbar .ico{width:22px;height:22px;stroke:currentColor;fill:none}
  .tabbar a.on{color:var(--green)}
  .tabbar i{position:absolute;top:2px;left:calc(50% + 7px);width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--bg)}
  .fab{bottom:calc(76px + env(safe-area-inset-bottom));right:16px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))!important}
  .page-head{align-items:flex-start}
  .drawer.eve{width:100%;border-left:0}
  .eve-btn{padding:0 10px 0 6px}
}
@media (max-width:560px){
  .page-title{font-size:26px}
  .eve-btn span:last-child{display:none}
  .eve-btn{padding:0 6px;border-radius:50%;width:34px;justify-content:center}
  .crumb.has-sub{display:none}
  .subnav{margin-left:2px;overflow-x:auto;max-width:calc(100vw - 150px);scrollbar-width:none}
  .stat .value{font-size:24px}
}
.is-public .tabbar,.is-admin .tabbar{display:none!important}

/* respect people who prefer less motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .drawer.eve .w{opacity:1}
}
@media (max-width:560px){
  .stats,.grid.stats,.money{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .money .stat{min-height:0}
  .stat{padding:14px 14px}
  .stat .value{font-size:21px}
  .stat .label{font-size:12px}
  .stat .delta{font-size:12px}
}
/* phone calendar: each booking is a coloured dot under the day */
@media (max-width:640px){
  .mc-grid .mc-ev{font-size:0;width:8px;height:8px;padding:0;border-radius:50%;display:inline-block;margin:1px 1px 0 0}
  .mc-grid .mc-cell{flex-direction:row;flex-wrap:wrap;align-content:flex-start}
  .mc-grid .mc-day{flex-basis:100%}
  .mc-grid .mc-more{font-size:12px;padding-left:2px}
}

/* ---------- filter bars (Reports, Activity) ---------- */
.filter-bar{padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.fb-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.fb-row.chips{gap:8px}
.fb-range{font-size:13.5px;color:var(--ink-soft);font-weight:500}
.fb-note{margin:0}
.seg.wrap{flex-wrap:wrap;display:inline-flex}
.filter-bar .log-search{flex:1 1 220px;max-width:340px}
.chip.active span{margin-left:4px;opacity:.7}
.stat .delta.up{color:var(--green-2)}
.stat .delta.down{color:var(--red)}
.stat .delta.dim{color:var(--ink-dim)}

/* ---------- dense charts (a bar per day) ---------- */
.chart.dense{gap:3px}
.chart.dense .chart-label{font-size:12px;white-space:nowrap}
.chart.dense .chart-col:hover .chart-bar{filter:brightness(1.15)}

/* ---------- history rows ---------- */
.hist-row{display:grid;grid-template-columns:64px 74px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 18px;border-bottom:1px solid var(--hair);font-size:13.5px}
.hist-row:last-child{border-bottom:0}
.hist-row .log-time{padding-top:2px;font-variant-numeric:tabular-nums}
.hist-row .pill,.hist-row .room-badge{justify-self:start}
.hist-main{min-width:0;line-height:1.45}
.hist-changes{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px}
.hist-changes li{font-size:12px;color:var(--ink-soft);overflow-wrap:anywhere}
.hc-field{font-weight:600;color:var(--ink)}
.hc-from{color:var(--ink-dim);text-decoration:line-through;text-decoration-color:rgba(14,27,21,.25)}
.hc-to{color:var(--ink)}
.hc-arrow{color:var(--ink-dim);margin:0 2px}
.actor.is-flow{background:var(--green-wash);color:var(--green-ink)}
.hist-filters{margin:4px 0 10px}
.hist-filters i{font-style:normal;opacity:.6;margin-left:3px}
.hist .log-day-label,.tab-body .log-day-label{border-radius:8px}

/* ---------- documents ---------- */
.doc-drop{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:18px 14px;border:1.5px dashed var(--hair-2);border-radius:var(--r);background:var(--surface-2);cursor:pointer;transition:border-color .2s,background .2s;margin-bottom:10px}
.doc-drop:hover,.doc-drop.over,.doc-drop:focus-within{border-color:var(--green);background:var(--green-wash)}
.doc-drop-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:700}
.doc-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--hair)}
.doc-row:last-child{border-bottom:0}
.doc-ico{flex:0 0 40px;height:40px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.04em;background:var(--green-wash);color:var(--green-ink)}
.doc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.doc-main b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- workflow: pick any module ---------- */
.obj-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;min-width:min(520px,86vw)}
.obj-group{display:flex;flex-direction:column}
.obj-group-label{font-size:12px;font-weight:600;color:var(--ink-dim);padding:6px 9px 2px}
.head-actions .pop:has(.obj-pick){max-height:min(560px,70vh)}
@media (max-width:900px){.obj-pick{grid-template-columns:1fr;min-width:0}}

@media (max-width:640px){
  .hist-row{grid-template-columns:56px minmax(0,1fr);padding:10px 12px}
  .hist-row .pill,.hist-row .room-badge{grid-column:2;grid-row:1}
  .hist-row .hist-main{grid-column:2}
  .hist-row .actor{grid-column:2;justify-self:start}
  .doc-row{flex-wrap:wrap}
  .doc-row .row-actions{width:100%;justify-content:flex-end}
  .filter-bar .log-search{max-width:none}
  .log-hint{display:none}
}

/* ---------- record pages: hero, about column, tabs ---------- */
.rec-page .rec-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.rec-hero{padding:20px 22px 0;margin-bottom:14px;overflow:hidden}
.rec-hero-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.rec-hero-who{flex:1;min-width:220px}
.rec-hero-who .page-title{margin:0;font-size:28px}
.rec-hero-who .page-sub{margin:4px 0 0;max-width:62ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rec-hero-who .chips{margin-top:8px}
.rec-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));margin:18px -22px 0;border-top:1px solid var(--hair);background:var(--surface-2)}
.rec-fact{padding:12px 22px;border-right:1px solid var(--hair);min-width:0;display:flex;flex-direction:column;gap:3px}
.rec-fact:last-child{border-right:0}
.rec-fact dt{font-size:12px;color:var(--ink-dim);font-weight:500}
.rec-fact dd{margin:0;font-size:14.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap;overflow-wrap:anywhere}
.mini-bar{display:inline-block;width:56px;height:6px;border-radius:99px;background:var(--hair);overflow:hidden;vertical-align:middle}
.mini-bar b{display:block;height:100%;background:var(--green);border-radius:99px}
.rec-layout{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:16px;align-items:start}
.rec-about{position:sticky;top:72px;max-height:calc(100vh - 92px);display:flex;flex-direction:column}
.rec-about .about-list{overflow:auto;display:flex;flex-direction:column;gap:0;padding-top:4px}
.about-list .f-row{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--hair);min-height:0}
.about-list .f-row:last-child{border-bottom:0}
.about-list .f-row.full,.about-list .f-row.editing{grid-template-columns:1fr}
.about-list .f-label{font-size:12px;margin:0}
.about-list .f-value{font-size:13.5px;padding:4px 6px;margin:-4px -6px;border-radius:7px;text-align:left;min-height:0}
.rec-main{min-height:420px}
.rec-main .tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.rec-main .tabs::-webkit-scrollbar{display:none}
.rec-main .tab{white-space:nowrap}
.tab-body{animation:tabIn .28s var(--ease, ease) both}
@keyframes tabIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tab-body > .panel{box-shadow:none;border:0;margin:0;background:transparent}
.tab-body > .panel > .panel-head{display:none}
.ov-block{padding:14px 0;border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:8px}
.ov-block:last-child{border-bottom:0}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;border-bottom:1px solid var(--hair)}
.ov-grid .ov-block{border-bottom:0}
.ov-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ov-head .hint,.ov-head .btn-quiet{margin-left:auto}
.ov-block .notes{min-height:120px}
@media (prefers-reduced-motion:reduce){.tab-body{animation:none}}
@media (max-width:980px){
  .rec-layout{grid-template-columns:1fr}
  .rec-about{position:static;max-height:none}
}
@media (max-width:640px){
  .rec-hero{padding:16px 16px 0}
  .rec-facts{margin:14px -16px 0;grid-template-columns:1fr 1fr}
  .rec-fact{padding:10px 16px;border-bottom:1px solid var(--hair)}
  .rec-fact:nth-child(2n){border-right:0}
  .rec-hero-who .page-title{font-size:23px}
  .rec-hero .head-actions{width:100%}
  .ov-grid{grid-template-columns:1fr}
  .about-list .f-row{grid-template-columns:96px minmax(0,1fr)}
}

/* ---------- settings: grouped list + detail ---------- */
.set-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}
.set-nav{position:sticky;top:72px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 92px);overflow:auto;padding-bottom:8px}
.set-group{display:flex;flex-direction:column;gap:2px}
.set-group-label{font-size:12px;font-weight:600;color:var(--ink-dim);padding:0 10px 4px}
.set-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--ink);transition:background .15s}
.set-item:hover{background:rgba(14,27,21,.05)}
.set-item.on{background:var(--surface);box-shadow:0 1px 3px rgba(14,27,21,.10)}
.set-ico{flex:0 0 30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:13.5px;font-weight:700;background:var(--green-wash);color:var(--green-ink)}
.set-item.on .set-ico{background:var(--green);color:#fff}
.set-text{display:flex;flex-direction:column;min-width:0;gap:1px}
.set-text b{font-size:13.5px;font-weight:600}
.set-text span{font-size:12px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-go{margin-left:auto;color:var(--ink-dim);font-size:12px}
.set-title{margin:2px 0 14px}
.set-title h2{margin:0;font-size:22px;letter-spacing:-.01em}
.set-title p{margin:2px 0 0}
@media (max-width:900px){
  .set-layout{grid-template-columns:1fr}
  .set-nav{position:static;max-height:none;flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none;padding-bottom:4px}
  .set-nav::-webkit-scrollbar{display:none}
  .set-group{flex-direction:row;gap:6px;flex:none}
  .set-group-label{display:none}
  .set-item{width:auto;flex:0 0 auto;padding:6px 10px}
  .set-text span,.set-go{display:none}
  .set-ico{flex-basis:24px;height:24px;font-size:12px}
}

/* ---------- task board: editable columns ---------- */
.tk-col-head{display:flex;align-items:center;gap:6px}
.tk-col-head .n{margin-left:2px}
.tk-col-menu{margin-left:auto}
.tk-col-menu summary{list-style:none;cursor:pointer}
.tk-col-menu summary::-webkit-details-marker{display:none}
.tk-col-rename{display:flex;gap:6px;width:100%}
.tk-col-rename .input{flex:1;min-width:0}
.tk-col-add{display:flex;flex-direction:column;gap:8px;border:1.5px dashed var(--hair-2);background:transparent;justify-content:flex-start}
.opt-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.opt-row{display:flex;align-items:center;gap:6px}
.opt-row .input{flex:1;max-width:340px}
.opt-add{max-width:420px}
.tk-board{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.tk-board .tk-col{scroll-snap-align:start}
.tk-board .more-pop{right:0;left:auto}

/* ---------- integrations summary ---------- */
.ig-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}
.ig-sum{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.ig-sum b{font-size:22px;letter-spacing:-.01em}
.ig-sum span{font-size:12px;color:var(--ink-dim)}
.ig-sum.warn b{color:var(--red)}
@media (max-width:640px){.ig-summary{grid-template-columns:1fr 1fr}}

/* ---------- forms ---------- */
.fm-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.fm-list{display:flex;flex-direction:column;gap:6px;position:sticky;top:72px}
.fm-item{display:flex;align-items:center;gap:10px;text-align:left;width:100%;border:0;background:transparent;border-radius:12px;padding:10px 12px;cursor:pointer;transition:background .15s}
.fm-item:hover{background:rgba(14,27,21,.05)}
.fm-item.on{background:var(--surface);box-shadow:var(--shadow)}
.fm-item-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fm-item-main b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-item-main span{font-size:12px;color:var(--ink-dim)}
.fm-dot{width:8px;height:8px;border-radius:50%;background:var(--hair-2);flex:0 0 8px}
.fm-dot.live{background:var(--green);box-shadow:0 0 0 3px var(--green-wash)}
.fm-new{margin-bottom:16px}
.fm-top{display:flex;align-items:center;gap:10px;padding:14px 18px 8px;flex-wrap:wrap}
.fm-name{font:600 18px/1.2 var(--sans);border:1px solid transparent;border-radius:8px;padding:4px 8px;margin-left:-8px;background:transparent;color:var(--ink);min-width:0;flex:0 1 340px}
.fm-name:hover,.fm-name:focus{border-color:var(--hair-2);background:var(--surface);outline:none}
.dest-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.dest-card{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--hair-2);border-radius:12px;padding:12px;cursor:pointer;transition:border-color .15s,background .15s}
.dest-card:hover{border-color:var(--green-2)}
.dest-card.on,.dest-card:has(input:checked){border-color:var(--green);background:var(--green-wash)}
.dest-card input{accent-color:var(--green);margin-top:3px}
.dest-card > span{display:flex;flex-direction:column;gap:2px}
.fb2{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:22px;align-items:start}
.fb2-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.fb2-sticky{position:sticky;top:76px;background:var(--surface-2);border-radius:16px;padding:18px;max-height:calc(100vh - 100px);overflow:auto}
.fb2-sticky .tc-cat{margin-bottom:10px}
.design-stage.dark{background:#0B1410}
.fq-page{display:flex;flex-direction:column;gap:8px}
.fq-page-head{display:flex;align-items:center;gap:8px;margin-top:6px}
.fq-page-head .input{flex:1}
.fq2{border:1px solid var(--hair);border-radius:12px;background:var(--surface);transition:box-shadow .2s,border-color .2s}
.fq2.open{border-color:var(--green-2);box-shadow:0 6px 22px rgba(14,27,21,.08)}
.fq2-head{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;flex-wrap:wrap}
.fq2-head b{flex:1;min-width:140px;font-weight:600;font-size:13.5px}
.fq2-type{font-size:12px;font-weight:600;color:var(--green-ink);background:var(--green-wash);border-radius:6px;padding:2px 7px;white-space:nowrap}
.fq2-map{font-size:12px;color:var(--ink-dim)}
.fq2-map.on{color:var(--green-ink);font-weight:500}
.fq2-move{display:flex;gap:2px}
.fq2-body{padding:4px 14px 14px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--hair);animation:tabIn .22s ease both}
.q-show{display:flex;gap:6px;flex-wrap:wrap}
.fq-add2{border:1.5px dashed var(--hair-2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.q-palette{display:flex;flex-wrap:wrap;gap:6px}
.send-grid{display:flex;flex-direction:column;gap:12px;max-width:860px}
.map-table{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.map-row{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--hair)}
.map-row:last-child{border-bottom:0}
.map-q{display:flex;align-items:center;gap:8px;font-size:13.5px;min-width:0}
.map-arrow{color:var(--ink-dim);text-align:center}
.also-list{display:flex;flex-direction:column;gap:8px}
.also{border:1px solid var(--hair);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.also.on{border-color:var(--green-2);background:var(--green-wash)}
.design-list{gap:14px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:var(--sw);box-shadow:0 0 0 1px var(--hair-2);cursor:pointer;transition:transform .15s}
.swatch:hover{transform:scale(1.08)}
.swatch.on{box-shadow:0 0 0 2px var(--ink)}
.swatch.custom{background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red);position:relative;overflow:hidden}
.swatch.custom input{opacity:0;position:absolute;inset:0;cursor:pointer}
.share-link{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
.share-link .inline-add .input{flex:1;min-width:0}
.code-tabs{margin-bottom:6px}
.code-box{position:relative}
.code-box textarea{width:100%;font-size:12px;line-height:1.5;background:#0E1B15;color:#D6E5DC;border-color:#0E1B15;padding:14px 14px 44px}
.code-copy{position:absolute;right:10px;bottom:12px}
.steps-list{margin:4px 0 10px;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.ans-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ans-bar .input{max-width:240px}
.ans-list{display:flex;flex-direction:column;gap:6px}
.ans{border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--surface)}
.ans.open{border-color:var(--green-2)}
.ans-head{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;cursor:pointer;flex-wrap:wrap}
.ans-when{font-size:12px;color:var(--ink-dim);min-width:118px;font-variant-numeric:tabular-nums}
.ans-who{flex:1;min-width:160px;display:flex;flex-direction:column}
.ans-tags{display:flex;gap:6px;flex-wrap:wrap}
.ans-body{padding:4px 14px 14px;border-top:1px solid var(--hair);animation:tabIn .22s ease both}
.ans-dl{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:6px 14px;margin:10px 0 12px}
.ans-dl dt{font-size:12px;color:var(--ink-dim)}
.ans-dl dd{margin:0;font-size:13.5px;overflow-wrap:anywhere;white-space:pre-wrap}
.evf-page{padding-top:40px;padding-bottom:40px}
.evf-host{width:100%;display:flex;justify-content:center}
@media (max-width:1100px){.fb2{grid-template-columns:1fr}.fb2-sticky{position:static;max-height:none}}
@media (max-width:900px){.fm-layout{grid-template-columns:1fr}.fm-list{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none}.fm-item{flex:0 0 220px}.dest-cards{grid-template-columns:1fr}.share-link{grid-template-columns:1fr}}
@media (max-width:640px){.map-row{grid-template-columns:1fr}.map-arrow{display:none}.ans-dl{grid-template-columns:1fr}.ans-dl dt{margin-top:6px}}

/* ---------- booking page settings ---------- */
.bp-stage{background:#EEF1EC;padding:14px}
.bp-stage.dark{background:#0B1410}
.bp-stage .bkp{max-width:none}
.bp-stage .bkp-shell{grid-template-columns:1fr}
.bp-stage .bkp-side{border-right:0;border-bottom:1px solid var(--bkp-line)}
.bp-events{display:flex;flex-direction:column;gap:6px}
.bp-ev{display:flex;align-items:center;gap:8px;border:1px solid var(--hair);border-radius:10px;padding:8px 10px}
.bp-share{margin-top:18px}

/* ---------- motion: calm, quick, only when something changes ---------- */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--spring-soft:cubic-bezier(.16,1,.3,1)}
.view-enter > *:nth-child(5){animation-delay:.16s}
.view-enter > *:nth-child(6){animation-delay:.2s}
.view-enter > *:nth-child(n+7){animation-delay:.24s}
/* cards inside a page arrive one after another */
.view-enter :is(.grid.stats,.ig-grid,.list-cards,.ig-summary,.dest-cards,.bp-events,.fm-list,.set-nav) > *{animation:rise .45s var(--ease-out) both}
.view-enter :is(.grid.stats,.ig-grid,.list-cards,.ig-summary,.dest-cards,.bp-events,.fm-list) > *:nth-child(2){animation-delay:.05s}
.view-enter :is(.grid.stats,.ig-grid,.list-cards,.ig-summary,.dest-cards,.bp-events,.fm-list) > *:nth-child(3){animation-delay:.1s}
.view-enter :is(.grid.stats,.ig-grid,.list-cards,.ig-summary,.dest-cards,.bp-events,.fm-list) > *:nth-child(4){animation-delay:.15s}
.view-enter :is(.grid.stats,.ig-grid,.list-cards,.ig-summary,.dest-cards,.bp-events,.fm-list) > *:nth-child(n+5){animation-delay:.2s}
/* things you can click lift a little under the pointer */
:is(.ig-card,.list-link,.list-card,.event-card,.fm-item,.dest-card,.su-card,.stat,.rec-fact){transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .2s,background .2s}
:is(.ig-card,.list-link,.event-card,.su-card):hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(14,27,21,.10)}
.btn,.icon-btn,.chip,.seg button,.set-item,.swatch{transition:transform .12s var(--ease-out),background .18s,color .18s,box-shadow .18s,border-color .18s}
.btn:active,.icon-btn:active,.chip:active,.seg button:active,.set-item:active{transform:scale(.97)}
.tabs .tab{transition:color .2s,border-color .25s var(--ease-out)}
.tk-card,.crm-card{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.tk-card:hover,.crm-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,27,21,.10)}

/* ---------- Settings: names, words, lists ---------- */
.words-grid{display:flex;flex-direction:column;gap:12px}
.word-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair)}
.word-row > div{display:flex;flex-direction:column}
.word-row .inline-label .input{flex:1;min-width:0}
.menu-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:10px}
.menu-name{display:flex;flex-direction:column;gap:4px}
.lists-top{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.list-link{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:1px solid var(--hair);background:var(--surface);border-radius:14px;padding:14px 16px;cursor:pointer;box-shadow:var(--shadow)}
.list-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.list-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.list-card{border:1px solid var(--hair);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.list-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.list-card .opt-row .input{max-width:none}
@media (max-width:640px){.word-row{grid-template-columns:1fr}.lists-top{grid-template-columns:1fr}}

/* ---------- guided setup ---------- */
body.is-setup{background:radial-gradient(1200px 600px at 10% -10%,rgba(27,107,78,.10),transparent 60%),radial-gradient(900px 500px at 110% 110%,rgba(47,111,237,.08),transparent 60%),var(--bg)}
.su-wrap{min-height:100vh;display:grid;place-items:center;padding:32px 16px;box-sizing:border-box}
.su-card-wrap{width:min(720px,100%);background:var(--surface);border-radius:26px;box-shadow:0 2px 6px rgba(14,27,21,.05),0 30px 80px rgba(14,27,21,.12);border:1px solid var(--hair);padding:26px 30px 22px;display:flex;flex-direction:column;gap:18px}
.su-enter{animation:suIn .5s var(--ease-out) both}
.su-enter .su-body > *{animation:rise .5s var(--ease-out) both}
.su-enter .su-body > *:nth-child(2){animation-delay:.06s}
.su-enter .su-body > *:nth-child(3){animation-delay:.12s}
.su-enter .su-body > *:nth-child(4){animation-delay:.18s}
.su-enter .su-body > *:nth-child(n+5){animation-delay:.24s}
@keyframes suIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.su-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.su-logo{height:22px}
.su-dots{display:flex;gap:6px}
.su-dots span{width:8px;height:8px;border-radius:99px;background:var(--hair-2);transition:width .35s var(--ease-out),background .3s}
.su-dots span.done{background:var(--green-2)}
.su-dots span.on{width:26px;background:var(--green)}
.su-body{display:flex;flex-direction:column;gap:14px}
.su-title{font-size:30px;letter-spacing:-.02em;line-height:1.15;margin:0}
.su-sub{margin:-6px 0 4px;color:var(--ink-dim);font-size:14.5px}
.su-label{font-weight:600;font-size:13.5px;margin-top:4px}
.su-big{font-size:16px;padding:12px 14px}
.su-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.su-card{display:flex;flex-direction:column;gap:3px;text-align:left;border:1.5px solid var(--hair-2);background:var(--surface);border-radius:14px;padding:14px;cursor:pointer}
.su-enter .su-card{animation:rise .45s var(--ease-out) both;animation-delay:calc(var(--i) * 40ms + .1s)}
.su-card span{font-size:12px;color:var(--ink-dim)}
.su-card.on{border-color:var(--green);background:var(--green-wash);box-shadow:0 0 0 3px var(--green-wash)}
.su-words .form-grid .field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-dim)}
.su-preview{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;border-radius:14px;background:var(--surface-2)}
.su-nav-item{background:var(--surface);border-radius:9px;padding:6px 12px;font-weight:600;font-size:13.5px;box-shadow:var(--shadow)}
.su-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.su-chip{display:inline-flex;align-items:center;gap:2px;background:var(--green-wash);border:1px solid rgba(27,107,78,.25);border-radius:99px;padding:3px 4px 3px 12px}
.su-enter .su-chip{animation:pop .3s var(--ease-out) both;animation-delay:calc(var(--i) * 30ms + .1s)}
.su-chip input{border:0;background:transparent;font:600 13.5px var(--sans);color:var(--green-ink);outline:none;min-width:3ch;max-width:22ch;padding:4px 0}
.su-chip button{border:0;background:transparent;width:24px;height:24px;border-radius:50%;cursor:pointer;color:var(--green-ink);opacity:.6}
.su-chip button:hover{opacity:1;background:rgba(14,27,21,.08)}
.su-chip-add{display:inline-flex}
.su-chip-add input{border:1.5px dashed var(--hair-2);border-radius:99px;padding:7px 12px;font:13.5px var(--sans);background:transparent;width:120px;outline:none;transition:width .25s var(--ease-out),border-color .2s}
.su-chip-add input:focus{border-color:var(--green);width:180px}
.su-chip-add button{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}
.su-fixed{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.su-fixed .input{max-width:170px}
.su-mods{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:46vh;overflow:auto;padding-right:4px}
.su-mod{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--hair);border-radius:12px;padding:10px 12px;cursor:pointer;transition:border-color .2s,background .2s}
.su-enter .su-mod{animation:rise .4s var(--ease-out) both;animation-delay:calc(var(--i) * 25ms + .1s)}
.su-mod.on{border-color:var(--green-2);background:var(--green-wash)}
.su-mod > span:last-child{display:flex;flex-direction:column}
.su-swatches .swatch{width:40px;height:40px}
.su-sample{display:flex;align-items:center;gap:12px;border:1px solid var(--hair);border-radius:16px;padding:14px;max-width:420px}
.su-sample-dot{width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:700;transition:background .3s}
.su-sample > div{flex:1;display:flex;flex-direction:column}
.su-sample > div span{font-size:13.5px;color:var(--ink-dim)}
.su-sample-btn{background:var(--c);color:#fff;border-radius:10px;padding:8px 14px;font-weight:600;transition:background .3s}
.su-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:10px 0}
.su-tick{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:30px;animation:popIn .55s var(--spring-soft) both;box-shadow:0 0 0 10px var(--green-wash)}
.su-summary{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:6px;color:var(--ink-soft)}
.su-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--hair);padding-top:16px}
.su-next{min-width:140px}
.su-next[disabled]{opacity:.45;cursor:default}
@media (max-width:640px){.su-card-wrap{padding:20px 18px;border-radius:20px}.su-title{font-size:24px}.su-cards,.su-mods{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .view-enter *,.su-enter,.su-enter *,.su-tick{animation:none!important}
  :is(.ig-card,.list-link,.event-card,.su-card,.tk-card,.crm-card):hover{transform:none}
}

body.is-setup .shell{display:block;max-width:none;padding:0}
.su-title{font-weight:700;font-family:var(--display, var(--sans))}

/* ---------- admin: the same calm look as the Desk ---------- */
.is-admin .shell{grid-template-columns:250px minmax(0,1fr)}
.aside-admin{background:linear-gradient(180deg,#FBFCFA 0%,#F5F8F4 100%)!important;color:var(--ink)!important;border-right:1px solid var(--hair);padding:18px 12px 14px!important;gap:14px!important}
.aside-admin .brand img{height:24px!important}
.aside-admin .brand-tag{color:var(--green-ink)!important;background:var(--green-wash)!important;border-color:transparent!important}
.aside-admin .nav a{color:var(--ink-soft)!important;display:flex;align-items:center;gap:10px}
.aside-admin .nav a:hover{background:rgba(14,27,21,.05)!important;color:var(--ink)!important}
.aside-admin .nav a.active{background:var(--surface)!important;color:var(--ink)!important;box-shadow:0 1px 3px rgba(14,27,21,.10);font-weight:600}
.aside-admin .nav .ico{width:16px;height:16px;flex:0 0 16px;opacity:.8}
.aside-admin .nav .count{background:var(--green-wash)!important;color:var(--green-ink)!important;margin-left:auto}
.aside-admin .nav a.active .count{background:var(--green)!important;color:#fff!important}
.aside-admin .btn.btn-ghost{color:var(--ink)!important;border-color:var(--hair-2)!important;background:var(--surface)!important}
.aside-admin .btn-quiet{color:var(--ink-dim)!important}
.aside-admin .btn-quiet:hover{color:var(--ink)!important}
.aside-admin .side-foot{gap:8px}
.adm-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-dim);padding:2px 4px}
.adm-status .dot{width:8px;height:8px;border-radius:50%;background:var(--hair-2)}
.adm-status.on .dot{background:var(--green);box-shadow:0 0 0 3px var(--green-wash)}
.adm-crumb{font:600 14.5px/1 var(--display, var(--sans));color:var(--ink-dim)}
.adm-crumb b{color:var(--ink);font-weight:600}
.adm-crumb i{font-style:normal;margin:0 4px;opacity:.5}
.adm-signin{max-width:520px;margin:6vh auto 0;background:var(--surface);border:1px solid var(--hair);border-radius:24px;box-shadow:0 2px 6px rgba(14,27,21,.05),0 26px 70px rgba(14,27,21,.10);padding:30px;display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center;animation:suIn .45s var(--ease-out, ease) both}
.adm-lock{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--green-wash);color:var(--green)}
.adm-lock .ico{width:26px;height:26px}
.adm-signin .page-title{margin:2px 0 0}
.adm-signin .page-sub{margin:0}
.adm-key-form{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.adm-key-row{display:flex;gap:8px}
.adm-key-row .input{flex:1;min-width:0;font-size:14.5px;padding:12px 14px}
.adm-key-form .btn-lg{width:100%}
.adm-row{display:flex;align-items:center;gap:10px}
.adm-row > span:nth-child(2){flex:1;min-width:0}
.adm-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
.adm-short{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:14px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .22s var(--ease-out, ease),box-shadow .22s}
.adm-short:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(14,27,21,.10)}
.adm-short .ico{width:22px;height:22px;flex:0 0 22px;color:var(--green);margin-top:2px}
.adm-short > span{display:flex;flex-direction:column;gap:2px}
.adm-how summary{cursor:pointer;list-style:none}
.adm-how summary::-webkit-details-marker{display:none}
.adm-how summary::after{content:"＋";margin-left:auto;color:var(--ink-dim)}
.adm-how[open] summary::after{content:"－"}
.admin-main .rec-hero-who .acc-id{display:inline-block;margin-bottom:4px}
.view-enter .adm-shortcuts > *{animation:rise .45s var(--ease-out, ease) both}
.view-enter .adm-shortcuts > *:nth-child(2){animation-delay:.05s}
.view-enter .adm-shortcuts > *:nth-child(3){animation-delay:.1s}
.view-enter .adm-shortcuts > *:nth-child(4){animation-delay:.15s}
@media (max-width:1100px){.adm-shortcuts{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .is-admin .shell{display:block}
  .aside-admin{position:sticky!important;top:0;z-index:30;height:auto!important;transform:none!important;width:auto!important;flex-direction:row!important;align-items:center;gap:10px!important;padding:10px 12px!important;overflow-x:auto;border-right:0;border-bottom:1px solid var(--hair);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:rgba(251,252,250,.92)!important}
  .aside-admin .brand-tag,.aside-admin .nav-group,.aside-admin .side-foot{display:none}
  .aside-admin .nav{flex-direction:row!important;gap:4px;flex-wrap:nowrap}
  .aside-admin .nav a{white-space:nowrap;padding:7px 10px}
  .aside-admin .nav a .ico{display:none}
  .admin-main .topbar .top-link{display:inline-flex}
}
@media (max-width:640px){.adm-shortcuts{grid-template-columns:1fr}.adm-signin{padding:22px 18px;margin-top:2vh}}

/* ===========================================================
   Polish pass (26 Oct): nothing wider than the screen at any
   width or zoom, phone layouts that stack instead of squeeze,
   touch-sized controls, and motion with one moment of its own.
   =========================================================== */

/* grid and flex children may shrink below their content, so long text wraps instead of widening the page */
.set-layout > *,.set-body,.lists-top > *,.split > *,.grid > *,.form-grid > *,.rec-facts > *{min-width:0}
.list-link{min-width:0;max-width:100%}
.panel-body,.rec-fact dd,.f-value,.page-sub,.who{overflow-wrap:break-word}
.rows .row .row-actions,.queue .row-actions{flex-wrap:wrap;min-width:0}
.hist-filters{display:inline-flex;flex-wrap:wrap;max-width:100%}
.task-add .input,.task-add select{min-width:0}
.ig-map + p.small{margin:12px 0 16px}

/* no text below a readable size */
.count,.brand-tag,.nav-group,kbd,.task-meta .t,.t,.k,.tabs .n,.n,.col-sum,.actor,.log-time,.room-badge,.lane-tag,.chart-label,.agent-kicker,.chip i,.tabs .tab i{font-size:12px!important}
.agent .agent-kicker{letter-spacing:.04em}

/* ---------- phones ---------- */
@media (max-width:640px){
  /* a panel title keeps the full width; its note goes on the line below */
  .panel-head{flex-wrap:wrap;row-gap:2px}
  .panel-head .hint{flex:1 1 100%;order:5;text-align:left;margin:0}
  /* Eve's suggestion: who first, then the button across the full width */
  .agent-line{flex-direction:column;align-items:stretch;gap:10px}
  .agent-line .who{flex-wrap:wrap;row-gap:6px}
  .agent-line .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
  .hist-filters{display:flex;width:100%}
  .hist-filters button{flex:1 1 auto}
  .task-add .input,.task-add select{flex:1 1 100%}
  /* a lone last summary card takes the whole row instead of leaving a hole */
  .stats > :last-child:nth-child(odd),.grid.stats > :last-child:nth-child(odd),.money > :last-child:nth-child(odd){grid-column:1 / -1}
  /* strips that scroll sideways fade at the edge, so it is clear there is more */
  .set-nav,.tabs,.page-tabs,.stage-path{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);padding-right:24px}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- fingers, not cursors: every control is easy to hit ---------- */
@media (pointer:coarse),(max-width:640px){
  .btn,.btn-sm,.seg button,.chip,.tabs .tab,.tabs button,.set-item{min-height:40px}
  button.btn-quiet,a.btn-quiet{min-height:36px;display:inline-flex;align-items:center}
  .icon-btn{min-width:40px;min-height:40px}
  .input,select.input,textarea.input{font-size:16px} /* stops phones zooming into a field */
}

/* ---------- motion ---------- */
:root{--arrive:cubic-bezier(.16,1,.3,1)}

/* the one moment: Home arrives as a short sequence. Greeting, then the four figures rise
   while they count up, and one soft light passes across the card. */
.view-enter .hero h1{animation:heroIn .7s var(--arrive) both}
.view-enter .hero p{animation:heroIn .7s var(--arrive) .06s both}
.view-enter .hero-actions{animation:heroIn .7s var(--arrive) .12s both}
.view-enter .hero-stat{animation:statIn .7s var(--arrive) both}
.view-enter .hero-stat:nth-child(1){animation-delay:.16s}
.view-enter .hero-stat:nth-child(2){animation-delay:.22s}
.view-enter .hero-stat:nth-child(3){animation-delay:.28s}
.view-enter .hero-stat:nth-child(4){animation-delay:.34s}
.view-enter .hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.04) 54%,transparent 70%);transform:translateX(-100%);animation:sheen 1.4s var(--arrive) .35s both}
@keyframes heroIn{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes statIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sheen{to{transform:translateX(100%)}}

/* every page: its sections arrive in a short cascade (capped, so nothing waits) */
.view-enter > .panel,.view-enter > section,.view-enter > .split,.view-enter > .grid,.view-enter > .crm-room > *{animation:rise .5s var(--arrive) both}
.view-enter > :nth-child(2){animation-delay:.04s}
.view-enter > :nth-child(3){animation-delay:.08s}
.view-enter > :nth-child(4){animation-delay:.12s}
.view-enter > :nth-child(n+5){animation-delay:.16s}

/* the menu: the highlight glides instead of jumping */
.nav a{transition:background .25s var(--arrive),color .2s,box-shadow .25s var(--arrive),transform .2s var(--arrive)}
.nav a:active{transform:scale(.98)}
.nav a.active .ico{animation:navPop .45s var(--arrive)}
@keyframes navPop{from{transform:scale(.82);opacity:.6}to{transform:none;opacity:1}}
.tabbar a{transition:color .2s}
.tabbar a.on .ico{animation:navPop .45s var(--arrive)}

/* ticks and toggles answer the finger */
input[type=checkbox]:checked{animation:tick .28s var(--arrive)}
@keyframes tick{from{transform:scale(.72)}to{transform:none}}
.toast.show{animation:toastIn .45s var(--arrive)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
.btn:not(:disabled):active{transform:scale(.96)}

/* keyboard focus is smooth too */
:focus-visible{transition:outline-offset .15s var(--arrive)}

@media (prefers-reduced-motion:reduce){
  .view-enter .hero *,.view-enter .hero::after,.view-enter > *,.nav a.active .ico,.tabbar a.on .ico,input[type=checkbox]:checked,.toast.show{animation:none!important}
  .view-enter .hero::after{display:none}
}
/* rows of actions wrap onto their own line once the row gets tight (tablets, or a laptop zoomed in) */
@media (max-width:900px){
  .rows .row{flex-wrap:wrap;gap:8px}
  .rows .row .row-actions{width:100%;justify-content:flex-end}
}
.fmap-uses .chip{white-space:normal;max-width:100%;text-align:left}
.set-ico{font-size:12px!important}
/* a quiet button next to a full one stands at the same height */
:is(.row-actions,.row-between,.hero-actions,.modal-foot,.form-actions) > :is(.btn,.btn-quiet){min-height:36px;display:inline-flex;align-items:center;justify-content:center}
:is(.row-actions,.row-between,.hero-actions,.modal-foot,.form-actions) > .btn-quiet{font-size:13.5px}
@media (pointer:coarse),(max-width:640px){:is(.row-actions,.row-between,.hero-actions,.modal-foot,.form-actions) > :is(.btn,.btn-quiet){min-height:40px}}
/* option rows (a name, move up, move down, remove): the name gives way so the buttons always fit */
.opt-row .input{min-width:0;flex:1 1 0}
.opt-row .icon-btn{flex:none}
@media (pointer:coarse),(max-width:640px){.opt-row .icon-btn{min-width:34px;width:34px;padding:0}.opt-row{gap:4px}}
@media (max-width:900px){.tabbar a,.tabbar button{font-size:11px}}