/* =====================================================================
   UNLOOK dashboard (v4)
   ---------------------------------------------------------------------
   Built on the real product (ai-frontdesk): every screen shows only
   what the API returns and offers only actions it has. Visual grammar
   from the reference dashboard, brand from unlook.in, motion from
   transitions.dev.

   TYPE     Mona Sans for the UI; Bricolage only in the wordmark.
            page 18/600 · figure 24/600 · card title 14/500
            body 14/400 · secondary 13/400 · label 12/500
   COLOUR   neutral surfaces first. lime = the primary action, the
            active nav marker, "answering". peach = needs you.
            mint = done. lavender = phone + information. coral = errors.
   RADIUS   cards, sheets and dialogs 14 · controls 8 · chips 6 (tokens below)
   SHADOW   only on what floats: menus, drawer, modal, toast
   MOTION   transitions.dev tokens below. Nothing moves without a state
            change behind it.
   ===================================================================== */
@font-face{font-family:"Mona Sans";font-weight:200 900;font-display:swap;src:url(/fonts/mona-sans-latin.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(/fonts/bricolage-latin.woff2) format("woff2")}

/* ---------- motion: transitions.dev tokens (from _root.css) ---------- */
:root{
  --duration-stagger:40ms;--duration-micro:80ms;--duration-quick:150ms;--duration-fast:250ms;
  --duration-medium:350ms;--duration-slow:400ms;--duration-very-slow:500ms;
  --ease-smooth-out:cubic-bezier(0.22,1,0.36,1);--ease-in-out:ease-in-out;--ease-out:ease-out;--ease-linear:linear;
  --ease-bounce:cubic-bezier(0.34,1.36,0.64,1);
  --distance-micro:4px;--distance-small:6px;--distance-base:8px;--distance-medium:12px;
  --scale-large:0.96;--scale-medium:0.97;--scale-small:0.98;--scale-tiny:0.99;
  --blur-small:2px;--blur-medium:3px;--blur-large:8px;
  /* number pop-in */
  --digit-dur:500ms;--digit-distance:8px;--digit-stagger:70ms;--digit-blur:2px;--digit-ease:cubic-bezier(0.34,1.45,0.64,1);--digit-dir-x:0;--digit-dir-y:1;
  /* notification badge */
  --badge-slide-dur:260ms;--badge-pop-dur:500ms;--badge-pop-close-dur:180ms;--badge-fade-dur:400ms;--badge-fade-close-dur:180ms;
  --badge-blur:2px;--badge-offset-x:-8.2px;--badge-offset-y:12.4px;
  --badge-slide-ease:cubic-bezier(0.22,1,0.36,1);--badge-pop-ease:cubic-bezier(0.34,1.36,0.64,1);--badge-close-ease:cubic-bezier(0.4,0,0.2,1);
  /* text swap */
  --text-swap-dur:150ms;--text-swap-translate-y:4px;--text-swap-blur:2px;--text-swap-ease:ease-in-out;
  /* dropdown */
  --dropdown-open-dur:250ms;--dropdown-close-dur:150ms;--dropdown-pre-scale:0.97;--dropdown-closing-scale:0.99;--dropdown-ease:cubic-bezier(0.22,1,0.36,1);
  /* modal */
  --modal-open-dur:250ms;--modal-close-dur:150ms;--modal-scale:0.96;--modal-scale-close:0.96;--modal-ease:cubic-bezier(0.22,1,0.36,1);
  /* panel reveal (the drawer uses these clocks) */
  --panel-open-dur:400ms;--panel-close-dur:350ms;--panel-blur:2px;--panel-ease:cubic-bezier(0.22,1,0.36,1);
  /* page side-by-side (phone inbox) */
  --page-slide-dur:250ms;--page-fade-dur:250ms;--page-slide-distance:8px;--page-blur:3px;--page-stagger:0ms;--page-exit-enabled:1;
  --page-slide-ease:cubic-bezier(0.22,1,0.36,1);--page-fade-ease:cubic-bezier(0.22,1,0.36,1);
  /* icon swap */
  --icon-swap-dur:250ms;--icon-swap-blur:2px;--icon-swap-start-scale:0.25;--icon-swap-ease:ease-in-out;
  /* success check */
  --check-opacity-dur:500ms;--check-rotate-dur:500ms;--check-rotate-from:80deg;--check-bob-dur:500ms;--check-y-amount:40px;
  --check-blur-dur:500ms;--check-blur-from:10px;--check-path-dur:500ms;--check-path-delay:80ms;
  --check-ease-out:cubic-bezier(0.22,1,0.36,1);--check-ease-opacity:cubic-bezier(0.22,1,0.36,1);--check-ease-rotate:cubic-bezier(0.22,1,0.36,1);
  --check-ease-bob:cubic-bezier(0.34,1.35,0.64,1);--check-ease-path:cubic-bezier(0.22,1,0.36,1);
  /* error shake */
  --shake-distance:6px;--shake-overshoot:4px;--shake-dur-a:80ms;--shake-dur-b:60ms;--shake-ease:cubic-bezier(0.22,1,0.36,1);
  --revert-hold:3000ms;--revert-dur:280ms;
  /* skeleton (pulses until the data arrives) */
  --pulse-dur:1000ms;--pulse-count:infinite;--pulse-min:0.5;--reveal-dur:400ms;--reveal-blur:2px;--reveal-ease:ease-in-out;
  /* shimmer text */
  --shimmer-dur:2000ms;--shimmer-band:400%;--shimmer-ease:linear;
  /* tabs sliding */
  --tabs-dur:250ms;--tabs-ease:cubic-bezier(0.22,1,0.36,1);
  /* tooltip */
  --tt-in-dur:150ms;--tt-out-dur:50ms;--tt-scale:0.98;--tt-delay:80ms;--tt-in-ease:ease-out;--tt-out-ease:ease-out;
  --tt-move-dur:160ms;--tt-move-ease:cubic-bezier(0.22,1,0.36,1);
  /* texts reveal */
  --stagger-dur:500ms;--stagger-distance:12px;--stagger-stagger:40ms;--stagger-blur:3px;--stagger-ease:cubic-bezier(0.22,1,0.36,1);
  /* accordion */
  --acc-expand:250ms;--acc-collapse:250ms;--acc-chevron:250ms;--acc-ease:cubic-bezier(0.22,1,0.36,1);
  /* toast */
  --toast-open:350ms;--toast-close:250ms;--toast-distance:16px;--toast-blur:2px;--toast-scale:0.97;--toast-ease:cubic-bezier(0.22,1,0.36,1);
  /* toggle (sized to our 32 x 18 switch) */
  --toggle-dur:350ms;--toggle-travel:14px;--toggle-ov1:1px;--toggle-ov2:0px;--toggle-track:0ms;--toggle-ease:cubic-bezier(0.34,1.35,0.64,1);
}

/* ---------- scale: the only type sizes, corners, gaps and control heights in use ----------
   TYPE    12 meta · 13 secondary · 14 body · 16 sub-title and phone fields · 18 page title · 24 figures (11 only inside count badges)
   RADIUS  6 chips · 8 controls and boxes inside a card · 14 cards, sheets, dialogs · pill
   A box inside a card takes the smaller corner: outer radius = inner radius + the padding between them. */
:root{
  --fs-badge:11px;--fs-meta:12px;--fs-sm:13px;--fs-body:14px;--fs-lg:16px;--fs-title:18px;--fs-figure:24px;
  --r-chip:6px;--r-ctl:8px;--r-card:14px;--r-pill:999px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --h-sm:28px;--h-ctl:32px;--h-touch:44px;
}

/* ---------- colour: dark is the primary theme ---------- */
:root,:root[data-theme="dark"]{
  /* The owner's palette (14 October 2026): neutral black and grey (he found the palette's green-tinted charcoal "too
     greenish"), the signature lime for the one thing to press and the current place, and status colours by urgency (the full list is in colour.css). Measured with
     scratchpad palette-check.js: every word on every ground 4.5:1 and APCA Lc 60 or more (the third ink Lc 45, for
     meta text only); marks and field edges 3:1. */
  color-scheme:dark;
  --night:#050505;--lime:#D4FF43;
  /* surfaces as in his reference (14 Oct): near-black behind everything, dark cards set apart by a faint edge */
  --frame:#050505;--panel:#0A0A0A;--card:#121212;--raise:#1A1A1A;--field:#0E0E0E;
  --line:#1F1F1F;--line-2:#2A2A2A;--line-strong:#3D3D3D;--card-line:#242424;
  --ink:#F5F5F5;--ink-2:#BDBDBD;--ink-3:#9C9C9C;--ink-4:#636363;
  --hover:rgba(245,245,245,.04);--select:rgba(245,245,245,.075);--press:rgba(245,245,245,.1);
  --btn:#161616;--btn-hover:#1F1F1F;
  --lime-hover:#E2FF7A;--lime-edge:#D4FF43;--live:#D4FF43;--live-glow:rgba(212,255,67,.2);--accent-line:#D4FF43;
  --strong:#F5F5F5;--strong-hover:#ffffff;--on-strong:#050505;
  /* roles the light theme needs to set apart: the main action in a row, the edge of a field you type in, a well on a tinted bar */
  --row-btn:rgba(245,245,245,.1);--row-btn-hover:rgba(245,245,245,.16);--on-row-btn:var(--ink);--field-line:var(--line-2);--tint-well:rgba(255,255,255,.06);
  --you-ink:#FCC66B;--you-bg:rgba(252,198,107,.1);--you-dot:#F5A524;
  --ok-ink:#7EE2A2;--ok-bg:rgba(126,226,162,.1);
  --info-ink:#9CC3FF;--info-bg:rgba(156,195,255,.1);
  --err-ink:#FFA39B;--err-bg:rgba(255,163,155,.1);--err-line:rgba(255,163,155,.4);
  --focus:#D4FF43;--ring:rgba(245,245,245,.08);
  --edge:inset 0 1px 0 rgba(255,255,255,.055);--edge-btn:inset 0 1px 0 rgba(255,255,255,.06);--edge-primary:inset 0 1px 0 rgba(255,255,255,.38),0 1px 2px rgba(212,255,67,.16);--edge-press:inset 0 1px 0 rgba(0,0,0,.14);
  --scrim:rgba(0,0,0,.5);
  --shadow-pop:0 20px 48px -16px rgba(0,0,0,.7),0 0 0 1px #2A2A2A;
  --chart-1:#2E2E2E;--chart-1-hover:#404040;--chart-2:#D4FF43;--grid:#1C1C1C;
  --code-bg:#030303;--code-ink:#D4FF43;
  --tt-bg:#F5F5F5;--tt-fg:#050505;
  --shimmer-base:var(--ink-3);--shimmer-highlight:#F5F5F5;
  --tabs-bar-bg:#0A0A0A;--tabs-pill-bg:#1F1F1F;--tabs-text-muted:#A6A6A6;--tabs-text-active:#F5F5F5;
}
:root[data-theme="light"]{
  /* The owner's palette (14 October 2026), light: a near-white page, white cards, deep teal #0F6B66 as the action colour
     (lime is dark-theme only), ink a dark green-black in three steps (15.9 · 6.5 · 5.2 on a card). Status colours by
     urgency, the same hues as dark, darker for their words (colour.css). Measured as the dark theme is. */
  color-scheme:light;
  --frame:#EDF2F0;--panel:#F8FAF9;--card:#FFFFFF;--raise:#F1F5F3;--field:#FFFFFF;
  --line:#E2E8E6;--line-2:#CBD5D1;--line-strong:#9DAEA8;--card-line:#E2E8E6;--field-line:#7C8F89;
  --ink:#0F1F1C;--ink-2:#4B5F59;--ink-3:#5B6E68;--ink-4:#8A9B95;
  --hover:rgba(15,107,102,.06);--select:rgba(15,107,102,.09);--press:rgba(15,107,102,.14);
  --btn:#FFFFFF;--btn-hover:#F1F5F3;
  --lime:#0F6B66;--night:#FFFFFF;
  --lime-hover:#137A74;--lime-edge:#0F6B66;--live:#16A34A;--live-glow:rgba(22,163,74,.22);--accent-line:#0F6B66;
  --strong:#0F6B66;--strong-hover:#137A74;--on-strong:#FFFFFF;
  --row-btn:#E2EFED;--row-btn-hover:#D3E7E4;--on-row-btn:#0F6B66;--tint-well:rgba(255,255,255,.62);
  --you-ink:#92400E;--you-bg:#FEF3C7;--you-dot:#D97706;
  --ok-ink:#14703A;--ok-bg:#E3FBEA;
  --info-ink:#1D4ED8;--info-bg:#ECF2FF;
  --err-ink:#B91C1C;--err-bg:#FEE9E9;--err-line:#F3A5A5;
  --focus:#0F6B66;--ring:rgba(15,107,102,.14);
  --edge:0 1px 0 rgba(15,31,28,.03),0 1px 2px rgba(15,31,28,.05);--edge-btn:0 1px 0 rgba(15,31,28,.05);--edge-primary:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(15,107,102,.24);--edge-press:inset 0 1px 0 rgba(15,31,28,.08);
  --scrim:rgba(15,31,28,.32);
  --shadow-pop:0 20px 48px -18px rgba(15,31,28,.32),0 0 0 1px #E2E8E6;
  --chart-1:#7FA39C;--chart-1-hover:#6B928A;--chart-2:#0F6B66;--grid:#E2E8E6;
  --code-bg:#0F1F1C;--code-ink:#7EE2A2;
  --tt-bg:#0F1F1C;--tt-fg:#F8FAF9;
  --shimmer-base:var(--ink-3);--shimmer-highlight:#0F1F1C;
  --tabs-bar-bg:#EAF0EE;--tabs-pill-bg:#FFFFFF;--tabs-text-muted:#5B6E68;--tabs-text-active:#0F1F1C;
}
:root{--sans:"Mona Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--display:"Bricolage Grotesque","Mona Sans",system-ui,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* theme switch: one cross-fade of the whole page (View Transitions), never per element */
::view-transition-old(root),::view-transition-new(root){animation-duration:180ms;animation-timing-function:var(--ease-out)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--frame);color:var(--ink);font:400 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
[hidden]{display:none!important}
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-chip)}
::selection{background:var(--lime);color:var(--night)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.ink2{color:var(--ink-2)}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- app frame ---------- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;transition:grid-template-columns var(--duration-fast) var(--ease-smooth-out)}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:10px 10px 12px;min-width:0;overflow:hidden}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;padding:0 2px 0 8px;margin-bottom:6px}
.logo{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;min-width:0}
.logo svg{width:22px;height:22px;flex:none;border-radius:6px}
:root[data-theme="dark"] .logo svg,:root[data-theme="dark"] .mlogo svg{box-shadow:0 0 0 1px var(--line-2)}
.logo b{font-family:var(--display);font-weight:760;font-stretch:88%;font-size:19px;letter-spacing:-.018em;line-height:1;white-space:nowrap}
/* "Lights on": the two o's are two lights, each as tall as the lowercase letters (.531em in this face) and standing
   on the baseline. In light mode --lime is the deep teal, so they turn teal there by themselves. */
.lights{display:inline-flex;gap:max(.06em,1.5px);margin:0 .055em 0 .06em}
.lights i{width:.531em;height:.531em;border-radius:50%;background:var(--lime);transition:background-color var(--duration-medium) var(--ease-out)}
/* the sidebar shows the word when it's open and the icon when it's folded, never both (four dots in a row) */
.side .logo svg{display:none}
:root[data-rail="1"] .side .logo svg{display:block}
@media (max-width:1100px){.side .logo svg{display:block}}
/* the lights say what it's doing: lit while it answers, taking turns while it works on what you asked, dark when it's paused or not live yet */
.lt-d{fill:#d4ff3a;transition:fill var(--duration-medium) var(--ease-out)}
:root[data-lights="off"] .lights i{background:var(--ink-4)}
:root[data-lights="off"] .lt-d{fill:var(--ink-4)}
:root[data-busy="1"] .lights i,:root[data-busy="1"] .lt-d{animation:lights-turn calc(var(--pulse-dur)*1.4) var(--ease-in-out) infinite}
:root[data-busy="1"] .lights i:nth-child(2),:root[data-busy="1"] .lt-d2{animation-delay:calc(var(--pulse-dur)*.7)}
@keyframes lights-turn{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){:root[data-busy="1"] .lights i,:root[data-busy="1"] .lt-d{animation:none}:root[data-busy="1"] .lights i:nth-child(2),:root[data-busy="1"] .lt-d2{opacity:.4}}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:var(--h-ctl);border-radius:var(--r-ctl);color:var(--ink-3);transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.icon-btn:hover{background:var(--hover);color:var(--ink)}}
.icon-btn.bordered{border:1px solid var(--line);background:var(--card);color:var(--ink-2)}
@media (hover:hover){.icon-btn.bordered:hover{border-color:var(--line-2);color:var(--ink)}}

.nav{position:relative;display:flex;flex-direction:column;gap:2px}
.nav-pill{position:absolute;left:0;right:0;top:0;height:32px;border-radius:var(--r-ctl);background:var(--select);transition:transform var(--duration-fast) var(--ease-smooth-out),height var(--duration-fast) var(--ease-smooth-out),opacity var(--duration-quick) var(--ease-out);will-change:transform;pointer-events:none}
.nav-pill::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;background:var(--accent-line)}
.nav a{position:relative;z-index:1;display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:var(--r-ctl);color:var(--ink-2);font-size:var(--fs-body);text-decoration:none;white-space:nowrap;transition:color var(--duration-quick) var(--ease-out),background-color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.nav a:hover{color:var(--ink);background:var(--hover)}}
.nav a.cur{color:var(--ink);font-weight:500}
@media (hover:hover){.nav a.cur:hover{background:transparent}}
.nav a .l{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav .n{margin-left:auto;font-size:var(--fs-meta);color:var(--ink-3);font-variant-numeric:tabular-nums}
.nav-badge{margin-left:auto}
.nav-badge.t-badge{position:static}
.badge-dot{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-chip);background:var(--you-bg);color:var(--you-ink);font-size:var(--fs-badge);font-weight:600;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}

.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:12px}
.golive{display:block;padding:12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);color:var(--ink);text-decoration:none;transition:border-color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.golive:hover{border-color:var(--line-2)}}
.golive-t{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-sm);font-weight:500}
.golive-t span{font-size:var(--fs-meta);font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.golive p{margin:3px 0 10px;font-size:var(--fs-meta);color:var(--ink-3)}
.golive .meter{margin:0}
.golive .ring{display:none}
.side-link{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:var(--r-ctl);font-size:var(--fs-sm);color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.side-link:hover{background:var(--hover);color:var(--ink)}}
.acct{position:relative}
.acct-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:var(--r-ctl);text-align:left;transition:background-color var(--duration-quick) var(--ease-out)}
.acct-btn[aria-expanded="true"]{background:var(--hover)}@media (hover:hover){.acct-btn:hover{background:var(--hover)}}
.av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-ctl);background:var(--raise);border:1px solid var(--line-2);color:var(--ink);font-size:var(--fs-meta);font-weight:600}
.acct-t{min-width:0;flex:1}
.acct-t b{display:block;font-size:var(--fs-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-t small{display:block;font-size:var(--fs-meta);color:var(--ink-3)}
.acct .chev{color:var(--ink-3)}

.main{min-width:0;padding:8px 8px 8px 0}
.inset{min-height:calc(100vh - 16px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card)}
.head{display:flex;align-items:center;gap:12px;min-height:64px;padding:14px 24px 10px}
.head-t{min-width:0}
.head h1{font-size:var(--fs-title);font-weight:600;letter-spacing:-.02em;line-height:1.4}
.head-t p{margin-top:2px;font-size:var(--fs-sm);color:var(--ink-3)}
.tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.mlogo{display:none}
.status{display:inline-flex;align-items:center;gap:8px;height:var(--h-ctl);padding:0 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);font-size:var(--fs-sm);color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:border-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.status:hover{border-color:var(--line-2);color:var(--ink)}}
.dot-live{width:7px;height:7px;flex:none;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px var(--live-glow);transition:background-color var(--duration-quick) var(--ease-out),box-shadow var(--duration-quick) var(--ease-out)}
/* each state has its own shape, not just its own colour: answering = filled dot, paused = pause bars, not live = hollow ring */
.status.off .dot-live{width:7px;height:8px;border-radius:0;background:transparent;box-shadow:none;border-inline:2.5px solid var(--ink-3)}
.status.wait .dot-live{background:transparent;box-shadow:inset 0 0 0 2px var(--you-dot)}
.content{flex:1;padding:6px 24px 40px;min-width:0}
.screen{display:none}
.screen.on{display:block;animation:screen-in var(--duration-quick) var(--ease-in-out)}
@keyframes screen-in{from{opacity:0}}

/* collapsed sidebar: by choice, or below 1100px */
:root[data-rail="1"] .app{grid-template-columns:60px minmax(0,1fr)}
@media (max-width:1100px){.app{grid-template-columns:60px minmax(0,1fr)}}
@media (min-width:1101px){:root:not([data-rail="1"]) .rail-only{display:none}}
:root[data-rail="1"] .nav .n,:root[data-rail="1"] .logo b,:root[data-rail="1"] .acct .chev{display:none}
@media (max-width:1100px){.nav .n,.logo b,.acct .chev,.rail-btn{display:none}}
/* the collapsed rail hides the words, but they stay the links' names (display:none would leave them nameless) */
:root[data-rail="1"] .side .l,:root[data-rail="1"] .acct-t,:root[data-rail="1"] .golive-body{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1100px){.side .l,.acct-t,.golive-body{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
:root[data-rail="1"] .side-top{flex-direction:column;height:auto;gap:8px;padding:6px 0 0;margin-bottom:10px}
@media (max-width:1100px){.side-top{justify-content:center;padding:6px 0 0;margin-bottom:10px}}
:root[data-rail="1"] .nav a,:root[data-rail="1"] .side-link{justify-content:center;padding:0;width:40px;margin:0 auto}
@media (max-width:1100px){.nav a,.side-link{justify-content:center;padding:0;width:40px;margin:0 auto}}
:root[data-rail="1"] .nav-pill{left:calc(50% - 20px);right:auto;width:40px}
@media (max-width:1100px){.nav-pill{left:calc(50% - 20px);right:auto;width:40px}.nav-pill::before{left:-10px}}
:root[data-rail="1"] .nav-badge.t-badge,:root[data-rail="1"] .rail-badge{position:absolute;top:-2px;right:-4px}
@media (max-width:1100px){.nav-badge.t-badge{position:absolute;top:-2px;right:-4px}}
:root[data-rail="1"] .golive,:root[data-rail="1"] .acct-btn{justify-content:center;padding:6px;width:40px;margin:0 auto}
@media (max-width:1100px){.golive,.acct-btn{justify-content:center;padding:6px;width:40px;margin:0 auto}}
:root[data-rail="1"] .golive .ring{display:block}
@media (max-width:1100px){.golive .ring{display:block}}
.ring{width:26px;height:26px}
.ring circle{fill:none;stroke-width:3}
.ring .bg{stroke:var(--line-2)}
.ring .fg{stroke:var(--ink);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset var(--duration-slow) var(--ease-smooth-out)}

/* phone */
.mnav{display:none}
@media (max-width:720px){
  .app{display:block}
  .side{display:none}
  .main{padding:0}
  .inset{min-height:100vh;border:0;border-radius:0}
  .head{min-height:56px;padding:10px 16px}
  .mlogo{display:inline-flex;align-items:center;margin-right:2px}
  .mlogo svg{width:26px;height:26px;border-radius:var(--r-chip)}
  .head h1{font-size:var(--fs-title)}
  .head-t p{display:none}
  .status{padding:0 10px}
  .content{padding:4px 16px calc(96px + env(safe-area-inset-bottom))}
  /* a floating bar: the selection is a pill that slides to the tab you pick, its leading edge first, so it stretches
     across and settles (set in app.js: mnavPill). Radii are concentric: 26 outside, 5 of padding, 21 inside. */
  .mnav{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;display:grid;grid-template-columns:repeat(5,1fr);padding:5px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--card) 86%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:var(--edge),0 0 0 1px var(--line),0 14px 34px rgba(0,0,0,.34)}
  .mnav a,.mnav button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:50px;border:0;border-radius:var(--r-pill);background:none;font:inherit;font-size:var(--fs-meta);letter-spacing:-.01em;color:var(--ink-3);text-decoration:none;cursor:pointer;transition:color 150ms ease-out}
  .mnav a svg,.mnav button svg{width:22px;height:22px;transition:scale 150ms ease-out}
  .mnav a:active svg,.mnav button:active svg{scale:.96}
  .mnav [data-more] svg{fill:currentColor;stroke:none}
  .mnav .cur{color:var(--ink);font-weight:500}
  .mnav-pill{position:absolute;top:5px;bottom:5px;left:5px;right:calc(100% - 5px);border-radius:var(--r-pill);background:var(--press);box-shadow:var(--edge-btn);opacity:0;transition:left 300ms cubic-bezier(0.2,0,0,1),right 300ms cubic-bezier(0.2,0,0,1),opacity 150ms ease-out}
  .mnav-pill[data-dir="r"]{transition-delay:90ms,0ms,0ms}
  .mnav-pill[data-dir="l"]{transition-delay:0ms,90ms,0ms}
  .mnav-pill[data-dir="none"]{transition:opacity 150ms ease-out}
  .mnav .badge-dot{position:absolute;top:2px;left:calc(50% + 6px);min-width:16px;height:16px;line-height:16px;font-size:var(--fs-badge);padding:0 4px}
}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--h-ctl);padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--btn);color:var(--ink);font-size:var(--fs-sm);font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color var(--duration-quick) var(--ease-out),border-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out),transform 100ms var(--ease-out)}
@media (hover:hover){.btn:hover{background:var(--btn-hover);border-color:var(--line-strong)}}
.btn{box-shadow:var(--edge-btn)}
.btn:active{transform:scale(.96);box-shadow:var(--edge-press)}
.btn svg.i{width:15px;height:15px;opacity:.85}
.btn-primary{background:var(--lime);border-color:var(--lime-edge);color:var(--night);box-shadow:var(--edge-primary)}
@media (hover:hover){.btn-primary:hover{background:var(--lime-hover);border-color:var(--lime-edge)}}
.btn-strong{background:var(--row-btn);border-color:var(--row-btn);color:var(--on-row-btn)}
@media (hover:hover){.btn-strong:hover{background:var(--row-btn-hover);border-color:var(--row-btn-hover)}}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2);box-shadow:none}
@media (hover:hover){.btn-ghost:hover{background:var(--hover);border-color:transparent;color:var(--ink)}}
.btn-danger{color:var(--err-ink)}
@media (hover:hover){.btn-danger:hover{background:var(--err-bg);border-color:var(--err-line)}}
.btn-sm{height:var(--h-sm);padding:0 10px;font-size:var(--fs-sm);border-radius:var(--r-chip)}
.btn-block{width:100%}
.btn[disabled],.btn.busy{opacity:.5;pointer-events:none}
/* phones (21 Oct 2026, the owner: "buttons have too much upper and below padding"): a button keeps the height Solid Glass
   draws it at (32, small 28, an icon 32) and a finger gets 44 from an invisible edge above and below, as .btn-sub does,
   not from a taller button. 50% - 22px from the middle is 44 whatever the button's height or border (32 reaches 6 past
   each edge, 28 reaches 8); nothing grows sideways, so two buttons side by side keep their gap. Buttons one above the
   other keep Solid Glass's 8 between them (gap-2); there the edge is 40 (50% - 20px: 4 past a 32), so two edges touch
   and never overlap, instead of the buttons being spread apart. */
@media (max-width:720px),(pointer:coarse){.btn{position:relative}.btn::after{content:"";position:absolute;inset:calc(50% - 22px) 0}}
/* ---- .btn-sub: a secondary button (21 Oct 2026, the owner: "Edit hours does not look like a button"). Solid Glass's own
   button, size default, "outline/secondary": 32px tall, 10px sides, 6px between its icon (16px) and its words, the control
   radius (not a pill), 14px weight 500, never wrapping; a faint fill, a hairline, a lit top rim and a contact shadow (no
   blur: UNLOOK's rule); the fill goes to foreground 12% on hover, the button settles 1px on press; only colour, shadow and
   position move, in 150ms. A phone gets its 44px tap height from an invisible edge, so it looks the same. Lime stays with
   the one primary button (Save). Used for every text action in Setup and for the links under an Ask UNLOOK reply. ---- */
:root,:root[data-theme="dark"]{--sub-rim:rgba(255,255,255,.07);--sub-shade:rgba(0,0,0,.2)}
:root[data-theme="light"]{--sub-rim:rgba(255,255,255,.7);--sub-shade:rgba(15,31,28,.12)}
.btn-sub{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:32px;padding:0 10px;border:1px solid var(--hair-2);border-radius:var(--r-ctl);background:var(--btn-2);color:var(--ink);font:500 14px/1 var(--sans);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 var(--sub-rim),0 1px 2px var(--sub-shade);transition:background-color 150ms ease-out,box-shadow 150ms ease-out,transform 150ms ease-out}
.btn-sub svg.i{width:16px;height:16px;flex:none;opacity:.85;pointer-events:none}
@media (hover:hover){.btn-sub:not([disabled]):hover{background:color-mix(in oklch,var(--ink) 12%,transparent)}}
.btn-sub[aria-expanded="true"]{background:color-mix(in oklch,var(--ink) 12%,transparent)}
.btn-sub:active:not([disabled]){transform:translateY(1px)}
.btn-sub[disabled],.btn-sub[aria-disabled="true"]{opacity:.5;cursor:default;pointer-events:none}
@media (max-width:720px),(pointer:coarse){.btn-sub::after{content:"";position:absolute;inset:calc(50% - 22px) 0}} /* 44 exactly (the old -6 was measured from inside the border: 42) */
@media (prefers-reduced-motion:reduce){.btn-sub{transition:none}.btn-sub:active:not([disabled]){transform:none}}

.link{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;transition:color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.link:hover{color:var(--ink)}}
/* a link that is a button, under a settings row's note (Corners: "Follow my website"): on its own line */
.srow .l small button.link{position:relative;display:block;margin-top:2px;text-align:left;white-space:nowrap}
.srow .l small button.link::after{content:"";position:absolute;inset:-12px 0} /* a finger-size place to tap, without moving the row */
.more{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);color:var(--ink-3);text-decoration:none;white-space:nowrap;transition:color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.more:hover{color:var(--ink)}}
.more svg.i{width:14px;height:14px}

.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r-chip);font-size:var(--fs-meta);font-weight:500;line-height:1;white-space:nowrap;background:var(--select);color:var(--ink-2);font-variant-numeric:tabular-nums}
.chip svg.i{width:12px;height:12px;stroke-width:2.25}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.you{background:var(--you-bg);color:var(--you-ink)}
.chip.ok{background:var(--ok-bg);color:var(--ok-ink)}
.chip.info{background:var(--info-bg);color:var(--info-ink)}
.chip.err{background:var(--err-bg);color:var(--err-ink)}

.input{display:block;width:100%;height:var(--h-ctl);padding:0 10px;border:1px solid var(--field-line);border-radius:var(--r-ctl);background:var(--field);color:var(--ink);font-size:var(--fs-body);outline:none;
  transition:border-color var(--duration-quick) var(--ease-out),box-shadow var(--duration-quick) var(--ease-out)}
.input::placeholder{color:var(--ink-3)}
@media (hover:hover){.input:hover{border-color:var(--line-strong)}}
.input:focus{border-color:var(--ink-3);box-shadow:0 0 0 3px var(--ring)}
textarea.input{height:auto;min-height:84px;padding:8px 10px;line-height:1.5;resize:vertical}
select.input{padding-right:28px;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 14px) 15px,calc(100% - 10px) 15px;background-size:4px 4px;background-repeat:no-repeat}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.field label,.lbl{font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.count{font-size:var(--fs-meta);color:var(--ink-3);font-variant-numeric:tabular-nums}
.msgs{display:grid}
.msgs>*{grid-area:1/1}
.help{font-size:var(--fs-sm);line-height:1.45;color:var(--ink-3);transition:opacity var(--revert-dur) var(--ease-out)}
.t-input-wrap.is-error .help{opacity:0}
.t-error-msg{font-size:var(--fs-sm);line-height:1.45;color:var(--err-ink)}
.t-input.is-error .input,.t-input.is-error.input{border-color:var(--err-line)}
.search{display:flex;align-items:center;gap:8px;height:var(--h-ctl);padding:0 10px;border:1px solid var(--field-line);border-radius:var(--r-ctl);background:var(--field);color:var(--ink-3);min-width:220px;transition:border-color var(--duration-quick) var(--ease-out)}
.search:focus-within{border-color:var(--ink-3)}
.search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:var(--fs-body);color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.check{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-body);color:var(--ink-2);cursor:pointer}
.check input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--ink)}

/* segmented control = transitions.dev tabs sliding, in UNLOOK's shape */
.t-tabs{position:relative;display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:var(--r-ctl);background:var(--tabs-bar-bg);border:1px solid var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.t-tabs::-webkit-scrollbar{display:none}
.t-tab{position:relative;appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;gap:6px;height:var(--h-sm);padding:0 11px;color:var(--tabs-text-muted);cursor:pointer;border-radius:var(--r-chip);z-index:1;font-size:var(--fs-sm);white-space:nowrap;transition:color var(--tabs-dur) var(--tabs-ease)}
.t-tab[aria-selected="true"]{color:var(--tabs-text-active)}@media (hover:hover){.t-tab:not([aria-selected="true"]):hover{color:var(--tabs-text-active)}}
.t-tab[aria-selected="true"]{font-weight:500}
.t-tab .n{font-size:var(--fs-badge);color:var(--ink-3);font-weight:500}
.t-tabs-pill{position:absolute;top:2px;left:0;height:var(--h-sm);width:0;background:var(--tabs-pill-bg);border-radius:var(--r-chip);box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgba(0,0,0,.12);transform:translateX(0);
  transition:transform var(--tabs-dur) var(--tabs-ease),width var(--tabs-dur) var(--tabs-ease);will-change:transform,width;z-index:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){.t-tabs-pill,.t-tab{transition:none!important}}

/* switch = transitions.dev toggle */
.t-toggle{position:relative;flex:none;width:32px;height:18px;border-radius:var(--r-pill);background:var(--line-strong);border:0;cursor:pointer;transition:background var(--toggle-track) var(--toggle-ease)}
.t-toggle[data-on="true"]{background:var(--strong)}
.t-toggle.accent[data-on="true"]{background:var(--lime)}
.t-toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.25)}
:root[data-theme="light"] .t-toggle-thumb{background:#fff}
.t-toggle[data-on="true"] .t-toggle-thumb{background:var(--on-strong)}
.t-toggle.accent[data-on="true"] .t-toggle-thumb{background:var(--night)}
.t-toggle-thumb{translate:0 0;will-change:translate}
.t-toggle[data-on="true"] .t-toggle-thumb{translate:var(--toggle-travel) 0}
.t-toggle.is-init[data-on="true"] .t-toggle-thumb{animation:t-toggle-on var(--toggle-dur) var(--toggle-ease) both}
.t-toggle.is-init[data-on="false"] .t-toggle-thumb{animation:t-toggle-off var(--toggle-dur) var(--toggle-ease) both}
@keyframes t-toggle-on{0%{translate:0 0}55%{translate:calc(var(--toggle-travel) + var(--toggle-ov1)) 0}80%{translate:calc(var(--toggle-travel) - var(--toggle-ov2)) 0}100%{translate:var(--toggle-travel) 0}}
@keyframes t-toggle-off{0%{translate:var(--toggle-travel) 0}55%{translate:calc(0px - var(--toggle-ov1)) 0}80%{translate:var(--toggle-ov2) 0}100%{translate:0 0}}
@media (prefers-reduced-motion: reduce){.t-toggle-thumb{animation:none!important}}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card);min-width:0;box-shadow:var(--edge)}
.card-h{display:flex;align-items:center;gap:8px;min-height:50px;padding:14px 16px 6px}
.card-h h2,.card-h h3{font-size:var(--fs-body);font-weight:500;color:var(--ink);white-space:nowrap}
.card-b{padding:8px 16px 16px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.span-8{grid-column:span 8}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-12{grid-column:1/-1}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:1240px){.span-8,.span-4,.span-6{grid-column:1/-1}}
.notes{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px 10px 14px;border:1px solid var(--card-line);border-radius:var(--r-ctl);background:var(--card);font-size:var(--fs-body);color:var(--ink-2)}
.note svg.i{color:var(--ink-3)}
.note p{flex:1 1 280px}
.note.you{border-color:transparent;background:var(--you-bg);color:var(--you-ink)}
.note.you svg.i{color:var(--you-ink)}
.note .btn{margin-left:auto}

/* KPIs */
@media (hover:hover){a.kpi:hover{border-color:var(--line-2)}}
/* a block wherever it is put: the markup makes it a <span>, and left inline its height is ignored while the fill's 100% takes the height of whatever holds it */
.meter{display:block;height:4px;margin:8px 0 2px;border-radius:2px;background:var(--raise);overflow:hidden}
.meter i{display:block;height:100%;width:100%;border-radius:2px;background:var(--ink-2);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-slow) var(--ease-smooth-out)}
.meter.warn i{background:var(--you-dot)}

/* needs you */
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.teach-in{display:flex;flex-direction:column;gap:8px;padding-top:12px}
.teach-in .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.teach-in .row .help{flex:1 1 200px}
.caught{display:flex;align-items:center;gap:10px;padding:18px 16px;color:var(--ink-2)}
.caught .c{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ok-bg);color:var(--ok-ink)}
.caught .c svg.i{width:13px;height:13px;stroke-width:2.5}

/* side cards on home */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;font-size:var(--fs-body)}
.kv dt{color:var(--ink-3)}
.kv dd{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.kv dd.ell{overflow-wrap:normal}
.stat-line{display:flex;align-items:center;gap:8px;font-size:var(--fs-body)}
.big-num{font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.progress-steps{display:flex;flex-direction:column;gap:10px;margin:4px 0 14px}
.progress-steps li{display:flex;align-items:center;gap:10px;font-size:var(--fs-body);color:var(--ink-2)}
.progress-steps .c{display:grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--line-strong)}
.progress-steps li.done{color:var(--ink-3)}
.progress-steps li.done .c{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}
.progress-steps li.done .c svg.i{width:11px;height:11px;stroke-width:2.75}
.progress-steps li.next{color:var(--ink);font-weight:500}
.progress-steps li.next .c{border-color:var(--ink)}

/* questions it couldn't answer */
.gaps{display:flex;flex-direction:column}
.gap{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.gap:first-child{border-top:0;padding-top:2px}
.gap q{flex:1;min-width:0;color:var(--ink);quotes:"\201C" "\201D"}
.gap time{font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap}

/* chart */
.legend{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap}
.legend i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px;vertical-align:0}
.chart{position:relative}
.chart > svg{display:block;width:100%;height:170px;overflow:visible} /* the chart itself, not an icon inside it (the empty state) */
.chart .gl{stroke:var(--grid);stroke-width:1;stroke-dasharray:3 4}
.chart .ax{fill:var(--ink-3);font-size:var(--fs-meta);font-family:var(--sans)}
.chart .b1{fill:var(--chart-1);transition:fill var(--duration-quick) var(--ease-out)}
.chart .b2{fill:var(--chart-2)}
.chart .col.on .b1{fill:var(--chart-1-hover)}
.chart .col.on .band{fill:var(--hover)}
.chart .band{fill:transparent;transition:fill var(--duration-quick) var(--ease-out)}
.chart .hit{fill:transparent;cursor:default}

/* ---------- tables ---------- */
.tbl-wrap{padding:4px 8px 8px;overflow-x:auto}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-body)}
.tbl thead th{height:34px;padding:0 12px;text-align:left;font-size:var(--fs-meta);font-weight:500;color:var(--ink-3);background:var(--raise);white-space:nowrap}
.tbl thead th:first-child{border-radius:var(--r-ctl) 0 0 var(--r-ctl)}
.tbl thead th:last-child{border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle;transition:background-color var(--duration-quick) var(--ease-out)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.row{cursor:pointer}
@media (hover:hover){.tbl tr.row:hover td{background:var(--hover)}}
.tbl tr.row.sel td{background:var(--select)}
.tbl tr.row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.c2{min-width:0}
.c2 b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.c2 small{display:block;margin-top:1px;font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.c2 b.none{color:var(--ink-3);font-weight:400;font-style:normal}
.tbl .asked{width:100%;max-width:0;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl .t{white-space:nowrap;color:var(--ink-3);font-size:var(--fs-sm)}
.tbl .st{white-space:nowrap}
.tbl .st .chip+.chip{margin-left:4px}
.tbl .act{text-align:right;white-space:nowrap}
.score{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.score i{position:relative;display:block;width:44px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink-2) 24%,transparent);overflow:hidden}
.score i b{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--ink-2)}
.tfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px 14px;font-size:var(--fs-meta);color:var(--ink-3)}
tr.is-new td{animation:row-in var(--duration-slow) var(--ease-smooth-out) both}
@keyframes row-in{from{opacity:0;transform:translateY(calc(var(--distance-base) * -1));filter:blur(var(--blur-small))}}
@media (max-width:760px){
  .tbl thead{display:none}
  .tbl,.tbl tbody{display:block}
  .tbl tr.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 8px;border-bottom:1px solid var(--line)}
  .tbl tbody tr:last-child.row{border-bottom:0}
  .tbl td{display:block;padding:0;border:0!important;background:none!important}
  .tbl td.c2td{grid-column:1}
  .tbl td.t{grid-column:2;grid-row:1;text-align:right}
  .tbl td.asked{grid-column:1/-1;max-width:none;width:auto}
  .tbl td.st{grid-column:1/-1;margin-top:4px}
  .tbl td.sc,.tbl td.act{display:none}
  .c2 b,.c2 small{max-width:none}
}

.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .search{margin-left:auto}
@media (max-width:720px){.toolbar .search{margin-left:0;width:100%;min-width:0}}

/* empty / error / skeleton */
.empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 20px;text-align:center}
.empty b{font-size:var(--fs-body);font-weight:500}
.empty p{max-width:44ch;font-size:var(--fs-sm);color:var(--ink-3)}
.empty .btn{margin-top:10px}
.empty .ic{display:grid;place-items:center;width:36px;height:36px;margin-bottom:6px;border-radius:var(--r-ctl);background:var(--raise);color:var(--ink-3)}
.empty.err .ic{background:var(--err-bg);color:var(--err-ink)}
.sk{display:block;height:12px;border-radius:var(--r-chip);background:var(--raise)}
.sk.lg{height:26px;width:72px;margin-top:10px}
.sk-row{display:flex;align-items:center;gap:16px;padding:14px 16px;border-top:1px solid var(--line)}
.sk-row:first-child{border-top:0}
.t-skel-skeleton.is-pulsing>*,.t-skel-skeleton.is-pulsing .sk{animation:t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count)}
@keyframes t-skel-pulse{0%,100%{opacity:1}50%{opacity:var(--pulse-min)}}
.reveal{animation:reveal-in var(--reveal-dur) var(--reveal-ease) both}
@keyframes reveal-in{from{opacity:0;filter:blur(var(--reveal-blur))}}
@media (prefers-reduced-motion: reduce){.t-skel-skeleton.is-pulsing>*,.t-skel-skeleton.is-pulsing .sk,.waiting .pulse{animation:none!important}.reveal{animation:none!important}}

/* ---------- chats: inbox ---------- */
.inbox{display:grid;grid-template-columns:360px minmax(0,1fr);height:calc(100vh - 136px);min-height:540px;overflow:hidden}
.ib-list{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.ib-tools{display:flex;flex-direction:column;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.ib-tools .search{min-width:0}
.ib-items{flex:1;overflow-y:auto;min-height:0;padding:4px}
.ib-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;width:100%;padding:10px 12px;border-radius:var(--r-ctl);text-align:left;color:inherit;transition:background-color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.ib-item:hover{background:var(--hover)}}
.ib-item.sel{background:var(--select)}
.ib-item b{display:flex;align-items:center;gap:6px;min-width:0;font-weight:500}
.ib-item b span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-item b svg.i{width:13px;height:13px;color:var(--ink-3)}
.ib-item time{font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap}
.ib-item.sel time{color:var(--ink-2)}
.ib-item .p{grid-column:1/-1;font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-item .tg{grid-column:1/-1;display:flex;gap:6px;margin-top:4px}
.ib-conv{display:flex;flex-direction:column;min-width:0;min-height:0}
.cv-h{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 16px 10px 20px;border-bottom:1px solid var(--line)}
.cv-h .c2 b{max-width:none;font-size:var(--fs-body)}
.cv-h .acts{margin:0 0 0 auto;flex-wrap:nowrap}
.cv-lead{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid var(--line);font-size:var(--fs-body)}
.cv-lead .muted{font-size:var(--fs-sm)}
.cv-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;min-height:0}
.cv-body>.reveal-wrap{display:flex;flex-direction:column;gap:10px}
.stamp{align-self:center;font-size:var(--fs-meta);color:var(--ink-3);padding:2px 0 6px}
.msg{display:flex;flex-direction:column;max-width:74%}
.msg .who{font-size:var(--fs-meta);color:var(--ink-3);margin-bottom:3px}
.msg .bub{padding:8px 12px;border-radius:var(--r-card);font-size:var(--fs-body);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.us{align-self:flex-start}
.msg.us .bub{background:var(--raise);color:var(--ink);border-bottom-left-radius:4px}
.msg.them{align-self:flex-end;align-items:flex-end}
.msg.them .bub{background:var(--brand,#1e6f78);color:#fff;border-bottom-right-radius:4px}
.cv-note{align-self:flex-start;display:flex;gap:6px;flex-wrap:wrap}
.cv-script{align-self:flex-end;flex:none} /* Hinglish or हिंदी, over a call in Hindi */
/* a flagged chat: the reason, in plain words, and the next step (v3.10.2). Amber = needs you, coral = urgent, mint = done */
.fb{margin:12px 16px 14px;padding:12px 14px;border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--raise);display:flex;flex-direction:column;gap:10px}
.fb-you{background:var(--you-bg);border-color:transparent}
.fb-err{background:var(--err-bg);border-color:var(--err-line)}
.fb-ok{background:var(--ok-bg);border-color:transparent}
.fb-h{display:flex;gap:10px;align-items:flex-start}
.fb-ic{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:var(--r-ctl);background:var(--tint-well);color:var(--ink-2)}
.fb-ic svg.i{width:15px;height:15px}
.fb-you .fb-ic,.fb-you .fb-t b{color:var(--you-ink)}
.fb-err .fb-ic,.fb-err .fb-t b{color:var(--err-ink)}
.fb-ok .fb-ic,.fb-ok .fb-t b{color:var(--ok-ink)}
.fb-t b{display:block;font-size:var(--fs-body);font-weight:500;line-height:1.35}
.fb-t p{margin:2px 0 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5;overflow-wrap:anywhere}
.fb-a{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fb-a .btn-ghost:last-child{margin-left:auto}
.fb-in{flex:1 1 100%;min-width:0}
.fb-ta{display:block;width:100%;min-height:56px;max-height:180px;resize:vertical;line-height:1.5;padding:8px 12px}
.fb-contact{display:inline-flex;align-items:center;gap:8px;flex:1 1 200px;min-width:0;padding:4px 4px 4px 12px;border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--card);font-size:var(--fs-sm)}
.fb-contact b{font-weight:500}
.fb-contact .tnum{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fb-contact .icon-btn{margin-left:auto}
.back{display:none}
@media (max-width:900px){
  .inbox{grid-template-columns:minmax(0,1fr);height:calc(100dvh - 180px);min-height:480px}
  .ib-list{border-right:0}
  .back{display:inline-grid}
}
/* phone: list <-> conversation = transitions.dev page side-by-side */
.t-page-slide{position:relative}
.t-page-slide .t-page[data-page-id="1"]{--t-page-from-x:calc(var(--page-slide-distance) * -1)}
.t-page-slide .t-page[data-page-id="2"]{--t-page-from-x:var(--page-slide-distance)}
.t-page-slide .t-page{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));filter:blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition:opacity var(--page-fade-dur) var(--page-fade-ease),transform var(--page-slide-dur) var(--page-slide-ease),filter var(--page-slide-dur) var(--page-slide-ease);will-change:opacity,transform,filter}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"],.t-page-slide[data-page="2"] .t-page[data-page-id="2"]{opacity:1;pointer-events:auto;transform:translateX(0);filter:blur(0);transition-delay:var(--page-stagger)}
@media (prefers-reduced-motion: reduce){.t-page-slide .t-page{transition:none!important}}

/* ---------- forms: business info + settings ---------- */
.form-wrap{display:grid;grid-template-columns:168px minmax(0,1fr);gap:40px;max-width:1120px}
.toc{position:sticky;top:16px;align-self:start;display:flex;flex-direction:column;gap:1px}
.toc a{display:block;padding:6px 10px;border-radius:var(--r-ctl);font-size:var(--fs-sm);color:var(--ink-3);text-decoration:none;transition:color var(--duration-quick) var(--ease-out),background-color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.toc a:hover{color:var(--ink)}}
.toc a.cur{color:var(--ink);background:var(--select);font-weight:500}
/* one column: the section list goes (after .toc, so it wins) */
@media (max-width:1000px){.form-wrap{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
.fsec{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px 32px;padding:24px 0;border-top:1px solid var(--line);scroll-margin-top:16px}
.fsec:first-child,.fsec.first{border-top:0;padding-top:4px}
.fsec[hidden]{display:none}
/* ---- Business info: cards you read, and edit in place ----
   A card is a title, its values in plain rows and one Edit. Editing swaps the rows for the fields; Save and Cancel
   stay in reach at the bottom of the screen while the card is taller than it. Radii are concentric (14 card, 10 inside). */
#info-form{display:flex;flex-direction:column;gap:16px;max-width:720px;min-width:0}
.kc{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card);box-shadow:var(--edge);min-width:0}
.kc[hidden]{display:none}
/* Basics, Tone, Services and Hours read as Messages reads: the box of rows is the card, the tab names the section */
.kc.kc-flat{background:none;border:0;box-shadow:none}
.kc.kc-flat>.kc-b{padding:0}
.kc-flat .srow .l b{display:flex;align-items:baseline;gap:8px}
/* Messages sits under Receptionist, whose tab already names it: no second heading beside it, and the cards' width */
#g-msg{grid-template-columns:minmax(0,1fr)}
#g-msg>div:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#g-msg>.fields{max-width:720px}
.kc-h{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 10px}
.kc-h .grow{flex:1;min-width:0;padding-top:3px}
.kc-h h2{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-body);font-weight:500;line-height:1.3}
.kc-h p{margin-top:3px;font-size:var(--fs-sm);line-height:1.4;color:var(--ink-3);text-wrap:pretty}
.kc-n{font-size:var(--fs-meta);font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.kc-b{padding:0 16px 14px}
.kc-ed{display:flex;flex-direction:column;gap:16px;padding:6px 16px 18px}
.kc-f{position:sticky;bottom:16px;z-index:2;display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line);border-radius:0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px);background:var(--card)}
.kc.is-swap .kc-b,.kc.is-swap .kc-ed,.kc.is-swap .kc-f{animation:kc-in 200ms cubic-bezier(0.2,0,0,1)}
@keyframes kc-in{from{opacity:0;transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.kc.is-swap .kc-b,.kc.is-swap .kc-ed,.kc.is-swap .kc-f{animation:none}}
/* label and value */
.kv-r{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.kv-r:first-child{border-top:0;padding-top:2px}
.kv-r:last-child{padding-bottom:2px}
.kv-r dt{font-size:var(--fs-body);color:var(--ink-3)}
.kv-r dd{font-size:var(--fs-body);line-height:1.45;color:var(--ink);overflow-wrap:anywhere;text-wrap:pretty}
.kv-none,.kc-none{color:var(--ink-3)}
.kc-none{font-size:var(--fs-body);line-height:1.45}
.kv-add,.kc-more{font:inherit;font-size:var(--fs-sm);color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;cursor:pointer}
.kv-add{position:relative;margin-left:10px}
.kv-add::after,.kc-more::after{content:"";position:absolute;inset:-10px -8px}
@media (hover:hover){.kv-add:hover,.kc-more:hover{color:var(--ink)}}
.kc-more{position:relative;margin-top:10px}
/* a list: a name, and what goes with it at the end of the line */
.kl-r{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.kl-r:first-child{border-top:0;padding-top:2px}
.kl-r:last-child{padding-bottom:2px}
.kl-r .grow{flex:1;min-width:0}
.kl-r b{font-size:var(--fs-body);font-weight:400;color:var(--ink);overflow-wrap:anywhere}
.kl-r small{display:block;margin-top:1px;font-size:var(--fs-sm);color:var(--ink-3)}
.kl-v{flex:none;font-size:var(--fs-body);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.kl-v.none{color:var(--ink-3)}
.kl-r.now b{font-weight:500}
.kl-now{margin-left:8px;font-size:var(--fs-sm);color:var(--ink-3)}
.kc-sub{margin:16px 0 4px;font-size:var(--fs-sm);font-weight:500;color:var(--ink-3)}
.kc-ed .kc-sub{margin:4px 0 0}
.kc-text{font-size:var(--fs-body);line-height:1.5;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty}
.kc-text.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.kc-note{margin-top:10px;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-3);text-wrap:pretty}
.kc-note+.kc-note{margin-top:4px}
.kc-yes{appearance:none;border:0;background:none;padding:0;margin-left:2px;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.kc-yes:disabled{opacity:.5;cursor:default}
.fb-amt{color:var(--ink);font-weight:500}
.fb-also{margin:8px 0 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
/* a question and the answer it gives */
.kq{padding:12px 0;border-top:1px solid var(--line)}
.kq:first-child{border-top:0;padding-top:2px}
.kq:last-child{padding-bottom:2px}
.kq b{display:block;font-size:var(--fs-body);font-weight:500;color:var(--ink);text-wrap:pretty}
.kq p{margin-top:3px;font-size:var(--fs-body);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.kq .chip{margin-top:6px}
/* asked in a chat, with no answer here yet: the one thing on this page that needs the owner */
.k-asked{margin-bottom:14px;padding:12px 12px 6px;border-radius:var(--r-ctl);background:var(--you-bg)}
.kc-ed .k-asked{margin-bottom:0}
.k-asked>p{font-size:var(--fs-sm);color:var(--you-ink)}
.k-asked-i{display:flex;align-items:center;gap:12px;padding:8px 0}
.k-asked-i+.k-asked-i{border-top:1px solid color-mix(in srgb,var(--you-ink) 16%,transparent)}
.k-asked-i q{flex:1;min-width:0;font-size:var(--fs-body);color:var(--ink);quotes:"\201C" "\201D";text-wrap:pretty}
.k-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
.tab-n{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:var(--r-ctl);background:var(--you-bg);color:var(--you-ink);font-size:var(--fs-badge);font-weight:500;font-variant-numeric:tabular-nums}
@media (max-width:520px){
  .kv-r{grid-template-columns:minmax(0,1fr);gap:2px}
  .k-2{grid-template-columns:minmax(0,1fr)}
  .kc-f .btn{flex:1}
}
@media (max-width:720px){.kc-f{bottom:calc(78px + env(safe-area-inset-bottom))}}
/* four short groups fit a phone's width without scrolling: they share it */
@media (max-width:520px){#info-tabs a,#rc-tabs a{flex:1 1 auto;justify-content:center;padding:0 10px;font-size:var(--fs-body)}}
/* Settings groups: a list at the side on a wide screen, a strip of pills that scrolls sideways on a narrow one */
@media (max-width:1000px){
  .toc.gtabs{position:sticky;top:0;z-index:5;display:flex;flex-direction:row;gap:6px;margin-bottom:8px;padding:8px 0;background:var(--panel);overflow-x:auto;scrollbar-width:none}
  .toc.gtabs::-webkit-scrollbar{display:none}
  .gtabs a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--fs-body);white-space:nowrap}
  .gtabs a.cur{border-color:var(--line-2)}
}
@media (max-width:860px){.fsec{grid-template-columns:minmax(0,1fr)}}
.fsec h2{display:flex;align-items:center;gap:8px;font-size:var(--fs-body);font-weight:500}
.fsec .d{margin-top:4px;font-size:var(--fs-sm);color:var(--ink-3)}
.fields{display:flex;flex-direction:column;gap:16px;min-width:0}
.rows{border:1px solid var(--card-line);border-radius:var(--r-ctl);background:var(--card)}
.srow{display:flex;align-items:center;gap:16px;min-height:56px;padding:12px 16px;border-top:1px solid var(--line)}
.rows>.srow:first-child,.rows>.t-acc:first-child .srow{border-top:0}
.srow .l{flex:1;min-width:0}
.srow .l b{display:block;font-size:var(--fs-body);font-weight:500}
.srow .l small{display:block;margin-top:1px;font-size:var(--fs-sm);color:var(--ink-3);overflow-wrap:anywhere}
.srow .l small.ell{overflow-wrap:normal}
.rows .t-acc+.t-acc .srow,.rows .srow+.t-acc .srow,.rows .t-acc+.srow{border-top:1px solid var(--line)}
.srow-edit{padding:0 16px 16px}
.srow-edit .row{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.danger-rows{border-color:var(--err-line)}

/* accordion = transitions.dev accordion expand */
.t-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--acc-collapse) var(--acc-ease)}
.t-acc[data-open="true"] .t-acc-panel{grid-template-rows:1fr;transition:grid-template-rows var(--acc-expand) var(--acc-ease)}
.t-acc-panel-inner{overflow:hidden;opacity:0;filter:blur(2px);min-height:0;transition:opacity var(--acc-collapse) var(--acc-ease),filter var(--acc-collapse) var(--acc-ease)}
.t-acc[data-open="true"] .t-acc-panel-inner{opacity:1;filter:blur(0);transition:opacity var(--acc-expand) var(--acc-ease),filter var(--acc-expand) var(--acc-ease)}
.t-acc-chevron{display:inline-flex;transform:scaleY(1);transform-origin:center;transition:transform var(--acc-chevron) var(--acc-ease)}
.t-acc-chevron path{vector-effect:non-scaling-stroke}
.t-acc[data-open="true"] .t-acc-chevron{transform:scaleY(-1)}
@media (prefers-reduced-motion: reduce){.t-acc-panel,.t-acc-panel-inner,.t-acc-chevron{transition:none!important}}
.t-acc-chevron svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* business info editors (they write the same plain-text fields the API stores) */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:2px;min-height:28px;max-width:100%;padding:2px 2px 2px 10px;border:1px solid var(--line-2);border-radius:var(--r-chip);background:var(--btn);font-size:var(--fs-sm);line-height:1.4;overflow-wrap:anywhere}
.tag button{display:grid;place-items:center;flex:none;align-self:flex-start;width:22px;height:22px;border-radius:var(--r-chip);color:var(--ink-3);transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.tag button:hover{background:var(--hover);color:var(--ink)}}
.tag button svg.i{width:13px;height:13px}
.prices{display:flex;flex-direction:column;gap:6px}
/* services and prices, one row each: name (and how long it takes), what it costs, remove */
.svcs{display:flex;flex-direction:column}
.svc{display:grid;grid-template-columns:minmax(0,1fr) 180px 32px;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.svc:first-child{border-top:0;padding-top:0}
.svc-n b{display:block;font-size:var(--fs-body);font-weight:500;overflow-wrap:anywhere}
.svc-m{display:inline-block;margin-top:1px;font-size:var(--fs-sm);color:var(--ink-3);text-decoration:none}
@media (hover:hover){.svc-m:hover{color:var(--ink-2);text-decoration:underline}}
@media (max-width:620px){.svc{grid-template-columns:minmax(0,1fr) 32px}.svc .money{grid-column:1;grid-row:2}}
.price{display:grid;grid-template-columns:minmax(0,1fr) 180px 32px;gap:8px;align-items:center}
/* 2.2: Questions for calls (Receptionist, Services and prices): its rows line up with the services card above it */
.jq-b{padding:0 22px 14px}
.jq{display:flex;flex-direction:column;gap:var(--sp-2)}
.jq-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.jq-h b{font-size:var(--fs-body);font-weight:500;color:var(--ink)}
.jq-h small{font-size:var(--fs-meta);color:var(--ink-3);font-variant-numeric:tabular-nums}
.jq-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2);counter-reset:jq}
.jq-l li{display:grid;grid-template-columns:20px minmax(0,1fr) 32px;align-items:center;gap:var(--sp-2);counter-increment:jq}
.jq-l li::before{content:counter(jq);font-size:var(--fs-meta);color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.jq-l textarea.input{resize:none;field-sizing:content;min-height:var(--h-ctl);line-height:1.4;padding-block:6px;overflow:hidden}
.jq-add{align-self:flex-start;margin-left:28px}
@media (max-width:640px){
  .jq-l li{grid-template-columns:16px minmax(0,1fr) 44px}
  .jq-l textarea.input{min-height:44px;font-size:16px;padding-block:10px}
  .jq-l .icon-btn{width:44px;height:44px}
  .jq-add{margin-left:24px}
}
.money{display:flex;align-items:center;height:var(--h-ctl);border:1px solid var(--field-line);border-radius:var(--r-ctl);background:var(--field);overflow:hidden;transition:border-color var(--duration-quick) var(--ease-out)}
.money:focus-within{border-color:var(--ink-3)}
.svc.is-bad .money,.price.is-bad .money,.day.is-bad .input{border-color:var(--err-line)}
.t-error-msg.row-err{grid-column:1/-1;margin:0;opacity:1;visibility:visible}
.money select{height:100%;border:0;border-right:1px solid var(--line-2);background:var(--raise);padding:0 6px;font-size:var(--fs-sm);color:var(--ink-2);outline:0}
.money span{padding:0 0 0 8px;color:var(--ink-3)}
.money input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;padding:0 8px 0 3px;font-size:var(--fs-body)}
.money input:disabled{color:var(--ink-3)}
.money.off span,.money.off input{display:none}
.money.off select{flex:1;border-right:0}
@media (max-width:620px){.price{grid-template-columns:minmax(0,1fr) 32px}.price .money{grid-column:1;grid-row:2}}
.days{border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card)}
.day{display:grid;grid-template-columns:96px 40px minmax(0,1fr);align-items:center;gap:8px;min-height:48px;padding:6px 12px;border-top:1px solid var(--line)}
.day:first-child{border-top:0}
.day .dn{font-size:var(--fs-body);font-weight:500}
.day .times{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-3)}
.day .times .input{width:118px;height:30px;font-size:var(--fs-sm)}
.day.closed .dn{color:var(--ink-3)}
/* two time pickers need about 480px: below that they get their own full-width line */
@media (max-width:520px){.day{grid-template-columns:minmax(0,1fr) auto}.day .times{grid-column:1/-1;flex-wrap:wrap;padding-bottom:4px}.day .times .input{flex:1 1 0;width:auto;min-width:0}}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.faqs{display:flex;flex-direction:column;gap:8px}
.faq{border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card)}
.faq .t-acc-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;text-align:left;font-size:var(--fs-body);font-weight:500}
.faq .t-acc-head .q{flex:1;min-width:0}
.faq .t-acc-chevron{color:var(--ink-3)}
.faq .fa{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px}
.faq .fa .row{display:flex;justify-content:flex-end}
.sugg{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px dashed var(--line-2);border-radius:var(--r-ctl)}
.sugg-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.sugg-i{display:flex;align-items:center;gap:10px;font-size:var(--fs-body)}
.sugg-i q{flex:1;min-width:0;quotes:"\201C" "\201D"}
.tone{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:620px){.tone{grid-template-columns:minmax(0,1fr)}}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--btn);text-align:left;transition:border-color var(--duration-quick) var(--ease-out),box-shadow var(--duration-quick) var(--ease-out)}
@media (hover:hover){.opt:hover{border-color:var(--line-strong)}}
.opt b{font-size:var(--fs-body);font-weight:500}
.opt span{font-size:var(--fs-sm);color:var(--ink-3)}
.opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.code{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:var(--r-ctl);background:var(--code-bg);border:1px solid var(--line)}
.code code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font:500 12.5px/1.6 var(--mono);color:var(--code-ink);scrollbar-width:none}
.code .btn{background:rgba(242,241,236,.08);border-color:rgba(242,241,236,.14);color:#f2f1ec}
@media (hover:hover){.code .btn:hover{background:rgba(242,241,236,.14)}}
.plat-steps{margin:0;padding:12px 14px 12px 32px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);list-style:decimal;font-size:var(--fs-body);color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.plat-steps b{color:var(--ink);font-weight:500}
.bubble-prev{display:inline-block;padding:8px 12px;background:var(--brand,#1e6f78);color:#fff;font-size:var(--fs-sm);transition:border-radius var(--duration-quick) var(--ease-out)}
/* ---------- Chat look: colour, picture, font (v3.21) ---------- */
.look-edit{display:flex;flex-direction:column;gap:14px}
.look-edit .row{margin-top:0}
.look-prev{display:flex;align-items:center;gap:12px;min-height:34px}
.look-prev .bubble-prev{flex:none;border-radius:16px 16px 16px 4px;transition:background-color var(--duration-quick) var(--ease-out)}
.look-group{display:flex;flex-direction:column;gap:8px}
.swatches{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sw{flex:none;width:32px;height:32px;border-radius:var(--r-ctl);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(0,0,0,.18);transition:transform var(--duration-quick) var(--ease-out)}
.sw:active{transform:scale(.96)}
.sw[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.sw-text{width:auto;padding:0 12px;background:var(--field);color:var(--ink);font-size:var(--fs-sm);box-shadow:inset 0 0 0 1px var(--field-line)}
.own{display:flex;align-items:center;gap:8px}
.own input[type=color]{flex:none;width:var(--h-ctl);height:var(--h-ctl);padding:2px;border:1px solid var(--field-line);border-radius:var(--r-ctl);background:var(--field);cursor:pointer}
.own .input{width:132px}
.pic-prev{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;overflow:hidden;background:var(--brand,#1e6f78);color:#fff;font-size:var(--fs-meta);font-weight:600}
.pic-prev img{display:block;width:100%;height:100%;object-fit:cover;background:#fff}
.fontlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;margin-bottom:12px}
.fopt{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;border:1px solid var(--field-line);border-radius:var(--r-ctl);background:var(--field);color:var(--ink);font-size:var(--fs-body);cursor:pointer}
.fopt input{flex:none;accent-color:var(--ink)}
.fopt.on{border-color:var(--ink)}
#font-other{margin-bottom:12px}
#font-other .check{margin-top:10px}
@media (max-width:720px){.sw{width:40px;height:40px}.sw-text{width:auto}.fopt{min-height:44px}.fontlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fwd{display:flex;flex-direction:column}
.fwd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.fwd-row:first-child{border-top:0}
.fwd-row b{font-weight:500}
.fwd-row p{grid-column:1/-1;font-size:var(--fs-sm);color:var(--ink-3)}
.fwd-row .code{padding:4px 4px 4px 10px}
/* On a phone the carrier's name has a line to itself, and its code runs the full width under it: side by side,
   "AT&T, T-Mobile and most others" broke into three lines beside the code. The landline row has no code. */
@media (max-width:640px){.fwd-row{grid-template-columns:minmax(0,1fr);gap:8px}.fwd-row .code{width:100%}.fwd-row>span:empty{display:none}}

/* save bar = transitions.dev toast clocks */
.savebar{position:sticky;bottom:16px;z-index:25;display:flex;align-items:center;gap:10px;margin-top:24px;padding:8px 8px 8px 16px;border-radius:var(--r-ctl);background:var(--strong);color:var(--on-strong);box-shadow:var(--shadow-pop);pointer-events:none}
.savebar.is-open{pointer-events:auto}
.savebar span{flex:1;min-width:0;font-size:var(--fs-sm)}
.savebar .btn-ghost{color:var(--on-strong);opacity:.75}
@media (hover:hover){.savebar .btn-ghost:hover{opacity:1;background:rgba(127,127,127,.18)}}
@media (max-width:720px){.savebar{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* ---------- setup ("Get live": the real three steps) ---------- */
.setup{max-width:780px}
.lede{margin-bottom:20px;font-size:var(--fs-body);color:var(--ink-2);max-width:62ch}
.steps3{display:flex;flex-direction:column;gap:12px}
.step3{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:18px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);transition:border-color var(--duration-fast) var(--ease-smooth-out)}
.step3.now{border-color:var(--line-strong)}
.step3 .num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);font-size:var(--fs-meta);font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.step3.done .num{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}
.step3.done .num svg.i{width:14px;height:14px;stroke-width:2.5}
.step3 h3{font-size:var(--fs-lg);font-weight:500;line-height:28px}
.step3 .sd{margin-top:2px;color:var(--ink-2);font-size:var(--fs-body)}
.step3 .body{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.waiting{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
.waiting .pulse{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:t-skel-pulse var(--pulse-dur) ease-in-out infinite}
.seen{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ok-ink)}
.seen svg.i{width:14px;height:14px}
.alt{padding-top:12px;border-top:1px solid var(--line)}
.alt-h{font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);margin-bottom:8px}
.alt .acts{margin-top:0}
.alt-form{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.done-note{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:var(--fs-sm);color:var(--ok-ink)}
.done-note svg.i{margin-top:2px;width:14px;height:14px}
.live-done{display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 20px 28px;text-align:center}
.live-done .ok-ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:10px;border-radius:50%;background:var(--ok-bg);color:var(--ok-ink)}
.live-done .ok-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.live-done .t-stagger-line--1{font-size:var(--fs-title);font-weight:600}
.live-done .t-stagger-line--2{font-size:var(--fs-body);color:var(--ink-2);max-width:48ch}

/* success check (transitions.dev) */
.t-success-check{display:inline-block;transform-origin:center;opacity:0;will-change:transform,opacity,filter}
.t-success-check svg{display:block;overflow:visible}
.t-success-check svg path{stroke-dasharray:20;stroke-dashoffset:20}
.t-success-check[data-state="in"]{animation:t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards,t-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards,t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards,t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards}
.t-success-check[data-state="in"] svg path{animation:t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay,0ms) forwards}
@keyframes t-check-fade{from{opacity:0}to{opacity:1}}
@keyframes t-check-rotate{from{transform:rotate(var(--check-rotate-from))}to{transform:rotate(0deg)}}
@keyframes t-check-blur{from{filter:blur(var(--check-blur-from))}to{filter:blur(0)}}
@keyframes t-check-bob{from{translate:0 var(--check-y-amount)}to{translate:0 0}}
@keyframes t-check-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.t-success-check{animation:none!important;opacity:1}.t-success-check svg path{animation:none!important;stroke-dashoffset:0!important}}

/* texts reveal (transitions.dev) */
.t-stagger-line{display:block;opacity:0;transform:translateY(var(--stagger-distance));filter:blur(var(--stagger-blur));transition:opacity var(--stagger-dur) var(--stagger-ease),transform var(--stagger-dur) var(--stagger-ease),filter var(--stagger-dur) var(--stagger-ease);will-change:transform,opacity,filter}
.t-stagger-line--2{transition-delay:var(--stagger-stagger)}
.t-stagger-line--3{transition-delay:calc(var(--stagger-stagger) * 2)}
.t-stagger.is-shown .t-stagger-line{opacity:1;transform:translateY(0);filter:blur(0)}
.t-stagger.is-hiding .t-stagger-line{opacity:0;transform:translateY(0);filter:blur(0);transition:opacity 200ms ease,transform 0s linear,filter 0s linear;transition-delay:0s}
@media (prefers-reduced-motion: reduce){.t-stagger-line{transition:none!important}}

/* shimmer text (transitions.dev): "waiting to see it on your website" */
.t-shimmer{position:relative;display:inline-block;color:var(--shimmer-base)}
.t-shimmer::before{content:attr(data-text);position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,transparent 0%,transparent 40%,var(--shimmer-highlight) 50%,transparent 60%,transparent 100%);background-size:var(--shimmer-band) 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite}
@keyframes t-shimmer{0%{background-position:100% 0}100%{background-position:0% 0}}
@media (prefers-reduced-motion: reduce){.t-shimmer::before{animation:none!important}}

/* ---------- floating surfaces ---------- */
/* account menu = transitions.dev menu dropdown */
.menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:70;min-width:220px;padding:4px;border-radius:var(--r-ctl);background:var(--card);box-shadow:var(--shadow-pop)}
.menu-h{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu-h b{display:block;font-size:var(--fs-sm);font-weight:500}
.menu-h small{display:block;font-size:var(--fs-meta);color:var(--ink-3)}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;height:32px;padding:0 10px;border-radius:var(--r-chip);font-size:var(--fs-sm);color:var(--ink-2);text-decoration:none;text-align:left;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
.menu a:focus-visible,.menu button:focus-visible{background:var(--hover);color:var(--ink);outline:none}@media (hover:hover){.menu a:hover,.menu button:hover{background:var(--hover);color:var(--ink);outline:none}}
.menu-sep{height:1px;margin:4px 0;background:var(--line)}
:root[data-rail="1"] .menu{left:0;right:auto;width:240px}
/* the account menu is wider than the thin rail: while it's open the sidebar stops clipping it and sits above the page */
.side:has(.menu.is-open,.menu.is-closing){overflow:visible;z-index:30}
@media (max-width:1100px){.menu{left:0;right:auto;width:240px}}
.t-dropdown{transform-origin:top left;transform:scale(var(--dropdown-pre-scale));opacity:0;pointer-events:none;transition:transform var(--dropdown-open-dur) var(--dropdown-ease),opacity var(--dropdown-open-dur) var(--dropdown-ease);will-change:transform,opacity}
.t-dropdown[data-origin="top-right"]{transform-origin:top right}
.t-dropdown[data-origin="top-center"]{transform-origin:top center}
.t-dropdown[data-origin="bottom-left"]{transform-origin:bottom left}
.t-dropdown[data-origin="bottom-center"]{transform-origin:bottom center}
.t-dropdown[data-origin="bottom-right"]{transform-origin:bottom right}
.t-dropdown.is-open{transform:scale(1);opacity:1;pointer-events:auto}
.t-dropdown.is-closing{transform:scale(var(--dropdown-closing-scale));opacity:0;pointer-events:none;transition:transform var(--dropdown-close-dur) var(--dropdown-ease),opacity var(--dropdown-close-dur) var(--dropdown-ease)}
@media (prefers-reduced-motion: reduce){.t-dropdown{transition:none!important}}

/* drawer (client details): panel-reveal clocks, sliding in from the right */
.scrim{position:fixed;inset:0;z-index:60;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--panel-close-dur) var(--panel-ease)}
.scrim.on{opacity:1;pointer-events:auto;transition-duration:var(--panel-open-dur)}
.drawer{position:fixed;top:8px;right:8px;bottom:8px;z-index:61;width:min(480px,calc(100vw - 16px));display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow-pop);
  transform:translateX(24px);opacity:0;filter:blur(var(--panel-blur));pointer-events:none;visibility:hidden;
  transition:transform var(--panel-close-dur) var(--panel-ease),opacity var(--panel-close-dur) var(--panel-ease),filter var(--panel-close-dur) var(--panel-ease),visibility 0s linear var(--panel-close-dur);will-change:transform,opacity,filter}
.drawer[data-open="true"]{transform:translateX(0);opacity:1;filter:blur(0);pointer-events:auto;visibility:visible;
  transition:transform var(--panel-open-dur) var(--panel-ease),opacity var(--panel-open-dur) var(--panel-ease),filter var(--panel-open-dur) var(--panel-ease),visibility 0s}
@media (prefers-reduced-motion: reduce){.drawer,.scrim{transition:none!important}}
@media (max-width:720px){.drawer{top:auto;left:0;right:0;bottom:0;width:100%;max-height:92vh;border-radius:var(--r-card) var(--r-card) 0 0;transform:translateY(24px)}}
.dr-h{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 14px 20px;border-bottom:1px solid var(--line)}
.dr-h h2{font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em}
.dr-h h2.none{color:var(--ink-3);font-weight:500}
.dr-h p{margin-top:2px;font-size:var(--fs-sm);color:var(--ink-3)}
.dr-h .icon-btn{margin-left:auto}
.dr-b{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:22px}
.dr-f{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.dr-f .grow{margin-right:auto}
.sec-lbl{margin-bottom:10px;font-size:var(--fs-meta);font-weight:500;color:var(--ink-3)}
.did{display:flex;flex-wrap:wrap;gap:6px}
.dr-b .transcript{display:flex;flex-direction:column;gap:10px}
.dr-b .msg{max-width:86%}

/* modal = transitions.dev modal */
.modal-wrap{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--modal-close-dur) var(--modal-ease)}
.modal-wrap.on{opacity:1;pointer-events:auto;transition-duration:var(--modal-open-dur)}
.modal{width:min(420px,100%);padding:20px;border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-pop)}
.modal h2{font-size:var(--fs-lg);font-weight:600}
.modal p{margin-top:6px;font-size:var(--fs-body);color:var(--ink-2)}
.modal .acts{justify-content:flex-end;margin-top:20px}
.t-modal{transform-origin:center;transform:scale(var(--modal-scale));opacity:0;pointer-events:none;transition:transform var(--modal-open-dur) var(--modal-ease),opacity var(--modal-open-dur) var(--modal-ease);will-change:transform,opacity}
.t-modal.is-open{transform:scale(1);opacity:1;pointer-events:auto}
.t-modal.is-closing{transform:scale(var(--modal-scale-close));opacity:0;pointer-events:none;transition:transform var(--modal-close-dur) var(--modal-ease),opacity var(--modal-close-dur) var(--modal-ease)}
@media (prefers-reduced-motion: reduce){.t-modal,.modal-wrap{transition:none!important}}

/* tooltip = transitions.dev tooltip, one shared bubble positioned on the page */
.t-tt{position:absolute;bottom:calc(100% + 8px);left:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:0;overflow:hidden;translate:var(--tt-x,0px) 0;scale:var(--tt-scale);transform-origin:50% 100%;padding:6px 9px;border-radius:var(--r-chip);background:var(--tt-bg);color:var(--tt-fg);white-space:nowrap;font-size:var(--fs-meta);font-weight:500;line-height:1.35;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 6px 0 rgba(0,0,0,.08),0 4px 24px 0 rgba(0,0,0,.12);opacity:0;pointer-events:none;
  transition:opacity var(--tt-out-dur) var(--tt-out-ease),scale var(--tt-out-dur) var(--tt-out-ease),translate var(--tt-move-dur) var(--tt-move-ease),width var(--tt-move-dur) var(--tt-move-ease)}
.t-tt[data-show="true"]{opacity:1;scale:1;transition:opacity var(--tt-in-dur) var(--tt-in-ease) var(--tt-delay),scale var(--tt-in-dur) var(--tt-in-ease) var(--tt-delay),translate var(--tt-move-dur) var(--tt-move-ease),width var(--tt-move-dur) var(--tt-move-ease)}
.t-tt-text{white-space:nowrap}
@media (prefers-reduced-motion: reduce){.t-tt{transition:none!important}}
.tip.t-tt{position:fixed;top:0;bottom:auto;z-index:95;translate:var(--tt-x,0px) var(--tt-y,0px);transform-origin:50% 0}

/* toast = transitions.dev toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:90;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);margin-left:0;padding:9px 16px 9px 10px;border-radius:var(--r-ctl);background:var(--strong);color:var(--on-strong);box-shadow:var(--shadow-pop);font-size:var(--fs-body);pointer-events:none}
.toast-slot{position:fixed;left:0;right:0;bottom:24px;z-index:90;display:flex;justify-content:center;pointer-events:none}
.toast-slot .toast{position:static}
.toast .tk{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--lime);color:var(--night)}
.toast .tk svg.i{width:12px;height:12px;stroke-width:3}
.toast.bad .tk{background:var(--err-bg);color:var(--err-ink)}
/* errors stay until dismissed, so they carry a close button */
.toast.is-open{pointer-events:auto}
.toast-x{display:grid;place-items:center;flex:none;width:28px;height:28px;margin:-4px -8px -4px 2px;border-radius:var(--r-chip);color:inherit;opacity:.75}
@media (hover:hover){.toast-x:hover{opacity:1;background:rgba(127,127,127,.18)}}
.toast-x svg.i{width:14px;height:14px}
@media (max-width:720px){.toast-slot{bottom:calc(88px + env(safe-area-inset-bottom))}}
.t-toast{opacity:0;transform:translateY(var(--toast-distance)) scale(var(--toast-scale));filter:blur(var(--toast-blur));will-change:transform,opacity,filter;transition:opacity var(--toast-close) var(--toast-ease),transform var(--toast-close) var(--toast-ease),filter var(--toast-close) var(--toast-ease)}
.t-toast.is-open{opacity:1;transform:translateY(0) scale(1);filter:blur(0);transition:opacity var(--toast-open) var(--toast-ease),transform var(--toast-open) var(--toast-ease),filter var(--toast-open) var(--toast-ease)}
@media (prefers-reduced-motion: reduce){.t-toast{transition:none!important}}

/* icon swap (theme button) */
.t-icon-swap{position:relative;display:inline-grid}
.t-icon-swap .t-icon{grid-area:1/1;display:grid;place-items:center;transition:opacity var(--icon-swap-dur) var(--icon-swap-ease),filter var(--icon-swap-dur) var(--icon-swap-ease),transform var(--icon-swap-dur) var(--icon-swap-ease);will-change:opacity,filter,transform}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],.t-icon-swap[data-state="b"] .t-icon[data-icon="b"]{opacity:1;filter:blur(0);transform:scale(1)}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],.t-icon-swap[data-state="b"] .t-icon[data-icon="a"]{opacity:0;filter:blur(var(--icon-swap-blur));transform:scale(var(--icon-swap-start-scale))}
@media (prefers-reduced-motion: reduce){.t-icon-swap .t-icon{transition:none!important}}

/* number pop-in (KPI figures when they change) */
@keyframes t-digit-pop-in{0%{transform:translate(calc(var(--digit-distance) * var(--digit-dir-x)),calc(var(--digit-distance) * var(--digit-dir-y)));opacity:0;filter:blur(var(--digit-blur))}100%{transform:translate(0,0);opacity:1;filter:blur(0)}}
.t-digit-group{display:inline-flex;align-items:baseline}
.t-digit{display:inline-block;will-change:transform,opacity,filter}
.t-digit-group.is-animating .t-digit{animation:t-digit-pop-in var(--digit-dur) var(--digit-ease) both}
.t-digit-group.is-animating .t-digit[data-stagger="1"]{animation-delay:var(--digit-stagger)}
.t-digit-group.is-animating .t-digit[data-stagger="2"]{animation-delay:calc(var(--digit-stagger) * 2)}
@media (prefers-reduced-motion: reduce){.t-digit-group .t-digit{animation:none!important}}

/* notification badge (Chats "needs you" count) */
@keyframes t-badge-slide-in{from{transform:translate(var(--badge-offset-x),var(--badge-offset-y))}to{transform:translate(0,0)}}
.t-badge{position:absolute;top:-6px;right:-8px;pointer-events:none;will-change:transform}
.t-badge[data-open="true"]{animation:t-badge-slide-in var(--badge-slide-dur) var(--badge-slide-ease)}
.t-badge-dot{display:block;transform-origin:center;transform:scale(1);opacity:1;filter:blur(0);transition:transform var(--badge-pop-dur) var(--badge-pop-ease),opacity var(--badge-fade-dur) var(--badge-pop-ease),filter var(--badge-pop-dur) var(--badge-pop-ease);will-change:transform,opacity,filter}
.t-badge[data-open="false"] .t-badge-dot{transform:scale(0);opacity:0;filter:blur(var(--badge-blur));transition:transform var(--badge-pop-close-dur) var(--badge-close-ease),opacity var(--badge-fade-close-dur) var(--badge-close-ease),filter var(--badge-pop-close-dur) var(--badge-close-ease)}
@media (prefers-reduced-motion: reduce){.t-badge,.t-badge-dot{animation:none!important;transition:none!important}}

/* text swap (the answering status) */
.t-text-swap{display:inline-block;transform:translateY(0);filter:blur(0);opacity:1;transition:transform var(--text-swap-dur) var(--text-swap-ease),filter var(--text-swap-dur) var(--text-swap-ease),opacity var(--text-swap-dur) var(--text-swap-ease);will-change:transform,filter,opacity}
.t-text-swap.is-exit{transform:translateY(calc(var(--text-swap-translate-y) * -1));filter:blur(var(--text-swap-blur));opacity:0}
.t-text-swap.is-enter-start{transform:translateY(var(--text-swap-translate-y));filter:blur(var(--text-swap-blur));opacity:0;transition:none}
@media (prefers-reduced-motion: reduce){.t-text-swap{transition:none!important}}

/* error shake (transitions.dev) */
.t-input{transition:border-color 150ms ease-out;will-change:transform}
.t-input.is-error{transition:border-color var(--revert-dur,280ms) ease-out}
.t-error-msg{opacity:0;visibility:hidden;transition:opacity var(--revert-dur,280ms) ease-out,visibility 0s linear var(--revert-dur,280ms)}
.t-input-wrap.is-error .t-error-msg{opacity:1;visibility:visible;transition:opacity var(--revert-dur,280ms) ease-out,visibility 0s linear 0s}
.t-input.is-shaking{animation:t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear}
@keyframes t-input-shake{0%{transform:translateX(0);animation-timing-function:var(--shake-ease)}28.57%{transform:translateX(var(--shake-distance));animation-timing-function:var(--shake-ease)}57.14%{transform:translateX(calc(var(--shake-distance) * -1));animation-timing-function:var(--shake-ease)}78.57%{transform:translateX(var(--shake-overshoot));animation-timing-function:var(--shake-ease)}100%{transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){.t-input{animation:none!important;transform:none!important}}


@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .screen.on,tr.is-new td{animation:none!important}
  .app,.nav-pill,.meter i,.ring .fg{transition:none!important}
}

/* =====================================================================
   v5: spacing + corners follow the reference exactly
   16px between every card (rows and columns), 14px card corners,
   16px card padding, 8px on the things inside a card.
   ===================================================================== */
.card{border-radius:var(--r-card)}
.card-h{padding:16px 16px 8px}
.home .notes{margin:0}
/* phones: the day in a line (with how many chats need you), the ask bar, anything to check; then the numbers and the chart, then the list */
.more-list{display:flex;flex-direction:column;gap:2px;margin:-6px -8px 0}
.more-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px;border-radius:var(--r-ctl);color:var(--ink);text-decoration:none}
.more-row:active{background:var(--raise)}
.more-row b{display:block;font-weight:500;font-size:var(--fs-body)}
.more-row small{display:block;margin-top:1px;font-size:var(--fs-sm);color:var(--ink-3)}
.more-row>svg{color:var(--ink-3)}
.more-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-ctl);background:var(--raise);color:var(--ink-2)}
@media (max-width:720px){
  .note{align-items:flex-start;padding:12px 14px;font-size:var(--fs-body);line-height:1.45}
  .note p{flex:1 1 0;min-width:0}
  .note .btn{flex:1 0 100%;margin-left:0}
}
.more-row .grow{flex:1;min-width:0}
@media (max-width:1000px){.form-wrap{gap:4px}}
/* pull to refresh (touch): the three dots ride down with the finger; the page gives a little under it */
.ptr{position:fixed;top:calc(52px + env(safe-area-inset-top));left:50%;z-index:45;display:flex;align-items:center;gap:5px;height:30px;padding:0 13px;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--edge),0 0 0 1px var(--line),0 8px 24px rgba(0,0,0,.28);opacity:0;transform:translate(-50%,-44px);pointer-events:none;transition:transform 260ms var(--ease-out),opacity 180ms var(--ease-out)}
.ptr i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);transition:background-color 120ms var(--ease-out)}
.ptr.armed i,.ptr.busy i{background:var(--ink)}
.ptr.busy i{animation:ptr-dot 900ms var(--ease-out) infinite}
.ptr.busy i:nth-child(2){animation-delay:120ms}
.ptr.busy i:nth-child(3){animation-delay:240ms}
@keyframes ptr-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@media (pointer:coarse){html{overscroll-behavior-y:contain}.content{transition:transform 260ms var(--ease-out)}}
@media (prefers-reduced-motion:reduce){.ptr.busy i{animation:none}}
/* narrow screens: a settings row keeps its words readable. The label takes the line; a control that doesn't fit
   beside it (a field and Save, a slider, a set of tabs, a wide select) drops under it instead of squeezing it. */
@media (max-width:620px){
  .srow{flex-wrap:wrap;row-gap:10px}
  .srow .l{flex:1 1 190px}
  .srow>input[type=range]{flex:1 1 80px;min-width:0}
}
/* a chat's header on a phone: who it is keeps the first line; when the buttons don't fit beside the name they take the next one */
@media (max-width:720px){
  .cv-h{flex-wrap:wrap;row-gap:8px}
  .cv-h .c2{flex:1 1 140px}
  .cv-h .acts{flex-wrap:wrap}
}
/* touch: fields, tabs and small controls are finger-size; where the control itself should stay small (a switch, an
   info dot, a tag's remove), the area that takes the tap grows around it instead */
@media (pointer:coarse){
  input.input,select.input,.money,.search{height:44px}
  .t-tab{height:36px;padding:0 14px}
  .as-sug button{height:36px;padding:0 14px;border-radius:var(--r-pill);font-size:var(--fs-body)}
  .tag{min-height:36px;padding-left:12px}
  .tag button{width:30px;height:30px;align-self:center}
  .t-toggle::after{content:"";position:absolute;inset:-13px -8px}
  input[type=range]{height:32px}
}
@media (max-width:359px){.status .st-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ---------- Needs you: a table, one action per row ---------- */
.acts2{display:grid;grid-template-columns:108px 144px;gap:8px;justify-content:end}
.acts2 .sa,.acts2 .sb{display:block;min-width:0}
.acts2 .btn{display:flex;width:100%;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .acts2{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:8px}
  .acts2 .sa:empty{display:none}
  .acts2 .btn{width:auto}
}

/* ---------- Calendar card (Home) ---------- */
.cal-nav{margin-left:auto;display:inline-flex;align-items:center;gap:2px}
.cal-nav .icon-btn{width:28px;height:28px}
.cal-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;padding:6px 12px 0;border-bottom:1px solid var(--line)}
.wd{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 10px;border-radius:var(--r-ctl) var(--r-ctl) 0 0;color:var(--ink-3);font-size:var(--fs-meta);transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.wd:hover{background:var(--hover);color:var(--ink)}}
.wd-d{font-size:var(--fs-body);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.wd.on{color:var(--ink)}.wd.on .wd-d{color:var(--ink);font-weight:600}
.wd::after{content:"";position:absolute;left:22%;right:22%;bottom:-1px;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transition:transform var(--duration-base) var(--ease-smooth-out)}
.wd.on::after{transform:scaleX(1)}
.wd.today .wd-n{color:var(--ink);font-weight:500}
.wd-dot{position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:transparent}
.wd-dot.has{background:var(--ok-ink)}
.wd-dot.has.req{background:var(--you-dot)}
.wd.on .wd-dot.has{background:transparent}
.cal-sub{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 16px 8px;font-size:var(--fs-sm);color:var(--ink-3)}
.cal-sub b{font-weight:500;color:var(--ink)}
.cal-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 12px 8px 0;scrollbar-width:thin}
.cal-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:36px 24px;text-align:center;color:var(--ink-3);font-size:var(--fs-sm)}
.cal-empty .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-ctl);background:var(--raise);color:var(--ink-3);margin-bottom:6px}
.cal-empty b{color:var(--ink);font-weight:500;font-size:var(--fs-body)}
.cal-empty .btn{margin-top:10px}

/* the time grid, shared by the card and the calendar page */
/* the hours sit in their own gutter, right-aligned, with a clear 12px before the appointment blocks begin */
.tl{--tl-gutter:64px;position:relative;padding-left:var(--tl-gutter)}
.tl-grid{position:absolute;inset:0}
.tl-h{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--line)}
.tl-h span{position:absolute;left:0;top:-8px;box-sizing:border-box;width:var(--tl-gutter,64px);padding-right:12px;text-align:right;font-size:var(--fs-meta);color:var(--ink-3);background:var(--card);font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-h:first-child{border-top-color:transparent}
.tl-ev{position:absolute;inset:0 0 0 var(--tl-gutter)}
.tl-closed{position:absolute;left:0;right:0;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--hover) 6px 7px)}
/* v3.10: busy in the owner's Google Calendar (times only): quiet, behind appointments, not clickable */
.busy-g{position:absolute;left:0;right:0;display:flex;flex-direction:column;justify-content:flex-start;gap:1px;padding:5px 10px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--select);color:var(--ink-3);font-size:var(--fs-meta);line-height:1.3;overflow:hidden;pointer-events:none;z-index:0}
.busy-g b{font-weight:500;color:var(--ink-2);font-size:var(--fs-meta)}
.busy-g span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.busy-g.one{flex-direction:row;align-items:center;gap:6px;padding:0 10px}
.wk-col .busy-g{left:4px;right:4px;padding:4px 8px}
.nowline{position:absolute;left:-4px;right:0;height:0;border-top:1.5px solid var(--live);z-index:2}
.nowline::before{content:"";position:absolute;left:-1px;top:-4.5px;width:7px;height:7px;border-radius:50%;background:var(--live)}
.ev{position:absolute;left:0;right:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px 10px 4px 12px;border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--raise);text-align:left;overflow:hidden;z-index:1;transition:border-color var(--duration-quick) var(--ease-out),background-color var(--duration-quick) var(--ease-out)}
.ev:not(.past):not(.req){border-color:transparent;background:var(--ok-bg)} /* confirmed and still to come: teal, scheduled (colour.css sets the fill) */
@media (hover:hover){.ev:not(.past):not(.req):hover{border-color:var(--ok-ink)}}
@media (hover:hover){.ev:hover{border-color:var(--line-strong)}}
.ev:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--book-ink)}
.ev.req{border:1px dashed var(--you-dot);background:var(--you-bg)}
.ev.req::before{background:var(--you-dot)}
.ev.urgent{background:var(--you-bg);border-color:transparent}
.ev.urgent::before{background:var(--err-ink)}
/* past: quieter frame and strip, but the words keep full contrast */
.ev.past{background:transparent;border-color:var(--line)}
.ev.past::before{background:var(--line-strong)}
.ev.past .ev-t b{color:var(--ink-2)}
/* short appointments get one line, so a tile never runs past its own end time */
.ev.one{flex-direction:row;align-items:center;justify-content:flex-start;gap:6px;padding-block:0}
.ev.one .ev-t{flex:0 1 auto;min-width:0}
.ev.one .ev-t b{flex:0 1 auto}
.ev.one .ev-s{flex:1 1 0;min-width:0}
.ev-t{display:flex;align-items:center;gap:6px;min-width:0}
.ev-t b{flex:1;min-width:0;font-size:var(--fs-sm);line-height:16px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-st{color:var(--you-ink);font-weight:500}
.ev-t .chip{height:18px;padding:0 6px;font-size:var(--fs-meta)}
.ev-s{line-height:15px;font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Calendar page: week view ---------- */
.cal-page{overflow:hidden}
.cal-bar{display:flex;align-items:center;gap:12px;padding:16px 16px 12px}
.cal-range{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em}
.cal-bar .cal-nav{gap:6px}
.wk{display:block}
.wk-m{display:none}
.wk-head{display:grid;grid-template-columns:64px repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wk-sum{display:flex;align-items:center;padding-left:14px;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.2}
.wk-hd{display:flex;align-items:baseline;justify-content:center;gap:6px;padding:12px 0;font-size:var(--fs-meta);color:var(--ink-3);border-left:1px solid var(--line);transition:background-color var(--duration-quick) var(--ease-out)}
.wk-hd b{font-size:var(--fs-body);font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
@media (hover:hover){.wk-hd:hover{background:var(--hover)}}
.wk-hd.on b{color:var(--ink);font-weight:600}
.wk-hd.today b{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:var(--r-pill);background:var(--ink);color:var(--card)}
.wk-scroll{max-height:640px;overflow-y:auto;scrollbar-width:thin}
.wk-body{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr)}
.wk-gutter{position:relative;inset:auto}
.wk-cols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.wk-col{position:relative;border-left:1px solid var(--line);background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 64px}
.wk-col .ev{left:4px;right:4px;padding:5px 8px 5px 10px}
.wk-col .ev-t .chip{display:none}
.wk-col .ev-st{display:none}
@media (max-width:980px){
  .wk{display:none}
  .wk-m{display:block}
  .wk-m .cal-scroll{max-height:560px}
  .cal-page .cal-strip{padding-top:0}
}

.cal-range small{margin-left:10px;font-size:var(--fs-sm);font-weight:400;letter-spacing:0;color:var(--ink-3)}
.tl-h:first-child span{top:3px}

/* aligned action column (Needs you + leads tables) */
.acts2.one{grid-template-columns:144px}
/* v3.10.3: "Handled" beside the row's main action */
.acts2.has-h{grid-template-columns:108px 144px 96px}
.acts2.one.has-h{grid-template-columns:144px 96px}
.acts2 .sh{display:block;min-width:0}
.tbl td.act{width:1%;padding-right:16px}
.tbl thead th:last-child{padding-right:16px}

/* Chats: motion when the filter or the open chat changes (transitions.dev: quick out, staggered rise in) */
.ib-items,.ib-conv{transition:opacity 120ms var(--ease-out),transform 120ms var(--ease-out),filter 120ms var(--ease-out)}
.ib-items.is-out,.ib-conv.is-out{opacity:0;transform:translateY(calc(var(--distance-micro) * -1));filter:blur(var(--blur-small))}
@keyframes item-in{from{opacity:0;transform:translateY(var(--distance-base));filter:blur(var(--blur-small))}}
.ib-items.stagger .ib-item{animation:item-in var(--duration-medium) var(--ease-smooth-out) both}
.ib-items.stagger .ib-item:nth-child(2){animation-delay:30ms}.ib-items.stagger .ib-item:nth-child(3){animation-delay:60ms}
.ib-items.stagger .ib-item:nth-child(4){animation-delay:90ms}.ib-items.stagger .ib-item:nth-child(5){animation-delay:120ms}
.ib-items.stagger .ib-item:nth-child(6){animation-delay:150ms}.ib-items.stagger .ib-item:nth-child(7){animation-delay:180ms}
.ib-items.stagger .ib-item:nth-child(n+8){animation-delay:210ms}
@keyframes cv-in{from{opacity:0;transform:translateY(var(--distance-base));filter:blur(var(--blur-medium))}}
.ib-conv.cv-in{animation:cv-in var(--duration-medium) var(--ease-smooth-out) both}
@keyframes msg-in{from{opacity:0;transform:translateY(var(--distance-medium));filter:blur(var(--blur-small))}}
.cv-body>.reveal-wrap.reveal{animation:none}
.cv-body>.reveal-wrap.still>*{animation:none} /* switched to Hinglish or back: the same call, so nothing comes in again */
.cv-body>.reveal-wrap>*{animation:msg-in var(--duration-slow) var(--ease-smooth-out) both}
.cv-body>.reveal-wrap>*:nth-child(2){animation-delay:50ms}.cv-body>.reveal-wrap>*:nth-child(3){animation-delay:100ms}
.cv-body>.reveal-wrap>*:nth-child(4){animation-delay:150ms}.cv-body>.reveal-wrap>*:nth-child(5){animation-delay:200ms}
.cv-body>.reveal-wrap>*:nth-child(6){animation-delay:250ms}.cv-body>.reveal-wrap>*:nth-child(n+7){animation-delay:300ms}
@media (prefers-reduced-motion: reduce){.ib-items,.ib-conv{transition:none!important}.ib-items.stagger .ib-item,.ib-conv.cv-in,.cv-body>.reveal-wrap>*{animation:none!important}}
#recent .acts2.one{grid-template-columns:122px}
#recent .acts2.one.has-h{grid-template-columns:122px 96px}
#recent .tbl td.c2td{min-width:0}
#recent .tbl td.asked{min-width:120px}

/* ---------- one-click connect ---------- */
.conn{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--panel)}
.conn-head{display:flex;align-items:center;gap:12px}
.conn-head b{display:block;font-size:var(--fs-body);font-weight:500}
.conn-head small{display:block;font-size:var(--fs-sm);color:var(--ink-3);overflow-wrap:anywhere} /* a long address wraps inside the card (it ran past the edge on a narrow phone) */
.conn-head>div{min-width:0}
.pl-tile{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-ctl);background:var(--raise);border:1px solid var(--line-2);color:var(--ink)}
.pl-logo{flex:none;width:16px;height:16px;color:inherit}
.pl-logo.pl-word{width:26px;height:26px} /* a wordmark is wide and short: sized so its letters match the labels beside it */
.pl-tile .pl-logo{width:20px;height:20px}
.pl-tile .pl-logo.pl-word{width:28px;height:28px}
svg.pl-logo.i{fill:none;stroke:currentColor}
/* Get live, step 2 is ONE box: the platform tabs on top, what to do for that platform under them, the by-hand way
   last. (It was three bordered boxes in a row, and the platform's logo and name were said twice.) */
.step3 .plat-body{gap:8px}
.plat-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.plat-pick-h,.plat-det{margin:0;font-size:var(--fs-sm);color:var(--ink-3)}
.plat{border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--panel)}
.plat>.t-tabs{display:flex;flex-wrap:wrap;width:100%;max-width:none;overflow:visible;border:0;border-bottom:1px solid var(--line);border-radius:calc(var(--r-ctl) - 1px) calc(var(--r-ctl) - 1px) 0 0;background:transparent}
#plat-seg .t-tab{gap:8px;height:var(--h-ctl);padding:0 12px} /* the platforms are the choice here: a size up, so the logos read */
#plat-seg .pl-logo{width:18px;height:18px}
#plat-seg .pl-logo.pl-word{width:30px;height:30px}
.plat-main{display:flex;flex-direction:column;gap:12px;padding:16px}
.plat .conn{padding:0;border:0;border-radius:0;background:none}
.plat .plat-steps{padding:0;border:0;border-radius:0;background:none}
/* The steps: a number, what to do with a line of help under it, and that step's button on the right, in one column. */
.cs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:cs}
.cs>li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:12px;align-items:start;counter-increment:cs}
.cs>li::before{content:counter(cs);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--raise);color:var(--ink-2);font-size:var(--fs-meta);font-weight:600;font-variant-numeric:tabular-nums}
.cs-t{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:1px;font-size:var(--fs-body);line-height:20px;color:var(--ink-2)}
.cs-t b{font-weight:500;color:var(--ink)}
.cs-t>span{font-size:var(--fs-sm)}
.cs.plat-steps{gap:10px}
.cs.plat-steps .cs-t>span{font-size:var(--fs-body)} /* by hand, a step is one line: body size */
.cs-a{display:flex;align-items:center}
/* A list to choose from (which website?): the same rows without the step numbers, since these aren't steps. */
.cs.opts>li{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.cs.opts>li::before{content:none}
@media (max-width:560px){ .cs.opts>li{grid-template-columns:minmax(0,1fr)} .cs.opts .cs-a{grid-column:1} }
/* The box's footer: what UNLOOK is waiting for, with the check button beside it. The dot sits under the step numbers
   and its words under the steps' words. */
.plat .plat-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:4px -16px 0;padding:12px 16px 0;border-top:1px solid var(--line)}
.plat .plat-foot .waiting{padding-inline-start:8px;gap:19px}
.plat .plat-foot .sc{margin-top:0}
/* WordPress in one click: two numbered things to press; the way to get help sits in the footer. */
.plat-alt{font-size:var(--fs-sm);color:var(--ink-2)}
.conn .note-acts{margin-top:-4px} /* the buttons belong to the note above them */
/* numbered steps inside a pop-up (the "one last thing to do") */
.modal .todo{margin:10px 0 0;padding-left:22px;list-style:decimal;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-body);color:var(--ink-2)}
.modal .todo li{padding-left:2px}
.modal .todo li::marker{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.modal .todo b{color:var(--ink);font-weight:500}
.modal .help{margin-top:10px;font-size:var(--fs-sm)}
@media (max-width:360px){ .plat .cs>li>.cs-a{grid-column:1 / -1} } /* the narrowest phones: a step's button takes the whole row, so its words stay on one line */
@media (max-width:560px){
  .cs>li{grid-template-columns:22px minmax(0,1fr)}
  .cs-a{grid-column:2;margin-top:8px}
  .plat .cs-a .btn{width:100%} /* full width; the 44 to press is the button's invisible edge */
  #plat-seg .t-tab{height:44px} /* a full-size tap target for each platform */
}
.plat>.t-acc.yourself{margin-top:0;border-top:1px solid var(--line)}
.plat .self-head{padding:12px 16px;border:0;border-radius:0 0 calc(var(--r-ctl) - 1px) calc(var(--r-ctl) - 1px)}
.plat .t-acc.yourself[data-open="true"] .self-head{border-radius:0}
.plat .t-acc.yourself .t-acc-panel-inner>.body{margin-top:0;padding:4px 16px 16px}
.conn-solo{max-width:720px}
.conn-p{font-size:var(--fs-body);color:var(--ink-2);max-width:62ch}
.conn-p b{color:var(--ink);font-weight:500}
.conn-steps{margin:0;padding:0 0 0 20px;list-style:decimal;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-body);color:var(--ink-2)}
.conn-steps b{color:var(--ink);font-weight:500}
.conn-steps .acts{margin:8px 0 4px}
.conn .acts{margin-top:0}
.conn-ask{display:flex;flex-direction:column;gap:6px} /* no box of its own: it already sits in one */
.conn-ask b{font-size:var(--fs-body);font-weight:500}
.conn-ask p{font-size:var(--fs-body);color:var(--ink-2)}
.conn-ask .acts{margin-top:6px}
.conn-warn{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--r-ctl);background:var(--you-bg);color:var(--you-ink);font-size:var(--fs-sm)}
.conn-warn svg.i{flex:none;margin-top:1px}
.conn-warn.err{background:var(--err-bg);color:var(--err-ink)}
.conn-warn b{font-weight:600}
.csp-warn>div{min-width:0}.csp-warn p{margin:4px 0 0}.csp-warn ol{margin:6px 0 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:3px}.csp-warn .btn{margin-top:8px} /* 2.6: the site's security settings block the chat */
.t-acc.yourself{margin-top:12px}
.self-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);font-size:var(--fs-body);color:var(--ink-2);text-align:left;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.self-head:hover{background:var(--hover);color:var(--ink)}}
.t-acc.yourself .t-acc-panel-inner>.body{margin-top:12px}
.btn.busy{pointer-events:none;opacity:.7}
/* a closed accordion inside an open one stays closed (the base rules match every descendant) */
.t-acc[data-open="true"] .t-acc[data-open="false"] .t-acc-panel{grid-template-rows:0fr;transition:grid-template-rows var(--acc-collapse) var(--acc-ease)}
.t-acc[data-open="true"] .t-acc[data-open="false"] .t-acc-panel-inner{opacity:0;filter:blur(2px);transition:opacity var(--acc-collapse) var(--acc-ease),filter var(--acc-collapse) var(--acc-ease)}
.t-acc[data-open="true"] .t-acc[data-open="false"] .t-acc-chevron{transform:scaleY(1)}

/* =====================================================================
   REAL-APP ADDITIONS (v3.4): the login screens, the first-load splash,
   the site check, and Home before bookings exist (no calendar yet)
   ===================================================================== */
.splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--frame);transition:opacity var(--duration-fast) var(--ease-out),visibility 0s linear var(--duration-fast)}
.splash.gone{opacity:0;visibility:hidden}
.splash svg{width:44px;height:44px;border-radius:12px;animation:splash-pulse 1.2s ease-in-out infinite}
@keyframes splash-pulse{50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){.splash svg{animation:none}}

.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:var(--frame)}
.login-box{width:min(400px,100%)}
.login-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.login-top .logo b{font-size:24px}
.login-card{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:var(--r-card);background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line)}
.login-card[hidden]{display:none}
.login-card h1{font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
.login-card .lede{margin-top:-6px;font-size:var(--fs-body);color:var(--ink-2);text-wrap:pretty}
.login-card .field{display:flex;flex-direction:column;gap:6px}
.login-card label{font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.login-card .input{height:40px;font-size:var(--fs-lg)}
@media (min-width:721px){.login-card .input{font-size:var(--fs-body)}}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:44px}
.pw-wrap .icon-btn{position:absolute;top:4px;right:4px}
.pw-rules{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--fs-sm);color:var(--ink-2)}
.pw-rules li{display:flex;align-items:center;gap:8px}
.pw-rules li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-3);transition:background-color .15s,box-shadow .15s}
.pw-rules li.ok{color:var(--ok-ink)}
.pw-rules li.ok::before{background:var(--ok-ink) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:none}
.form-note,.form-error{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-ctl);font-size:var(--fs-sm);line-height:1.45}
.form-note{background:var(--info-bg);color:var(--info-ink)}
.form-error{background:var(--err-bg);color:var(--err-ink)}
.form-note[hidden],.form-error[hidden]{display:none}
.form-note svg,.form-error svg{flex:none;width:16px;height:16px;margin-top:2px}
.login-card .btn-block{height:40px;font-size:var(--fs-body);font-weight:600}
.login-help{font-size:var(--fs-sm);color:var(--ink-2);text-align:center}
.login-help button,.login-help a{padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.choose{display:flex;flex-direction:column;gap:8px}
.choose[hidden]{display:none}
.choose button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--btn);color:var(--ink);font:inherit;font-weight:500;text-align:left;cursor:pointer}
@media (hover:hover){.choose button:hover{background:var(--btn-hover);border-color:var(--line-strong)}}
.login-foot{margin-top:16px;font-size:var(--fs-meta);color:var(--ink-3);text-align:center}

/* site check (Get live step 2, Settings → Website, Home note) */
.sc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.sc-msg{flex:1 1 240px;margin:0;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2);min-width:0;overflow-wrap:anywhere;text-wrap:pretty}
.sc-msg.ok{color:var(--ok-ink)}
.sc-msg .btn{display:flex;margin-top:8px}

/* Home before bookings: the side cards take the calendar's place */

.app[hidden],.login[hidden]{display:none!important}

/* =====================================================================
   ASSISTANT (v3.5)
   ===================================================================== */
/* =====================================================================
   ASSISTANT (PROPOSED): "Tell UNLOOK what you want"
   ===================================================================== */
.as{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;min-width:0}
@media (max-width:1000px){.as{grid-template-columns:minmax(0,1fr)}}
.as-chat{background:var(--as-chat,var(--as-inset));display:flex;flex-direction:column;height:calc(100vh - 128px);min-height:520px;padding:0;overflow:hidden}
@media (max-width:720px){.as-chat{height:calc(100vh - 190px)}}
.as-thread{flex:1;min-height:0;overflow-y:auto;padding:20px 20px 8px;display:flex;flex-direction:column;gap:18px;scroll-behavior:smooth}
.as-m{display:flex;gap:10px;max-width:100%;min-width:0}
.as-m.me{justify-content:flex-end}
.as-av{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-ctl);background:var(--select);margin-top:1px}
.as-av svg{width:16px;height:16px}
.as-body{min-width:0;display:flex;flex-direction:column;gap:10px;max-width:640px}
.as-bub{padding:9px 13px;border-radius:var(--r-card);background:var(--select);color:var(--ink);font-size:var(--fs-body);line-height:1.5;overflow-wrap:anywhere}
.as-m.me .as-bub{max-width:min(78%,520px);background:var(--strong);color:var(--on-strong)}
.as-txt{font-size:var(--fs-body);line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.as-txt b{font-weight:600}
.as-txt .muted{color:var(--ink-3)}
/* v3.11: where a setting lives, under the answer */
.as-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.as-m.new{animation:as-in var(--duration-medium) var(--ease-smooth-out) both}
@keyframes as-in{from{opacity:0;transform:translateY(var(--distance-medium));filter:blur(var(--blur-small))}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion: reduce){.as-m.new{animation:none}}
.as-think{color:var(--ink-3);font-size:var(--fs-sm)}

/* cards sit ABOVE the conversation: a lighter surface, a stronger edge, a soft shadow.
   Pending = peach (needs you, the dashboard's meaning for it), done = mint, cancelled = neutral. */
:root,:root[data-theme="dark"]{--as-card:#151515;--as-inset:#0E0E0E;--as-edge:#2A2A2A;--as-shadow:0 10px 28px -14px rgba(0,0,0,.7);--as-you-bg:rgba(252,198,107,.13);--as-ok-bg:rgba(126,226,162,.13);--as-err-bg:rgba(255,163,155,.13);--as-info-bg:rgba(156,195,255,.13);--as-chat:#0C0C0C}
:root[data-theme="light"]{--as-card:#FFFFFF;--as-inset:#F1F5F3;--as-edge:#D5DFDB;--as-shadow:0 12px 30px -16px rgba(15,31,28,.3);--as-you-bg:#FEF3C7;--as-ok-bg:#E3FBEA;--as-err-bg:#FEE9E9;--as-info-bg:#ECF2FF;--as-chat:#FAFCFB}
.as-card{--acc:var(--you-dot);--acc-ink:var(--you-ink);--acc-bg:var(--as-you-bg);position:relative;border:1px solid var(--as-edge);border-radius:var(--r-card);background:var(--as-card);box-shadow:var(--as-shadow);overflow:hidden}
.as-card.opt{--acc:var(--info-ink);--acc-ink:var(--info-ink);--acc-bg:var(--as-info-bg)}
.as-card.done{--acc:var(--ok-ink);--acc-ink:var(--ok-ink);--acc-bg:var(--as-ok-bg)}
.as-card.no{--acc:var(--line-strong);--acc-ink:var(--ink-2);--acc-bg:var(--select);box-shadow:none}
.as-top{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 16px}
.as-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-ctl);background:var(--acc-bg);color:var(--acc-ink)}
.as-ico svg{width:18px;height:18px}
.as-tt{flex:1;min-width:0}
.as-tt h3{margin:0;font-size:var(--fs-lg);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
.as-tt p{margin:3px 0 0;font-size:var(--fs-body);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.as-tag{flex:none;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-chip);background:var(--acc-bg);color:var(--acc-ink);font-size:var(--fs-meta);font-weight:600;white-space:nowrap}
.as-tag svg{width:12px;height:12px;stroke-width:2.5}
.as-tag.plain{background:var(--select);color:var(--ink-2);font-weight:500}
@media (max-width:520px){.as-top{flex-wrap:wrap}.as-tag{order:-1}}
.as-sec{padding:0 18px 18px}
.as-sec h4{margin:0 0 8px;font-size:var(--fs-meta);font-weight:600;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.as-sec h4 span{font-weight:400}
.as-rows{display:flex;flex-direction:column;border-radius:var(--r-ctl);background:var(--as-inset);overflow:hidden}
.as-row{display:flex;align-items:center;gap:12px;padding:12px 14px;min-width:0;font-size:var(--fs-body);line-height:1.4;color:var(--ink)}
.as-row+.as-row{border-top:1px solid var(--as-edge)}
.as-row .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.as-row .t{flex:none;color:var(--ink-2);font-size:var(--fs-body);white-space:nowrap;font-variant-numeric:tabular-nums}
.as-row b{font-weight:600}
.as-row small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--ink-2)}
.as-row label{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0;cursor:pointer}
.as-row input[type=checkbox]{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--lime)}
.as-gone{color:var(--ink-2);text-decoration:line-through;text-decoration-thickness:1px}
.as-cut{color:var(--ink);font-weight:500}
.as-new{color:var(--ink);font-weight:600}
.as-arrow{color:var(--ink-2);padding:0 4px}
.as-quote{padding:11px 13px;border-radius:var(--r-ctl);background:var(--as-inset);font-size:var(--fs-body);line-height:1.55;color:var(--ink);overflow-wrap:anywhere;text-wrap:pretty}
.as-warn{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:var(--fs-body);line-height:1.45;color:var(--you-ink)}
.as-warn svg{flex:none;width:16px;height:16px;margin-top:2px}
.as-scope{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.as-scope{grid-template-columns:1fr}}
.as-scope>div{padding:11px 12px;border-radius:var(--r-ctl);background:var(--as-inset);font-size:var(--fs-body);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.as-scope b{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:var(--fs-body);font-weight:600;color:var(--ink)}
.as-scope b svg{width:15px;height:15px;flex:none}
.as-scope .y b svg{color:var(--ok-ink)}
.as-scope .n b svg{color:var(--info-ink)}
.as-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:2px 18px 18px}
.as-acts .btn{height:36px;padding:0 14px;font-size:var(--fs-body)}
@media (max-width:720px){.as-acts .btn{height:var(--h-ctl);padding:0 10px}} /* a phone: Solid Glass's 32, the edge gives the 44 */
.as-acts .btn-primary{font-weight:600}
.as-foot{padding:0 16px 14px 20px;font-size:var(--fs-sm);color:var(--ink-2)}
.as-prev{margin:0 18px 18px;padding:7px 10px;border:1px dashed var(--as-edge);border-radius:var(--r-ctl);font-size:var(--fs-sm);color:var(--ink-2)}
.as-result{display:flex;align-items:center;gap:8px;padding:0 18px 18px;font-size:var(--fs-body);font-weight:500;color:var(--acc-ink)}
.as-result svg{width:16px;height:16px;flex:none}
.as-card.no .as-result{font-weight:400}

.as-sug{display:flex;gap:8px;padding:10px 20px 0;overflow-x:auto;scrollbar-width:none}
.as-sug::-webkit-scrollbar{display:none}
.as-sug button{flex:none;height:30px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.as-sug button:hover{background:var(--hover);color:var(--ink)}}
.as-comp{display:flex;align-items:flex-end;gap:8px;margin:12px 16px 16px;padding:6px 6px 6px 14px;border:1px solid var(--field-line);border-radius:var(--r-card);background:var(--field);transition:border-color var(--duration-quick) var(--ease-out)}
.as-comp:focus-within{border-color:var(--line-strong)}
/* fields whose own outline is off: the ring goes on the box around them (only for the text field, not its buttons) */
.ask:has(input:focus-visible),.as-comp:has(textarea:focus-visible),.search:has(input:focus-visible),.money:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.as-comp textarea{flex:1;min-width:0;max-height:120px;min-height:34px;padding:7px 0;border:0;resize:none;background:transparent;color:var(--ink);font-size:var(--fs-body);line-height:1.4;outline:none}
.as-comp textarea::placeholder{color:var(--ink-3)}
.as-comp .btn{flex:none}

.as-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.as-side .card-h{padding-bottom:0}
.as-list{display:flex;flex-direction:column;padding:8px 16px 16px}
.as-li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;font-size:var(--fs-sm);line-height:1.45;min-width:0}
.as-li+.as-li{border-top:1px solid var(--line)}
.as-li .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.as-li small{display:block;color:var(--ink-3);font-size:var(--fs-meta)}
.as-li.undone .grow{color:var(--ink-3);text-decoration:line-through}
.as-empty{padding:8px 16px 16px;font-size:var(--fs-sm);color:var(--ink-3)}
.as-legend{padding:0 16px 16px;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.5}

.as-note{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:var(--r-ctl);background:var(--as-info-bg);color:var(--info-ink);font-size:var(--fs-body);line-height:1.45}
.as-note svg{flex:none;width:16px;height:16px;margin-top:2px}

/* ---------- change card (v3.5.1): a diff you approve ---------- */
.ac{--ac-pad:20px;max-width:620px;border:1px solid var(--as-edge);border-radius:var(--r-card);background:var(--as-card);box-shadow:var(--as-shadow);overflow:hidden}
.ac-h{padding:18px var(--ac-pad) 4px}
.ac-status{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:var(--fs-sm);line-height:1;font-weight:500;color:var(--you-ink)}
.ac-status .ac-dot{width:7px;height:7px;border-radius:50%;background:var(--you-dot);box-shadow:0 0 0 3px var(--as-you-bg)}
.ac-status.is-opt{color:var(--info-ink)}
.ac-status.is-opt .ac-dot{background:var(--info-ink);box-shadow:0 0 0 3px var(--as-info-bg)}
.ac-title{margin:0;font-size:var(--fs-lg);line-height:1.35;font-weight:600;letter-spacing:-.005em;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
.ac-desc{margin:4px 0 0;font-size:var(--fs-body);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.ac-b{display:flex;flex-direction:column;gap:18px;padding:18px var(--ac-pad) 20px}
.ac-sec{display:flex;flex-direction:column;gap:8px;min-width:0}
.ac-lbl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;font-size:var(--fs-meta);line-height:1.2;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.ac-hint{font-size:var(--fs-sm);font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-2)}
/* what will change: a small diff table */
.ac-diff{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid var(--as-edge);border-radius:var(--r-ctl);overflow:hidden}
.ac-row{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr);gap:4px 16px;align-items:start;padding:8px 12px;transition:opacity var(--duration-quick) var(--ease-out)}
.ac-row.has-check{grid-template-columns:18px minmax(96px,150px) minmax(0,1fr);column-gap:12px}
.ac-row+.ac-row{border-top:1px solid var(--as-edge)}
.ac-row.is-kept .ac-val{opacity:.45}
/* the list is one grid, so every row shares the label column (as wide as its longest label, at most 45%) */
.ac-diff:not(:has(.has-check)){display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);column-gap:16px;border:0;border-radius:0}
.ac-diff:not(:has(.has-check)) .ac-row{grid-column:1 / -1;grid-template-columns:minmax(72px,120px) minmax(0,1fr);grid-template-columns:subgrid;padding:2px 0}
.ac-diff:not(:has(.has-check)) .ac-row+.ac-row{border-top:0}
.ac-check{width:16px;height:16px;margin:2px 0 0;accent-color:var(--lime)}
.ac-field{font-size:var(--fs-body);line-height:1.45;font-weight:500;color:var(--ink);cursor:default}
label.ac-field{cursor:pointer}
.ac-val{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:var(--fs-body);line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.ac-val:has(.ac-arrow){flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.ac-item{display:flex;gap:8px;align-items:flex-start}
.ac-item.plain{color:var(--ink-2)}
.ac-sign{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:var(--r-chip);font-size:var(--fs-sm);line-height:1;font-weight:600}
.ac-sign.add{background:var(--as-ok-bg);color:var(--ok-ink)}
.ac-sign.remove{background:var(--as-err-bg);color:var(--err-ink)}
.ac-old{color:var(--ink-2);text-decoration:line-through;text-decoration-thickness:1px}
.ac-arrow{color:var(--ink-2)}
.ac-new{font-weight:600;color:var(--ink)}
.ac-quote{margin:0;padding:2px 0 2px 14px;border-left:2px solid var(--lime);font-size:var(--fs-body);line-height:1.5;color:var(--ink);text-wrap:pretty}
/* who this affects: two plain lines, no boxes */
.ac-note{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.ac-note svg{flex:none;width:15px;height:15px;margin-top:1px}
/* v3.8: appointment cards */
.ac-warn{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:var(--r-ctl);background:var(--you-bg);color:var(--you-ink);font-size:var(--fs-body);line-height:1.45}
.ac-warn svg{flex:none;width:15px;height:15px;margin-top:2px}
.ac-mail{border:1px solid var(--as-edge);border-radius:var(--r-ctl);overflow:hidden}
.ac-mail-h{display:flex;flex-direction:column;gap:2px;margin:0;padding:10px 14px;border-bottom:1px solid var(--as-edge);background:var(--as-inset);font-size:var(--fs-sm);line-height:1.45}
.ac-mail-h>div{display:flex;gap:10px;min-width:0}
.ac-mail-h dt{flex:none;width:56px;color:var(--ink-2)}
.ac-mail-h dd{margin:0;min-width:0;color:var(--ink);overflow-wrap:anywhere}
.ac-mail-b{padding:12px 14px;font-size:var(--fs-body);line-height:1.55;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.ac-mail-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.ac-mail-f .ac-meta{flex:1 1 220px}
.ac-choices{display:flex;flex-wrap:wrap;gap:8px}
.ac-choices .btn{height:36px;font-size:var(--fs-body)}
@media (max-width:720px){.ac-choices .btn{height:var(--h-ctl)}}
/* the decision */
.ac-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px var(--ac-pad);border-top:1px solid var(--as-edge);background:var(--as-inset)}
.ac-meta{margin:0;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.ac-acts{display:flex;gap:8px;margin-left:auto}
.ac-acts .btn{height:36px;padding:0 14px;font-size:var(--fs-body)}
.ac-acts .btn-primary{font-weight:600}
/* after the decision: one quiet line */
.ac-closed{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;box-shadow:none}
.ac-mark{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--select);color:var(--ink-2)}
.ac-mark svg{width:13px;height:13px;stroke-width:2.5}
.ac-closed.is-done .ac-mark{background:var(--as-ok-bg);color:var(--ok-ink)}
.ac-line{margin:0;font-size:var(--fs-body);line-height:1.45;font-weight:500;color:var(--ink)}
.ac-closed.is-off .ac-line{font-weight:400;color:var(--ink-2)}
@media (max-width:560px){
  .ac{--ac-pad:16px}
  .ac-row,.ac-row.has-check{grid-template-columns:minmax(0,1fr)}
  .ac-row.has-check{grid-template-columns:18px minmax(0,1fr)}
  .ac-row.has-check .ac-val{grid-column:2}
  .ac-choices .btn{flex:1 1 calc(50% - 4px)}
}

/* ---------- assistant on phones and tablets (v3.5.2): full width, one scroll, rules behind a button ---------- */
.as-more{display:none;align-items:center;gap:10px;width:100%;padding:12px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-body);font-weight:500;text-align:left;cursor:pointer}
.as-more svg{width:16px;height:16px;flex:none;color:var(--ink-2)}
.as-more-t{flex:none}
.as-more-n{flex:1;min-width:0;text-align:right;font-size:var(--fs-sm);font-weight:400;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-drawer .dr-b{gap:16px}
.as-drawer .card{box-shadow:inset 0 0 0 1px var(--as-edge)}
@media (max-width:1000px){
  .as-side{display:none}
  .as-more{display:flex}
}
@media (max-width:720px){
  /* the chat IS the screen: no box around it, one scroll, composer just above the bottom menu */
  .as{display:block}
  .as-chat{height:calc(100dvh - 124px - env(safe-area-inset-bottom));min-height:420px;margin:0 -16px;border-radius:0;background:transparent;box-shadow:none}
  .as-more{padding:10px 16px}
  .as-thread{padding:14px 16px 8px;gap:16px}
  .as-m.ai .as-av{display:none}
  .as-body{max-width:none;width:100%}
  .as-m.me .as-bub{max-width:85%}
  .ac{max-width:none}
  .as-sug{padding:8px 16px 0}
  .as-comp{margin:10px 16px 12px}
}

/* hidden screen-reader words stay inside their card (they stretched the page on phones) */
.ac,.as-thread{position:relative}
@media (max-width:720px){.content:has(> .screen.on[data-screen="assistant"]){padding-bottom:0}}

/* ---------- voice (v3.6): the microphone in the message boxes ---------- */
.mic{position:relative;flex:none;display:inline-grid;place-items:center;width:var(--h-ctl);height:var(--h-ctl);border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink-2);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.mic:hover{background:var(--hover);color:var(--ink)}}
.mic svg{width:18px;height:18px}
.mic[hidden]{display:none}
.mic.on{background:var(--err-bg);color:var(--err-ink)}
.mic .mic-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--err-ink);opacity:0}
.mic.on .mic-dot{opacity:1;animation:mic-pulse 1.1s ease-in-out infinite}
@keyframes mic-pulse{50%{transform:scale(1.6);opacity:.35}}
@media (prefers-reduced-motion: reduce){.mic.on .mic-dot{animation:none}}
@media (pointer:coarse){.mic{width:44px;height:44px}}
.mic-note{margin:-6px 16px 10px;font-size:var(--fs-meta);color:var(--ink-2)}

/* ---------- calendar actions and booking settings (v3.7) ---------- */
.move-box{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.slot-times{min-height:40px;flex-shrink:0} /* never squeezed under what follows when the drawer is full */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.slot-note{font-size:13px;margin:0 0 8px;text-wrap:pretty}
.slot-note .link{font:inherit;white-space:nowrap}
.other-time{margin-top:-10px;font-size:13px;flex-shrink:0}
.other-time .field{margin:10px 0 0}
.slot{height:36px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--btn);color:var(--ink);font:inherit;font-size:var(--fs-sm);cursor:pointer}
@media (hover:hover){.slot:hover{border-color:var(--line-strong)}}
.slot[aria-pressed="true"]{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime);font-weight:600}
.svc-rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden}
.svc-row{display:flex;align-items:center;gap:12px;padding:8px 12px}
.svc-row+.svc-row{border-top:1px solid var(--line)}
.svc-n{flex:1;min-width:0;font-size:var(--fs-body);overflow-wrap:anywhere}
.cal-bar .cal-nav{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* phones: 16px in text fields, or iPhone Safari zooms the page on every tap */
@media (max-width:720px){.input,.as-comp textarea,.search input,.money input,.money select,.day .times .input{font-size:var(--fs-lg)}}

/* ---------- assistant, v3.8.1 (Abdul's direction, 2026-09-30): calmer cards, the email folded, equal buttons ---------- */
.as-m.ai .as-av{width:36px;height:36px;border-radius:50%;overflow:hidden;background:none;margin-top:0}
.as-m.ai .as-av svg{width:100%;height:100%}
.as-mine{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:min(78%,520px);min-width:0}
.as-m.me .as-bub{max-width:100%;padding:10px 16px;border-radius:var(--r-card)}
.as-time{font-size:var(--fs-meta);line-height:1.2;color:var(--ink-3);font-variant-numeric:tabular-nums}
.as-body{gap:6px}
.as-body>.ac{margin-top:6px}
/* v3.11: every card is the small card (about 150–200px instead of 375): one width whatever its text, a 36px tile,
   the body lined up under the question, and a footer of one row (note on the left, buttons on the right). */
.ac{--ac-pad:16px;width:520px;max-width:100%}
.ac-h{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:14px var(--ac-pad) 12px}
.ac-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-ctl);border:1px solid var(--as-edge);background:var(--as-inset);color:var(--ink)}
.ac-ic svg{width:18px;height:18px}
.ac-hd{min-width:0}
.ac-title{font-size:var(--fs-lg);line-height:1.35}
.ac-fact{margin:2px 0 0;font-size:var(--fs-body);line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere}
.ac-title+.ac-fact{margin-top:4px}
.ac-fact .ac-old{color:var(--ink-3)}
.ac-fact .ac-new{font-weight:600;color:var(--ink)}
.ac-b{padding:0 var(--ac-pad) 14px;padding-inline-start:calc(var(--ac-pad) + 48px);gap:10px}
.ac-disc{border:1px solid var(--as-edge);border-radius:var(--r-ctl);background:var(--as-inset)}
.ac-disc>summary{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 14px;border-radius:var(--r-ctl);cursor:pointer;list-style:none;font-size:var(--fs-body);color:var(--ink)}
.ac-disc>summary::-webkit-details-marker{display:none}
@media (hover:hover){.ac-disc>summary:hover{background:var(--hover)}}
.ac-disc-ic{display:grid;place-items:center;color:var(--ink-2)}
.ac-disc-ic svg{width:17px;height:17px}
.ac-disc-t{flex:1;min-width:0}
.ac-chev{display:grid;place-items:center;color:var(--ink-2)}
.ac-chev svg{width:16px;height:16px;transition:transform var(--duration-quick) var(--ease-out)}
.ac-disc[open] .ac-chev svg{transform:rotate(180deg)}
@media (prefers-reduced-motion: reduce){.ac-chev svg{transition:none}}
.ac-disc-b{display:flex;flex-direction:column;gap:10px;padding:2px 14px 14px}
.ac-disc .ac-mail{background:var(--as-card)}
.ac-f{gap:8px 16px;padding:10px var(--ac-pad)}
.ac-f>.ac-meta{flex:1 1 120px}
.ac-acts{flex-wrap:wrap;justify-content:flex-end;margin:0;margin-inline-start:auto}
/* three buttons take the line under the note, in three equal columns (side by side they would not fit) */
.ac-acts.n3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:1 1 100%}
.ac-acts.n3 .btn{padding:6px 10px}
.ac-acts .btn{height:auto;min-height:36px;padding:6px 14px;white-space:normal;border-radius:var(--r-ctl);font-size:var(--fs-body);font-weight:500;justify-content:center;text-align:center;line-height:1.25}
.ac-acts .btn-ghost{border:1px solid var(--line-2);background:transparent}
.ac-acts .btn:not(.btn-primary):not(.btn-ghost){background:var(--raise);border-color:var(--raise)}
.ac-acts .btn-primary{font-weight:600}
.as-send{width:40px;height:40px;padding:0;border-radius:var(--r-ctl)}
@media (pointer:coarse){.as-send{width:44px;height:44px}}
.as-send svg{width:18px;height:18px}
.as-foot{margin:-4px 16px 12px;padding:0;font-size:var(--fs-meta);line-height:1.45;color:var(--ink-3)}
.as-rp .card-h,.as-rc .card-h{align-items:center}
.as-rp .card-h .btn,.as-rc .card-h .more{margin-left:auto}
.rp-list,.rc-list{display:flex;flex-direction:column;margin:0;padding:4px 16px 12px;list-style:none}
.rp-row,.rc-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;min-width:0}
.rp-row .grow,.rc-row .grow{flex:1;min-width:0}
.rp-row b,.rc-row b{display:block;font-size:var(--fs-body);line-height:1.4;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.rp-row small,.rc-row small{display:block;margin-top:2px;font-size:var(--fs-sm);line-height:1.4;color:var(--ink-3);overflow-wrap:anywhere}
/* hours: one run of days per line, under the heading at the row's full width (the Change button can't squeeze it).
   Days keep one column and times the next; when a row is too narrow, the time moves under its days whole. */
.rp-row.has-body{flex-wrap:wrap;row-gap:4px}
.rp-body{flex:0 0 100%;min-width:0;padding-inline-start:32px}
.rp-hours{display:flex;flex-direction:column;gap:2px;margin:0;font-size:var(--fs-sm);line-height:1.5}
.rp-hours>div{display:flex;flex-wrap:wrap;column-gap:16px}
.rp-hours dt{flex:0 0 9ch;color:var(--ink-3)}
.rp-hours dd{margin:0;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rp-ic{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;color:var(--ink-2)}
.rp-ic svg{width:18px;height:18px}
.rc-ic{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--ink-2)}
.rc-ic svg{width:17px;height:17px}
.rc-ic.bad,.rc-ic.ok{border:1.5px solid currentColor}
.rc-ic.bad svg,.rc-ic.ok svg{width:12px;height:12px;stroke-width:2.5}
.rc-ic.bad{color:var(--err-ink)}
.rc-ic.ok{color:var(--ok-ink)}
.rc-row.undone b{color:var(--ink-3);text-decoration:line-through}
.rc-row .btn,.rc-row .chip,.rp-row .btn{flex:none}
@media (pointer:coarse){.ac-disc>summary{min-height:44px}}
@media (max-width:560px){
  /* on a phone the buttons sit under the note, as wide as the card and 44px tall. Two: side by side, Cancel on the
     left. Three: the main one on top, the other two side by side under it. */
  .ac-b{padding-inline-start:var(--ac-pad)}
  .ac-f{flex-direction:column;align-items:stretch;gap:10px}
  .ac-f>.ac-meta{flex:none}
  .ac-acts,.ac-acts.n3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .ac-acts .btn{min-height:var(--h-ctl);padding-block:4px} /* 32 to see (Solid Glass), 44 to press by the edge; a long label still wraps */
  .ac-acts .btn::after{inset:calc(50% - 20px) 0} /* stacked 8 apart: 40 to press, the two edges touch */
  .ac-acts.n1{grid-template-columns:minmax(0,1fr)}
  .ac-acts.n3 .btn-primary{grid-column:1 / -1;order:-1}
  /* on a phone the card's own text steps down one size (13px, notes 12px); the question, the buttons and the chat keep theirs */
  .ac-desc,.ac-fact,.ac-field,.ac-val,.ac-quote,.ac-warn,.ac-disc>summary,.ac-mail-b{font-size:var(--fs-sm)}
  .ac-note,.ac-f>.ac-meta,.ac-hint{font-size:var(--fs-meta)}
  /* and so does the chat itself (13px). The message box stays 16px, so an iPhone doesn't zoom the page when it is tapped. */
  .as-txt,.as-m .as-bub,.as-think{font-size:var(--fs-sm)}
  .as-m.ai .as-av{display:none}
}

/* =====================================================================
   v5 · SHELL: places in the sidebar, the ask bar in the header
   ===================================================================== */
.nav-gap{height:1px;margin:8px 10px;background:var(--line)}
/* the ask bar: on every page, so a change is one sentence away wherever you are ("/" puts the cursor in it) */
.ask{display:flex;align-items:center;gap:8px;flex:0 1 368px;min-width:200px;height:var(--h-ctl);margin-left:auto;padding:0 4px 0 10px;border:1px solid var(--field-line);border-radius:var(--r-ctl);background:var(--field);color:var(--ink-3);transition:border-color var(--duration-quick) var(--ease-out)}
.ask:focus-within{border-color:var(--ink-3)}
.ask>svg.i{flex:none;color:var(--ink-2)}
.ask input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--ink);font-size:var(--fs-body)}
.ask-k{flex:none;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border:1px solid var(--line-2);border-radius:var(--r-chip);font:inherit;font-size:var(--fs-badge);line-height:1;color:var(--ink-3)}
.ask:focus-within .ask-k,.ask input:not(:placeholder-shown)~.ask-k{display:none}
.ask-log,.ask .mic{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:var(--r-chip);color:var(--ink-3);transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.ask-log:hover{background:var(--hover);color:var(--ink)}}
.ask-log svg.i,.ask .mic svg{width:15px;height:15px}
.ask .mic[hidden]{display:none}
.ask .mic .mic-dot{top:2px;right:2px}
.ask+.tools{margin-left:0}
.ask-m{display:none}
body[data-view="assistant"] .ask{display:none}
body[data-view="assistant"] .ask+.tools{margin-left:auto}
@media (pointer:coarse){.ask{height:40px}.ask-log,.ask .mic{width:36px;height:36px}}
@media (max-width:720px){
  .ask{display:none}
  .ask+.tools{margin-left:auto}
  .ask-m{display:inline-grid}
  body[data-view="assistant"] .ask-m,#theme-btn{display:none}
}

/* =====================================================================
   v6 · HOME: structured, not boxed
   Three surfaces, each because it is one object: the summary band (four figures, one surface, hairlines between),
   the queue of what needs the owner, and the day as a time grid. Everything else sits on the panel under a ruled
   heading. Containers share one edge; text inside a surface and text under a rule share another, 16px in.
   Colour means one thing each: peach = waiting for the owner · green = confirmed or active · red = a real problem
   or urgent · no colour = everything else.
   ===================================================================== */
.home{container-type:inline-size;display:flex;flex-direction:column;gap:16px;min-width:0}
.home .notes{margin:0}
.home .note svg.i{flex:none}
/* the summary band: the 1px gaps let the line colour through, so the dividers hold in any arrangement */
.band{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--line);overflow:hidden}
.band::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--edge);pointer-events:none}
.band[hidden]{display:none}
.fig{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 16px 16px;background:var(--card);color:inherit;text-decoration:none;transition:background-color var(--duration-quick) var(--ease-out)}
@media (hover:hover){a.fig:hover{background:var(--raise)}}
a.fig:focus-visible{outline-offset:-2px}
.fig-l{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap}
.fig-l svg.i{width:12px;height:12px;margin-inline-start:auto;transition:transform var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
@media (hover:hover){a.fig:hover .fig-l svg.i{color:var(--ink);transform:translateX(2px)}}
.fig-n{display:inline-flex;align-items:baseline;gap:6px;margin-top:6px;font-size:var(--fs-figure);font-weight:600;letter-spacing:-.02em;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--ink)}
.fig-n small{font-size:var(--fs-sm);font-weight:400;letter-spacing:0;color:var(--ink-3);white-space:nowrap}
.fig-s{font-size:var(--fs-sm);color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fig-s .err{color:var(--err-ink);font-weight:500}
.fig.you .fig-n{color:var(--you-ink)}
.fig .meter{width:100%;max-width:168px;margin:10px 0 4px}
.fig.t-skel-skeleton{gap:8px}
/* v3.22, an account made from a Wix install: "Your plan". One surface: how the plan stands (a label, one sentence,
   the button that fits), then three facts on the same band as Home's figures. On Get live, above the steps. */
.planb{margin-bottom:16px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--edge);overflow:hidden}
.live-done + .planb,.planb-email + .planb{margin-top:16px}
.planb-top{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:16px 18px 18px}
.planb-t{flex:1 1 320px;min-width:0}
.planb-k{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.planb-k h2{font-size:var(--fs-sm);font-weight:500;color:var(--ink-3)}
.planb-say{font-size:var(--fs-title);font-weight:500;line-height:1.3;color:var(--ink);text-wrap:balance}
.planb-sub{margin-top:4px;max-width:66ch;font-size:var(--fs-body);color:var(--ink-2);text-wrap:pretty}
.planb-a{display:flex;flex:none}
.planb-facts{grid-template-columns:repeat(3,minmax(0,1fr));border:0;border-top:1px solid var(--line);border-radius:0}
.planb-facts::after{display:none}
.planb-facts .fig-s{white-space:normal}
.planb-go{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.planb-foot{margin-top:16px;max-width:70ch}
/* Wix passed no email on: asked for once, above the plan */
.planb-email{display:block}
.planb-email-t{display:flex;align-items:flex-start;gap:12px}
.planb-email-t p{flex:1 1 0;min-width:0}
.planb-email-f{display:flex;align-items:flex-start;gap:8px;margin-top:10px}
.planb-email-f .field{flex:1 1 220px;max-width:340px;margin:0}
.planb-email .btn{margin-left:0}
@media (max-width:640px){
  .planb-facts{grid-template-columns:1fr}
  .planb-facts .fig{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 12px;padding:12px 16px}
  .planb-facts .fig-n{margin-top:0;grid-column:2;grid-row:1;font-size:var(--fs-lg)}
  .planb-facts .fig-s,.planb-facts .meter{grid-column:1 / -1}
  .planb-a,.planb-a .btn,.planb-go .btn{width:100%}
  .planb-a .btn,.planb-go .btn,.planb-email-f .btn{justify-content:center}
  .planb-email-f{flex-wrap:wrap}
  .planb-email-f .field{flex-basis:100%;max-width:none}
  .planb-email-f .btn{width:100%}
}
/* two columns: what to do and what happened; the day beside it */
.h-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,34%);gap:16px;align-items:start}
.h-main,.h-side{display:flex;flex-direction:column;gap:24px;min-width:0}
.h-side .side-slot{display:flex;flex-direction:column;gap:24px}
.h-side .side-slot:empty{display:none}
/* an open section: a heading on a rule; what's under it starts on the same edge as text inside a surface */
.h-sec{min-width:0}
.h-sec[hidden]{display:none}
.h-sec-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:40px;padding:0 16px 8px;border-bottom:1px solid var(--line)}
.h-sec-h h2{font-size:var(--fs-body);font-weight:500;color:var(--ink);white-space:nowrap}
.h-sec-n{font-size:var(--fs-sm);color:var(--ink-3)}
.h-sec-h .legend,.h-sec-h .chip{margin-inline-start:auto}
.h-sec-h .legend[hidden]{display:none}
.h-sec-b{padding:12px 16px 0}
.h-none{max-width:46ch;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-3)}
.h-none+.btn{margin-top:12px}
.h-sec .chart{padding:12px 16px 0}
.h-sec .tbl-wrap{padding:8px 4px 0}
.h-sec .kv{font-size:var(--fs-sm)}
.h-sec .big-num+.h-none{margin-top:2px}
/* needs you: one list for everything waiting on the owner */
.needs-card{container-type:inline-size}
.needs-card .card-h{min-height:0;padding:14px 16px 10px}
.nlist{list-style:none;margin:0;padding:0}
.nl{border-top:1px solid var(--line)}
.nl-row{display:flex;align-items:center;gap:12px;padding:12px 16px;transition:background-color var(--duration-quick) var(--ease-out)}
.nl-row[data-go],.nl-row[data-appt]{cursor:pointer}
@media (hover:hover){.nl-row[data-go]:hover,.nl-row[data-appt]:hover{background:var(--hover)}}
.nl:last-child>.nl-row:last-child{border-radius:0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px)}
.nl-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.nl-ic{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:var(--r-ctl);background:var(--raise);color:var(--ink-2)}
.nl-ic svg.i{width:15px;height:15px}
.nl-ic.you{background:var(--you-bg);color:var(--you-ink)}
.nl-ic.err{background:var(--err-bg);color:var(--err-ink)}
.nl-t{flex:1;min-width:0}
.nl-t b{display:block;font-size:var(--fs-body);font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nl-t b.q::before{content:"\201C"}.nl-t b.q::after{content:"\201D"}
.nl-t small{display:flex;align-items:center;gap:8px;min-width:0;margin-top:4px;font-size:var(--fs-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}
.nl-t small .chip{flex:none;height:20px;font-size:var(--fs-meta)}
.nl-s{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nl-a{display:flex;align-items:center;gap:8px;flex:none}
.nl .teach-in{padding:0 16px 14px;padding-inline-start:56px}
.nl-steps{margin:0;padding:2px 16px 16px;padding-inline-start:56px}
.nl-more{padding:10px 16px}
.nl-more .more{margin-inline-start:0}
.nl-skel{padding:4px 16px 12px}
@container (max-width:600px){
  .nl-row{flex-wrap:wrap;row-gap:10px}
  .nl-t{flex:1 1 calc(100% - 40px)}
  .nl-t b{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .nl-a{flex:1 1 100%;flex-wrap:wrap;padding-inline-start:40px}
  .nl .teach-in,.nl-steps{padding-inline-start:16px}
}
@container (max-width:340px){.nl-t small{flex-wrap:wrap}.nl-s{white-space:normal}} /* the smallest phones: who and when wrap instead of being cut */
/* the day as a time grid (Home): fixed height, the hours scroll inside it */
.h-side .cal{position:relative;height:468px;overflow:hidden}
.cal-in{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
.cal-top{display:flex;align-items:center;gap:8px;padding:14px 12px 4px 16px}
.cal-top h2{font-size:var(--fs-body);font-weight:500}
.cal-mo{font-size:var(--fs-sm);color:var(--ink-3)}
.cal-foot{margin:0;justify-content:center;padding:12px 16px 14px;border-top:1px solid var(--line)}
.cal-sub .you{color:var(--you-ink);font-weight:500}
/* rows that open something (a person's history uses them) */
.up-r{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:6px 8px;border:0;border-radius:var(--r-ctl);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.up-r:hover{background:var(--hover)}}
.up-r:active{background:var(--press)}
.up-t{flex:1;min-width:0}
.up-t b{display:block;font-size:var(--fs-body);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-t small{display:block;font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-skel{display:flex;flex-direction:column;gap:14px;padding:6px 0}
/* one column: figures, what needs you, the day, then what happened */
@container (max-width:860px){
  .h-cols{display:flex;flex-direction:column;align-items:stretch;gap:24px}
  .h-main,.h-side,.h-side .side-slot{display:contents}
  .needs-card{order:1}
  .h-side>.cal{order:2}
  #chart-sec{order:3}
  #recent-sec{order:4}
  .side-slot>.h-sec{order:5}
}
/* four figures in a row stop fitting their labels at about 700px: two by two from there */
@container (max-width:700px){.band{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:340px){.fig-l,.fig-s{white-space:normal}} /* the smallest phones: a long line wraps instead of being cut */
/* a small text link in a heading still takes a finger */
.h-sec-h .more,.needs-card .card-h .more{position:relative}
.needs-card .card-h .more::after{content:"";position:absolute;inset:-12px -8px}
.h-sec-h .more::after{content:"";position:absolute;inset:-12px -8px}

/* =====================================================================
   v5 · PEOPLE: one sheet per person; a chat shows their appointment
   ===================================================================== */
.ps-hist{list-style:none;margin:0 -8px;padding:0}
a.up-r{text-decoration:none}
.up-r>svg.i{flex:none;width:14px;height:14px;color:var(--ink-3)}
.up-t b.q::before{content:"\201C"}.up-t b.q::after{content:"\201D"}
.ps-hist .up-r{min-height:52px}
.dr-f .dr-del{color:var(--ink-3)}
@media (hover:hover){.dr-f .dr-del:hover{color:var(--err-ink)}}
.cv-appt{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 8px;border:1px solid var(--line-2);border-radius:var(--r-chip);background:transparent;color:var(--ink-2);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer;transition:border-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.cv-appt:hover{border-color:var(--ink-3);color:var(--ink)}}
.cv-appt svg.i{flex:none;width:13px;height:13px}
.cv-lead[hidden]{display:none}
.cv-del{color:var(--ink-3)}
@media (hover:hover){.cv-del:hover{color:var(--err-ink)}}
.ib-older{display:flex;margin:8px auto 12px}

/* Receptionist's two extra tabs live on the settings screen: its tab bar matches Business info's exactly */
#rc-tabs[hidden],#set-tabs[hidden]{display:none}

/* phones: the sheet's handle (it pulls down to close) */
@media (max-width:720px){
  .drawer .dr-h{position:relative;padding-top:24px;touch-action:none}
  .drawer .dr-h::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:var(--r-pill);background:var(--line-strong)}
}
/* phones: a long button in a Get live step wraps inside its card instead of running past the edge */
@media (max-width:520px){.step3 .btn{max-width:100%;height:auto;min-height:var(--h-ctl);padding-block:6px;white-space:normal;text-align:left}}

/* phones: the Inbox and Leads filters are full-width segmented controls with equal parts, so every tab is on screen
   down to 320px and the selection sits in an even grid (a tab too long for its share takes what it needs) */
@media (max-width:720px){
  .ib-tools .t-tabs,.toolbar .t-tabs{display:flex}
  .toolbar .t-tabs{flex:1 1 100%} /* the Leads toolbar is a wrapping row: the filter takes its own line */
  .ib-tools .t-tab,.toolbar .t-tab{flex:1 1 0;min-width:max-content;justify-content:center;padding:0 6px}
}
/* phones: six platform names don't fit one row, so the picker on Get live wraps into even rows */
@media (max-width:520px){
  #plat-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));overflow:visible}
  #plat-seg .t-tab{justify-content:center;padding:0 6px}
}
/* a flagged chat quotes the question it couldn't answer, right above the answer box */
.fb-t q{color:var(--ink);quotes:"\201C" "\201D"}
/* phones: one chat is one scroll. The transcript no longer gets squeezed above a fixed action box; who it is stays on top */
@media (max-width:900px){
  .ib-conv{overflow-y:auto;overscroll-behavior:contain}
  .ib-conv .cv-h{position:sticky;top:0;z-index:2;background:var(--card)}
  .ib-conv .cv-body{flex:none;overflow:visible}
  .ib-conv #flag-bar{flex:none}
}

/* a count on the selected menu row sits on the selection tint, where the third ink drops under 4.5:1 */
.nav a.cur .n{color:var(--ink-2)}

/* ---------- v3.11: on a phone the assistant is a full-screen chat: no bottom menu, and a back button where the logo is ---------- */
.mback{display:none}
@media (max-width:720px){
  body[data-view="assistant"] .mnav,body[data-view="assistant"] .mlogo{display:none}
  body[data-view="assistant"] .mback{display:inline-grid;margin-inline-start:-8px}
  body[data-view="assistant"] .content{padding-bottom:env(safe-area-inset-bottom)}
  body[data-view="assistant"] .as-chat{height:calc(100dvh - 60px - env(safe-area-inset-bottom))}
}

/* batch 3 (15 Oct): the tab's touch area is 44 tall though it is drawn 36 */
@media (pointer:coarse){.t-tab::after{content:"";position:absolute;inset:-4px 0}}