/* ============================================================
   NameCRM — application stylesheet (Q101)

   Extracted verbatim from the two <style> blocks that used to live in
   index.html. Concatenated in their original document order, so the
   cascade is unchanged: everything under "BASE" came first, the Twisty
   theme layer came second and still wins on equal specificity.

   The <link> replacing them sits in exactly the same place in <head>,
   after config.js and before <body>.

   Not extracted, deliberately: the <style> inside the invoice print-window
   template literal in the app script. It is written into a separate popup
   document that never loads this file.
   ============================================================ */

/* ============================================================
   BASE — layout, components, utilities (was the first <style> block)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* THE QR GROUND (2026-09-30). Deliberately NOT themed: a QR code on a dark background is
     unreadable to most phone cameras, so this stays white in dark mode too. Named rather than
     written inline so the stylesheet keeps its no-literals rule. */
  --qr-paper:#ffffff;
  /* PAPER is the surface a CLIENT reads mail on, not a surface of this app: it
     stays white when NameCRM is in dark mode, because their inbox does. It is
     a token rather than a literal so the rule that forbids raw hex keeps
     holding, and it is deliberately NOT redefined under [data-theme=dark]. */
  --paper:#ffffff;
  /* the INK on paper (2026-09-21, the invoice builder's live document): paper is white in both themes, so its ink is
     fixed too and, like --paper, deliberately NOT redefined under [data-theme=dark] */
  --paper-ink:#1a2332;--paper-soft:#5a6478;--paper-line:#e8edf3;--paper-band:#f1f3f7;--paper-brand:#0e6b4b;
  --sb:#1e2a3a;--sb2:#253447;--accent:#10b981;--accent2:#059669;
  --warn:#f59e0b;--danger:#ef4444;--info:#3b82f6;--purple:#8b5cf6;
  --t1:#0f172a;--t2:#475569;--t3:#626875;--border:#e2e8f0;--accent-soft:color-mix(in srgb,var(--accent) 8%,transparent);--bad:#e5484d;   /* Q15/Q122 a11y: muted text must clear WCAG AA (4.5:1) */
  --bg:#f1f5f9;--card:#ffffff;--hover:#f8fafc;--input:#ffffff;
  --sh:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shmd:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  --shlg:0 10px 15px -3px rgba(0,0,0,.15),0 4px 6px -2px rgba(0,0,0,.05);
  --r:8px;--rlg:12px;--sbw:240px;
  /* SEMANTIC TRIADS (design law 2), added with the cockpit (#81): every
     intent ships tint + text so a pill, a banner and a badge agree, and a
     surface never needs a literal to stay readable in both themes.
     `--on-solid` is the text that sits ON a filled accent.

     IT WAS #ffffff AND IT WAS USED ONCE (Abdul, 2026-09-14: "fix the btn-primary contrast").
     Forty-four rules wrote their own `color:#fff` on the accent instead, and white on
     --accent #10b981 measures 2.54:1, which is not a near miss: the 4.5 AA floor for body
     text is nearly twice that, and the thing failing is every primary button, the FAB, the
     bottom-nav plus, every green avatar, today's calendar cell, calendar events and the
     outbound text bubble.

     The fix keeps the brand green EXACTLY as it is and changes the ink, because --accent is
     the NameTech green on forty-five surfaces and a contrast fix is not a place to restyle a
     brand. Measured on every accent fill in this file: #031a13 is 7.13:1 on --accent, 5.34:1
     on --accent2 (the hover and calendar-event fill, the tightest pair) and 8.3:1 on the
     82% ghost mix. The headroom is deliberate. Q122's scar is a token that measured 4.48 and
     read as passing, so this one clears the floor by most of a point on its worst pair.

     Deep green-black, not black: the green cast keeps it reading as part of the palette. */
  --accent-bg:color-mix(in srgb,var(--accent) 12%,transparent);--accent-tx:#047857;
  --warn-bg:rgba(245,158,11,.14);--warn-tx:#b45309;
  --danger-bg:rgba(239,68,68,.12);--danger-tx:#b91c1c;
  --info-bg:rgba(59,130,246,.13);--info-tx:#1d4ed8;
  --purple-bg:rgba(139,92,246,.13);--purple-tx:#6d28d9;
  --on-solid:#031a13;
  /* ALIASES for names the stylesheet already spoke but no rule defined (found
     2026-09-10, measured on production: .thr-line and .drv-srch rendered
     border-style none, 0px). NameDrive, the Texts line tag and the Client
     Portal card were written against --line/--acc/--chip/--mid, and an
     undefined var() voids the whole declaration: every such border vanished,
     every such accent fell to the inherited colour. They point at the house
     tokens, so both themes follow; tools/token-cases.js refuses the next one. */
  --line:var(--border);--line2:var(--border);--acc:var(--accent);--chip:var(--bg);
  --mid:var(--warn-tx);--mid-bg:var(--warn-bg)
}
:root[data-theme="dark"]{
  --t1:#e2e8f0;--t2:#94a3b8;--t3:#828ca4;--border:#334155;--accent-soft:color-mix(in srgb,var(--accent) 18%,transparent);--bad:#fca5a5;   /* Q15/Q122 a11y: muted text must clear WCAG AA (4.5:1) */
  --bg:#0f172a;--card:#1e293b;--hover:#263449;--input:#1e293b;
  --sh:0 1px 3px rgba(0,0,0,.4);--shmd:0 4px 6px -1px rgba(0,0,0,.4);--shlg:0 10px 20px -3px rgba(0,0,0,.5);
  /* the triads, re-lit for dark: the tints stay, the text lightens */
  --accent-tx:#6ee7b7;--warn-tx:#fcd34d;--danger-tx:#fca5a5;--info-tx:#93c5fd;--purple-tx:#c4b5fd
}
/* overscroll-behavior-y:none kills the BROWSER'S pull-to-refresh (the
   spinner that reloaded the whole app on any downward thumb-slide on the
   phone); the app's own Q107 pull gesture is the one refresh that remains */
/* THE FACE, as a token, because the `font` shorthand cannot take the keyword `inherit` in its family slot:
   it reads it as the name of a font nobody has, and the element silently falls back to the browser default.
   77 declarations did that. A var() is valid there, so they all name the face instead of guessing at it. */
:root{--ff:'Inter',-apple-system,sans-serif}
/* ============================================================
   THE NAMETECH BRAND LOOK, BEHIND A SWITCH (Q-0595, 2026-10-24)

   Abdul: "a complete brand upgrade throughout the crm and website and all our existence". The brand guide
   (~/.claude/standards/brand/nametech, v1.0) as token VALUES, so the whole app follows from one attribute,
   html[data-brand="nt26"], set per device by js/theme.js themeBrandSet (Settings > Appearance > New Nametech look,
   or ?brand=nt26 / ?brand=classic). Off, nothing below matches and the app is exactly as it was.

   THE RULES IT KEEPS, all measured (scratch contrast table in the Q-0595 commit):
   - LIGHT (what he works in): warm cream ground, white cards, ink text. The action colour is the logo green #006544:
     7.13:1 as text on a card, 6.25 on the ground, and cream ink on it 7.13. Lime never appears on a light ground
     (1.27:1 on cream). --t3 5.70 on card, 4.99 on ground; --t2 8.35 / 7.31.
   - DARK: deep green grounds; lime becomes the action colour (11.70 on deep green, deep ink on lime 11.70).
   - THE MENU is deep green in both themes, the brand's own ground, with cream type and lime for where you are.
     Done by redefining the tokens ON #sb, so every existing sidebar rule follows without being rewritten.
   - TYPE: Manrope for everything (the --ff token every face already reads); Outfit for the page titles, the card
     and dialog titles and the wordmark. Fraunces is not used inside the app: it is a headline voice, not a UI face.
   - It sits HERE, beside the base tokens, not at the end: every selector carries :root[data-brand] and so outranks
     the rules it overrides by specificity, whatever their position (and two suites hold the tail of this file to
     no raw hex).
   - A customer's own accent still wins (theme.js themeAccentFor): only the stored OLD default green is set aside.
   ============================================================ */
:root[data-brand="nt26"]{
  --sb:#08291E;--sb2:#0C3426;
  --accent:#006544;--accent2:#005539;--accent-tx:#006544;--on-solid:#FAF9F5;
  --accent-bg:color-mix(in srgb,#006544 10%,transparent);--accent-soft:color-mix(in srgb,#006544 8%,transparent);
  --bg:#F1F0EA;--card:#FFFFFF;--hover:#F6F5F0;--input:#FAF9F5;--border:#E4E2D9;
  --t1:#10281F;--t2:#3F5249;--t3:#5B6A62;--ink:#10281F;
  --paper-brand:#006544;
  --ff:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ff-display:'Outfit','Manrope',-apple-system,sans-serif;
  --sh:0 1px 2px rgba(8,41,30,.04),0 4px 16px rgba(8,41,30,.06);
  --shmd:0 8px 28px rgba(8,41,30,.09);--shlg:0 24px 56px rgba(8,41,30,.18)
}
:root[data-brand="nt26"][data-theme="dark"]{
  --bg:#051A13;--card:#0A251C;--hover:#103227;--input:#103227;--border:#1D4235;
  --t1:#EEF2EC;--t2:#AFC2B8;--t3:#8EA59A;--ink:#EEF2EC;
  --accent:#B9F06E;--accent2:#CAF491;--accent-tx:#B9F06E;--on-solid:#08291E;
  --accent-bg:color-mix(in srgb,#B9F06E 14%,transparent);--accent-soft:color-mix(in srgb,#B9F06E 14%,transparent);
  --sh:0 1px 3px rgba(0,0,0,.45);--shmd:0 4px 10px -1px rgba(0,0,0,.45);--shlg:0 12px 28px -4px rgba(0,0,0,.55)
}
/* the menu and the phone's bottom bar: deep green in both themes, their own token set (the bar is outside #sb, so it
   is named too; without it the active tab read logo green on deep green, 2.19:1, found by tools/brand-live.cjs) */
:root[data-brand="nt26"] #sb,:root[data-brand="nt26"] .bottom-nav{
  --card:#08291E;--hover:#0F3628;--input:#0F3628;--border:rgba(250,249,245,.10);
  --t1:#FAF9F5;--t2:#A9C0B4;--t3:#8FAA9C;
  --accent:#B9F06E;--accent2:#CAF491;--accent-tx:#B9F06E;--on-solid:#08291E
}
:root[data-brand="nt26"] #sb{border-right-color:transparent}
:root[data-brand="nt26"] #sb .nav-lbl{opacity:1}
/* NameCRM's icon beside the wordmark: Option E, the deep green Nametech mark on a lime tile (his pick 2026-10-24, the
   same drawing as favicon-32.png and the installed-app icon). Line 57, the cut for 32 px and under. Drawn from CSS so
   the shell markup (js/theme.js themeApplyShell, pinned by tools/shell-brand-cases.js) is unchanged. */
:root[data-brand="nt26"] .sb-logo h1{display:flex;align-items:center;font-family:var(--ff-display);font-weight:700;letter-spacing:-.02em;font-size:19px}
:root[data-brand="nt26"] .sb-logo h1::before{content:"";flex:none;width:28px;height:28px;margin-right:10px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect width='512' height='512' rx='113' fill='%23B9F06E'/%3E%3Cg transform='translate(59.5 59.5) scale(.885)' fill='none' stroke='%2308291E' stroke-width='57' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M363.5 100 V63 A26.5 26.5 0 0 0 337 36.5 H63 A26.5 26.5 0 0 0 36.5 63 V262 A26.5 26.5 0 0 0 63 288.5 H172'/%3E%3Cpath d='M36.5 401.5 H158.5'/%3E%3Crect x='296.5' y='228.5' width='113' height='181' rx='24.5'/%3E%3C/g%3E%3C/svg%3E")}
/* the slim menu keeps the icon and drops the word */
:root[data-brand="nt26"] body.nav-slim #sb .sb-logo h1{font-size:0;justify-content:center}
:root[data-brand="nt26"] body.nav-slim #sb .sb-logo h1::before{margin-right:0}
/* titles in the display face */
:root[data-brand="nt26"] .ph h2,:root[data-brand="nt26"] .ch h3,:root[data-brand="nt26"] .mh h3{font-family:var(--ff-display);letter-spacing:-.015em}

/* AND THE CONTROLS. A button does not inherit the page font: without a family of its own it uses the browser
   default, which is Arial here. Four of them across the app were doing exactly that, including the floating +.
   Family only, never the shorthand, so no size or weight anywhere is disturbed. */
button,input,select,textarea,optgroup{font-family:inherit}
body{font-family:var(--ff);background:var(--bg);color:var(--t1);min-height:100vh;display:flex;overscroll-behavior-y:none}
/* THE CLASSLESS-CONTROL FLOOR (Abdul 2026-09-05: "audit the entire settings
   page for dark mode"). A form control that ships without a styled class
   fell to the UA's WHITE — the live audit found 11 on Settings alone
   (Report Templates, Website research, av-lead, acct-lock). :where() keeps
   this at plain element specificity, so every existing class and inline
   style still wins; only the UA default loses. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),select,textarea){
  background:var(--input);color:var(--t1);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-family:inherit;font-size:12.5px;outline:none}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
/* SIDEBAR */
/* the rail is viewport-locked; only .sb-nav scrolls, so the profile + footer
   never fall below the screen (Abdul 2026-08-20) */
#sb{width:var(--sbw);background:var(--sb);height:100vh;position:fixed;left:0;top:0;display:flex;flex-direction:column;z-index:100;overflow:hidden;transition:width .18s ease}
/* ---- icons-only sidebar (nt-nav-slim) — one variable collapses the app ---- */
body.nav-slim{--sbw:64px}
body.nav-slim #sb .sb-logo p,body.nav-slim #sb .sb-logo h1 span,body.nav-slim .sb-user-info,body.nav-slim .nav-lbl,body.nav-slim .ni-badge{display:none}
/* profile pinned to the bottom; nav starts the sidebar; a breath of padding
   above the taskbar; theme + settings ride beside the profile (2026-08-20) */
#sb{padding-bottom:12px}
#sb .sb-nav{margin-top:6px}
#sb .sb-user{margin-top:auto;border-top:1px solid var(--border);border-bottom:none;padding-top:12px}
#sb .sb-user-acts{margin-left:auto;display:flex;gap:2px}
#sb .sb-logo:empty{display:none}
#sb .sb-logo{padding-top:14px}
/* slim keeps theme + settings (the ONLY door to Settings now that the nav
   item is gone) — stacked under the avatar; only the footer hides */
body.nav-slim #sb .sb-footer{display:none}
body.nav-slim #sb .sb-user{flex-direction:column;gap:6px}
body.nav-slim #sb .sb-user-acts{margin-left:0}
body.nav-slim #sb .sb-logo h1{font-size:18px;text-align:center}
body.nav-slim .sb-user{justify-content:center;padding-left:0;padding-right:0}
body.nav-slim .ni{justify-content:center;font-size:0;gap:0;padding-left:0;padding-right:0}
body.nav-slim .ni svg{width:20px;height:20px;margin:0}
#sb-toggle{position:fixed;left:calc(var(--sbw) - 13px);top:72px;z-index:120;width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--t2);font-size:15px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:left .18s ease}
#sb-toggle:hover{color:var(--t1);border-color:var(--accent)}
@media(max-width:768px){#sb-toggle{display:none}}
.sb-logo{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.sb-logo h1{color:#fff;font-size:18px;font-weight:800;letter-spacing:-.5px}
.sb-logo h1 span{color:var(--accent)}
.sb-logo p{color:rgba(255,255,255,.35);font-size:10px;margin-top:2px;text-transform:uppercase;letter-spacing:.8px}
.sb-user{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px}
.sb-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:var(--on-solid);font-size:13px;font-weight:700;flex-shrink:0}
.sb-user-info p{color:#fff;font-size:12px;font-weight:600}
.sb-user-info span{color:rgba(255,255,255,.4);font-size:10px}
/* the signed-in PERSON and their role (2026-09-26): one line each, a long name ellipses, never pushing the
   theme/settings buttons out (tools/identity-live.cjs measures it) */
.sb-user-info{min-width:0;flex:1 1 auto}
.sb-user-info p,.sb-user-info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-nav{padding:10px 10px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.nav-lbl{color:rgba(255,255,255,.25);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;padding:8px 8px 4px;margin-top:6px}
.ni{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;color:rgba(255,255,255,.55);cursor:pointer;transition:all .12s;font-size:13px;font-weight:500;margin-bottom:1px;user-select:none;position:relative}
.ni:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85)}
.ni.active{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.ni svg{width:16px;height:16px;flex-shrink:0}
.ni-badge{position:absolute;right:10px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;padding:2px 5px;border-radius:10px;min-width:16px;text-align:center}
.sb-footer{padding:12px 18px;border-top:1px solid rgba(255,255,255,.07)}
.sb-footer p{color:rgba(255,255,255,.2);font-size:10px}
/* MAIN */
#main{margin-left:var(--sbw);flex:1;min-height:100vh;display:flex;flex-direction:column;max-width:calc(100vw - var(--sbw))}
/* ONE sticky stack for all the top chrome. The header, the tab strip and the call bar were three sticky elements at
   top:0 with z-index 60 / 880 / 900, so each painted over the ones above it and the search dropdown (z-index 200,
   trapped inside the header's z-index 60) lost to the call bar every time. Now only the wrapper sticks; the three
   children sit in normal flow inside it, so nothing can cover anything and the call bar pushes the page down. */
/* 60, the altitude the header has always had, NOT the call bar's old 900. position:sticky creates a stacking
   context whatever its z-index, so every child is confined to the wrapper's level and the whole chrome moves as
   one. Shipping this at 900 lifted the header above every sheet, panel and popover in the 220 to 400 band:
   reach-live found ten controls across the appointment editor, mail settings and the estimate studio covered by
   the header or the search box. An overlay belongs over the chrome; the chrome belongs over the page. */
#chrome-top{position:sticky;top:0;z-index:60;background:var(--bg)}
/* relative, not static: .wn-wrap and the search dropdown are positioned against this box, and 70 outranks the strip
   and the call bar below so the dropdown's names stay clickable while a call is up */
#ghead{background:var(--card);border-bottom:1px solid var(--border);padding:12px 28px;display:flex;align-items:center;gap:14px;position:relative;z-index:70;box-shadow:var(--sh)}
.gsearch{position:relative;flex:1;max-width:420px}
.gsearch input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:var(--bg);outline:none;color:var(--t1);transition:border-color .15s}
.gsearch input:focus{border-color:var(--accent)}
.gsearch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}
.search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shlg);z-index:200;max-height:320px;overflow-y:auto;display:none}
.search-results.open{display:block}
.sr-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:13px}
.sr-item:last-child{border-bottom:none}
.sr-item:hover{background:var(--hover)}
.sr-type{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.sr-type.contact{background:#dbeafe;color:#1d4ed8}.sr-type.project{background:#d1fae5;color:#065f46}.sr-type.task{background:#fef3c7;color:#92400e}
/* Q175 — in-app search v2: grouped results + recent searches */
.sr-g{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;
  padding:7px 14px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--t3);background:var(--card);border-bottom:1px solid var(--border)}
.sr-clear{background:none;border:none;cursor:pointer;font-family:inherit;font-size:10px;font-weight:600;
  letter-spacing:normal;text-transform:none;color:var(--t3);padding:2px 4px;border-radius:5px}
.sr-clear:hover{color:var(--accent)}
.sr-item.sel{background:var(--hover)}
.sr-i-ic{flex:none;line-height:0;color:var(--t3)}
.sr-i-b{min-width:0;flex:1}
.sr-i-t{font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-i-s{font-size:11px;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-recent .sr-i-t{font-weight:500;color:var(--t2)}
.head-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;background:var(--bg);color:var(--t2)}
.live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--t3)}
.live-dot.connected{background:#d1fae5;color:#065f46}.live-dot.connected::before{background:var(--accent);animation:pulse 1.8s infinite}
.live-dot.offline{background:#fee2e2;color:#991b1b}.live-dot.offline::before{background:var(--danger)}
:root[data-theme="dark"] .live-dot.connected{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent-tx)}
:root[data-theme="dark"] .live-dot.offline{background:rgba(239,68,68,.15);color:#fca5a5}
/* LIMITED (2026-10-19): live updates arrive but our own server is behind Vercel's checkpoint (js/app.js cpLive). The
   warning triad, never green: "Live" beside "Reconnect" read as all clear (the person's-side review) */
.live-dot.limited{background:var(--warn-bg);color:var(--warn-tx)}.live-dot.limited::before{background:var(--warn)}
/* the Reconnect pill is a WARNING, in its own colour and with its own icon, so on a phone (icon only) it is never
   mistaken for the green "Update ready" */
.ver-pill.cp-pill{color:var(--warn-tx);background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 55%,var(--border))}
.ver-pill.cp-pill:hover{border-color:var(--warn)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* Q104 — "Updated" tick after a background refresh corrected the instant paint.
   Collapsed to zero width when hidden so it never reserves header space, and
   it animates opacity/transform only (both compositor-friendly, no layout). */
.upd-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:5px 10px;border-radius:20px;background:#d1fae5;color:#065f46;
  opacity:0;transform:translateY(-4px);pointer-events:none;white-space:nowrap;
  transition:opacity .22s ease,transform .22s ease}
.upd-pill.show{opacity:1;transform:none}
:root[data-theme="dark"] .upd-pill{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-tx)}
@media (prefers-reduced-motion:reduce){.upd-pill{transition:opacity .22s ease}}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .15s;font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--on-solid)}.btn-primary:hover{background:var(--accent2)}
.btn-secondary{background:var(--bg);color:var(--t2);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border);color:var(--t1)}
/* Q122 — THE DESTRUCTIVE CONFIRM BUTTON, MEASURED.
   Q119 logged this as "white on --danger, 3.44:1" and proposed
   background:#dc2626. The ratio was right and the composition was not: it is
   --danger TEXT (#ef4444) on a #fef2f2 tint, so the proposed fix would have
   turned a deliberately quiet destructive button into a solid red block —
   a visual change nobody asked for, to fix a number that can be fixed without
   one. Darkening the TEXT to #b91c1c — the red this stylesheet already uses
   everywhere a small destructive label sits on a light surface — measures
   5.91:1 and leaves the button looking exactly as designed.
   THE DARK PAIR IS THE OTHER HALF OF THE SAME DEFECT: this rule had no dark
   override at all, so on a dark card the Confirm button was a pale pink block
   beside a .btn-secondary that adapts. It is the ONE element in the whole
   single-mode sweep that is out of step with its own family (the other 67 are
   pastel chips, which are deliberate and all pass AA in both themes). */
.btn-danger{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.btn-danger:hover{background:#fee2e2}
:root[data-theme="dark"] .btn-danger{background:rgba(239,68,68,.16);color:#fca5a5;border-color:rgba(239,68,68,.42)}
:root[data-theme="dark"] .btn-danger:hover{background:rgba(239,68,68,.26)}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--t2)}.btn-ghost:hover{background:var(--bg)}
.btn-sm{padding:5px 10px;font-size:11px}.btn-xs{padding:3px 8px;font-size:10px}
.btn-icon{background:none;border:none;cursor:pointer;padding:6px;border-radius:6px;color:var(--t2);transition:all .15s;display:inline-flex;align-items:center;font-family:inherit}
.btn-icon:hover{background:var(--bg);color:var(--t1)}
/* A light-pink hover on a dark card was the same single-mode miss as
   .btn-danger, on the delete button that sits beside it. */
.btn-icon.danger:hover{background:#fef2f2;color:#b91c1c}
:root[data-theme="dark"] .btn-icon.danger:hover{background:rgba(239,68,68,.18);color:#fca5a5}
.view{display:none;flex-direction:column;flex:1}
.view.active{display:flex}
.ph{background:var(--card);border-bottom:1px solid var(--border);padding:18px 28px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.ph h2{font-size:18px;font-weight:700;color:var(--t1)}
.ph p{font-size:12px;color:var(--t2);margin-top:2px}
.ph-actions{display:flex;gap:8px;align-items:center}
.pc{padding:24px 28px;flex:1;overflow-y:auto}
.card{background:var(--card);border-radius:var(--rlg);border:1px solid var(--border);box-shadow:var(--sh)}
.ch{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.ct{font-size:13px;font-weight:700;color:var(--t1)}
.cb{padding:18px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{background:var(--card);border-radius:var(--rlg);padding:18px;border:1px solid var(--border);box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.kpi-link:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.kpi-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.ki-g{background:#d1fae5;color:#059669}.ki-b{background:#dbeafe;color:#2563eb}.ki-a{background:#fef3c7;color:#d97706}.ki-p{background:#ede9fe;color:#7c3aed}.ki-r{background:#fee2e2;color:#dc2626}
.kpi-lbl{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.alert-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600}
.alert-pill.alert-warn{background:#fef3c7;color:#92400e}.alert-pill.alert-danger{background:#fee2e2;color:#991b1b}.alert-pill.alert-success{background:#d1fae5;color:#065f46}
/* PW-7 — THE MENTION. One class for every record name written inside
   another record's surface, rendered by entLink() in js/links.js. It
   inherits its colour rather than claiming the accent: a client's name in a
   table is not a call to action, it is a fact you can follow (the colour
   law). The underline on hover is what says "this goes somewhere". */
/* `td{overflow-wrap:anywhere}` (added so long emails and URLs cannot burst a
   cell) also applies to a NAME, and at 390 it rendered "Woodw orks Reehan".
   A record's name breaks at spaces or not at all — it is the one string on
   the page that has to stay recognisable. */
.ent-lnk{color:inherit;cursor:pointer;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .12s,color .12s;overflow-wrap:normal;word-break:normal}
.ent-lnk:hover{color:var(--accent2);border-bottom-color:currentColor}
.ent-chip{display:inline-flex;align-items:center;gap:5px;min-width:0}
.ent-chip svg{color:var(--t3);flex:none}
@media(hover:none){.ent-lnk{border-bottom-color:var(--border)}}   /* a coarse pointer never hovers — the door must still look like one */
.qa-btns{display:flex;gap:4px;opacity:0;transition:opacity .15s}tr:hover .qa-btns{opacity:1}
/* PW-6 — a coarse pointer never hovers, so hover-only actions are actions
   that DO NOT EXIST on a phone. Revealed at .6 so they read as secondary
   without being unreachable. */
@media(hover:none){.qa-btns{opacity:.6}}
.kpi-val{font-size:26px;font-weight:800;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums}
.kpi-sub{font-size:11px;color:var(--t3);margin-top:5px}
.dg{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
.tbl-wrap{background:var(--card);border-radius:var(--rlg);border:1px solid var(--border);box-shadow:var(--sh);overflow:hidden}
.tbl-ctrl{display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
table{width:100%;border-collapse:collapse}
th{padding:10px 14px;text-align:left;font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;background:var(--hover);border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none}
th:hover{color:var(--t1)}
td{padding:12px 14px;font-size:12px;color:var(--t1);border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--hover);cursor:pointer}
.si{position:relative;flex:1;max-width:280px}
.si svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}
.si input{width:100%;padding:8px 10px 8px 30px;border:1px solid var(--border);border-radius:7px;font-size:12px;font-family:inherit;background:var(--card);color:var(--t1);outline:none}
.si input:focus{border-color:var(--accent)}
select.fs{padding:7px 10px;border:1px solid var(--border);border-radius:7px;font-size:12px;font-family:inherit;background:var(--card);color:var(--t1);outline:none;cursor:pointer}
select.fs:focus{border-color:var(--accent)}
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:700;white-space:nowrap}
.b-lead{background:#dbeafe;color:#1e40af}.b-proposal{background:#fef3c7;color:#92400e}.b-active{background:#d1fae5;color:#065f46}.b-inactive{background:#f1f5f9;color:#475569}
/* ---- the full-page Google-native calendar (uproot approved 2026-08-20) ---- */
.cal-page{display:flex;gap:18px;align-items:flex-start;position:relative}
/* the 24h day scrolls in its own pane, filling the viewport like Google */
.cal-body{max-height:calc(100vh - 300px);min-height:420px;overflow-y:auto;position:relative;scrollbar-width:thin}
.cal-rail-tg{position:absolute;left:-8px;top:4px;width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--t2);font-size:14px;line-height:1;cursor:pointer;z-index:8;box-shadow:0 3px 10px rgba(0,0,0,.14)}
.cal-rail-tg:hover{color:var(--t1);border-color:var(--accent)}
.cal-rail{width:236px;flex-shrink:0;position:sticky;top:8px}
.cal-main{flex:1;min-width:0}
.mm{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.mm-h{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:8px}
.mm-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.mm-w{font-size:9.5px;color:var(--t3);font-weight:700;padding:2px 0}
.mm-d{border:none;background:none;color:var(--t1);font-size:11px;padding:5px 0;border-radius:50%;cursor:pointer}
.mm-d:hover{background:var(--bg)}
.mm-d.out{color:var(--t3);opacity:.55}
.mm-d.today{background:var(--accent);color:var(--on-solid);font-weight:700}
.mm-d.sel:not(.today){outline:1.5px solid var(--accent)}
.cal-srcs{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-top:12px}
.mm-lbl{font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.cal-src{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;cursor:pointer}
.cal-src i{width:12px;height:12px;border-radius:4px;display:inline-block}
.cal-gmt{font-size:9.5px;color:var(--t3);align-self:end;padding:0 4px 4px}
.cal-adrow{display:grid;grid-template-columns:56px repeat(var(--cols),1fr);border-bottom:1px solid var(--border);min-height:6px}
.cal-ad-cell{display:flex;flex-wrap:wrap;gap:3px;padding:3px 4px;border-left:1px solid var(--border)}
.cal-ad{font-size:10.5px;font-weight:600;background:var(--sb);border-radius:5px;padding:2px 8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cal-hcell .dd.on{background:var(--accent);color:var(--on-solid);border-radius:50%;width:26px;height:26px;line-height:26px;display:inline-block}
.cal-slot{display:flex;flex-direction:column}
.cal-half{flex:1}
.cal-half:first-child{border-bottom:1px dotted color-mix(in srgb,var(--border) 55%,transparent)}
.cal-half:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
#cal-pop{position:fixed;z-index:1200;width:340px;max-width:calc(100vw - 16px);background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 70px -18px rgba(0,0,0,.35);padding:14px 18px 16px;animation:fadein .15s ease}
.cp-icons{display:flex;justify-content:flex-end;gap:2px;margin-bottom:4px}
.cp-menu{display:none;position:absolute;right:14px;top:44px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 34px -10px rgba(0,0,0,.3);z-index:2;min-width:190px;padding:5px}
.cp-menu button{display:block;width:100%;text-align:left;border:none;background:none;color:var(--t1);font-size:13px;padding:8px 12px;border-radius:7px;cursor:pointer}
.cp-menu button:hover{background:var(--bg)}
.cp-t{display:flex;align-items:center;gap:10px;font-size:16px;margin:2px 0 6px}
.cp-t i{width:14px;height:14px;border-radius:4px;flex-shrink:0}
.cp-l{font-size:12.5px;color:var(--t2);margin:5px 0;display:flex;align-items:center;gap:7px}
/* plain links go accent; a BUTTON-shaped link keeps the button's own text
   color (Abdul 2026-09-05: "Join with Google Meet" was green-on-green) */
.cp-l a:not(.btn){color:var(--accent)}
.cp-d{color:var(--t3);line-height:1.5}
.cp-cal{color:var(--t3);font-size:11.5px}
@media(max-width:900px){.cal-rail{display:none}}
.cal-ghost{position:absolute;left:2px;right:2px;background:color-mix(in srgb,var(--accent) 82%,white);color:var(--on-solid);border-radius:7px;font-size:11px;font-weight:600;padding:3px 8px;z-index:5;pointer-events:none;opacity:.92}
.cal-qc .qc-title{width:100%;border:none;border-bottom:2px solid var(--accent);background:none;color:var(--t1);font-size:19px;padding:4px 0 8px;outline:none;margin-bottom:10px;font-family:inherit}
.cal-qc .qc-title::placeholder{color:var(--t3)}
.qc-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.cal-now{position:absolute;left:0;right:0;height:2px;background:#ea4335;z-index:6;pointer-events:none}
.cal-now i{position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:#ea4335}
.b-researching{background:#ede9fe;color:#5b21b6}.b-findings{background:#cffafe;color:#155e75}.b-consult{background:#e0e7ff;color:#3730a3}.b-care{background:#ccfbf1;color:#115e59}.b-past{background:#e7e5e4;color:#57534e}.b-contactonly{background:#f5f5f4;color:#78716c}
.b-website{background:#dbeafe;color:#1e40af}.b-rwib{background:#ede9fe;color:#5b21b6}.b-taobn{background:#ffedd5;color:#9a3412}.b-referral{background:#d1fae5;color:#065f46}
.b-social{background:#fce7f3;color:#9d174d}.b-event{background:#fef3c7;color:#92400e}.b-pr{background:#f0fdf4;color:#166534}.b-other{background:#f1f5f9;color:#475569}
.b-high{background:#fee2e2;color:#991b1b}.b-med{background:#fef3c7;color:#92400e}.b-low{background:#f0fdf4;color:#166534}
/* dark re-light for the whole pastel badge family (his settings audit:
   b-inactive read as a white chip; none of the seven had a dark face) */
:root[data-theme="dark"] .b-lead{background:rgba(59,130,246,.18);color:#93c5fd}
:root[data-theme="dark"] .b-proposal{background:rgba(245,158,11,.16);color:#fcd34d}
:root[data-theme="dark"] .b-active{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-tx)}
:root[data-theme="dark"] .b-inactive{background:rgba(148,163,184,.14);color:#94a3b8}
:root[data-theme="dark"] .b-high{background:rgba(239,68,68,.16);color:#fca5a5}
:root[data-theme="dark"] .b-med{background:rgba(245,158,11,.16);color:#fcd34d}
:root[data-theme="dark"] .b-low{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-tx)}
.b-planning{background:#f3f4f6;color:#374151}.b-inprog{background:#dbeafe;color:#1d4ed8}.b-review{background:#fef3c7;color:#92400e}.b-done{background:#d1fae5;color:#065f46}.b-paused{background:#fee2e2;color:#991b1b}
.b-draft{background:#f1f5f9;color:#475569}.b-sent{background:#dbeafe;color:#1d4ed8}.b-viewed{background:#fef3c7;color:#92400e}.b-signed{background:#d1fae5;color:#065f46}.b-expired{background:#fee2e2;color:#991b1b}
.tag{display:inline-block;padding:2px 7px;background:var(--bg);color:var(--t2);border-radius:20px;font-size:10px;font-weight:500;margin:1px}
.health-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:700}
.health-badge.green{background:#d1fae5;color:#065f46}.health-badge.yellow{background:#fef3c7;color:#92400e}.health-badge.red{background:#fee2e2;color:#991b1b}
/* Neutral state for "New" — a contact added yesterday with nothing logged is
   not a warning, and colouring it like one is what made the whole column
   unreadable in production. */
.health-badge.grey{background:#eef1f6;color:#475569}
/* KANBAN */
.kb{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.kc{background:var(--hover);border-radius:var(--rlg);border:1px solid var(--border)}
.kch{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.kct{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px}
.kcc{background:var(--border);color:var(--t2);font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px}
.kcards{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:250px}
.kcard{background:var(--card);border-radius:var(--r);border:1px solid var(--border);padding:12px;box-shadow:var(--sh);cursor:grab;transition:all .15s}
.kcard:hover{box-shadow:var(--shmd);transform:translateY(-1px)}
.kcard.dragging{opacity:.4;transform:rotate(1.5deg)}
.kcard-name{font-size:12px;font-weight:700;margin-bottom:2px}
.kcard-co{font-size:11px;color:var(--t2);margin-bottom:8px}
.kcard-ft{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.kcard-amt{font-size:12px;font-weight:700;color:var(--accent)}
.kcard-last{font-size:10px;color:var(--t3)}
.nba{display:block;margin-top:8px;font-size:10px;font-weight:600;padding:5px 7px;border-radius:6px;background:rgba(245,158,11,.12);color:#b45309;line-height:1.45}
.nba.u-urgent{background:rgba(239,68,68,.12);color:#b91c1c}
.nba.u-info{background:rgba(59,130,246,.12);color:#1d4ed8}
.nba .nba-hd{display:flex;align-items:flex-start;gap:5px}
.nba .nba-hd svg{flex:0 0 auto;margin-top:1px}
.nba .nba-t{flex:1;min-width:0;overflow-wrap:break-word;word-break:break-word}
.nba-go{margin-top:6px;border:none;background:rgba(15,23,42,.07);color:inherit;font-family:inherit;font-size:10px;font-weight:700;border-radius:5px;padding:3px 8px;cursor:pointer;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.nba-go:hover{background:rgba(15,23,42,.14)}
.nba-go:disabled{opacity:.6;cursor:default}
:root[data-theme="dark"] .nba{background:rgba(245,158,11,.16);color:#fcd34d}
:root[data-theme="dark"] .nba.u-urgent{background:rgba(239,68,68,.18);color:#fca5a5}
:root[data-theme="dark"] .nba.u-info{background:rgba(59,130,246,.18);color:#93c5fd}
:root[data-theme="dark"] .nba-go{background:rgba(255,255,255,.12)}
:root[data-theme="dark"] .nba-go:hover{background:rgba(255,255,255,.2)}
.nba-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;border-radius:12px;padding:12px 14px;border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.nba-bar.u-urgent{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.nba-bar.u-info{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.07)}
.nba-bar .nba-ic{display:flex;align-items:center;color:#b45309}
.nba-bar.u-urgent .nba-ic{color:#b91c1c}
.nba-bar.u-info .nba-ic{color:#1d4ed8}
:root[data-theme="dark"] .nba-bar .nba-ic{color:#fcd34d}
:root[data-theme="dark"] .nba-bar.u-urgent .nba-ic{color:#fca5a5}
:root[data-theme="dark"] .nba-bar.u-info .nba-ic{color:#93c5fd}
.nba-bar .nba-txt{flex:1;min-width:0}
.nba-bar .nba-h{font-size:13px;font-weight:700;color:var(--t1);overflow-wrap:anywhere}
.nba-bar .nba-w{font-size:11px;color:var(--t2);margin-top:2px;overflow-wrap:anywhere}
.drop-zone{min-height:40px;border:2px dashed transparent;border-radius:8px;transition:all .2s}
.kcards.drag-active{border:2px dashed var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:8px}
.funnel{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.funnel-seg{flex:1;min-width:140px;background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);padding:12px 14px;box-shadow:var(--sh)}
.funnel-seg .l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t2)}
.funnel-seg .v{font-size:18px;font-weight:800;margin-top:4px}
.funnel-seg .s{font-size:10px;color:var(--t3);margin-top:2px}
/* BILLING */
.bl-row{display:flex;align-items:center;padding:13px 18px;border-bottom:1px solid var(--border);gap:14px;transition:background .1s}
.bl-row:last-child{border-bottom:none}.bl-row:hover{background:var(--hover)}
.bl-row.due{background:rgba(245,158,11,.08);border-left:3px solid var(--warn)}
.bl-day{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0;background:var(--bg);color:var(--t2)}
.bl-day.urgent{background:#fef3c7;color:#92400e}
.bl-info{flex:1}.bl-info h4{font-size:13px;font-weight:600}.bl-info p{font-size:11px;color:var(--t2);margin-top:1px}
.bl-amt{font-size:14px;font-weight:700;color:var(--t1);margin-left:auto}
/* ACTIVITY FEED */
.af-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.af-item:last-child{border-bottom:none}
.af-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.af-call{background:#d1fae5;color:#065f46}.af-meeting{background:#dbeafe;color:#1d4ed8}.af-email{background:#fef3c7;color:#92400e}.af-note{background:#f3f4f6;color:#374151}
.af-body{flex:1}.af-title{font-size:12px;font-weight:600;margin-bottom:2px}.af-desc{font-size:12px;color:var(--t2);line-height:1.5}.af-meta{font-size:10px;color:var(--t3);margin-top:4px}
.task-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);transition:background .1s}
.task-row:last-child{border-bottom:none}.task-row:hover{background:var(--hover)}
.task-row.overdue{background:rgba(239,68,68,.06)}.task-row.done-row{opacity:.55}
.task-cb{width:16px;height:16px;border-radius:4px;border:2px solid var(--border);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.task-cb.checked{background:var(--accent);border-color:var(--accent)}
.task-title{font-size:12px;font-weight:500;flex:1}.task-title.done{text-decoration:line-through;color:var(--t3)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc-card{background:var(--card);border-radius:var(--rlg);border:1px solid var(--border);padding:18px;box-shadow:var(--sh)}
.svc-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:8px}
.svc-name{font-size:14px;font-weight:700;margin-bottom:6px}.svc-desc{font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:12px}
.svc-price{font-size:15px;font-weight:700;color:var(--accent)}.svc-type{font-size:10px;color:var(--t3);margin-top:2px}
/* MODAL */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.mo.open{display:flex}
.modal{background:var(--card);border-radius:var(--rlg);width:580px;max-width:95vw;max-height:92vh;overflow-y:auto;box-shadow:var(--shlg);animation:moin .2s ease}
.modal.wide{width:820px}
/* the composer is the one modal with a second column (2026-09-20) */
.modal.cmp-modal{width:1080px}
@keyframes moin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.mh{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--card);z-index:1}
.mh h3{font-size:15px;font-weight:700}
.mbd{padding:22px}
/* flex-wrap added 2026-09-20: .mf had none and no mobile override, and the
   composer puts up to six controls in it — at 375px they crushed together
   instead of wrapping. The same class app.css:671 already fixed for page
   headers, never carried here. */
.mf{padding:14px 22px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;background:var(--card);position:sticky;bottom:0}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fgf{grid-column:1/-1}
/* PW-8 — THE FIELD STANDARD, APPLIED AT THE CSS LAYER.
   The Flow Standard's field (`.ff`) is a FILLED box with a transparent
   border that turns accent on focus, plus a soft focus ring. Every other
   form in the app used `.fl`: a thin outline on a slightly-tinted input —
   the v1 look, and the single biggest reason the remaining modals still
   read as older than the flows.
   Restyling `.fl` rather than rewriting each form to `.ff` is the whole
   trick: it reaches EVERY field of every remaining modal at once, and no
   input changes its id, so not one save path is touched. (Ids are what
   saveContact, savePayment, saveService and the rest read back — the one
   thing this wave must not disturb.) */
.fl{display:flex;flex-direction:column;gap:5px;min-width:0}
.fl label{font-size:11px;font-weight:600;color:var(--t2)}
.fl input,.fl select,.fl textarea{padding:9px 11px;border:1.5px solid transparent;border-radius:10px;font-size:13.5px;font-family:inherit;color:var(--t1);background:var(--bg);outline:none;width:100%;transition:border-color .15s,background .15s,box-shadow .15s}
.fl input:focus,.fl select:focus,.fl textarea:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.fl input::placeholder,.fl textarea::placeholder{color:var(--t3)}
.fl textarea{resize:vertical;min-height:80px}
/* a native select still gets the standard's chrome — the custom picker
   migration is its own job, and a half-migrated form is worse than a
   consistent one (stated in the dossier, not quietly skipped) */
.fl select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
/* DRAWER */
.drw-ov{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:250;display:none}
.drw-ov.open{display:block}
.drw{position:fixed;right:-540px;top:0;height:100vh;width:500px;max-width:95vw;background:var(--card);z-index:260;box-shadow:var(--shlg);overflow:hidden;transition:right .28s ease;display:flex;flex-direction:column}
.drw.open{right:0}
.drw-hd{padding:18px 22px;border-bottom:1px solid var(--border);flex-shrink:0}
.drw-hd h3{font-size:16px;font-weight:700}.drw-hd p{font-size:12px;color:var(--t2);margin-top:2px}
.drw-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 22px;flex-shrink:0;overflow-x:auto}
.drw-tab{padding:10px 14px;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.drw-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.drw-body{flex:1;overflow-y:auto;padding:18px 22px}
.dr-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}
/* a label never shrinks: a wide value (the Portal row's link, badge and button) squeezed "Portal" until its icon sat on
   one line and the word on the next (measured 2026-09-30); the value wraps instead */
.dr-lbl{color:var(--t2);font-weight:500;flex:none;white-space:nowrap}.dr-val{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
/* A ROW WHOSE LABEL IS A TITLE AND A SENTENCE (2026-10-11). The rule above is right for a one-word label and wrong
   for these: the sentence could not wrap, so on the build page at 375 wide the label alone was 679px in a 305px row
   and "Build templates" and "Upload output" sat off the screen, unpressable (measured; reach-live had been failing
   on it outside the gate). Here the sentence wraps and takes the room, and the buttons keep their size and drop to
   their own line when there is no room beside it. */
.dr-row.dr-act{flex-wrap:wrap;align-items:flex-start}
.dr-row.dr-act .dr-lbl{white-space:normal;flex:1 1 220px;min-width:0}
.dr-row.dr-act .dr-val{flex:none;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;overflow-wrap:normal}
/* CONFIRM + TOAST */
/* A QUESTION SITS ABOVE WHATEVER ASKED IT (2026-10-10). This was 400 and the form sheet (.flow-ov) is 1200, so a confirm opened from
   inside a form was drawn BEHIND it, half hidden: found by tools/emailgate-live.cjs measuring what is on top, then seen in its screenshot.
   1700 clears every sheet, bar and screen that can ask (the meeting screen is 1600); toasts and the palette stay above. */
.conf-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1700;display:none;align-items:center;justify-content:center}
.conf-ov.open{display:flex}
.conf-box{background:var(--card);border-radius:var(--rlg);padding:26px;max-width:340px;width:90%;box-shadow:var(--shlg);text-align:center}
.conf-box h3{font-size:15px;font-weight:700;margin-bottom:7px}.conf-box p{font-size:12px;color:var(--t2);margin-bottom:18px;line-height:1.5}
.toast-c{position:fixed;bottom:22px;right:22px;z-index:9999;display:flex;flex-direction:column;gap:7px}
/* PW-6 — on a phone a toast at bottom:22px lands ON the bottom nav (it wins
   on z-index, so it covered the nav rather than hiding behind it, which is
   the worse of the two). Dock it above the bar and let it use the width. */
@media(max-width:768px){.toast-c{bottom:calc(68px + env(safe-area-inset-bottom,0px));left:12px;right:12px}}
/* PRESENT IS NOT REACHABLE (2026-09-20, measured by coverSweep in tools/_live.cjs).
   1. The container is a fixed column as wide as its widest toast. It ate clicks even where no
      toast was, so Send and Queue for review under it were dead. It never takes the pointer;
      the toasts inside it do.
   2. A modal's footer is where its primary action lives, and bottom-right is where a modal's
      footer is on a laptop. While a modal is open the toasts dock top-centre, over the one
      stretch of a modal header that is always empty.
   3. The "new version" prompt left the toast layer altogether the same day: it is a pill in the
      top bar now (.ver-pill, js/app.js swUpdateReady), in flow, under any modal's overlay.
   4. THE RULE BOTH CAME FROM: A PROMPT THAT STAYS NEVER FLOATS OVER THE WORKING AREA. A toast
      that leaves in three seconds may; the install and notification nudges stay until they are
      dismissed, so they appear on the Dashboard only (on a phone the install nudge sat on Send,
      the send menu and Dictate in a text thread). tools/shell-live.cjs sweeps five window sizes. */
.toast-c{pointer-events:none}
.toast-c>*{pointer-events:auto}
/* a live call's dock sits where the toasts do (bottom right): they move to the top while it is up, or a message like
   "Ringing your phone" lies on End call at the moment she may need it (found by the dock harness's cover sweep, Q-0316) */
body:has(#modal-ov.open) .toast-c,body.dk-live .toast-c{top:calc(12px + env(safe-area-inset-top, 0px));bottom:auto;left:50%;right:auto;transform:translateX(-50%);align-items:center;width:max-content;max-width:calc(100vw - 24px)}
body:not([data-view="dashboard"]) .install-nudge,
body:has(#modal-ov.open) .install-nudge{display:none}
/* the update pill: the top bar's own shape (the Live chip's height and radius), accent-tinted */
.ver-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:20px;flex:none;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:700;white-space:nowrap;color:var(--accent-tx);
  background:color-mix(in srgb,var(--accent) 13%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border))}
.ver-pill:hover{border-color:var(--accent)}
.ver-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ver-pill:disabled{cursor:default;opacity:.7}
.ver-pill-ic{display:inline-flex;line-height:0}
.ver-pill.busy .ver-pill-ic{animation:spin 1s linear infinite}
/* on a phone the bar has room for the glyph only; the label stays for a screen reader */
@media(max-width:768px){.ver-pill{width:32px;height:32px;padding:0;justify-content:center}
  .ver-pill-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.toast{background:var(--t1);color:var(--card);padding:11px 14px;border-radius:10px;font-size:12px;font-weight:500;box-shadow:var(--shlg);display:flex;align-items:center;gap:9px;max-width:300px;animation:tin .25s ease}
/* a long message squeezed its icon to a dot (seen 2026-10-19 on a three-line warning): the icon keeps its size */
.toast>svg{flex-shrink:0}
:root[data-theme="dark"] .toast{background:#e2e8f0;color:#0f172a}
@keyframes tin{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.toast.success{border-left:3px solid var(--accent)}.toast.error{border-left:3px solid var(--danger)}.toast.warning{border-left:3px solid var(--warn)}
.empty{text-align:center;padding:50px 20px;color:var(--t2)}
.empty h3{font-size:15px;font-weight:600;color:var(--t1);margin-bottom:5px}.empty p{font-size:12px;margin-bottom:16px}
.no-res{padding:32px;text-align:center;color:var(--t3);font-size:12px}
/* Q117 — the one empty state. .cf-mgr-empty (Q126) and .tr-empty (Q133) were
   already two near-copies of this block; they are folded in here so a third
   list cannot invent a fourth look. Colour is --t2, not --t3: an empty state
   is the only thing on screen when it shows, so it must not be the faintest
   thing on screen. */
.es,.cf-mgr-empty,.tr-empty{text-align:center;padding:28px 14px;color:var(--t2)}
.es>svg,.cf-mgr-empty>svg,.tr-empty>svg{color:var(--t3);opacity:.85}
.es h4,.cf-mgr-empty h4,.tr-empty h4{font-size:14px;font-weight:700;color:var(--t1);margin:10px 0 6px}
.es p,.cf-mgr-empty p,.tr-empty p{font-size:12px;line-height:1.6;max-width:430px;margin:0 auto}
.es-cta{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* A CTA is the whole point of an empty state, so it has to be hittable. The
   shared btn-xs is 23px tall — fine beside a table row on a desktop, under
   half the 44px a thumb needs. Comfortable everywhere, 44px on a phone. */
.es-cta .btn{min-height:32px}
@media (max-width:640px){.es-cta{gap:10px}.es-cta .btn{min-height:44px;padding:0 16px;font-size:12px}}
/* A table's empty state must not look like a data row. */
.es-tr:hover{background:transparent}
.es-tr>td{padding:0!important;border-bottom:0}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.stat-box{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);padding:14px;text-align:center}
.stat-box .v{font-size:22px;font-weight:800;color:var(--t1)}
.stat-box .l{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.pay-item{display:flex;align-items:center;padding:10px 18px;border-bottom:1px solid var(--border);gap:10px;font-size:12px}
.pay-item:last-child{border-bottom:none}
.pay-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;flex-shrink:0}
.pay-name{flex:1;font-weight:500}.pay-date{color:var(--t2)}.pay-amt{font-weight:700;color:var(--accent)}
.divider{height:1px;background:var(--border);margin:16px 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mrr-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;background:#d1fae5;color:#065f46;font-size:11px;font-weight:700}
.proj-row{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);gap:12px;font-size:12px;cursor:pointer}
.proj-row:hover{background:var(--hover)}
/* PROGRESS BAR */
.goal-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);padding:18px;box-shadow:var(--sh);margin-bottom:16px}
.goal-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.goal-top .l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t2)}
.goal-top .v{font-size:13px;font-weight:700}
.goal-bar{height:12px;background:var(--bg);border-radius:20px;overflow:hidden}
.goal-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:20px;transition:width .6s ease}
/* Q177 — GOALS v2. Tiles reuse existing measured pastel chips (.badge.b-active
   / .b-med) for the pace indicator, so nothing new lands on Q122's flip list.
   The pace MARK is decorative (a "where you should be now" tick) — the tile
   prints its own number in the same row, so it carries no meaning of its own. */
.goals2{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);padding:16px 18px;box-shadow:var(--sh);margin-bottom:16px}
.goals2-ch{border:0;padding:0;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.goals2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.goals2-grid+.goals2-grid{margin-top:12px}
.goal2{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;min-width:0}
.goal2-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.goal2-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal2-pace{flex:none;font-size:10px}
.goal2-v{font-size:17px;font-weight:800;color:var(--t1);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal2-v small{font-size:12px;font-weight:600;color:var(--t3)}
.goal2-v.muted{color:var(--t3);font-size:15px}
.goal2-bar{position:relative;height:10px;background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;margin-bottom:7px}
.goal2-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:20px;transition:width .6s ease}
.goal2-fill.behind{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.goal2-mark{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--t2);opacity:.55;z-index:1}
.goal2-sub{font-size:11px;color:var(--t3);line-height:1.4;overflow-wrap:anywhere}
.goal2-sub a{color:var(--accent);font-weight:600;text-decoration:none}
.goal2-unset .goal2-bar{opacity:.5}
.goals2-note{font-size:11px;color:var(--t3);line-height:1.5;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.goals2-note code,.goal2-sub code{font-size:10px;background:var(--bg);padding:1px 5px;border-radius:4px}
/* ALERT CARD */
.alert-card{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);border-radius:var(--rlg);padding:16px 18px;margin-bottom:16px}
/* #92400e, not the #b45309 the deal list uses: this heading does not sit on a
   card, it sits on the alert card's own amber tint, where #b45309 measures
   4.11:1. #92400e measures 5.87 there. Same reasoning as .dl-soon, different
   backdrop, therefore a different answer. */
.alert-card h4{font-size:13px;font-weight:700;color:#92400e;margin-bottom:10px;display:flex;align-items:center;gap:6px}
:root[data-theme="dark"] .alert-card h4{color:#fcd34d}
.alert-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(245,158,11,.2);font-size:12px}
.alert-item .n{flex:1;font-weight:600}
/* var(--danger) measured 3.08:1 on this tint — the worst text ratio in the app
   outside the gated brand green. See the single-red block near the end. */
.alert-item .d{color:#b91c1c;font-weight:600;font-size:11px}
:root[data-theme="dark"] .alert-item .d{color:#fca5a5}
/* SKELETON */
.skeleton{background:linear-gradient(90deg,var(--border) 25%,var(--hover) 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-kpi{height:96px;border-radius:var(--rlg)}
/* Q117 — a row-shaped skeleton, so a loading list looks like a list. */
.sk-list{padding:6px 0}
.sk-row{display:flex;align-items:center;gap:12px;padding:12px 20px}
.sk-av{width:34px;height:34px;border-radius:50%;flex:none}
.sk-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.sk-l1{height:11px;width:42%;border-radius:5px}
.sk-l2{height:9px;width:26%;border-radius:5px}
@media (max-width:640px){.sk-row{padding:12px 14px}.sk-l1{width:60%}.sk-l2{width:38%}}
/* A shimmer that never stops is noise, and it is motion nobody asked for. */
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}
/* FAB — PW-6: DESKTOP ONLY. The phone's create verb is the bottom nav's
   centre +, which opens the whole newMenuItems() registry; the FAB opened
   quick-note alone. Two create buttons a thumb apart, pointing at different
   things, is a choice the owner should never have to make. */
.fab{position:fixed;right:24px;bottom:24px;width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--on-solid);border:none;box-shadow:var(--shlg);font-size:26px;cursor:pointer;z-index:150;display:flex;align-items:center;justify-content:center;transition:transform .15s}
@media(max-width:768px){.fab{display:none}}
.fab:hover{transform:scale(1.08);background:var(--accent2)}
/* BOTTOM NAV — PW-6, five slots (contract §7 note 12) */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:calc(60px + env(safe-area-inset-bottom));background:var(--sb);border-top:1px solid rgba(255,255,255,.1);padding-bottom:env(safe-area-inset-bottom);z-index:200}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(255,255,255,.62);font-size:10px;gap:3px;cursor:pointer;padding:8px;transition:color .15s;position:relative;-webkit-tap-highlight-color:transparent}
/* THE BAR MUST NEVER OVERFLOW, whatever the phone's text size (2026-09-19).
   Abdul's Samsung showed the bottom nav missing an item. Measured on the live
   app in Chrome 153 (the same engine his installed app reports): at default
   text every slot renders, but under Android's large-text settings the bar
   overflows, because a flex item's default min-width is its CONTENT width and
   a label grows with the phone's text scale while icons do not. At 1.6x text
   on a 320px screen, More was pushed off the right edge; at 2.0x, Calendar
   followed it. "Calendar" is the longest label, so it is always the first to
   widen (63px at every width, while the others shrank to 48px).
   min-width:0 lets each slot take its fair share instead of its label's width,
   and the label truncates inside its own slot, so five slots always fit and
   every icon stays tappable. NOT overflow:hidden on .bn-item: the centre plus
   pops 14px above the bar (margin-top:-14px) and would be clipped. */
.bn-item{min-width:0}
.bn-l{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn-item.active{color:var(--accent)}
.bn-item svg{width:22px;height:22px}
.bn-badge{position:absolute;top:6px;right:calc(50% - 20px);background:var(--danger);color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:8px;min-width:13px;text-align:center}
/* the dot on More: a drawer over many destinations can not honestly carry a
   number, only the fact that something behind it wants you */
.bn-dot{position:absolute;top:9px;right:calc(50% - 13px);width:7px;height:7px;border-radius:50%;background:var(--danger)}
/* the raised centre +: lifted out of the bar so the thumb finds it without
   looking, and never coloured by .active — creating is not a destination */
.bn-new{flex:0 0 64px}
.bn-plus{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-solid);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 42%,transparent);margin-top:-14px;transition:transform .12s}
.bn-new:active .bn-plus{transform:scale(.93)}
.bn-plus svg{width:21px;height:21px}
/* SHEETS */
.sheet-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:210;display:none}
.sheet-ov.open{display:block}
.sheet{position:fixed;left:0;right:0;bottom:-100%;background:var(--card);border-radius:18px 18px 0 0;z-index:220;padding:20px 20px calc(20px + env(safe-area-inset-bottom));transition:bottom .28s ease;box-shadow:var(--shlg);max-height:78vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet.open{bottom:0}
.sheet-handle{width:40px;height:4px;background:var(--border);border-radius:4px;margin:0 auto 16px}
.sheet-item{display:flex;align-items:center;gap:12px;padding:14px 8px;border-bottom:1px solid var(--border);font-size:14px;font-weight:500;cursor:pointer;color:var(--t1)}
.sheet-item:last-child{border-bottom:none}
.sheet-item svg{width:20px;height:20px;color:var(--t2);flex:none}
.sheet-item:active{background:var(--hover)}
/* PW-6 — the group labels that make the drawer teach the same map as the
   sidebar, and the live count beside a destination that has one. The label
   selector is `>span` deliberately: an unqualified `span` would also claim
   any span an item's icon happens to be wrapped in (the v232 scar). */
.sheet-item>span{flex:1;min-width:0}
.sheet-item>span i{display:block;font-style:normal;font-size:11.5px;font-weight:400;color:var(--t3);margin-top:1px}
.sheet-n{margin-left:auto;font-size:11px;font-weight:800;color:#fff;background:var(--danger);border-radius:9px;padding:1px 7px;flex:none}
.sheet-lbl{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);padding:14px 8px 4px}
.sheet-handle+.sheet-lbl{padding-top:2px}
.sheet-sep{height:1px;background:var(--border);margin:10px 0 2px}
/* Q171 — swipe actions. The row follows the finger during a drag (set inline,
   no transition) and eases back on release via .sw-snap. The sheet reuses the
   .sheet primitive; its header names the row, danger tints Delete, ok tints a
   positive Done. */
.sw-snap{transition:transform .2s ease!important}
.sw-sheet{max-height:80vh;overflow-y:auto}
.sw-sheet-hd{font-weight:700;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--t3);padding:0 8px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-sheet .sheet-item.sw-danger{color:#ef4444}
.sw-sheet .sheet-item.sw-danger svg{color:#ef4444}
.sw-sheet .sheet-item.sw-ok svg{color:var(--accent)}
/* Q172 — communication affordances. A phone/email renders as a tel:/mailto:
   link with a copy button; on a coarse pointer, callout/selection is suppressed
   so a long-press opens our own menu instead of the OS text callout. */
.comm{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.comm-lnk{color:var(--accent);text-decoration:none;overflow-wrap:anywhere}
.comm-lnk:hover{text-decoration:underline}
/* THE PHONE NUMBER IS A BUTTON NOW (2026-10-03): it starts a call through our own number instead of
   navigating to tel:. A button brings a browser border, background and 13px font of its own, so on the
   first 375 capture it rendered as a boxed control beside the plain email address. Read off the picture;
   22 passing checks had no reason to ask. It is a link to the eye and a button to the keyboard.
   The padding with an equal negative margin gives a thumb something to hit (the bare text line is 15px,
   fine to read and small to tap) without moving the number a pixel off the email's alignment, and
   inline-block is load-bearing, because vertical padding does not grow an INLINE box. */
button.comm-lnk{appearance:none;-webkit-appearance:none;background:none;border:0;margin:-6px 0;
  padding:6px 0;display:inline-block;vertical-align:baseline;
  font:var(--ff);line-height:inherit;text-align:left;cursor:pointer}
button.comm-lnk:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.comm-copy{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:transparent;color:var(--t3);border-radius:6px;cursor:pointer;flex-shrink:0;opacity:.6;transition:opacity .12s,background .12s,color .12s}
.comm-copy:hover{opacity:1;background:var(--hover);color:var(--t1)}
.comm-copy svg{width:13px;height:13px}
@media (pointer:coarse){.comm{-webkit-touch-callout:none;user-select:none}.comm-copy{opacity:1;min-width:32px;min-height:32px;width:32px;height:32px}}
/* Q173 — share-to-CRM capture modal: the contact search results + the chosen
   contact confirmation. */
.share-results{margin-top:6px;display:flex;flex-direction:column;border-radius:8px;overflow:hidden}
.share-hit{display:flex;align-items:baseline;gap:8px;padding:9px 11px;cursor:pointer;border-bottom:1px solid var(--border);font-size:13px}
.share-hit:last-child{border-bottom:none}
.share-hit:hover{background:var(--hover)}
.share-co{color:var(--t3);font-size:11px}
.share-none{padding:9px 11px;font-size:12px;color:var(--t3)}
.share-sel{display:flex;align-items:center;gap:6px;margin-top:8px;padding:8px 11px;border-radius:8px;background:var(--hover);font-size:12px;color:var(--t2)}
.share-sel b{color:var(--t1)}
/* ENGAGEMENT LETTER BUILDER */
.wizard-steps{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.wstep{flex:1;min-width:90px;text-align:center;padding:8px;border-radius:8px;font-size:11px;font-weight:600;background:var(--bg);color:var(--t3);border:1px solid var(--border)}
.wstep.active{background:var(--accent);color:var(--on-solid);border-color:var(--accent)}
.wstep.done{background:#d1fae5;color:#065f46}
.svc-pick{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px}
.svc-pick input[type=checkbox]{width:16px;height:16px}
.svc-pick .nm{flex:1;font-size:12px;font-weight:600}
.svc-pick input[type=number]{width:100px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--input);color:var(--t1)}
.el-doc{background:#fff;color:#0f172a;border-radius:8px;padding:40px;max-width:680px;margin:0 auto;box-shadow:var(--sh);font-size:13px;line-height:1.6}
.el-head{border-bottom:3px solid var(--accent);padding-bottom:16px;margin-bottom:20px}
.el-head h1{font-size:22px;font-weight:800;color:#1e2a3a}.el-head h1 span{color:var(--accent)}
.el-head p{font-size:11px;color:#64748b;margin-top:2px}
.el-title{font-size:16px;font-weight:800;letter-spacing:.5px;margin:18px 0 4px;text-transform:uppercase}
.el-doc table{width:100%;border-collapse:collapse;margin:12px 0}
.el-doc th{background:#f1f5f9;color:#334155;padding:8px 10px;text-align:left;font-size:11px;border:1px solid #e2e8f0}
.el-doc td{padding:8px 10px;border:1px solid #e2e8f0;font-size:12px;color:#0f172a}
.el-section{margin:16px 0}.el-section h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#1e2a3a;margin-bottom:6px;border-bottom:1px solid #e2e8f0;padding-bottom:4px}
.el-sign{display:flex;justify-content:space-between;margin-top:40px;gap:40px}
.el-sign .box{flex:1}.el-sign .line{border-top:1px solid #0f172a;margin-top:40px;padding-top:6px;font-size:11px;color:#64748b}
kbd{background:var(--bg);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:2px 7px;font-size:11px;font-family:inherit;font-weight:600}
.ks-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ks-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:6px 0}
/* RESPONSIVE */
@media (max-width:768px){
  .bottom-nav{display:flex}
  #sb{display:none}
  #main{margin-left:0;max-width:100vw;padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  #ghead{padding:10px 14px}
  .head-actions .btn span{display:none}
  .head-actions .btn-hide-mobile{display:none}
  .pc{padding:16px 14px}
  /* PW-6 — EVERY page header, not one of them. `.ph` is one flex row with
     the title on the left and its verbs on the right; at 390 the verbs have
     nowhere to go, so they shrank into each other and stacked at ragged
     offsets (measured on Engagements: "Letters" floating over the title).
     `flex:none` on the actions is what makes them WRAP to their own line
     instead of shrinking — a wrap container still shrinks its items first
     unless you forbid it. */
  .ph{padding:14px;flex-wrap:wrap;align-items:flex-start;row-gap:10px}
  .ph-actions{flex:none;flex-wrap:wrap;max-width:100%}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .dg{grid-template-columns:1fr}
  .kb{grid-template-columns:1fr;gap:12px}
  .svc-grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr 1fr 1fr}
  .fg{grid-template-columns:1fr}
  table{font-size:13px}
  .hide-mobile{display:none}
  /* Mobile font size overrides — everything readable */
  body{font-size:15px}
  .btn{font-size:13px;padding:9px 14px}
  .btn-sm{font-size:12px;padding:6px 12px}
  .btn-xs{font-size:11px;padding:4px 9px}
  td{font-size:13px;padding:10px 10px}
  th{font-size:12px}
  .kpi-val{font-size:22px}
  .kpi-lbl{font-size:12px}
  .kpi-sub{font-size:12px}
  .ni{font-size:14px}
  .ct{font-size:14px}
  .kcard-name{font-size:13px}
  .kcard-co{font-size:12px}
  .af-title{font-size:13px}
  .bn-item{font-size:11px}
  input,select,textarea{font-size:16px!important}
}
@media print{#sb,#ghead,.bottom-nav,.fab,.ph-actions{display:none!important}#main{margin:0}}

/* ============================================================
   THEME: Twisty (was <style id="theme-twisty">) — layered on top of BASE
   ============================================================ */
/* ============ TWISTY-INSPIRED PREMIUM THEME (overrides) ============ */
:root{
  --bg:#eceef4;--card:#ffffff;--hover:#f5f6fa;--input:#f6f7fb;--border:#eaecf2;
  --t1:#0d1526;--t2:#5a6478;--t3:#626875;
  /* Q15 took --t3 from #9aa2b4 (2.56:1 on card / 2.21:1 on bg) to #676d79.
     Q122 MEASURED it rather than trusting the arithmetic and found #676d79
     lands on 4.48:1 against --bg and 4.25:1 against the warm .alert-card tint
     — two hundredths and a quarter of a point BELOW AA, on six elements
     (.bl-day, .crumb-sep, .ck-fact-l, .ck-fact-s, .c360-lbl, .c360-sub, and
     the alert card's own sub-line). #626875 measures 4.82 on --bg and 4.63 on
     the alert tint while staying visibly lighter than --t2 (#5a6478), so the
     three-step text hierarchy survives. One token, six fixes. */
  --accent:#10b981;--accent2:#0e9f6e;--ink:#0d1526;
  --sh:0 1px 2px rgba(16,24,40,.03),0 4px 16px rgba(16,24,40,.05);
  --shmd:0 8px 28px rgba(16,24,40,.08);--shlg:0 24px 56px rgba(16,24,40,.16);
  --r:14px;--rlg:22px;--sbw:250px;
}
:root[data-theme="dark"]{
  --bg:#0b1120;--card:#131b2e;--hover:#1a2438;--input:#1a2438;--border:#26304a;
  --t1:#e7ebf3;--t2:#9aa4bb;--t3:#828ca4;
  /* Q15 fixed --t3 against --card and --bg. Q122 measured it against the two
     TINTED surfaces nobody checked: --hover (the scan bar) at 4.14:1 and the
     overdue task row at 4.36:1, both below AA. #828ca4 measures 4.61 and 4.88
     there and stays clearly separate from --t2 (#9aa4bb). */
}
body{background:var(--bg)}
/* Sidebar → light & airy */
#sb{background:var(--card);border-right:1px solid var(--border)}
.sb-logo{border-bottom:1px solid var(--border)}
.sb-logo h1{color:var(--t1)}
/* the "CRM" half of the wordmark is TEXT on the card, so it takes the text token of the accent triad, not the fill.
   When the sidebar moved onto --card the name took --t1 and this half kept the fill green: 2.54:1 on the light
   sidebar, under the floor the rest of this file is held to. identity-live.cjs had been saying so and nothing ran
   it (lean audit finding 36). */
.sb-logo h1 span{color:var(--accent-tx)}
.sb-logo p{color:var(--t3)}
.sb-user{border-bottom:1px solid var(--border)}
.sb-user-info p{color:var(--t1)}
.sb-user-info span{color:var(--t3)}
.nav-lbl{color:var(--t3);opacity:.8}
.ni{color:var(--t2);border-radius:11px;padding:10px 12px}
.ni:hover{background:var(--hover);color:var(--t1)}
/* --accent-tx, the green FOR TEXT (2026-09-26): --accent2 on the mint tint measured 3.39:1 on the active item, under
   the 4.5 its 13px text needs (sidebar contrast sweep, identity wave). The token exists for exactly this. */
.ni.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-tx);font-weight:600}
.ni.active svg{color:var(--accent-tx)}
/* the Client Portals door (2026-09-10): a count, a chevron, and the list one level in */
.ni-count{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--t3)}
.ni-chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);opacity:.55;margin:0 2px 0 6px;transition:transform .15s}
#ni-portals.open .ni-chev{transform:rotate(45deg)}
.ni-sub{display:flex;flex-direction:column;gap:1px;margin:0 0 4px 17px;padding-left:10px;border-left:1px solid var(--border)}
.ni-sub:empty{display:none}
.ni-sub-i{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:12.5px;color:var(--t2);cursor:pointer;min-width:0}
.ni-sub-i:hover{background:var(--hover);color:var(--t1)}
.ni-sub-i.off{opacity:.62}
.ni-sub-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--t3)}
.ni-dot.b-active{background:var(--acc,#10b981)}
.ni-dot.b-viewed,.ni-dot.b-expired{background:#f59e0b}
.ni-dot.b-draft,.ni-dot.b-inactive{background:var(--t3)}
body.nav-slim .ni-sub,body.nav-slim .ni-count,body.nav-slim .ni-chev{display:none}
.sheet-sublbl{display:flex;align-items:center;gap:6px}
.sheet-portals-h{cursor:pointer;min-height:36px}
.sheet-portals-h .sheet-portals-n{margin-left:auto;font-size:10px;font-weight:700;color:var(--t3)}
.sheet-portals-h.open .ni-chev{transform:rotate(45deg)}
.sheet-item.sheet-portal{padding-left:30px;font-size:14px}
.sb-footer{border-top:1px solid var(--border)}
.sb-footer p{color:var(--t3)}
.sb-nav .ni svg{opacity:.9}
/* Header → clean, borderless, floating */
#ghead{background:var(--bg);border-bottom:none;box-shadow:none;padding:18px 30px}
.gsearch input{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh);padding-top:10px;padding-bottom:10px}
.live-dot{border-radius:20px;background:var(--card);box-shadow:var(--sh)}
/* Buttons → pill, soft */
/* THE NEW PAGES' SHAPE (Abdul, 2026-10-15: "keep the buttons and new styling" / "but branding and color remains same"
   / "across eveything", then his pick: the look of the new call and meeting pages). Buttons and chips are fully
   rounded, as they are there; every colour, size and place stays as it was. */
.btn{border-radius:99px;font-weight:600}
.btn-primary{box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn-ghost{background:var(--card);box-shadow:var(--sh)}
.btn-icon{background:var(--card);box-shadow:var(--sh);border-radius:99px}
/* Cards → big radius, soft shadow, no harsh border */
.card,.tbl-wrap,.kpi,.svc-card,.stat-box,.goal-wrap,.funnel-seg,.alert-card{
  border-radius:var(--rlg);box-shadow:var(--sh);border:1px solid var(--border)}
.ph{background:transparent;border-bottom:none;padding:8px 30px 4px}
.ph h2{font-size:24px;letter-spacing:-.5px}
.pc{padding:12px 30px 30px}
/* THE ROUND + NEEDS ITS CORNER (2026-09-21). The Quick note button floats 24px above the bottom and is 54px tall, and a
   page ended 30px above the bottom, so at its resting bottom the last control on the right sat under it: the Books
   card's "Try again" on Billing at 820px, found by reach-live's fabSweep (box overlap, not a centre point). Wherever
   the button shows, the page's own bottom padding clears it. (Contacts and the Inbox hide it; phones hide it.) */
@media(min-width:769px){body:not([data-view="contacts"]):not([data-view="comms"]) .pc{padding-bottom:96px}}
/* The same button also needs a LANE down the right edge on a page that scrolls, which is a rule per
   board rather than a global one: see ".pln-card .cb" in the money board's styles below. */
.ch{border-bottom:1px solid var(--border);padding:16px 20px}
.cb{padding:20px}
.kpi{padding:20px 22px}
.kpi-val{font-size:30px;letter-spacing:-1px}
.kpi-icon{border-radius:13px}
th{background:transparent;border-bottom:1px solid var(--border)}
td{border-bottom:1px solid var(--border)}
/* A TABLE WIDER THAN ITS CARD SCROLLS SIDEWAYS, AT EVERY WIDTH (2026-09-20). It only did under the
   768px phone rule. Between 769px and a full desktop the sidebar is still 250px wide, so on a tablet
   or a half-width window the contacts table (612px) sat in a 510px card that HID the overflow: the
   last columns and every row's Actions button were cut off with no way to reach them. overflow-y
   stays hidden so the rounded corners still clip. Found by clipSweep in tools/reach-live.cjs. */
.tbl-wrap{overflow-x:auto;overflow-y:hidden}
/* AND NOW THAT IT CAN SCROLL, IT MUST STOP CRUSHING. td{overflow-wrap:anywhere} lets a cell shrink below its
   longest word, so in the band where the table used to be cut off the cells broke mid-word instead:
   "dana@no / rthlandwi / ne.ca", "Northlan / d Wine" (seen in a capture, 2026-09-20). break-word keeps the
   longest word whole, the table takes the width it needs, and the card scrolls sideways. Phones keep
   `anywhere`: there the contact list is a card layout and a wide table has nowhere to go.
   EVERY table, not only .tbl-wrap: the sweep that found this (wordSplitSweep in tools/_live.cjs) found the same
   thing on Billing ("e-Transfer" printed one letter per line in a 35px cell) and on Reports. */
/* (the rule itself sits beside the old `td` rule under RESPONSIVE / MOBILE: the two tie on specificity, so the
   later one wins, and written up here it lost to the rule it was meant to replace) */
/* THE BAND NOBODY DESIGNED FOR: 769 to 1000px keeps the 250px sidebar, so the page has about 570px, and a
   two-column grid in it leaves one column 174px wide (Billing's left column, Reports' paired cards). Below
   768 these already stack; they stack here too. Scoped to #main so a two-column form in a dialog keeps its
   columns: a dialog's width does not depend on the sidebar. */
@media(min-width:769px) and (max-width:1000px){#main .dg,#main .two-col{grid-template-columns:minmax(0,1fr)!important}}   /* !important for the same reason the phone rule carries it: Billing sets its columns inline */
/* Badges → softer pill */
.badge{border-radius:99px;padding:4px 9px}
/* Modal/drawer rounding */
.modal{border-radius:24px}.drw{border-radius:22px 0 0 22px}
.mh,.mf{border-color:var(--border)}
/* PW-8 — this line used to say `background:var(--input)`, which sits LATER
   in the file than the base rule and therefore silently undid the field
   standard applied there. The theme layer keeps the rounding it wanted and
   defers on the fill; the focus state is the base rule's. A later block
   quietly reverting an earlier one is how a restyle "does not take". */
.fl input,.fl select,.fl textarea{border-radius:10px}
.fl input:focus,.fl select:focus,.fl textarea:focus{background:var(--card)}
/* KPI hero (first card) accent.
   THE ONE FILL THAT KEEPS WHITE, and it had to move instead. A gradient is only as readable as
   its worst stop, and this one ran from #0f766e (white: 5.47) to #10b981 (white: 2.54), so white
   failed at one end. Dark ink does not rescue it either: #031a13 measures 3.3 against the dark
   end, so NO single ink passes across a gradient that wide. The stops move to #0d5c52 -> #03674a,
   which is the same hue family two steps deeper and puts white at 6.9:1 at its worst point. */
.kpi-grid .kpi:first-child{background:linear-gradient(135deg,#0d5c52,#03674a);border:none;color:#fff}
.kpi-grid .kpi:first-child .kpi-lbl,.kpi-grid .kpi:first-child .kpi-val,.kpi-grid .kpi:first-child .kpi-sub,.kpi-grid .kpi:first-child .kpi-n,.kpi-grid .kpi:first-child .kpi-l{color:#fff}
.wb-chip.fail{color:var(--warn);border-color:var(--warn);opacity:.95}
.wb-chip.act{color:var(--t1);border-color:var(--accent)}
.wb-spin.sm{width:9px;height:9px;border-width:1.5px;display:inline-block;vertical-align:-1px;margin-right:2px}
.kpi-grid .kpi:first-child .kpi-icon{background:rgba(255,255,255,.22);color:#fff}
.kpi-grid .kpi:first-child .kpi-sub span{opacity:.85!important}
/* ===== INCOME TRACKER ===== */
.inc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);box-shadow:var(--sh);padding:24px}
.inc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.inc-title{font-size:20px;font-weight:800;letter-spacing:-.4px;display:flex;align-items:center;gap:8px}
.inc-sub{font-size:12px;color:var(--t2);margin-top:4px;max-width:340px;line-height:1.5}
.inc-pct{font-size:34px;font-weight:800;letter-spacing:-1px;margin-top:8px}
.inc-pct small{display:block;font-size:11px;font-weight:500;color:var(--t2);letter-spacing:0}
.inc-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:10px}
.inc-col{flex:1;display:flex;flex-direction:column;align-items:center}
.inc-track{position:relative;width:3px;height:150px;background:var(--border);border-radius:3px}
.inc-dot{position:absolute;left:50%;transform:translate(-50%,50%);width:13px;height:13px;border-radius:50%;background:#c7cede;box-shadow:0 0 0 4px var(--card)}
.inc-col.active .inc-track{background:linear-gradient(var(--ink),var(--border))}
.inc-col.active .inc-dot{background:var(--ink);width:15px;height:15px}
.inc-bubble{position:absolute;top:-30px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:9px;white-space:nowrap}
.inc-bubble::after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--ink)}
.inc-day{margin-top:14px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--t2);background:var(--hover)}
.inc-col.active .inc-day{background:var(--ink);color:#fff}
/* ===== RECENT PROJECTS ===== */
.rp-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer}
.rp-item:last-child{border-bottom:none}
.rp-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.rp-nm{font-size:13px;font-weight:600}.rp-sub{font-size:11px;color:var(--t3);margin-top:1px}
/* ===== CALENDAR (Google-style) ===== */
.cal-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cal-grid{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);overflow:hidden;box-shadow:var(--sh)}
.cal-head{display:grid;grid-template-columns:56px repeat(7,1fr);border-bottom:1px solid var(--border)}
.cal-hcell{padding:10px 6px;text-align:center;font-size:11px;color:var(--t2);border-left:1px solid var(--border)}
.cal-hcell .dnum{font-size:20px;font-weight:700;color:var(--t1);margin-top:2px}
.cal-hcell.today .dnum{background:var(--accent);color:var(--on-solid);width:34px;height:34px;line-height:34px;border-radius:50%;margin:2px auto 0}
.cal-body{display:grid;grid-template-columns:56px repeat(7,1fr);max-height:560px;overflow-y:auto}
.cal-times{display:flex;flex-direction:column}
.cal-time{height:52px;font-size:10px;color:var(--t3);text-align:right;padding:2px 6px 0 0;border-top:1px solid var(--border)}
.cal-col{border-left:1px solid var(--border);position:relative}
.cal-slot{height:52px;border-top:1px solid var(--border)}
.cal-ev{position:absolute;left:3px;right:3px;border-radius:7px;padding:4px 7px;font-size:11px;color:#fff;overflow:hidden;box-shadow:var(--sh);cursor:pointer}
.cal-ev .t{font-weight:700}.cal-ev .s{opacity:.9;font-size:10px}
/* ===== MODULES toggles ===== */
.mod-row{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border)}
.mod-row:last-child{border-bottom:none}
.mod-ic{width:38px;height:38px;border-radius:11px;background:var(--hover);display:flex;align-items:center;justify-content:center;font-size:16px}
.mod-info{flex:1}.mod-info h4{font-size:13px;font-weight:600}.mod-info p{font-size:11px;color:var(--t3);margin-top:1px}
.tgl{width:44px;height:25px;border-radius:20px;background:var(--border);position:relative;cursor:pointer;transition:background .18s;flex-shrink:0}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .18s}
.tgl.on{background:var(--accent)}.tgl.on::after{left:22px}
.mod-locked{opacity:.5}
/* Settings > Modules, the owner's switchboard (js/modules.js, 2026-09-28). The switch is a real <button role="switch">
   so it works from the keyboard; .tgl was drawn for a div, so the button's own border, padding and look are reset. */
.mod-row .tgl{border:none;padding:0;appearance:none;-webkit-appearance:none}
.mod-row .tgl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mod-row .tgl:disabled{cursor:not-allowed;opacity:.55}
.mod-info{min-width:0}
.mod-info .mod-need{font-size:11px;color:var(--t3);margin-top:3px}
/* Settings > Notifications: quiet hours for texts to clients (2026-10-22), the calendar editor's time field look */
.cmsg-q{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.cmsg-q label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t2)}
/* width auto: a phone sets every field to 16px (no zoom on focus) and a fixed 118px cut "09:00 PM" to "09:00 P";
   color-scheme follows the theme so the clock glyph is not dark on a dark field (the .bks-date rule) */
.cmsg-q input[type=time]{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13px;color:var(--t1);width:auto;min-width:118px;min-height:36px;color-scheme:light}
:root[data-theme="dark"] .cmsg-q input[type=time]{color-scheme:dark}
.cmsg-q input[type=time]:focus{outline:none;border-color:var(--accent);background:var(--card)}
.cmsg-q input[type=time]:disabled{opacity:.6;cursor:not-allowed}
.mod-state{font-size:11px;font-weight:600;color:var(--t3);white-space:nowrap;flex-shrink:0}
.mod-off .mod-ic{opacity:.55}
.mod-off .mod-info h4{color:var(--t2)}
/* CARD-SCAN BAR (inside contact modal) */
.scanbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--hover);border:1px dashed var(--border);border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:13px}
/* BULK CARD REVIEW */
.bulk-card{border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px;display:flex;gap:10px;align-items:center;background:var(--card)}
.bulk-card .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
.bulk-card input{padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--input);color:var(--t1);font-size:12px;width:100%}
.bulk-card input:focus{border-color:var(--accent);outline:none}
@media(max-width:768px){.bulk-card .grid{grid-template-columns:1fr}}
/* Section labels + duplicate banner */
.sec-lbl{grid-column:1/-1;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--t3);margin:8px 0 -4px;padding-top:12px;border-top:1px solid var(--border)}
.fg > .sec-lbl:first-child{border-top:none;padding-top:0;margin-top:0}
.dup-banner{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);border-radius:10px;padding:10px 12px;font-size:12px;color:#92400e;margin-bottom:14px}
:root[data-theme="dark"] .dup-banner{color:#fbbf24}
/* Bulk accordion cards */
.bulk-item{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;background:var(--card);overflow:hidden}
.bulk-item.skip{opacity:.55}
.bulk-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
.bulk-head:hover{background:var(--hover)}
.bulk-chev{width:14px;color:var(--t3);font-size:12px;flex-shrink:0}
.bulk-title{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bulk-body{padding:2px 14px 14px}
.bulk-body .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:768px){.bulk-body .grid{grid-template-columns:1fr}}
/* SERVICE / INTEREST PILLS */
.svc-pillbox{display:flex;flex-wrap:wrap;gap:7px}
.svc-pill{padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;user-select:none;transition:all .12s}
.svc-pill:hover{border-color:var(--accent);color:var(--t1)}
.svc-pill.sel{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
/* COMMUNICATION CENTER */
.comms-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.comms-tab{padding:10px 16px;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.comms-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.mail-row{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--border);cursor:pointer}
.mail-row:last-child{border-bottom:none}.mail-row:hover{background:var(--hover)}
.mail-row.unread .mail-from,.mail-row.unread .mail-subj{font-weight:700}
.mail-from{width:190px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-subj{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1)}
.mail-date{font-size:11px;color:var(--t3);white-space:nowrap}
.mail-open{white-space:nowrap}
.mail-row.nolink{cursor:default}
.mail-sub2{font-size:10px;color:var(--t3);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* From identities (Q5b) */
.ms-lbl{display:block;font-size:11px;font-weight:600;color:var(--t2);margin-bottom:8px}
.id-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.id-row input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;font-family:inherit;color:var(--t1);background:var(--input);outline:none}
.id-row input:focus{border-color:var(--accent)}
.id-def{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;padding:0 2px}
.sub-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sub-tab{border:1px solid var(--border);background:var(--card);color:var(--t2);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.sub-tab:hover{border-color:var(--accent);color:var(--t1)}
.sub-tab.active{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
.sub-count{background:rgba(255,255,255,.25);border-radius:10px;padding:0 6px;font-size:10px;font-weight:700}
.sub-tab:not(.active) .sub-count{background:var(--hover);color:var(--t2)}
.open-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--hover);color:var(--t3);white-space:nowrap}
.open-badge.opened{background:#d1fae5;color:#065f46}
:root[data-theme="dark"] .open-badge.opened{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-tx)}
.open-badge.untracked{opacity:.65}
/* bulk compose */
.chips{display:flex;flex-wrap:wrap;gap:6px;max-height:132px;overflow-y:auto;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--input)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--hover);border:1px solid var(--border);border-radius:20px;padding:4px 6px 4px 10px;font-size:11px;font-weight:600;color:var(--t1);max-width:100%}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip button{border:none;background:transparent;color:var(--t3);cursor:pointer;line-height:1;padding:0 2px;font-family:inherit;display:inline-flex}
.chip button:hover{color:var(--danger)}
.mf-hint{font-size:11px;color:var(--t3);margin-top:6px;line-height:1.7}
.mf-hint code{background:var(--hover);border-radius:4px;padding:1px 5px;font-size:11px;cursor:pointer}
.bulk-prog{height:6px;border-radius:6px;background:var(--hover);overflow:hidden;margin-top:8px}
.bulk-prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}
/* Client 360 strip + AI drafts (Q6) */
.c360{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-top:14px}
.c360 .c360-cell{min-width:0}
.c360 .c360-lbl{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c360 .c360-val{font-size:15px;font-weight:800;color:var(--t1);margin-top:3px;overflow-wrap:anywhere}
.c360 .c360-sub{font-size:10px;color:var(--t3);margin-top:1px;overflow-wrap:anywhere}
.c360 .c360-val.muted{color:var(--t3);font-weight:700;font-size:13px}
.c360 .c360-val.good{color:var(--accent)}
/* ---------- THE LOADER (2026-09-22, DESIGN-STANDARD law 33) ----------
   His words: "this loader is so outdated and used everywhere fix it". It was two rules named .spin: this one (a
   refresh icon turning) and the Engagements screen's 34px bordered ring further down, which won on file order and
   put a big grey ring round every busy button. ONE rule now, drawn by SPIN() in js/core.js: a thin ring in the
   text's colour, a faint track, a rounded arc. A second .spin rule anywhere in this file fails tools/loader-cases.js. */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{display:inline-block;flex:none;vertical-align:-.15em;overflow:visible;animation:spin .7s linear infinite}
.spin circle{fill:none;stroke:currentColor;stroke-width:2}
.spin .spin-t{stroke-opacity:.2}
.spin .spin-a{stroke-linecap:round;stroke-dasharray:30 100}
/* standing alone as a status (not inside a button), the arc takes the accent */
.spin-accent .spin-a{stroke:var(--accent)}
/* AI work: a sheen runs across the words. The fill goes transparent and the gradient is built from currentColor, so it
   follows every button colour and both themes with no new literal. */
.busy-ai{-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,currentColor 0%,currentColor 40%,color-mix(in srgb,currentColor 30%,transparent) 50%,currentColor 60%,currentColor 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:busy-sheen 1.6s linear infinite}
@keyframes busy-sheen{from{background-position:100% 0}to{background-position:-150% 0}}
/* a loader is the one motion that carries meaning: under reduced motion it slows rather than freezes (the sheen stops) */
@media (prefers-reduced-motion:reduce){.spin,.wb-spin{animation-duration:1.8s!important;animation-iteration-count:infinite!important}}
.ai-note{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t3);margin-top:8px}
/* Email read view (Q10) */
.mail-meta{font-size:12px;color:var(--t2);line-height:1.8;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:12px;overflow-wrap:anywhere}
.mail-meta b{color:var(--t1)}
.mail-wrap{max-height:50vh;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:14px;background:var(--card)}
.mail-body{font-size:13px;line-height:1.65;color:var(--t1);overflow-wrap:anywhere}
.mail-body img{max-width:100%!important;height:auto}
.mail-body table{max-width:100%!important;border-collapse:collapse}
.mail-body td,.mail-body th{padding:2px 4px}
.mail-body a{color:var(--accent)}
.mail-body pre,.mail-body .mail-plain{white-space:pre-wrap;font-family:inherit;margin:0}
.mail-body blockquote{border-left:3px solid var(--border);margin:8px 0;padding-left:10px;color:var(--t2)}
/* THE COMPOSER CHROME, REBUILT ON THE FIELD STANDARD (DESIGN.md §FIELD STANDARD;
   the calendar editor's .ape-* classes are the living example this copies).
   Abdul, 2026-09-20: "redesign compose it looks so outdated every section".
   What was actually wrong, in numbers rather than taste: twenty toolbar controls
   each carried its OWN 1px border and card background, so the row read as twenty
   competing boxes at three different heights and two radii - the exact failure
   Part 1 rule 15 names ("one height, one radius, one icon size, one gap"). The
   editor was OUTLINED where the standard says filled (rule 1), and it was welded
   to the toolbar by shared corner radii, which is what made the whole block look
   like a 2005 WYSIWYG.
   The fix is the .ape-desc-tb treatment: the toolbar is quiet chrome, not a
   control strip. Buttons carry no border and no fill until you reach for them. */
.re-tb{display:flex;align-items:center;gap:1px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  border:none;border-radius:0;padding:0 0 8px;background:none}
.re-tb::-webkit-scrollbar{display:none}
.re-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;
  min-width:29px;height:29px;padding:0 7px;border:1px solid transparent;border-radius:7px;
  background:none;color:var(--t2);font-size:12.5px;line-height:1;cursor:pointer;font-family:inherit}
.re-btn:hover{background:var(--bg);color:var(--t1)}
.re-btn:active{background:var(--hover)}
/* no border to darken, so rule 13 keeps a real ring here */
.re-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* FILLED, never outlined - rule 1 of the field standard */
.re-body{border:1px solid transparent;border-radius:10px;min-height:220px;padding:13px 15px;
  background:var(--bg);color:var(--t1);font-size:13px;line-height:1.6;outline:none;overflow-y:auto}
.re-body:hover{border-color:var(--border)}
/* rule 13 - the line that is already there gets stronger; no second frame */
.re-body:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 1px var(--accent)}
.re-body[data-ph]:empty:before{content:attr(data-ph);color:var(--t3)}
.re-body blockquote{border-left:3px solid var(--border);margin:8px 0;padding-left:10px;color:var(--t2)}
.re-body img{max-width:100%;height:auto;border-radius:6px}
.re-body hr{border:none;border-top:1px solid var(--border);margin:12px 0}
.re-body h1{font-size:20px;font-weight:800;margin:8px 0}
.re-body h2{font-size:16px;font-weight:700;margin:8px 0}
/* ===== AI POLISH (Q16) ===== */
.lnk-btn{border:none;background:transparent;color:var(--accent);font-weight:700;font-size:11px;cursor:pointer;font-family:inherit;padding:0;text-decoration:underline}
.lnk-btn:hover{color:var(--accent2)}
/* ===== RICH COMPOSER (Q17) ===== */
.re-tb{max-width:100%}
/* a hairline that does not touch the row's edges - a full-height rule reads as
   a table border and put a seam through the strip */
.re-tb .re-sep{width:1px;height:17px;align-self:center;background:var(--border);margin:0 6px;flex:none}
/* ACTIVE state is a tint, not a solid slab: at 29px a filled accent block beside
   quiet siblings shouts, and half this toolbar can be active at once */
.re-btn.on{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
/* the native Style select and the two colour inputs are gone: js/popmenu.js menus (law 31) */
.att-zone{border:1px dashed var(--border);border-radius:8px;padding:10px 12px;background:var(--input);font-size:11px;color:var(--t3);display:flex;align-items:center;gap:8px;flex-wrap:wrap;transition:border-color .15s,background .15s}
.att-zone.drag{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--t2)}
.att-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.att-chip{display:inline-flex;align-items:center;gap:6px;background:var(--hover);border:1px solid var(--border);border-radius:8px;padding:5px 6px 5px 9px;font-size:11px;font-weight:600;color:var(--t1);max-width:100%}
.att-chip .att-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.att-chip .att-sz{color:var(--t3);font-weight:600;flex:none}
.att-chip button{border:none;background:transparent;color:var(--t3);cursor:pointer;line-height:1;padding:0 2px;font-family:inherit;display:inline-flex}
.att-chip button:hover{color:var(--danger)}
.att-chip.up{opacity:.6}
.rc-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.rc-row>label{font-size:11px;font-weight:700;color:var(--t2);width:32px;flex:none;padding-top:11px}
/* The recipient wells wear the EXACT .fl input recipe — same recessed
   var(--bg), same 1.5px border, same radius and focus ring. var(--input)
   equals var(--card) in the dark themes, which made the To box invisible
   against the modal: only its 1px border line showed. */
.rc-box{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:40px;padding:6px 11px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);cursor:text;transition:border-color .15s,background .15s,box-shadow .15s}
.rc-box:focus-within{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.rc-box input{border:none;outline:none;background:transparent;color:var(--t1);font-family:inherit;font-size:13.5px;flex:1;min-width:110px;padding:3px 0}
.rc-box input::placeholder{color:var(--t3)}
.rc-chip{display:inline-flex;align-items:center;gap:4px;background:var(--hover);border:1px solid var(--border);border-radius:20px;padding:2px 5px 2px 9px;font-size:11px;font-weight:600;color:var(--t1);max-width:100%}
.rc-chip.bad{border-color:var(--danger);color:var(--danger);background:rgba(239,68,68,.08)}
.rc-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-chip button{border:none;background:transparent;color:var(--t3);cursor:pointer;padding:0 1px;display:inline-flex;font-family:inherit}
.rc-chip button:hover{color:var(--danger)}
.rc-tog{border:none;background:transparent;color:var(--t3);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;padding:11px 2px;flex:none}
.rc-tog:hover{color:var(--accent)}
.dft-row{display:flex;align-items:center;gap:10px;padding:11px 18px;border-bottom:1px solid var(--border);cursor:pointer}
.dft-row:hover{background:var(--hover)}
.dft-row .dft-s{flex:1;min-width:0}
.dft-row .dft-t{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dft-row .dft-m{font-size:10px;color:var(--t3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sms-row{display:flex;gap:8px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border)}
.sms-row .sms-b{flex:1;min-width:0;font-size:12px;color:var(--t1);overflow-wrap:anywhere}
.sms-row .sms-m{font-size:10px;color:var(--t3);margin-top:3px}
/* ===== TEXT THREADS (Q8) ===== */
.conv-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer}
.conv-row:last-child{border-bottom:none}
.conv-row:hover{background:var(--hover)}
.conv-av{width:36px;height:36px;border-radius:50%;background:var(--hover);border:1px solid var(--border);color:var(--t2);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;letter-spacing:.3px}
.conv-row.new .conv-av{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
.conv-s{flex:1;min-width:0}
.conv-n{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-row.new .conv-n{font-weight:800}
.conv-p{font-size:11px;color:var(--t3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-row.new .conv-p{color:var(--t2);font-weight:600}
.conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.conv-t{font-size:10px;color:var(--t3);white-space:nowrap}
.conv-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.thr-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.thr-scroll{padding:14px 16px 4px;max-height:50vh;overflow-y:auto;background:var(--bg)}
.thr-day{text-align:center;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin:12px 0 10px}
/* the Dialpad/NameCRM boundary inside a thread — a ruled line, so it reads as a
   change of era rather than another day (2026-09-15) */
.thr-era{display:flex;align-items:center;gap:8px;margin:18px 0 12px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t3)}
.thr-era::before,.thr-era::after{content:'';flex:1;height:1px;background:var(--border)}
.bub-wrap{display:flex;margin-bottom:8px}
.bub-wrap.out{justify-content:flex-end}
.bub{max-width:78%;min-width:0;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap;box-shadow:var(--sh)}
.bub.in{background:var(--card);color:var(--t1);border:1px solid var(--border);border-bottom-left-radius:4px}
.bub.out{background:var(--accent);color:var(--on-solid);border-bottom-right-radius:4px}
.bub.out.pending{opacity:.6}
.bub-m{font-size:10px;margin-top:4px}
.bub.out .bub-m{color:rgba(255,255,255,.8)}
.bub.in .bub-m{color:var(--t3)}
.thr-cmp{border-top:1px solid var(--border);padding:12px 16px;background:var(--card)}
.thr-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.thr-cnt{font-size:10px;color:var(--t3);font-weight:600;margin-left:auto}
.thr-note{font-size:11px;color:var(--t3);padding:10px 16px;border-top:1px solid var(--border);background:var(--hover)}
@media(max-width:768px){.thr-scroll{max-height:44vh}.bub{max-width:88%}}
@media(max-width:768px){.mail-from{width:110px}
  .re-tb{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .re-tb .re-btn,.re-tb select,.re-tb input[type=color]{flex:none}
  .rc-row>label{width:26px;font-size:10px}.rc-tog{padding:11px 0;font-size:10px}
  .rc-box input{min-width:72px}
  .att-chip .att-nm{max-width:110px}}
.lic{display:inline-block;vertical-align:-0.14em}
/* ===== CALENDAR (Q11) ===== */
.cal-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.cal-title{font-size:15px;font-weight:700;min-width:190px}
.cal-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;background:var(--hover);color:var(--t2);border:1px solid var(--border)}
.cal-chip.ok{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent2);border-color:transparent}
.cal-grid{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);box-shadow:var(--sh);overflow:hidden}
.cal-head{display:grid;grid-template-columns:54px repeat(var(--cols,7),1fr);border-bottom:1px solid var(--border)}
.cal-hcell{padding:8px 4px;text-align:center;border-left:1px solid var(--border)}
.cal-hcell .dn{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}
.cal-hcell .dd{font-size:18px;font-weight:700;margin-top:2px}
.cal-hcell.today .dd{background:var(--accent);color:var(--on-solid);width:30px;height:30px;line-height:30px;border-radius:50%;margin:2px auto 0}
.cal-body{display:grid;grid-template-columns:54px repeat(var(--cols,7),1fr);max-height:60vh;overflow-y:auto;position:relative}
.cal-times{display:flex;flex-direction:column}
.cal-time{height:52px;font-size:10px;color:var(--t3);text-align:right;padding:2px 6px 0 0;border-top:1px solid var(--border)}
.cal-col{border-left:1px solid var(--border);position:relative}
.cal-slot{height:52px;border-top:1px solid var(--border);cursor:pointer}
.cal-slot:hover{background:var(--hover)}
.cal-ev{position:absolute;border-radius:7px;padding:3px 6px;font-size:11px;color:var(--on-solid);overflow:hidden;cursor:pointer;box-shadow:var(--sh);background:var(--accent2);border:1px solid rgba(255,255,255,.25)}
.cal-ev.g{background:#4f46e5}
.cal-ev .t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev .s{opacity:.9;font-size:10px}
/* Q159 — drag & resize on the week grid. A NameCRM event grabs (`.draggable`);
   a Google one keeps the plain pointer, because it is click-to-open only. */
/* pan-x AND pan-y: a swipe starting on an event must scroll/page the grid
   in BOTH axes (Abdul 2026-09-05: "it does not let me swipe left and right
   ... inside the slot where there is a meeting"). Only a long-press arms a
   drag, and by then the finger is still, so calTouchGuard's preventDefault
   still wins. */
.cal-ev.draggable{cursor:grab;touch-action:pan-x pan-y}
.cal-ev.dragging{cursor:grabbing;opacity:.94;box-shadow:0 8px 22px rgba(0,0,0,.30);will-change:top,height}
.cal-ev.conflict{outline:2px solid #ef4444;outline-offset:-1px}
.cal-ev-rz{position:absolute;left:0;right:0;bottom:0;height:9px;cursor:ns-resize;border-radius:0 0 6px 6px}
.cal-ev-rz::after{content:"";position:absolute;left:50%;bottom:2px;width:22px;height:2px;margin-left:-11px;border-radius:2px;background:rgba(255,255,255,.55)}
.cal-empty{padding:26px;text-align:center;color:var(--t3);font-size:12px}
/* Q160 — the appointment-modal reminder toggle */
.ap-chk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--t1);cursor:pointer}
.ap-chk input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.ap-remind-note{font-size:11px;color:var(--t3);margin-top:4px;line-height:1.5}
/* ============================================================
   Q158 — MONTH + AGENDA views (the week grid above is unchanged).
   Colour discipline: the event dot reuses the calendar's existing accents —
   `--accent2` for a NameCRM appointment and the `#4f46e5` indigo `.cal-ev.g`
   already uses for a Google one. Nothing new on the brand-green flip list.
   ============================================================ */
.cal-seg{margin-bottom:0}                 /* the shared .seg carries 14px; it sits inline in the nav bar here */
/* Month */
.cal-m{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);box-shadow:var(--sh);overflow:hidden}
.cal-m-head{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border)}
.cal-m-dow{padding:8px 6px;text-align:center;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}
.cal-m-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-m-cell{min-height:104px;border-left:1px solid var(--border);border-top:1px solid var(--border);padding:5px 5px 6px;cursor:pointer;overflow:hidden}
.cal-m-cell:nth-child(7n+1){border-left:none}
.cal-m-cell:hover{background:var(--hover)}
.cal-m-cell.out{background:var(--bg)}
.cal-m-cell.out .cal-m-dn{color:var(--t3)}
.cal-m-top{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:3px}
.cal-m-dn{font-size:12.5px;font-weight:700;color:var(--t1);width:22px;height:22px;line-height:22px;text-align:center}
.cal-m-cell.today .cal-m-dn{background:var(--accent);color:var(--on-solid);border-radius:50%}
.cal-m-ct{font-size:9.5px;font-weight:800;color:var(--t2);background:var(--border);border-radius:8px;padding:1px 6px}
.cal-m-evs{display:flex;flex-direction:column;gap:2px}
.cal-m-ev{display:flex;align-items:center;gap:4px;font-size:10.5px;line-height:1.35;border-radius:5px;padding:1px 4px;cursor:pointer;background:var(--hover);min-width:0}
.cal-m-ev:hover{background:var(--border)}
.cal-m-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent2)}
.cal-m-ev.g .cal-m-dot{background:#4f46e5}
.cal-m-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.cal-m-more{font-size:10px;font-weight:700;color:var(--t2);padding:1px 4px}
/* Agenda */
.cal-ag{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);box-shadow:var(--sh);overflow:hidden}
.cal-ag-day{display:flex;align-items:center;gap:12px;padding:9px 16px;background:var(--bg);border-top:1px solid var(--border)}
.cal-ag:first-child .cal-ag-day:first-child,.cal-ag>.cal-ag-day:first-child{border-top:none}
.cal-ag-dnum{font-size:20px;font-weight:800;color:var(--t1);min-width:26px;text-align:center}
.cal-ag-day.today .cal-ag-dnum{color:var(--accent2)}
.cal-ag-dow{font-size:12.5px;font-weight:700;color:var(--t1)}
.cal-ag-mon{font-size:11px;color:var(--t3)}
.cal-ag-ev{display:flex;align-items:center;gap:14px;padding:11px 16px;border-top:1px solid var(--border);cursor:pointer}
.cal-ag-ev:hover{background:var(--hover)}
.cal-ag-ev:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cal-ag-time{display:flex;flex-direction:column;align-items:flex-start;min-width:74px;font-size:12.5px;font-weight:700;color:var(--t1);position:relative;padding-left:14px}
.cal-ag-dot{position:absolute;left:0;top:4px;width:8px;height:8px;border-radius:50%;background:var(--accent2)}
.cal-ag-dot.g{background:#4f46e5}
.cal-ag-end{font-size:10.5px;font-weight:600;color:var(--t3)}
.cal-ag-body{flex:1;min-width:0}
.cal-ag-title{font-size:13px;font-weight:700;color:var(--t1);overflow-wrap:anywhere}
.cal-ag-sub{font-size:11.5px;color:var(--t2);margin-top:1px;overflow-wrap:anywhere}
@media(max-width:768px){
  .cal-m-cell{min-height:62px;padding:3px}
  .cal-m-dn{width:auto;height:auto;line-height:1.4;font-size:12px}
  .cal-m-cell.today .cal-m-dn{width:20px;height:20px;line-height:20px}
  .cal-m-ct{display:none}                 /* the dots convey count on a small cell */
  .cal-m-t,.cal-m-more{display:none}       /* dots-only on mobile so cells stay legible */
  .cal-m-evs{flex-direction:row;flex-wrap:wrap;gap:3px}
  .cal-m-ev{padding:0;background:none}
  .cal-m-ev:hover{background:none}
  .cal-m-dow{font-size:9px;padding:6px 2px}
}
/* toast dark-ink */
.toast{background:var(--ink);color:#fff;border-radius:12px}
/* ===== RESPONSIVE / MOBILE ===== */
img,svg,video,canvas{max-width:100%}
.kpi,.card,.dg>*,.two-col>*,.stat-box,.funnel-seg,.bulk-item,.mail-row,.mail-subj{min-width:0}
.kpi-val,.inc-title,.mail-subj,.rp-nm{overflow-wrap:anywhere}
/* a table cell: break-word keeps a word whole and lets the table ask for the room (see "AND NOW THAT IT CAN
   SCROLL" above); on a phone the lists are cards, and there a long address may break anywhere */
td{overflow-wrap:break-word}
@media(max-width:768px){td{overflow-wrap:anywhere}}
@media(max-width:768px){
  #main{max-width:100%;overflow-x:hidden}
  .pc{padding:14px 14px 84px}
  .ph{padding:12px 14px 2px}.ph h2{font-size:19px}.ph-actions{gap:6px;flex-wrap:wrap}
  /* ONE-LINE HEADER (Abdul 2026-09-05, replacing the search-on-its-own-row
     wrap): search flexes first, the Live pill collapses to its dot while
     connected (offline/connecting re-expand — a degraded connection earns
     the pixels), and focusing search folds the actions away so the query
     and its results own the row. Mockup: DESIGN-STANDARD.md §NameCRM #10. */
  #ghead{padding:10px 12px;gap:8px}
  .gsearch{min-width:0;max-width:none}
  .gsearch input{text-overflow:ellipsis}
  .head-actions{margin-left:auto;flex:none;transition:opacity .18s ease,max-width .22s ease;max-width:280px}
  #ghead.searching .head-actions{opacity:0;max-width:0;margin-left:0;pointer-events:none;overflow:hidden}
  .live-dot.connected #live-text{display:none}
  .live-dot.connected{padding:5px 7px}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:14px 15px}.kpi-val{font-size:21px;letter-spacing:-.5px}.kpi-icon{width:32px;height:32px}
  .dg,.two-col,.fg{grid-template-columns:1fr!important}
  .kb,.svc-grid,.bulk-body .grid{grid-template-columns:1fr!important}
  .funnel{flex-direction:column}
  .tbl-wrap{overflow-x:auto}
  .modal,.modal.wide{width:100vw;max-width:100vw;max-height:92vh;border-radius:20px 20px 0 0;margin:auto 0 0}
  .mo{align-items:flex-end}
  .comms-tabs,.drw-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .mail-from{width:104px;flex:1}
  .mail-row{flex-wrap:wrap;gap:6px 10px}
  .mail-subj{flex-basis:100%;order:3}
  .mail-date{order:2;margin-left:auto}
  .mail-open{order:4;flex-basis:100%}
  .inc-card{padding:16px}.inc-track{height:110px}
  .id-row{flex-wrap:wrap;gap:6px}
  .id-row input{flex-basis:100%}
  .id-row .id-def{order:-1;flex-basis:100%;margin:0 0 -2px}
  .id-row .btn-icon{margin-left:auto}
  .c360{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){ .kpi-grid{grid-template-columns:1fr} }
/* Q113 — undo toast. Wider than a plain toast to fit the action, with a bar
   that drains over the 8s window so the deadline is visible rather than
   guessed. Animation (not requestAnimationFrame) because rAF is throttled in
   a background tab, which would freeze the bar while the timer kept running. */
.toast-undo{position:relative;overflow:hidden;padding-right:10px;max-width:360px;gap:12px}
.toast-undo .tu-msg{flex:1;min-width:0}
.toast-undo .tu-btn{flex:none;background:none;border:1px solid currentColor;color:inherit;
  font:var(--ff);font-weight:700;padding:4px 11px;border-radius:7px;cursor:pointer;opacity:.9}
.toast-undo .tu-btn:hover{opacity:1;background:rgba(255,255,255,.12)}
.toast-undo .tu-btn:disabled{cursor:default;opacity:.55}
.toast-undo .tu-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--accent);transform-origin:left center}
@keyframes tu-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.toast-undo .tu-bar{animation:none!important;transform:scaleX(1)}}

/* ============ Q111 — CONTACT COCKPIT (owner-named) ============
   Identity, chips and quick actions on one line; then the five facts that
   decide what to do next. Sized so the whole header fits above the fold on a
   1440x900 desktop and stacks cleanly at 375. */
.ck-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ck-av{width:54px;height:54px;border-radius:14px;flex:none;background:var(--accent);color:var(--on-solid);
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;letter-spacing:-.5px}
/* NO `color:transparent` HERE. The card image is an absolutely-positioned
   <img> that covers the tile, so it hides the initials by BEING ON TOP of
   them. Making the text transparent as well meant that when the image failed
   and onerror removed it, the initials stayed invisible — the fallback was
   documented but could never fire. The covering element hides them; nothing
   else needs to. */
.ck-av-img{box-shadow:var(--sh)}
.ck-id{flex:1 1 220px;min-width:0}
.ck-name{font-size:22px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.ck-role{color:var(--t2);font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.ck-chips{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ck-score{font-size:10px;font-weight:700;color:var(--t2);background:var(--bg);border:1px solid var(--border);
  padding:3px 8px;border-radius:20px;white-space:nowrap}
.ck-evt{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--t2);
  background:var(--bg);border:1px solid var(--border);padding:3px 8px;border-radius:20px;max-width:200px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;margin-left:auto}

/* Facts strip */
.ck-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:14px}
.ck-fact{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:11px 13px;min-width:0}
.ck-fact-go{cursor:pointer;transition:border-color .12s,background .12s}
.ck-fact-go:hover{background:var(--hover);border-color:var(--accent)}
.ck-fact-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ck-fact-l{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.ck-fact-v{font-size:15px;font-weight:800;color:var(--t1);margin-top:3px;overflow-wrap:anywhere;
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ck-fact-s{font-size:10px;color:var(--t3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-dim{font-weight:600;color:var(--t2);font-size:13px}
.ck-none{font-size:13px;font-weight:700;color:var(--t3)}
.ck-msg{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ck-in,.ck-out{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 6px;border-radius:5px;flex:none}
.ck-in{background:#d1fae5;color:#065f46}
.ck-out{background:var(--border);color:var(--t2)}
:root[data-theme="dark"] .ck-in{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-tx)}

/* Pinned note */
.ck-note{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:10px 13px;border-radius:12px;
  background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.28);color:var(--t1)}
.ck-note>svg{flex:none;margin-top:1px;color:var(--warn)}
.ck-note-b{flex:1;min-width:0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}

@media(max-width:760px){
  .ck-actions{margin-left:0;width:100%}
  .ck-av{width:46px;height:46px;border-radius:12px;font-size:16px}
  .ck-name{font-size:19px}
  .ck-facts{grid-template-columns:1fr}
}

/* ============ Q112 — RECIPIENT AUTOCOMPLETE (owner-named) ============ */
.ac-box{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;max-height:264px;overflow-y:auto;
  background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shlg);padding:4px}
.ac-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;cursor:pointer;min-width:0}
.ac-item.sel{background:var(--hover)}
.ac-av{width:26px;height:26px;border-radius:50%;flex:none;background:var(--accent);color:var(--on-solid);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.ac-t{display:flex;flex-direction:column;min-width:0;flex:1}
.ac-n{font-size:12px;font-weight:700;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-m{font-size:10px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ Q114 — BREADCRUMBS + NAV ACTIVE STATE ============ */
.crumbs{display:flex;align-items:center;gap:7px;margin-bottom:14px;font-size:12px;flex-wrap:wrap;min-width:0}
.crumbs a{color:var(--t2);font-weight:600;text-decoration:none;padding:3px 2px;border-radius:6px}
.crumbs a:hover{color:var(--accent)}
.crumbs a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.crumbs .crumb-up{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  padding:0;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--t2);flex:none}
.crumbs .crumb-up:hover{border-color:var(--accent);color:var(--accent)}
.crumb-sep{color:var(--t3)}
.crumb-now{color:var(--t1);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Active nav item reads as selected, not merely hovered. */
#sb .ni.active{position:relative}
#sb .ni.active::after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--accent)}

/* ============================================================
   Q123 — DEALS
   The deal board reuses the kanban primitives (.kb/.kc/.kcard) so the two
   pipeline modes feel like the same screen; everything below is the extra
   vocabulary a deal needs and a contact card does not — probability, expected
   close, won/lost. Badge pills follow the house pattern of fixed light
   colours in both themes, like every other .badge.
   ============================================================ */
/* Deal stage badges — a deliberate cool→warm→resolved progression so the
   column a deal is in is readable at a glance without reading the word. */
.b-dq{background:#e2e8f0;color:#334155}
.b-dp{background:#fef3c7;color:#92400e}
.b-dn{background:#e0e7ff;color:#3730a3}
.b-dw{background:#d1fae5;color:#065f46}
.b-dl{background:#fee2e2;color:#991b1b}

/* Five stages need a fifth column. Below 769px .kb is already forced to a
   single column with !important, so this is scoped to desktop only. */
@media(min-width:769px){.kb.kb-5{grid-template-columns:repeat(5,1fr)}}
.kc-val{font-size:10px;color:var(--accent);font-weight:700;margin-left:4px}
.kc-empty{font-size:11px;color:var(--t3);text-align:center;padding:16px 8px;line-height:1.5}
.kcard-deal{cursor:pointer}
.dl-none{color:var(--t3);font-weight:500}
/* NOT var(--danger): #ef4444 on a white card is 3.76:1, below AA for the 10px
   text this carries. #b91c1c is the same red the urgent NBA hint already uses
   and clears AA at 6.4:1. */
.dl-late{color:#b91c1c;font-weight:700}
:root[data-theme="dark"] .dl-late{color:#fca5a5}
.dl-soon{color:#b45309;font-weight:700}
:root[data-theme="dark"] .dl-soon{color:#fcd34d}
/* Amber status text (e.g. billing "Awaiting Payment"). #b45309 reads on light
   surfaces but drops to 3.42:1 on the dark cards — mirror the .nba/.dl-soon
   pattern and lift it to amber-300 in dark mode. Use this class instead of an
   inline color:#b45309 so the theme override can reach it. */
.amber-text{color:#b45309}
:root[data-theme="dark"] .amber-text{color:#fcd34d}
.dl-prob{display:flex;align-items:center;gap:7px;margin-top:8px}
.dl-bar{flex:1;height:4px;border-radius:3px;background:var(--border);overflow:hidden;min-width:0}
.dl-bar>i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.dl-pct{font-size:10px;color:var(--t3);font-weight:600;white-space:nowrap}
.dl-lost{margin-top:7px;font-size:10px;color:var(--t3);line-height:1.45;overflow-wrap:anywhere}

/* Deals / Relationships switch above the board. */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--hover);
  border:1px solid var(--border);margin-bottom:14px}
.seg-btn{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--t2);
  font-family:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer}
.seg-btn:hover{color:var(--t1)}
.seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg-btn.on{background:var(--card);color:var(--t1);box-shadow:var(--sh)}
/* --t2, not --t3: this count sits on --border, a tint darker than --bg, where
   --t3 measured 4.40 light / 3.49 dark. The dark miss is the larger one and no
   plausible --t3 clears it without collapsing into --t2 anyway. */
.seg-n{font-size:10px;font-weight:700;color:var(--t2);background:var(--border);border-radius:9px;padding:1px 6px}
.seg-btn.on .seg-n{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}

/* Designed empty state for a board with no deals in it yet. */
.empty-panel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:44px 24px;border:1px dashed var(--border);border-radius:var(--rlg);background:var(--card);color:var(--t3)}
.empty-panel>svg{color:var(--accent);opacity:.75}
.empty-panel h3{font-size:15px;font-weight:700;color:var(--t1)}
.empty-panel p{font-size:12px;color:var(--t2);max-width:440px;line-height:1.6}
.empty-cta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* Deal chips on the contact cockpit. */
.ck-deals{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.dchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;padding:5px 10px;border-radius:20px;
  border:1px solid var(--border);background:var(--card);color:var(--t1);font-size:11px;font-weight:600;
  text-decoration:none;cursor:pointer;font-family:inherit}
.dchip:hover{border-color:var(--accent);background:var(--hover)}
.dchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dchip-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dchip b{color:var(--accent);font-weight:700}
.dchip-closed{opacity:.62}
.dchip-add{border-style:dashed;color:var(--t2)}
.dchip-dot{width:7px;height:7px;border-radius:50%;flex:none}
.dd-dq{background:#94a3b8}.dd-dp{background:#f59e0b}.dd-dn{background:#6366f1}
.dd-dw{background:var(--accent)}.dd-dl{background:#ef4444}
.ck-deals-none{font-size:11px;color:var(--t3)}

/* ============================================================
   Q127 — TAGS
   A tag is the owner's own label, so it gets a colour and the colour has to
   survive both themes. Following the house .badge pattern (fixed light
   background, dark text, identical in light and dark) rather than inventing a
   theme-aware system: ten hand-checked pairs, every one between 6.37:1 and
   8.40:1, measured rather than eyeballed. No green — var(--accent) is the
   brand colour and a tag wearing it would read as a system state (see Q122).
   ============================================================ */
.tg{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0;
  padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent;
  font-family:inherit}
.tg-sm{font-size:10px;padding:2px 7px}
.tg-row{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;max-width:100%}
.tg-c{font-style:normal;font-weight:700;opacity:.66;font-variant-numeric:tabular-nums}
/* --t2, not --t3: measured 3.54:1 on the dark tint, i.e. an AA failure. */
.tg-more{background:var(--hover);color:var(--t2);font-weight:700}

/* The ten. Background first, then text — the pair is the unit. */
.tg-sl{background:#e2e8f0;color:#334155}
.tg-bl{background:#dbeafe;color:#1e40af}
.tg-vi{background:#ede9fe;color:#5b21b6}
.tg-pk{background:#fce7f3;color:#9d174d}
.tg-am{background:#fef3c7;color:#92400e}
.tg-te{background:#ccfbf1;color:#115e59}
.tg-li{background:#ecfccb;color:#3f6212}
.tg-ro{background:#ffe4e6;color:#9f1239}
.tg-cy{background:#cffafe;color:#155e75}
.tg-or{background:#ffedd5;color:#9a3412}

/* A pill that does something. `currentColor` at low alpha keeps the hover tint
   inside the pill's own hue instead of turning every tag grey on hover. */
.tg-go{cursor:pointer}
.tg-go:hover{filter:brightness(.94)}
.tg-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tg-x{display:inline-flex;align-items:center;border:0;background:none;padding:0 0 0 2px;
  color:inherit;opacity:.6;cursor:pointer;font:var(--ff)}
.tg-x:hover{opacity:1}

/* Filter chips above the contacts table. */
.tg-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 4px 12px}
/* --t2, not --t3: this label sits on the PAGE background, where --t3 measures
   4.48:1 and just misses AA (it clears on a card, which is where it passes). */
.tg-chips-l{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t2);margin-right:2px}
.tg-chips-more{font-size:11px;color:var(--t3)}
/* Unselected chips are quiet so the SELECTED ones are the loud thing on the
   row -- with 27 tags, a strip of ten fully-saturated pills competes with the
   table it is supposed to be filtering. */
.tg-chip{opacity:.72}
.tg-chip:hover{opacity:1}
.tg-chip.on{opacity:1;border-color:currentColor;box-shadow:0 0 0 1px currentColor inset}
.tg-clear,.tg-manage{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);
  background:var(--card);color:var(--t2);font-size:10px;font-weight:600;padding:3px 9px;
  border-radius:20px;cursor:pointer;font-family:inherit}
.tg-clear:hover,.tg-manage:hover{border-color:var(--accent);color:var(--t1)}
.tg-manage{margin-left:auto}

/* Tag picker inside the contact form — same interaction as .svc-pill, but the
   pills keep their colour so selecting one looks like the pill you will get. */
.tg-pillbox{display:flex;flex-wrap:wrap;gap:6px}
.tg-pick{cursor:pointer;user-select:none;opacity:.45;font-size:12px;padding:5px 11px}
.tg-pick:hover{opacity:.8}
.tg-pick.sel{opacity:1;border-color:currentColor}
.tg-empty{font-size:12px;color:var(--t3)}

/* Tags on the contact cockpit, under the state chips. */
.ck-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}

/* The manager. */
.tg-mgr-sub{font-size:12px;color:var(--t2);margin-bottom:14px;line-height:1.6}
.tg-mgr{display:flex;flex-direction:column}
.tg-mgr-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 2px;border-bottom:1px solid var(--border)}
.tg-mgr-row:last-child{border-bottom:0}
.tg-mgr-pill{min-width:0;flex:0 1 auto}
.tg-mgr-count{border:0;background:none;padding:0;font:var(--ff);font-size:11px;color:var(--t3);
  cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;white-space:nowrap}
.tg-mgr-count:hover{color:var(--t1)}
.tg-swatches{display:flex;gap:4px;margin-left:auto}
.tg-sw{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.14);cursor:pointer;padding:0}
.tg-sw.on{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--accent)}
.tg-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tg-sw-sl{background:#e2e8f0}.tg-sw-bl{background:#dbeafe}.tg-sw-vi{background:#ede9fe}
.tg-sw-pk{background:#fce7f3}.tg-sw-am{background:#fef3c7}.tg-sw-te{background:#ccfbf1}
.tg-sw-li{background:#ecfccb}.tg-sw-ro{background:#ffe4e6}.tg-sw-cy{background:#cffafe}
.tg-sw-or{background:#ffedd5}
.tg-mgr-act{display:flex;gap:4px}
/* #b91c1c, not var(--danger): #ef4444 is 3.76:1 on a card and fails AA at this
   size. Same call the Q123 overdue text made. */
.tg-del{color:#b91c1c}
.tg-mgr-edit{flex-basis:100%;display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 0 2px}
.tg-mgr-edit input{flex:1;min-width:160px}
.tg-mgr-hint{font-size:11px;color:var(--t3)}
.tg-mgr-empty{text-align:center;padding:28px 12px;color:var(--t2)}
.tg-mgr-empty>svg{color:var(--accent);opacity:.7}
.tg-mgr-empty h4{font-size:14px;font-weight:700;color:var(--t1);margin:10px 0 6px}
.tg-mgr-empty p{font-size:12px;line-height:1.6;max-width:420px;margin:0 auto}

/* The swatch ring reads as a hairline on a dark card; lift it so a chosen
   colour is still obviously chosen. */
:root[data-theme="dark"] .tg-sw{border-color:rgba(255,255,255,.22)}
:root[data-theme="dark"] .tg-more{background:rgba(255,255,255,.09)}

@media(max-width:768px){
  /* The swatch row is the first thing to wrap on a phone; giving it the full
     width keeps the pill and the actions on one readable line. */
  .tg-swatches{margin-left:0;flex-basis:100%;order:5}
  .tg-mgr-act{margin-left:auto}
  .tg-manage{margin-left:0}
}

/* ============================================================
   Q126 — CUSTOM FIELDS
   Colours are tokens only. Nothing here hard-codes the brand green, so the
   pending --accent decision (Q122) stays a single-token edit.
   ============================================================ */
.cf-sec{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cf-sec-manage{display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:0;cursor:pointer;
  font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t2)}
.cf-sec-manage:hover{color:var(--t1)}
.cf-sec-manage:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* A value whose field was removed in Settings. It stays on the profile — the
   answer is still the owner's data — but it must not read as a live field. */
.cf-gone{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:5px;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;background:var(--bg);color:var(--t2);border:1px solid var(--border)}

.cf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cf-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:7px;font-size:11px;font-weight:600;
  background:var(--bg);border:1px solid var(--border);color:var(--t1)}
.cf-chip i{font-style:normal;font-size:10px;font-weight:600;color:var(--t2)}
.cf-need{font-size:11px;color:var(--t2);line-height:1.6;margin:0}
.cf-need-act{margin-top:8px}
.cf-need code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;background:var(--bg);
  border:1px solid var(--border);border-radius:4px;padding:1px 5px}

.cf-sub{font-size:12px;color:var(--t2);line-height:1.6;margin:0 0 14px}
.cf-cap{margin:14px 0 0}
.cf-mgr{display:flex;flex-direction:column;gap:8px}
.cf-mgr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--card)}
.cf-mgr-row.editing{border-color:var(--accent);background:var(--bg)}
.cf-mgr-move{display:flex;flex-direction:column;gap:2px}
.cf-mv{width:20px;height:15px;line-height:1;font-size:8px;padding:0;border:1px solid var(--border);border-radius:4px;
  background:var(--card);color:var(--t2);cursor:pointer}
.cf-mv:hover:not(:disabled){color:var(--t1);border-color:var(--t3)}
.cf-mv:disabled{opacity:.35;cursor:default}
.cf-mv:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cf-mgr-main{flex:1;min-width:140px}
.cf-mgr-lbl{font-size:12.5px;font-weight:700;color:var(--t1)}
.cf-mgr-meta{font-size:11px;color:var(--t2);margin-top:2px}
.cf-mgr-act{display:flex;gap:4px;margin-left:auto}
/* #b91c1c, not var(--danger): #ef4444 measures 3.76:1 on a card and fails AA
   at this size. Same call the Q123 overdue text and the Q127 tag delete made.
   THE DARK OVERRIDE IS NOT OPTIONAL, and this is where it was found missing.
   #b91c1c is 6.47:1 on the light card but only 2.65:1 on the dark one — a
   destructive action rendered HARDER to read than everything around it. Every
   other #b91c1c in this file (.nba.u-urgent, .nba-bar .nba-ic, .dl-late)
   already flips to #fca5a5 (9.04:1); .tg-del shipped with Q127 WITHOUT that
   flip and has been failing AA in dark mode on production ever since. Both are
   fixed here, together, because they are one defect. */
.cf-del{color:#b91c1c}
:root[data-theme="dark"] .cf-del,
:root[data-theme="dark"] .tg-del{color:#fca5a5}
.cf-add{margin-top:12px}

.cf-editor{flex-basis:100%;padding:10px 0 2px;border-top:1px solid var(--border);margin-top:4px}
.cf-editor-new{border:1px solid var(--accent);border-radius:10px;padding:12px;margin-top:12px;background:var(--bg)}
.cf-editor-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t2);margin-bottom:10px}
.cf-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cf-opts{margin-top:12px}
.cf-opts textarea{min-height:70px;resize:vertical}
.cf-editor-f{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:12px}
.cf-editor-hint{font-size:11px;color:var(--t2)}
.cf-mgr-empty>svg{color:var(--accent)}

@media(max-width:768px){
  .cf-grid,.cf-editor-grid{grid-template-columns:1fr}
  .cf-mgr-act{margin-left:0;flex-basis:100%}
}

/* ============================================================
   Q170 (early slice) — "a new version is ready" prompt
   It WAS a toast here (.toast-update, with a .su-x Later button). Since 2026-09-20 it is the
   .ver-pill in the top bar, styled beside .toast-c above: a prompt that stays never floats.
   ============================================================ */

/* ============================================================
   Q130 — CSV IMPORT WIZARD
   ============================================================ */
.imp-steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
/* --t2, not --t3: --t3 measures 4.48:1 on the chip's own --bg fill, which is
   AA by rounding only. A step label the owner has not reached yet is still
   text they need to read. */
.imp-step{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);
  padding:5px 10px;border-radius:20px;background:var(--bg);border:1px solid var(--border)}
.imp-step.on{color:var(--card);background:var(--t1);border-color:var(--t1)}
.imp-sub{font-size:12px;color:var(--t2);line-height:1.6;margin:0 0 14px}
.imp-fine{font-size:11px;color:var(--t2);line-height:1.6;margin:10px 0 0}

.imp-drop{text-align:center;padding:34px 18px;border:2px dashed var(--border);border-radius:14px;background:var(--bg)}
.imp-drop.over{border-color:var(--accent);background:var(--card)}
.imp-drop>svg{color:var(--t2)}
.imp-drop h4{font-size:15px;font-weight:700;color:var(--t1);margin:12px 0 6px}
.imp-drop p{font-size:12px;color:var(--t2);line-height:1.6;max-width:440px;margin:0 auto 14px}

.imp-map{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;padding-right:2px}
.imp-map-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.imp-col{flex:1;min-width:0}
.imp-col-h{font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-col-s{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.imp-arrow{flex:none;color:var(--t3);transform:rotate(180deg);line-height:0}
.imp-sel{flex:none;width:190px;max-width:45%}

.imp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.imp-tile{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.imp-tile-n{font-size:22px;font-weight:800;color:var(--t1);line-height:1.1}
.imp-tile-l{font-size:11px;font-weight:700;color:var(--t1);margin-top:3px}
.imp-tile-s{font-size:11px;color:var(--t2);margin-top:2px;line-height:1.5}
/* DELIBERATELY NOT var(--accent) ON THE NUMBER. #10b981 as text measures
   2.19:1 here, and per Q122 nothing new should either assume the brand green
   or work around it with a one-off colour that would have to be unpicked when
   the token flips. A border marks the tile instead — a border is not text, so
   it is judged at 3:1 as a UI component and passes on any accent value. */
.imp-ok{border-left:3px solid var(--accent)}

.imp-opt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.imp-opt-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);margin-right:2px}
.imp-radio{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--t2);
  padding:6px 10px;border:1px solid var(--border);border-radius:8px;cursor:pointer;min-height:32px}
.imp-radio.on{color:var(--t1);border-color:var(--accent)}
.imp-radio input{accent-color:var(--accent);margin:0}

.imp-rule{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--t2);line-height:1.6;margin:12px 0 0}
.imp-rule>svg{flex:none;color:var(--accent);margin-top:2px}
.imp-rule b{color:var(--t1)}
.imp-notes{margin-top:12px;font-size:11.5px;color:var(--t2);line-height:1.7}
.imp-notes b{color:var(--t1)}
.imp-warn{display:flex;align-items:flex-start;gap:7px;font-size:12px;line-height:1.6;color:#8a4a00;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.imp-warn>svg{flex:none;margin-top:1px}

.imp-list-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t2);margin:16px 0 6px}
.imp-list{max-height:190px;overflow-y:auto;border:1px solid var(--border);border-radius:10px}
.imp-li{display:flex;gap:10px;align-items:baseline;padding:8px 11px;border-bottom:1px solid var(--border);font-size:12px}
.imp-li:last-child{border-bottom:none}
.imp-li-n{font-weight:600;color:var(--t1);flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-li-d{color:var(--t2);font-size:11px;flex:1;min-width:0}
.imp-li-more{color:var(--t2);font-size:11px;justify-content:center}

.imp-run{text-align:center;padding:12px 0}
.imp-run h4{font-size:16px;font-weight:800;color:var(--t1);margin:0 0 14px}
.imp-run .imp-tiles{text-align:left}
.imp-track{height:8px;border-radius:20px;background:var(--bg);border:1px solid var(--border);overflow:hidden;max-width:420px;margin:0 auto}
.imp-track>i{display:block;height:100%;background:var(--accent);transition:width .2s ease}
.imp-undo{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--border);font-size:12px;color:var(--t2)}

:root[data-theme="dark"] .imp-warn{color:#fcd9a0;background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.4)}

@media(max-width:768px){
  .imp-tiles{grid-template-columns:1fr}
  .imp-map-row{flex-wrap:wrap}
  .imp-arrow{display:none}
  .imp-sel{width:100%;max-width:none}
  .imp-li{flex-direction:column;gap:2px}
  .imp-li-n{max-width:100%}
}

/* ============================================================
   Q131 — DUPLICATE FINDER & MERGE
   ============================================================ */
.dp-sum{font-size:12px;color:var(--t2);line-height:1.7;margin:0 0 14px}
.dp-sum b{color:var(--t1)}
.dp-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;margin-right:6px}
.dp-hi{background:#fee2e2;color:#991b1b}
.dp-mid{background:#fef3c7;color:#854d0e}
.dp-list{display:flex;flex-direction:column;gap:12px}
.dp-g{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.dp-g-h{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--bg);border-bottom:1px solid var(--border)}
.dp-g-n{font-size:11px;color:var(--t2);font-weight:600}
.dp-g-h>.btn{margin-left:auto}
.dp-g-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;padding:12px}
.dp-c{border:1px solid var(--border);border-radius:10px;padding:10px 11px;background:var(--card)}
.dp-pick .dp-c{cursor:pointer}
.dp-pick .dp-c:hover{border-color:var(--t3)}
.dp-c.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.dp-c-pick{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--t2);margin-bottom:6px}
.dp-c.on .dp-c-pick{color:var(--t1)}
.dp-c-n{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:3px}
.dp-c-l{font-size:11.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6}
.dp-c-m{font-size:10.5px;color:var(--t2);margin-top:5px;padding-top:5px;border-top:1px solid var(--border)}

.dp-fields{margin-top:14px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.dp-f-h,.dp-f{display:grid;grid-template-columns:110px repeat(var(--dpc,2),1fr) 1fr;gap:8px;
  padding:8px 11px;font-size:12px;align-items:center}
.dp-f-h{background:var(--bg);border-bottom:1px solid var(--border);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--t2)}
.dp-f{border-bottom:1px solid var(--border)}
.dp-f:last-child{border-bottom:none}
.dp-f-l{font-weight:600;color:var(--t2)}
.dp-f-v{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-opt{cursor:pointer;padding:3px 7px;margin:-3px -7px;border-radius:7px;border:1px solid transparent}
.dp-opt:hover{border-color:var(--border)}
.dp-opt.on{border-color:var(--accent);color:var(--t1);font-weight:600}
.dp-opt:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dp-f-r{font-weight:700;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-conflict .dp-f-l{color:var(--t1)}

.dp-keeps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dp-keep{border:1px solid var(--border);border-radius:10px;padding:9px 11px;font-size:11.5px;color:var(--t2);line-height:1.6}
.dp-keep b{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);margin-bottom:5px}
.dp-keep i{color:var(--t2)}
.dp-rule{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--t2);line-height:1.7;margin:12px 0 0}
.dp-rule>svg{flex:none;color:var(--accent);margin-top:3px}
.dp-rule b{color:var(--t1)}
.dp-empty{text-align:center;padding:30px 12px;color:var(--t2)}
.dp-empty>svg{color:var(--accent);opacity:.7}
.dp-empty h4{font-size:14px;font-weight:700;color:var(--t1);margin:10px 0 6px}
.dp-empty p{font-size:12px;line-height:1.6;max-width:420px;margin:0 auto}

:root[data-theme="dark"] .dp-hi{background:#4a1414;color:#fca5a5}
:root[data-theme="dark"] .dp-mid{background:#43310a;color:#fcd9a0}

@media(max-width:768px){
  .dp-f-h{display:none}
  .dp-f{grid-template-columns:1fr;gap:3px;padding:10px 11px}
  .dp-f-l{font-size:10px;text-transform:uppercase;letter-spacing:.5px}
  .dp-f-v{white-space:normal}
  .dp-f-r{white-space:normal;padding-top:3px;border-top:1px dashed var(--border)}
  .dp-keeps{grid-template-columns:1fr}
  .dp-g-b{grid-template-columns:1fr}
}

/* ============================================================
   Q133 — SOFT DELETE + TRASH
   ============================================================ */
.tr-sum{font-size:12px;color:var(--t2);line-height:1.7;margin:0}
.tr-sum b{color:var(--t1)}
.tr-sum code,.tr-need code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
.tr-n{font-size:11px;font-weight:700;color:var(--t2);background:var(--bg);border:1px solid var(--border);
  border-radius:20px;padding:2px 9px}
.tr-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 18px;border-bottom:1px solid var(--border)}
.tr-row:last-child{border-bottom:none}
.tr-main{flex:1;min-width:160px}
.tr-t{font-size:12.5px;font-weight:600;color:var(--t1)}
.tr-m{font-size:11px;color:var(--t2);margin-top:2px}
.tr-act{display:flex;gap:4px;margin-left:auto}
/* #b91c1c on light, #fca5a5 on dark — the house destructive pair. A one-off
   red here without the dark override is the exact defect Q126 found in
   .tg-del, so both are set together. */
.tr-danger{color:#b91c1c}
:root[data-theme="dark"] .tr-danger{color:#fca5a5}
.tr-need{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--t2);line-height:1.7}
.tr-need>svg{flex:none;color:var(--warn);margin-top:2px}
.tr-need b{color:var(--t1)}

@media(max-width:768px){
  .tr-act{margin-left:0;flex-basis:100%}
}

/* ============================================================
   Q115 — COMMAND PALETTE (⌘K)
   ============================================================ */
/* Its own fade rather than the toast's `tin`, which slides in from the RIGHT:
   correct for something anchored to the bottom-right corner, wrong for a
   centred overlay — and it left the panel measurably off-screen while the
   animation was paused. (Hidden tabs pause CSS animations; see the Q170 log.) */
@keyframes pal-fade{from{opacity:0}to{opacity:1}}
@keyframes pal-rise{from{opacity:0;transform:translateY(-6px) scale(.99)}to{opacity:1;transform:none}}
.pal-ov{position:fixed;inset:0;z-index:10000;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;animation:pal-fade .14s ease}
.pal{width:100%;max-width:600px;background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shlg);overflow:hidden;display:flex;flex-direction:column;max-height:70vh;animation:pal-rise .16s ease}
.pal-in{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--border)}
.pal-ic{line-height:0;color:var(--t2);flex:none}
.pal-in input{flex:1;border:none;background:none;outline:none;font-size:15px;font-weight:500;color:var(--t1);padding:0;min-width:0}
.pal-in input::placeholder{color:var(--t2);font-weight:400}
.pal-esc{flex:none}
.pal-list{overflow-y:auto;padding:6px}
.pal-g{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t2);padding:9px 10px 5px}
.pal-i{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:13px}
.pal-i.on{background:var(--bg)}
.pal-i.on .pal-i-t{color:var(--t1)}
.pal-i-ic{line-height:0;color:var(--t2);flex:none}
.pal-i-t{font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:55%}
.pal-i-s{font-size:11.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.pal-i-k{margin-left:auto;flex:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t2)}
.pal-none{padding:26px 18px;text-align:center;font-size:12.5px;color:var(--t2);line-height:1.7}
.pal-foot{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--border);background:var(--bg);
  font-size:11px;color:var(--t2)}
.pal-foot kbd,.pal-esc{display:inline-block;font-family:inherit;font-size:10px;font-weight:600;line-height:1.5;
  padding:1px 5px;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;background:var(--card);color:var(--t2)}
.pal-foot span{display:inline-flex;align-items:center;gap:4px}
:root[data-theme="dark"] .pal-ov{background:rgba(2,6,23,.6)}
@media(max-width:768px){
  .pal-ov{padding:0;align-items:stretch}
  .pal{max-width:none;max-height:none;height:100%;border-radius:0;border:none;animation:pal-fade .14s ease}
  .pal-i-t{max-width:none}
  .pal-i-s{display:none}
  .pal-foot{display:none}
  /* A 32px row is a fiddly target with a thumb. */
  .pal-i{padding:12px 10px;min-height:44px}
  .pal-in{padding:14px}
  .pal-in input{font-size:16px}          /* 16px stops iOS zooming the page on focus */
}

/* ============================================================
   Q116 — GLOBAL "+ NEW" MENU
   ============================================================ */
.nm-wrap{position:relative}
.nm{position:absolute;top:calc(100% + 6px);right:0;z-index:900;min-width:236px;padding:5px;
  background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shlg);
  display:none;flex-direction:column;gap:1px}
.nm.open{display:flex}
.nm-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 9px;border:none;
  background:none;border-radius:8px;cursor:pointer;color:var(--t1);font-family:inherit;min-height:44px}
.nm-i:hover,.nm-i:focus-visible{background:var(--bg);outline:none}
.nm-i:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.nm-i-ic{flex:none;line-height:0;color:var(--t2)}
.nm-i-b{display:flex;flex-direction:column;min-width:0}
.nm-i-b b{font-size:12.5px;font-weight:600;color:var(--t1)}
.nm-i-b i{font-style:normal;font-size:11px;color:var(--t2);margin-top:1px}
@media(max-width:768px){
  /* Anchored to the VIEWPORT, not to the button. The wrapper sits near the
     right edge of the header, so centring the panel on it (or hanging it off
     right:0) still pushed 70px of a 280px menu off a 375px screen — measured,
     not guessed. `top` is set from the button's real position when it opens,
     because the header height is not a constant worth hard-coding. */
  .nm{position:fixed;left:10px;right:10px;min-width:0;transform:none}
}

/* ============================================================
   Q142 — MORNING DIGEST ("Your Day" card)
   ============================================================ */
.dg-card{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--card)),var(--card))}
:root[data-theme="dark"] .dg-card{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--card)),var(--card))}
.dg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dg-head>svg{color:var(--accent);flex:none;margin-top:2px}
.dg-hi{font-size:18px;font-weight:800;color:var(--t1)}
.dg-sub{font-size:12px;color:var(--t2);margin-top:2px}
.dg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dg-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);
  background:var(--card);color:var(--t2);font-size:12px;font-family:inherit;cursor:pointer;transition:all .15s}
.dg-chip:hover{border-color:var(--accent);color:var(--t1)}
.dg-chip b{color:var(--t1);font-weight:700}
.dg-sec{margin-top:14px}
.dg-sec-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--t3);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.dg-sec-h svg{color:var(--t3)}
.dg-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.dg-sec .dg-row:last-child{border-bottom:none}
.dg-row .dg-t{flex:none;font-weight:700;color:var(--accent);font-size:11.5px;min-width:64px}
.dg-row .dg-l{flex:1;min-width:0;color:var(--t1);overflow-wrap:anywhere}
.dg-row>.btn{flex:none}

/* ============================================================
   Q148 — AI DAILY BRIEFING (dashboard flagship card)
   ============================================================ */
.br-card{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--card)),var(--card))}
:root[data-theme="dark"] .br-card{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--card)),var(--card))}
.br-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.br-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--t1)}
.br-title svg{color:var(--accent);flex:none}
.br-gen{flex:none}
.br-summary{margin-top:12px;font-size:13.5px;font-weight:600;color:var(--t1);line-height:1.45}
.br-summary-idle{font-weight:500;color:var(--t2)}
.br-summary-idle b{color:var(--t1)}
.br-clear{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--t2)}
.br-clear svg{color:var(--accent);flex:none}
.br-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.br-row:last-child{border-bottom:none}
.br-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-tx);margin-top:1px}
.br-main{flex:1;min-width:0}
.br-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.br-nm{font-weight:700;color:var(--t1);font-size:13px;overflow-wrap:anywhere}
.br-kind{font-size:11px;color:var(--t3)}
.br-urg{font-size:10px}
.br-why{font-size:12.5px;color:var(--t2);margin-top:2px;line-height:1.4;overflow-wrap:anywhere}
.br-act{flex:none;white-space:nowrap;margin-top:1px}
.br-more-h{margin-top:14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--t3)}
.br-foot{margin-top:12px;font-size:11.5px;color:var(--t3);line-height:1.45}
.br-foot svg{vertical-align:-1px;margin-right:2px;color:var(--t3)}
.br-foot b{color:var(--t2)}
@media(max-width:640px){
  .br-row{flex-wrap:wrap}
  .br-act{margin-top:4px;margin-left:38px}
}

/* ============================================================
   Q149 — AI MEETING PREP (brief modal)
   ============================================================ */
.mp-body{display:flex;flex-direction:column;gap:2px}
.mp-sec{padding:12px 0;border-bottom:1px solid var(--border)}
.mp-sec:last-child{border-bottom:none}
.mp-sec-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--t3);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.mp-sec-h svg{color:var(--accent)}
.mp-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mp-name{font-size:15px;font-weight:800;color:var(--t1);cursor:pointer}
.mp-name:hover{color:var(--accent)}
.mp-sub{font-size:12.5px;color:var(--t2);margin-top:3px;overflow-wrap:anywhere}
.mp-lines{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--t1)}
.mp-lines b{font-weight:700}
.mp-empty{font-size:12.5px;color:var(--t3);display:flex;align-items:center;gap:6px}
.mp-empty svg{color:var(--warn,#f59e0b);flex:none}
.mp-deal{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mp-deal-nm{font-weight:700}
.mp-deal-v{color:var(--accent);font-weight:700}
.mp-deal-cl{color:var(--t3);font-size:11.5px}
.mp-ex{display:flex;align-items:baseline;gap:8px;line-height:1.4}
.mp-dir{flex:none;font-size:10px;font-weight:800;padding:1px 5px;border-radius:4px;letter-spacing:.02em}
.mp-in{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-tx)}
.mp-out{background:color-mix(in srgb,var(--t3) 18%,transparent);color:var(--t2)}
.mp-log{background:color-mix(in srgb,var(--t3) 12%,transparent);color:var(--t3)}
.mp-ex-t{flex:none;color:var(--t3);font-size:11.5px;min-width:52px}
.mp-ex-x{flex:1;min-width:0;color:var(--t1);overflow-wrap:anywhere}
.mp-summary{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:8px;line-height:1.45}
.mp-tp{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.mp-tp li{font-size:13px;color:var(--t1);line-height:1.45;overflow-wrap:anywhere}
.mp-tp li::marker{color:var(--accent)}
.mp-loading{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2)}
.mp-foot{flex:1;font-size:11px;color:var(--t3);display:inline-flex;align-items:center;gap:4px}
.mp-foot svg{color:var(--t3)}

/* ============================================================
   Q141 — HOT-MOMENT ALERTS (header bell + panel)
   ============================================================ */
.ntf-wrap{position:relative;display:inline-flex}
#ntf-btn{position:relative}
.ntf-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--danger,#ef4444);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--card);pointer-events:none}
.ntf-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:900;width:340px;max-width:calc(100vw - 20px);
  background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shlg);
  display:none;max-height:min(560px,80vh);overflow-y:auto}
.ntf-panel.open{display:block}
.ntf-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;font-size:13px;font-weight:700;color:var(--t1);position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--border)}
.ntf-clear{background:none;border:none;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;color:var(--t2)}
.ntf-clear:hover{color:var(--accent)}
.ntf-sec{padding:8px 14px 2px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--t3)}
/* Q168 — a section header that carries its own action (Mark all read) */
.ntf-sec-hd{display:flex;align-items:center;justify-content:space-between}
.ntf-sec-hd .ntf-clear{text-transform:none;letter-spacing:normal}
.ntf-list{display:flex;flex-direction:column}
.ntf-i{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border)}
.ntf-i:last-child{border-bottom:none}
.ntf-i:hover{background:var(--bg)}
/* Q168 — a durable, unread notification carries a faint accent bar so the
   "you missed this" events read apart from the derived engagement moments. */
.ntf-durable{border-left:2px solid var(--accent)}
.ntf-i-ic{flex:none;line-height:0;margin-top:1px;color:var(--t2)}
.ntf-i-ic.ntf-open{color:var(--accent)}
.ntf-i-ic.ntf-reply,.ntf-i-ic.ntf-quote_question,.ntf-i-ic.ntf-portal_message{color:#3b82f6}
.ntf-i-ic.ntf-portal_upload{color:var(--accent)}
.ntf-i-ic.ntf-date{color:var(--accent)}
.ntf-i-ic.ntf-appt{color:var(--accent2)}   /* Q160 — matches the calendar's appointment accent */
.ntf-i-ic.ntf-booking{color:var(--accent2)}   /* Q168 — a booking is a calendar event */
.ntf-i-ic.ntf-reminder{color:var(--accent2)}
.ntf-i-ic.ntf-task_due{color:#3b82f6}
/* Q170 — install nudge (a dismissible bottom banner, never over the nav) */
.install-nudge{position:fixed;left:16px;right:16px;bottom:16px;z-index:1400;display:flex;align-items:center;gap:12px;
  max-width:440px;margin:0 auto;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.18);transform:translateY(140%);opacity:0;transition:transform .25s ease,opacity .25s ease}
.install-nudge.show{transform:translateY(0);opacity:1}
.install-nudge .inl-ic{flex:none;line-height:0;color:var(--accent)}
.install-nudge .inl-b{display:flex;flex-direction:column;min-width:0;flex:1}
.install-nudge .inl-b b{font-size:13px;font-weight:600;color:var(--t1)}
.install-nudge .inl-b span{font-size:11.5px;color:var(--t2);margin-top:1px;overflow-wrap:anywhere}
.install-nudge .inl-x{flex:none;background:none;border:none;cursor:pointer;color:var(--t3);line-height:0;padding:4px;border-radius:6px}
.install-nudge .inl-x:hover{color:var(--t1);background:var(--bg)}
@media (max-width:768px){ .install-nudge{bottom:calc(64px + env(safe-area-inset-bottom,0px))} }  /* clear the mobile nav bar */
/* if the install nudge and the push nudge are both up, stack them (rare, but
   two bottom-docked bars must not overlap). The push one rides above. */
#install-nudge ~ #push-nudge{bottom:84px}
@media (max-width:768px){ #install-nudge ~ #push-nudge{bottom:calc(132px + env(safe-area-inset-bottom,0px))} }
/* PW-6 — the nudge is z-1400 and a sheet is z-220, so an open drawer had the
   nudge sitting ON TOP of it, covering two rows (measured 2026-08-23). A
   bottom-docked thing yields to whatever the owner just opened — the same
   rule body.mtg-live already applies to it. */
body.sheet-open .install-nudge{display:none}
/* PW-8 — and a flow sheet, for the same reason: the nudge covered Delete on
   the contact form. Every bottom-docked element now yields to the three
   things that can open over it — a recording, a sheet, a flow. */
body.flow-open .install-nudge{display:none}
body.flow-open .toast-c{z-index:1600}   /* a toast about the save must clear the sheet it came from */
/* Q193 — in-app help panel + first-use tips. Uses the same theme tokens as the
   command palette so it is dark-safe for free. */
.help-ov{position:fixed;inset:0;z-index:10001;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;animation:pal-fade .14s ease}
:root[data-theme="dark"] .help-ov{background:rgba(2,6,23,.6)}
.help-dlg{width:100%;max-width:560px;background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shlg);overflow:hidden;display:flex;flex-direction:column;max-height:78vh;animation:pal-rise .16s ease}
.help-head{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--border)}
.help-head .help-ic{line-height:0;color:var(--accent);flex:none}
.help-head b{font-size:14px;color:var(--t1)}
.help-head .help-x{margin-left:auto;flex:none;background:none;border:none;cursor:pointer;color:var(--t2);line-height:0;padding:5px;border-radius:7px}
.help-head .help-x:hover{color:var(--t1);background:var(--bg)}
.help-search{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border)}
.help-search .help-sic{line-height:0;color:var(--t2);flex:none}
.help-search input{flex:1;border:none;background:none;outline:none;font-size:14px;color:var(--t1);padding:0;min-width:0}
.help-search input::placeholder{color:var(--t2)}
.help-list{overflow-y:auto;padding:6px 6px 10px}
.help-g{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t2);padding:11px 10px 4px}
.help-i{border-radius:10px}
.help-i-h{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:10px;border:none;background:none;cursor:pointer;border-radius:10px}
.help-i-h:hover{background:var(--bg)}
.help-i-ic{line-height:0;color:var(--t2);flex:none}
.help-i-t{font-weight:600;font-size:13px;color:var(--t1);flex:1;min-width:0}
.help-i-cv{line-height:0;color:var(--t2);flex:none}
.help-i-b{display:none;padding:0 10px 12px 34px}
.help-i.open .help-i-b{display:block}
.help-i-b p{font-size:12.5px;line-height:1.65;color:var(--t2);margin:0 0 8px}
.help-i-b p:last-child{margin-bottom:0}
.help-none{padding:26px 18px;text-align:center;font-size:12.5px;color:var(--t2);line-height:1.7}
.help-foot{display:flex;gap:16px;padding:10px 14px;border-top:1px solid var(--border);background:var(--bg)}
.help-link{background:none;border:none;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--accent);padding:0}
.help-link:hover{text-decoration:underline}
.help-tip{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:11px 12px;border-radius:12px;
  background:var(--accent-soft);border:1px solid var(--accent);
  transform:translateY(-6px);opacity:0;transition:transform .2s ease,opacity .2s ease}
.help-tip.show{transform:translateY(0);opacity:1}
.help-tip .help-tip-ic{line-height:0;color:var(--accent);flex:none;margin-top:1px}
.help-tip .help-tip-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.help-tip .help-tip-b b{font-size:13px;color:var(--t1)}
.help-tip .help-tip-b span{font-size:12px;color:var(--t2);line-height:1.55}
.help-tip .help-tip-more{flex:none;align-self:center;background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:5px 11px;font-size:11.5px;font-weight:600;color:var(--t1);cursor:pointer}
.help-tip .help-tip-more:hover{border-color:var(--accent)}
.help-tip .help-tip-x{flex:none;background:none;border:none;cursor:pointer;color:var(--t2);line-height:0;padding:4px;border-radius:6px}
.help-tip .help-tip-x:hover{color:var(--t1)}
@media(max-width:768px){
  .help-ov{padding:0;align-items:stretch}
  .help-dlg{max-width:none;max-height:none;height:100%;border-radius:0;border:none}
  .help-tip{flex-wrap:wrap}
  .help-tip .help-tip-more{order:3}
}
/* Q195 — theming: sidebar logo variants + the Branding settings card */
#sb .sb-logo .sb-logo-img{max-width:150px;max-height:44px;object-fit:contain;display:block}
/* the theme's own ink in BOTH themes (2026-09-26): this was #fff with a dark-only override, from the days of a dark
   sidebar, so in light theme a business with no logo saw its name white on a white sidebar, an empty header. Nametech
   never saw it (it has a logo); every new customer starts without one. Measured: rgb(255,255,255) on rgb(255,255,255). */
#sb .sb-logo .sb-logo-name{font-size:19px;font-weight:800;line-height:1.15;color:var(--t1);word-break:break-word}
.theme-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);margin:0 0 8px}
.theme-sws{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.theme-sw{width:30px;height:30px;border-radius:8px;border:2px solid var(--border);cursor:pointer;padding:0;position:relative}
.theme-sw.on{border-color:var(--t1);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--t1)}
.theme-custom{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.theme-cl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer}
.theme-cl input[type=color]{width:34px;height:28px;border:1px solid var(--border);border-radius:7px;background:none;cursor:pointer;padding:2px}
.theme-logo-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.theme-logo-prev{max-width:120px;max-height:40px;object-fit:contain;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:4px}
/* Q194 — feedback widget */
.fb-seg{display:flex;gap:8px}
.fb-seg-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--card);color:var(--t2);font-size:12.5px;font-weight:600;cursor:pointer}
.fb-seg-b svg{color:var(--t2)}
.fb-seg-b.on{border-color:var(--accent);background:var(--accent-soft);color:var(--t1)}
.fb-seg-b.on svg{color:var(--accent)}
.fb-ctx{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:11.5px;color:var(--t3);line-height:1.5}
.fb-ctx b{color:var(--t2);font-weight:600}
.fb-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
/* Q192 — demo-mode banner. Amber (NOT the brand green #10b981, which stays as
   it is) so "this is a demo" reads at a glance. A fixed top bar; the demo-mode
   body class pushes the fixed sidebar and the sticky header + main below it. */
#demo-banner{position:fixed;top:0;left:0;right:0;height:34px;z-index:300;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 12px;background:#b45309;color:#fff;font-size:12px;letter-spacing:.02em;box-shadow:0 1px 8px rgba(0,0,0,.28)}
#demo-banner b{font-weight:800;letter-spacing:.06em}
#demo-banner .demo-dot{width:8px;height:8px;border-radius:50%;background:#fde68a;box-shadow:0 0 0 0 rgba(253,230,138,.7);animation:demoPulse 2s infinite}
#demo-banner .demo-sub{color:#fde9c8;font-weight:500}
#demo-banner .demo-exit{margin-left:6px;flex:none;background:#fff;color:#b45309;border:none;border-radius:8px;
  padding:4px 12px;font-size:11.5px;font-weight:700;cursor:pointer}
#demo-banner .demo-exit:hover{background:#fff7ed}
@keyframes demoPulse{0%{box-shadow:0 0 0 0 rgba(253,230,138,.6)}70%{box-shadow:0 0 0 6px rgba(253,230,138,0)}100%{box-shadow:0 0 0 0 rgba(253,230,138,0)}}
body.demo-mode #sb{top:34px;height:calc(100vh - 34px)}
body.demo-mode #main{margin-top:34px}
body.demo-mode #chrome-top{top:34px}
@media (max-width:640px){ #demo-banner .demo-sub{display:none} }
/* Q169 — web push settings card */
.push-gate{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.push-gate svg{flex:none;margin-top:1px;color:var(--accent2)}
.push-gate b{display:block;font-size:12.5px;color:var(--t1);margin-bottom:3px}
.push-gate span{display:block;font-size:11.5px;color:var(--t2);line-height:1.5}
.push-gate code{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:var(--card);padding:1px 5px;border-radius:4px;border:1px solid var(--border)}
.push-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 0}
.push-status.push-on{color:var(--accent)}
.push-status.push-off{color:var(--t3)}
/* WHO RECEIVES A PUSH (2026-09-11): the devices a push would actually reach, so
   "sent to 0 devices" is visible before it happens (js/push.js pushReachHTML) */
.push-devs{margin-top:12px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.push-devs-t{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:9px 14px 7px;background:var(--bg)}
.push-dev{display:flex;align-items:center;gap:9px;padding:9px 14px;border-top:1px solid var(--border);font-size:12.5px;color:var(--t1)}
.push-dev svg{flex:none;color:var(--t3)}
.push-dev b{font-weight:650}
.push-dev i{display:block;font-style:normal;font-size:11px;color:var(--t3);margin-top:1px}
.push-dev.mine{background:var(--accent-bg)}
.push-dev.mine svg{color:var(--accent-tx)}
.push-dev-w{background:var(--warn-bg);color:var(--warn-tx)}
.push-dev-w svg{color:var(--warn-tx)}
.push-dev-w b{color:inherit}
.push-prefs{margin-top:10px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.push-pref{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border)}
.push-pref:last-child{border-bottom:none}
.push-pref-l{font-size:12px;font-weight:600;color:var(--t1)}
.push-pref-d{font-size:11px;color:var(--t3);margin-top:1px}
.push-note{font-size:11px;color:var(--t3);line-height:1.5}
/* Q166 — iCal feed link row */
.ical-row{display:flex;gap:8px;align-items:center;margin-top:6px}
.ical-url{flex:1;min-width:0;font-size:12px;font-family:ui-monospace,Menlo,monospace;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--t1)}
/* Q161 — meeting-types list in Settings (distinct from templates' .mt-*). */
.mty-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.mty-row{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.mty-row.off{opacity:.72}
.mty-main{flex:1;min-width:0}
.mty-name{font-size:13px;font-weight:700;color:var(--t1)}
.mty-meta{font-size:11px;color:var(--t2);margin-top:2px}
.mty-acts{display:flex;flex-direction:column;gap:6px;flex-shrink:0;align-items:flex-end}
@media(max-width:640px){.mty-row{flex-direction:column}.mty-acts{flex-direction:row;flex-wrap:wrap;align-items:flex-start}}
/* Q163 — meeting outcomes: modal chips + contact-timeline section + no-show flag. */
.ap-oc-chips{display:flex;gap:8px;flex-wrap:wrap}
.ap-oc{padding:7px 14px;border:1px solid var(--border);border-radius:9px;background:var(--bg);font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer}
.ap-oc:hover{border-color:var(--t3)}
.ap-oc.on{color:#fff;border-color:transparent}
.ap-oc.on.b-active{background:var(--accent)}
.ap-oc.on.b-high{background:#ef4444}
.ap-oc.on.b-inactive{background:var(--t3)}
.oc-sec{margin-bottom:14px}
.oc-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:8px}
.ns-flag{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:9px;padding:9px 11px;margin-bottom:10px}
:root[data-theme="dark"] .ns-flag{color:#fcd34d;background:rgba(180,83,9,.12);border-color:rgba(252,211,77,.3)}
.oc-tl{display:flex;flex-direction:column;gap:8px}
.oc-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--bg);cursor:pointer}
.oc-row:hover{border-color:var(--t3)}
.oc-main{flex:1;min-width:0}
.oc-title{font-size:12.5px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-when{font-size:11px;color:var(--t3);margin-top:2px}
.oc-note{font-size:11.5px;color:var(--t2);margin-top:4px;white-space:pre-line}
.oc-right{flex-shrink:0}
.oc-set{font-size:11px;font-weight:600;color:var(--accent)}
/* Q147 — recap draft affordances. */
.oc-recap{margin-top:6px;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--accent);background:none;border:none;padding:0;cursor:pointer}
.oc-recap:hover{text-decoration:underline}
.ap-recap{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ap-recap-done{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--accent)}
/* 2026-10-04 — the recap shown on the client's portal (apPortalRecapHtml) */
.ap-portal-recap{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.ap-portal-recap>label{font-size:12px;font-weight:600;color:var(--t2)}
.ap-recap-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ap-recap-share{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--t1);cursor:pointer;white-space:nowrap}
.ap-recap-share input{width:auto;flex:none;margin:0}   /* the modal's input rule stretched the box and wrapped the label (seen in the 1x capture) */
.ap-recap-hint{font-size:11.5px;color:var(--t3);line-height:1.45}
/* Q165 — linked-task rollups on deal/project pages + the appointment modal. */
.tl-inline{margin-top:6px}
.tl-list{display:flex;flex-direction:column;gap:6px}
.tl-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);cursor:pointer}
.tl-row:hover{border-color:var(--t3)}
.tl-dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--t3);flex-shrink:0}
.tl-dot.on{background:var(--accent);border-color:var(--accent)}
.tl-t{flex:1;min-width:0;font-size:12.5px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-row.done .tl-t{text-decoration:line-through;color:var(--t3)}
.tl-due{font-size:11px;color:var(--t3);flex-shrink:0}
/* Q167 — availability editor (Settings) + calendar shading. */
.av-days{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.av-day{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.av-dl{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;min-width:130px;cursor:pointer}
.av-range{display:inline-flex;align-items:center;gap:7px}
.av-range select{padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--t1);font-size:12px}
.av-to{font-size:11px;color:var(--t3)}
.av-blocked{margin-top:12px}
.av-blocked>label{font-size:12px;font-weight:600;color:var(--t2);display:block;margin-bottom:6px}
.av-add{display:flex;gap:8px;align-items:center}
.av-add input{padding:6px 9px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--t1);font-size:12px}
.av-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.av-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:4px 6px 4px 11px;color:var(--t1)}
.av-x{border:none;background:none;color:var(--t3);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.av-x:hover{color:var(--danger)}
.av-none{font-size:12px;color:var(--t3)}
.cal-slot-off{background:repeating-linear-gradient(135deg,var(--bg),var(--bg) 6px,transparent 6px,transparent 12px);opacity:.55}
.cal-col-off{background:var(--bg)}
.cal-off-lbl{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);pointer-events:none;z-index:1}
.ntf-i-b{display:flex;flex-direction:column;min-width:0;flex:1}
.ntf-i-b b{font-size:12.5px;font-weight:600;color:var(--t1);overflow-wrap:anywhere}
.ntf-i-b i{font-style:normal;font-size:11px;color:var(--t2);margin-top:1px;overflow-wrap:anywhere}
.ntf-i-t{font-size:10px;color:var(--t3);margin-top:3px}
.ntf-i-act{flex:none;display:flex;align-items:center;gap:2px}
.ntf-x{background:none;border:none;cursor:pointer;color:var(--t3);padding:4px;border-radius:6px;line-height:0}
.ntf-x:hover{background:var(--bg);color:var(--t1)}
.ntf-more{padding:9px 14px;font-size:11px;font-weight:600;color:var(--accent);cursor:pointer;border-bottom:1px solid var(--border)}
.ntf-more:hover{background:var(--bg)}
.ntf-empty{padding:28px 16px;text-align:center;color:var(--t3)}
.ntf-empty svg{color:var(--t3);opacity:.6}
.ntf-empty p{font-size:13px;font-weight:600;color:var(--t2);margin:8px 0 2px}
.ntf-empty span{font-size:11px;color:var(--t3)}
.ntf-foot{padding:10px 14px;border-top:1px solid var(--border);background:var(--bg)}
.ntf-foot p{font-size:10.5px;color:var(--t3);line-height:1.5;margin:0 0 6px}
.ntf-foot p:last-child{margin-bottom:0}
.ntf-foot code{font-size:10px;background:var(--card);padding:1px 4px;border-radius:4px;border:1px solid var(--border)}
@media(max-width:768px){
  .ntf-panel{position:fixed;left:10px;right:10px;width:auto;max-width:none}
}

/* ============================================================
   Q174 — OFFLINE ACTION QUEUE (header pill + review panel)
   The pill appears in .head-actions only while the outbox is non-empty; the
   panel reuses .ntf-panel/.ntf-i so it is theme-aware and dark-safe for free.
   ============================================================ */
.of-wrap{position:relative;display:inline-flex}
.of-pill{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:11px;font-weight:600;
  padding:5px 10px;border-radius:20px;cursor:pointer;border:1px solid var(--border);
  background:var(--bg);color:var(--t2)}
.of-pill svg{width:14px;height:14px}
.of-pill:hover{color:var(--t1);border-color:var(--t3)}
.of-pill.of-off{background:#fef3c7;color:#92400e;border-color:transparent}
.of-pill.of-has-fail{background:#fee2e2;color:#991b1b;border-color:transparent}
:root[data-theme="dark"] .of-pill.of-off{background:rgba(245,158,11,.16);color:#fbbf24}
:root[data-theme="dark"] .of-pill.of-has-fail{background:rgba(239,68,68,.16);color:#fca5a5}
.of-note{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;font-size:11.5px;line-height:1.5;
  color:var(--t2);background:var(--bg);border-bottom:1px solid var(--border)}
.of-note svg{flex:none;margin-top:2px;color:var(--t3)}
.ntf-i.of-failed{background:rgba(239,68,68,.05)}
.ntf-i-ic.of-ic-fail{color:var(--danger,#ef4444)}
.of-b{font-family:inherit;font-size:11px;font-weight:600;padding:4px 8px;border-radius:7px;cursor:pointer;
  border:1px solid var(--border);background:var(--card);color:var(--t2)}
.of-b:hover{color:var(--t1);border-color:var(--t3)}
.of-b-x:hover{color:var(--danger,#ef4444);border-color:var(--danger,#ef4444)}

/* ============================================================
   Q118 — SAVED VIEWS (contacts tab strip)

   Deliberately NO colour in the tab states. The strip sits on the page
   background where `--t3` measures 4.48:1 and misses AA, so every label and
   count is `--t2` or `--t1`; and the selected state is a raised card rather
   than an accent underline, because white-on-#10b981 / #10b981-on-white is
   2.54:1 and the brand green is still an open owner decision (Q122). This
   adds NOTHING to the flip list — the same rule Q117 and Q130 followed.

   "Modified" is a DASHED border, not a coloured dot: a 6px #f59e0b dot is
   2.15:1 against the card and would be a state indicator failing the 3:1 that
   non-text UI components need. The dashed edge, the live count and the
   explicit "Update view" button say it three ways, none of them by colour.
   ============================================================ */
.sv-bar{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:0 0 12px}
.sv-tab{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:none;
  color:var(--t2);font-family:inherit;font-size:12px;font-weight:600;padding:6px 11px;
  border-radius:8px;cursor:pointer;line-height:18px}
.sv-tab:hover{background:var(--hover);color:var(--t1)}
.sv-tab.on{background:var(--card);border-color:var(--border);color:var(--t1);box-shadow:var(--sh)}
.sv-tab.on.dirty{border-style:dashed}
.sv-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sv-n{font-size:10px;font-weight:700;color:var(--t2);background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:0 6px;line-height:15px;min-width:20px;text-align:center}
.sv-tab.on .sv-n{background:var(--bg);border-color:transparent}

.sv-acts{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.sv-act{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--card);
  color:var(--t2);font-family:inherit;font-size:11px;font-weight:600;padding:5px 10px;
  border-radius:7px;cursor:pointer;line-height:16px}
.sv-act:hover{border-color:var(--accent);color:var(--t1)}
.sv-act:focus-visible,.sv-ico:focus-visible,.sv-sugb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sv-ico{border:1px solid var(--border);background:var(--card)}
.sv-ico:hover{border-color:var(--accent)}

/* Shown only while the owner has no saved views, and every one of them is
   derived from their real data and proved non-empty first (svSuggestions()).
   Dashed, because they are an offer rather than a thing that exists yet. */
.sv-sug{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:2px}
.sv-sug-l{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.sv-sugb{border:1px dashed var(--border);background:var(--card);color:var(--t2);font-family:inherit;font-size:11px;
  font-weight:600;padding:4px 10px;border-radius:20px;cursor:pointer;line-height:16px}
.sv-sugb:hover{border-style:solid;border-color:var(--accent);color:var(--t1)}

.sv-hint{font-size:12px;color:var(--t2);margin-top:10px;line-height:1.5}
/* #b91c1c NEEDS ITS DARK PAIR — 6.47:1 on the light card but 2.65:1 on the
   dark one. This is the defect Q127 shipped to production in `.tg-del`; the
   rule is now: a new #b91c1c always ships with #fca5a5 beside it. */
.sv-err{margin-top:10px;font-size:12px;font-weight:600;color:#b91c1c}
:root[data-theme="dark"] .sv-err{color:#fca5a5}

@media(max-width:768px){
  /* Real thumb targets. A 30px tab beside a desktop table row is fine; on a
     phone it is under half a thumb — the same measurement that moved Q117's
     CTAs from 23px to 44px and Q170's dismiss from 16px. */
  .sv-tab,.sv-act,.sv-sugb{min-height:44px;padding-top:0;padding-bottom:0}
  .sv-ico{min-height:44px;min-width:44px;justify-content:center}
  /* margin-left:auto on a wrapped row strands the actions alone on their own
     line; inline is what fits a 375px screen. */
  .sv-acts{margin-left:0}
}

/* ============================================================
   Q119 — BULK ACTIONS (contacts list)

   The checkbox uses `accent-color: var(--accent)` deliberately: it resolves
   the brand token, so it flips with the same one-line edit as everything else
   on the Q122 list rather than becoming a one-off colour to unpick later. It
   is recorded there. Everything else here is `--t1`/`--t2` on a card, and the
   destructive action ships with its `#fca5a5` dark pair in the same rule.
   ============================================================ */
.bk-cell{width:1%;white-space:nowrap;padding-right:0;cursor:default}
.bk-cb{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--accent);vertical-align:middle}
.bk-cb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* A tinted row, not a coloured one: the tick is the state, this is only the
   confirmation that your eye is on the right line. */
tr.bk-on>td{background:var(--hover)}

.bk-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;margin-bottom:12px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--sh)}
.bk-n{font-size:12px;font-weight:700;color:var(--t1);padding:0 6px 0 4px}
.bk-a{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--card);
  color:var(--t2);font-family:inherit;font-size:11px;font-weight:600;padding:6px 10px;
  border-radius:7px;cursor:pointer;line-height:16px}
.bk-a:hover:not([disabled]){border-color:var(--accent);color:var(--t1)}
.bk-a[disabled]{opacity:.5;cursor:not-allowed}
.bk-a:focus-visible,.bk-clear:focus-visible,.bk-stage:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bk-del{color:#b91c1c}
.bk-del:hover:not([disabled]){border-color:#b91c1c;color:#b91c1c}
:root[data-theme="dark"] .bk-del{color:#fca5a5}
:root[data-theme="dark"] .bk-del:hover:not([disabled]){border-color:#fca5a5;color:#fca5a5}
.bk-clear{margin-left:auto;border:none;background:none;color:var(--t2);font-family:inherit;font-size:11px;
  font-weight:600;padding:6px 8px;border-radius:7px;cursor:pointer}
.bk-clear:hover{background:var(--bg);color:var(--t1)}

.bk-stages{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.bk-stage{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1px solid var(--border);
  background:var(--card);border-radius:9px;cursor:pointer;font-family:inherit;text-align:left;min-height:44px}
.bk-stage:hover{border-color:var(--accent);background:var(--hover)}
.bk-stage i{font-style:normal;font-size:11px;color:var(--t2);margin-left:auto}

/* N9 — the floating bulk-assess sweep panel. Fixed so it survives view changes
   while the sweep runs in the background; theme-aware via vars. */
.as-sweep{position:fixed;right:16px;bottom:16px;z-index:1400;width:270px;max-width:calc(100vw - 32px);
  background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh);
  padding:12px 13px;font-size:12px;color:var(--t1)}
.as-sweep-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.as-sweep-h b{font-size:13px}
.as-sweep-h span{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.as-sweep-bar{height:6px;background:var(--bg);border-radius:4px;overflow:hidden}
.as-sweep-bar>div{height:100%;background:var(--accent);border-radius:4px;transition:width .3s ease}
.as-sweep-s{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px;font-size:11px}
.as-sweep-ok{color:var(--accent);font-weight:600}
.as-sweep-bad{color:#dc2626;font-weight:600}
:root[data-theme="dark"] .as-sweep-bad{color:#fca5a5}
.as-sweep-skip{color:var(--t3)}
.as-sweep-cur{margin-top:7px;font-size:11px;color:var(--t2);display:flex;align-items:center;gap:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-sweep-f{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
@media (max-width:640px){.as-sweep{left:16px;right:16px;width:auto;bottom:76px}}

/* N10 — per-finding action buttons (task / talking point) under each finding. */
.as-fa{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.as-fa .btn{font-size:10px;padding:3px 8px}

@media(max-width:768px){
  .bk-a,.bk-clear{min-height:44px;padding-top:0;padding-bottom:0}
  .bk-clear{margin-left:0}
  /* A 16px tick target is half a thumb, and it sits in a row where every
     other pixel opens the contact. The CELL is the target (bkCellClick), so
     the box only has to be visible -- the cell is what has to be 44px. */
  .bk-cell{padding:10px 8px 10px 14px;min-width:44px}
  .bk-cb{width:20px;height:20px}
}

/* ============================================================
   Q120 — INLINE TABLE EDITING

   An editable cell must be DISCOVERABLE WITHOUT BEING NOISY. Every value in
   this table would be underlined if the affordance were always on, which
   turns a scannable list into a page of links. It is a hover/focus dotted
   underline instead: invisible while reading, obvious the moment the pointer
   is anywhere near, and always present for the keyboard via :focus-visible.
   No colour is used for the state, so nothing here touches Q122.
   ============================================================ */
.ie{display:inline-block;max-width:100%;border-radius:4px;cursor:text;
  border-bottom:1px dashed transparent;margin-bottom:-1px}
.ie:hover{border-bottom-color:var(--t3)}
.ie:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-bottom-color:transparent}
.ie-empty{font-style:normal;color:var(--t3)}
.ie:hover .ie-empty{color:var(--t2)}
.ie-wrap{display:block}
.ie-inp{width:100%;min-width:90px;max-width:220px;padding:4px 7px;font-family:inherit;font-size:12px;
  color:var(--t1);background:var(--input);border:1px solid var(--accent);border-radius:6px;outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.ie-inp:focus{outline:none}
@media(max-width:768px){
  /* A dashed underline nobody can hover is a secret: on touch the affordance
     is always visible.
     36px, not 44px, and that is a considered number rather than a miss. The
     44px used for every BUTTON in this app is the Apple/AAA guideline; WCAG
     2.5.8 at AA asks for 24x24, and an inline-edit hotspot is a shortcut with
     a full alternative path one tap away (the row opens the contact, which
     opens the editor). Forcing 44px onto three inline spans inside a row that
     is already ~124px tall on a phone would add height to every row in the
     table to speed up a secondary action. */
  .ie{border-bottom-color:var(--border);min-height:36px;display:inline-flex;align-items:center;padding:0 3px}
  .ie-inp{font-size:16px;min-height:40px}   /* 16px stops iOS zooming the page on focus */
}

/* ============================================================
   Q121 — TABLE CUSTOMIZATION: column chooser + density

   The panel deliberately borrows the "+ New" menu's shape (js/palette.js /
   .nm) rather than inventing a third popover look: same card, same radius,
   same shadow, same viewport pinning on a phone. Density is a <body> class,
   not a table class, because it is a statement about how the owner wants to
   read the whole app — every .tbl-wrap in every view follows it.
   Nothing here resolves --accent for TEXT, so Q122's brand-green decision
   changes only the checkbox tint and the focus rings, exactly as everything
   else already does.
   ============================================================ */
/* Matches the height of the filter controls it stands beside by STRETCHING to
   the row, not by hard-coding a number. A hard-coded 33px looked right and was
   measurably 0.5px taller than the 32.5px selects, which pushed every one of
   the 287 nodes below it half a pixel down — invisible, and a 294-node
   fingerprint diff. Stretching is correct at every breakpoint and cannot drift
   when the controls are restyled. */
.tc-wrap{position:relative;margin-left:auto;align-self:stretch;display:flex}
#tc-btn{height:100%}
#tc-btn.on{box-shadow:inset 0 0 0 1px var(--accent)}
.tc-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:900;width:296px;
  max-height:min(70vh,520px);overflow-y:auto;padding:11px;
  background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shlg);display:none}
.tc-pop.open{display:block}
.tc-sec+.tc-sec{margin-top:13px}
.tc-sec-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);margin-bottom:7px}
.tc-n{font-weight:600;font-size:11px;text-transform:none;letter-spacing:0;color:var(--t2)}
.tc-seg{display:flex;gap:4px;background:var(--bg);border-radius:9px;padding:3px}
.tc-segb{flex:1;min-height:34px;border:none;background:none;border-radius:7px;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer}
.tc-segb.on{background:var(--card);color:var(--t1);box-shadow:var(--sh)}
.tc-segb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tc-list{display:flex;flex-direction:column;gap:1px}
.tc-row{display:flex;align-items:center;gap:6px;padding:2px 4px;border-radius:8px}
.tc-row:hover{background:var(--bg)}
.tc-lab{display:flex;align-items:center;gap:9px;flex:1;min-width:0;min-height:34px;
  cursor:pointer;font-size:12.5px;color:var(--t1)}
.tc-row.tc-fixed .tc-lab{cursor:default;color:var(--t2)}
.tc-cb{flex:none;width:15px;height:15px;margin:0;accent-color:var(--accent);cursor:pointer}
.tc-cb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tc-lab-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-tag{flex:none;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--t2);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
.tc-mv{display:flex;gap:2px;flex:none}
.tc-mvb{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:none;border-radius:6px;color:var(--t2);cursor:pointer;line-height:0}
.tc-mvb:hover:not([disabled]){background:var(--hover);border-color:var(--border);color:var(--t1)}
.tc-mvb[disabled]{opacity:.32;cursor:default}
.tc-mvb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tc-foot{display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:9px;border-top:1px solid var(--border)}
.tc-foot-n{font-size:11px;line-height:1.35;color:var(--t2)}
.tc-reset{margin-left:auto;flex:none;min-height:32px;padding:0 11px;
  border:1px solid var(--border);background:var(--card);border-radius:8px;
  font-family:inherit;font-size:11.5px;font-weight:600;color:var(--t2);cursor:pointer}
.tc-reset:hover:not([disabled]){color:var(--t1);border-color:var(--t3)}
.tc-reset[disabled]{opacity:.45;cursor:default}
.tc-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Cell bits the new columns need. --t3 is the measured-safe muted token. */
.tc-dash{color:var(--t3)}
.tc-score{font-variant-numeric:tabular-nums;font-weight:600}

/* Density. Padding and type size only — nothing moves, nothing is hidden, so
   switching back and forth cannot lose information. .bk-cell keeps its zero
   right padding, which the more specific rule below would otherwise win. */
body.tc-compact th{padding:6px 12px}
body.tc-compact td{padding:6px 12px;font-size:11.5px}
body.tc-compact .bk-cell{padding-right:0}

@media(max-width:768px){
  /* A BOTTOM SHEET, NOT A DROPDOWN, AND IT IS A CORRECTION.
     The Q116 "+ New" menu hangs from its button on a phone, which works
     because it is nine short rows. This panel is twenty, and hanging it from a
     button sitting 492px down an 812px screen put its last 248px off the
     bottom of a POSITION:FIXED element — unreachable, because a fixed panel
     does not scroll with the page. Measured, not guessed. Anchoring to the
     bottom of the viewport instead makes the whole panel reachable at any
     length and puts it under the thumb. */
  .tc-wrap{margin-left:0}
  .tc-pop{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:min(72vh,560px)}
  .tc-segb{min-height:44px}
  .tc-lab{min-height:44px}
  /* 44px, the app's button standard. Q120's 36px was argued for inline-edit
     hotspots that have a full alternative path; these are the only way to
     reorder a column, so they get the full target. */
  .tc-mvb{width:44px;height:44px}
  .tc-reset{min-height:44px}
  body.tc-compact .bk-cell{padding:6px 8px 6px 14px}
}

/* ============================================================
   Q122 — THE DESIGN-TOKEN & ACCESSIBILITY PASS

   Everything below is here because it must apply to the WHOLE app rather than
   to whichever component happened to need it. Component-level fixes made in
   this pass live beside the components they belong to (see .btn-danger,
   .alert-card h4, .alert-item .d, .seg-n and the two --t3 blocks above).
   ============================================================ */

/* ---------- ONE LATE-RED, AND ITS DARK PAIR CANNOT BE FORGOTTEN ----------
   #b91c1c is 6.47:1 on the light card and 2.65:1 on the dark one, so every use
   of it needs the #fca5a5 pair. Q127 shipped `.tg-del` without one and it
   failed AA in dark mode on production until Q126 happened to notice. The way
   to stop that a fourth time is to make the pairing STRUCTURAL: one list of
   selectors and one dark override of the same list, sitting together.
   ADD A SELECTOR TO BOTH LISTS OR TO NEITHER.
   `.u-late` is the colour-only utility for the sites that were carrying
   `style="color:var(--danger)"` inline, where no stylesheet could ever have
   given them a dark pair: the overdue task line and the overdue project
   deadline, measured at 3.48:1 and 3.76:1. */
.u-late,.cns-off,.bnc-bad{color:#b91c1c}
:root[data-theme="dark"] .u-late,:root[data-theme="dark"] .cns-off,:root[data-theme="dark"] .bnc-bad{color:#fca5a5}

/* The overdue task row tints itself red, which darkens the surface under its
   own sub-line; --t3 measured 4.36:1 there in dark mode. */
.task-sub{font-size:10px;color:var(--t3)}
.task-row.overdue .task-sub{color:var(--t2)}
/* ============================================================
   Q164 — tasks v2 (My Day / Board / List) + the shared task row middle.
   Colours reuse the existing tokens; nothing new on the Q122 flip list.
   ============================================================ */
.task-seg{margin-bottom:14px}
.task-tabbody{min-width:0}
.task-main{flex:1;min-width:0;cursor:pointer}
.task-recur{color:var(--t3);display:inline-flex;vertical-align:-1px}
/* My Day */
.myday{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);box-shadow:var(--sh);padding:18px 20px}
.myday-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.myday-hi{font-size:19px;font-weight:800;color:var(--t1)}
.myday-sub{font-size:12.5px;color:var(--t3);margin-top:2px}
.myday-sec{margin-top:16px}
.myday-sech{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.myday-tasks{border:1px solid var(--border);border-radius:var(--rlg);overflow:hidden}
.myday-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--border);font-size:13px}
.myday-sec .myday-row:last-child{border-bottom:none}
.myday-row .myday-time{flex:none;font-weight:700;color:var(--accent2);font-size:12px;min-width:66px}
.myday-row .myday-l{flex:1;min-width:0;color:var(--t1);overflow-wrap:anywhere}
.myday-row .myday-meta{color:var(--t3)}
.myday-row>.btn{flex:none}
.myday-row:hover{background:var(--hover)}
/* Board */
.task-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;align-items:flex-start}
.tb-col{flex:1;min-width:240px;background:var(--hover);border:1px solid var(--border);border-radius:var(--rlg)}
.tb-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);border-bottom:1px solid var(--border)}
.tb-c{font-weight:800;color:var(--t3);background:var(--card);border-radius:8px;padding:1px 8px}
.tb-cards{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.tb-cards.drag-active{background:color-mix(in srgb,var(--accent) 6%,transparent);border-radius:8px;outline:2px dashed var(--accent);outline-offset:-4px}
.tb-card{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:9px 11px;cursor:grab;box-shadow:var(--sh)}
.tb-card:active{cursor:grabbing}
.tb-card.dragging{opacity:.5}
.tb-card-t{font-size:12.5px;font-weight:600;color:var(--t1);line-height:1.35}
.tb-card-m{font-size:10.5px;color:var(--t3);margin-top:3px;overflow-wrap:anywhere}
.tb-card-f{margin-top:7px}
.tb-empty{font-size:11px;color:var(--t3);text-align:center;padding:14px 0}

/* ---------- A FOCUS RING NOBODY CAN FORGET ----------
   Twenty-two components define their own :focus-visible ring, which means the
   twenty-third to be written will not have one and nothing will say so. This
   is the floor: every focusable thing gets a visible ring, and any component
   that wants a different one still wins on specificity. It is deliberately
   :focus-visible and not :focus, so a mouse click never draws it.

   MEASURED, AND ONE NUMBER IS GATED: var(--accent) #10b981 is 2.54:1 against
   white, below the 3:1 that WCAG 1.4.11 asks of a focus indicator. That is the
   SAME open owner decision as every other use of the brand green, and it is on
   the flip list in QUEUE-PHASE3.md — using a different colour here would leave
   one ring that does not match the other twenty-two and would have to be
   unpicked when the token changes. */
html :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* `html :focus-visible`, not a bare `:focus-visible`, and the difference is the
   rule working at all: a bare one is class-specificity (0,1,0) and LOSES to the
   ten base rules in this file that carry `outline:none` — .si input, select.fs,
   .fl input/select/textarea, .gsearch input, .rc-box input, .pal-in input,
   .id-row input, .re-body, .re-btn select. Measured before the fix: seven of
   eight control types still had no ring. */

/* ---------- REDUCED MOTION, EVERYWHERE ----------
   Three animations were individually exempted (.skeleton, .upd-pill, the undo
   timer bar) out of 44 transitions and animations in this file, which means
   somebody who has asked their operating system to stop moving things still
   got forty-one of them. This is the standard blanket: motion is reduced to
   effectively nothing rather than removed outright, so anything listening for
   an animation to finish still hears it. Verified: nothing in js/ listens for
   transitionend or animationend, so nothing depends on the duration. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important}
}

/* ---------- POINTER TARGETS ON A PHONE ----------
   MEASURED at 375x812 across all twelve views: of 26 kinds of control, only
   three cleared 44px and thirteen were below the 24x24 that WCAG 2.5.8 asks at
   AA — .btn-xs text buttons at 21px tall, tag chips at 21, the tag-manage link
   at 20, and the row action icons at 18px WIDE. That last one is the four
   call/text/email/edit buttons on every contact row, which is exactly where a
   mis-tap costs something.

   Two floors, not one, because they answer different questions. 24x24 is the
   AA requirement and applies to everything. 44px is this app's own standard
   for a FULL-SIZE button (Q120's log states it), and full-size is what every
   modal footer uses — including the destructive Confirm, where a mis-tap is
   the one that cannot be taken back. The compact -sm/-xs variants stay compact
   on purpose; they get the 24px floor and no more.

   `.ie` is a deliberate exception and stays 19px wide: Q120 argued it as a
   shortcut with a full alternative path one tap away, and forcing 24 onto
   three inline spans would add height to every row in the table. */
@media(max-width:768px){
  .btn,.btn-icon,.tg,.sub-tab,.seg-btn,.dchip,.tg-manage,.tg-chip{min-height:24px;min-width:24px}
  .btn:not(.btn-sm):not(.btn-xs){min-height:44px}
}

/* ================= Q136 — MESSAGE TEMPLATES =================
   The picker expands IN FLOW inside the compose modal body rather than
   hanging off its button. Q121 paid for that lesson: a position:fixed panel
   anchored to a control partway down a phone screen puts its own tail off the
   bottom, unreachable, because a fixed panel does not scroll with the page.
   In flow it needs no media query, cannot cover the field you are about to
   edit, and scrolls with the modal that already scrolls.

   `hidden` alone hides the panel — no `display` is set on .mt-pop, precisely
   so that the attribute is not overridden by a stylesheet. */
.mt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
.mt-bar-e{margin:8px 0 0}
.mt-n{display:inline-block;min-width:16px;padding:0 4px;border-radius:20px;background:var(--hover);
  font-size:10px;font-weight:700;color:var(--t2);line-height:15px;text-align:center}
/* 36px, not the 29 a bare .btn-sm gives: these three sit in a row with 40px
   form controls and a shorter button beside them reads as a mistake. Still a
   compact button, so Q122's mobile floor for -sm (24px) is cleared twice over
   and the 44px rule for full-size buttons is deliberately not borrowed. */
.mt-bar>.btn{min-height:36px;flex:0 1 auto;min-width:0}
.mt-mf{min-width:0}
.mt-mf select.fs{max-width:210px;min-width:0}
.mt-pop{flex-basis:100%;max-height:min(46vh,320px);overflow-y:auto;
  border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--sh)}
.mt-head{position:sticky;top:0;background:var(--card);padding:9px;border-bottom:1px solid var(--border);z-index:1}
.mt-head input{width:100%;min-height:36px;padding:0 10px;border:1px solid var(--border);border-radius:9px;
  background:var(--input);font-family:inherit;font-size:12.5px;color:var(--t1)}
.mt-grp{padding:9px 12px 4px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--t2)}
.mt-item{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  padding:8px 12px;font-family:inherit;border-radius:0}
.mt-item:hover,.mt-item.on{background:var(--hover)}
.mt-nm{display:block;font-size:12.5px;font-weight:600;color:var(--t1)}
.mt-sub{display:block;font-size:11px;color:var(--t2);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-pv{display:block;font-size:10.5px;color:var(--t3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-none{padding:16px 12px;font-size:11.5px;color:var(--t2);text-align:center}
/* The Q122 amber pairing, not `var(--warn)`: #f59e0b measures 2.15:1 on a card
   and would have been a new AA failure in a task whose own log says zero
   remain. #b45309 is 5.02 on a card, #fcd34d is its dark pair — the same two
   values `.dl-soon` and `.nba` already use. Add a selector to both or neither. */
.mt-warn{margin-top:4px;color:#b45309;line-height:1.5;font-weight:600}
:root[data-theme="dark"] .mt-warn{color:#fcd34d}
/* Manager rows */
.mt-row{display:flex;align-items:center;gap:8px;padding:9px 2px;border-bottom:1px solid var(--border)}
.mt-rs{flex:1;min-width:0}
.mt-rn{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-rm{font-size:10.5px;color:var(--t3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mt-help,.mt-help-i{font-size:11px;color:var(--t2);line-height:1.7;margin:12px 0 0}
.mt-help-i{margin:0;flex:1;min-width:180px}
.mt-help code,.mt-help-i code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 4px}
/* At 375 the three controls cannot share one line: their intrinsic widths add
   up to 426px inside a 326px modal body. Giving the select its own full-width
   row is what stops it running 61px off the right edge — measured, because the
   first cut used `flex:1;min-width:150px`, which does not force a wrap (a
   flex-basis of 0 never does) and simply overflowed instead. */
@media(max-width:768px){
  .mt-2col{grid-template-columns:1fr}
  .mt-bar>.btn{min-height:44px}
  .mt-mf{flex:1 0 100%;display:flex}
  .mt-mf select.fs{max-width:none;width:100%;min-height:44px}
}

/* ---- Q145: text templates ----
   The SMS bar sits in a chat composer rather than a scrolling modal body, so
   its panel is shorter: at 375x812 the thread composer already starts around
   y=520, and the 320px email panel would have pushed the textarea itself off
   the bottom of the screen. It scrolls inside itself, so a long library is
   reachable without moving the box you are about to type in. */
.mt-bar-s{margin:0 0 8px}
.mt-bar-s .mt-pop{max-height:min(34vh,230px)}
/* While a text template is being chosen, the message HISTORY gives way — not
   the composer. Measured: without this, opening the panel at 375x812 pushed
   the textarea to y=762 and the Send button to y=851, both off the screen, at
   the moment the owner most needs them. The bubbles are not what you are
   looking at while you pick a template. */
.mt-picking .thr-scroll{max-height:22vh}
@media(max-width:768px){ .mt-picking .thr-scroll{max-height:16vh} }
/* Kind switch in the manager. A segmented control rather than two cards: the
   two kinds are alternatives, not a hierarchy. */
.mt-kinds{display:flex;gap:6px;margin:0 0 12px}
.mt-kind{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;
  border:1px solid var(--border);border-radius:9px;background:var(--card);cursor:pointer;
  font-size:12px;font-weight:600;color:var(--t2)}
.mt-kind:hover{background:var(--hover)}
.mt-kind.on{background:var(--hover);color:var(--t1);border-color:var(--t3)}
/* The plain-text body editor. 16px so iOS does not zoom the page on focus —
   the same rule Q120's inline editors follow. */
.mt-ta{width:100%;min-height:110px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;
  background:var(--card);color:var(--t1);font-family:inherit;font-size:16px;line-height:1.6;resize:vertical}
/* The segment readout. `--t3` is the measured 4.48:1 floor and passes; `over`
   uses the SAME #b45309/#fcd34d pair as .mt-warn and .dl-soon rather than a
   new amber, so this adds nothing to the Q122 flip list and nothing to the
   structural #b91c1c pairing either. */
.mt-seg{font-size:10.5px;font-weight:600;color:var(--t3);margin-left:6px}
.mt-seg.over{color:#b45309}
:root[data-theme="dark"] .mt-seg.over{color:#fcd34d}
.mt-dim{color:var(--t3);font-size:10.5px;line-height:1.5;margin-top:3px}
@media(max-width:768px){
  .mt-kind{min-height:44px}
  .mt-bar-s>.btn{min-height:44px}
  /* 230px still left the Send button 13px below a 812px screen once the bar
     grew to 44px targets. 190 is what actually fits, measured — the panel
     scrolls, so a shorter one costs reach, not reachability. */
  .mt-bar-s .mt-pop{max-height:min(26vh,190px)}
}

/* ================= Q143 — CONSENT & UNSUBSCRIBE (CASL) =================
   Colours are borrowed rather than invented, and every pair below is one
   Q122 already measured:
     · the chip reuses `.b-high`'s #fee2e2/#991b1b, which is the pastel chip
       system Q122 proved passes AA in BOTH themes;
     · the warning bar uses #92400e / #fcd34d, the pair Q122 chose precisely
       BECAUSE it sits on an amber tint (#b45309 measures 4.11 there);
     · `.cns-off` uses the #b91c1c / #fca5a5 late-red, and it is added to the
       ONE selector list Q122 made structural — see the rule above `.u-late`:
       add a selector to both the light list and the dark override, or to
       neither. This one is in both. */
.cns-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;
  background:#fee2e2;color:#991b1b;font-size:10.5px;font-weight:700;white-space:nowrap}
.cns-lbl{font-size:9.5px;font-weight:700;letter-spacing:.5px;color:var(--t3);
  border:1px solid var(--border);border-radius:4px;padding:1px 5px;margin-left:6px}
.cns-hint,.cad-hint{font-size:11px;line-height:1.6;color:var(--t2);margin-top:5px}
/* min-height 24 and the padding are not decoration: measured at 375x812 the
   label came out 17px tall, under the 24x24 WCAG 2.5.8 asks at AA — and this
   is the control that turns marketing email off for a real person, so it is
   the last one that should be hard to hit. */
.cns-tick{display:flex !important;align-items:flex-start;gap:9px;cursor:pointer;font-size:12.5px;
  min-height:24px;padding:4px 0;
  font-weight:500 !important;color:var(--t1) !important;text-transform:none !important;letter-spacing:0 !important}
.cns-tick input{flex:none;width:17px;height:17px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.cns-tick input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Q144 — `.bnc-bar` is added to these selectors rather than given its own
   rule. A bounce notice and an unsubscribe notice are the same object in the
   same slot of the same composer; two declarations of one amber is two things
   to keep in step with the Q122 pairing, and the second one is the one that
   drifts. */
.cns-bar,.bnc-bar{display:flex;align-items:flex-start;gap:9px;margin:10px 0;padding:11px 13px;border-radius:10px;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);
  font-size:11.5px;line-height:1.6;color:#92400e}
.cns-bar b,.bnc-bar b{font-weight:700}
.cns-bar svg,.bnc-bar svg{flex:none;margin-top:1px}
.cns-bar .lnk-btn,.bnc-bar .lnk-btn{color:inherit}
:root[data-theme="dark"] .cns-bar,:root[data-theme="dark"] .bnc-bar{color:#fcd34d;background:rgba(245,158,11,.14)}
/* Q145: the same bar in a chat composer, where vertical space is the scarce
   thing. It inherits every colour above — a second amber would be a second
   decision to keep in step with the Q122 pairing. */
.cns-bar-s{margin:0 0 8px;padding:8px 11px;font-size:11px}
.cns-stats,.bnc-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.cns-stat,.bnc-stat{flex:1;min-width:130px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.cns-stat b,.bnc-stat b{display:block;font-size:20px;font-weight:700;line-height:1.2}
.cns-stat span,.bnc-stat span{display:block;font-size:10.5px;color:var(--t2);margin-top:2px;line-height:1.4}
/* Import wizard: where the list came from */
.imp-consent{margin:12px 0;padding:12px 13px;border-radius:10px;
  border:1px solid rgba(245,158,11,.4);background:rgba(245,158,11,.08)}
.imp-consent.ok{border-color:var(--border);background:var(--bg)}
.imp-consent label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--t2);margin-bottom:6px}
.imp-consent input{width:100%;min-height:40px;padding:0 11px;border:1px solid var(--border);border-radius:8px;
  background:var(--input);font-family:inherit;font-size:13px;color:var(--t1)}
.imp-consent-h{display:flex;align-items:flex-start;gap:6px;margin-top:7px;font-size:11px;line-height:1.6;color:var(--t2)}
.imp-consent-h svg{flex:none;margin-top:2px}
@media(max-width:768px){ .cns-stat,.bnc-stat{min-width:100%} }

/* ============================================================
   Q144 — bounce & deliverability health.

   NOTHING HERE IS A NEW COLOUR DECISION. Four reuses and one refusal:

     · `.bnc-chip` is `.b-med`/`.b-proposal`'s exact #fef3c7 / #92400e — the
       pastel chip system Q122 measured, which carries its own background and
       therefore needs no dark override, the same as `.cns-chip`.
     · AMBER, NOT THE Q143 RED, and the difference is the point. Red in this
       app means "a person asked us to stop" or "money is late". A bounce is a
       broken address — a chore. Painting both red teaches the owner to read
       the legal one as routine.
     · `.bnc-bar` and `.bnc-stat`/`.bnc-stats` are added to Q143's selectors
       above rather than redeclared, and the Settings prose reuses `.cf-need`.
     · `.bnc-bad` is in BOTH halves of the structural #b91c1c / #fca5a5 list,
       per the rule written above `.u-late`.
     · A HEALTHY BOUNCE RATE IS DELIBERATELY NOT GREEN. It would resolve
       var(--accent) and add a sixth item to the brand-green flip list for no
       information: the number already says "0%". Neutral var(--t1).
   ============================================================ */
.bnc-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;
  background:#fef3c7;color:#92400e;font-size:10.5px;font-weight:700;white-space:nowrap}
.bnc-ok{color:var(--t1)}
.bnc-warn,.bnc-off{color:#92400e}
:root[data-theme="dark"] .bnc-warn,:root[data-theme="dark"] .bnc-off{color:#fcd34d}
.bnc-why{display:block;margin:3px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;opacity:.9;word-break:break-word}

/* ---- email authentication ---- */
.bnc-dns-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);margin-bottom:10px}
.bnc-dns-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--border)}
/* NOT `:first-of-type` — the head is also a div, so it would take the rule
   and every row would keep its rule line. */
.bnc-dns-head+.bnc-dns-row{border-top:none;padding-top:0}
/* The state marker is a TINTED CHIP, not coloured text on the card, and that
   is a contrast decision rather than a stylistic one: a tint carries its own
   background, so the pair is measurable and identical in both themes. All
   three pairs come from the badge system Q122 already proved. */
/* Separate class names from the TEXT states above on purpose. `.bnc-bad` is
   in the structural dark override, whose `:root[data-theme="dark"] .bnc-bad`
   outweighs a `.bnc-dot.bnc-bad` — so reusing the name here would have put
   #fca5a5 on a #fee2e2 tint in dark mode: a 1.4:1 icon, introduced by the
   very rule that exists to prevent contrast failures. */
.bnc-dot{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#f1f5f9;color:#475569}
.bnc-dot-ok{background:#d1fae5;color:#065f46}
.bnc-dot-warn{background:#fef3c7;color:#92400e}
.bnc-dot-bad{background:#fee2e2;color:#991b1b}
.bnc-dns-t{min-width:0;flex:1}
.bnc-dns-t b{font-size:12.5px;font-weight:700}
.bnc-dns-t p{font-size:11px;line-height:1.6;color:var(--t2);margin-top:2px}
.bnc-dns-s{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-left:5px}
.bnc-rec{display:block;margin-top:5px;padding:6px 8px;border-radius:7px;background:var(--bg);
  border:1px solid var(--border);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;line-height:1.5;color:var(--t2);word-break:break-all}

/* ============================================================
   Q139 — stay-in-touch cadences.

   COLOURS ARE BORROWED, NOT INVENTED. The neutral chip is `.ck-evt`'s exact
   pairing (var(--bg) / var(--border) / var(--t2)), which Q122 already measured
   in both themes; the snoozed chip reuses the #92400e / #fcd34d amber pair
   Q122 chose BECAUSE it sits on an amber tint, the same one `.cns-bar` and
   `.mt-seg.over` use. Nothing here resolves var(--accent), so this task adds
   NOTHING to the brand-green flip list. `.cad-hint` is not a second hint
   style — it is added to `.cns-hint`'s selector above.
   ============================================================ */
.cad-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--t2);
  background:var(--bg);border:1px solid var(--border);padding:3px 8px;border-radius:20px;white-space:nowrap}
.cad-chip svg{flex:none;opacity:.8}
.cad-snz{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:#92400e}
:root[data-theme="dark"] .cad-snz{color:#fcd34d;background:rgba(245,158,11,.16)}

/* The snooze button. Icon-only on purpose: it sits in a queue row next to the
   verb that actually matters, and a second word there competes with it. The
   accessible name comes from aria-label, and the title says who. */
.cad-snz-b{flex:none;padding-left:7px;padding-right:7px}
.cad-snz-b svg{margin:0}

/* One popover, appended to <body> and positioned against the button that
   opened it — so it is never clipped by `.alert-card`'s overflow and never
   inherits a stacking context from a row. */
.cad-menu{position:fixed;z-index:120;min-width:172px;padding:5px;border-radius:11px;
  background:var(--card);border:1px solid var(--border);box-shadow:0 12px 32px rgba(0,0,0,.16)}
:root[data-theme="dark"] .cad-menu{box-shadow:0 12px 32px rgba(0,0,0,.5)}
.cad-menu-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--t3);padding:6px 9px 5px}
.cad-menu-i{display:block;width:100%;text-align:left;padding:8px 9px;border:none;background:none;
  border-radius:7px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--t1);cursor:pointer;
  min-height:34px}
.cad-menu-i:hover{background:var(--bg)}
.cad-menu-i:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cad-menu-w{color:var(--t2);border-top:1px solid var(--border);border-radius:0 0 7px 7px;margin-top:3px}
@media(max-width:768px){
  /* 44px everywhere it can be tapped — the Q122/Q143 rule, and the snooze
     button is small enough that it would otherwise be the app's worst target. */
  .cad-menu-i{min-height:44px}
  .cad-snz-b{min-height:34px;min-width:34px;justify-content:center}
  .nba-bar .cad-snz-b{min-height:44px;min-width:44px}
}

/* ============================================================
   Q176 — REPORTS
   Every colour here is borrowed from a pair Q122 already measured rather than
   invented. The one that mattered: bars, meters and funnel fills are
   `--accent2`, NOT the brand `--accent`. A bar is a graphic, so WCAG 1.4.11
   asks 3:1 against what it sits on; `--accent` #10b981 is 2.54:1 on a white
   card and would have become the next line on the owner's flip list.

   MEASURED, NOT ASSUMED, AND THE ASSUMPTION WAS WRONG. This comment first
   said `--accent2` is #059669 at 3.81:1, reading the value out of the base
   :root block. The Twisty layer further down redefines it, so what actually
   paints is **#0e9f6e** — the exact value Q122 logged as "a SECOND, SMALLER
   decision the old list missed". Against the card it measures **3.39 light /
   5.07 dark**, so it clears the 3:1 a graphic needs in both themes.
   Against the meter's own near-white track it is **2.92 light**, a hair under
   3:1 — and every meter, bar and funnel step on this page prints its own
   number in the same row, which is precisely why Q122 already classed
   `.goal-fill` and `.dl-bar>i` as decorative rather than meaning-carrying.
   NOTHING HERE IS ADDED TO THE GREEN FLIP LIST. If the owner ever darkens
   `--accent2` (Q122 suggests ~#0b7a55 for the calendar chips, which is a
   decision that already exists) the track figure goes to roughly 4:1 too.

   SVG fills live in this file, not inside the strings that build the charts:
   Q122's sweep reads the stylesheet, and the nine inline `style="color:…"`
   sites it had to clean up are the argument.
   ============================================================ */
.rpt-ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.rpt-seg{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--border);
  border-radius:11px;padding:3px;flex-wrap:wrap}
.rpt-r{border:none;background:transparent;color:var(--t2);font-family:inherit;font-size:12px;
  font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;min-height:32px;white-space:nowrap}
.rpt-r:hover{color:var(--t1)}
.rpt-r.on{background:var(--card);color:var(--t1);box-shadow:var(--sh)}
.rpt-cust{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rpt-cl{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.4px}
.rpt-cust input{border:1px solid var(--border);background:var(--input);color:var(--t1);
  border-radius:9px;padding:6px 9px;font-family:inherit;font-size:12px;min-height:32px}
.rpt-cust input:focus{border-color:var(--accent)}

.rpt-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.rpt-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);
  box-shadow:var(--sh);padding:16px 18px}
.rpt-kpi .l{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.4px}
.rpt-kpi .v{font-size:24px;font-weight:800;color:var(--t1);margin-top:6px;line-height:1.15}
.rpt-kpi .s{font-size:11px;color:var(--t2);margin-top:5px;line-height:1.55}
.rpt-d{font-weight:700;color:var(--t1)}

.rpt-card{margin-bottom:16px}
.rpt-when{font-size:11px;color:var(--t2);font-weight:600;text-align:right;margin-left:10px}
/* Q180 — send-time heatmap (HTML grid, not SVG). Scrolls horizontally on narrow
   screens rather than overflowing the page. */
.sth-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.sth{display:inline-block;min-width:100%}
.sth-row{display:flex;gap:2px;margin-bottom:2px}
.sth-day{flex:0 0 34px;font-size:10.5px;color:var(--t2);font-weight:600;display:flex;align-items:center}
.sth-cell{flex:0 0 15px;height:15px;border-radius:3px;background:var(--bg)}
.sth-head .sth-cell{height:auto;background:none;border-radius:0}
.sth-hh{font-size:9px;color:var(--t3);text-align:left;line-height:1}
.sth-cell.on{outline:0}
.sth-sugh{font-size:12px;font-weight:700;margin:14px 0 8px;color:var(--t1)}
.sth-sug{display:flex;flex-wrap:wrap;gap:8px}
.sth-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:9px;border:1px solid var(--border);background:var(--card);font-size:12px;font-weight:600;color:var(--t1);cursor:pointer}
.sth-pill:hover{border-color:var(--accent);color:var(--accent)}
.sth-pn{font-size:10.5px;color:var(--t2);font-weight:600}
.sth-foot,.sth-thin{font-size:11px;color:var(--t2);line-height:1.6;margin-top:10px}
.sth-thin{display:flex;align-items:flex-start;gap:6px}
.sch-pre-best{border-color:var(--accent);color:var(--accent)}
/* Q182 — per-event report tiles. */
.ev-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.ev-tile{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px}
.ev-tile b{display:block;font-size:20px;font-weight:800;color:var(--t1);line-height:1.1}
.ev-tile span{display:block;font-size:11.5px;color:var(--t2);margin-top:3px}
.ev-tile small{display:block;font-size:10.5px;color:var(--t3);margin-top:3px}
.rpt-cap{font-size:11px;color:var(--t2);line-height:1.65;margin:12px 0 0}

/* Charts, in HTML rather than SVG — see the note above rptBars() in
   js/views/reports.js. The labels are --t2 rather than --t3 deliberately: at
   10px they are the smallest text on the page, and --t2 clears AA with room.
   Because they are real HTML text they are also swept by the same composited
   contrast instrument as everything else, which SVG text is invisible to. */
.rpt-ch{display:flex;align-items:stretch;gap:5px;height:210px}
.rpt-ch-sm{height:120px;gap:3px}
.rpt-col{flex:1;min-width:0;display:flex;flex-direction:column}
.rpt-colv{font-size:9.5px;font-weight:700;color:var(--t2);text-align:center;
  min-height:14px;line-height:14px;white-space:nowrap}
.rpt-colb{flex:1;display:flex;align-items:flex-end}
.rpt-colb>i{display:block;width:100%;background:var(--accent2);border-radius:3px 3px 0 0}
/* The axis label is allowed to spill past its own column: with 26 buckets only
   every other one is drawn, so it spills into an empty neighbour rather than
   being clipped to 11px of width. */
.rpt-coll{font-size:10px;color:var(--t2);text-align:center;margin-top:7px;
  white-space:nowrap;overflow:visible}

/* Q179 — FORECAST rows. Two overlaid accent widths per row: a faint "best"
   ceiling and the solid "likely" fill. Both are DECORATIVE — every row prints
   its own worst/likely/best figures alongside — so they carry no meaning of
   their own and stay off the Q122 flip list. The overdue amber reuses the exact
   #fbbf24/#f59e0b Q177 already added. */
.fc-rows{display:flex;flex-direction:column;gap:8px}
.fc-row{display:grid;grid-template-columns:84px 1fr auto;gap:10px;align-items:center}
.fc-m{font-size:11px;font-weight:700;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-bar{position:relative;height:14px;background:var(--bg);border:1px solid var(--border);border-radius:7px;overflow:hidden;min-width:0}
.fc-best{position:absolute;top:0;bottom:0;left:0;background:var(--accent);opacity:.2;border-radius:7px}
.fc-fill{position:absolute;top:0;bottom:0;left:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:7px}
.fc-row.fc-late .fc-fill{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.fc-n{text-align:right;white-space:nowrap}
.fc-n b{font-size:13px;font-weight:800;color:var(--t1);display:block;line-height:1.2}
.fc-n small{font-size:10px;color:var(--t3)}
/* Q181 — CHURN RISK rows. The reasons ARE the report; the level badge reuses
   the measured b-high/b-med/b-inactive pastels, nothing new on the flip list. */
.churn-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border)}
.churn-row:first-child{border-top:0}
.churn-main{flex:1;min-width:0}
.churn-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.churn-nm{font-size:13px;font-weight:700;color:var(--t1);cursor:pointer}
.churn-nm:hover{color:var(--accent)}
.churn-lvl{flex:none}
.churn-reasons{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.churn-why{font-size:11px;font-weight:600;color:var(--t2);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px 8px}
.churn-act{flex:none;white-space:nowrap}
/* Breakdown tables. Scrolls inside its own wrapper, the pre-existing
   `.tbl-wrap` pattern, so the page body itself never scrolls sideways. */
.rpt-scroll{overflow-x:auto}
.rpt-tbl{width:100%;border-collapse:collapse;font-size:12px}
.rpt-tbl th{text-align:left;font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;
  letter-spacing:.4px;padding:0 10px 8px 0;white-space:nowrap}
.rpt-tbl td{padding:9px 10px 9px 0;border-top:1px solid var(--border);vertical-align:middle;color:var(--t1)}
/* right-aligned AND no right padding means two number columns side by side have nothing between them: at
   tablet width the headers read "PEOPLECLIENTSWIN RATEOPEN DEALS". The gap goes on the left instead. */
.rpt-tbl th.n,.rpt-tbl td.n{text-align:right;padding-right:0;padding-left:12px;white-space:nowrap}
.rpt-tbl th.rpt-w{width:34%}
/* The seven-column source table needs a narrower meter and a name that never
   wraps: at half a 1280px screen "Referral" broke across two lines. It is a
   full-width card now, and these keep it honest at every width in between. */
.rpt-tbl-src th.rpt-w{width:22%}
.rpt-tbl-src td:first-child{white-space:nowrap}
.rpt-dim td{color:var(--t2)}
.rpt-meter{height:7px;min-width:56px;background:var(--bg);border-radius:5px;overflow:hidden}
.rpt-meter>i{display:block;height:100%;background:var(--accent2);border-radius:5px}

/* Funnel */
.rpt-step{margin-bottom:14px}
.rpt-step:last-of-type{margin-bottom:0}
.rpt-step-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:12.5px;font-weight:700;color:var(--t1);margin-bottom:5px}
.rpt-step-n{color:var(--t1);white-space:nowrap}
.rpt-step-of{color:var(--t2);font-weight:600;font-size:11px}
.rpt-step-bar{height:10px;background:var(--bg);border-radius:6px;overflow:hidden}
.rpt-step-bar>i{display:block;height:100%;background:var(--accent2);border-radius:6px}
.rpt-step-cv{font-size:11px;color:var(--t2);margin-top:5px;line-height:1.5}

/* Email performance tiles */
.rpt-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rpt-m{background:var(--bg);border-radius:10px;padding:12px 10px;text-align:center;min-width:0}
.rpt-m b{display:block;font-size:20px;font-weight:800;color:var(--t1);line-height:1.1}
.rpt-m span{display:block;font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;
  letter-spacing:.4px;margin-top:4px}
.rpt-m small{display:block;font-size:10.5px;color:var(--t2);margin-top:3px;line-height:1.4}

/* Activity volume — four small multiples rather than one stacked bar. */
.rpt-grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rpt-sm{min-width:0}
.rpt-sm-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:12px;font-weight:700;color:var(--t1);margin-bottom:4px}
.rpt-sm-none{font-size:11px;color:var(--t2);padding:22px 0;text-align:center}

@media(max-width:768px){
  .rpt-kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .rpt-mini{grid-template-columns:repeat(2,1fr)}
  .rpt-grid4{grid-template-columns:1fr}
  .rpt-when{display:none}          /* the range is already in the page subtitle */
  /* 44px on anything tappable — the Q122 floor. */
  .rpt-r{min-height:44px;padding:10px 14px}
  .rpt-cust input{min-height:44px}
  .rpt-seg{width:100%}
}

/* ============================================================
   Q178 — EVENT ROI
   Colour discipline, stated once: the two ROI chips reuse the pastel pairs
   Q122 already measured (`.b-active`'s #d1fae5/#065f46 and `.b-med`'s
   #fef3c7/#92400e), and the big revenue figure is `--t1`, NOT `--accent`.
   A green so prominent would have been the largest new entry on the owner's
   brand-green flip list, to say something the pastel chip beside it already
   says. NOTHING HERE IS ADDED TO THAT LIST.
   ============================================================ */
.rpt-evs{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.rpt-ev{border:1px solid var(--border);border-radius:var(--rlg);padding:16px 18px;background:var(--bg);min-width:0}
.rpt-ev-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rpt-ev-id{min-width:0}
.rpt-ev-id h4{font-size:14px;font-weight:800;color:var(--t1);line-height:1.3;overflow-wrap:anywhere}
.rpt-ev-id p{font-size:11px;color:var(--t2);margin-top:3px}
.rpt-ev-chip{flex:none;font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;white-space:nowrap}
.rpt-ev-good{background:#d1fae5;color:#065f46}
.rpt-ev-wait{background:#fef3c7;color:#92400e}
.rpt-ev-none{background:#f1f5f9;color:#475569}
:root[data-theme="dark"] .rpt-ev-good{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-tx)}
:root[data-theme="dark"] .rpt-ev-wait{background:rgba(245,158,11,.18);color:#fcd34d}
:root[data-theme="dark"] .rpt-ev-none{background:rgba(148,163,184,.18);color:#cbd5e1}

.rpt-ev-big{margin-top:12px;font-size:28px;font-weight:800;color:var(--t1);line-height:1.05;letter-spacing:-.5px}
.rpt-ev-big span{display:block;font-size:11px;font-weight:500;color:var(--t2);letter-spacing:0;margin-top:5px;line-height:1.5}

.rpt-ev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--border)}
.rpt-ev-s{min-width:0}
.rpt-ev-s b{display:block;font-size:17px;font-weight:800;color:var(--t1);line-height:1.15}
.rpt-ev-s span{display:block;font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;
  letter-spacing:.4px;margin-top:2px}
.rpt-ev-s small{display:block;font-size:10.5px;color:var(--t2);margin-top:2px;line-height:1.4}

.rpt-ev-roi{margin-top:13px;padding-top:12px;border-top:1px solid var(--border);
  font-size:11.5px;color:var(--t2);line-height:1.6}
.rpt-ev-roi b{color:var(--t1)}
.rpt-ev-roi small{display:block;font-size:10.5px;color:var(--t2);margin-top:2px}
.rpt-ev-roi-none{color:var(--t2)}
.rpt-ev-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}

/* The no-events line. One row above the KPIs rather than a full-size empty
   card, because a feature the owner may never use must not become a permanent
   block of nagging at the top of his reports. */
.rpt-ev-nudge{display:flex;gap:10px;align-items:flex-start;background:var(--card);
  border:1px solid var(--border);border-radius:var(--rlg);box-shadow:var(--sh);
  padding:13px 16px;margin-bottom:16px;font-size:12px;color:var(--t2);line-height:1.6}
.rpt-ev-nudge svg{flex:none;margin-top:2px;color:var(--t2)}
.rpt-ev-nudge b{color:var(--t1)}
.rpt-ev-nudge-n{display:block;margin-top:4px}
.rpt-err{font-size:11.5px;color:#b91c1c;line-height:1.5;margin-top:8px;min-height:1px}
:root[data-theme="dark"] .rpt-err{color:#fca5a5}

@media(max-width:768px){
  .rpt-evs{grid-template-columns:1fr}
  .rpt-ev{padding:14px}
  .rpt-ev-big{font-size:25px}
}

/* Q178 follow-up — the bulk "where did we meet" picker and the nudge's action. */
.rpt-ev-nudge-a{margin-top:9px}
.bk-evchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bk-evchip{border:1px solid var(--border);background:var(--card);color:var(--t1);border-radius:20px;
  padding:6px 11px;font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;min-height:30px}
.bk-evchip:hover{border-color:var(--accent);background:var(--hover)}
.bk-evchip i{font-style:normal;color:var(--t2);font-weight:700;margin-left:4px}
@media(max-width:768px){ .bk-evchip{min-height:44px} }

/* ============================================================
   Q203 — THE THREE-PANE MAIL CLIENT
   Colour is borrowed from pairs Q122 already measured; nothing here resolves
   the brand green as text, so it adds nothing to the flip list.
   ============================================================ */
.mbx{display:grid;grid-template-columns:184px minmax(280px,340px) 1fr;gap:0;
  background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);
  box-shadow:var(--sh);overflow:hidden;height:calc(100vh - 250px);min-height:460px}

/* rail */
.mbx-rail{border-right:1px solid var(--border);background:var(--bg);padding:8px;overflow-y:auto}
.mbx-rail-load{padding:4px}
/* ---- the mailbox switcher (2026-09-15) ----
   Sits at the top of the rail, above the folders, because it governs them: every
   count below it belongs to whichever of these is on. Two rows, not a dropdown, so
   the answer to "which inbox am I in" is readable without opening anything. */
.mbx-acct{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;margin-bottom:6px;
  border-bottom:1px solid var(--border)}
.mbx-acct-b{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;
  color:var(--t2);font-family:inherit;text-align:left;padding:7px 9px;border-radius:8px;
  cursor:pointer;min-height:40px}
.mbx-acct-b:hover{background:var(--hover);color:var(--t1)}
.mbx-acct-b.on{background:var(--card);color:var(--t1);box-shadow:var(--sh)}
.mbx-acct-b:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mbx-acct-av{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--accent-bg);color:var(--accent-tx);
  font-size:10.5px;font-weight:700;letter-spacing:.02em}
.mbx-acct-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.mbx-acct-t b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the address is the disambiguator, so it never truncates to nothing on a phone */
.mbx-acct-t i{font-style:normal;font-size:10.5px;color:var(--t3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mbx-acct-b.on .mbx-acct-t i{color:var(--t2)}
.mbx-acct-k{flex:none;display:flex;color:var(--accent-tx)}
.mbx-f{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;
  color:var(--t2);font-family:inherit;font-size:12.5px;font-weight:600;text-align:left;
  padding:8px 9px;border-radius:8px;cursor:pointer;min-height:36px}
.mbx-f:hover{background:var(--hover);color:var(--t1)}
.mbx-f.on{background:var(--card);color:var(--t1);box-shadow:var(--sh)}
.mbx-f-ic{flex:none;display:flex;color:var(--t2)}
.mbx-f.on .mbx-f-ic{color:var(--t1)}
.mbx-f-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The unread badge. This is the STATUS count, never firstUnseenSeq. */
.mbx-f-b{flex:none;font-size:10.5px;font-weight:800;background:#1e40af;color:#fff;
  border-radius:20px;padding:1px 7px;min-width:20px;text-align:center}
:root[data-theme="dark"] .mbx-f-b{background:#93c5fd;color:#0f172a}
.mbx-f-t{flex:none;font-size:10.5px;color:var(--t3);font-weight:600}

/* list */
.mbx-list{border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column;min-width:0}
/* A FLEX COLUMN THAT SCROLLS WILL SQUEEZE ITS CHILDREN BEFORE IT SCROLLS THEM.
   .mbx-list is display:flex + overflow-y:auto, so every child inherits the
   default flex-shrink:1. With an empty folder the content fits and nothing
   shrinks; the moment real mail loads, the total exceeds the box and flex
   compresses the chrome - the radar strip lost height and its chips went
   flat (Abdul, 2026-09-20: "waiting 18d section is squished... its fine for
   Abdul, maybe because it has no mail" - and that was exactly the cause).
   overflow-x:auto on .rad-strip makes it worse by setting its min-height to
   0, so it can shrink to nothing. Children here are fixed-height chrome and
   rows; none of them is meant to flex, so none of them may. */
.mbx-list>*{flex-shrink:0}
.mbx-lh{padding:11px 13px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sms-portnote{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--warn-tx,#92400e);background:rgba(245,158,11,.14);border-radius:7px;padding:3px 8px;margin-left:6px;max-width:100%}
.nt-fromrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.mbx-lh-t{font-size:13px;font-weight:800;color:var(--t1);display:flex;align-items:center;gap:7px}
.mbx-lh-n{font-size:10.5px;font-weight:700;color:var(--t2);background:var(--bg);border-radius:9px;padding:1px 7px}
.mbx-search{display:flex;gap:6px;margin-top:8px}
.mbx-search input{flex:1;min-width:0;border:1px solid var(--border);background:var(--input);color:var(--t1);
  border-radius:8px;padding:6px 9px;font-family:inherit;font-size:12px;min-height:32px}
.mbx-search input:focus{border-color:var(--accent)}
/* the list header is a ROW: the search yields, the title and the icon buttons
   never shrink (2026-09-10, measured: in a 334px column the header needed
   360px and squashed Refresh to 12px wide, past the column's edge, so he
   never saw it) */
.mbx-lh .mbx-search{flex:1;min-width:0;margin-top:0}
.mbx-lh>.btn-icon,.mbx-lh>.mbx-lh-t{flex:none}
.txv-lh-act{display:inline-flex;align-items:center;gap:2px;flex:none}
/* ---- searching the texts (2026-09-15) ----
   .mbx-lh is one flex row shared with Mail, so the box takes a full-width basis and
   WRAPS to its own line rather than competing with the title and the actions for
   space. Scoped to the texts header (.txv-qbox only renders there) so the mail
   header's own single-row layout is untouched. */
.mbx-lh.txv-lh{flex-wrap:wrap;row-gap:9px}
.txv-qbox{flex:1 0 100%;display:flex;align-items:center;gap:7px;padding:0 9px;
  background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--t3);
  min-height:32px}
.txv-qbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.txv-q{flex:1;min-width:0;border:none;background:none;outline:none;color:var(--t1);
  font-family:inherit;font-size:12.5px;padding:6px 0}
.txv-q::placeholder{color:var(--t3)}
/* the browser's own clear affordance would sit beside ours and do something subtly
   different (it does not fire our repaint), so there is exactly one */
.txv-q::-webkit-search-cancel-button{display:none}
.txv-qx{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  padding:0;border:0;border-radius:6px;background:none;color:var(--t3);cursor:pointer}
.txv-qx:hover{background:var(--hover);color:var(--t1)}
/* New mail is an OFFER. It never re-sorts under the cursor. */
.mbx-new{display:block;width:100%;margin-top:8px;border:none;border-radius:8px;cursor:pointer;
  background:#dbeafe;color:#1e40af;font-family:inherit;font-size:11.5px;font-weight:700;padding:7px 9px;min-height:32px}
:root[data-theme="dark"] .mbx-new{background:rgba(59,130,246,.2);color:#93c5fd}
.mbx-rows{display:flex;flex-direction:column}
/* THE SIGNED ROW ANATOMY (inbox mockup, approved 2026-08-28): avatar +
   stacked text. The row's axis is ROW and says so (the axis law) — the
   text column is its own element, never the button itself. */
.mbx-row{display:flex;flex-direction:row;gap:10px;align-items:flex-start;width:100%;text-align:left;border:none;
  background:none;cursor:pointer;font-family:inherit;padding:10px 13px;
  border-bottom:1px solid var(--border);border-left:3px solid transparent;min-width:0}
.mbx-row:hover{background:var(--hover)}
.mbx-row.sel{background:var(--hover);border-left-color:var(--accent2)}
.mbx-row .dl-av{width:34px;height:34px;font-size:11.5px;margin-top:1px}
.mbx-r-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mbx-r-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mbx-r-from{font-size:12.5px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mbx-row.unread .mbx-r-from{font-weight:800}
.mbx-r-date{flex:none;font-size:10.5px;color:var(--t2);font-variant-numeric:tabular-nums}
.mbx-row.unread .mbx-r-date{color:var(--accent2);font-weight:700}
.mbx-r-subj{font-size:12px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbx-row.unread .mbx-r-subj{color:var(--t1);font-weight:600}
.mbx-r-prev{font-size:11.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbx-r-c{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:var(--t2)}
.mbx-more{display:block;width:100%;border:none;border-top:1px solid var(--border);background:var(--bg);
  color:var(--t2);font-family:inherit;font-size:12px;font-weight:700;padding:11px;cursor:pointer;min-height:42px}
.mbx-more:hover{color:var(--t1)}

/* reading pane */
.mbx-pane{overflow-y:auto;min-width:0;background:var(--card)}
.mbx-pane-none{display:flex;align-items:center;justify-content:center;height:100%;padding:20px}
.mbx-pane-in{padding:16px 20px 26px}
.mbx-p-head{display:flex;align-items:flex-start;gap:9px;margin-bottom:10px}
.mbx-p-subj{flex:1;min-width:0;font-size:16px;font-weight:800;color:var(--t1);line-height:1.35;overflow-wrap:anywhere}
.mbx-back{display:none;flex:none;border:none;background:var(--bg);color:var(--t1);border-radius:8px;
  cursor:pointer;width:34px;height:34px;align-items:center;justify-content:center}
.mbx-p-meta{font-size:11.5px;color:var(--t2);line-height:1.7;padding-bottom:11px;border-bottom:1px solid var(--border)}
.mbx-p-from b{color:var(--t1);font-size:12.5px}
.mbx-p-from span{color:var(--t2)}
.mbx-p-c{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:11.5px;font-weight:700;
  color:#1e40af;background:#dbeafe;border-radius:20px;padding:3px 9px;text-decoration:none}
:root[data-theme="dark"] .mbx-p-c{color:#93c5fd;background:rgba(59,130,246,.2)}
/* The reading surface is WHITE, always — like Gmail/Outlook. Email HTML is
   authored for a light background; rendering it on the app's dark card left
   no-color messages as invisible dark-on-dark, and a dark-mode PASTE (which
   bakes in its own dark background) rendered as a dark box (Abdul, 2026-08-28).
   A fixed white card + dark default text + color-scheme:light makes every
   message legible regardless of the app theme, and isolates the message from
   the surrounding dark UI the way a real mail client does. */
.mbx-p-body{padding:14px 16px 4px;margin-top:6px;font-size:13px;color:#1a1a1a;background:#ffffff;
  color-scheme:light;border-radius:10px;line-height:1.65;overflow-wrap:anywhere;
  /* a message's own CSS is fenced to this box (sanitizeEmailHtml scope); relative + isolate
     keeps its absolutely positioned or z-indexed pieces anchored inside it too */
  position:relative;isolation:isolate}
.mbx-p-body img{max-width:100%;height:auto}
/* An image held back from a message she did not send. It keeps a box so the layout does not
   collapse around it, and the alt text still reads. 2026-10-07. */
/* the mail body is deliberately white in BOTH themes (an email is designed for white), so the
   placeholder inside it is written in light values on purpose, not in the app's tokens */
.mbx-p-body img.nt-img-held{min-width:20px;min-height:20px;background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:6px;box-sizing:border-box;object-fit:contain}
/* the bar is NameCRM chrome sitting above the message, so it follows the theme like every other
   surface does. It used --b2/--bd, which this file has never defined: in dark mode that left a
   near white bar carrying grey text. */
.mbx-imgbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 16px 0;padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:var(--bg);font-size:12px;color:var(--t2)}
.mbx-imgbar svg{flex:0 0 auto;color:var(--t3)}
.mbx-imgbar span{flex:1 1 auto;min-width:120px}
.mbx-imgbar button{border:1px solid var(--border);background:var(--card);color:var(--t1);border-radius:999px;padding:6px 13px;min-height:28px;font:var(--ff);font-size:11.5px;cursor:pointer;white-space:nowrap}
.mbx-imgbar button:hover{background:var(--hover)}
/* on a phone these are thumb targets, and the sender address is long enough to need its own line */
@media (max-width:599px){
  .mbx-imgbar{margin:6px 12px 0;padding:9px 11px}
  .mbx-imgbar span{min-width:100%}
  .mbx-imgbar button{min-height:38px;padding:9px 14px;font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}

.mbx-p-body table{max-width:100%}
.mbx-p-body a{color:#2563eb}
.mbx-p-body .mbx-p-text{color:#1a1a1a;white-space:pre-wrap;font:var(--ff);margin:0}
/* ============================================================
   EMAIL CONTENT TYPOGRAPHY, one definition for the reader and the composer.

   Abdul, 2026-09-19: "why email format is broken in compose and this view? the
   bullet points espically". Measured on a real sent message: every ul came out
   with padding 0 and every li with margin 0, so the markers sat on the text and
   nested lists collapsed into one another.

   The cause is line 20 of this file, the global reset *{margin:0;padding:0}.
   That is right for the app's own chrome and wrong for a DOCUMENT written
   somewhere else: mail from Outlook, Gmail or our own composer relies on the
   browser defaults for lists, headings and paragraphs. So the defaults are
   restored inside the two surfaces that render email, and nowhere else.
   ============================================================ */
.mbx-p-body ul,.mbx-p-body ol,.re-body ul,.re-body ol{margin:.6em 0;padding-left:1.7em}
.mbx-p-body ul,.re-body ul{list-style:disc outside}
.mbx-p-body ol,.re-body ol{list-style:decimal outside}
.mbx-p-body ul ul,.re-body ul ul{list-style:circle outside}
.mbx-p-body li,.re-body li{margin:.25em 0;padding-left:.15em}
.mbx-p-body li>ul,.mbx-p-body li>ol,.re-body li>ul,.re-body li>ol{margin:.25em 0}
.mbx-p-body p,.re-body p{margin:.65em 0}
.mbx-p-body p:first-child,.re-body p:first-child{margin-top:0}
.mbx-p-body h1,.mbx-p-body h2,.mbx-p-body h3,.mbx-p-body h4,.re-body h1,.re-body h2,.re-body h3,.re-body h4{margin:.9em 0 .4em;line-height:1.3;font-weight:700}
.mbx-p-body h1,.re-body h1{font-size:1.5em}
.mbx-p-body h2,.re-body h2{font-size:1.3em}
.mbx-p-body h3,.re-body h3{font-size:1.15em}
.mbx-p-body h4,.re-body h4{font-size:1em}
.mbx-p-body blockquote{border-left:3px solid #d5d9e0;margin:.7em 0;padding-left:12px;color:#475569}
.mbx-p-body hr,.re-body hr{border:none;border-top:1px solid #e2e8f0;margin:1em 0}
.mbx-p-body pre,.re-body pre{white-space:pre-wrap;margin:.6em 0}
.mbx-p-body td,.mbx-p-body th{padding:3px 6px;vertical-align:top}
.mbx-p-text{white-space:pre-wrap;font-family:inherit;margin:0}
/* Q150 — thread summary strip */
.mbx-sum{margin-top:12px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;
  background:color-mix(in srgb,var(--accent) 6%,var(--card))}
:root[data-theme="dark"] .mbx-sum{background:color-mix(in srgb,var(--accent) 12%,var(--card))}
.mbx-sum-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--t3);margin-bottom:7px}
.mbx-sum-h svg{color:var(--accent)}
.mbx-sum-x{margin-left:auto;background:none;border:none;padding:2px;cursor:pointer;color:var(--t3);display:inline-flex;border-radius:5px}
.mbx-sum-x:hover{color:var(--accent-tx);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.mbx-sum-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.mbx-sum-list li{font-size:12.5px;color:var(--t1);line-height:1.5;overflow-wrap:anywhere}
.mbx-sum-list li::marker{color:var(--accent)}
.mbx-sum-load{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2)}
.mbx-sum-err{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--t2)}
.mbx-sum-err svg{color:var(--warn,#f59e0b);flex:none}
.mbx-sum-retry{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12.5px;font-weight:600;padding:0;text-decoration:underline}

@media(max-width:900px){
  /* The pane is the whole screen on a phone, so the list is what you come back
     to — hence a real back control rather than only a close X. */
  .mbx{grid-template-columns:1fr;height:auto;min-height:0}
  /* MAIL's folders live in a DRAWER on phones — but ONLY mail's: the calls
     (#clv) and texts (#txv) shells share these classes, and v312 hiding the
     bare class took their navigation with it (Abdul's screenshot: "can not
     see dialer and voicemail"). Scope the hiding to #mbx; everyone else
     keeps the horizontal chip strip. */
  .mbx-rail{display:flex;gap:6px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:8px}
  #mbx > .mbx-rail{display:none}
  .mbx-rail .mbx-f{width:auto;flex:none}
  .mbx-rail .mbx-f-t{display:none}
  .mbx-f{min-height:44px}
  .mbx-list{border-right:none;max-height:none}
  .mbx-pane{display:none}
  .mbx-reading .mbx-list,.mbx-reading .mbx-rail{display:none}
  .mbx-reading .mbx-pane{display:block}
  .mbx-back{display:flex}
  .mbx-row{padding:12px 14px;min-height:64px}
  .mbx-row .dl-av{width:40px;height:40px;font-size:13px}
  /* the list head is ONE row on a phone — ham · search · refresh ("every
     pixel perfect… maximum of the screen"): the folder-name line and the
     Search button say nothing the drawer and the Enter key do not */
  .mbx-lh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px}
  .mbx-lh-t{display:none}
  .mbx-ham{display:flex;position:static;flex:none;width:42px;height:42px}
  .mbx-search{flex:1;min-width:0;margin:0}
  .mbx-search .btn{display:none}
  .mbx-new{flex-basis:100%;margin-top:0}
  .mbx-search input{min-height:44px;font-size:16px}   /* 16px so iOS does not zoom */
  .mbx-new,.mbx-more{min-height:44px}
}
/* the phone hamburger — desktop never shows it */
.mbx-ham{display:none;width:38px;height:38px;border:none;background:var(--bg);
  color:var(--t1);border-radius:10px;cursor:pointer;align-items:center;justify-content:center}
/* the folders drawer (inbox mockup state 3) — above the bottom nav (z 200) */
.mbx-dov{position:fixed;inset:0;background:rgba(13,21,38,.44);z-index:210}
.mbx-drawer{position:fixed;top:0;bottom:0;left:0;width:min(300px,84vw);background:var(--card);z-index:211;
  border-radius:0 22px 22px 0;padding:16px 10px calc(16px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;box-shadow:0 24px 56px rgba(16,24,40,.3)}
.mbx-dr-t{font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--t1);padding:2px 10px 12px}
.mbx-dr-acct{display:flex;gap:10px;align-items:center;padding:10px;color:var(--t2);font-size:12.5px}
.mbx-dr-acct svg{flex:none;color:var(--t3)}
.mbx-dr-acct span{min-width:0;overflow-wrap:anywhere;font-weight:600}
.mbx-dr-acct i{display:block;font-style:normal;font-size:10.5px;font-weight:500;color:var(--t3)}
/* the compose FAB — phones only; it lives inside the list markup so reading
   mode (which hides the list) takes it along */
.mbx-fab{display:none}
@media(max-width:900px){
  /* here, AFTER the base .mbx-ham rule — the earlier media block loses the
     cascade to it (same specificity, later source order wins) */
  .mbx-ham{display:flex}
  .mbx-fab{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:7px;
    background:var(--accent);color:var(--on-solid);border:none;border-radius:16px;padding:0 18px;height:50px;
    font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 35%,transparent)}
}
@media(max-width:768px){ .mbx-fab{bottom:calc(74px + env(safe-area-inset-bottom,0px))} }  /* clear the bottom nav */
/* the reader's bottom action bar (inbox mockup state 2) — phones only;
   sticky over the page scroll, offset above the bottom nav where it exists */
.mbx-ract{display:none}
@media(max-width:900px){
  /* FIXED, not sticky: the pane keeps overflow-y:auto from desktop, so it is
     the bar's scrollport — and on a phone the pane never scrolls (the PAGE
     does), so a sticky bar never engages and sits below the fold. Fixed
     escapes that trap; the pane's own bottom padding keeps content clear. */
  .mbx-ract{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--card);
    border-top:1px solid var(--border);padding:11px 14px calc(11px + env(safe-area-inset-bottom,0px))}
  #mbx.mbx-reading .mbx-pane-in{padding-bottom:100px}   /* mail only — texts has its own composer, no bar */
  .mbx-ra{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);
    background:var(--card);color:var(--t2);border-radius:12px;padding:12px 6px;font-family:inherit;
    font-size:12.5px;font-weight:700;cursor:pointer;min-height:46px}
  .mbx-ra.pri{background:var(--accent);border-color:transparent;color:var(--on-solid);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent)}
  .mbx-ra:active{transform:scale(.97)}
}
@media(max-width:768px){ .mbx-ract{bottom:calc(60px + env(safe-area-inset-bottom,0px))} }

/* Q204 — the reading-pane toolbar. */
.mbx-tools{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:11px 0 3px;position:relative}
.mbx-t{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--card);
  color:var(--t2);border-radius:8px;padding:6px 10px;font-family:inherit;font-size:11.5px;font-weight:600;
  cursor:pointer;min-height:32px}
.mbx-t:hover{background:var(--hover);color:var(--t1);border-color:var(--t3)}
.mbx-t svg{flex:none}
.mbx-t-del{color:#b91c1c;border-color:#fecaca}
.mbx-t-del:hover{background:#fef2f2;color:#b91c1c}
:root[data-theme="dark"] .mbx-t-del{color:#fca5a5;border-color:rgba(239,68,68,.42)}
:root[data-theme="dark"] .mbx-t-del:hover{background:rgba(239,68,68,.16);color:#fca5a5}
.mbx-t-sep{width:1px;height:20px;background:var(--border);margin:0 3px}
/* 2026-10-23 · the minimal reading head (Abdul: "it just takes up alot fo sapce the top part").
   One sender row (avatar, name, CRM chip, date on the right), one recipients line with to AND cc
   that opens the full details. Quiet toolbar moves are icon buttons with their name on hover. */
.mbx-t.ico{padding:6px 8px}
.mbx-t.ico span{display:none}
.mbx-h{display:flex;gap:10px;align-items:flex-start;padding:2px 0 10px;border-bottom:1px solid var(--border)}
.mbx-h-av{flex:none;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--accent-tx,var(--accent));background:color-mix(in srgb,var(--accent) 14%,var(--card))}
.mbx-h-av.sm{width:24px;height:24px;font-size:11px}
.mbx-h-main{flex:1;min-width:0}
.mbx-h-row{display:flex;align-items:center;gap:8px;min-width:0}
.mbx-h-name{font-size:13px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mbx-h-c{display:inline-flex;align-items:center;gap:3px;flex:0 1 auto;min-width:0;max-width:40%;font-size:11px;font-weight:600;
  color:var(--accent-tx,var(--accent));background:color-mix(in srgb,var(--accent) 10%,transparent);padding:2px 7px;border-radius:999px;text-decoration:none}
.mbx-h-c span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbx-h-c:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.mbx-h-when{margin-left:auto;flex:none;font-size:11.5px;color:var(--t2);white-space:nowrap}
.mbx-h-to{display:flex;align-items:center;gap:4px;max-width:100%;margin-top:2px;padding:1px 0;border:none;background:none;
  font:inherit;font-size:11.5px;color:var(--t2);cursor:pointer;text-align:left}
.mbx-h-to span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mbx-h-to svg{flex:none;color:var(--t3)}
.mbx-h-to:hover{color:var(--t1)}
.mbx-h-det{margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--bg);font-size:11.5px;color:var(--t1);line-height:1.6;overflow-wrap:anywhere}
.mbx-h-det span{display:inline-block;min-width:62px;color:var(--t2);font-weight:600}
/* the conversation timeline: other messages of the thread as one-line cards that open in place */
.mbx-tls{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.mbx-tls.after{margin:14px 0 0}
.mbx-tl{border:1px solid var(--border);border-radius:10px;background:var(--card);overflow:hidden}
.mbx-tl.me{background:var(--bg)}
.mbx-tl-h{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:none;background:none;font:inherit;
  font-size:12px;color:var(--t1);cursor:pointer;text-align:left;min-height:38px}
.mbx-tl-h:hover{background:var(--hover)}
.mbx-tl-h b{flex:none;max-width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbx-tl-p{flex:1;min-width:0;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbx-tl-d{margin-left:auto;flex:none;font-size:11px;color:var(--t2)}
.mbx-tl-b{padding:6px 14px 12px;font-size:13px;color:#1a1a1a;background:#ffffff;border-top:1px solid var(--border);overflow-x:auto}
.mbx-tl-b img{max-width:100%;height:auto}
.mbx-tl-b .mbx-p-text{color:#1a1a1a}
.mbx-move{position:absolute;top:100%;left:0;z-index:30;min-width:170px;padding:5px;border-radius:11px;
  background:var(--card);border:1px solid var(--border);box-shadow:0 12px 32px rgba(0,0,0,.16)}
:root[data-theme="dark"] .mbx-move{box-shadow:0 12px 32px rgba(0,0,0,.5)}
.mbx-move-i{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:none;background:none;
  color:var(--t1);font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 9px;border-radius:7px;cursor:pointer;min-height:34px}
.mbx-move-i:hover{background:var(--bg)}
.mbx-atts{margin-top:16px;padding-top:13px;border-top:1px solid var(--border)}
.mbx-atts-h{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--t2);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.mbx-att{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px;
  padding:7px 10px;margin:0 6px 6px 0;font-size:12px;font-weight:600;color:var(--t1);text-decoration:none;min-height:34px}
.mbx-att:hover{background:var(--hover)}
.mbx-att i{font-style:normal;color:var(--t2);font-weight:600;font-size:11px}
@media(max-width:900px){ .mbx-t{min-height:44px;padding:8px 11px} .mbx-move-i{min-height:44px} .mbx-att{min-height:44px} }

/* Q105 — the windowing control. One block, used by the contacts table (as a
   full-width <tr>), the SMS conversation list, both transcript panes and the
   two activity feeds, so a "show more" cannot come to look different in one
   place than another. */
.pg-more{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  padding:12px 16px;border-top:1px solid var(--border)}
.pg-more.pg-top{border-top:none;border-bottom:1px solid var(--border);margin-bottom:4px}
.pg-row td{padding:0!important;background:var(--card)}
.pg-all{border:none;background:none;color:var(--t2);font-family:inherit;font-size:11.5px;
  font-weight:600;cursor:pointer;padding:6px 4px;border-radius:6px;min-height:32px}
.pg-all:hover{color:var(--t1);text-decoration:underline}
.pg-n{font-size:11px;color:var(--t3);font-weight:500}
@media(max-width:768px){
  /* The action gets the same 44px floor Q122 set for full-size buttons — it was
     24px here while the SECONDARY "Show all" beside it was 44, which is the
     wrong way round on the control's own primary verb. */
  .pg-more{padding:14px 12px}
  .pg-more .btn,.pg-all{min-height:44px}
  /* THE CONTACTS TABLE SCROLLS SIDEWAYS ON A PHONE, and this footer spans every
     column — so centred inside a 479px-wide row it sat partly off screen at
     scrollLeft 0. Pinned to the left of the scroll viewport and capped at the
     viewport's width, it is always where the reader already is. */
  .pg-row .pg-more{position:sticky;left:0;max-width:calc(100vw - 26px);justify-content:flex-start}
}

/* Q109 — the ?perf=1 overlay. Present only while it is on. */
.pf{position:fixed;right:12px;bottom:12px;z-index:10000;width:236px;padding:8px 9px;border-radius:11px;
  background:rgba(15,23,42,.94);color:#e2e8f0;font-size:11px;line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 12px 32px rgba(0,0,0,.4)}
.pf-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;font-size:9.5px;color:#94a3b8;margin-bottom:5px}
.pf-x{background:none;border:none;color:#94a3b8;font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
.pf-x:hover{color:#e2e8f0}
.pf-r{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.pf-r span{color:#cbd5e1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-r em{color:#64748b;font-style:normal}
.pf-r i{font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-r b{font-weight:400;color:#64748b}
.pf-r u{text-decoration:none;color:#94a3b8}
.pf-sub span,.pf-sub i{color:#64748b;font-size:10px}
.pf-r s{text-decoration:none;color:#64748b}
.pf-idle span,.pf-idle i{color:#475569}
.pf-bad i,.pf-bad u{color:#fca5a5}
.pf-c{margin-top:6px;padding-top:5px;border-top:1px solid rgba(148,163,184,.25);color:#94a3b8;font-size:9.5px}
@media(max-width:768px){ .pf{left:12px;right:12px;width:auto;bottom:74px} }

/* Q132 — the Settings weights card. (No score-chip styles: the Score column
   already existed from Q121 and keeps its own rendering — see js/table-cols.js.) */
.sc-row{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border)}
.sc-row:last-of-type{border-bottom:none}
.sc-t{flex:1;min-width:0}
.sc-t b{display:block;font-size:12.5px;font-weight:600;color:var(--t1)}
.sc-t i{display:block;font-style:normal;font-size:11px;color:var(--t2);margin-top:2px;line-height:1.45}
.sc-in{display:flex;align-items:center;gap:6px;flex:none}
.sc-in input{width:68px;padding:7px 8px;border:1px solid var(--border);border-radius:8px;background:var(--card);
  color:var(--t1);font-family:inherit;font-size:12.5px;font-weight:600;text-align:right;min-height:34px}
.sc-in span{font-size:11px;color:var(--t3);font-weight:600}
.sc-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--border);font-size:11.5px;color:var(--t2)}
@media(max-width:768px){ .sc-row{flex-direction:column;gap:6px} .sc-in input{min-height:44px;width:88px} }

/* Q124 — the pipeline switcher, its stats line and the Settings manager. */
.kb.kb-n{grid-template-columns:repeat(var(--kb-n,4),minmax(0,1fr))}
@media(max-width:1100px){ .kb.kb-n{grid-template-columns:repeat(min(var(--kb-n,4),3),minmax(0,1fr))} }
@media(max-width:768px){ .kb.kb-n{grid-template-columns:1fr} }
.pl-sw{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pl-t{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--card);
  color:var(--t2);border-radius:9px;padding:7px 12px;font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;min-height:36px}
.pl-t:hover{background:var(--hover);color:var(--t1)}
.pl-t.on{border-color:var(--t3);color:var(--t1);background:var(--bg)}
.pl-n{font-size:11px;font-weight:700;color:var(--t3);background:var(--bg);border-radius:6px;padding:1px 6px}
.pl-t.on .pl-n{background:var(--card)}
.pl-stats{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;margin-bottom:12px;font-size:11.5px;color:var(--t2)}
.pl-stats b{font-size:12.5px;color:var(--t1)}
.pl-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.pl-row:last-child{border-bottom:none}
.pl-i{flex:1;min-width:0}
.pl-i b{font-size:12.5px;font-weight:600;color:var(--t1)}
.pl-i em{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--t3);border:1px solid var(--border);border-radius:5px;padding:1px 5px;margin-left:7px}
.pl-i i{display:block;font-style:normal;font-size:11px;color:var(--t3);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-c{font-size:11px;color:var(--t3);white-space:nowrap}
.pl-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t2);margin:14px 0 7px}
.pl-st{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.pl-num{flex:none;width:20px;text-align:center;font-size:11px;font-weight:700;color:var(--t3)}
.pl-st input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--card);color:var(--t1);font-family:inherit;font-size:12.5px;min-height:36px}
.pl-end{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:768px){ .pl-end{grid-template-columns:1fr} .pl-t{min-height:44px} .pl-st input{min-height:44px} .pl-row{flex-wrap:wrap} }
.kc-stray{border:1px dashed var(--border)}
.kc-note{font-size:11px;color:var(--t2);padding:10px 12px;line-height:1.45}

/* ---------- Q125 — companies (js/companies.js) ----------
   Deliberately built out of the tokens and the existing chip families rather
   than new colours: the Q122 sweep measured every interactive element in this
   file, and a new hue would be a new pair of contrast numbers to defend in two
   themes. `.org-k-mid` is `.dp-mid`'s exact #fef3c7/#854d0e and `.org-k-hi` is
   the #d1fae5/#065f46 already carried by `.b-active`, `.health-badge.green`
   and `.af-call` — both measured AA by that sweep. (The first cut of this
   block SAID it reused the Q131 values while `.org-k-hi` was a #dcfce7 pair
   that appears nowhere else in this file; a comment that describes what was
   intended rather than what is there is the queue-note failure one file over.)
   THERE IS NO `[data-theme="dark"]` OVERRIDE FOR EITHER, and that is Q122's
   decision rather than an omission: a pastel chip carries its own background,
   so the family stays byte-identical between themes. Nothing here resolves
   --accent, so nothing here joins the green flip list. */
.org-sum{font-size:12px;color:var(--t2);line-height:1.7;margin:0 0 12px}
.org-sum b{color:var(--t1)}
.org-cov{font-size:11px;color:var(--t3);line-height:1.6;margin:12px 0 0;
  padding-top:10px;border-top:1px dashed var(--border)}
.org-hint{font-size:11px;color:var(--t3);line-height:1.6;margin:6px 0 0}
.org-hint b{color:var(--t2)}
.org-k{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;margin-right:6px;white-space:nowrap}
.org-k-hi{background:#d1fae5;color:#065f46}
.org-k-mid{background:#fef3c7;color:#854d0e}
.org-warn{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--t2);line-height:1.7;
  margin:0 0 12px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.org-warn>svg{flex:none;margin-top:3px}
.org-warn b{color:var(--t1)}
.org-warn i{font-style:normal;font-weight:600;color:var(--t1)}
.org-rule{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--t2);line-height:1.7;margin:12px 0 0}
.org-rule>svg{flex:none;color:var(--accent);margin-top:3px}
.org-rule b{color:var(--t1)}

.org-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:9px;margin-bottom:12px;
  border-bottom:1px solid var(--border);scrollbar-width:thin}
.org-tab{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;
  border:1px solid var(--border);background:var(--card);color:var(--t2);cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:600;white-space:nowrap;min-height:32px}
.org-tab:hover{background:var(--hover)}
.org-tab.on{border-color:var(--t3);color:var(--t1);background:var(--bg)}
.org-tab-n{font-size:10px;font-weight:700;color:var(--t3);border:1px solid var(--border);
  border-radius:5px;padding:0 5px;line-height:16px}

.org-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.org-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.org-p{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--border);border-radius:10px;
  padding:9px 11px;background:var(--card);cursor:pointer;min-width:0}
.org-p:hover{background:var(--hover)}
.org-p.on{border-color:var(--t3)}
.org-p:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.org-cb{flex:none;margin-top:2px;width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.org-p-b{min-width:0;display:block}
.org-p-b b{display:block;font-size:12.5px;font-weight:700;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-p-b i,.org-p-b em{display:block;font-style:normal;font-size:11px;color:var(--t2);line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-p-b em{color:var(--t3)}
.org-empty{text-align:center;padding:30px 12px;color:var(--t2)}
.org-empty>svg{color:var(--accent);opacity:.7}
.org-empty h4{font-size:14px;font-weight:700;color:var(--t1);margin:8px 0 4px}
.org-empty p{font-size:12px;color:var(--t2);line-height:1.6;margin:0}

.org-row{display:flex;align-items:center;gap:11px;padding:11px 18px;border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;min-height:44px}
.org-row:last-child{border-bottom:none}
a.org-row:hover{background:var(--hover)}
.org-row-p{gap:10px}
.org-av{flex:none;width:32px;height:32px;border-radius:9px;background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--t2)}
.org-row-b{flex:1;min-width:0;text-decoration:none;color:inherit;display:block}
.org-row-b b{display:block;font-size:13px;font-weight:700;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-row-b i{display:block;font-style:normal;font-size:11px;color:var(--t3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.org-row-b:hover b{text-decoration:underline}
.org-row-n{flex:none;font-size:11px;color:var(--t2);white-space:nowrap}
.org-row-m{flex:none;font-size:12.5px;font-weight:700;color:var(--t1);white-space:nowrap}
.org-row-m i{font-style:normal;font-size:11px;font-weight:600;color:var(--t3)}
.org-n{font-size:11px;font-weight:700;color:var(--t3)}

.org-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;
  border:1px solid var(--border);background:var(--bg);color:var(--t2);
  font-family:inherit;font-size:10.5px;font-weight:600;text-decoration:none;cursor:pointer;line-height:18px}
.org-chip:hover{background:var(--hover);color:var(--t1)}
.org-chip b{font-size:10px;font-weight:700;color:var(--t3)}
.org-chip-new{border-style:dashed}
@media(max-width:768px){
  .org-form{grid-template-columns:1fr}
  .org-people{grid-template-columns:1fr}
  .org-tab{min-height:44px}
  .org-row{padding:12px 14px;flex-wrap:wrap}
  .org-chip{min-height:24px}
}

/* ---------- Q128 — notes (js/notes.js) ----------
   Built from the tokens and the existing card furniture, exactly as Q125 was:
   no new hue, so nothing here adds a pair of contrast numbers to defend in two
   themes and nothing joins the --accent flip list. `.note-b` is the ONLY place
   the stored rich-text HTML is painted, so every element the editor can produce
   is constrained here rather than inheriting whatever the page happens to say.
   THERE IS NO [data-theme="dark"] BLOCK, deliberately (Q122): every colour is a
   token, so both themes follow automatically. */
.note-who{font-size:12px;font-weight:600;color:var(--t3)}
.note-n{font-size:11px;font-weight:700;color:var(--t3)}
.note-cov{font-size:11px;color:var(--t3);line-height:1.6;margin:10px 0 0;
  padding-top:9px;border-top:1px dashed var(--border)}

.note-pin-row{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:10px 12px;
  border:1px solid var(--border);border-radius:10px;background:var(--bg);cursor:pointer;
  font-size:11.5px;line-height:1.6;color:var(--t2)}
.note-pin-row:hover{background:var(--hover)}
.note-pin-row:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.note-pin-row input{flex:none;margin-top:2px;width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.note-pin-row b{color:var(--t1)}

.note-row{padding:12px 18px;border-bottom:1px solid var(--border)}
.note-row:last-child{border-bottom:none}
.note-row.on{background:var(--bg);box-shadow:inset 3px 0 0 var(--accent)}
.note-m{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;
  font-size:11px;color:var(--t3)}
.note-acts{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.note-row.on .note-acts .btn:first-child{color:var(--t1);font-weight:700}

/* The painted note body. Every rule here exists because the shared rich editor
   can emit that tag and an unstyled one would inherit the page's defaults. */
.note-b{font-size:13px;line-height:1.65;color:var(--t1);overflow-wrap:anywhere}
.note-b>*:first-child{margin-top:0}
.note-b>*:last-child{margin-bottom:0}
.note-b p,.note-b div{margin:0 0 4px}
.note-b h1{font-size:16px;font-weight:800;margin:8px 0 4px}
.note-b h2{font-size:14px;font-weight:700;margin:8px 0 4px}
.note-b ul,.note-b ol{margin:4px 0 4px 20px;padding:0}
.note-b li{margin:2px 0}
.note-b blockquote{border-left:3px solid var(--border);margin:6px 0;padding-left:10px;color:var(--t2)}
.note-b pre{background:var(--bg);border-radius:8px;padding:9px 11px;overflow-x:auto;font-size:12px}
.note-b hr{border:none;border-top:1px solid var(--border);margin:8px 0}
.note-b img{max-width:100%;height:auto;border-radius:8px}
.note-b a{color:var(--accent)}
/* Inside the Q111 header strip the pinned note is a summary, not a document:
   cap it so one long note can never push the fold off the screen. */
.ck-note-b.note-b{max-height:120px;overflow:auto;font-size:12px}

.note-legacy{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--t2);
  line-height:1.6;border-top:1px solid var(--border)}
.note-legacy>svg{flex:none;margin-top:3px;color:var(--t3)}
.note-legacy b{color:var(--t1)}
.note-legacy-b{margin:7px 0;padding:9px 11px;background:var(--bg);border-radius:9px;
  white-space:pre-line;color:var(--t2);overflow-wrap:anywhere}
@media(max-width:768px){
  .note-row{padding:12px 14px}
  .note-acts{width:100%;margin-left:0}
  .note-acts .btn{min-height:32px}
}

/* ---------- Q129 — files (js/files.js) ----------
   Tokens only, same as Q125 and Q128: no new hue, nothing joins the --accent
   flip list, and no [data-theme="dark"] block is needed because every colour
   resolves per theme already. `.fil-` and not `.fl` — `.fl` is the form-field
   class and the two must never be confused by a grep. */
.fil-n{font-size:11px;font-weight:700;color:var(--t3);white-space:nowrap}
.fil-cov{font-size:11px;color:var(--t3);line-height:1.6;margin:10px 0 0;
  padding-top:9px;border-top:1px dashed var(--border)}
.fil-row{display:flex;align-items:center;gap:11px;padding:10px 18px;border-bottom:1px solid var(--border);min-height:52px}
.fil-row:last-child{border-bottom:none}
.fil-row:hover{background:var(--hover)}
.fil-ic{flex:none;width:32px;height:32px;border-radius:9px;background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--t2)}
/* The name is a BUTTON, not a link: the href does not exist until the signed
   URL is minted on click, and a dead href is a right-click "copy link" that
   hands the owner a URL that never worked. */
.fil-b{flex:1;min-width:0;display:block;text-align:left;background:none;border:none;padding:0;
  font-family:inherit;cursor:pointer;color:inherit}
.fil-b b{display:block;font-size:13px;font-weight:700;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fil-b i{display:block;font-style:normal;font-size:11px;color:var(--t3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fil-b:hover b{text-decoration:underline}
.fil-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.fil-acts{flex:none;display:flex;gap:4px}
.fil-zone{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;
  border:1px dashed var(--border);background:var(--bg);font-size:12px;color:var(--t2)}
.fil-zone.drag{border-color:var(--accent);background:var(--hover)}
.fil-zone>svg{flex:none;color:var(--t3)}
.fil-note{display:flex;align-items:flex-start;gap:7px;font-size:11px;color:var(--t3);
  line-height:1.6;margin:9px 0 0}
.fil-note>svg{flex:none;margin-top:2px}
.fil-note b{color:var(--t2)}
@media(max-width:768px){
  .fil-row{padding:10px 14px;flex-wrap:wrap}
  .fil-b{flex:1 1 100%;order:2}
  .fil-acts{order:3;margin-left:auto}
  .fil-acts .btn{min-height:32px}
  .fil-zone{justify-content:center;text-align:center}
}

/* ---------- Q137 — sequences (js/sequences.js) ----------
   Tokens only, same as Q125/Q128/Q129: no new hue, nothing joins the --accent
   flip list, and no [data-theme="dark"] block is needed because every colour
   resolves per theme already. Prefix `.sq-`. */
.sq-cov{font-size:11px;color:var(--t3);line-height:1.6;margin:10px 0 8px;
  padding-top:9px;border-top:1px dashed var(--border)}
.sq-none{padding:12px 18px;font-size:12px;color:var(--t3)}
.sq-row{display:flex;align-items:flex-start;gap:11px;padding:11px 18px;border-bottom:1px solid var(--border)}
.sq-row:last-child{border-bottom:none}
.sq-row:hover{background:var(--hover)}
.sq-rs{flex:1;min-width:0}
.sq-rn{font-size:12.5px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sq-rm{font-size:11px;color:var(--t3);margin-top:3px}
/* THE LINE THAT MAKES A JUDGEMENT VISIBLE. `last_note` is what the last
   scheduler run decided — including an out-of-office it chose to ignore — so it
   is styled to be read, not tucked away as metadata. */
.sq-note{font-size:11px;color:var(--t2);line-height:1.6;margin-top:5px;padding:6px 9px;
  background:var(--bg);border:1px solid var(--border);border-radius:8px}
.sq-acts{flex:none;display:flex;gap:4px}
.sq-help{font-size:12px;color:var(--t2);line-height:1.7;margin:0 0 12px}
.sq-warn{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--t2);
  line-height:1.6;margin:10px 0 0}
.sq-warn>svg{flex:none;margin-top:2px}
.sq-pick{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--border);
  border-radius:11px;padding:11px 13px;margin-bottom:8px;cursor:pointer;font-family:inherit;color:inherit;min-height:44px}
.sq-pick:hover{background:var(--hover);border-color:var(--accent)}
.sq-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sq-pick b{display:block;font-size:13px;font-weight:700;color:var(--t1)}
.sq-pick i{display:block;font-style:normal;font-size:11px;color:var(--t3);margin-top:3px}
.sq-pick u{display:block;text-decoration:none;font-size:11px;color:var(--t2);margin-top:4px}
/* the manager */
.sq-mrow{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--card)}
.sq-mh{margin-bottom:9px}
.sq-steps{border-top:1px dashed var(--border);padding-top:8px}
.sq-step-r{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:11.5px;color:var(--t2)}
.sq-step-n{flex:none;width:20px;height:20px;border-radius:6px;background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:var(--t2)}
.sq-step-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1);font-weight:600}
.sq-step-d{flex:none;font-size:11px;color:var(--t3)}
.sq-step-s{flex:none;font-size:11px;color:var(--t3);min-width:96px;text-align:right}
.sq-macts{display:flex;gap:6px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--border)}
/* the editor */
.sq-ed-steps{margin:12px 0}
.sq-ed-step{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid var(--border)}
.sq-ed-tpl{flex:1;min-width:0;height:34px;border-radius:8px;border:1px solid var(--border);
  background:var(--card);color:var(--t1);font-family:inherit;font-size:12px;padding:0 8px}
.sq-ed-day{flex:none;font-size:11px;color:var(--t3);display:flex;align-items:center;gap:5px}
.sq-ed-day input{width:62px;height:34px;border-radius:8px;border:1px solid var(--border);
  background:var(--card);color:var(--t1);font-family:inherit;font-size:12px;padding:0 7px;text-align:center}
.sq-onoff{margin-top:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.sq-onoff label{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--t2);line-height:1.6;cursor:pointer}
.sq-onoff input{margin-top:2px;flex:none}
.cf-chip.off{opacity:.62}
@media(max-width:768px){
  .sq-row{padding:11px 14px;flex-wrap:wrap}
  .sq-rs{flex:1 1 100%}
  .sq-acts{width:100%;margin-top:8px}
  .sq-acts .btn{min-height:32px}
  .sq-ed-step{flex-wrap:wrap}
  .sq-ed-tpl{flex:1 1 100%}
  .sq-step-s{min-width:0}
}

/* ---------- Q138 — scheduled send / the Outbox (js/scheduled.js) ----------
   Tokens only; nothing here joins the --accent flip list. Prefix `.sch-`,
   distinct from `.sc-` (Q132 scoring) and `.sq-` (Q137 sequences). */
.sch-n{font-size:11px;font-weight:700;color:var(--t3);white-space:nowrap}
.sch-cov,.sch-cadence{font-size:11px;color:var(--t3);line-height:1.6;margin:10px 0 0;
  padding-top:9px;border-top:1px dashed var(--border)}
.sch-row{display:flex;align-items:flex-start;gap:11px;padding:11px 18px;border-bottom:1px solid var(--border)}
.sch-row:last-child{border-bottom:none}
.sch-row:hover{background:var(--hover)}
.sch-ic{flex:none;width:30px;height:30px;border-radius:9px;background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--t2)}
.sch-rs{flex:1;min-width:0}
.sch-rn{font-size:12.5px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sch-rm{font-size:11px;color:var(--t3);margin-top:3px}
/* The line that carries "you picked 9am, it will actually go at 4am" and, once
   it has run, whatever the server said. It is styled to be READ. */
.sch-note{font-size:11px;color:var(--t2);line-height:1.6;margin-top:5px;padding:6px 9px;
  background:var(--bg);border:1px solid var(--border);border-radius:8px}
.sch-acts{flex:none;display:flex;gap:4px}
/* the picker — IN FLOW, never a panel hanging off a button (Q121's lesson) */
.sch-pick{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.sch-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.sch-pre{padding:7px 11px;border-radius:8px;border:1px solid var(--border);background:var(--card);
  color:var(--t2);font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;min-height:32px}
.sch-pre:hover{background:var(--hover);color:var(--t1)}
.sch-pre.on{border-color:var(--accent);color:var(--t1)}
.sch-when{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sch-when label{font-size:11px;color:var(--t3)}
.sch-when input{height:34px;border-radius:8px;border:1px solid var(--border);background:var(--card);
  color:var(--t1);font-family:inherit;font-size:12px;padding:0 8px}
.sch-real{font-size:11.5px;color:var(--t2);line-height:1.6;margin:10px 0 0}
.sch-real.warn{color:var(--danger)}
.sch-actions{display:flex;gap:6px;margin-top:10px}
@media(max-width:768px){
  .sch-row{padding:11px 14px;flex-wrap:wrap}
  .sch-rs{flex:1 1 100%}
  .sch-acts{width:100%;margin-top:8px}
  .sch-acts .btn{min-height:32px}
  .sch-when input{flex:1 1 100%}
}

/* ============================================================
   Epic M — Newsletters / segment builder (M4). js/campaigns.js.
   Pastel status/exclusion chips carry their own background and dark text, so
   the family is theme-stable and needs no [data-theme="dark"] override (Q122).
   ============================================================ */
.pc-pad{max-width:920px}
.camp-bar{display:flex;justify-content:flex-end;margin-bottom:16px}
.camp-list{display:flex;flex-direction:column;gap:10px}
.camp-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s;font-family:inherit}
.camp-row:hover{border-color:var(--accent);box-shadow:var(--sh)}
.camp-row-main{flex:1;min-width:0}
.camp-row-name{font-weight:600;font-size:14px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp-row-sub{font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.camp-row-aud{font-size:12px;color:var(--t2);flex-shrink:0;max-width:280px;text-align:right}
.camp-row-meta{flex-shrink:0}
.camp-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.02em}
.camp-draft{background:#e2e8f0;color:#334155}
.camp-scheduled{background:#dbeafe;color:#1e40af}
.camp-sending{background:#fef3c7;color:#92400e}
.camp-sent{background:#d1fae5;color:#065f46}
.camp-paused{background:#fee2e2;color:#991b1b}
.camp-empty{text-align:center;padding:56px 20px;color:var(--t3)}
.camp-empty svg{color:var(--t3);opacity:.5;margin-bottom:8px}
.camp-empty h4{color:var(--t1);font-size:16px;margin:6px 0}
.camp-empty p{max-width:420px;margin:0 auto 16px;font-size:13px;line-height:1.5}
.camp-editor .camp-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.camp-name-input{flex:1;font-size:20px;font-weight:700;color:var(--t1);background:transparent;border:none;border-bottom:1px solid transparent;padding:4px 2px;font-family:inherit;outline:none}
.camp-name-input:hover{border-bottom-color:var(--border)}
.camp-name-input:focus{border-bottom-color:var(--accent)}
.camp-subj{margin-bottom:16px}
.camp-subj label{display:block;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:5px}
.camp-subj input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:var(--input);color:var(--t1);outline:none}
.camp-subj input:focus{border-color:var(--accent)}
.camp-card{margin-top:0;margin-bottom:16px}
.camp-soon .cb .cf-need{margin:0}
.camp-seg{margin-bottom:18px}
.camp-seg-l{display:block;font-size:12px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.camp-seg-hint{font-size:12px;color:var(--t3);line-height:1.5}
.camp-view-sel{max-width:340px}
.camp-match{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:12px;color:var(--t2)}
.camp-match-b{border:1px solid var(--border);background:var(--bg);color:var(--t2);border-radius:6px;padding:3px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.camp-match-b.on{background:var(--accent);color:var(--on-solid);border-color:var(--accent)}
.camp-match-h{color:var(--t3);margin-left:4px}
.camp-pillbox{display:flex;flex-wrap:wrap;gap:6px}
.camp-exc.sel{border-color:#991b1b}
.camp-warn{margin-top:8px;font-size:12px;color:#92400e;background:#fef3c7;border-radius:7px;padding:7px 10px;display:flex;align-items:center;gap:6px}
.camp-count{margin-top:18px;border-top:1px solid var(--border);padding-top:16px}
.camp-count-n{display:flex;align-items:baseline;gap:8px}
.camp-count-n b{font-size:30px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.camp-count-n span{font-size:13px;color:var(--t2);font-weight:600}
.camp-count-excl{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.camp-excl{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
.camp-excl svg{opacity:.7}
.camp-excl-unsub{background:#fee2e2;color:#991b1b}
.camp-excl-bad{background:#fef3c7;color:#92400e}
.camp-excl-noem{background:#e2e8f0;color:#334155}
.camp-excl-tagx{background:#ede9fe;color:#5b21b6}
.camp-count-clean{margin-top:10px;font-size:12px;color:#065f46;display:flex;align-items:center;gap:5px}
.camp-count-zero{margin-top:10px;font-size:12px;color:#92400e;display:flex;align-items:center;gap:5px}
.camp-count-foot{margin-top:12px;font-size:11px;color:var(--t3);line-height:1.5}
/* WHO IS IN THIS LIST (2026-09-12, his "we can dive inside and see the list of poeple here").
   Tokens only, so both themes come from one definition; the excluded chip carries its reason
   inline rather than in a legend, because a reason a reader has to go and look up is not one. */
.camp-people{margin-top:14px;border-top:1px dashed var(--border);padding-top:12px}
.camp-people-h{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--t3);margin-bottom:7px}
.camp-people-h2{margin-top:12px}
.camp-people-l{display:flex;flex-wrap:wrap;gap:5px}
.camp-person{display:inline-flex;align-items:center;gap:5px;max-width:100%;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:20px;background:var(--bg);color:var(--t1);border:1px solid var(--border);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp-person i{font-style:normal;font-weight:600;font-size:10px;color:var(--t3)}
.camp-person-out{opacity:.72;text-decoration:line-through;text-decoration-color:var(--t3)}
.camp-person-out i{text-decoration:none;display:inline-block}
.camp-person-more{color:var(--t3);background:transparent;border-style:dashed}
/* WHO OPENED THE LINK (2026-09-13): one row per person, the count of their visits, and the
   channel that sent them. Tokens only, so it reads in both themes from one definition. */
.camp-hits-load{font-size:12.5px;color:var(--t3);padding:6px 0}
.camp-hits-top{display:flex;gap:26px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--border)}
.camp-hits-top div{display:flex;align-items:baseline;gap:7px}
.camp-hits-top b{font-size:26px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.camp-hits-top span{font-size:12px;color:var(--t2);font-weight:600}
.camp-hits-l{display:flex;flex-direction:column;gap:6px}
.camp-hit{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.camp-hit-n{font-size:13.5px;font-weight:700;color:var(--t1);flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp-hit-v{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);
  border:1px solid var(--border);border-radius:20px;padding:2px 8px;white-space:nowrap}
.camp-hit-c{font-size:13.5px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.camp-hit-t{font-size:11px;color:var(--t3);white-space:nowrap;min-width:96px;text-align:right}
.camp-hits-foot{margin-top:12px;font-size:11px;color:var(--t3);line-height:1.5}
.camp-hits-foot code{font-family:ui-monospace,monospace;font-size:10.5px;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:1px 4px}
@media(max-width:640px){.camp-hit-t{display:none}}
@media(max-width:768px){
  .pc-pad{max-width:100%}
  .camp-row{flex-wrap:wrap}
  .camp-row-aud{max-width:100%;text-align:left;flex-basis:100%;order:3}
  .camp-name-input{font-size:17px}
  .camp-count-n b{font-size:26px}
}
:root[data-theme="dark"] .camp-count-clean{color:#34d399}
:root[data-theme="dark"] .camp-count-zero{color:#fbbf24}

/* M5 — Review & send card (js/campaigns.js) */
.camp-aud-ro{font-size:13px;color:var(--t2);display:flex;flex-direction:column;gap:4px}
.camp-send-lead{font-size:13px;color:var(--t1);line-height:1.55;margin:0 0 12px}
.camp-send-lead b{color:var(--accent)}
.camp-send-acts{display:flex;flex-wrap:wrap;gap:8px}
.camp-prog{margin-top:10px;font-size:12px;color:var(--t2);font-variant-numeric:tabular-nums}
.camp-prog-load{color:var(--t3)}
.camp-b18{margin-top:14px;font-size:11.5px;line-height:1.5;color:#92400e;background:#fef3c7;border-radius:8px;padding:9px 11px;display:flex;gap:6px;align-items:flex-start}
.camp-b18 svg{flex-shrink:0;margin-top:1px}
#camp-sched-pick:not(:empty){margin-top:12px}
.camp-addr-warn{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:#991b1b;background:#fee2e2;border-radius:9px;padding:12px 13px}
.camp-addr-warn svg{flex-shrink:0;margin-top:1px}
.camp-addr-warn b{display:block;margin-bottom:3px}
:root[data-theme="dark"] .camp-addr-warn{color:#fecaca;background:rgba(153,27,27,.28)}

/* M7a — email content preview (js/campaigns.js + newsletter-builder.js) */
.nb-prev-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.nb-prev-dev{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:3px}
.nb-dev{display:inline-flex;align-items:center;gap:5px;border:none;background:transparent;color:var(--t2);font-size:12px;font-weight:600;font-family:inherit;padding:5px 11px;border-radius:6px;cursor:pointer}
.nb-dev.on{background:var(--card);color:var(--accent);box-shadow:var(--sh)}
.nb-prev-wrap{background:#eef1f5;border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;justify-content:center;overflow:hidden}
.nb-prev-frame{width:100%;max-width:600px;height:520px;border:0;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.nb-prev-wrap.nb-mobile .nb-prev-frame{max-width:375px}
:root[data-theme="dark"] .nb-prev-wrap{background:#0b1220}
/* M9 — "See it as delivered" control + banner */
.nb-deliver{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--card);color:var(--t2);font-size:12px;font-weight:600;font-family:inherit;padding:6px 11px;border-radius:8px;cursor:pointer}
.nb-deliver:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.nb-deliver:disabled{opacity:.6;cursor:default}
.camp-deliver-banner{margin:0 0 10px}
.camp-deliver-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--t2);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 11px}
.camp-deliver-subj{font-weight:700;color:var(--t1)}
.camp-deliver-back{margin-left:auto;font-size:11px}
.camp-deliver-warn{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:7px 11px;margin-top:6px}
:root[data-theme="dark"] .camp-deliver-warn{color:#fcd34d;background:#3a2c05;border-color:#5c4708}
@media(max-width:768px){
  .nb-prev-frame{height:440px}
  .nb-prev-bar{flex-wrap:wrap}
}

/* M11 — resend to non-openers (js/campaigns.js) */
.camp-resend-panel{border:1px solid var(--border);background:var(--bg);border-radius:10px;padding:13px 14px}
.camp-resend-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--t1);margin-bottom:6px}

/* M10 — campaign analytics (js/campaigns.js) */
.camp-ana-sec{margin-bottom:16px}
.camp-ana-sec:last-child{margin-bottom:0}
.camp-ana-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.camp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.camp-stat{border:1px solid var(--border);background:var(--bg);border-radius:10px;padding:11px 13px}
.camp-stat-v{font-size:22px;font-weight:800;color:var(--t1);line-height:1.1}
.camp-stat-pct{font-size:13px;font-weight:700;color:var(--accent);margin-left:2px}
.camp-stat-l{font-size:11.5px;color:var(--t3);margin-top:3px;font-weight:600}
.camp-stat-s{display:block;font-size:10.5px;color:var(--t3);font-weight:500;margin-top:1px}
.camp-ana-gate{display:flex;align-items:flex-start;gap:7px;font-size:12px;line-height:1.5;color:var(--t2);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:11px 13px}
.camp-ana-gate svg{flex:none;margin-top:2px;color:var(--t3)}

/* M7b — block editor (js/campaigns.js) */
.nb-ed{margin-bottom:18px}
.nb-ed-list{display:flex;flex-direction:column;gap:10px}
.nb-blk{border:1px solid var(--border);border-radius:10px;background:var(--card);overflow:hidden}
.nb-blk.nb-dragging{opacity:.5}
.nb-blk.nb-dragover{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.nb-blk-h{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg);border-bottom:1px solid var(--border);cursor:grab}
.nb-blk-h:active{cursor:grabbing}
.nb-blk-grip{color:var(--t3);display:inline-flex}
.nb-blk-type{font-size:12px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.03em;flex:1}
.nb-blk-tools{display:inline-flex;gap:2px}
.nb-ic{border:none;background:transparent;color:var(--t2);cursor:pointer;padding:5px;border-radius:6px;display:inline-flex}
.nb-ic:hover{background:var(--hover);color:var(--t1)}
.nb-ic:disabled{opacity:.3;cursor:not-allowed}
.nb-ic-del:hover{color:#dc2626;background:#fee2e2}
:root[data-theme="dark"] .nb-ic-del:hover{background:rgba(220,38,38,.2)}
.nb-blk-body{padding:12px 12px 6px;display:flex;flex-direction:column;gap:10px}
.nb-f{display:flex;flex-direction:column;gap:4px}
.nb-f-l{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.03em}
.nb-in,.nb-sel,.nb-ta{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;font-family:inherit;background:var(--input);color:var(--t1);outline:none}
.nb-in:focus,.nb-sel:focus,.nb-ta:focus{border-color:var(--accent)}
.nb-ta{resize:vertical;min-height:60px;line-height:1.5}
.nb-sel{max-width:180px}
.nb-add{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.nb-add-l{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.03em;margin-right:2px}
.nb-add-b{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--bg);color:var(--t2);border-radius:7px;padding:5px 10px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer}
.nb-add-b:hover{border-color:var(--accent);color:var(--accent)}
.nb-starter{font-size:12px;color:var(--t3);margin:12px 0;padding:12px;background:var(--bg);border-radius:8px}
.nb-starter-h{display:flex;align-items:center;gap:5px;font-weight:700;color:var(--t2);font-size:12px;margin-bottom:10px}
.nb-starter-sub{font-weight:500;color:var(--t3)}
.nb-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.nb-tpl{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--border);background:var(--card);border-radius:8px;padding:9px 11px;cursor:pointer;font-family:inherit;transition:border-color .12s,box-shadow .12s}
.nb-tpl:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.nb-tpl-l{font-weight:700;font-size:12.5px;color:var(--t1)}
.nb-tpl-d{font-size:11px;color:var(--t3);line-height:1.35}
.nb-prev-l{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.03em;display:inline-flex;align-items:center;gap:5px}
@media(max-width:768px){
  .nb-blk-body{padding:10px 10px 4px}
  .nb-sel{max-width:none}
  .nb-add{gap:5px}
}

/* ---------- Q198 — What's new (header popover) ----------
   The header button died 2026-09-05 (Abdul: "help and guides and whats new
   can go"); .wn-wrap remains ONLY as the anchor wnOpen() renders into, for
   the rail-foot v3.0 link / palette / Help-panel doors. Absolute against
   #ghead (sticky = its containing block) and zero-size: out of the flex
   flow, so it adds no gap beside the bell and the focus-collapse clip on
   .head-actions cannot touch it. The panel still drops from the header's
   right edge, where the button used to be. */
.wn-wrap{position:absolute;right:28px;bottom:0;width:0;height:0}
.wn-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:900;width:360px;max-width:calc(100vw - 20px);
  background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shlg);
  display:none;max-height:min(600px,80vh);overflow-y:auto}
.wn-panel.open{display:block}
.wn-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;font-size:13px;font-weight:700;color:var(--t1);position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--border);z-index:1}
.wn-x{background:none;border:none;cursor:pointer;color:var(--t3);display:inline-flex;padding:2px;border-radius:6px}
.wn-x:hover{color:var(--t1);background:var(--bg)}
.wn-list{padding:4px 0}
.wn-rel{padding:12px 14px;border-bottom:1px solid var(--border)}
.wn-rel:last-child{border-bottom:none}
.wn-rel-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.wn-rel-v{font-size:12px;font-weight:800;color:var(--t1);letter-spacing:.2px}
.wn-rel-d{font-size:11px;color:var(--t3);font-weight:600}
.wn-new{margin-left:auto;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--on-solid);background:var(--accent,#10b981);border-radius:999px;padding:2px 8px}
.wn-unread .wn-rel-v{color:var(--accent2,var(--accent))}
.wn-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.wn-items li{position:relative;padding-left:18px;font-size:12.5px;line-height:1.5;color:var(--t2)}
.wn-items li::before{content:"";position:absolute;left:4px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent,#10b981);opacity:.7}
.wn-empty{padding:30px 18px;text-align:center;color:var(--t3)}
.wn-empty svg{color:var(--t3);opacity:.55}
.wn-empty p{font-size:13px;font-weight:600;color:var(--t2);margin:8px 0 3px}
.wn-empty span{font-size:11.5px;color:var(--t3);line-height:1.5;display:block}
.wn-foot{padding:10px 14px;border-top:1px solid var(--border);background:var(--bg);font-size:11px;color:var(--t3)}
.wn-foot b{color:var(--t2);font-weight:700}
@media(max-width:768px){
  /* Fixed positioning resolves the inherited top:calc(100% + 8px) against
     the VIEWPORT, which parked the panel below the screen — an explicit top
     is required, not optional. 64px clears the one-line header. */
  .wn-panel{position:fixed;top:64px;left:10px;right:10px;width:auto;max-width:none}
}

/* Q152 — AI subject assistant chips in the compose window */
.subj-sugg{margin-top:6px}
.subj-sugg:empty{margin-top:0}
.subj-sugg-h{font-size:11px;color:var(--t3);margin-bottom:5px;display:flex;align-items:center;gap:4px}
.subj-chip{display:block;width:100%;text-align:left;margin:4px 0;padding:7px 10px;border:1px solid var(--border);border-radius:7px;background:var(--hover);color:var(--t1);font-family:inherit;font-size:12.5px;cursor:pointer;transition:border-color .12s,background .12s}
.subj-chip:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* Q153 — signature enrichment in the mail reading pane */
.mbx-p-sig{border:1px solid var(--border);background:var(--hover);color:var(--accent);font-family:inherit;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;margin-left:6px;vertical-align:middle}
.mbx-p-sig:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.mbx-sig:empty{display:none}
.mbx-sig{margin:8px 0}
.mbx-sig-card{border:1px solid var(--border);border-radius:9px;background:var(--card);padding:11px 12px;box-shadow:var(--sh)}
.mbx-sig-h{font-size:12.5px;color:var(--t1);display:flex;align-items:center;gap:5px;margin-bottom:8px}
.mbx-sig-h b{font-weight:700}
.mbx-sig-x{margin-left:auto}
.mbx-sig-em{font-size:12px;color:var(--t3);margin:-2px 0 8px}
.mbx-sig-row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:6px 0;border-top:1px solid var(--border)}
.mbx-sig-row:first-of-type{border-top:none}
.mbx-sig-f{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;min-width:0}
.mbx-sig-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);font-weight:700}
.mbx-sig-old{color:var(--t3);text-decoration:line-through}
.mbx-sig-arw{color:var(--t3)}
.mbx-sig-new{color:var(--t1);font-weight:600;word-break:break-word}
.mbx-sig-new-tag{font-size:10px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:1px 6px;border-radius:4px}
.mbx-sig-done{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:3px}
.mbx-sig-all{margin-top:9px;display:flex;justify-content:flex-end}
.mbx-sig-note{font-size:11px;color:var(--t3);margin-top:6px}

/* Q154 — weekly review modal */
.wr-sub{font-size:12.5px;color:var(--t2);margin-bottom:12px}
.wr-ai{color:var(--accent);font-weight:600}
.wr-noai{color:var(--t3)}
.wr-narr{font-size:14px;line-height:1.6;color:var(--t1);background:var(--hover);border:1px solid var(--border);border-radius:9px;padding:12px 14px;margin-bottom:14px}
.wr-narr p{margin:0 0 10px}.wr-narr p:last-child{margin-bottom:0}
.wr-facts-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);font-weight:700;margin:4px 0 8px}
.wr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.wr-stat{border:1px solid var(--border);border-radius:9px;padding:10px 12px;background:var(--card)}
.wr-stat-n{font-size:19px;font-weight:800;color:var(--t1)}
.wr-stat-l{font-size:11px;color:var(--t3);margin-top:2px}
.wr-sect{margin-bottom:12px}
.wr-sect-h{font-size:13px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:6px;margin-bottom:5px}
.wr-list{margin:0;padding-left:20px;font-size:13px;color:var(--t1);line-height:1.6}
.wr-co{color:var(--t3)}
.wr-none{font-size:12.5px;color:var(--t3);padding-left:2px}
.wr-empty{padding:12px 0}

/* Q155 — dictation mic button */
.dict-btn.dict-on,.dict-field.dict-on{color:var(--on-solid);background:var(--accent);border-color:var(--accent)}
.dict-btn.dict-on svg,.dict-field.dict-on svg{animation:dictpulse 1.1s ease-in-out infinite}
@keyframes dictpulse{0%,100%{opacity:1}50%{opacity:.45}}

/* Q156 — translate-assist language picker beside Polish */
.polish-lang{font-family:inherit;font-size:12px;padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:var(--input);color:var(--t1);cursor:pointer;max-width:150px}
.polish-lang:focus{border-color:var(--accent);outline:none}
.thr-bar .polish-lang{padding:4px 6px;font-size:11px}

/* Q157 — data hygiene sweep */
.hyg-sum{font-size:13px;color:var(--t2);margin-bottom:14px}
.hyg-clean{padding:12px 0}
.hyg-sect{border:1px solid var(--border);border-radius:9px;margin-bottom:10px;overflow:hidden}
.hyg-sect-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--t1);padding:9px 12px;background:var(--hover)}
.hyg-n{margin-left:auto;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:1px 9px;font-size:12px}
.hyg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.hyg-hi{background:#ef4444}.hyg-mid{background:#f59e0b}.hyg-low{background:var(--t3)}.hyg-ok{background:var(--accent)}
.hyg-sect-b{padding:6px 12px 10px}
.hyg-row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:7px 0;border-top:1px solid var(--border)}
.hyg-row:first-child{border-top:none}
.hyg-c{min-width:0}
.hyg-c-n{font-size:13px;font-weight:600;color:var(--t1)}
.hyg-c-m{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hyg-a{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.hyg-more{font-size:12px;color:var(--t3);padding-top:8px}
.hyg-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;font-size:13px;color:var(--t1)}
.hyg-inline.hyg-ok{color:var(--accent)}
.hyg-warn{color:var(--warn)}
.hyg-hint{font-size:11px;color:var(--t3)}
.hyg-ai-h{font-size:12.5px;font-weight:600;color:var(--t1);margin:8px 0 4px}
.hyg-ai-g{font-size:13px;color:var(--t1);padding:4px 0;border-top:1px dashed var(--border)}
.hyg-co{color:var(--t3);font-size:12px}
.hyg-vs{color:var(--accent);font-weight:700}

/* ============================================================
   Q183 — PRINT / PDF. Appended at the very end on purpose: its :root overrides
   must win over BOTH theme blocks above by source order, so a report saved to
   PDF is always on a clean light page regardless of the on-screen theme. The
   report body carries a .rpt-print-head (hidden on screen) so the PDF names the
   business, the window and the date. Only the active view prints; all shell
   chrome and every action control is hidden.
   ============================================================ */
.rpt-print-head{display:none}
@media print{
  :root, :root[data-theme="dark"], :root[data-theme="light"]{
    --bg:#ffffff;--card:#ffffff;--hover:#f5f6fa;--input:#ffffff;--border:#d8dce4;
    --t1:#0d1526;--t2:#3f4859;--t3:#5a6478;--sb:#0d1526;--ink:#0d1526;
  }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  html,body{ background:#ffffff !important; }
  #sb,#ghead,.bottom-nav,.fab,.ph,.ph-actions,#modal-ov,.toast-c,#search-results,
  .rpt-ctrl,.rpt-export,.rpt-ev-acts,.sth-sug,.crumbs,.live-dot,.wn-wrap,.ntf-wrap{ display:none !important; }
  #main{ margin:0 !important; }
  .pc{ padding:0 !important; max-width:none !important; }
  .view{ display:none !important; }
  .view.active{ display:block !important; }
  .card,.rpt-card,.rpt-ev,.ev-tile{ break-inside:avoid; page-break-inside:avoid; box-shadow:none !important; border:1px solid #d8dce4 !important; }
  .sth-scroll{ overflow:visible !important; }
  .rpt-print-head{ display:block !important; margin:0 0 18px; padding-bottom:12px; border-bottom:2px solid #0d1526; }
  .rph-biz{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#0d1526 }
  .rph-title{ font-size:22px; font-weight:800; color:#0d1526; margin-top:4px }
  .rph-sub{ font-size:13px; color:#3f4859; margin-top:2px }
  .rph-gen{ font-size:11px; color:#5a6478; margin-top:6px }
  a[href]:after{ content:"" !important }
  @page{ margin:14mm }
}

/* ---------- Q210 client portal card (js/portals.js) ---------- */
.cpt-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:13px;color:var(--t2);margin:0}
.cpt-empty>svg{color:var(--t3)}
.cpt-portal{border-top:1px solid var(--border)}
.cpt-portal.off .cpt-body{opacity:.72}
.cpt-head{display:flex;align-items:center;gap:12px;padding:12px 18px;flex-wrap:wrap}
/* flex:1 is `1 1 0%`, and a ZERO basis inside a WRAPPING row means the text never
   forces a wrap — it just takes whatever the badge and buttons leave. On a phone the
   client's name got 49px: "NB & / Associat" jammed against "Expires in 6 days"
   (measured 2026-09-20, tools/portal-live.cjs). A real basis makes the chrome wrap
   below the name instead. Same disease as .cpt-it; third sighting the same day. */
.cpt-title{display:flex;flex-direction:column;min-width:0;flex:1 1 160px}
.cpt-title b{font-size:14px;color:var(--t1)}
.cpt-title i{font-style:normal;font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpt-sw{display:inline-flex;gap:3px;flex:none}
.cpt-sw i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.cpt-sw.big i{width:16px;height:16px}
.cpt-body{padding:2px 18px 16px;display:flex;flex-direction:column;gap:12px}
.cpt-row{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:start}
.cpt-row>label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding-top:6px}
.cpt-val{min-width:0;display:flex;flex-direction:column;gap:8px}
.cpt-link code,.cpt-pw{display:block;font-size:12px;padding:8px 10px;border-radius:8px;background:var(--hover);border:1px solid var(--border);color:var(--t1);word-break:break-all;line-height:1.45}
.cpt-pw{display:inline-block;font-size:14px;letter-spacing:.06em;font-weight:600;align-self:flex-start}
.cpt-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* the whole Proposals block is a drop target — many mockups at once, no modal */
.cpt-drop{border-radius:10px;transition:background .12s,box-shadow .12s}
.cpt-drop.drag{background:var(--hover);box-shadow:0 0 0 2px var(--accent) inset}
.cpt-mint{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--t2);padding-left:6px;border-left:1px solid var(--border);margin-left:2px}
/* flex-wrap on EVERY variant: the missing-file warning below needs a row that can
   wrap to reach its own line, and only :not(.wide) and <=640px used to allow it. */
.cpt-item{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.cpt-item:hover{background:var(--hover)}
/* a real basis, not 0%: with wrapping on, a 0% basis means the title ALWAYS shrinks
   instead of the six action buttons dropping to the next line in a narrow pane */
.cpt-it{display:flex;flex-direction:column;min-width:0;flex:1 1 180px}
.cpt-it b{font-size:13px;color:var(--t1)}
.cpt-it i{font-style:normal;font-size:11px;color:var(--t3)}
.cpt-item .fil-acts{opacity:.75}
.cpt-item:hover .fil-acts{opacity:1}
.cpt-activity{font-size:12px;color:var(--t2);line-height:1.6;display:block}
.cpt-dim{font-size:11.5px;color:var(--t3)}
/* QUEUE-PORTAL-HQ: the Progress page switch on the portal card, and its "what they will see" preview.
   The switch is a real <button role="switch"> so it works from the keyboard; .tgl was drawn for a div, so the
   button's own border, padding and appearance are reset here. Every colour is a token (both themes). */
/* 1b: expiry per section. The chip under each item says what the client gets; the plan dialog lists every item. */
/* inline on the row's own detail line: the manager rows stay one line tall (portal-live caps them, his "too much
   vertical room" ruling) */
.cpt-clk{display:inline-flex;align-items:center;gap:4px;margin-left:4px;vertical-align:1px;font-style:normal;font-size:10.5px;line-height:1.5;font-weight:650;padding:0 7px;border-radius:20px;background:var(--hover);color:var(--t2);white-space:nowrap}
.cpt-clk.prot{background:var(--accent-bg);color:var(--accent-tx)}
.cpt-clk.off{background:var(--danger-bg);color:var(--danger-tx)}
.cpt-mint.cpt-open{color:var(--accent-tx);font-weight:600}
.cpt-ao-lede{margin:0 0 12px;font-size:13px;color:var(--t2);line-height:1.55}
.cpt-ao-list{display:flex;flex-direction:column;gap:6px}
.cpt-ao-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:var(--card)}
.cpt-ao-row span b{display:block;font-size:13px;color:var(--t1)}
.cpt-ao-row span i{font-style:normal;font-size:11.5px;color:var(--t3)}
.cpt-ao-say{font-size:11px;font-weight:650;color:var(--t2);white-space:nowrap}
.cpt-ao-row:has(input:checked) .cpt-ao-say{color:var(--accent-tx)}
.cpt-jy-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cpt-jy-row .tgl{border:none;padding:0;appearance:none;-webkit-appearance:none}
.cpt-jy-row .tgl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cpt-jy-txt{flex:1 1 260px;min-width:0;font-size:12.5px;color:var(--t2);line-height:1.5}
.cpt-jy-txt b{color:var(--t1);margin-right:4px}
.cpt-jy-loading,.cpt-jy-err{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2);padding:18px 0}
.cpt-jy-err{color:var(--danger-tx)}
.cpt-jy-pv{display:flex;flex-direction:column;gap:12px;color:var(--t1)}
.cpt-jy-pv h4{font-size:18px;font-weight:650;margin:0;line-height:1.3;text-wrap:balance}
.cpt-jy-pv>p{margin:-6px 0 0;font-size:13px}
.cpt-jy-eyebrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.cpt-jy-eyebrow b{color:var(--accent-tx)}
.cpt-jy-eyebrow span{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600;color:var(--accent-tx);background:var(--accent-bg);padding:2px 9px;border-radius:20px}
/* 1e: before an agreement the preview says why there are no steps (his ruling 2026-09-25) */
.cpt-jy-nosteps{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:12px}
.cpt-jy-steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.cpt-jy-steps li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t3)}
.cpt-jy-steps li i{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;flex:none;color:var(--on-solid,#fff)}
.cpt-jy-steps li.done{color:var(--t1)}.cpt-jy-steps li.done i{background:var(--accent);border-color:var(--accent)}
.cpt-jy-steps li.current{color:var(--accent-tx);font-weight:700}.cpt-jy-steps li.current i{border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 8px var(--accent)}
.cpt-jy-steps em{font-style:normal;font-size:11px;color:var(--t3);margin-left:5px;font-weight:400}
.cpt-jy-sec{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.cpt-jy-sec h5{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);display:flex;align-items:center;gap:8px}
.cpt-jy-todo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);font-size:13px}
.cpt-jy-todo.hot{border-color:var(--danger-bg);background:var(--danger-bg)}
.cpt-jy-cta{flex:none;font-size:12px;font-weight:650;color:var(--accent-tx);background:var(--accent-bg);padding:5px 10px;border-radius:8px;white-space:nowrap}
.cpt-jy-chip{display:inline-block;white-space:nowrap;margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:20px;vertical-align:1px}
.cpt-jy-chip.hot{background:var(--danger-bg);color:var(--danger-tx)}.cpt-jy-chip.soon{background:var(--warn-bg);color:var(--warn-tx)}
.cpt-jy-empty,.cpt-jy-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.cpt-jy-empty svg,.cpt-jy-line svg{color:var(--accent-tx);flex:none}
.cpt-jy-note{display:flex;gap:6px;align-items:flex-start;margin:4px 0 0;font-size:12px;color:var(--t2);background:var(--hover);border-radius:10px;padding:10px 12px}
.cpt-jy-note svg{flex:none;margin-top:2px}.cpt-jy-notetx{flex:1;min-width:0}.cpt-jy-nb{white-space:nowrap}
.cpt-warn{color:#b45309;font-weight:600}
.cpt-help{font-size:11.5px;color:var(--t3);margin:0;line-height:1.5}
.cpt-pwrow{display:flex;gap:8px;align-items:center}
.cpt-pwrow input{flex:1}
@media(max-width:640px){.cpt-row{grid-template-columns:1fr}.cpt-row>label{padding-top:0}.cpt-head .fil-acts{width:100%;justify-content:flex-end}.cpt-item{flex-wrap:wrap}.cpt-item .fil-acts{width:100%;justify-content:flex-end;opacity:1}.cpt-mint{border-left:0;padding-left:0;margin-left:0;flex-wrap:wrap}}

/* ===== Epic W — Website Builder (js/builder.js, prefix .wb-) ===== */
.wb-kbw{position:relative;display:inline-flex}
.wb-kb{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--t2);display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;cursor:pointer;flex:none}
.wb-kb:hover{background:var(--hover)}
.wb-kbm{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shmd);padding:5px;z-index:60;display:none}
.wb-kbm.open{display:block}
.wb-kbi{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:none;border-radius:6px;padding:8px 10px;font-size:12px;font-weight:600;color:var(--t1);cursor:pointer}
.wb-kbi:hover{background:var(--hover)}
.wb-kbi.dng{color:var(--danger)}
.wb-kbsep{display:block;height:1px;background:var(--border);margin:5px 4px}
.wb-refuse{border:1.5px dashed var(--border);border-radius:var(--r);padding:12px 14px;font-size:12px;color:var(--t3);display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.wb-refuse b{color:var(--t1)}
.wb-strip{display:flex;align-items:center;gap:8px;border-radius:var(--r);padding:9px 12px;font-size:11.5px;font-weight:600;margin-top:10px}
.wb-strip.run{background:#dbeafe;color:#1e40af}
.wb-strip.bad{background:#fee2e2;color:#b91c1c}
.wb-strip.ok{background:#d1fae5;color:#065f46}
[data-theme="dark"] .wb-strip.run{background:#172554;color:#93c5fd}
[data-theme="dark"] .wb-strip.bad{background:#450a0a;color:#fca5a5}
[data-theme="dark"] .wb-strip.ok{background:#064e3b;color:var(--accent-tx)}
.wb-spin{width:12px;height:12px;border:2px solid color-mix(in srgb,currentColor 20%,transparent);border-top-color:currentColor;border-radius:50%;flex:none;animation:wbsp .7s linear infinite}   /* the loader's look in CSS alone (law 33) */
@keyframes wbsp{to{transform:rotate(360deg)}}
.wb-empty{text-align:center;padding:24px 14px;color:var(--t3)}
.wb-empty.sm{padding:14px}
.wb-empty b{display:block;color:var(--t1);font-size:12.5px;margin:8px 0 3px}
.wb-empty p{font-size:11.5px;max-width:320px;margin:0 auto 10px}
.wb-meter{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--t3)}
.wb-meter b{color:var(--t1);font-variant-numeric:tabular-nums}
.wb-mtr{flex:1;height:6px;border-radius:3px;background:var(--border);overflow:hidden;min-width:70px}
.wb-mtr i{display:block;height:100%;border-radius:3px}
.wb-av{width:36px;height:36px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff}
.wb-av.lg{width:44px;height:44px;font-size:15px}
.wb-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:600;background:var(--bg);border:1px solid var(--border);color:var(--t2)}
.wb-chip.muted{opacity:.65}
.wb-chip a{color:var(--t3);text-decoration:none;font-weight:800}
.wb-toolbar{display:flex;gap:10px;align-items:center;margin:2px 0 14px;flex-wrap:wrap}
.wb-search{flex:1;min-width:170px;background:var(--input);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font:var(--ff);font-size:12px;color:var(--t1)}
.kpi .kpi-n{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .kpi-l{font-size:10.5px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.wb-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border);cursor:pointer;flex-wrap:wrap}
.wb-row:hover{background:var(--hover)}
.wb-row:last-child{border-bottom:none}
.wb-rmain{flex:1;min-width:150px}
.wb-rname{font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.wb-rsub{font-size:11px;color:var(--t3);margin-top:1px}
.wb-rchips{display:flex;gap:5px;flex-wrap:wrap;flex-basis:240px;flex-grow:1}
.wb-rmeta{text-align:right;min-width:104px}
.wb-rsp{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.wb-rsp span{color:var(--t3);font-weight:400}
.wb-rbar{height:4px;border-radius:2px;background:var(--border);margin-top:5px;overflow:hidden}
.wb-rbar i{display:block;height:100%;border-radius:2px}
.wb-rup{font-size:10.5px;color:var(--t3);margin-top:2px}
.wb-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.wb-ttl{font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wb-sub{font-size:11.5px;color:var(--t3);margin-top:3px}
.wb-headacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wb-banner{display:flex;align-items:center;gap:10px;background:var(--bg);color:var(--t2);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;font-size:11.5px;font-weight:600;margin-top:12px}
.wb-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.wb-fact{background:var(--bg);border-radius:var(--r);padding:10px 12px}
.wb-fact .v{font-weight:700;font-size:13px}
.wb-fact .k{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-top:2px}
.wb-gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-top:12px}
.wb-gauge .gl{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px}
.wb-gauge .gl b{font-variant-numeric:tabular-nums}
.wb-gauge .gt{height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.wb-gauge .gt i{display:block;height:100%;border-radius:3px}
.wb-gauge.na .gt{background:transparent;border:1px dashed var(--border)}
.wb-gauge.na .gl{color:var(--t3)}
.wb-summary{background:var(--bg);border-radius:var(--r);padding:10px 12px;font-size:12px;color:var(--t2);line-height:1.55;margin-top:12px}
.wb-dlv{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}
.wb-dlv:last-of-type{border-bottom:none}
.wb-cbx{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--border);flex:none;margin-top:1px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:var(--input);color:#fff}
.wb-cbx.on{background:var(--accent);border-color:var(--accent)}
.wb-dlv .di{flex:1;min-width:0}
.wb-dlv .di b{font-size:12.5px}
.wb-dlv .di p{font-size:11px;color:var(--t3);margin-top:1px;line-height:1.45}
.wb-cost{font-size:10px;color:var(--t3);font-variant-numeric:tabular-nums}
.wb-shells{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.wb-shell{border:1.5px solid var(--border);border-radius:var(--r);padding:10px 12px;cursor:pointer;background:var(--card)}
.wb-shell:hover{border-color:var(--t3)}
.wb-shell.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.wb-shell .sw{display:flex;gap:4px;margin-bottom:7px}
.wb-shell .sw i{width:14px;height:14px;border-radius:4px;display:block}
.wb-shell b{font-size:12px}
.wb-shell p{font-size:10px;color:var(--t3);margin-top:2px;line-height:1.35}
.wb-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.wb-2col{grid-template-columns:1fr}.wb-rmeta{text-align:left}}
.wb-genrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wb-genwhy{font-size:11px;color:var(--t3);line-height:1.4;flex:1;min-width:180px}
.wb-out{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.wb-out:last-of-type{border-bottom:none}
.wb-outic{width:32px;height:32px;border-radius:8px;background:var(--bg);display:inline-flex;align-items:center;justify-content:center;color:var(--t2);flex:none}
.wb-outmain{flex:1;min-width:140px}
.wb-outmain b{font-size:12.5px}
.wb-outmain .om{font-size:10.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.wb-outacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wb-ev{display:flex;gap:10px;padding:8px 0;font-size:11.5px;border-bottom:1px solid var(--border)}
.wb-ev:last-child{border-bottom:none}
.wb-ev .tm{color:var(--t3);flex:none;width:96px;font-variant-numeric:tabular-nums}
.wb-status{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:var(--r);padding:12px 14px;flex-wrap:wrap}
.wb-status .ws{font-size:11px;color:var(--t3);margin-top:2px}
.wb-ring{width:44px;height:44px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
.wb-chacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wb-bp{font-size:12px;color:var(--t2);line-height:1.55;margin:4px 0 10px}
.wb-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg);border-radius:var(--r);padding:9px 12px;margin-top:12px}
.wb-brand-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--t3)}
.wb-swatches{display:inline-flex;gap:5px}
.wb-swatch{width:18px;height:18px;border-radius:5px;display:inline-block;border:1px solid var(--border)}
.wb-brand-note{font-size:11px;color:var(--t3)}
.wb-idea{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.wb-idea:last-of-type{border-bottom:none}
.wb-idea .di{flex:1;min-width:0}
.wb-idea .di b{font-size:12.5px}
.wb-idea .di p{font-size:11px;color:var(--t3);margin-top:2px;line-height:1.45}
.wb-lib-shell{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.wb-lib-shell:last-of-type{border-bottom:none}
.wb-lib-shell .sw{display:inline-flex;gap:4px;flex:none}
.wb-lib-shell .sw i{width:14px;height:14px;border-radius:4px;display:block}
.wb-lib-shell .di{flex:1;min-width:0}
.wb-lib-shell .di b{font-size:12px}
.wb-lib-shell .di p{font-size:10.5px;color:var(--t3);margin-top:1px}
.kb-key{display:inline-block;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:2px 7px;font-size:10.5px;font-weight:700;font-family:monospace;color:var(--t1)}
.wb-comp{border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:8px}
.wb-comp>b{font-size:12.5px}
.wb-comp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-top:6px}
.wb-comp-h{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);display:block;margin-bottom:2px}
.wb-comp-cols p{font-size:11px;color:var(--t2);margin:0 0 3px}
.wb-deep{background:var(--bg);border-radius:var(--r);padding:12px 14px}
.wb-livepanel{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-top:12px;margin-bottom:16px}
.wb-lp-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.wb-lp-top b{font-size:12.5px}
.wb-lp-meta{margin-left:auto;font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.wb-lp-now{font-size:11.5px;color:var(--t2);margin-top:7px}
.wb-lp-now b{color:var(--t1)}
.wb-lp-steps{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}

/* ============ v176 — the FULL EDIT VIEW (Google's edit screen) ============ */
#ape{position:fixed;inset:0;z-index:300;background:var(--bg);overflow-y:auto;padding:18px 26px 40px;animation:fadeIn .12s ease}
.ape-head{display:flex;align-items:center;gap:14px;max-width:1180px;margin:0 auto}
.ape-title{flex:1;font-size:24px;font-weight:600;color:var(--t1);background:transparent;border:none;border-bottom:2px solid var(--border);border-radius:0;padding:8px 2px}
.ape-title:focus{outline:none;border-bottom-color:var(--accent)}
.ape-more{position:relative}
.ape-more .cp-menu{right:0;top:40px}
.ape-danger{color:var(--danger)!important}
.ape-when,.ape-when2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:1180px;margin:14px auto 0;padding-left:46px}
/* Google-style chips: compact filled fields, calm until focused */
.ape-when input,.ape-when2 select,.ape-mini{background:var(--bg);border:1px solid transparent;border-radius:8px;padding:8px 10px;font-size:13px;color:var(--t1);width:auto}
.ape-when input:hover,.ape-when2 select:hover,.ape-mini:hover{border-color:var(--border)}
.ape-when input:focus,.ape-when2 select:focus,.ape-mini:focus{outline:none;border-color:var(--accent);background:var(--card)}
.ape-when input[type=date]{width:148px}
.ape-when input[type=time]{width:118px}
.ape-to{color:var(--t3);font-size:13px}
.ape-tz{color:var(--t3);font-size:12px}
.ape-when2 select{max-width:250px}
.ape-tabs{display:flex;gap:22px;max-width:1180px;margin:16px auto 0;padding-left:46px;border-bottom:1px solid var(--border)}
.ape-tabs button{background:none;border:none;padding:8px 2px 10px;font-size:13.5px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2.5px solid transparent}
.ape-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.ape-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:34px;max-width:1180px;margin:18px auto 0;padding-left:46px;align-items:start}
.ape-col .fl{margin-bottom:16px}
.ape-col .fl>label{display:flex;align-items:center;gap:7px;margin-bottom:6px;color:var(--t2);font-size:12px}
/* the details column is a CARD (his screenshot: white sheet on the page) */
.ape-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px 24px;box-shadow:0 6px 24px -14px rgba(0,0,0,.12)}
/* icon-gutter rows: 24px icon, then the content column */
.ape-frow{display:flex;gap:14px;margin-bottom:18px}
.ape-frow:last-child{margin-bottom:0}
.ape-fi{flex:0 0 24px;display:flex;justify-content:center;color:var(--t3);padding-top:8px}
.ape-fc{flex:1;min-width:0;position:relative}
/* filled Google-style fields inside the card */
.ape-fill{width:100%;background:var(--bg);border:1px solid transparent;border-radius:8px;padding:9px 12px;font-size:13px;color:var(--t1)}
.ape-fill:hover{border-color:var(--border)}
.ape-fill:focus{outline:none;border-color:var(--accent);background:var(--card)}
/* description: toolbar + contenteditable box */
.ape-desc-tb{display:flex;gap:2px;margin-bottom:6px}
.ape-desc-tb button{background:none;border:none;border-radius:6px;min-width:28px;height:26px;font-size:12.5px;color:var(--t2);cursor:pointer}
.ape-desc-tb button:hover{background:var(--bg);color:var(--t1)}
.ape-desc{min-height:110px;background:var(--bg);border:1px solid transparent;border-radius:8px;padding:10px 12px;font-size:13px;color:var(--t1);line-height:1.55;overflow-y:auto;max-height:300px}
.ape-desc:hover{border-color:var(--border)}
.ape-desc:focus{outline:none;border-color:var(--accent);background:var(--card)}
.ape-desc:empty:before{content:attr(data-ph);color:var(--t3)}
.ape-desc ul,.ape-desc ol{padding-left:20px}
.ape-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative}
.ape-meet-l{color:var(--t3);font-size:12px}
.ape-meet-new{color:var(--t2);font-size:13px;display:inline-flex;align-items:center;gap:7px}
.ape-nrow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ape-nrow select,.ape-nrow input{background:var(--bg);border:1px solid transparent;border-radius:8px;padding:7px 9px;font-size:12.5px;color:var(--t1)}
.ape-nrow select:hover,.ape-nrow input:hover{border-color:var(--border)}
.ape-nrow select:focus,.ape-nrow input:focus{outline:none;border-color:var(--accent)}
.ape-nrow select{max-width:140px}
.ape-nrow input{max-width:80px}
.ape-addn{color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer}
.ape-calname{font-size:13px;color:var(--t1)}
.ape-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);cursor:pointer}
#ape-swatches{display:none;position:absolute;left:0;top:30px;z-index:5;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 34px -10px rgba(0,0,0,.3);padding:10px;width:172px}
.ape-sw{width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;margin:4px}
.ape-sw:hover{transform:scale(1.18)}
.ape-guests{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.ape-guests h4{font-size:13px;color:var(--t1);margin-bottom:10px}
.ape-guests h4+input{margin-bottom:10px}
.ape-guests .ap-chk{display:flex;margin-bottom:8px}
/* the guests typeahead — contacts by name or email, under the input */
.ape-gwrap{position:relative}
.ape-gsug{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.16);overflow:hidden}
.ape-gsug-r{display:flex;flex-direction:column;gap:1px;padding:8px 12px;cursor:pointer}
.ape-gsug-r:hover{background:var(--hover)}
.ape-gsug-r b{font-size:13px;color:var(--t1);font-weight:600}
.ape-gsug-r span{font-size:11.5px;color:var(--t3)}
.ape-chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px 8px 4px 11px;font-size:12px;color:var(--t1);margin:0 6px 6px 0}
.ape-chip button{background:none;border:none;cursor:pointer;color:var(--t3);display:inline-flex}
/* INVITE TRACKING (2026-09-23): each guest's reply on its chip, and the receipt line above the send box */
/* the email wraps INSIDE the chip; the badge and the x stay on its line (at 375 the x once fell to a line of its own) */
.ape-chip{max-width:100%}
.ape-chip-t{min-width:0;overflow-wrap:break-word;line-height:1.6}
.ape-chip-t .ape-rsvp{display:inline-block;margin-left:2px}
/* "Make them a contact" (2026-10-21): a pill like the reply badge, in the accent, so it reads as an action on that guest */
.ape-chip .ape-chip-add{display:inline-block;font-size:10.5px;font-weight:600;line-height:1.5;border-radius:999px;padding:1px 8px;margin-left:2px;white-space:nowrap;background:var(--accent-bg);color:var(--accent-tx)}
.ape-chip .ape-chip-add:disabled{opacity:.6;cursor:default}
.ape-chip button,.ape-chip-av{flex:0 0 auto}
.ape-rsvp{font-style:normal;font-size:10.5px;font-weight:600;border-radius:999px;padding:1px 7px;white-space:nowrap;background:var(--hover);color:var(--t3)}
.ape-rsvp.rs-yes{background:var(--accent-bg);color:var(--accent-tx)}
.ape-rsvp.rs-maybe{background:var(--info-bg);color:var(--info-tx)}
.ape-rsvp.rs-no{background:var(--danger-bg);color:var(--danger-tx)}
.ape-rsvp.rs-late{background:var(--warn-bg);color:var(--warn-tx)}
.ape-inv{font-size:11.5px;line-height:1.5;color:var(--t3);margin:0 0 10px}
.ape-inv-sent{display:flex;gap:6px;align-items:flex-start;color:var(--t2);background:var(--accent-bg);border-radius:8px;padding:8px 10px}
.ape-inv-sent svg{color:var(--accent-tx);flex:0 0 auto;margin-top:2px}
.ape-note{color:var(--t3);font-size:11.5px;line-height:1.5;margin-top:10px}
/* SUGGEST A PLACE (2026-09-23): the vetted meeting spots under Add location. Calm until asked: one quiet row of
   chips, and cards only after a chip or a city is chosen. Every colour is a token, so both themes hold. */
.ams{margin-top:8px}
.ams-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ams-l{font-size:11.5px;color:var(--t3);margin-right:2px}
/* WHAT KIND OF MEETING IS THIS (2026-09-30): one segmented control, three states, nothing implied. It sits at the
   top of the editor because every control under it is a consequence of the answer. Selected reads as a filled
   chip rather than a border change, because the whole point is that the choice is impossible to miss. */
.ape-modes{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:3px}
.ape-mode{display:inline-flex;align-items:center;gap:5px;background:none;border:none;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;line-height:1.3;white-space:nowrap;transition:background .12s,color .12s}
.ape-mode:hover{color:var(--t1)}
.ape-mode.on{background:var(--card);color:var(--accent-tx);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ape-mode-h{margin:6px 0 0}
/* the one row that is an action rather than a place, so it reads apart from the vetted areas above it */
.ams-find-r{border-top:1px solid var(--border);color:var(--t1)}
.ams-find-r b{color:var(--accent-tx)}
.ape-guestnote{margin-top:10px}
/* at phone width the three words have to fit in one row or the third one is clipped, which is what the 375 capture showed: Google Meet cut off at the edge. The icons go first, because the words carry the meaning and an icon nobody can read is not helping. */
@media (max-width:560px){.ape-modes{display:flex;width:100%;justify-content:space-between}.ape-mode{padding:5px 6px;font-size:11.5px;gap:0;flex:1 1 auto;justify-content:center}.ape-mode svg{display:none}}
.ams-chip{display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;line-height:1.3;white-space:nowrap}
.ams-chip:hover{border-color:var(--accent);color:var(--t1)}
.ams-chip.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-tx)}
.ams-find{position:relative;display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid transparent;border-radius:999px;padding:0 10px;color:var(--t3);flex:0 1 150px;min-width:120px}
.ams-find:focus-within{border-color:var(--accent);background:var(--card)}
.ams-find input{border:none;background:none;outline:none;font-size:12px;color:var(--t1);padding:5px 0;width:100%;min-width:0}
.ams-find .ape-gsug{min-width:220px}
.ams-none{padding:9px 12px;font-size:12px;color:var(--t3)}
.ams-msg{margin-top:10px;font-size:12.5px;color:var(--t2);background:var(--bg);border-radius:10px;padding:10px 12px;line-height:1.5}
.ams-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:12px 0 8px;font-size:12.5px;color:var(--t1)}
.ams-when{font-size:11.5px;color:var(--t3)}
.ams-x{margin-left:auto;background:none;border:none;color:var(--t3);cursor:pointer;display:inline-flex;padding:2px;border-radius:6px}
.ams-x:hover{color:var(--t1);background:var(--bg)}
.ams-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.ams-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 12px;cursor:pointer;font:var(--ff);color:var(--t1);min-width:0;transition:border-color .12s,box-shadow .12s}
.ams-card:hover{border-color:var(--accent);box-shadow:var(--sh)}
.ams-card.ams-off{opacity:.72}
.ams-card.picked{border-color:var(--accent);background:var(--accent-bg)}
.ams-top{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;width:100%}
.ams-top b{font-size:13px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;flex:1 1 auto;min-width:0}
.ams-tag{font-style:normal;font-size:10.5px;font-weight:600;border-radius:999px;padding:1px 7px;background:var(--bg);color:var(--t2);white-space:nowrap}
.ams-tag.ams-up{background:var(--accent-bg);color:var(--accent-tx)}
.ams-addr,.ams-note,.ams-ph{font-size:11.5px;color:var(--t3);line-height:1.4;overflow-wrap:anywhere}
.ams-note{color:var(--t2)}
.ams-addr em,.ams-ph em{font-style:normal;color:var(--warn-tx)}
.ams-hrs{font-size:11.5px;font-weight:600}
.ams-ok{color:var(--accent-tx)}
.ams-bad{color:var(--warn-tx)}
.ams-unk{color:var(--t3);font-weight:500}
.ams-ck{display:none;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--accent-tx);margin-top:2px}
.ams-card.picked .ams-ck{display:inline-flex}
.ape-busy{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2);margin-bottom:7px}
.ape-busy i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
#ape-pane-find h4{font-size:12.5px;color:var(--t1);margin:14px 0 8px}
.ape-slot{margin:0 6px 6px 0}
/* A BARE 1fr TRACK IS minmax(auto,1fr): it grows to its content's MIN-CONTENT width, so on a 375px
   phone the details pane laid out 469px wide and ran off the right edge (dates clipped to
   "Sep 20, 202", the notification unit cut off, location and notes past the screen). Found by
   tools/reach-live.cjs's dialogs pass, 2026-09-20. minmax(0,1fr) lets the track be the window;
   the rows that were holding it open wrap instead. */
@media(max-width:900px){.ape-grid{grid-template-columns:minmax(0,1fr);padding-left:0}.ape-grid>*{min-width:0}.ape-when,.ape-when2,.ape-tabs{padding-left:0}}
@media(max-width:560px){
  .ape-nrow{flex-wrap:wrap}
  .ape-nrow select{max-width:none;flex:1 1 120px;min-width:0}
  .ape-frow{gap:10px}
  /* phone inputs are 16px (so iOS does not zoom); 118px no longer holds "Sep 20, 2026" */
  .ape-when .ape-chipin{width:auto;min-width:132px;flex:1 1 132px}
  .ape-when .ape-chipin-t{min-width:96px;flex:1 1 96px}
  .ape-when2 select{max-width:100%}
}

/* ============ v178 — chip pickers + guests to the FIELD STANDARD ============ */
.ape-chipin{background:var(--bg);border:1px solid transparent;border-radius:8px;padding:9px 12px;font-size:13px;color:var(--t1);cursor:pointer;caret-color:transparent}
.ape-chipin:hover{border-color:var(--border)}
.ape-chipin:focus{outline:none;border-color:var(--accent);background:var(--card)}
.ape-when .ape-chipin{width:118px;text-align:center}
.ape-when .ape-chipin-t{width:96px}
#ape-pop{position:fixed;z-index:320;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 44px -12px rgba(0,0,0,.28);animation:fadeIn .1s ease}
.ape-tpop{width:128px;max-height:260px;overflow-y:auto;padding:5px;scrollbar-width:thin}
.ape-ti{padding:8px 12px;font-size:13px;color:var(--t1);border-radius:7px;cursor:pointer}
.ape-ti:hover{background:var(--bg)}
.ape-ti.on{background:var(--bg);font-weight:700;color:var(--accent)}
.ape-dpop{width:272px;padding:12px}
.ape-dp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ape-dp-h b{font-size:13px;color:var(--t1)}
.ape-dp-h button{background:none;border:none;font-size:17px;color:var(--t2);cursor:pointer;width:26px;height:26px;border-radius:50%}
.ape-dp-h button:hover{background:var(--bg)}
.ape-dp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.ape-dp-w{font-size:10.5px;color:var(--t3);padding:4px 0}
.ape-dp-d{background:none;border:none;width:32px;height:32px;border-radius:50%;font-size:12px;color:var(--t1);cursor:pointer;margin:0 auto}
.ape-dp-d:hover{background:var(--bg)}
.ape-dp-d.out{color:var(--t3);opacity:.55}
.ape-dp-d.tod{background:var(--accent);color:var(--on-solid);font-weight:700}
.ape-dp-d.sel:not(.tod){background:var(--bg);color:var(--accent);font-weight:700;border:1px solid var(--accent)}
/* guests to the standard: filled field, avatar chips, side-tab heading */
.ape-side-t{color:var(--accent);border-bottom:2.5px solid var(--accent);display:inline-block;padding-bottom:6px}
.ape-guests .ape-fill{margin-bottom:12px}
.ape-chip-av{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--on-solid);font-size:10px;font-weight:700;font-style:normal}

/* signature designer + live preview (Mail Settings) — the field standard */
.sigd{border:1.5px dashed var(--accent);border-radius:12px;padding:14px;margin:10px 0;background:var(--card)}
.sigd .fg{margin-bottom:10px}
.sig-prev{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-top:10px;background:#fff;overflow-x:auto}

/* ============ CONTACTS CLEANUP (2026-08-21 contract) ============ */
.ctam-wrap{position:relative;display:inline-block}
#ctam{right:0;top:36px;display:none}
.cp-menu .dng{color:#c2402f}
.ct-kb-td{width:34px}
.ct-kb{opacity:.25;font-weight:700;font-size:15px}
tr:hover .ct-kb{opacity:1}
@media(hover:none){.ct-kb{opacity:1}}
/* rule 3: one-line scrollable tag strip */
#ct-tagchips-w{overflow-x:auto;scrollbar-width:thin}
#ct-tagchips-w .tg-chips{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;gap:6px;width:max-content}
/* desktop checkboxes fade in on hover (rule 6) */
#ct-tbody .bk-cb{opacity:.25}
#ct-tbody tr:hover .bk-cb,#ct-tbody tr.bk-on .bk-cb{opacity:1}
/* sheet chrome exists only on phones */
.ct-mobilebar{display:none}
.ctf-head,.ctf-apply,.ctf-ov{display:none}
@media(max-width:768px){
  .ct-mobilebar{display:flex;gap:8px;margin-bottom:10px}
  .ct-mobilebar .si{flex:1}
  #ct-filters{display:none}
  #ct-filters.open{display:flex;flex-direction:column;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:230;background:var(--card);border-radius:18px 18px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto;box-shadow:var(--shlg)}
  #ct-filters.open .si,#ct-filters.open .fs,#ct-filters.open .tc-wrap{width:100%;max-width:none}
  .ctf-ov.open{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:225}
  #ct-filters.open .ctf-head{display:flex;align-items:center;justify-content:space-between}
  #ct-filters.open .ctf-apply{display:block;width:100%}
  /* rule 4: tight two-line rows — cap the in-row tag chips, ellipsize */
  td[data-k="contact"] .tg:nth-child(n+3){display:none}
  td[data-k="contact"]{max-width:56vw;overflow:hidden;text-overflow:ellipsis}
  /* rule 6: selection is a MODE on phones (long-press starts it) */
  body:not(.ct-selmode) #view-contacts .bk-cell{display:none}
  body.ct-selmode #view-contacts .bk-cell{display:table-cell}
  body.ct-selmode #view-contacts .bk-cb{opacity:1}
  body.ct-selmode #ct-bulk-w>*{position:fixed;left:10px;right:10px;bottom:calc(64px + env(safe-area-inset-bottom));z-index:210;border-radius:12px;box-shadow:var(--shlg)}
}
/* rule 1: the quick-note FAB duplicated + New Contact on this page */
body[data-view="contacts"] .fab{display:none}
/* and in the Inbox the bottom-right corner belongs to SEND: the round + sat on the split Send's chevron and over
   the character count of the message composer (measured 2026-09-20: .fab intersects #thr-arm and #thr-count). A
   quick note is still one press away in the header's + New menu and the palette, so nothing is lost. */
body[data-view="comms"] .fab{display:none}
/* Settings has nothing to create from a floating button, and it sat on the fields
   (reach-live measured it over the GST input by 19x20 at 1366x768), 2026-09-29. */
body[data-view="settings"] .fab{display:none}

/* ============ DASHBOARD OVERHAUL (2026-08-21) — THE CONTROL STRIP ============
   LAW: no dashboard surface may grow with data. Three fixed tiles: count +
   the single top item + the door. Lists live on their own surfaces. */
.dash-att{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px;margin-bottom:14px}
.dash-at{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);padding:12px 15px;height:206px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh)}
.dash-at.da-sched{border-left:3px solid var(--accent)}
.dash-at.da-ai{border-left:3px solid var(--accent2,#2957b8)}
.dash-at.da-hot{border-left:3px solid var(--danger)}
.da-top{display:flex;align-items:baseline;gap:8px}
.da-n{font-size:19px;font-weight:800;color:var(--t1)}
.da-lbl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.da-win{margin-left:auto;font-size:10px;padding:2px 8px}
.da-row{display:flex;gap:9px;font-size:12px;color:var(--t2);padding:2.5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.da-row b{color:var(--t1);font-variant-numeric:tabular-nums;flex:0 0 46px}
.da-row:hover span{color:var(--t1)}
.da-one{font-size:12px;color:var(--t2);margin-top:7px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.da-one b{color:var(--t1)}
.da-foot{margin-top:auto;display:flex;align-items:center;gap:10px}
.da-door{font-size:10.5px;font-weight:700;color:var(--t3);cursor:pointer;margin-left:auto;white-space:nowrap}
.da-door:hover{color:var(--accent)}
@media(max-width:820px){.dash-att{grid-template-columns:1fr}.dash-at{height:auto;min-height:96px}}

/* ============================================================
   THE ENGAGEMENT ENGINE (2026-08-22) — stage rail, project hub grid,
   composer doc, tracking strip, payment milestones. Contract 59e99680.
   ============================================================ */
.eng-rail{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:4px 2px;scrollbar-width:none}
.eng-rail::-webkit-scrollbar{display:none}
.eng-st{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:74px;position:relative}
.eng-st:not(:last-child):after{content:"";position:absolute;top:10px;left:calc(50% + 12px);width:calc(100% - 24px);height:2px;background:var(--border)}
.eng-st.done:not(:last-child):after{background:var(--accent)}
.eng-st i{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;z-index:1;color:#fff}
.eng-st.done i{background:var(--accent);border-color:var(--accent)}
.eng-st.cur i{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.eng-st span{font-size:9.5px;font-weight:700;color:var(--t3);white-space:nowrap}
.eng-st.done span,.eng-st.cur span{color:var(--t1)}
.eng-src{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.eng-src .chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--bg);border:1px solid var(--border);color:var(--t2)}
.eng-src .chip.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4);color:#b45309}
.eng-flags{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);border-radius:10px;padding:9px 12px;font-size:12px;color:var(--t2);margin:8px 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.eng-flag{border:1px dashed #f59e0b;background:#fff;color:#b45309;font-weight:700;font-size:11px;border-radius:6px;padding:2px 8px;cursor:pointer}
.eng-doc{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px 20px;max-height:56vh;overflow-y:auto}
/* ============================================================
   #81 — THE ENGAGEMENT COCKPIT. OPS register: dense, semantic, scan-first.
   Tokens only (law 1); light and dark come free because every colour here
   is a token or a token-derived rgba (law 7).
   ============================================================ */
.eck-head{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh);padding:16px 20px;margin-top:14px}
.eck-htop{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.eck-hid{flex:1;min-width:0}
.eck-hid h1{font-size:23px;font-weight:650;letter-spacing:-.02em;line-height:1.15;margin:0}
.eck-rel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--t2)}
.eck-dot{width:3px;height:3px;border-radius:50%;background:var(--t3);flex:none}
.eck-money{display:flex;gap:22px;padding-left:20px;border-left:1px solid var(--border)}
.eck-mny{min-width:94px}
.eck-mny .k{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);font-weight:700;white-space:nowrap}
.eck-mny .v{font-size:18px;font-weight:650;letter-spacing:-.02em;margin-top:1px;font-variant-numeric:tabular-nums}
.eck-mny .s{font-size:10.5px;color:var(--t3);margin-top:1px}
@media(max-width:860px){.eck-money{padding-left:0;border-left:0;border-top:1px solid var(--border);padding-top:12px;width:100%;gap:16px}}
.eck-actbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.eck-gap{flex:1}
/* THE SPINE */
.eck-spine{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh);overflow:hidden;margin-bottom:12px}
.eck-rail{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.eck-rail::-webkit-scrollbar{display:none}
.eck-sn{flex:1;min-width:98px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 8px;position:relative;border-bottom:2px solid transparent;text-align:center}
.eck-sn+.eck-sn::before{content:"";position:absolute;left:0;top:24px;width:100%;height:2px;background:var(--border);transform:translateX(-50%)}
.eck-sn.done+.eck-sn::before{background:var(--accent)}
.eck-sn i{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;border:2px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--t3)}
.eck-sn.done i{background:var(--accent);border-color:var(--accent-tx);color:var(--on-solid)}
.eck-sn.now i{border-color:var(--accent-tx);color:var(--accent-tx);box-shadow:0 0 0 4px var(--accent-bg)}
.eck-sn span{position:relative;z-index:1;font-size:10.5px;font-weight:700;color:var(--t3);white-space:nowrap}
.eck-sn.done span{color:var(--t2)}
.eck-sn.now span{color:var(--accent-tx)}
.eck-sn.now{border-bottom-color:var(--accent-tx)}
.eck-sn em{font-size:9.5px;color:var(--t3);font-style:normal;white-space:nowrap}
.eck-guide{border-top:1px solid var(--border);background:linear-gradient(180deg,var(--accent-bg),transparent 130%);padding:14px 20px}
.eck-guide.warn{background:linear-gradient(180deg,var(--warn-bg),transparent 130%)}
.eck-gh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.eck-gh svg{color:var(--accent-tx);align-self:center}
.eck-guide.warn .eck-gh svg{color:var(--warn-tx)}
.eck-gh b{font-size:15px;font-weight:650}
.eck-gh span{font-size:13px;color:var(--t2)}
.eck-gwarn{font-size:12.5px;color:var(--warn-tx);font-weight:600;margin-top:6px}
.eck-gsub{font-size:12px;color:var(--t2);margin-top:6px}
.eck-ev{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--t3);margin:8px 0 11px}
.eck-gacts{display:flex;gap:8px;flex-wrap:wrap}
.eck-hand{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.eck-hv{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--card);border-radius:20px;padding:4px 11px;font-size:11.5px;color:var(--t2);cursor:pointer}
.eck-hv.on{background:var(--accent-bg);border-color:transparent;color:var(--accent-tx);font-weight:650}
.eck-hv i{display:flex}
/* THE TWO COLUMNS */
.eck-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(292px,1fr);gap:12px;align-items:start}
.eck-cols>div{min-width:0}
@media(max-width:1080px){.eck-cols{grid-template-columns:1fr}}
/* SECTIONS that answer themselves when closed */
.eck-sec{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh);margin-bottom:12px;overflow:hidden}
.eck-h{display:flex;align-items:center;gap:12px;padding:12px 16px;width:100%;text-align:left;background:none;border:0;cursor:pointer}
.eck-h:hover{background:var(--hover)}
.eck-ic{width:28px;height:28px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--t2);flex:none}
.eck-sec.on .eck-ic{background:var(--accent-bg);color:var(--accent-tx)}
.eck-ti{min-width:0;flex:1}
.eck-ti b{font-size:15px;font-weight:650;display:block;line-height:1.25}
.eck-sum{font-size:12.5px;color:var(--t2);display:block;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eck-chev{color:var(--t3);display:flex;transition:transform .18s;flex:none}
.eck-sec.on .eck-chev{transform:rotate(90deg)}
.eck-b{padding:0 16px 16px;display:none}
.eck-sec.on .eck-b{display:block}
.eck-bg{display:inline-flex;align-items:center;border-radius:20px;padding:2px 9px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;flex:none}
.eck-bg.idle{background:var(--bg);color:var(--t3);border:1px solid var(--border)}
.eck-bg.work{background:var(--info-bg);color:var(--info-tx)}
.eck-bg.warn{background:var(--warn-bg);color:var(--warn-tx)}
.eck-bg.good{background:var(--accent-bg);color:var(--accent-tx)}
.eck-bg.bad{background:var(--danger-bg);color:var(--danger-tx)}
.eck-bg.cool{background:var(--purple-bg);color:var(--purple-tx)}
.eck-hr{height:1px;background:var(--border);margin:12px 0}
.eck-note{font-size:10.5px;color:var(--t3);display:flex;gap:6px;margin-top:10px;line-height:1.45}
.eck-note svg{flex:none;margin-top:1px}
/* the FIELD STANDARD: filled, never outlined */
.eck-fld{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid transparent;border-radius:8px;padding:7px 10px}
.eck-fld:hover{border-color:var(--border)}
.eck-fld:focus-within{border-color:var(--accent-tx);background:var(--card)}
.eck-fld svg{color:var(--t3);flex:none}
.eck-fld input{flex:1;min-width:0;border:0;background:none;outline:none;font:var(--ff);font-size:13px;color:var(--t1)}
/* the intake composer — a decision is a paragraph, and it can carry files */
.eck-comp{background:var(--bg);border:1px solid transparent;border-radius:8px;padding:8px 10px}
.eck-comp:focus-within{border-color:var(--accent);background:var(--card)}
.eck-ta{width:100%;border:0;background:none;outline:none;font:var(--ff);font-size:13px;color:var(--t1);resize:none;line-height:1.5;min-height:38px;display:block}
.eck-ta::placeholder{color:var(--t3)}
.eck-comprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.eck-attach{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--card);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer}
.eck-attach:hover{border-color:var(--accent);color:var(--accent-tx)}
.eck-attnames{font-size:10.5px;color:var(--t3);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eck-inacts{float:right;display:flex;gap:2px;opacity:0;transition:opacity .15s}
.eck-tli:hover .eck-inacts,.eck-tli:focus-within .eck-inacts{opacity:1}
.eck-inacts button{border:0;background:none;color:var(--t3);cursor:pointer;padding:2px 4px;border-radius:5px;display:flex}
.eck-inacts button:hover{background:var(--hover);color:var(--t1)}
.eck-atts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.eck-att{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--card);border-radius:20px;padding:2px 9px;font-size:10.5px;font-weight:600;color:var(--t2);cursor:pointer}
.eck-att:hover{border-color:var(--accent);color:var(--accent-tx)}
.eck-editacts{display:flex;gap:6px;margin-top:6px}
/* the typed timeline */
.eck-tl{position:relative;padding-left:19px;margin-top:12px}
.eck-tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--border)}
.eck-tli{position:relative;padding:7px 0}
.eck-tli::before{content:"";position:absolute;left:-16px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--card);border:2px solid var(--t3)}
.eck-tli.money::before{border-color:var(--accent-tx)}
.eck-tli.rule::before{border-color:var(--purple-tx)}
.eck-tli .when{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.05em}
.eck-tli p{font-size:12.5px;color:var(--t1);margin-top:2px}
/* the requirements meter and its chips */
.eck-meter{display:flex;align-items:center;gap:12px;margin-top:4px}
.eck-meter .bar{flex:1;height:6px;border-radius:4px;background:var(--border);overflow:hidden}
.eck-meter .bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.eck-meter b{font-size:13px;font-variant-numeric:tabular-nums}
.eck-meter span{font-size:12px;color:var(--t3)}
.eck-qs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.eck-q{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--card);border-radius:20px;padding:4px 10px;font-size:12px;color:var(--t2)}
.eck-q.ok{background:var(--accent-bg);border-color:transparent;color:var(--accent-tx);font-weight:600}
.eck-q.ask{border-style:dashed;color:var(--t3)}
/* recordings */
.eck-rec{display:flex;align-items:center;gap:11px;padding:8px 0}
.eck-rec+.eck-rec{border-top:1px solid var(--border)}
.eck-rec .av{width:30px;height:30px;border-radius:8px;background:var(--bg);color:var(--t2);display:flex;align-items:center;justify-content:center;flex:none}
.eck-rec .av.ok{background:var(--purple-bg);color:var(--purple-tx)}
.eck-rec .av.work{background:var(--warn-bg);color:var(--warn-tx)}
.eck-rec .av.bad{background:var(--danger-bg);color:var(--danger-tx)}
.eck-rec .m{flex:1;min-width:0}
.eck-rec .m b{font-size:13px;font-weight:600;display:block}
.eck-rec .m span{font-size:10.5px;color:var(--t3)}
/* chips row */
.eck-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.eck-chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;color:var(--t2);text-decoration:none}
.eck-chip.lnk:hover{border-color:var(--accent-tx);color:var(--accent-tx)}
.eck-gst{display:inline-flex;align-items:center;gap:4px;background:var(--warn-bg);color:var(--warn-tx);border-radius:5px;padding:2px 8px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
/* the estimate table — wide content scrolls in its own box */
.eck-tw{overflow-x:auto}
.eck-et{width:100%;min-width:430px;border-collapse:collapse;font-size:12px}
.eck-et th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);padding:0 0 6px;font-weight:700}
.eck-et td{padding:6px 0;border-top:1px solid var(--border);vertical-align:top;color:var(--t2)}
.eck-et td.r,.eck-et th.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:10px}
.eck-et tr.free td{color:var(--accent-tx)}
.eck-et tr.free td.r{font-weight:700}
.eck-et tr.sub td{font-weight:650;color:var(--t1)}
.eck-et tr.grand td{border-top:2px solid var(--t1);font-weight:700;font-size:13px;color:var(--t1);padding-top:8px}
/* letter: versions, flags, the document, tracking */
.eck-vers{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:7px 10px;margin-bottom:12px}
.eck-vers .lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t3)}
.eck-v{border:1px solid var(--border);background:var(--card);color:var(--t2);border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;cursor:pointer}
.eck-v:hover{border-color:var(--accent-tx);color:var(--t1)}
.eck-v.now{border-color:var(--accent-tx);color:var(--accent-tx)}
.eck-vwhen{font-size:10.5px;color:var(--t3)}
.eck-flags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--warn-bg);border:1px solid var(--warn-bg);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--warn-tx);margin-bottom:12px}
.eck-flag{background:var(--card);border:1px dashed var(--warn);color:var(--warn-tx);border-radius:20px;padding:2px 9px;font-size:10.5px;font-weight:700}
/* SCROLLS, never clips (Abdul, live 2026-08-24: "the contract itself should
   be scrollable inside this window"). overflow:hidden made the document she
   is about to SEND the one thing she could not read here. overscroll-contain
   so reaching the end of the letter does not then scroll the page out from
   under her. */
.eck-doc{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px;box-shadow:var(--shmd);font-family:Georgia,'Times New Roman',serif;font-size:13px;line-height:1.6;color:var(--t1);max-height:340px;overflow-y:auto;overscroll-behavior:contain;position:relative}
.eck-doc p{margin-bottom:7px;color:var(--t2)}
.eck-doc p b{color:var(--t1)}
.eck-doc h4{font-family:'Inter',sans-serif;font-size:12.5px;margin:12px 0 4px;color:var(--t1)}
.eck-doc .re{margin-top:10px}
.eck-dlh{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:2.5px solid var(--t1);padding-bottom:9px;margin-bottom:13px;font-family:'Inter',sans-serif}
.eck-dlh .co{display:flex;align-items:center;gap:10px}
.eck-dlh .mk{width:34px;height:34px;border-radius:7px;flex:none;object-fit:contain}
.eck-dlh .n{font-size:14px;font-weight:700;letter-spacing:-.01em}
.eck-dlh .s{font-size:10px;color:var(--t3)}
.eck-dlh .rt{text-align:right}
.eck-dlh .t{font-size:12.5px;font-weight:650}
.eck-dlh .d{font-size:10px;color:var(--t3)}
/* THE PORTAL CONTROLS, opened in place inside Website Studio (CP-8's promise,
   finally kept). The block was built for a full-width card and this card
   lives in the ~300px left rail, where nine of its parts overflowed their
   box — measured, not guessed. So it gets a narrow register: the label sits
   ABOVE its value instead of beside it, every action row wraps, and the
   link-life buttons stop being an inline strip with a divider. Same controls,
   same code, a layout that fits the column it was moved into. */
.wb-portal-mgr{margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
.wb-portal-mgr .cpt-portal{margin:0;border-top:0}
.wb-portal-mgr:not(.wide) .cpt-head{padding:0 0 10px;gap:8px}
.wb-portal-mgr:not(.wide) .cpt-body{padding:0;gap:14px}
.wb-portal-mgr:not(.wide) .cpt-row{grid-template-columns:1fr;gap:5px}
.wb-portal-mgr:not(.wide) .cpt-row>label{padding-top:0}
.wb-portal-mgr:not(.wide) .cpt-mint{display:flex;flex-wrap:wrap;padding-left:0;margin-left:0;border-left:0;width:100%;gap:5px}
.wb-portal-mgr:not(.wide) .fil-acts{flex-wrap:wrap}
.wb-portal-mgr:not(.wide) .cpt-item{flex-wrap:wrap}
.wb-portal-mgr:not(.wide) .cpt-title i{white-space:normal;word-break:break-all}
.eck-dmore{font-family:'Inter',sans-serif;font-size:10.5px;color:var(--t3);display:flex;align-items:center;gap:6px;border-top:1px dashed var(--border);margin-top:12px;padding-top:9px}
.eck-track{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.eck-tk{flex:1;min-width:92px;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--bg)}
.eck-tk.on{background:var(--accent-bg);border-color:transparent}
.eck-tk .h{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t3)}
.eck-tk.on .h{color:var(--accent-tx)}
.eck-tk .d{font-size:11.5px;margin-top:2px;color:var(--t2);font-variant-numeric:tabular-nums}
.eck-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
/* the rail cards */
.eck-rc{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh);margin-bottom:12px;overflow:hidden}
.eck-rch{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--border);color:var(--t2)}
.eck-rch b{font-size:13px;font-weight:650;flex:1;color:var(--t1)}
.eck-rch span{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.eck-rcb{padding:12px 16px}
.eck-rcnote{padding-top:0}
.eck-pay{display:flex;align-items:center;gap:11px;padding:11px 16px}
.eck-pay+.eck-pay{border-top:1px solid var(--border)}
.eck-pay .m{flex:1;min-width:0}
.eck-pay .m b{font-size:12.5px;font-weight:600;display:block}
.eck-pay .m span{font-size:10px;color:var(--t3);display:block;margin-top:1px}
.eck-pay .amt{text-align:right;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.eck-pay .amt b{font-size:12.5px;font-variant-numeric:tabular-nums}
.eck-gr{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px;color:var(--t2)}
.eck-gr+.eck-gr{border-top:1px solid var(--border)}
.eck-gr span{flex:1}
.eck-gr b{font-variant-numeric:tabular-nums;color:var(--t1)}
/* empty states */
.eck-mt{text-align:center;padding:18px 12px}
.eck-mt .ic{width:36px;height:36px;border-radius:50%;background:var(--bg);color:var(--t3);display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.eck-mt b{font-size:13px;display:block;margin-bottom:3px}
.eck-mt p{font-size:12px;color:var(--t3);max-width:44ch;margin:0 auto 12px;line-height:1.5}

/* the signature pad: set the company's mark up once (Settings) */
.sig-pad{width:100%;max-width:100%;height:150px;background:var(--bg);border:1px dashed var(--border);border-radius:10px;touch-action:none;cursor:crosshair;display:block}
.sig-pad:hover{border-color:var(--accent)}
.sig-have{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:10px;display:flex;align-items:center;justify-content:center}
.sig-have img{max-height:64px;max-width:100%;object-fit:contain}
/* ============================================================
   #82 — THE ESTIMATE STUDIO. The pricing worksheet the contract is born
   from: the answer pinned at the top, the two controls that change what a
   number MEANS as segmented buttons, real line rows, and the ladder that
   the addendum will print. Tokens only; both themes come free.
   ============================================================ */
.est-head{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border)}
.est-ic{width:34px;height:34px;border-radius:9px;background:var(--accent-bg);color:var(--accent-tx);display:flex;align-items:center;justify-content:center;flex:none}
.est-t{flex:1;min-width:0}
.est-t h3{font-size:18px;font-weight:650;letter-spacing:-.01em}
.est-t p{font-size:12.5px;color:var(--t2);margin-top:1px}
.est-body{padding:16px 20px 6px}
.est-strip{position:sticky;top:0;z-index:5;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;box-shadow:var(--sh)}
.est-big{display:flex;flex-direction:column;min-width:130px}
.est-big .k{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);font-weight:700}
.est-big .v{font-size:24px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.est-big .s{font-size:11px;color:var(--t3)}
.est-cells{display:flex;gap:14px;padding-left:16px;border-left:1px solid var(--border);flex-wrap:wrap}
.est-cell{min-width:84px}
.est-cell .k{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);font-weight:700}
.est-cell .v{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.est-pill{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:3px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--accent-bg);color:var(--accent-tx)}
.est-pill.warn{background:var(--warn-bg);color:var(--warn-tx)}
.est-blk{margin-bottom:18px}
.est-blkh{display:flex;align-items:center;gap:8px;margin-bottom:9px;color:var(--t3)}
.est-blkh b{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.est-blkh .ln{flex:1;height:1px;background:var(--border)}
.est-cnt{font-size:11px;color:var(--t3)}
/* minmax(0,1fr), not 1fr: a bare 1fr track is minmax(auto,1fr) and grows to its content's MIN-CONTENT
   width. An <input> has one (about twenty characters), so at tablet width three of them were wider than
   the panel and "Hourly rate" ran past its right edge with the /h unit clipped (tools/reach-live.cjs,
   2026-09-20; the appointment editor had the same cause the same day). */
.est-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.est-g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.est-g3>*,.est-g2>*{min-width:0}
@media(max-width:760px){.est-g3,.est-g2{grid-template-columns:minmax(0,1fr)}}
.est-f label{display:block;font-size:11px;font-weight:600;color:var(--t3);margin-bottom:4px}
.est-box{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid transparent;border-radius:9px;padding:8px 11px}
.est-box:hover{border-color:var(--border)}
.est-box:focus-within{border-color:var(--accent);background:var(--card)}
.est-box svg{color:var(--t3);flex:none}
.est-box input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:13.5px;color:var(--t1)}
.est-box .pre{color:var(--t3);font-weight:600;font-size:12.5px}
.est-seg{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:3px;gap:3px;flex-wrap:wrap}
.est-seg button{border:0;border-radius:7px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;background:none}
.est-seg button:hover{color:var(--t1)}
.est-seg button.on{background:var(--card);color:var(--t1);box-shadow:var(--sh)}
.est-seg button.on.warn{color:var(--warn-tx)}
.est-segrow{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.est-hint{font-size:11px;color:var(--t3);display:flex;align-items:center;gap:6px;margin-top:6px;line-height:1.45}
.est-lines{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.est-lh{display:grid;grid-template-columns:1fr 78px 96px 104px 32px;gap:8px;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--border)}
.est-lh span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);font-weight:700}
.est-lh .r{text-align:right}
.est-lr{display:grid;grid-template-columns:1fr 78px 96px 104px 32px;gap:8px;padding:6px 12px;align-items:center;border-bottom:1px solid var(--border)}
.est-lr:last-child{border-bottom:0}
.est-lr:hover{background:var(--hover)}
.est-lr.free{background:var(--accent-bg)}
.est-lr input[type=text],.est-lr input[type=number]{width:100%;border:1px solid transparent;background:none;border-radius:7px;padding:6px 8px;font-size:12.5px;outline:none;color:var(--t1)}
.est-lr input:hover{border-color:var(--border)}
.est-lr input:focus{border-color:var(--accent);background:var(--card)}
.est-lr input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
.est-free{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:11px;color:var(--t3);font-weight:600;cursor:pointer;white-space:nowrap}
.est-free input{accent-color:var(--accent);width:auto}
.est-amt{text-align:right;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;padding-right:6px}
.est-lr.free .est-amt{color:var(--accent-tx);font-size:11px;letter-spacing:.04em}
.est-del{color:var(--t3);width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;border:0;background:none;cursor:pointer}
.est-lr:hover .est-del,.est-lr:focus-within .est-del{opacity:1}
.est-del:hover{background:var(--danger-bg);color:var(--danger-tx)}
.est-add{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--bg)}
.est-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--accent-tx);border:0;background:none;cursor:pointer}
.est-link:hover{text-decoration:underline}
.est-ladder{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:14px}
.est-lrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;font-size:12.5px;border-bottom:1px solid var(--border);color:var(--t2)}
.est-lrow:last-child{border-bottom:0}
.est-lrow b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1)}
.est-lrow.sub{background:var(--bg)}
.est-lrow.sub span{color:var(--t1);font-weight:600}
.est-lrow.disc b{color:var(--accent-tx)}
.est-lrow.tax{background:var(--warn-bg)}
.est-lrow.tax span,.est-lrow.tax b{color:var(--warn-tx);font-weight:600}
.est-lrow.grand{background:var(--t1)}
.est-lrow.grand span{color:var(--card);font-weight:700;font-size:13.5px}
.est-lrow.grand b{color:var(--card);font-weight:700;font-size:15px}
.est-mile{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
@media(max-width:760px){.est-mile{grid-template-columns:1fr}}
.est-mi{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--bg)}
.est-mi .k{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);font-weight:700}
.est-mi .v{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;margin-top:1px}
.est-mi .s{font-size:11px;color:var(--t3)}
.est-foot{align-items:center}
.est-fn{font-size:11px;color:var(--t3);display:flex;align-items:center;gap:6px}
/* letter VERSIONS — the history strip above the document */
.eng-vers{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 6px;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--t3)}
.eng-vers-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
.eng-ver{border:1px solid var(--border);background:var(--card);color:var(--t2);border-radius:20px;padding:3px 11px;font-size:11.5px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
.eng-ver:hover{border-color:var(--accent);color:var(--t1)}
.eng-ver.now{border-color:var(--accent);color:var(--accent)}
.eng-ver.on{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
/* #79 — the computed addendum, visible in the editor, editable nowhere */
.eng-addm-note{display:flex;align-items:center;gap:6px;margin:18px 0 8px;font-size:11.5px;color:var(--t3);border-top:1px dashed var(--border);padding-top:12px}
.eng-doc .addm table{width:100%;border-collapse:collapse;font-size:11.5px;margin:8px 0 14px}
.eng-doc .addm th{background:var(--t1);color:var(--card);text-align:left;padding:6px 9px;font-size:10.5px}
.eng-doc .addm td{border:1px solid var(--border);padding:6px 9px;vertical-align:top}
.eng-doc .addm td.r,.eng-doc .addm th.r{text-align:right;white-space:nowrap}
.eng-doc .addm td .d{display:block;color:var(--t3);font-size:10px;margin-top:2px}
.eng-doc .addm tr.free td{background:color-mix(in srgb,var(--accent) 8%,var(--card))}
.eng-doc .addm tr.free td.r{color:var(--accent);font-weight:700}
.eng-doc .addm tr.tot td{background:var(--bg);font-weight:700}
.eng-doc .addm tr.grand td{background:var(--t1);color:var(--card);font-weight:700}
.eng-doc .addm .addt{font-size:14px;text-align:center;margin:6px 0 2px}
.eng-doc .addm .adds{text-align:center;color:var(--t3);font-size:11px;margin:0 0 10px}
.eng-doc-head{display:flex;flex-direction:column;gap:2px;border-bottom:2px solid var(--t1);padding-bottom:10px;margin-bottom:12px}
.eng-doc-head b{font-size:15px;letter-spacing:.3px}
.eng-doc-head span{font-size:11px;color:var(--t3)}
.eng-doc-intro{font-size:12.5px;color:var(--t2);margin-bottom:12px;line-height:1.7}
.eng-clause{margin-bottom:12px}
.eng-clause-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.eng-clause-h b{font-size:12.5px}
.eng-clause-b{font-size:12px;color:var(--t2);line-height:1.7;margin-top:3px;white-space:normal}
.eng-mf{background:rgba(245,158,11,.15);border:1px dashed #f59e0b;border-radius:5px;padding:0 4px;color:#b45309;font-weight:700}
/* (the Engagements screen's 34px .spin ring lived here and leaked onto every button; it is SPIN(28, 'accent') now) */
[data-theme="dark"] .eng-flag{background:var(--card)}

/* ============================================================
   PW-2 — THE FLOW STANDARD (contract 87c72ba8 §2). Right sheet on
   desktop, bottom sheet on mobile; field-standard fields.
   ============================================================ */
.flow-ov{position:fixed;inset:0;background:rgba(15,23,42,.34);z-index:1200;display:none}
.flow-ov.open{display:block}
.flow-sheet{position:absolute;top:0;right:0;bottom:0;width:min(430px,96vw);background:var(--card);border-left:1px solid var(--border);box-shadow:-18px 0 40px rgba(15,23,42,.22);display:flex;flex-direction:column;animation:flowin .18s ease}
/* PW-8 — the wide variant, for a record with sections rather than fields.
   Same sheet, more room: a contact has eight of them, and at 430px the
   two-column grid collapsed and the form became a very long ribbon. */
.flow-wide{width:min(560px,96vw)}
@keyframes flowin{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.flow-sheet{animation:none}}
.flow-h{padding:15px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.flow-h b{font-size:15.5px}
.flow-step{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--t3);margin-top:3px}
.flow-b{padding:16px 18px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.flow-f{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center}
/* PW-6 — 768, not 640: the bottom nav appears at 768, and a tablet that had
   a bottom nav AND a right-hand drawer was two different navigations at
   once. One breakpoint decides "this is a phone", everywhere.
   The footer clears the home indicator; the save button must not sit under
   it, which is exactly where it landed before. */
@media(max-width:768px){.flow-sheet{top:auto;left:0;width:100%;max-height:86vh;border-radius:18px 18px 0 0;border-left:none;animation:flowup .2s ease}
.flow-f{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
@keyframes flowup{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}}
/* fields */
.ff{display:flex;align-items:flex-start;gap:10px;background:var(--bg);border:1.5px solid transparent;border-radius:10px;padding:10px 12px;margin-bottom:10px;position:relative}
.ff svg{color:var(--t3);margin-top:2px;flex:none}
.ff input,.ff textarea{flex:1;border:none;background:transparent;font:var(--ff);font-size:13.5px;color:var(--t1);outline:none;padding:0;min-width:0}
.ff textarea{min-height:64px;resize:vertical}
.ff:focus-within{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.fx-selv{flex:1;font-size:13.5px;font-weight:600;cursor:default}
.fx-selv.ph{color:var(--t3);font-weight:400}
.fx-chev{color:var(--t3);margin-left:auto}
.fx-sel{cursor:pointer}
.fx-pop{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shlg);z-index:20;max-height:240px;overflow-y:auto;padding:4px}
.fx-pop.open{display:block}
.fx-opt{padding:8px 11px;border-radius:7px;font-size:12.5px;cursor:pointer}
.fx-opt:hover{background:var(--hover,#f1f5f9)}
.fx-opt.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent2);font-weight:700}
.fx-opt span{color:var(--t3);font-size:11px}
.fx-opt em{color:var(--t3);font-size:10.5px;font-style:normal;float:right}
.fx-opt.fx-new{color:var(--accent2);font-weight:700;border-top:1px solid var(--border);margin-top:3px}
.fx-results{position:relative}
.fx-results:empty{display:none}
.fx-results{background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--sh);margin:-4px 0 10px;padding:4px;display:none}
.fx-err{font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:7px 11px;margin:-4px 0 10px}
.fx-hint{font-size:11.5px;color:var(--t3);margin:2px 0 12px}
.fx-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.fx-chip{border:1px solid var(--border);background:var(--card);border-radius:99px;padding:5px 12px;font-size:11.5px;font-weight:600;color:var(--t2);cursor:pointer}
.fx-chip.on,.fx-chip:hover{border-color:var(--accent);color:var(--accent2);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.fx-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.fx-card{border:2px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer}
.fx-card b{font-size:12.5px;display:block}
.fx-card span{font-size:10.5px;color:var(--t3)}
.fx-card.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
/* mini-month */
.fx-cal{padding:10px}
.fx-calh{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:6px}
.fx-calh span{cursor:pointer;padding:2px 6px;color:var(--t3)}
.fx-calg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.fx-calg i{font-style:normal;font-size:9px;font-weight:800;color:var(--t3);padding:2px 0}
.fx-calg u{text-decoration:none;font-size:11.5px;padding:5px 0;border-radius:6px;cursor:default}
.fx-calg u.d{cursor:pointer}
.fx-calg u.d:hover{background:var(--hover,#f1f5f9)}
.fx-calg u.td{font-weight:800;color:var(--accent2)}
.fx-calg u.on{background:var(--accent);color:var(--on-solid);font-weight:700}

/* ============================================================
   MI-1 — THE RECORDING BAR (contract contracts/meeting-intelligence.html §1).
   Fixed, app-level, above everything: it is a sibling of the views, so
   navigation cannot unmount it. Bottom-docked on mobile (thumb reach),
   bottom-right card on desktop.
   ============================================================ */
#mtg-bar{position:fixed;z-index:1400;right:16px;bottom:16px;width:340px;max-width:calc(100vw - 32px);display:none}
#mtg-bar.on{display:block}
.mtg-bar{background:var(--sb);color:#fff;border-radius:12px;box-shadow:var(--shlg);display:flex;align-items:center;gap:9px;padding:10px 13px}
.mtg-bar.paused{background:#3a3020}
.mtg-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);flex:none;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:mtgpulse 1.6s infinite}
@keyframes mtgpulse{70%{box-shadow:0 0 0 7px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@media(prefers-reduced-motion:reduce){.mtg-dot{animation:none}}
.mtg-ic{color:var(--warn);display:flex;flex:none}
.mtg-who{flex:1;min-width:0}
.mtg-who b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtg-who span{font-size:10px;color:#8fa0b5}
.mtg-bar.paused .mtg-who span{color:#d6b981}
.mtg-tm{font-family:'Cascadia Code',Consolas,monospace;font-size:13px;font-weight:700;color:#7dd3b0;flex:none}
.mtg-bar.paused .mtg-tm{color:var(--warn)}
.mtg-acts{display:flex;gap:5px;flex:none}
.mtg-act{width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mtg-act:hover{background:rgba(255,255,255,.22)}
.mtg-act.stop{background:var(--danger)}
.mtg-act.stop:hover{background:#dc2626}
.mtg-rec-btn:hover{color:var(--danger);border-color:var(--danger)}
/* Mobile: full-width dock above the bottom nav, bigger targets. */
@media(max-width:768px){
  #mtg-bar{left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 58px);width:auto;max-width:none}
  .mtg-bar{border-radius:0;padding:11px 14px}
  .mtg-act{width:34px;height:34px}
}

/* MI-1 — THE BOTTOM-CHROME STACK. The browser proof caught the recording bar
   sitting UNDER the install nudge (same z-index 1400, later in the DOM wins)
   and under toasts (z-index 9999). The bar is the one piece of chrome that
   must never be lost while a meeting is live, so: it outranks the nudge, the
   nudge stands down entirely (mid-meeting is not the moment to pitch an
   install), and toasts + the FAB move up to sit ABOVE it rather than on it.
   body.mtg-live is toggled by mtgRender(). */
#mtg-bar{z-index:1500}
body.mtg-live .install-nudge{display:none}
body.mtg-live .toast-c{bottom:92px}
body.mtg-live .fab{bottom:96px}
@media(max-width:768px){
  body.mtg-live .toast-c{bottom:calc(env(safe-area-inset-bottom,0px) + 128px)}
  body.mtg-live .fab{bottom:calc(env(safe-area-inset-bottom,0px) + 128px)}
}

/* ============================================================
   MI-2 — THE MEETING SCREEN (contract §2). The bar's other size: a
   full-page overlay, sibling of the views. Mobile is the primary
   drawing; desktop widens the same tabs into a centred column.
   ============================================================ */
#mtg-screen{position:fixed;inset:0;z-index:1600;background:var(--bg);display:none;overflow:hidden}
/* THE INTERRUPTED SCREEN (the trap fix — contract State 3). Reuses the
   screen shell; these are only the card and its exits. The full skin ship
   OVERWRITES this whole .mtg-* region rather than adding beside it
   (Abdul, 2026-08-23: "gets overwritten and not duplicated"). */
.mtg-clock-dim{color:rgba(255,255,255,.45)!important}
.mtg-int{background:var(--card);border:1px solid rgba(244,63,94,.35);border-radius:16px;padding:16px}
.mtg-int h4{margin:0 0 6px;font-size:15.5px;color:var(--t1)}
.mtg-int p{margin:0;font-size:13px;color:var(--t2);line-height:1.55}
.mtg-int-safe{display:flex;align-items:center;gap:7px;font-size:12px;color:#065f46;background:#d1fae5;border-radius:9px;padding:8px 11px;margin-top:12px}
.mtg-int-acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.mtg-int-acts .btn{flex:1;min-width:150px}
.mtg-int-close{display:flex;justify-content:center;margin-top:14px}
body.mtg-open #mtg-screen{display:block}
body.mtg-open #mtg-bar{display:none}
.mtg-scr{height:100%;display:flex;flex-direction:column;max-width:720px;margin:0 auto;background:var(--card);box-shadow:0 0 40px rgba(15,23,42,.1)}
.mtg-shead{background:var(--sb);color:#fff;padding:14px 16px}
.mtg-srow{display:flex;align-items:center;gap:8px}
.mtg-slbl{font-size:10.5px;font-weight:800;letter-spacing:.07em;color:#8fa0b5}
.mtg-sname{font-weight:800;font-size:17px;margin-top:7px}
.mtg-ssub{font-size:11.5px;color:#8fa0b5;margin-top:1px}
.mtg-stime{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.mtg-big{font-family:'Cascadia Code',Consolas,monospace;font-size:22px;font-weight:800;color:#7dd3b0}
.mtg-wake{font-size:10px;color:#7dd3b0;display:inline-flex;align-items:center;gap:5px}
.mtg-sbody{flex:1;overflow-y:auto;padding:14px;background:var(--bg)}
.mtg-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);box-shadow:var(--sh);margin-bottom:11px;overflow:hidden}
.mtg-cardh{display:flex;align-items:center;gap:7px;padding:9px 13px;font-size:11.5px;font-weight:800;letter-spacing:.03em;color:var(--t2);border-bottom:1px solid var(--border);background:var(--card)}
.mtg-count{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--bg);border-radius:99px;padding:1px 8px;color:var(--t2)}
.mtg-li{padding:9px 13px;font-size:12.5px;color:var(--t1);border-bottom:1px solid var(--border);display:flex;gap:9px;justify-content:space-between}
.mtg-li:last-child{border-bottom:none}
.mtg-li span{color:var(--t3);font-size:10.5px;flex:none}
.mtg-li.empty{color:var(--t3);font-size:12px}
.mtg-hint{font-size:11.5px;color:var(--t3);padding:4px 2px 10px;display:flex;gap:6px;align-items:center}
.mtg-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mtg-chip{border:1px solid var(--border);background:var(--card);border-radius:99px;padding:6px 12px;font:var(--ff);font-size:11.5px;font-weight:600;color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.mtg-chip.on{border-color:var(--accent);color:var(--accent2);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.mtg-chip.on.promise{border-color:var(--warn);color:#b45309;background:rgba(245,158,11,.1)}
.mtg-cap-row{display:flex;gap:7px;margin-bottom:12px}
.mtg-cap-row input{flex:1;min-width:0;background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:11px 13px;font:var(--ff);font-size:13.5px;color:var(--t1)}
.mtg-cap-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.mtg-drop{display:flex;flex-direction:column;align-items:center;gap:3px;border:2px dashed var(--border);border-radius:12px;padding:20px;text-align:center;font-size:12.5px;color:var(--t2);background:var(--card);cursor:pointer;margin-bottom:12px}
.mtg-drop span{font-size:11px;color:var(--t3)}
.mtg-drop svg{color:var(--t3)}
.mtg-check{display:flex;flex-direction:column;gap:6px}
.mtg-tick{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:11px 12px;font:var(--ff);font-size:12.5px;color:var(--t2);text-align:left;cursor:pointer}
.mtg-tick .bx{width:18px;height:18px;border-radius:5px;border:1.6px dashed var(--warn);display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.mtg-tick.on{color:var(--t1)}
.mtg-tick.on .bx{background:var(--accent);border:1.6px solid var(--accent)}
.mtg-sfoot{display:flex;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--border)}
.mtg-bigbtn{flex:1;justify-content:center;padding:14px;font-size:13.5px}

/* MI-2.1 — the notes-only recovery card. A meeting running without audio is
   the one condition she must be able to fix from any tab, so it rides above
   all of them and names the exact way back. */
.mtg-bar.noaudio .mtg-dot{background:var(--warn);animation:none}
.mtg-mic{background:#fffbeb;border:1px solid #fcd34d;border-radius:var(--rlg);padding:13px 14px;margin-bottom:12px}
.mtg-mich{display:flex;align-items:center;gap:7px;font-weight:800;font-size:12.5px;color:#92400e;flex-wrap:wrap}
.mtg-mich span{font-weight:500;font-size:11.5px;color:#a16207;flex-basis:100%}
.mtg-micb{font-size:12px;color:#78350f;margin:7px 0 10px;line-height:1.6}
[data-theme="dark"] .mtg-mic{background:rgba(245,158,11,.12)}

/* MI-4 — conversations on the 360: what was said, what is owed, what it
   implied. The owed block leads because a forgotten promise is what costs
   her the relationship. */
.mtg-owed{background:#fffbeb;border:1px solid #fcd34d;border-radius:10px;padding:10px 12px;margin-bottom:11px}
.mtg-owedh{font-size:11.5px;font-weight:800;color:#92400e;display:flex;align-items:center;gap:6px;margin-bottom:6px}
.mtg-owedi{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:12px;color:#78350f;padding:3px 0}
.mtg-intents{display:flex;flex-direction:column;gap:7px;margin-bottom:11px}
.mtg-intent{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--border);border-radius:9px;padding:9px 11px;background:var(--card)}
.mtg-intent b{font-size:12.5px;display:block}
.mtg-intent span{font-size:11px;color:var(--t3);display:block;font-style:italic}
.mtg-conv{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--border)}
.mtg-conv:last-child{border-bottom:none}
.mtg-convi{width:28px;height:28px;border-radius:8px;background:#fee2e2;color:var(--danger);display:flex;align-items:center;justify-content:center;flex:none}
.mtg-conv b{font-size:12.5px;display:block}
.mtg-conv span{font-size:10.5px;color:var(--t3);display:block}

/* MI-4.1 — meeting files use the app's own file rows, so the surface reads
   and behaves identically to Files everywhere else. */
.mtg-files{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}

/* ============================================================
   PW-3 — THE LETTER EDITOR (contract §5). Click any paragraph and type;
   computed amounts are locked chips that prose flows around.
   ============================================================ */
.eng-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px;flex-wrap:wrap}
.eng-hint{font-size:11.5px;color:var(--t3);display:flex;align-items:center;gap:6px}
.eng-save{font-size:11px;font-weight:700;color:var(--t3)}
.eng-edit{outline:none;border-radius:6px;padding:2px 4px;margin:-2px -4px;transition:background .12s,box-shadow .12s}
.eng-edit:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.eng-edit:focus{background:var(--card);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent)}
.eng-doc.sent .eng-edit:hover{background:transparent}
.eng-lock{background:#eef2f7;border-radius:4px;padding:0 4px;font-weight:700;color:var(--t1);cursor:not-allowed;user-select:all}
[data-theme="dark"] .eng-lock{background:rgba(255,255,255,.09)}
.eng-edited{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent2);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:99px;padding:1px 7px;margin-left:7px}
.eng-unprot{background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:9px 12px;font-size:12px;color:#7f1d1d;margin-bottom:9px}
.eng-unprot b{color:#b91c1c}
.eng-fill{border:1.5px solid var(--accent);border-radius:8px;padding:6px 10px;font:var(--ff);font-size:12.5px;min-width:220px;background:var(--card);color:var(--t1)}
.eng-fill:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}

/* THE WORK ROW (2026-08-22, Abdul: "these should be higher on dashboard
   super important"). Engagements in flight and people just touched, side by
   side directly under the control strip — above the money summary. */
.dash-work{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;align-items:start}
.dash-work>.card{margin-bottom:0}
@media(max-width:900px){.dash-work{grid-template-columns:1fr;gap:12px}}

/* ============================================================
   PW-4 · DASHBOARD PEAK — the tabs, the engagement lane, the money strip
   (contracts/platform-wave.html §5). Every height here is BOUNDED: the lane
   caps at 5 columns × 2 cards, the strip is one row of quadrants. Nothing
   on this surface may grow with the data.
   ============================================================ */
/* a sideways scroller when the pills do not fit (2026-09-26, measured at 375: Money's six tabs ran 149px past the page,
   so the whole Billing page slid sideways under a thumb); where they fit, nothing changes */
.dash-tabs{display:flex;align-items:center;gap:6px;margin-bottom:14px;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.dash-tabs::-webkit-scrollbar{display:none}
.dt-b{flex:none;white-space:nowrap;background:none;border:0;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--t3);cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.dt-b:hover{color:var(--t1);background:var(--bg)}
.dt-b.on{background:var(--t1);color:var(--card)}
.dt-sp{flex:1}
/* A card header that carries a spacer leaves justify-content no free space to spread, so the
   subtitle after the title touched it ("SubscriptionsMRR", "Invoices4 invoices", 2026-09-18).
   Scoped to headers WITH a spacer; the other card headers keep their space-between layout. */
.ch>.ct+span:has(~.dt-sp){margin-left:10px}

.lane-h{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.lane-t{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.lane-door{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--t3);cursor:pointer;white-space:nowrap}
.lane-door:hover{color:var(--accent)}
.eng-lane{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:18px;align-items:start}
.elc{background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);padding:9px;box-shadow:var(--sh);min-width:0}
.elh{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);padding:1px 3px 8px}
.elh b{margin-left:auto;font-size:11px;color:var(--t1)}
.elcard{background:var(--bg);border-radius:var(--r);padding:8px 9px;margin-bottom:6px;cursor:pointer;border-left:3px solid var(--accent);transition:transform .12s,box-shadow .12s;min-width:0}
.elcard:last-child{margin-bottom:0}
.elcard:hover{transform:translateY(-1px);box-shadow:var(--sh)}
.elcard.paused{border-left-color:var(--t3);opacity:.82}
.elcard b{display:block;font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.elcard span{display:block;font-size:10.5px;color:var(--t3);line-height:1.35;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.elmore{font-size:10.5px;font-weight:700;color:var(--t3);cursor:pointer;padding:5px 3px 1px}
.elmore:hover{color:var(--accent)}
.lane-quiet{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--rlg);padding:11px 15px;margin-bottom:18px;font-size:12px;color:var(--t3);cursor:pointer;box-shadow:var(--sh)}
.lane-quiet b{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--t3)}
.lane-quiet:hover b{color:var(--accent)}

.mstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px;margin-bottom:20px}
.msq{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:var(--rlg);padding:12px 15px;cursor:pointer;box-shadow:var(--sh);transition:transform .12s,box-shadow .12s;min-width:0}
.msq:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,23,42,.09)}
.ms-v{font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-v i{font-style:normal;font-size:12px;font-weight:600;color:var(--t3)}
.ms-l{font-size:10.5px;font-weight:600;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msq.ms-mrr{border-left-color:var(--accent)}
.msq.ms-due{border-left-color:#d97706}.msq.ms-due .ms-v{color:#b45309}
.msq.ms-bad{border-left-color:var(--danger)}.msq.ms-bad .ms-v{color:var(--danger)}
.msq.ms-ok{border-left-color:var(--accent2,#2957b8)}
.msq.ms-good{border-left-color:var(--accent)}.msq.ms-good .ms-v{color:#059669}

/* Tablet: the lane scrolls sideways rather than squeezing five columns into
   the width, and the strip drops to two per row. */
@media(max-width:900px){
  .eng-lane{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin-left:-2px;padding-left:2px}
  .elc{flex:0 0 74%;max-width:280px;scroll-snap-align:start}
  .mstrip{grid-template-columns:1fr 1fr}
  .ms-v{font-size:18px}
}
/* PHONE — PW-6, contract §7 note 13: KANBAN COLUMNS BECOME SECTIONS.
   Horizontal card-scroll is a desktop pattern; on a phone it hides whole
   stages behind a swipe nobody knows to make, and it fights the page's own
   vertical scroll under the thumb. The lane becomes one column of stage
   sections, read top to bottom.
   `display:flex;flex-direction:column` also neutralises the inline
   grid-template-columns dashLane() writes for the desktop shape — the
   inline style stays true where it applies and is simply inert here, so
   neither rule needs !important to win. */
@media(max-width:768px){
  .eng-lane{display:flex;flex-direction:column;overflow-x:visible;scroll-snap-type:none;gap:9px;padding-left:0;margin-left:0}
  .elc{flex:0 0 auto;max-width:none;width:100%}
  .elcard b{white-space:normal}
}

/* ============================================================
   THE CUSTOMER PAGE (contracts/customer-page.html). Two panes, one
   timeline, hourly verbs visible. Contact facts live once — in the rail.
   ============================================================ */
.cp-head .ck-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.cp-stage{border:none;cursor:pointer;font:var(--ff);font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
/* minmax(0,1fr), never a bare 1fr (2026-09-26, measured at 375): a bare 1fr track grows to its content's minimum, the
   Contact card's field rows set that at 425px, and every card in the column ran 64px past a phone screen, cut off by
   #main's hidden overflow (so no page scrollbar ever showed it). The rail may shrink too (min-width:0). */
.cp-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
@media(max-width:980px){.cp-grid{grid-template-columns:minmax(0,1fr)}}
.cp-rail{display:flex;flex-direction:column;gap:12px;min-width:0}
.cp-rail>.card{margin:0}
/* min-width:0 — a grid child's default min-width is its CONTENT, so the
   composer's unwrappable toolbar pushed this 1fr track 130px past the
   viewport (Abdul's screenshot, 2026-08-30: "the email section on her
   contact page is going off screen"). Zero lets 1fr actually mean 1fr;
   the children then wrap inside it instead of widening it. */
.cp-work{display:flex;flex-direction:column;gap:12px;min-width:0}
.cp-work>.card{margin:0;min-width:0}
.cp-work .cb{min-width:0}
/* rail facts */
.cp-f{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12.5px;color:var(--t1);border-bottom:1px solid var(--border)}
.cp-f:last-child{border-bottom:none}
.cp-f>svg{color:var(--t3);flex:none}
.cp-f>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-f a{color:var(--t1);text-decoration:none}
.cp-f a:hover{color:var(--accent2);text-decoration:underline}
.cp-ghost{color:var(--t3);cursor:pointer}
.cp-ghost:hover{color:var(--accent2)}
.cp-cp{border:none;background:transparent;color:var(--t3);font:var(--ff);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;opacity:0;transition:opacity .12s}
.cp-f:hover .cp-cp{opacity:1}
@media(hover:none){.cp-cp{opacity:.65}}   /* PW-6 — copy was hover-only, so it did not exist on a phone */
.cp-cp:hover{color:var(--accent2)}
.cp-sm{font-size:12px;color:var(--t2);line-height:1.7}
.cp-dim{color:var(--t3)}
.cp-f2{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0}
/* composer */
.cp-tabs,.cp-tlt{display:flex;gap:4px;padding:9px 12px 0;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.cp-tabs::-webkit-scrollbar,.cp-tlt::-webkit-scrollbar{display:none}
.cp-ct{flex:none;border:none;background:transparent;font:var(--ff);font-size:12.5px;font-weight:600;color:var(--t2);padding:7px 11px;border-bottom:2px solid transparent;cursor:pointer}
.cp-ct.on{color:var(--accent2);border-bottom-color:var(--accent);font-weight:700}
.cp-ct i{font-style:normal;font-size:10px;color:var(--t3)}
.cp-in{width:100%;min-height:74px;border:1.5px solid var(--border);border-radius:10px;padding:11px 13px;font:var(--ff);font-size:13.5px;color:var(--t1);background:var(--bg);resize:vertical}
.cp-in:focus{outline:none;border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.cp-crow{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.cp-hint{font-size:11.5px;color:var(--t3)}
.cp-warn{font-size:11.5px;color:#b45309;background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:7px 10px;margin-top:8px;display:flex;gap:6px;align-items:center}
/* suspected phishing (js/views/contact-detail.js ckPhishBanner): read before anything on the page is opened */
.cp-phish{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;border-radius:10px;background:var(--danger-bg);color:var(--danger-tx);border:1px solid var(--danger);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.cp-phish svg{flex:none;margin-top:2px}
.cp-phish b{font-weight:700}
/* next up + money */
.cp-doors{display:flex;gap:10px}
.cp-doors a{font-size:11px;color:var(--accent2);cursor:pointer;font-weight:600}
.cp-nu{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--border)}
.cp-nu:last-child{border-bottom:none}
.cp-nu>span{color:var(--t3);display:flex}
.cp-nu b{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-nu i{font-style:normal;font-size:11px;color:var(--t3);flex:none}
.cp-more{font-size:11.5px;color:var(--t3);padding-top:8px}
.cp-more a{color:var(--accent2);cursor:pointer;font-weight:600}
.cp-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cp-3 b{display:block;font-size:17px;font-weight:800;letter-spacing:-.3px}
.cp-3 span{font-size:10.5px;color:var(--t3);font-weight:600}
/* timeline */
.cp-row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border)}
.cp-row:last-child{border-bottom:none}
.cp-ri{width:26px;height:26px;border-radius:8px;background:var(--bg);color:var(--t3);display:flex;align-items:center;justify-content:center;flex:none}
.cp-rb{flex:1;min-width:0}
.cp-rb b{display:block;font-size:12.5px;font-weight:600}
.cp-rb span{display:block;font-size:11.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-row>i{font-style:normal;font-size:10.5px;color:var(--t3);flex:none}
.cp-chip{margin-left:7px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:99px;padding:1px 7px;background:var(--bg);color:var(--t2)}
.cp-chip.replied{background:#d1fae5;color:#047857}
.cp-chip.opened{background:#dbeafe;color:#1d4ed8}
.cp-chip.bounced,.cp-chip.notsent{background:#fee2e2;color:#b91c1c}   /* notsent: a refused send, 2026-10-04 */
.cp-chip.outcome{background:#fef3c7;color:#b45309}
.cp-empty{font-size:12.5px;color:var(--t3);padding:10px 0}
.cp-empty a{color:var(--accent2);cursor:pointer;font-weight:600}
/* the two menus */
.cp-menu{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shlg);padding:5px;z-index:1300}
.cp-mi{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;font-size:12.5px;color:var(--t1);cursor:pointer}
.cp-mi:hover{background:var(--bg)}
.cp-mi.on{color:var(--accent2);font-weight:700}
.cp-mi.danger{color:var(--danger)}
.cp-mi.danger:hover{background:#fef2f2}
.cp-sep{height:1px;background:var(--border);margin:4px 6px}

/* ============================================================
   CP-1 · THE MEETING RECORD (contracts/customer-page-v2.html §7)
   A dark deck that owns the top — during and after a call the identity of
   the conversation and the transport are the only chrome that matters —
   over a light body. Two registers, as the design standard requires.
   ============================================================ */
.mrec{max-width:1080px}
.mrec-deck{background:var(--sb,#1e2a3a);color:#fff;border-radius:var(--rlg) var(--rlg) 0 0;padding:15px 18px}
.mrec-top{display:flex;align-items:center;gap:12px}
.mrec-ic{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#7dd3b0;flex:none}
.mrec-top b{font-size:15.5px;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrec-sub{font-size:11.5px;color:#9fb0c4;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrec-lnk{color:#7dd3b0;cursor:pointer}.mrec-lnk:hover{text-decoration:underline}
.mrec-acts{margin-left:auto;display:flex;gap:7px;align-items:center;flex:none}
.mrec-kb{color:#dbe6f2}
.mrec-noaud{margin-top:12px;font-size:11.5px;color:#9fb0c4;display:flex;align-items:center;gap:7px}
/* the transport */
.mrec-play{display:flex;align-items:center;gap:11px;margin-top:13px;background:rgba(255,255,255,.08);border-radius:12px;padding:8px 12px}
.mrec-pp{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-solid);border:0;display:grid;place-items:center;cursor:pointer;flex:none}
.mrec-pp:disabled{background:#64748b;cursor:not-allowed}
.mrec-t{font-size:11px;font-family:'Cascadia Code',Consolas,monospace;color:#9fb0c4;flex:none;font-variant-numeric:tabular-nums}
.mrec-bar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.18);position:relative;cursor:pointer;min-width:60px}
.mrec-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#7dd3b0;border-radius:3px}
.mrec-bar b{position:absolute;left:0;top:-4px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.mrec-c{background:rgba(255,255,255,.12);border:0;color:#dbe6f2;border-radius:99px;padding:4px 9px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;flex:none}
.mrec-c:hover{background:rgba(255,255,255,.2)}
/* tabs + body */
.mrec-tabs{display:flex;gap:2px;background:var(--card);border:1px solid var(--border);border-top:0;padding:0 10px;overflow-x:auto;scrollbar-width:none}
.mrec-tb{background:none;border:0;border-bottom:2px solid transparent;padding:11px 12px;font-size:12.5px;font-weight:700;color:var(--t3);cursor:pointer;font-family:inherit;white-space:nowrap}
.mrec-tb:hover{color:var(--t1)}
.mrec-tb.on{color:var(--accent2);border-bottom-color:var(--accent2)}
.mrec-body{background:var(--card);border:1px solid var(--border);border-top:0;border-radius:0 0 var(--rlg) var(--rlg);padding:16px 18px;box-shadow:var(--sh)}
.mrec-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}
.mrec-h{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:7px;display:flex;align-items:center;gap:7px}
.mrec-h span{font-weight:700;color:var(--t2);letter-spacing:0;text-transform:none;font-size:11px}
.mrec-hred{color:var(--danger)}
.mrec-sum{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:16px}
.mrec-empty{font-size:12px;color:var(--t3);line-height:1.55;background:var(--bg);border-radius:10px;padding:11px 13px;margin-bottom:14px}
/* MI-3 — SUGGESTIONS, AND THEY MUST NOT LOOK LIKE FACTS. Her own captures
   render on a plain background; these sit inside their own dashed box with
   a header that says where they came from and that nothing is filed yet.
   The dashed border is the whole point: it reads as provisional at a glance,
   which is the honest thing for a machine's reading of a conversation. */
.mrec-sug{border:1.5px dashed var(--border);border-radius:12px;padding:11px 12px;margin-bottom:16px;background:var(--bg)}
.mrec-sug-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.mrec-sug-h svg{color:var(--t3);flex:none}
.mrec-sug-h b{font-size:12.5px;color:var(--t1)}
.mrec-sug-h span{flex:1;min-width:140px;font-size:11px;color:var(--t3)}
.mrec-sug-g{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin:10px 0 5px}
.mrec-sug-g svg{color:var(--t3)}
.mrec-sug-row{display:flex;align-items:flex-start;gap:7px;padding:6px 0;border-top:1px solid var(--border)}
.mrec-sug-row:first-of-type{border-top:none}
.mrec-sug-row p{flex:1;min-width:0;font-size:12.5px;color:var(--t1);line-height:1.45;overflow-wrap:anywhere}
.mrec-sug-row .btn{flex:none}
.mrec-sug-no{color:var(--t3)}
.mrec-sug-no:hover{color:#ef4444}
@media(max-width:768px){.mrec-sug-row{flex-wrap:wrap}.mrec-sug-row p{flex-basis:100%}}
.mrec-list{margin-bottom:14px}
.mrec-li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t2);padding:7px 0;border-bottom:1px solid #eef2f7}
.mrec-li:last-child{border-bottom:0}
.mrec-li>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mrec-li b{color:var(--t1);font-weight:600}
.mrec-prom{align-items:flex-start;gap:7px}
.mrec-done{color:var(--t3)}.mrec-done i{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;color:var(--accent2)}
.mrec-kind{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);background:var(--bg);border-radius:99px;padding:2px 8px;flex:none}
.mrec-at,.mrec-atx{margin-left:auto;flex:none;font-size:10.5px;font-weight:700;font-family:'Cascadia Code',Consolas,monospace;color:var(--accent2);background:none;border:0;cursor:pointer;font-style:normal}
.mrec-atx{margin-left:8px}
.mrec-at:hover,.mrec-atx:hover{text-decoration:underline}
.mrec-intent{display:flex;align-items:center;gap:10px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:9px 11px;margin-bottom:7px;font-size:12px}
.mrec-intent b{display:block;color:#166534}
.mrec-intent span{display:block;color:#15803d;font-size:11px;margin-top:2px}
/* transcript */
.mrec-tsbar{display:flex;gap:8px;align-items:center;margin-bottom:11px}
.mrec-find{flex:1;background:var(--bg);border:1.5px solid transparent;border-radius:10px;padding:8px 12px;font-size:12.5px;color:var(--t1);font-family:inherit}
.mrec-find:focus{outline:none;border-color:var(--accent);background:var(--card)}
.mrec-ts{max-height:520px;overflow:auto}
.mrec-seg{display:flex;gap:12px;padding:7px 9px;border-radius:9px;cursor:pointer}
.mrec-seg:hover{background:var(--bg)}
.mrec-seg.on{background:#f0fdf4;box-shadow:inset 2px 0 0 var(--accent)}
.mrec-segt{font-family:'Cascadia Code',Consolas,monospace;font-size:10.5px;color:var(--accent2);flex:none;width:46px;padding-top:2px}
.mrec-seg b{display:block;font-size:11px;color:var(--t1)}
.mrec-seg p{font-size:12.5px;color:var(--t2);line-height:1.55}
/* the conversation row is a door now */
.mtg-convd{cursor:pointer}
.mtg-convd:hover{background:var(--bg)}
.mtg-convo{font-size:10.5px;font-weight:700;color:var(--t3);white-space:nowrap}
.mtg-convd:hover .mtg-convo{color:var(--accent)}
@media(max-width:820px){
  .mrec-grid{grid-template-columns:1fr;gap:14px}
  .mrec-acts .btn{display:none}
  .mrec-acts .mrec-kb{display:grid}
  .mrec-play{flex-wrap:wrap;gap:8px}
  .mrec-bar{order:5;flex-basis:100%;min-width:100%}
  .mrec-body{padding:14px}
}

/* ============================================================
   THE LISTENING SCREEN (contracts/recording-screen-v2.html) — this region
   OVERWRITES the CP-2 skin per Abdul's ruling ("gets overwritten and not
   duplicated"): the old block is gone, dead classes (cols/tabs/tally/notes)
   are deleted, and every class the renderer emits is styled HERE. Dark by
   commitment — the app's one dark surface, looked at in a meeting.
   The MI-1 block above keeps only PLACEMENT (fixed, stacking, the mobile
   dock); the bar's look is overridden at the end of this region, stated,
   not accidental.
   ============================================================ */
.mtg-scr{max-width:none;height:100%;display:flex;flex-direction:column;background:#0B1220;color:#E8EDF5;box-shadow:none}
.mtg-shead{background:transparent;color:#fff;padding:16px 16px 0;flex:none}
.mtg-srow{display:flex;align-items:center;gap:9px}
.mtg-state{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.11em;color:#5EEAD4;background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:99px;padding:5px 11px}
.mtg-state.paused{color:#FCD34D;background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.32)}
.mtg-state .mtg-dot{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent);animation:mtgBeat 1.9s infinite}
@keyframes mtgBeat{70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}}
@media(prefers-reduced-motion:reduce){.mtg-state .mtg-dot{animation:none}}
.mtg-wake{font-size:10px;color:#71829B;display:inline-flex;align-items:center;gap:5px}
.mtg-min{margin-left:auto;background:#131C2E;border:1px solid #22304A;color:#8296B3;border-radius:9px;width:30px;height:30px;display:grid;place-items:center;cursor:pointer}
.mtg-min:hover{background:#1B2740;color:#E8EDF5}
.mtg-clock{font-family:'Cascadia Code',Consolas,ui-monospace,monospace;font-size:44px;font-weight:600;letter-spacing:-.035em;line-height:1;margin:12px 0 4px;color:#fff;font-variant-numeric:tabular-nums}
.mtg-clock.dim,.mtg-clock-dim{color:rgba(232,237,245,.45)!important}
.mtg-sname{font-weight:600;font-size:12.5px;color:#E8EDF5}
.mtg-sname span{display:block;font-weight:400;font-size:11.5px;color:#8296B3;margin-top:2px}
.mtg-meter{display:flex;align-items:flex-end;gap:2.5px;height:22px;margin:13px 0 2px}
.mtg-meter i{flex:1;background:#10B981;border-radius:2px;min-height:2px;transition:height .09s linear;opacity:.9}
.mtg-meter i:nth-child(n+12){opacity:.5}
/* the body — THE STREAM is the centre of the screen */
.mtg-sbody{flex:1;min-height:0;overflow-y:auto;padding:12px 16px;background:transparent;display:flex;flex-direction:column}
.mtg-stream{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26px);mask-image:linear-gradient(180deg,transparent,#000 26px)}
.mtg-line{display:flex;gap:9px;padding:7px 0;align-items:flex-start}
.mtg-lt{font-family:ui-monospace,Consolas,monospace;font-size:10px;color:#5A6E8C;padding-top:3px;font-variant-numeric:tabular-nums;flex:none}
.mtg-lx{font-size:13.5px;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.mtg-line.o5 .mtg-lx{color:#4A5D7A}
.mtg-line.o7 .mtg-lx{color:#6B80A0}
.mtg-line.o9 .mtg-lx{color:#A9BCD6}
.mtg-line.now .mtg-lx{color:#fff}
.mtg-ltag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:5px;padding:2px 6px;margin-left:7px;vertical-align:1px;background:#1B2740;color:#8296B3}
.mtg-ltag.want{background:color-mix(in srgb,var(--accent) 15%,transparent);color:#5EEAD4}
.mtg-ltag.promise{background:rgba(245,158,11,.15);color:#FCD34D}
.mtg-ltag.todo{background:rgba(56,189,248,.15);color:#7DD3FC}
.mtg-ltag.money{background:rgba(232,121,249,.15);color:#F0ABFC}
/* MI-5 — HEARD lines: the room's words, marked apart from her captures.
   A heard line is quieter by design (no accent bar, italic-free but tagged)
   because the eye should still find the decisions she chose to keep. */
.mtg-ltag.heard{background:rgba(148,163,184,.16);color:#94A3B8}
.mtg-line.mtg-heard{border-left:2px solid rgba(148,163,184,.22);padding-left:9px;margin-left:-11px}
.mtg-line.interim .mtg-lx{color:#8296B3;font-style:italic}
.mtg-line.interim .mtg-lt{opacity:.6}
/* the socket's health, stated where the words are */
.mtg-liverow{flex:none;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:9px 0 0;font-size:11px}
.mtg-livetag{font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:9.5px;border-radius:20px;padding:3px 9px;background:#1B2740;color:#8296B3}
.mtg-livetag.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:#5EEAD4}
.mtg-livetag.warn{background:rgba(245,158,11,.16);color:#FCD34D}
.mtg-livewhy{color:#71829B;flex:1;min-width:0}
.mtg-liveoff{background:none;border:0;color:#5A6E8C;font-size:11px;text-decoration:underline;cursor:pointer;padding:0}
.mtg-liveoff:hover{color:#A9BCD6}
/* MI-6 — THE COPILOT. Literal colours here on purpose, like the rest of the
   Listening Screen: this is one deliberately dark blackout surface that does
   not follow the app's light/dark tokens, and a lone token in the middle of
   it would break the very consistency the tokens exist to protect. */
.mtg-nudge{flex:none;background:#131C2E;border:1px solid rgba(94,234,212,.3);border-radius:13px;padding:11px 12px;margin:0 0 10px}
.mtg-nudge.quiet{background:transparent;border-color:#22304A;border-style:dashed;padding:8px 11px}
.mtg-nudge.quiet:empty{display:none}          /* a coach with nothing to say takes no room */
.mtg-nlab{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.11em;color:#5EEAD4;margin-bottom:5px}
.mtg-nudge.quiet .mtg-nlab{color:#5A6E8C}
.mtg-ntx{font-size:13px;line-height:1.5;color:#E8EDF5;font-weight:550}
.mtg-nudge.quiet .mtg-ntx{font-size:11.5px;color:#71829B;font-weight:400}
.mtg-nq{display:flex;gap:6px;align-items:flex-start;font-size:11px;color:#8296B3;font-style:italic;line-height:1.45;margin-top:6px;border-left:2px solid #22304A;padding-left:8px}
.mtg-nq svg{flex:none;margin-top:2px;opacity:.7}
.mtg-nact{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.mtg-nbtn{display:inline-flex;align-items:center;gap:5px;background:#1B2740;border:1px solid #22304A;color:#A9BCD6;border-radius:9px;padding:6px 11px;font:var(--ff);font-size:11.5px;cursor:pointer}
.mtg-nbtn:hover{color:#E8EDF5;border-color:#35486B}
.mtg-nbtn.keep{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:#5EEAD4}
.mtg-nbtn.ghost{background:none;border-color:transparent;color:#5A6E8C;margin-left:auto}
.mtg-nbtn.wide{width:100%;justify-content:center;margin-top:8px}
/* the board */
/* flex:none because .mtg-sbody is a scrolling COLUMN flex container: without
   it the board is squashed to fit instead of letting the body scroll, and
   the last groups become unreachable rather than merely below the fold */
.mtg-coach{flex:none;display:flex;flex-direction:column;gap:12px;margin-top:10px}
.mtg-cline{font-size:11.5px;color:#71829B;line-height:1.5}
.mtg-cline span{color:#5A6E8C}
.mtg-cgrp{background:#131C2E;border:1px solid #22304A;border-radius:13px;padding:11px 12px}
.mtg-cgrp h5{display:flex;align-items:center;gap:6px;margin:0 0 9px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8296B3}
.mtg-cgrp h5 i{font-style:normal;font-size:9px;background:#1B2740;color:#A9BCD6;border-radius:7px;padding:1px 6px;font-variant-numeric:tabular-nums}
.mtg-citem{border-top:1px solid #1B2740;padding-top:9px;margin-top:9px}
.mtg-cgrp .mtg-citem:first-of-type{border-top:0;padding-top:0;margin-top:0}
.mtg-citem.row{display:flex;align-items:center;gap:9px}
.mtg-citem.row .mtg-ctx{flex:1;min-width:0}
.mtg-ctx{font-size:12.5px;line-height:1.5;color:#E8EDF5}
.mtg-cwhy{font-size:11px;color:#8296B3;margin-top:3px}
.mtg-cempty{font-size:11.5px;color:#5A6E8C;line-height:1.5}
.mtg-ctopic{border-top:1px solid #1B2740;padding-top:9px;margin-top:9px}
.mtg-cgrp .mtg-ctopic:first-of-type{border-top:0;padding-top:0;margin-top:0}
.mtg-ctopic b{display:block;font-size:12px;color:#E8EDF5;margin-bottom:4px}
.mtg-ctopic ul{margin:0;padding-left:16px}
.mtg-ctopic li{font-size:11.5px;color:#A9BCD6;line-height:1.55;margin:2px 0}
.mtg-crow{display:flex;gap:8px;flex-wrap:wrap}
.mtg-cfoot{font-size:10.5px;color:#5A6E8C;line-height:1.5;text-align:center}
/* the foot gained a fourth control; on a narrow phone the gap gives way
   before any target does — a 44px tap area is not negotiable */
@media (max-width:400px){.mtg-sfoot{gap:8px}.mtg-stop{padding:12px 13px}}
.mtg-hint{font-size:12px;color:#71829B;line-height:1.55;background:#131C2E;border:1px solid #22304A;border-radius:10px;padding:10px 12px;margin:10px 0 0}
.mtg-hint-mi5{flex:none;display:flex;align-items:center;gap:7px;background:transparent;border-style:dashed}
/* the mic recovery card — a running meeting without audio, fixable here */
.mtg-mic{background:#131C2E;border:1px solid rgba(245,158,11,.35);border-radius:14px;padding:13px;margin-bottom:12px;flex:none}
.mtg-mich{font-size:13px;font-weight:650;color:#FCD34D;display:flex;flex-direction:column;gap:3px}
.mtg-mich span{font-weight:400;font-size:11.5px;color:#8296B3}
.mtg-probe{font-size:11.5px;color:#A9BCD6;background:#0B1220;border-radius:8px;padding:7px 10px;margin-top:9px}
.mtg-micb{font-size:12px;color:#8296B3;line-height:1.5;margin-top:8px}
.mtg-micr{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
/* a Windows microphone name can run to 70 characters ("Microphone Array (Intel® Smart Sound Technology for Digital
   Microphones)"); in the 360px rail a nowrap button spilled out of the card (review, 2026-10-17) */
.mtg-micr .btn{white-space:normal;text-align:left;max-width:100%;line-height:1.35}
/* to-collect + files panels, dark */
.mtg-check{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.mtg-tick{display:flex;align-items:center;gap:9px;background:#131C2E;border:1.6px dashed #22304A;border-radius:10px;padding:10px 11px;font:var(--ff);font-size:12.5px;color:#A9BCD6;text-align:left;cursor:pointer}
.mtg-tick.on{border-style:solid;border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:#E8EDF5}
.mtg-tick .bx{width:17px;height:17px;border-radius:5px;border:1.6px solid #22304A;display:grid;place-items:center;flex:none;color:#fff}
.mtg-tick.on .bx{background:#10B981;border-color:#10B981}
.mtg-drop{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.6px dashed #22304A;border-radius:14px;padding:18px;color:#8296B3;cursor:pointer;text-align:center;margin-top:10px}
.mtg-drop div{font-size:13px;font-weight:600;color:#E8EDF5}
.mtg-drop span{font-size:11px}
.mtg-files{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.mtg-files .fil-row{background:#131C2E;border-color:#22304A;color:#E8EDF5}
/* THE THUMB ZONE — focus, chips with counts, the field, the foot */
.mtg-thumb{flex:none;border-top:1px solid #22304A;padding:11px 15px calc(13px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(11,18,32,0),#0B1220 26%)}
.mtg-focus{background:#131C2E;border:1px solid #22304A;border-left:3px solid #10B981;border-radius:12px;padding:11px 13px;box-shadow:none;margin-bottom:10px}
.mtg-focus.mtg-f-promise{border-left-color:#F59E0B}
.mtg-focus.mtg-f-todo{border-left-color:#38BDF8}
.mtg-focus-idle{display:none}   /* the stream already says "nothing yet" — one empty state, not two */
.mtg-fk{font-size:9.5px;font-weight:800;letter-spacing:.09em;color:#8296B3;display:flex;align-items:center;gap:8px;margin-bottom:5px}
.mtg-fk span{margin-left:auto;font-weight:700;color:#5A6E8C;letter-spacing:0}
.mtg-f-want .mtg-fk{color:#5EEAD4}
.mtg-f-promise .mtg-fk{color:#FCD34D}
.mtg-ft{font-size:14px;font-weight:600;color:#fff;line-height:1.45}
.mtg-fa{display:flex;gap:6px;margin-top:9px}
.mtg-fb{border:1px solid #22304A;background:#0B1220;border-radius:99px;padding:5px 12px;font:var(--ff);font-size:11px;font-weight:700;color:#A9BCD6;cursor:pointer}
.mtg-fb:hover{border-color:#10B981;color:#5EEAD4}
.mtg-chips{display:flex;gap:6px;margin-bottom:9px}
.mtg-chip{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #22304A;background:#131C2E;border-radius:11px;padding:9px 4px;font:var(--ff);font-size:11px;font-weight:650;color:#8296B3;cursor:pointer;min-width:0}
.mtg-chip b{font-size:10.5px;color:#E8EDF5;font-variant-numeric:tabular-nums}
.mtg-chip.on{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:#5EEAD4}
.mtg-chip.on.promise{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.12);color:#FCD34D}
.mtg-chip.on.todo{border-color:rgba(56,189,248,.5);background:rgba(56,189,248,.12);color:#7DD3FC}
.mtg-chip.on.money{border-color:rgba(232,121,249,.5);background:rgba(232,121,249,.12);color:#F0ABFC}
.mtg-cap-row{display:flex;gap:7px}
.mtg-cap-row input{flex:1;min-width:0;background:#131C2E;border:1.5px solid transparent;border-radius:11px;color:#E8EDF5;padding:10px 12px;font:var(--ff);font-size:16px;outline:none}   /* 16px or iOS zooms */
.mtg-cap-row input::placeholder{color:#5A6E8C}
.mtg-cap-row input:focus{border-color:#10B981;background:#0B1220}
.mtg-keys{display:none;gap:8px;margin-top:9px;justify-content:center}
.mtg-keys span{font-size:9.5px;color:#5A6E8C;display:inline-flex;align-items:center;gap:4px}
.mtg-keys kbd{font-family:ui-monospace,Consolas,monospace;font-size:10px;color:#A9BCD6;background:#131C2E;border:1px solid #22304A;border-bottom-width:2px;border-radius:5px;padding:2px 6px}
.mtg-sfoot{display:flex;align-items:center;justify-content:center;gap:14px;padding:11px 0 0;background:transparent;border:0}
.mtg-round{width:44px;height:44px;border-radius:50%;border:1px solid #22304A;background:#131C2E;color:#8296B3;display:grid;place-items:center;cursor:pointer;flex:none;position:relative}
.mtg-round i{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);font-style:normal;font-size:8.5px;font-weight:700;color:#0B1220;background:#8296B3;border-radius:7px;padding:1px 5px;font-variant-numeric:tabular-nums}
.mtg-round.on{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:#5EEAD4}
.mtg-round.on i{background:var(--accent);color:var(--on-solid)}
.mtg-big-btn{width:54px;height:54px;border-radius:50%;border:0;background:#1B2740;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.mtg-big-btn.resume{background:#10B981;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 40%,transparent)}
.mtg-stop{flex:none;padding:12px 18px;font-size:12.5px;border-radius:13px}
/* the interrupted card, matched to the dark surface (v237 shipped it light) */
.mtg-int{background:#131C2E;border:1px solid rgba(244,63,94,.35);border-radius:16px;padding:16px;color:#E8EDF5;margin:4px 0}
.mtg-int h4{margin:0 0 6px;font-size:15.5px;color:#fff}
.mtg-int p{margin:0;font-size:13px;color:#A9BCD6;line-height:1.55}
.mtg-int p b{color:#fff}
.mtg-int-safe{display:flex;align-items:center;gap:7px;font-size:12px;color:#5EEAD4;background:color-mix(in srgb,var(--accent) 10%,transparent);border:0;border-radius:9px;padding:8px 11px;margin-top:12px}
.mtg-int-acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.mtg-int-acts .btn{flex:1;min-width:150px}
.mtg-int-close{display:flex;justify-content:center;margin-top:14px}
.mtg-int-close .btn{color:#A9BCD6}
/* THE BAR — the miniature (overrides MI-1's skin, deliberately, in this
   one region; MI-1 keeps placement only) */
.mtg-bar{border-radius:16px;padding:11px 13px;gap:10px;box-shadow:0 14px 34px rgba(9,16,28,.4)}
.mtg-bar .mtg-tm{font-size:15px;font-weight:600;letter-spacing:-.02em}
.mtg-said{font-style:italic;color:#A9BCD6;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:768px){.mtg-bar{border-radius:14px;margin:0 8px}}
/* ==== THE DESKTOP DOCK (contract "at the desk"): the screen stops being a
   blackout and becomes a 360px rail; the CRM stays fully usable beside it.
   Expand stays hers: this is the DEFAULT at a desk, not the only option —
   the same ⌄ minimize returns to the bar as always. ==== */
@media(min-width:1024px){
  #mtg-screen{left:auto;width:360px;border-left:1px solid #22304A;box-shadow:-18px 0 44px rgba(9,16,28,.35)}
  body.mtg-open #main{margin-right:360px;transition:margin-right .2s ease}
  .mtg-clock{font-size:36px}
  .mtg-keys{display:flex}
  .mtg-sfoot{gap:12px}
}
@media(max-width:420px){
  .mtg-clock{font-size:38px}
  .mtg-stop{padding:11px 13px;font-size:12px}
  .mtg-sfoot{gap:10px}
}

/* ============================================================
   CP-3 · THE DECK COMPOSES (contract §2). The composer is the SAME one the
   modal mounts — these rules only re-lay it out for a card: no modal
   padding, a shorter editor, and a footer that wraps instead of scrolling.
   ============================================================ */
.ck-comp .fl{margin-bottom:10px}
.ck-comp .re-body{min-height:132px;max-height:340px;overflow-y:auto}
.ck-comp-sms textarea{width:100%;min-height:104px}
.ck-count{color:var(--t3);font-weight:500;font-size:11px}
.ck-cstat{margin-top:9px;font-size:12px;color:var(--t2)}
.ck-cstat:empty{display:none}
.ck-cfoot{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:11px;padding-top:11px;border-top:1px solid var(--border)}
.ck-cfoot .ck-cclear{margin-left:auto;color:var(--t3)}
.ck-full{margin-top:10px;font-size:11.5px;color:var(--t3)}
.ck-full a{color:var(--accent2);cursor:pointer;font-weight:600}
.ck-full a:hover{text-decoration:underline}
@media(max-width:640px){
  .ck-comp .re-body{min-height:112px}
  .ck-cfoot .ck-cclear{margin-left:0}
}

/* CP-3b — every record row is a door (interlink law). Rows with a page
   navigate; rows without one expand in place to show the whole entry,
   which is what was actually missing behind the 150-character truncation. */
.cp-rowd{cursor:pointer;position:relative}
.cp-rowd:hover{background:var(--bg)}
.cp-rb span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-row.exp .cp-rb span{-webkit-line-clamp:unset;display:block;white-space:pre-wrap}
.cp-ropen{flex:none;color:var(--t3);opacity:0;transition:opacity .12s;display:grid;place-items:center;width:20px}
.cp-ropen svg{transform:rotate(180deg)}
.cp-rowd:hover .cp-ropen{opacity:.7}
.cp-row.exp .cp-ropen svg{transform:rotate(0deg)}

/* ============================================================
   CP-4 · THE INLINE SCHEDULER (contract §3). The real month, her real
   availability, booked without leaving the page. Every height is bounded:
   a month is six rows and the slot list scrolls inside itself.
   ============================================================ */
.cks{font-size:13px}
.cks-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cks-mh{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.cks-mh b{font-size:13.5px;flex:1;text-align:center}
.cks-nav{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--t2);cursor:pointer;font-size:15px;line-height:1;flex:none}
.cks-nav:hover{border-color:var(--accent);color:var(--accent2)}
.cks-today{border:0;background:var(--bg);color:var(--t2);border-radius:99px;padding:4px 10px;font:var(--ff);font-size:10.5px;font-weight:700;cursor:pointer;flex:none}
.cks-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:9.5px;font-weight:800;color:var(--t3);margin-bottom:4px}
.cks-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cks-d{border:0;background:none;font:var(--ff);font-size:12px;color:var(--t1);padding:7px 0;border-radius:9px;cursor:pointer;font-variant-numeric:tabular-nums}
.cks-d:hover:not(:disabled){background:var(--bg)}
.cks-d.off,.cks-d:disabled{color:#cbd5e1;cursor:default}
.cks-d.today{box-shadow:inset 0 0 0 1px var(--border);font-weight:700}
.cks-d.on{background:var(--sb);color:#fff;font-weight:800}
.cks-pad{visibility:hidden}
.cks-right{display:flex;flex-direction:column;min-width:0}
.cks-lbl{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.cks-durs{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.cks-dur{border:1px solid var(--border);background:var(--card);border-radius:99px;padding:4px 10px;font:var(--ff);font-size:10.5px;font-weight:700;color:var(--t2);cursor:pointer}
.cks-dur.on{border-color:var(--accent);color:var(--accent2);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.cks-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:168px;overflow-y:auto;margin-bottom:11px}
.cks-s{border:1px solid var(--border);background:var(--card);border-radius:9px;padding:8px 4px;font:var(--ff);font-size:12px;font-weight:600;color:var(--t1);cursor:pointer}
.cks-s:hover{border-color:var(--accent)}
.cks-s.on{background:var(--accent);border-color:var(--accent);color:var(--on-solid);font-weight:800}
.cks-note{font-size:12px;color:var(--t3);background:var(--bg);border-radius:9px;padding:10px 12px;margin-bottom:11px;line-height:1.5}
.cks-in{width:100%;background:var(--bg);border:1.5px solid transparent;border-radius:10px;padding:9px 12px;font:var(--ff);font-size:13px;color:var(--t1);margin-bottom:9px}
.cks-in:focus{outline:none;border-color:var(--accent);background:var(--card)}
.cks-chk{display:flex;gap:9px;align-items:flex-start;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 11px;margin-bottom:10px;font-size:11.5px;color:var(--t2);cursor:pointer;line-height:1.45}
.cks-chk input{margin-top:1px;flex:none;width:15px;height:15px;accent-color:var(--accent)}
.cks-book{width:100%;justify-content:center}
.cks-done{display:flex;align-items:center;gap:11px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:11px;padding:10px 13px;margin-bottom:14px;color:#166534;flex-wrap:wrap}
.cks-done b{display:block;font-size:12.5px}
.cks-done span{display:block;font-size:11px;color:#15803d}
.cks-done>div{flex:1;min-width:150px}
@media(max-width:720px){
  .cks-grid{grid-template-columns:1fr;gap:14px}
  .cks-slots{max-height:none}
}
/* CP-6 — the per-row menu button. Present always (so rows do not jump on
   hover) but quiet until the row is under the cursor. */
.cp-rkb{flex:none;width:26px;height:26px;border-radius:8px;border:0;background:none;color:var(--t3);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s,background .12s}
.cp-rowd:hover .cp-rkb{opacity:1}
.cp-rkb:hover{background:var(--bg);color:var(--t1)}
.cp-rkb:focus-visible{opacity:1;outline:2px solid var(--accent)}
@media(hover:none){.cp-rkb{opacity:.55}}

/* ============================================================
   CP-7 · NOTES AS A TIMELINE (contract §6). Day headers, a rail, a card per
   note, attachments inline. Capped at ten with "show earlier" — the same
   no-grow law the record obeys.
   ============================================================ */
.note-tl{padding:14px 16px 12px}
.note-day{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin:14px 0 8px}
.note-tl>.note-day:first-child{margin-top:0}
.note-e{position:relative;padding-left:18px;margin-bottom:12px}
.note-e:last-child{margin-bottom:0}
/* the rail itself is the border on the entry, so it cannot fall out of step
   with the entries the way a separate absolutely-positioned line would */
.note-e::before{content:"";position:absolute;left:4px;top:6px;bottom:-12px;width:2px;background:var(--border)}
.note-e:last-child::before{bottom:auto;height:12px}
.note-dot{position:absolute;left:0;top:5px;width:10px;height:10px;border-radius:50%;background:#cbd5e1;border:2px solid var(--card);z-index:1}
.note-e.on .note-dot{background:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.note-eh{display:flex;align-items:center;gap:8px;margin-bottom:5px;min-height:22px}
.note-eh b{font-size:11.5px;font-weight:700;color:var(--t2)}
.note-ed{font-size:10.5px;color:var(--t3)}
.note-kb{margin-left:auto;width:24px;height:24px;border-radius:7px;border:0;background:none;color:var(--t3);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s}
.note-e:hover .note-kb{opacity:1}
.note-kb:hover{background:var(--bg);color:var(--t1)}
@media(hover:none){.note-kb{opacity:.55}}
.note-card{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:11px 13px;box-shadow:var(--sh)}
.note-e.on .note-card{border-color:#bbf7d0;background:#f0fdf4}
.note-atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.note-att{display:inline-flex;align-items:center;gap:6px;max-width:220px;border:1px solid var(--border);background:var(--bg);border-radius:99px;padding:4px 11px;font:var(--ff);font-size:11px;font-weight:600;color:var(--t2);cursor:pointer}
.note-att span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-att:hover{border-color:var(--accent);color:var(--accent2)}
.note-more{font-size:11.5px;color:var(--t3);padding:10px 0 0 18px}
.note-more a{color:var(--accent2);cursor:pointer;font-weight:600}
/* the legacy field: one line until she asks for it */
.note-legh{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--t3);cursor:pointer}
.note-legh span{flex:1;min-width:0}
.note-legh b{font-size:10.5px;font-weight:700;color:var(--accent2)}
.note-legb{display:none;margin-top:9px}
.note-legacy.open .note-legb{display:block}

/* ============================================================
   CP-8 · THE RAIL AND THE HEADER (contract §1 + §8b).
   THE COLOUR LAW: neutral by default; colour is spent only on what is
   WRONG or URGENT. A score is not an emotion; a company is not a warning.
   ============================================================ */
.ck-chips .badge.cp-stage{background:var(--hover);color:var(--t1);border:1px solid var(--border)}
.ck-chips .badge.cp-stage:hover{border-color:var(--accent);color:var(--accent2)}
.ck-score{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--t2);background:var(--hover);border:1px solid var(--border);border-radius:99px;padding:2px 10px}
.ck-score b{font-weight:800;color:var(--t1)}
/* the logo plate is WHITE, never the accent — his call: a logo has its own
   colours and a green plate behind it fights every one of them */
/* THE INITIALS WERE ALWAYS THERE — WHITE ON WHITE (Abdul, live 2026-08-24:
   "why is there no initials for customer name profile?"). This rule quieted
   the avatar to the card surface but inherited `color:#fff` from .ck-av, so
   a person with no scanned card wore an empty box. Quiet was the right
   intent; invisible was not. The semantic triad keeps it quiet AND legible,
   and is guaranteed to hold its contrast in both themes — which a literal
   never is. */
.ck-head .ck-av,.ck-head .ck-avatar{background:var(--accent-bg);border:1px solid var(--border);color:var(--accent-tx)}
/* a scanned card covers the whole tile, so the tint must not show at its edges */
.ck-head .ck-av-img{background:var(--card)}
/* tags behind a counter */
.ck-tagchip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--t2);background:#f1f5f9;border:1px solid var(--border);border-radius:99px;padding:3px 10px;cursor:pointer;font-family:inherit}
.ck-tagchip:hover{border-color:var(--accent);color:var(--accent2)}
.ck-tagchip.on{background:var(--t1);color:var(--card);border-color:var(--t1)}
.ck-tagrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
/* the company line in the Contact card */
.cp-logo{width:18px;height:18px;border-radius:4px;object-fit:contain;background:var(--card);border:1px solid var(--border);flex:none}
.cp-lnk{color:var(--t1);font-weight:600;cursor:pointer}
.cp-lnk:hover{color:var(--accent2);text-decoration:underline}
.cp-cnt{font-variant-numeric:tabular-nums}
/* the portal line inside Website Studio */
.wb-portal-why{display:block;font-size:10.5px;color:var(--t3);margin-top:3px}

/* CP-4b — THE DAY VIEW. The same slots the API returned, positioned by
   time instead of listed, with what is already booked drawn beside them.
   Scrolls inside itself; the deck never grows with the day. */
.cks-vt{display:flex;gap:3px;margin-left:auto}
.cks-vb{border:1px solid var(--border);background:var(--card);border-radius:8px;padding:3px 9px;font:var(--ff);font-size:10.5px;font-weight:700;color:var(--t3);cursor:pointer}
.cks-vb.on{background:var(--t1);border-color:var(--t1);color:var(--card)}
.cks-day{position:relative;margin:0 0 10px;padding-left:46px;max-height:300px;overflow-y:auto;background:var(--bg);border-radius:10px}
.cks-hr{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--border)}
.cks-hr span{position:absolute;left:6px;top:-7px;font-size:9.5px;font-weight:700;color:var(--t3);background:var(--bg);padding:0 3px}
.cks-busy{position:absolute;left:50px;right:6px;background:repeating-linear-gradient(45deg,#e2e8f0,#e2e8f0 6px,#eef2f7 6px,#eef2f7 12px);border-radius:7px;padding:3px 8px;overflow:hidden}
.cks-busy b{font-size:10.5px;font-weight:700;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cks-free{position:absolute;left:50px;right:6px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:7px;padding:3px 9px;cursor:pointer;overflow:hidden;transition:box-shadow .12s}
.cks-free:hover{box-shadow:var(--sh);border-color:var(--accent)}
.cks-free b{font-size:11px;font-weight:700;color:var(--t1)}
.cks-free i{font-style:normal;font-size:10px;color:var(--t3);margin-left:6px}
.cks-free.on{background:var(--accent);border-color:var(--accent)}
.cks-free.on b,.cks-free.on i{color:#fff}
.cks-key{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--t3);margin-bottom:11px;flex-wrap:wrap}
.cks-key span{width:10px;height:10px;border-radius:3px;display:inline-block}
.cks-key .k-free{background:var(--accent)}
.cks-key .k-busy{background:#e2e8f0}
/* the avatar's card image sits OVER the initials, so a missing or expired
   object leaves the initials showing rather than an empty box */
.ck-av-img{position:relative;overflow:hidden}
.ck-av-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ============================================================
   #71 · THE INFINITE DATE AXIS. The body scrolls BOTH ways; the time
   gutter is pinned; the header rides a track the scroll handler moves by
   transform (two scrollers would drift apart). --cols is what is in the
   DOM, --vis is what fills the screen — three pages of columns, one page
   visible, and the window shifts under her without a seam.
   ============================================================ */
.cal-inf .cal-track{overflow:hidden}
.cal-inf .cal-head,.cal-inf .cal-adrow{grid-template-columns:54px repeat(var(--cols,7),calc((100% - 54px)/var(--vis,7)))}
.cal-inf .cal-body{grid-template-columns:54px repeat(var(--cols,7),calc((100% - 54px)/var(--vis,7)));overflow-x:auto;overflow-y:auto;scrollbar-width:thin;overscroll-behavior-x:contain;scroll-padding-left:54px}
/* the gutter stays put in BOTH axes, above the columns sliding under it */
.cal-inf .cal-times{position:sticky;left:0;z-index:3;background:var(--card);box-shadow:1px 0 0 var(--border)}
.cal-inf .cal-head>.cal-gmt,.cal-inf .cal-adrow>div:first-child{position:sticky;left:0;z-index:3;background:var(--card)}
/* the corner has to COVER its cell to hide what slides under it: .cal-gmt is align-self:end, so it was only as tall as
   its one line of text and the day header showed above it. It fills the cell and keeps its label at the bottom.
   (Its sideways position is held by calSyncTrack, not by sticky: the row is moved by a transform, not scrolled.) */
.cal-inf .cal-head>.cal-gmt{align-self:stretch;display:flex;align-items:flex-end}
/* a flick lands on a day rather than mid-column */
.cal-inf .cal-col{scroll-snap-align:start}
.cal-inf .cal-body{scroll-snap-type:x proximity}
@media(max-width:768px){ .cal-inf .cal-body{scroll-snap-type:x mandatory} }

/* ---- #71 fix · A CONSTANT HEADER (Abdul: "as i scroll left and right the
   header with dates becomes larger and smaller, its flickering").
   The all-day strip used to be as tall as the tallest chip stack in the
   WINDOW — so every window shift brought a different set of days, changed
   that height, and resized the header under her. Geometry that depends on
   which data happens to be loaded will always flicker when the data moves.
   The strip is a FIXED height now: one row of chips, each on one line, and
   a day with more scrolls inside its own cell. ---- */
.cal-inf .cal-adrow{height:30px;min-height:30px}
.cal-inf .cal-ad-cell{height:30px;flex-wrap:nowrap;overflow-x:hidden;overflow-y:auto;align-items:center;scrollbar-width:none}
.cal-inf .cal-ad-cell::-webkit-scrollbar{display:none}
.cal-inf .cal-ad{flex:0 1 auto;min-width:0;line-height:16px}
/* and the date row itself cannot grow either */
.cal-inf .cal-hcell{height:56px;box-sizing:border-box;overflow:hidden}
/* the socials block in the Contact card — set profiles only, plus one way in */
.cp-soc{display:flex;align-items:center;gap:8px;padding:10px 0 2px;border-top:1px solid var(--border);margin-top:4px}
.cp-soc-l{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);margin-right:2px}
.cp-soc-a{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:var(--t2);background:var(--bg)}
.cp-soc-a:hover{color:var(--accent2);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.cp-soc-add{width:28px;height:28px;border-radius:8px;border:1px dashed var(--border);background:none;color:var(--t3);display:grid;place-items:center;cursor:pointer}
.cp-soc-add:hover{border-color:var(--accent);color:var(--accent2)}
/* provenance lines — quiet by default, loud only when sending is blocked */
.cp-prov{font-size:11.5px;color:var(--t3)}
.cp-prov>svg{color:var(--t3)}
.cp-prov-block{color:var(--danger)}
.cp-prov-block>svg{color:var(--danger)}

/* ============================================================
   PW-5 · THE ENGAGEMENTS WORKSPACE + THE STAGE PLAYBOOK
   The board is the dashboard lane widened: same derivation, no cap.
   Columns scroll sideways; each column scrolls its own cards; the page
   itself never grows with the work.
   ============================================================ */
.eng-tabs{display:flex;gap:4px;margin-bottom:14px}
.eng-tb{background:none;border:0;padding:6px 14px;border-radius:999px;font:var(--ff);font-size:12.5px;font-weight:700;color:var(--t3);cursor:pointer}
.eng-tb:hover{background:var(--bg);color:var(--t1)}
.eng-tb.on{background:var(--t1);color:var(--card)}
.eng-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.eng-bcol{flex:0 0 258px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rlg);padding:9px}
.eng-bh{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:1px 4px 9px}
.eng-bh b{margin-left:auto;font-size:11.5px;color:var(--t1)}
.eng-bcards{max-height:62vh;overflow-y:auto;scrollbar-width:thin}
.eng-bcard{position:relative;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:9px 11px;margin-bottom:7px;cursor:pointer;box-shadow:var(--sh);transition:transform .12s}
.eng-bcard:hover{transform:translateY(-1px)}
.eng-bcard.paused{border-left-color:var(--t3);opacity:.82}
.eng-bcard b{display:block;font-size:12.5px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}
.eng-bcard span{display:block;font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eng-bcard i{display:block;font-style:normal;font-size:10.5px;color:var(--t3);margin-top:3px;line-height:1.35}
/* the client's latest move (2026-09-29): its own line, the accent text token so it reads as THEIR action */
.eng-bcard .eng-btouch{display:flex;align-items:center;gap:5px;font-style:normal;font-size:10.5px;font-weight:600;color:var(--accent-tx);margin-top:5px;line-height:1.35;min-width:0}
.eng-bcard .eng-btouch svg{flex-shrink:0}.eng-bcard .eng-btouch span{display:inline;color:inherit;font-size:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eng-bkb{position:absolute;top:6px;right:6px;width:22px;height:22px;border:0;background:none;color:var(--t3);border-radius:6px;display:grid;place-items:center;cursor:pointer;opacity:0}
.eng-bcard:hover .eng-bkb{opacity:1}
.eng-bkb:hover{background:var(--bg);color:var(--t1)}
@media(hover:none){.eng-bkb{opacity:.55}}
.eng-bmh{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:6px 10px 4px}
.eng-b-empty{text-align:center;padding:44px 20px;color:var(--t3)}
.eng-b-empty h3{font-size:15px;color:var(--t1);margin:10px 0 5px}
.eng-b-empty p{font-size:12.5px;max-width:420px;margin:0 auto 14px;line-height:1.55}
/* the playbook banner on the hub */
.eng-pb{margin:14px 0;border-left:3px solid var(--warn)}
.eng-pb-done{border-left-color:var(--accent)}
.eng-pb-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--t2)}
.eng-pb-h b{font-size:13px;color:var(--t1)}
.eng-pb-h span{flex:1;min-width:200px}
.eng-pb-acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.eng-pb-adv{font-size:10.5px;color:var(--t3);margin-top:9px;display:flex;align-items:center;gap:5px}
.eng-pb-adv svg{transform:rotate(180deg)}
.eng-pb-cov,.eng-pb-quiet{font-size:11.5px;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:9px;padding:8px 10px;margin-top:10px}
.eng-pb-hand{display:flex;flex-direction:column;gap:5px;margin-top:11px}
.eng-hv{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px 10px;font:var(--ff);font-size:12px;color:var(--t2);text-align:left;cursor:pointer}
.eng-hv i{width:17px;height:17px;border-radius:5px;border:1.6px dashed var(--warn);display:grid;place-items:center;flex:none;color:#fff}
.eng-hv.on{color:var(--t1)}
.eng-hv.on i{background:var(--accent);border:1.6px solid var(--accent)}
/* PHONE — PW-6, contract §7 note 13, the board half of it: the kanban's
   columns become full-width stage SECTIONS stacked down the page.
   .eng-bcards loses its own max-height on purpose. A vertical scroller
   nested inside the page's vertical scroller is the worst thing you can put
   under a thumb: the finger picks one of the two and the other appears
   frozen. On desktop the column caps its height so the board fits a screen;
   on a phone the SECTION is the whole point and the page does the scrolling. */
@media(max-width:768px){
  .eng-board{flex-direction:column;overflow-x:visible;gap:10px}
  .eng-bcol{flex:0 0 auto;width:100%}
  .eng-bcards{max-height:none;overflow-y:visible}
  .eng-bcard b{white-space:normal}
  .eng-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .eng-tb{flex:none}
}

/* THE AUDIO IS SAFE state — never styled like an error, because it is not
   one: the recording exists and is one tap from being put back together. */
.mrec-noaud.recoverable{background:var(--accent-bg);color:var(--accent-tx);border-color:transparent;display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.6}
.mrec-noaud.recoverable b{color:var(--accent-tx)}
.mrec-noaud.recoverable .btn{margin-left:auto}

/* a row whose file was never uploaded — stated, not hidden, and one tap from repair */
.wb-out.missing{border-color:rgba(154,107,12,.4);background:var(--mid-bg)}
.wb-out.missing .wb-outic{color:var(--mid)}
/* THE INVISIBLE ROW-EATER (2026-09-20, his "these portal links are taking too
   much vertical room"). Every proposal row carries this placeholder for the
   "No file in storage" warning, and flex-basis:100% is meant to drop it onto
   its own line. That only works in a row that WRAPS. The build page mounts
   .wb-portal-mgr.wide, whose rows did not — so an EMPTY, invisible span
   claimed the whole row's width and the title (flex:1 1 0%, min-width:0)
   was crushed to 0px: "Website / template / · / Light / & / Editorial", six
   lines, 254px tall, beside a blank gap where the span sat. Measured in
   tools/portal-live.cjs; the first diagnosis, made by READING this file,
   blamed a different variant entirely.
   An empty placeholder takes NO space, in any variant, wrapped or not. */
.cpt-missrow{flex-basis:100%}
.cpt-missrow:empty{display:none}
.cpt-miss{display:block;margin-top:6px;font-size:11.5px;color:var(--mid);background:var(--mid-bg);border-radius:8px;padding:7px 10px;line-height:1.5}

/* ============================================================
   OUTPUTS AS A FILE MANAGER (Abdul 2026-08-26: "like google drive file
   management, the icon styles and view modes ... a very native experince").
   Tiles and list share one set of tokens so the two views are the same
   object seen two ways, never two designs.
   ============================================================ */
.wbo-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.wbo-sort{background:var(--input);border:1px solid var(--border);color:var(--t2);border-radius:9px;padding:6px 9px;font:var(--ff);font-size:12px;cursor:pointer}
.wbo-views{display:inline-flex;background:var(--input);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.wbo-vb{width:32px;height:30px;display:grid;place-items:center;background:none;border:0;color:var(--t3);cursor:pointer;transition:background .15s,color .15s}
.wbo-vb:hover{color:var(--t1)}
.wbo-vb.on{background:var(--accent-bg);color:var(--accent-tx)}
/* the file's face — one colour per kind, readable in both themes */
.wbf{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none}
.wbf-brief{background:var(--info-bg);color:var(--info-tx)}
.wbf-tpl{background:var(--accent-bg);color:var(--accent-tx)}
.wbf-est{background:var(--purple-bg);color:var(--purple-tx)}
.wbf-panel{background:var(--warn-bg);color:var(--warn-tx)}
/* ---- tiles ---- */
.wbo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px}
.wbo-tile{border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:default}
.wbo-tile:hover{border-color:var(--accent);box-shadow:var(--shmd);transform:translateY(-1px)}
.wbo-thumb{position:relative;height:88px;display:grid;place-items:center;background:var(--hover);border-bottom:1px solid var(--border)}
.wbo-kb{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .15s}
.wbo-tile:hover .wbo-kb{opacity:1}
.wbo-body{padding:11px 13px 13px}
.wbo-body>b{display:block;font-size:13.5px;line-height:1.35;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbo-meta{font-size:11px;color:var(--t3);margin-top:6px;line-height:1.5}
.wbo-tile .wbo-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
/* ---- list ---- */
.wbo-list{display:flex;flex-direction:column}
.wbo-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:11px;border-bottom:1px solid var(--border);transition:background .12s}
.wbo-row:last-child{border-bottom:0}
.wbo-row:hover{background:var(--hover)}
.wbo-row .wbf{width:34px;height:34px;border-radius:9px}
.wbo-name{flex:1;min-width:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.wbo-name b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbo-row .wbo-meta{margin:0;flex:none;white-space:nowrap}
.wbo-acts{display:flex;align-items:center;gap:6px;flex:none}
@media(max-width:640px){.wbo-row .wbo-meta{display:none}.wbo-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
/* a file whose bytes were never uploaded states it and is never styled as ready */
.wbo-tile.missing,.wbo-row.missing{border-color:rgba(154,107,12,.45);background:var(--warn-bg)}
.wbo-tile.missing .wbo-thumb{background:transparent}
.wbo-tile.missing .wbf,.wbo-row.missing .wbf{background:var(--warn-bg);color:var(--warn-tx)}
/* published, but no link minted — the client cannot open any of it */
.wbo-warn{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--warn-bg);border:1px solid rgba(154,107,12,.3);border-radius:12px;padding:11px 13px;margin-bottom:12px;font-size:12.5px;color:var(--warn-tx);line-height:1.55}
.wbo-warn span{flex:1;min-width:200px}

/* Upload outputs: one row per chosen file, each with its own deliverable */
.wbu-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--border)}
.wbu-row:first-of-type{border-top:0}
.wbu-f{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbu-f i{font-style:normal;color:var(--t3);font-size:11px}
.wbu-row select{flex:0 0 auto;max-width:52%}

/* ── FIND THEIR SOCIALS ────────────────────────────────────────────
   The Find control sits INSIDE the empty field and disappears the moment
   anything is typed — :placeholder-shown is the whole mechanism, so there is
   no second copy of "is this field empty?" to fall out of step. */
.sf-wrap{position:relative;display:block}
.sf-wrap>input{width:100%;padding-right:78px}
.sf-find{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 9px;border-radius:7px;cursor:pointer;
  color:var(--accent);background:var(--hover);border:1px solid var(--border)}
.sf-find:hover{background:var(--accent);color:var(--on-solid);border-color:var(--accent)}
.sf-find:disabled{opacity:.6;cursor:default}
.sf-wrap>input:not(:placeholder-shown)~.sf-find{display:none}
.sf-res,#sf-result{display:flex;flex-direction:column;gap:6px}
.sf-head{font-size:11.5px;color:var(--t2);padding:2px 0}
.sf-head i{color:var(--t3);font-style:normal}
.sf-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--border);border-radius:9px;background:var(--card)}
.sf-row.sf-dim{opacity:.72}
.sf-plat{flex:0 0 78px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t3)}
.sf-body{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--t1)}
.sf-body i{flex-basis:100%;font-style:normal;font-size:11px;color:var(--t3)}
.sf-acts{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.sf-chip{font-size:10px;font-weight:700;padding:2px 6px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}
.sf-per{background:rgba(59,130,246,.14);color:#3b82f6}
.sf-co{background:var(--hover);color:var(--t2)}
/* tier 2 — a candidate that came from a web search, not the client's own
   site. Amber, because it is a lead to confirm, not the owner's declaration. */
.sf-web{background:rgba(245,158,11,.14);color:#d97706}
.sf-conf{font-size:10px;font-weight:700;padding:2px 6px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}
.sf-high{background:rgba(34,197,94,.15);color:#16a34a}
.sf-medium{background:rgba(245,158,11,.15);color:#b45309}
.sf-low{background:var(--hover);color:var(--t3)}
.sf-note{font-size:11.5px;color:var(--t2);padding:6px 2px;display:flex;align-items:center;gap:6px}
.sf-note.sf-bad{color:var(--danger)}
.sf-note.sf-dim2{color:var(--t3)}
.sf-weak summary{font-size:11.5px;color:var(--t3);cursor:pointer;padding:4px 2px}
.sf-weak[open] summary{margin-bottom:5px}
.sf-all{padding-top:2px}
.sf-fresh{animation:sfFresh 2.2s ease}
@keyframes sfFresh{0%,70%{box-shadow:0 0 0 2px var(--accent)}100%{box-shadow:none}}
@media(max-width:520px){.sf-plat{flex-basis:100%}.sf-row{flex-wrap:wrap}}

/* ============ P1 THE ACTIVITY NET (2026-08-28) ============ */
.an-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.an-chip{font:600 12px var(--ff);padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--t2);cursor:pointer}
.an-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
.an-chip .an-ct{font-size:10px;opacity:.75;margin-left:2px}
.an-row{display:flex;align-items:flex-start;gap:10px;padding:9px 2px;border-bottom:1px solid var(--border)}
.an-row:last-child{border-bottom:none}
.an-ic{flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--t3);margin-top:1px}
.an-ic.an-portal{color:var(--accent)}
.an-ic.an-money{color:#b8860b}
.an-main{flex:1;min-width:0}
.an-t{font-size:13px;color:var(--t1);font-weight:600}
.an-touch{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-left:6px}
.an-s{font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-door{color:var(--t2);font-weight:600}
.an-when{flex:none;font-size:11px;color:var(--t3);margin-top:2px}

/* ============ MW-1 THE TRIAGE LENS (Mail Wave) ============ */
.mw-lens{display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.mw-door{font:600 12px var(--ff);padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--t2);cursor:pointer}
.mw-door.on{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
.mw-door.slopd.on{background:var(--t3);border-color:var(--t3)}
.mw-door .mw-n{font-size:10px;opacity:.8;margin-left:2px}
.mw-teach{display:inline-flex;align-items:center;gap:4px;margin-left:10px;font-size:11px;color:var(--t3)}
.mw-teach-b{font:600 10.5px var(--ff);padding:2px 8px;border-radius:99px;border:1px solid var(--border);background:var(--bg);color:var(--t3);cursor:pointer}
.mw-teach-b.on{border-color:var(--accent);color:var(--accent)}
.mw-teach-b:hover{color:var(--t1)}

/* ============ MW-2 THE CONVERSATION STRIP (Mail Wave) ============ */

/* ============ MW-7 THE REVIEW QUEUE (Mail Wave) ============ */
.sch-review{border-color:var(--accent) !important;margin-bottom:14px}
.sch-rev-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border)}
.sch-rev-row:last-child{border-bottom:none}
.sch-rev-row .sch-main{flex:1;min-width:0}
.sch-rev-row .sch-t{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sch-rev-row .sch-s{font-size:12px;color:var(--t3)}

/* ============ MW-4 ATTACHMENT INTELLIGENCE (Mail Wave) ============ */
.mbx-att-b,.mbx-att-ai{border:1px solid var(--border);background:var(--bg);color:var(--t2);border-radius:7px;cursor:pointer;font:600 10.5px var(--ff);padding:3px 8px;display:inline-flex;align-items:center;gap:4px}
.mbx-att-ai{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.mbx-att-b:hover,.mbx-att-ai:hover{color:var(--t1)}
.mw-ainote{margin:6px 0 10px;padding:8px 12px;border-left:3px solid #5B9BD5;background:var(--bg);border-radius:0 8px 8px 0;font-size:12.5px;color:var(--t2)}
.mw-ain-tag{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5B9BD5;margin-bottom:3px}

/* ============================================================
   THE COMMS REBUILD (signed 2026-08-28: "go 1,2,3,4,5,6,7,8,9,10 build it
   all") — channel tabs, the two-section inbox, the toolbar overflow, the
   CRM rail section, the Calls channel, the dialer, the live call bar.
   One-accent rule (his ruling: "so many colors"): each pane keeps ONE green
   moment; danger red only on Delete/End, the app's own convention.
   ============================================================ */
/* channel tab badges */
.comms-tab-n{font-size:10px;font-weight:700;background:var(--accent);color:var(--on-solid);border-radius:9px;padding:1px 6px;margin-left:6px;min-width:16px;text-align:center;display:inline-block}

/* the two-section inbox: All | Promotions (replaces .mw-lens/.mw-door) */
.mw-tabs{display:flex;border-bottom:1px solid var(--border)}
.mw-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;font:600 12px var(--ff);color:var(--t3);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .12s}
.mw-tab:hover{color:var(--t1)}
.mw-tab.on{color:var(--accent2);border-bottom-color:var(--accent)}
.mw-tab .mw-n{font-size:10px;font-weight:700;color:var(--t3)}
.mw-tab.on .mw-n{color:var(--accent2)}
.mw-tabnote{padding:8px 14px;font-size:10.5px;color:var(--t3);border-bottom:1px solid var(--border);background:var(--bg)}

/* the CRM section in the one mail rail */
.mbx-rail-sec{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);padding:12px 10px 4px;border-top:1px solid var(--border);margin-top:8px}
.mbx-f-b.mbx-f-q{background:var(--warn)}
/* Review & scheduled is a chat (2026-09-10): people in the list column, the
   conversation in the pane (scheduled.js schOutboxHTML + schPaneHTML) */
.sch-lnote{display:flex;align-items:center;gap:6px;margin:0 10px 6px;padding:7px 10px;border-radius:9px;font-size:11.5px;font-weight:600;
  background:var(--warn-bg);color:var(--warn-tx)}
.sch-lpad{padding:0 16px}
.sch-prow .mbx-r-prev{display:block}
.sch-chip{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:4px;font-size:10.5px;font-weight:700;
  border-radius:999px;padding:2px 8px;background:var(--bg);color:var(--t2)}
.sch-chip.s-review{background:var(--warn-bg);color:var(--warn-tx)}
.sch-chip.s-pending{background:var(--info-bg);color:var(--info-tx)}
.sch-chip.s-sent{background:var(--accent-bg);color:var(--accent-tx)}
.sch-chip.s-failed{background:var(--danger-bg);color:var(--danger-tx)}
.sch-chip.s-cancelled{background:var(--bg);color:var(--t3)}
#mbx.mbx-crm .mbx-pane{overflow:hidden}
.sch-pane{height:100%;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
.sch-pane .txv-head{flex-shrink:0;margin-bottom:0;padding-bottom:10px;border-bottom:1px solid var(--border)}
.sch-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;margin:0 -20px;padding:12px 20px 10px;background:var(--bg)}
.sch-foot{flex-shrink:0;border-top:1px solid var(--border);margin:0 -20px;padding:10px 20px 12px;background:var(--card)}
.sch-later{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.sch-foot .sch-cadence{margin:0;font-size:11px;line-height:1.5;color:var(--t3)}
/* the NOW line: the past above it, what is still to go below it */
.sch-now{display:flex;align-items:center;gap:10px;margin:16px 0 8px;color:var(--accent-tx);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.sch-now::before,.sch-now::after{content:"";flex:1;height:1px;background:color-mix(in oklab,var(--accent) 45%,transparent)}
.sch-revday{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--warn-tx)}
/* one bubble per message; the wrap stacks the bubble, its note and its verbs on the right */
.sch-bw{flex-direction:column;align-items:flex-end}
.sch-bub{max-width:min(78%,520px)}
.sch-bk{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.85;margin-bottom:3px}
.sch-bs{font-weight:700;margin-bottom:2px}
.sch-bt{white-space:pre-wrap}
/* states: sent is the house outbound bubble; the rest say what they are */
.sch-bub.s-pending{background:var(--card);color:var(--t1);border:1.5px dashed var(--accent);box-shadow:none}
.sch-bub.s-review{background:var(--accent-bg);color:var(--t1);border:1.5px dashed var(--accent);box-shadow:none}
.sch-bub.s-failed{background:var(--danger-bg);color:var(--t1);border:1px solid var(--danger)}
.sch-bub.s-cancelled{background:var(--card);color:var(--t3);border:1px solid var(--border);box-shadow:none}
.sch-bub.s-pending .bub-m,.sch-bub.s-review .bub-m,.sch-bub.s-cancelled .bub-m{color:var(--t2)}
.sch-bub.s-failed .bub-m{color:var(--danger-tx)}
.sch-bub.s-pending .sch-bk,.sch-bub.s-review .sch-bk{color:var(--accent-tx);opacity:1}
.sch-bnote{max-width:min(78%,520px);margin-top:4px;font-size:11px;color:var(--t3);text-align:right}
.sch-bacts{display:flex;gap:6px;margin-top:5px}

/* the toolbar overflow menu */
.mbx-more-wrap{position:relative;display:inline-flex}
.mbx-t.on{color:var(--accent2)}
.mbx-t-ai svg{color:var(--accent2)}
/* PLACED, NOT NESTED: mbxPlaceMore() measures the button and sets top/left, because an absolute menu inside .mbx-pane (overflow auto) was clipped by that box and painted under the message list (measured 2026-09-19). Fixed puts it above every pane and outside every scroller. */
.mbx-menu{position:fixed;top:0;left:0;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shlg);min-width:190px;padding:5px;z-index:1300;display:flex;flex-direction:column;gap:1px}
.mbx-mi{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font:500 12px var(--ff);color:var(--t2);background:none;border:none;text-align:left;width:100%;cursor:pointer}
.mbx-mi:hover{background:var(--hover);color:var(--t1)}
.mbx-mi svg{color:var(--t3)}

/* ---------- THE CALLS CHANNEL (states 6, 8, 10) ---------- */
.clv-row{display:flex;flex-direction:row;align-items:center;gap:10px}
.clv-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.clv-ic.in{background:var(--accent-bg);color:var(--accent-tx)}
.clv-ic.out{background:rgba(59,130,246,.12);color:var(--info-tx,#1d4ed8)}
.clv-ic.miss{background:rgba(220,38,38,.10);color:var(--danger-tx,#b91c1c)}
.clv-ic.vm{background:rgba(59,130,246,.12);color:var(--info-tx,#1d4ed8)}
.clv-ri{flex:1;min-width:0;display:block}
.clv-setup{margin-top:10px;padding:8px 10px;font-size:10.5px;color:var(--t3);border:1px solid var(--border);border-radius:9px;background:var(--bg)}
/* tokens, not literals: this card sat WHITE inside dark mode (his catch on
   the call transcript) — only MAIL bodies stay deliberately white */
.clv-white{background:var(--bg);color:var(--t1);border:1px solid var(--border);border-radius:12px;padding:13px 15px;font-size:12.5px;line-height:1.6;margin-bottom:10px}
.clv-play{display:flex;align-items:center;gap:10px;margin-bottom:10px}
/* a call whose recording arrived after the fact: the offer to transcribe sits where the summary will land */
.mw-tabnote.clv-tx{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--t2)}
.mw-tabnote.clv-tx .btn{flex:none}
.clv-play-n{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}

/* the dialer */
.clv-dial{max-width:330px;margin:0 auto;padding:22px 16px;display:flex;flex-direction:column;align-items:center}
.clv-num{width:100%;text-align:center;font-size:24px;font-weight:600;color:var(--t1);min-height:36px;font-variant-numeric:tabular-nums}
.clv-ph{color:var(--t3);font-weight:400;font-size:13px}
.clv-mt{min-height:44px;display:flex;align-items:center;justify-content:center;margin:4px 0 10px;width:100%}
.clv-match{display:inline-flex;align-items:center;gap:9px;padding:6px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);cursor:pointer;max-width:100%;font:var(--ff);color:var(--t1)}
.clv-match:hover{background:var(--hover)}
.clv-mi{text-align:left;min-width:0}
.clv-mi b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clv-mi span{font-size:10.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.clv-pad{display:grid;grid-template-columns:repeat(3,64px);gap:11px;justify-content:center}
.clv-key{width:64px;height:54px;border-radius:13px;background:var(--bg);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;transition:background .1s}
.clv-key:hover{background:var(--hover)}
.clv-key:active{transform:scale(.96)}
.clv-key b{font-size:18px;font-weight:600;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums}
.clv-key span{font-size:8px;font-weight:600;letter-spacing:.14em;color:var(--t3);text-transform:uppercase;line-height:1}
.clv-acts{display:flex;align-items:center;gap:16px;margin-top:14px}
.clv-callbtn{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--on-solid);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent);transition:background .15s}
.clv-callbtn:hover{background:var(--accent2)}
.clv-side{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);background:none;border:none;cursor:pointer}
.clv-side:hover{background:var(--hover);color:var(--t1)}
.clv-side.hidden{visibility:hidden}
.clv-foot{margin-top:12px;font-size:10.5px;color:var(--t3);text-align:center}

/* ---------- THE LIVE CALL BAR (state 9) + CALL POP (state 7) ---------- */
/* ================= TABS (2026-10-07) =================
   His ask: "just like Google Chrome ... you can dismiss it, you can right click the tab and you can duplicate it".
   In the normal flow on purpose: it occupies its own band and pushes the page down, never floats over a page
   header, which is the exact complaint he made about the call banner. Sticky so it survives a long scroll, with a
   z-index BELOW the search panel and the modals, because the one thing he could not do during a call was click a
   search result that was behind the chrome. */
#tabs-w{position:relative;z-index:20;background:var(--bg)}
#tabs-w[hidden]{display:none}
.tb-strip{display:flex;align-items:stretch;gap:2px;padding:7px 30px 0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border)}
.tb-strip::-webkit-scrollbar{display:none}
.tb{display:flex;align-items:center;gap:7px;padding:8px 10px 9px;border-radius:11px 11px 0 0;background:none;border:1px solid transparent;border-bottom:none;color:var(--t2);font:600 12.5px var(--ff);white-space:nowrap;cursor:pointer;max-width:200px;min-width:96px;position:relative;flex:0 1 auto}
/* WHERE ONE TAB ENDS. Without this the strip reads as one run of words and close crosses: at 1x the x of Calendar
   sits closer to the Contacts icon than to its own label, so the click that closes one tab looks like the click
   that opens the next. A hairline in the gap, dropped beside the active and hovered tabs, is what a browser does. */
/* currentColor, not --border: --border is tuned to separate a white card from the grey page and vanishes when it
   sits ON the grey page, which is where this hairline lives. currentColor is the tab's own text tone, so it reads
   in light and dark with one declaration. */
.tb + .tb::before{content:"";position:absolute;left:-2px;top:9px;bottom:9px;width:1px;background:currentColor;opacity:.24}
.tb.on::before,.tb.on + .tb::before,.tb:hover::before,.tb:hover + .tb::before{display:none}
.tb:hover{background:var(--hover);color:var(--t1)}
.tb:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* dragging a tab along the strip: the one being carried fades, and the gap opens on the side it will land */
.tb.dragging{opacity:.45}
.tb.tb-before{box-shadow:inset 2px 0 0 var(--accent2)}
.tb.tb-after{box-shadow:inset -2px 0 0 var(--accent2)}
.tb.on{background:var(--card);border-color:var(--border);color:var(--t1)}
/* the hairline that joins the active tab to the page under it, the way a browser does */
.tb.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--card)}
.tb-ic{display:inline-flex;flex:none;color:var(--t3)}
.tb-ic svg{width:14px;height:14px;display:block}
.tb.on .tb-ic{color:var(--accent2)}
.tb-l{overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:6px;color:var(--t3);flex:none;margin-left:2px}
.tb-x:hover{background:var(--border);color:var(--t1)}
/* the person on the other end of a live call, three tabs away */
.tb.live .tb-ic{color:var(--danger)}
.tb.live .tb-ic svg{animation:tbpulse 1.4s infinite}
@keyframes tbpulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ============ THE CALL DOCK (queue A, 2026-10-08) ============
   His brief: "the call screen locks the CRM", "I can't dismiss it, minimize it or maximize it", "I can't go to
   the profile", "the incoming popup fades the screen and freezes it". Every one of those was
   `.sp-ovl{position:fixed;inset:0;background:rgba(5,10,7,.82)}`: a scrim over the whole app for the length of a
   call. The dock floats clear instead. Nothing behind it is dimmed, covered or disabled.
   Geometry from the mockup he has already seen, tokens from this stylesheet so it follows both themes. */
#dock-w{position:fixed;right:18px;bottom:18px;z-index:1250;max-width:calc(100vw - 36px)}
#dock-w[hidden]{display:none}
/* while a call is on the glass the floating + hides: the dock sits on top of it, and the same menu lives in the
   header as + New, so the door is not lost, only the one that is covered */
body.dk-live .fab{display:none}
.dk{width:310px;max-width:100%;background:var(--card);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shlg);overflow:hidden;animation:dkIn .16s ease}
.dk.wide{width:372px}
.dk.ring{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shlg)}
@keyframes dkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dk{animation:none}}
.dk-h{display:flex;align-items:center;gap:10px;padding:13px 13px 11px}
.dk-av{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--accent-bg);
  color:var(--accent-tx);font:800 12px var(--ff)}
.dk-who{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
/* THE NAME IS A LINK IN EVERY STATE (his A3: "I can't even go to the person's profile from the call"). */
.dk-name{font:800 13.5px var(--ff);color:var(--t1);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
a.dk-name:hover{color:var(--accent-tx);text-decoration:underline}
.dk-sub{font-size:11.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-st{font:700 9.5px var(--ff);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-tx);flex:none}
.dk-t{font:700 12px var(--ff);color:var(--t2);font-variant-numeric:tabular-nums;flex:none}
/* --t2, not --t3: a thin chevron in the lightest text tone is invisible on a card, and these two are the
   only way to tuck the call away or make it bigger */
.dk-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--t2);background:none;
  border:none;cursor:pointer;flex:none}
.dk-ic:hover{background:var(--hover);color:var(--t1)}
/* WHAT THE CRM KNOWS, before she answers. A phone shows a number; this shows the stage, what is open and when
   they last paid, in the one moment those facts are worth anything. All of it is already in memory, so the
   screen never waits. */
.dk-chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 13px 11px;margin-top:-4px}
.dk-chips span{font:600 10.5px var(--ff);padding:3px 8px;border-radius:999px;background:var(--hover);color:var(--t2);white-space:nowrap}
/* an incoming call: the only moment the avatar earns a pulse */
.dk-av.ring{background:var(--accent-soft);color:var(--accent-tx);animation:cbpulse 1.6s infinite}
@media (prefers-reduced-motion:reduce){.dk-av.ring{animation:none}}
/* OUTGOING: she is waiting on someone else, so the screen says what is happening rather than showing a timer
   counting up from nothing */
.dk-ringing{display:flex;align-items:center;gap:9px;margin:0;padding:0 13px 11px;font:600 12px var(--ff);color:var(--t2)}
.dk-wave{display:inline-flex;align-items:flex-end;gap:3px;height:13px}
.dk-wave i{width:3px;height:5px;border-radius:2px;background:var(--accent2);animation:dkWave 1s infinite ease-in-out}
.dk-wave i:nth-child(2){animation-delay:.15s}
.dk-wave i:nth-child(3){animation-delay:.3s}
@keyframes dkWave{0%,100%{height:5px;opacity:.5}50%{height:13px;opacity:1}}
@media (prefers-reduced-motion:reduce){.dk-wave i{animation:none;height:9px}}
/* WHERE THE SOUND COMES OUT: a real picker where the browser can honour it, and a sentence where it cannot */
.dk-audio{padding:0 13px 11px}
.dk-route{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:10px;
  border:1px solid var(--border);background:var(--input);color:var(--t2);font:600 11.5px var(--ff);cursor:pointer}
.dk-route:hover{border-color:var(--accent);color:var(--t1)}
.dk-route span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
/* WRAPS. Five actions do not fit one 310px row, and flex:1 made them squeeze until the last label was cut by
   the card instead of moving to a second line. A button you cannot read is not a button. */
.dk-acts{display:flex;flex-wrap:wrap;gap:6px;padding:0 13px 11px}
.dk-acts .dk-b{flex:1 1 84px;min-width:84px}
.dk-b{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px;border-radius:11px;
  background:var(--hover);color:var(--t2);font:700 8.5px var(--ff);letter-spacing:.05em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer}
.dk-b:hover{color:var(--t1)}
.dk-b.on{background:var(--accent-soft);color:var(--accent-tx);border-color:var(--accent)}
.dk-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 13px 11px}
.dk-pad button{padding:10px 0;border-radius:10px;border:1px solid var(--border);background:var(--input);
  color:var(--t1);font:600 15px var(--ff);cursor:pointer}
.dk-pad button:hover{border-color:var(--accent)}
.dk-foot{padding:0 13px 13px}
.dk-end{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--danger);
  color:#fff;border:none;border-radius:11px;padding:11px;font:700 12.5px var(--ff);cursor:pointer}
.dk-end:hover{filter:brightness(1.08)}
.dk-ring{display:flex;gap:8px;padding:0 13px 13px}
.dk-ring button{flex:1;border:none;border-radius:11px;padding:11px;font:700 12.5px var(--ff);color:#fff;cursor:pointer}
.dk-no{background:var(--danger)}
.dk-yes{background:var(--accent2)}
.dk-note{margin:0;padding:0 13px 12px;font-size:10.5px;color:var(--t3)}
/* TUCKED AWAY: still says who, still says how long, still ends it in one tap, still opens their file. */
.dk-pill{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);
  border-radius:999px;box-shadow:var(--shlg);padding:7px 9px 7px 13px;max-width:100%}
.dk-pill .dk-name{font-size:12.5px}
.dk-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);animation:cbpulse 1.4s infinite;flex:none}
@media (prefers-reduced-motion:reduce){.dk-dot{animation:none}}
.dk-up,.dk-pend{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:none;cursor:pointer;flex:none}
/* --t1, not --t2: inside a pale disc the lighter tone read as an empty button at 1x */
.dk-up{background:var(--hover);color:var(--t1)}
.dk-up:hover{color:var(--t1)}
.dk-pend{background:var(--danger);color:#fff}
/* ON A PHONE it is a sheet across the bottom: thumb reachable, and the page above it still scrolls. */
@media(max-width:760px){
  #dock-w{right:10px;left:10px;bottom:calc(72px + env(safe-area-inset-bottom,0px));max-width:none}
  .dk,.dk.wide{width:100%}
  .dk-pill{width:100%}
}

/* THE NEW TAB PAGE (2026-10-08). Big targets, because he asked for "bigger buttons for sections what to open",
   and because this is the one screen whose whole job is to be clicked. Tokens only, so it follows both themes. */
.nt-wrap{max-width:900px;margin:0 auto;padding:18px 0 40px}
.nt-h{font-size:22px;font-weight:700;margin:0 0 4px}
.nt-sub{font-size:12.5px;color:var(--t3);margin:0 0 26px}
.nt-g{margin-bottom:24px}
.nt-gl{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);margin-bottom:9px}
.nt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.nt-b{display:flex;align-items:center;gap:12px;padding:16px 16px;min-height:64px;border-radius:14px;
  background:var(--card);border:1px solid var(--border);color:var(--t1);font:600 14px var(--ff);cursor:pointer;
  text-align:left;transition:border-color .12s,transform .12s,box-shadow .12s}
.nt-b:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shmd)}
.nt-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nt-ic{display:inline-flex;flex:none;color:var(--accent2)}
.nt-ic svg{width:22px;height:22px;display:block}
.nt-l{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.nt-grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:8px}
  .nt-b{padding:14px 13px;min-height:58px;font-size:13px}
  /* the fixed bottom bar ate the last card: Marketing sat half behind it at 375 */
  .nt-wrap{padding:10px 0 calc(84px + env(safe-area-inset-bottom,0px))}}
.tb-add{align-self:center;margin-left:4px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--t3);background:none;border:none;cursor:pointer;flex:none}
.tb-add:hover{background:var(--hover);color:var(--t1)}
/* 112, not 76. At 76 a five-tab strip on a phone read "B. C C B. N": the icon and the close cross took the
   width and the name had none left. The strip scrolls sideways, so there is no reason to squeeze a label into
   nothing; a tab you cannot read is not a tab. */
@media(max-width:760px){.tb-strip{padding:6px 12px 0}.tb{min-width:112px;max-width:160px;padding:7px 8px 8px;font-size:12px}}
/* and the close cross only on the tab you are ON. It costs 20px, which at 112px is a fifth of the label: every
   inactive tab read as a cut-off word so the one tab you cannot close could carry a button. Mobile browsers do
   the same. The menu (long press, or the strip menu) still closes any tab. */
@media(max-width:760px){.tb:not(.on) .tb-x{display:none}}
#callbar-w{position:relative;z-index:10}
.callbar{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shmd);padding:8px 14px;margin:0 30px 4px}
.cb-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:cbpulse 1.4s infinite;flex:none}
/* the assistant is on the line (2026-09-07): same bar, her colour on the dot so a glance says who is talking */
.callbar.cb-agent .cb-dot{background:var(--accent2)}
.callbar.cb-agent .cb-note{max-width:34ch}
@keyframes cbpulse{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.cb-dot{animation:none}}
/* WHO YOU ARE ON THE PHONE WITH NEVER YIELDS. It was min-width:0 and the only shrinkable child in the row, so a
   94-character nowrap note and six buttons squeezed it to a box 0px wide and 54px tall: the name and the number
   spilled out of it down three lines and ran under the call timer. Measured 2026-10-07, on a 1440 screen, with
   every other sweep green. The note gives up room now, and below 1100 it already leaves entirely. */
.cb-who{flex:0 0 auto;min-width:120px;max-width:230px;display:flex;flex-direction:column;overflow:hidden}
.cb-who b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-who span{font-size:10.5px;color:var(--t3)}
.cb-time{font-size:12px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums}
.cb-state{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--warn);background:rgba(217,119,6,.12);border-radius:6px;padding:2px 8px}
.cb-sp{flex:1}
.cb-btn{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:4px 9px;border-radius:9px;color:var(--t2);font:600 8.5px var(--ff);letter-spacing:.04em;text-transform:uppercase;background:none;border:1px solid transparent;cursor:pointer;transition:all .12s}
.cb-btn svg{color:var(--t3)}
.cb-btn:hover{background:var(--hover);color:var(--t1)}
.cb-btn.on{background:var(--accent-bg);color:var(--accent-tx)}
.cb-btn.on svg{color:var(--accent2)}
.cb-end{display:inline-flex;align-items:center;gap:6px;background:var(--danger);color:#fff;font:700 11.5px var(--ff);padding:7px 14px;border-radius:10px;border:none;cursor:pointer}
.cb-end:hover{filter:brightness(1.1)}
.cb-note{font-size:10px;color:var(--t3);white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.cb-note{display:none}}
.cb-pop{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shlg);margin:6px 30px 4px;max-width:520px;margin-left:auto;overflow:hidden}
.cb-pop-t{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--border)}
.cb-ring{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;letter-spacing:.07em;color:var(--accent2)}
.cb-pop-g{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border)}
.cb-pop-g div{padding:8px 14px;border-bottom:1px solid var(--border)}
.cb-pop-g div:nth-child(odd){border-right:1px solid var(--border)}
.cb-pop-g span{display:block;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.cb-pop-g b{font-size:12px;font-weight:600}
.cb-pop-l{grid-column:1/3}
.cb-pop-a{display:flex;align-items:center;gap:8px;padding:10px 14px}
@media(max-width:768px){.callbar{margin:0 10px 4px;flex-wrap:wrap}.cb-pop{margin:6px 10px 4px}}

/* ---------- TEXTS three-pane (state 5, matched to the signed mockup) ---------- */
/* .mbx-row's BASE is flex-direction:COLUMN (mail rows stack their lines) —
   an avatar row must set the axis back or the avatar stacks on top (found
   live, 2026-08-28: computed display was flex and still looked broken —
   the direction, not the display, was the bug). */
.txv-row{display:flex;flex-direction:row;align-items:center;gap:10px}
.txv-ri{flex:1;min-width:0;display:block}
.txv-prev{color:var(--t3);font-weight:400}
.mbx-row.unread .txv-prev{color:var(--t2);font-weight:500}
.txv-av-x{background:var(--border);color:var(--t2)}
.txv-pane{display:flex;flex-direction:column;min-height:520px}
.txv-head{display:flex;align-items:center;gap:11px}
.txv-who{min-width:0;flex:1}
.txv-sub{font-size:11px;color:var(--t3)}
/* the person is the door: avatar + name + number, one link to the profile (2026-09-10) */
.txv-id{display:flex;align-items:center;gap:11px;flex:1;min-width:0;color:inherit;text-decoration:none;border-radius:12px;padding:4px 10px 4px 4px;margin:-4px 0 -4px -4px;transition:background .15s}
.txv-id:hover{background:var(--hover)}
.txv-id:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.txv-id .txv-who{display:flex;flex-direction:column}
.txv-nm{display:flex;align-items:center;gap:6px;min-width:0}
/* flex:0 1 auto, not the base flex:1 — the glyph sits RIGHT NEXT to the name,
   not pushed to the far edge (caught in the round-1 screenshot) */
.txv-nm .mbx-p-subj{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txv-nm svg{flex:none;color:var(--t3);transition:color .15s}
.txv-id:hover .txv-nm svg{color:var(--acc)}
.txv-scroll{flex:1;max-height:none;min-height:260px}
.txv-pane .thr-cmp{border-top:1px solid var(--border)}

/* ---------- TEXTS: NATIVE MESSAGING (2026-08-28, his ruling: "scrolled to
   the bottom of the chat like a texting app … copy it from builddirect but
   keep the templates, dictaction button, polish, language and send later").
   The BuildDirect chat pattern, ported: the SHELL is viewport-bounded, the
   thread is the flex:1 scroller INSIDE it, the composer is pinned and on
   screen from the first paint. overflow-anchor:none is BD's paid-for scar:
   the browser's scroll-anchoring fights explicit scroll-to-bottom. ---------- */
#txv.mbx{height:calc(100dvh - 250px);min-height:460px}
#txv .mbx-list{overflow-y:auto}
#txv .mbx-pane{overflow:hidden;display:flex;flex-direction:column}
.txv-pane{height:100%;min-height:0;flex:1;display:flex;flex-direction:column}
.txv-head{flex-shrink:0}
.txv-scroll{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;padding:12px 16px 8px;background:var(--bg)}
.txv-pane .thr-cmp{flex-shrink:0;padding:10px 14px}
/* BD bubble geometry: 20px radius, 4px tail, real min-width floor */
.txv-scroll .bub{min-width:44px;max-width:80%;padding:9px 14px;border-radius:20px;font-size:13.5px;line-height:1.4}
.txv-scroll .bub.in{border-radius:20px 20px 20px 4px}
.txv-scroll .bub.out{border-radius:20px 20px 4px 20px}
.txv-scroll .thr-day{text-align:center;font-size:11px;color:var(--t3);margin:10px 0 8px}
@media(max-width:768px){#txv.mbx{height:calc(100dvh - 200px)}}
/* Calling from: a small label over the line picker, centred like a phone app's "call from" */
.clv-from{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:12px;max-width:100%}
.clv-from-k{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.clv-from .lp-menu{left:50%;transform:translateX(-50%)}

/* the one-liner composer row (2026-08-28): the sms templates bar joins the
   action row via display:contents; its in-flow picker takes the full row
   width BELOW the buttons, so it never covers the field (Q136). */
.thr-bar-one .mt-bar-s{display:contents}
.thr-bar-one .mt-pop{order:99;flex-basis:100%;margin-top:4px}

/* the call brief: summary card + action-item checklist (his ruling) */
.clv-brief{border:1px solid var(--border);border-radius:12px;margin-top:10px;overflow:hidden}
.clv-brief-h{display:flex;align-items:center;gap:7px;padding:9px 13px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;background:var(--bg)}
.clv-brief-h span{font-weight:500;font-size:11px;color:var(--t3)}
/* the call score (2026-09-07): went well / what to fix, read as a checklist */
.clv-rv-h{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);margin:0 0 4px}.clv-rv-h.fix{color:var(--accent2)}
.clv-rv{margin:0 0 10px;padding-left:18px;font-size:13px;line-height:1.45}.clv-rv li{margin:2px 0}.clv-rv.fix li::marker{color:var(--accent2)}
/* grader v2: line-anchored findings — class chip, her quoted words, the line she should have said */
.clv-rv-cls{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent2)}.clv-rv q{color:var(--t2);font-style:italic}.clv-rv q::before,.clv-rv q::after{content:'\201C'}.clv-rv q::after{content:'\201D'}.clv-rv-fix{color:var(--t1);margin:1px 0 4px}.clv-rv-lat{font-size:12px;color:var(--t3);margin:4px 0 0}
/* the exam (synthetic caller): verdict chips, run rows */
.ex-st{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:6px;padding:2px 8px;background:var(--accent-bg);color:var(--accent-tx)}.ex-st.fail{background:var(--danger-bg,rgba(220,38,38,.12));color:var(--danger-tx)}.ex-st.none,.ex-st.queued,.ex-st.ended{background:transparent;color:var(--t3);border:1px solid var(--border)}.ex-st.calling{background:var(--accent);color:var(--on-solid)}
.ex-score{font-size:12px;font-weight:700;color:var(--t2);margin-left:6px}.ex-n{display:inline-block;min-width:18px;color:var(--t3);font-weight:700}.ex-run{flex-direction:column;align-items:flex-start;gap:4px}.ex-when{font-size:11.5px;color:var(--t3);margin-left:6px}.ex-fails{font-size:12px;color:var(--danger)}.ex-fails.ok{color:var(--t2)}.ex-link{font-size:12px;color:var(--accent-tx);text-decoration:underline}.ex-heard{margin-top:4px;padding-left:10px;border-left:2px solid var(--border);font-size:12px;color:var(--t2);font-style:italic}.ms-plan-chip.no{background:var(--danger-bg,rgba(220,38,38,.12));color:var(--danger)}.ms-plan-chip.dim{background:transparent;color:var(--t3);border:1px solid var(--border)}
.clv-brief-h svg{color:var(--accent2)}
.clv-brief-b{padding:11px 13px;font-size:12.5px;color:var(--t2);line-height:1.55}
.clv-task{display:flex;align-items:flex-start;gap:9px;padding:8px 13px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--t1)}
.clv-task:last-child{border-bottom:none}
.clv-task svg{color:var(--t3);flex:none;margin-top:2px}

/* the glance tiles (2026-08-28 dashboard redesign): Recent emails + Texts.
   Rows are name · preview · time; the schedule tile's fixed 46px time slot
   does not apply here — the name gets its own width, the preview flexes. */
.da-mail .da-row b,.da-texts .da-row b{flex:0 0 auto;max-width:132px;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:normal}
.da-mail .da-row span,.da-texts .da-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.da-mail .da-row i,.da-texts .da-row i{font-style:normal;font-size:10.5px;color:var(--t3);flex:none;font-variant-numeric:tabular-nums}
.da-row.da-unread b{font-weight:700}
.da-row.da-unread::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;align-self:center;margin-right:2px}

/* ============ THE DASHBOARD v3 (signed 2026-08-28) — the row anatomy ============
   One builder (dlRow), one skeleton everywhere: visual · two lines · meta.
   His redline that bought it: "no consistency, text painted on". */
.dash-g3{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px;margin-bottom:12px}
.dash-floor{display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:start}
.dash-stack{display:grid;gap:12px}
.dash-stack .card{margin-bottom:0}
.cl-lbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.cl-n{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.dl-door{margin-left:auto;font-size:11px;font-weight:600;color:var(--accent2);cursor:pointer;white-space:nowrap}
.ch .dl-door{margin-left:auto}
.dl-row{display:flex;align-items:center;gap:11px;padding:9px 16px;border-bottom:1px solid var(--border);cursor:pointer;position:relative;transition:background .12s;min-height:54px}
.dl-row:last-child{border-bottom:none}
.dl-row:hover{background:var(--hover)}
.dl-row::after{content:"\203A";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--accent2);font-weight:700;opacity:0;transition:opacity .12s}
.dl-row:hover::after{opacity:1}
.dl-tx{flex:1;min-width:0}
.dl-tx b{display:block;font-size:12.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-tx span{display:block;font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.dl-mt{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;padding-right:8px}
.dl-mt time{font-size:10.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.dl-row.unread .dl-tx b{font-weight:700}
.dl-row.unread::before{content:"";position:absolute;left:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dl-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.dl-av.dh1{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent2)}
.dl-av.dh2{background:rgba(59,130,246,.12);color:#1d4ed8}
.dl-av.dh3{background:rgba(139,92,246,.12);color:#6d28d9}
.dl-av.dh4{background:rgba(217,119,6,.12);color:#92400e}
:root[data-theme="dark"] .dl-av.dh2{color:#93c5fd}
:root[data-theme="dark"] .dl-av.dh3{color:#c4b5fd}
:root[data-theme="dark"] .dl-av.dh4{color:#fcd34d}
.dl-ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
.dl-ic.mut{background:var(--input);color:var(--t2);border:1px solid var(--border)}
.dl-ic.dl-ok{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent2)}
.dl-ic.dl-info{background:rgba(59,130,246,.12);color:#1d4ed8}
.dl-ic.dl-violet{background:rgba(139,92,246,.12);color:#6d28d9}
.dl-ic.dl-warn{background:rgba(217,119,6,.12);color:#92400e}
.dl-ic.dl-bad{background:rgba(220,38,38,.10);color:#b91c1c}
:root[data-theme="dark"] .dl-ic.dl-info{color:#93c5fd}
:root[data-theme="dark"] .dl-ic.dl-violet{color:#c4b5fd}
:root[data-theme="dark"] .dl-ic.dl-warn{color:#fcd34d}
:root[data-theme="dark"] .dl-ic.dl-bad{color:#fca5a5}
.dl-chip{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2.5px 8px;border-radius:7px;flex:none}
.dl-chip.ok{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent2)}
.dl-chip.warn{background:rgba(217,119,6,.12);color:#92400e}
.dl-chip.bad{background:rgba(220,38,38,.10);color:#b91c1c}
.dl-chip.mut{background:var(--input);color:var(--t2);border:1px solid var(--border)}
:root[data-theme="dark"] .dl-chip.warn{color:#fcd34d}
:root[data-theme="dark"] .dl-chip.bad{color:#fca5a5}
.dl-mini{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--t3);border:1px solid var(--border)}
.dl-mini:hover{color:var(--t1);background:var(--hover)}
/* the glance tiles + the complete-day schedule */
.dl-tile{display:flex;flex-direction:column}
.dl-tile .dl-body{flex:1}
.dl-tile .dl-row{min-height:48px;padding-top:7px;padding-bottom:7px}
.dl-sched{border-left:3px solid var(--accent)}
.dl-srow{display:flex;align-items:center;gap:10px;padding:4.5px 16px;cursor:pointer}
.dl-srow:hover{background:var(--hover)}
.dl-tm{flex:0 0 54px;font-size:11px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;background:var(--input);border:1px solid var(--border);border-radius:7px;text-align:center;padding:3px 0}
.dl-srow.now .dl-tm{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:transparent;color:var(--accent2)}
.dl-st{flex:1;min-width:0;font-size:12.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* portals two-column grid */
.dash-pgrid{display:grid;grid-template-columns:1fr 1fr}
.dash-pgrid .dl-row:nth-child(odd){border-right:1px solid var(--border)}
/* money band */
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.dl-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:12px 15px;cursor:pointer;transition:background .12s;display:flex;gap:12px;align-items:center;position:relative}
.dl-kpi:hover{background:var(--hover)}
.dl-kpi::after{content:"\203A";position:absolute;right:10px;color:var(--accent2);font-weight:700;opacity:0}
.dl-kpi:hover::after{opacity:1}
.dl-kv{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.dl-kv i{font-style:normal;font-size:11px;color:var(--t3);font-weight:600}
.dl-kl{font-size:10.5px;color:var(--t3);margin-top:1px}
/* MOBILE PARITY BY CONSTRUCTION (his rider: "mobile sould have the same
   sections") — same DOM, the grids stack; nothing is trimmed away. */
@media(max-width:900px){
  .dash-g3,.dash-floor,.dash-kpis,.dash-work{grid-template-columns:1fr}
  .dash-pgrid{grid-template-columns:1fr}
  .dash-pgrid .dl-row:nth-child(odd){border-right:none}
}
/* v3 headers: label · count · door read left-to-right (the legacy .ch is
   space-between, which floated the count to the middle — found live) */
.ch:has(.cl-lbl){justify-content:flex-start;gap:8px}

/* ============ THE COMMS MOBILE AUDIT FIXES (2026-08-28) ============
   Found by walking every comms screen at phone width: */
@media(max-width:900px){
  /* 1 · Review & scheduled: grid-column 2/4 has no column 2 on a one-column
     phone grid — the outbox overflowed sideways. */
  .mbx.mbx-crm .mbx-list{grid-column:auto}
  /* the people list fills the phone until a person is tapped; then the
     conversation owns the screen (the reading rules hide the list) */
  .mbx.mbx-crm:not(.mbx-reading) .mbx-list{display:block}
  #mbx.mbx-crm.mbx-reading .mbx-pane{display:block}
  /* a phone's mail grid is height:auto, so the pane has no bounded height to
     scroll inside: the conversation flows with the page instead */
  #mbx.mbx-crm .mbx-pane{overflow:visible}
  .sch-pane{height:auto}
  .sch-scroll{flex:none;overflow:visible}
  .sch-bub,.sch-bnote{max-width:88%}
  /* 2 · the CRM section label sat in the now-horizontal rail as a broken
     block chip — it reads as an inline divider label instead. */
  .mbx-rail-sec{border-top:none;border-left:1px solid var(--border);margin:0 2px;padding:0 8px 0 12px;align-self:center;white-space:nowrap}
  /* 3 · texts: the chat must own the phone screen in reading mode */
  #txv.mbx{height:calc(100dvh - 150px)}
  #txv .mbx-pane{overflow:hidden}
  #txv.mbx-reading .mbx-pane{display:flex;flex-direction:column}
  /* the LIST is the phone screen until a chat opens (2026-09-10, his "Pick a conversation section is jsut
     getting in the way i can not see all recent texts list it should cover my screen"): the unconditional
     `#txv .mbx-pane{display:flex}` above outranked the class-level `.mbx-pane{display:none}` by ID
     specificity, so the empty pane always rendered under three rows. Same specificity here, and the list
     takes every remaining pixel and scrolls inside itself. */
  #txv:not(.mbx-reading) .mbx-pane{display:none}
  #txv:not(.mbx-reading){grid-template-rows:auto minmax(0,1fr)}
  /* the tab row carries the settings gear on phones; one door, not two */
  #txv .txv-lh-act .btn-icon[aria-label="Texting settings"]{display:none}
  /* 4 · calls: the pane exists in reading mode; the dialer (which lives in
     the list column) breathes */
  #clv.mbx-reading .mbx-pane{display:block;overflow-y:auto}
  /* phone: the band rides on top of the list; in reading mode the pane
     (a sheet) takes the whole shell, so the band steps out of the way */
  #clv.clv-ms.mbx-reading .ms-band{display:none}
  .ms-band .ms-cmd{padding:12px 12px 10px}
  .clv-dial{padding-top:10px}
}
@media(max-width:480px){
  /* 5 · the 14-action toolbar wrapped three rows deep — icon-only on small
     phones; every button already carries its title. AI reply keeps words. */
  .mbx-t span{display:none}
  .mbx-t{padding:8px 10px}
  .mbx-t-ai span{display:inline}
  .mbx-menu .mbx-mi{min-height:44px}
  .mbx-mi{font-size:13px}
}
/* mobile composer compaction (his screenshot, 2026-08-28: the one-liner
   wrapped four rows deep on a phone; header title broke mid-number) */
@media(max-width:480px){
  .txv-head .mbx-p-subj{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .txv-pane .thr-cmp{padding:8px 10px}
  .txv-pane .fl textarea{min-height:44px}
  .thr-bar-one{gap:4px}
  .thr-bar-one .btn{font-size:10.5px;padding:6px 9px}
  .thr-bar-one .polish-lang{max-width:96px}
  .thr-cnt{width:100%;text-align:right;font-size:10px}
}

/* ============ CALENDAR — THE MOCKUP SKIN (signed 2026-08-28, aa8d5d0c) ============
   Geometry rides --calpx (52 desktop / 64 phone, set inline by the grid).
   On a phone: GCal's language — rounded hour cards on the quiet ground,
   day-circle headers, the dot-and-line now marker, the month-collapse
   panel with event dots, the bottom-sheet quick create. The drag engine
   underneath is untouched. */
.cal-time,.cal-slot{height:var(--calpx,52px)}
/* a BUTTON element: without the reset the UA's white pill + border leaked
   through in both themes (Abdul 2026-09-05: "the date field its white and
   not matching the dark mode") */
.cal-title-tg{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:15px;letter-spacing:-.2px;padding:6px 10px;border-radius:10px;color:var(--t1);background:none;border:none;cursor:pointer;font-family:inherit}
.cal-title-tg:hover{background:var(--hover)}
.cal-title-tg svg{transition:transform .2s}
.cal-title-tg.open svg{transform:rotate(180deg)}
.cal-mpanel{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shmd);margin:0 0 10px;overflow:hidden;animation:calmp .22s ease}
@keyframes calmp{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cal-mpanel{animation:none}}
.mm-lg{padding:10px 8px 2px}
.mm-lg .mm-d{height:42px;border-radius:10px;font-size:12.5px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mm-dots{display:flex;gap:2px;height:4px;margin-top:1px}
.mm-dots i{width:4px;height:4px;border-radius:50%;background:var(--accent);display:block}
.mm-dots i.b{background:#3b82f6}
.cal-mstrip{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 12px;scrollbar-width:none}
.cal-mstrip::-webkit-scrollbar{display:none}
.cal-mchip{flex:none;font:600 12px var(--ff);color:var(--t2);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:6px 14px;min-height:32px}
.cal-mchip.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent2);border-color:transparent}

/* the bottom-sheet quick create (phone) */
.cal-qc-sheet{position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;width:auto !important;max-width:none !important;border-radius:22px 22px 0 0 !important;box-shadow:var(--shlg) !important;padding:6px 18px calc(18px + env(safe-area-inset-bottom)) !important;animation:calqs .24s cubic-bezier(.2,.8,.25,1)}
@keyframes calqs{from{transform:translateY(60%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.cal-qc-sheet{animation:none}}
.qc-grab{width:36px;height:4px;border-radius:2px;background:var(--border);margin:6px auto 8px}
.cal-qc-sheet .qc-title{font-size:21px}
.cal-qc-sheet .cp-l{min-height:44px;align-items:center}
.cal-qc-sheet .qc-foot .btn{min-height:44px;border-radius:999px;padding:10px 20px}

@media(max-width:900px){
  /* the grid wears the card-row look */
  .cal-body{background:var(--bg);max-height:calc(100dvh - 240px);min-height:380px}
  .cal-slot{border-top:none;background:var(--card);border-radius:10px;margin:2px 6px 2px 2px;box-shadow:var(--sh)}
  .cal-half:first-child{border-bottom:none}
  .cal-col{border-left:none}
  .cal-times{background:var(--bg)}
  .cal-time{border-top:none;font-size:10.5px;padding-top:0;transform:translateY(-7px)}
  .cal-head{border-bottom:none}
  .cal-hcell{border-left:none;padding:6px 2px}
  .cal-hcell .dn{font-size:10.5px;letter-spacing:.06em}
  .cal-hcell .dd{width:34px;height:34px;line-height:34px;border-radius:50%;margin:3px auto 0;font-size:15px}
  .cal-hcell .dd.on{width:34px;height:34px;line-height:34px;font-weight:700}
  .cal-adrow{border-bottom:none}
  /* the now marker: the mockup's dot-and-line */
  .cal-now{background:var(--t1);height:2px}
  .cal-now i{background:var(--t1);width:10px;height:10px;left:-2px;top:-4px}
  /* events: rounded with the left rail, bigger touch targets */
  .cal-ev{border-radius:10px;left:4px;right:8px;padding:5px 9px;font-size:11.5px}
  .cal-ev .s{font-size:10px;opacity:.8}
  .cal-ev-rz{height:14px}
  /* bar: 44px targets, seg pills */
  .cal-bar .btn{min-height:40px}
  .cal-seg .seg-btn{min-height:38px;padding:8px 12px}
  /* the desktop rail/toggle never renders on phones (JS gates it too) */
  .cal-rail,.cal-rail-tg{display:none}
}

/* ============ COMMS — EVERY PIXEL EARNS ITS PLACE (Abdul, live 2026-08-28:
   "i need eevry pixel perfect and designed to show maximum of ths creen its
   used for nothing extra") ============ */
/* the settings gear rides the tab row on phones only — the page header is
   gone there and Compose lives on the FAB */
.comms-gear{display:none;margin-left:auto;width:38px;height:38px;border:none;background:none;
  color:var(--t3);border-radius:10px;cursor:pointer;align-items:center;justify-content:center}
@media(max-width:768px){
  /* the title block says nothing the tab row does not — reclaim it all */
  #view-comms .ph{display:none}
  #view-comms .pc{padding-top:6px}
  .help-tip{display:none}   /* a paragraph of coaching costs a third of a phone screen */
  .comms-tabs{margin-bottom:8px}
  .comms-gear{display:flex}
}

/* ---- THE NATIVE COMPOSER (texts) — one input row, tools in a tray ---- */
.thr-inrow{display:flex;align-items:flex-end;gap:8px}
.thr-inrow textarea{flex:1;min-width:0;resize:none;border:1px solid var(--border);background:var(--input);
  color:var(--t1);border-radius:22px;padding:11px 15px;font-family:inherit;font-size:13.5px;line-height:1.4;
  max-height:120px;overflow-y:auto}
.thr-inrow textarea:focus{border-color:var(--accent);outline:none}
/* a textarea wraps its placeholder; in a one-line box the second line is cut off. One line, always. */
.thr-inrow textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thr-inrow .dict-field{flex:none;width:42px;height:42px;padding:0;border-radius:50%;justify-content:center}
.thr-inrow .dict-field span{display:none}
.thr-plus{display:none;flex:none;width:42px;height:42px;border:none;border-radius:50%;background:var(--input);
  color:var(--t2);cursor:pointer;align-items:center;justify-content:center;transition:transform .15s}
.thr-cmp.tools-open .thr-plus{background:var(--accent-bg);color:var(--accent-tx);transform:rotate(45deg)}
.thr-sendb{flex:none;display:flex;align-items:center;gap:6px;background:var(--accent);color:var(--on-solid);border:none;
  border-radius:22px;padding:0 16px;height:42px;font-family:inherit;font-weight:700;font-size:12.5px;cursor:pointer;
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent)}
.thr-sendb:disabled{opacity:.6}
/* THE SPLIT SEND (2026-09-05, his mockup approval): Send + a chevron arm
   sharing one pill; the arm's menu opens UPWARD (the composer lives at the
   bottom of the screen) with Send now, the quick times, and a custom time. */
.thr-sendwrap{position:relative;display:inline-flex;flex:none}
.thr-sendwrap .thr-sendb{border-radius:22px 0 0 22px;box-shadow:none}
.thr-sendwrap .btn-primary{border-radius:99px 0 0 99px}
.thr-sendarm{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:42px;border:none;
  background:var(--accent);color:var(--on-solid);border-left:1px solid rgba(255,255,255,.32);border-radius:0 22px 22px 0;cursor:pointer}
.thr-sendarm:hover,.thr-sendwrap .thr-sendb:hover{background:var(--accent2)}
.mf .thr-sendwrap .thr-sendarm{height:auto;align-self:stretch;border-radius:0 99px 99px 0}
.sch-menu{position:absolute;right:0;bottom:calc(100% + 8px);width:256px;background:var(--card);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shlg);padding:6px;z-index:130;text-align:left}
.sch-mi{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;font-family:inherit;font-size:12.5px;
  font-weight:600;color:var(--t1);padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left}
.sch-mi:hover{background:var(--hover)}
.sch-mdiv{height:1px;background:var(--border);margin:5px 4px}
.sch-mlabel{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:2px 10px 4px}
.sch-mcustom{display:flex;gap:6px;padding:4px 6px 2px}
.sch-mcustom input{flex:1;min-width:0;border:1px solid var(--border);border-radius:8px;background:var(--input);color:var(--t1);
  font-family:inherit;font-size:11.5px;padding:6px 8px;outline:none}
.sch-mcustom input:focus{border-color:var(--accent)}
.sch-mnote{font-size:10px;color:var(--t3);line-height:1.45;padding:6px 10px 4px}
.mt-saverow{display:flex;align-items:center;gap:8px;width:100%;border:none;border-top:1px solid var(--border);background:none;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--t2);padding:9px 12px;cursor:pointer;text-align:left}
.mt-saverow:hover{background:var(--hover);color:var(--t1)}
.thr-status{margin-top:5px;font-size:11px;color:var(--t2)}
.thr-status:empty{display:none}
@media(max-width:768px){
  /* phone: the row is the whole composer until the + asks for the tray */
  .thr-plus{display:flex}
  .thr-bar-one{display:none}
  .thr-cmp.tools-open .thr-bar-one{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px}
  .thr-sendb{width:44px;padding:0;justify-content:center;border-radius:50%}
  .thr-sendb span{display:none}
  /* split send on a phone: half-pills, not a circle */
  .thr-sendwrap .thr-sendb{border-radius:22px 0 0 22px}
  .thr-sendarm{height:44px;width:28px}
  .txv-pane .thr-cmp{padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  #txv.mbx{height:calc(100dvh - 232px);min-height:320px}
  /* AN OPEN THREAD IS THE WHOLE SCREEN — the native pattern (Google Messages
     opens a chat full-screen) and the economy ruling in one move: fixed over
     the app chrome, only the bottom nav stays. Back returns to the list. */
  #txv.mbx-reading{position:fixed;top:0;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom,0px));
    height:auto;min-height:0;z-index:120;border-radius:0;border:none}
  .txv-scroll{padding:10px 12px 6px}
  .txv-head{margin-bottom:6px;padding:8px 10px 0}
}
@media(max-width:768px){
  /* the thread head is ONE line: back · avatar · name (ellipsis) · two icon
     actions — the words "Open contact"/"Email thread" cost half the row */
  .txv-head{flex-wrap:nowrap;align-items:center;gap:8px}
  .txv-who{flex:1;min-width:0}
  .txv-head .mbx-p-subj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
  .txv-head .txv-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .txv-head .mbx-p-c,.txv-head .mbx-p-sig,.txv-head .btn{font-size:0;gap:0;line-height:0;padding:10px;border-radius:50%;flex:none;margin:0}
}

/* ---- THE CHANNEL SWITCH stays at the TOP on phones (Abdul, 2026-08-28:
   "there is already motive native bar navigation to go around the app so put
   that at the top?" — one bottom bar only, the app's own). The row goes
   full-width segmented there so each channel is a real 44px target. ---- */
@media(max-width:768px){
  .comms-tabs{display:flex;margin:0 0 8px}
  .comms-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 4px}
  .comms-tab svg{flex:none}   /* four tabs and the gear share 375px: an icon that may shrink became a dot (2026-09-26) */
}

/* ============ COMMS — THE APPROVED ANATOMY (contract states 5–11, v316) ============ */
/* texts rows: dlAv rides the same sizing as mail; NEEDS REPLY is a chip */
.txv-need{align-self:flex-start;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(217,119,6,.14);color:#92400e;border-radius:6px;padding:2px 7px;margin-top:3px}
:root[data-theme="dark"] .txv-need{color:#fcd34d}
/* UNREAD, per conversation (Abdul, 2026-09-14: "how to tell which one is opned and which one is
   not there is no per text indication"). The bold name and accent date already existed on
   .mbx-row.unread and had nothing driving them for texts; this is the dot that makes the state
   readable at a glance. The slot is always in the markup, lit or not, so reading a row never
   shifts the avatar beside it. */
.txv-dot{flex:none;width:7px;height:7px;border-radius:50%;background:transparent}
.txv-dot.on{background:var(--accent2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 18%,transparent)}
/* DID THEY OPEN THE LINK. Under an outbound bubble that carries a tracked link, and only there:
   texting has no read receipt, so a bubble without a tracked link says nothing at all. */
.bub-open{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:600;margin-top:5px;
  padding-top:5px;border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.72)}
.bub-open svg{flex:none;opacity:.85}
.bub-open.ok{color:#fff}
.bub.in .bub-open{border-top-color:var(--border);color:var(--t3)}
.bub.in .bub-open.ok{color:var(--t1)}
/* NEEDS REPLY, as words, because the badge now counts unread (2026-09-14). Amber is the same
   register the row chip wears, one step quieter: it is a standing state, not an alert. */
.txv-lh-wait{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  background:rgba(217,119,6,.14);color:#92400e;border-radius:7px;padding:3px 8px;margin-right:4px;white-space:nowrap}
:root[data-theme="dark"] .txv-lh-wait{color:#fcd34d}
/* calls rows: the approved 38px direction tiles — voicemail is VIOLET */
.clv-ic{width:38px;height:38px;border-radius:12px}
.clv-ic.vm{background:rgba(139,92,246,.14);color:#6d28d9}
:root[data-theme="dark"] .clv-ic.vm{color:#c4b5fd}
/* the detail cards: rounded, breathing, uppercase labels (state 8) */
.clv-brief{border-radius:14px;box-shadow:var(--sh);margin-top:12px}
.clv-brief-h{background:none;border-bottom:none;padding:11px 14px 0;font-size:9.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.clv-brief-h span{font-size:9.5px;letter-spacing:.09em}
.clv-brief-b{padding:7px 14px 12px;color:var(--t1);font-size:13px}
.clv-task{display:flex;align-items:center;gap:9px;padding:8px 14px;border-top:1px solid var(--border);font-size:12.5px;color:var(--t1)}
.clv-task:first-of-type{border-top:1px solid transparent;margin-top:4px}
.clv-task svg{color:var(--t3);flex:none}
.clv-brief .btn-primary.btn-xs{margin-right:12px}
/* transcript: a card that opens (state 8 — collapsed until asked) */
.clv-tr{border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh);margin-top:12px;overflow:hidden}
.clv-tr summary{display:flex;align-items:center;gap:7px;padding:11px 14px;cursor:pointer;list-style:none;
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.clv-tr summary::-webkit-details-marker{display:none}
.clv-tr summary i{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;font-size:11px}
.clv-tr .clv-white{margin:0 12px 12px;border-radius:10px}
/* the player reads as a card too */
.clv-play{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh);padding:10px 12px}
/* the CALLS detail pane reads in the app theme (Abdul 2026-09-05: "this
   section is not dark mode optimized") — the white .mbx-p-body ground is
   for MAIL only, where HTML emails assume a white page */
.mbx-p-body.clv-body{background:var(--card);color:var(--t1);color-scheme:inherit}
/* ============ THE CONVERSATION KIT (cx): the call page (2026-10-14, js/views/calls.js clv2PaneHTML) and every page that
   shares its layout (js/cxkit.js) ============
   Behind localStorage nt-callpane = 'v2', off until turned on. Tokens only, both themes. The pane measures ITSELF
   (a container query), because its width depends on the columns beside it, not on the window. */
.cx{container-type:inline-size;container-name:cx}
/* the hero band, tinted by what kind of call it was */
.cx-hero{--k:var(--accent-tx);--k-bg:var(--accent-bg);position:relative;border:1px solid var(--border);border-radius:var(--rlg);padding:18px 18px 16px;
  background:linear-gradient(135deg,var(--k-bg) 0%,transparent 62%),var(--card);box-shadow:var(--sh)}
.cx-hero.k-out{--k:var(--info-tx);--k-bg:var(--info-bg)}
.cx-hero.k-vm{--k:var(--purple-tx);--k-bg:var(--purple-bg)}
.cx-hero.k-miss{--k:var(--danger-tx);--k-bg:var(--danger-bg)}
.cx-hero-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cx-av{position:relative;width:56px;height:56px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:800;color:var(--k);background:var(--card);box-shadow:inset 0 0 0 2px var(--k-bg),var(--sh)}
.cx-av-k{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--k);color:var(--card);box-shadow:0 0 0 3px var(--card)}
.cx-who{flex:1;min-width:210px}
.cx-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--t1);line-height:1.2}
.cx-name a{color:inherit;text-decoration:none}
.cx-name a:hover{text-decoration:underline}
.cx-done{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:99px;background:var(--accent-bg);color:var(--accent-tx);font-size:11px;font-weight:700;letter-spacing:0}
.cx-co{display:flex;align-items:center;flex-wrap:wrap;gap:2px 7px;margin-top:3px;font-size:13px;font-weight:600;color:var(--t2)}
.cx-stage{padding:1px 8px;border-radius:99px;border:1px solid var(--border);background:var(--card);font-size:11px;font-weight:700;color:var(--t2)}
.cx-meta{display:flex;align-items:center;flex-wrap:wrap;gap:3px 7px;margin-top:6px;font-size:12.5px;color:var(--t2);font-variant-numeric:tabular-nums}
.cx-sep{color:var(--t3)}
.cx-kind{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--k)}
.cx-num{border:none;background:none;padding:0;font:inherit;color:inherit;cursor:copy;border-bottom:1px dashed var(--t3)}
.cx-num:hover{color:var(--t1)}
.cx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.cx-call{height:40px;padding:0 18px;border-radius:99px;font-size:14px;font-weight:700;box-shadow:var(--shmd)}
/* THE PLAYER: a drawn waveform, the played part in the call's colour */
.cx-player{--p:0%;display:flex;align-items:center;gap:14px;margin-top:16px;padding:10px 12px 10px 10px;border:1px solid var(--border);border-radius:99px;background:var(--card)}
.cx-pp{width:46px;height:46px;flex:none;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--accent);color:var(--on-solid);box-shadow:var(--shmd);transition:transform .12s}
.cx-pp:hover:not([disabled]){transform:scale(1.05)}
.cx-pp[disabled]{opacity:.45;cursor:default}
.cx-pp svg{margin-left:2px}
.cx-player[data-playing="1"] .cx-pp svg{margin-left:0}
.cx-wave{position:relative;flex:1;min-width:120px;height:44px;cursor:pointer;border-radius:6px}
.cx-wave:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cx-bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.cx-bars i{flex:1;min-width:1px;height:14%;border-radius:2px;background:var(--border);transition:height .35s ease}
.cx-played{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cx-played i{background:var(--k)}
.cx-player[data-state="loading"] .cx-bars i{animation:cx-breathe 1.2s ease-in-out infinite}
.cx-bars i:nth-child(2n){animation-delay:.3s}.cx-bars i:nth-child(3n){animation-delay:.6s}
.cx-time{flex:none;font-size:12px;color:var(--t2);font-variant-numeric:tabular-nums}
.cx-time b{color:var(--t1);font-weight:700}
.cx-speeds{flex:none;display:flex;padding:2px;border:1px solid var(--border);border-radius:99px;background:var(--bg)}
.cx-speeds button{border:none;background:none;padding:3px 9px;border-radius:99px;font:inherit;font-size:11px;font-weight:700;color:var(--t2);cursor:pointer}
.cx-speeds button.on{background:var(--card);color:var(--t1);box-shadow:var(--sh)}
.cx-player .clv-play-n{font-size:12px;color:var(--t3)}
.cx-player audio{display:none}
@keyframes cx-breathe{0%,100%{opacity:.45}50%{opacity:1}}
/* the reading column and the rail */
.cx-grid{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.cx-l,.cx-r{display:flex;flex-direction:column;gap:12px;min-width:0}
.cx-card{border:1px solid var(--border);border-radius:var(--rlg);background:var(--card);box-shadow:var(--sh);padding:14px 16px}
.cx-lbl{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.cx-lbl svg{color:var(--accent-tx);flex:none}
.cx-lbl span{margin-left:auto;font-weight:600;letter-spacing:.02em;text-transform:none;font-size:11.5px}
.cx-next{display:flex;align-items:flex-start;gap:13px;border:1px solid var(--accent);border-radius:var(--rlg);background:var(--accent-bg);padding:15px 16px}
.cx-next-ic{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-solid)}
.cx-next-b{flex:1;min-width:0}
.cx-next .cx-lbl{margin-bottom:4px;color:var(--accent-tx)}
.cx-next-t{font-size:16px;font-weight:700;color:var(--t1);line-height:1.4}
.cx-next-a{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.cx-filed{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--accent-tx)}
.cx-facts{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 12px}
.cx-fact{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--border);border-radius:99px;background:var(--bg);
  font:inherit;font-size:12px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
.cx-fact svg{color:var(--accent-tx)}
button.cx-fact{cursor:pointer}
.cx-fact b{font-weight:650;color:var(--t1)}
/* "Voice 1 90%" read as "Voice 190%": the share sits apart from the name, in the stronger weight */
.cx-legend b{margin-left:4px;font-weight:800;color:var(--t1)}
.mrec-sug-more>summary{list-style:none;cursor:pointer;padding:6px 0 2px;font-size:12px;font-weight:700;color:var(--accent-tx)}
.mrec-sug-more>summary::-webkit-details-marker{display:none}
.mrec-sug-more>summary::after{content:' \25BE'}
.mrec-sug-more[open]>summary{display:none}
.cx-fact-c{color:var(--t2);font-weight:500}
button.cx-fact:hover{background:var(--hover)}
.cx-hl{background:var(--warn-bg);color:inherit;border-radius:4px;padding:1px 2px;margin:0 -2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.cx-lead{margin:0;font-size:15px;font-weight:600;color:var(--t1);line-height:1.55}
.cx-rest{margin:8px 0 0;font-size:13.5px;color:var(--t2);line-height:1.6}
.cx-prog{height:4px;margin:-4px 0 6px;border-radius:99px;background:var(--border);overflow:hidden}
.cx-prog i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .3s ease}
.cx-item{display:flex;align-items:flex-start;gap:11px;width:100%;margin:0;padding:10px 4px;border:none;border-top:1px solid var(--border);border-radius:0;background:none;font:inherit;font-size:13.5px;text-align:left;color:var(--t1);cursor:pointer}
.cx-prog+.cx-item{border-top:none}
.cx-item:hover:not([disabled]){background:var(--hover)}
.cx-item[disabled],.cx-item.off{cursor:default}
.cx-box{width:17px;height:17px;flex:none;margin-top:1px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--t3);border-radius:5px;color:var(--on-solid)}
.cx-item.on .cx-box{background:var(--accent);border-color:var(--accent)}
.cx-item.on .cx-it{color:var(--t2)}
.cx-it{flex:1;min-width:0;line-height:1.45}
.cx-tag{flex:none;font-size:11px;font-weight:700;color:var(--t3)}
.cx-item:hover:not([disabled]) .cx-tag,.cx-item:focus-visible .cx-tag{color:var(--accent-tx)}
.cx-all{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--t3)}
.cx-tx,.cx-fold{padding:0}
.cx-tx summary,.cx-fold summary{display:flex;align-items:center;gap:6px;padding:13px 16px;list-style:none;cursor:pointer;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.cx-tx summary::-webkit-details-marker,.cx-fold summary::-webkit-details-marker{display:none}
.cx-tx summary svg,.cx-fold summary svg{color:var(--accent-tx)}
.cx-tx summary span,.cx-fold summary span{font-weight:600;letter-spacing:.02em;text-transform:none;font-size:11.5px}
.cx-tx summary span:last-child,.cx-fold summary span:last-child{margin-left:auto}
.cx-share{margin-left:auto;padding:1px 8px;border-radius:99px;background:var(--bg);color:var(--t2)}
.cx-share+span{margin-left:10px!important}
.cx-tx[open] summary,.cx-fold[open] summary{border-bottom:1px solid var(--border)}
.cx-txt,.cx-turns{max-height:460px;overflow:auto;padding:14px 16px;font-size:13.5px;line-height:1.65;color:var(--t1)}
.cx-txt p{margin:0 0 9px}
.cx-txt p:last-child{margin:0}
.cx-greet{color:var(--t3);font-style:italic}
.cx-turns{display:flex;flex-direction:column;gap:7px}
.cx-turn{align-self:flex-start;max-width:86%;padding:8px 11px;border:1px solid var(--border);border-radius:14px 14px 14px 4px;background:var(--bg)}
.cx-turn.us{align-self:flex-end;border-color:transparent;border-radius:14px 14px 4px 14px;background:var(--accent-bg)}
.cx-turn span{display:block;margin-bottom:2px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.cx-fold>.cx-rest,.cx-ai-list{margin:12px 16px;font-size:12.5px;color:var(--t2)}
.cx-ai-list{padding-left:18px}
.cx-empty{font-size:13.5px;color:var(--t2)}
.cx .clv-brief{margin-top:0}
/* the rail */
.cx-rail{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--t1)}
.cx-rail .cx-lbl{margin-bottom:4px}
.cx-rl-row{display:flex;align-items:center;gap:8px;color:var(--t1);font-weight:600}
.cx-rl-row svg{color:var(--t3);flex:none}
.cx-rl-h{display:flex;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.cx-rl-h.first{margin-top:0;padding-top:0;border-top:none}
.cx-rl-h span{margin-left:auto;padding:0 7px;border-radius:99px;background:var(--bg);letter-spacing:0;color:var(--t2)}
.cx-rl-meet{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:12px;background:var(--accent-bg)}
.cx-rl-meet b{font-size:13px;color:var(--t1)}
.cx-rl-meet span{font-size:12px;color:var(--t2)}
.cx-rl-task{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.4;color:var(--t1)}
.cx-rl-task svg{flex:none;margin-top:2px;color:var(--t3)}
.cx-rl-none,.cx-rl-p{font-size:12.5px;color:var(--t3);margin:0}
.cx-rl-p{color:var(--t2);line-height:1.5;margin-bottom:6px}
.cx-rl-call{display:flex;align-items:center;gap:8px;width:100%;padding:6px 6px;border:none;border-radius:9px;background:none;font:inherit;font-size:12.5px;color:var(--t1);text-align:left;cursor:pointer}
.cx-rl-call:hover{background:var(--hover)}
.cx-rl-ic{width:24px;height:24px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-bg);color:var(--accent-tx)}
.cx-rl-ic.k-out{background:var(--info-bg);color:var(--info-tx)}
.cx-rl-ic.k-vm{background:var(--purple-bg);color:var(--purple-tx)}
.cx-rl-ic.k-miss{background:var(--danger-bg);color:var(--danger-tx)}
.cx-rl-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-rl-d{flex:none;font-size:11.5px;color:var(--t3)}
.cx-rl-go{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:12.5px;font-weight:700;color:var(--accent-tx);text-decoration:none}
.cx-rl-go:hover{text-decoration:underline}
/* the page arrives in order, quickly; never for someone who asked for less motion */
.cx-l>*,.cx-r>*{animation:cx-in .28s ease both}
.cx-l>:nth-child(2){animation-delay:.04s}.cx-l>:nth-child(3){animation-delay:.08s}.cx-l>:nth-child(4){animation-delay:.12s}.cx-r>*{animation-delay:.1s}
@keyframes cx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cx-l>*,.cx-r>*,.cx-player[data-state="loading"] .cx-bars i{animation:none}.cx-bars i,.cx-prog i,.cx-pp{transition:none}}
/* ---- THE MEETING PAGE in the kit's layout (js/meetings.js mtg2Open): the TALK MAP player and its legend ---- */
.cx-skip,.cx-spd{flex:none;padding:4px 10px;border:1px solid var(--border);border-radius:99px;background:var(--bg);font:inherit;font-size:11.5px;font-weight:700;color:var(--t1);cursor:pointer}
.cx-skip:hover,.cx-spd:hover{background:var(--hover)}
.cx-talk{position:relative;display:block;flex:1;min-width:120px;height:44px;cursor:pointer;container-type:inline-size;border-radius:6px}
.cx-talk:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cx-talk-bars{position:absolute;top:0;bottom:0;left:0;width:100cqw;display:flex;align-items:center;gap:2px}
.cx-talk>.cx-talk-bars i{opacity:.3}
.cx-talk-bars i{flex:1;min-width:1px;border-radius:2px;background:var(--border)}
.cx-talk-bars i.s0,.cx-legend .s0 i{background:var(--accent)}
.cx-talk-bars i.s1,.cx-legend .s1 i{background:var(--info-tx)}
.cx-talk-bars i.s2,.cx-legend .s2 i{background:var(--purple-tx)}
.cx-talk-bars i.s3,.cx-legend .s3 i{background:var(--warn-tx)}
.cx-talk-fill{position:absolute;top:0;bottom:0;left:0;width:0;overflow:hidden;display:block}
.cx-talk-knob{position:absolute;top:-4px;bottom:-4px;left:0;width:2px;margin-left:-1px;border-radius:2px;background:var(--t1)}
.cx-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 4px 0;font-size:11.5px;font-weight:700;color:var(--t2)}
.cx-legend span{display:inline-flex;align-items:center;gap:6px}
.cx-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.cx-legend em{margin-left:auto;font-style:normal;font-weight:500;color:var(--t3)}
.cx-pp svg{width:18px;height:18px}
.cx-clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cx-more{margin-top:6px;padding:0;border:none;background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--accent-tx);cursor:pointer}
.cx-sugwrap{padding:4px}
.cx-sugwrap .mrec-sug{margin:0;border:none;box-shadow:none}
.mtg2 .mrec-h:first-of-type{margin-top:0}
.mtg2 .mrec-list{margin-bottom:6px}
.mtg2 .cx-txt .mrec-empty{margin:0}
@container cx (max-width:560px){
  .mtg2-player .cx-talk{order:5;flex-basis:100%}
  .mtg2-player .cx-time{margin-left:auto}   /* play, back 15, then the time and the speed share the first row */
  .cx-legend em{margin-left:0;flex-basis:100%}
}
@container cx (min-width:900px){
  .cx-grid{flex-direction:row;align-items:flex-start;gap:16px}
  .cx-l{flex:1}
  .cx-r{width:min(330px,34%);flex:none}
}
@container cx (max-width:560px){
  .cx-hero{padding:14px}
  .cx-acts{width:100%}
  .cx-acts .btn{flex:1;justify-content:center}
  .cx-player{flex-wrap:wrap;border-radius:18px;row-gap:8px}
  .cx-wave{flex-basis:calc(100% - 64px)}
  .cx-time{margin-left:60px}
  .cx-speeds{margin-left:auto}
  .cx-name{font-size:19px}
  .cx-hero-top{gap:10px}
  .cx-who{min-width:0;flex:1 1 140px}
  .cx-sep{display:none}
  .cx-meta,.cx-co{column-gap:12px}
  .cx-av{width:46px;height:46px;font-size:16px}
}
.mbx-p-body.clv-body .clv-brief{border:1px solid var(--border);background:var(--card)}
@media(max-width:768px){
  /* the approved round dialer keys (state 9) */
  .clv-key{width:58px;height:58px;border-radius:50%}
}
/* gate catches on the detail cards: the label never wraps into columns; the
   Add-all action sits under the items, inside the card */
.clv-brief-h b{font-weight:700;white-space:nowrap;font-size:inherit;letter-spacing:inherit}
.clv-brief-h span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.clv-addall{padding:10px 14px 12px;border-top:1px solid var(--border);margin-top:4px}

/* ============ N4 — THE MISSED-ANYTHING RADAR ============ */
.rad-clear{display:flex;align-items:center;gap:8px;padding:14px 4px;font-size:12.5px;color:var(--t2)}
.rad-clear svg{color:var(--accent2);flex:none}
.rad-x{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;
  background:none;color:var(--t3);border-radius:8px;cursor:pointer;flex:none}
.rad-x:hover{background:var(--hover);color:var(--t1)}
/* Reach out today (2026-10-14): the row's one action, sized to sit beside the chip without pushing the name out */
.rad-ai{flex:none;white-space:nowrap;padding:3px 8px;font-size:11px;gap:4px}
/* one line of meta, not the shared stack: chip, AI Reply and the row's quiet action side by side, so five rows stay
   five short rows (stacked, each row was three lines tall). Only with the switch on; the old Radar is untouched. */
.rad-wake .dl-mt{flex-direction:row;align-items:center;gap:6px}
/* a phone gives the name the room: the line under it already says waiting or how long */
@media (max-width:420px){.rad-wake .dl-chip{display:none}}
.rad-strip{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;background:color-mix(in srgb,var(--accent) 4%,var(--card))}
.rad-strip::-webkit-scrollbar{display:none}
.rad-strip>svg{color:var(--accent2);flex:none}
.rad-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card);
  border-radius:999px;padding:5px 6px 5px 11px;font-family:inherit;font-size:11.5px;cursor:pointer;
  white-space:nowrap;color:var(--t2);flex:none}
.rad-chip b{color:var(--t1);font-weight:700}
.rad-chip span{font-size:10.5px;color:#92400e;background:rgba(217,119,6,.12);border-radius:999px;padding:1px 7px;font-weight:700}
:root[data-theme="dark"] .rad-chip span{color:#fcd34d}
.rad-chip i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;color:var(--t3);font-style:normal}
.rad-chip i:hover{background:var(--hover);color:var(--t1)}
.rad-more{font-size:11px;font-weight:700;color:var(--accent2);cursor:pointer;flex:none;white-space:nowrap}

/* dtCard v3 — the greet zap, compact in the row's meta column */
.dt-greet{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border);
  background:var(--card);color:var(--accent2);border-radius:9px;cursor:pointer;flex:none}
.dt-greet:hover{background:var(--accent-bg)}

/* ---- the live-bar keypad (DTMF into the far side) ---- */
.cb-keys{position:fixed;right:16px;bottom:74px;z-index:220;display:grid;grid-template-columns:repeat(3,56px);gap:8px;
  background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 16px 40px rgba(16,24,40,.2);padding:14px}
.cb-key{height:48px;border:1px solid var(--border);background:var(--bg);color:var(--t1);border-radius:12px;
  font-family:inherit;font-size:17px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.cb-key:hover{background:var(--hover)}
.cb-key:active{transform:scale(.94)}
.cb-keys-sent{grid-column:1/4;min-height:18px;text-align:center;font-size:13px;font-weight:700;letter-spacing:2px;
  color:var(--accent2);font-variant-numeric:tabular-nums}
@media(max-width:768px){ .cb-keys{bottom:calc(134px + env(safe-area-inset-bottom,0px));left:16px;right:16px;grid-template-columns:repeat(3,1fr)} }

/* local draft backups, surfaced in the Drafts folder (v325) */
.mbx-locdr{border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--accent) 4%,var(--card));padding:8px 12px}
.mbx-locdr-h{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:2px 0 6px}
.mbx-locdr-r{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid var(--border);background:var(--card);
  border-radius:10px;padding:8px 10px;margin-bottom:6px;cursor:pointer;font-family:inherit;min-height:40px}
.mbx-locdr-r b{font-size:12px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:45%}
.mbx-locdr-r span{flex:1;min-width:0;font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbx-locdr-r i{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;color:var(--t3);font-style:normal;flex:none}
.mbx-locdr-r i:hover{background:var(--hover);color:var(--t1)}

/* ============ Epic D W1 — NameDrive (js/drive.js) ============ */
.drv-wrap{margin-top:0}
.drv-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.drv-crumb{display:flex;align-items:center;gap:2px;font-size:14px;font-weight:700;flex:1;min-width:200px;flex-wrap:wrap}
.drv-crumb a{color:var(--t3);cursor:pointer;padding:3px 7px;border-radius:8px}
.drv-crumb a:hover{background:var(--hover);color:var(--t1)}
.drv-crumb b{padding:3px 7px;color:var(--t1)}
.drv-sep{color:var(--t3);opacity:.6}
.drv-n{color:var(--t3);font-size:11.5px;font-variant-numeric:tabular-nums}
.drv-cols{display:grid;grid-template-columns:minmax(0,1fr) 96px 84px 108px;gap:8px;align-items:center;padding:7px 16px 7px 58px;border-bottom:1px solid var(--line);color:var(--t3);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.drv-row{display:grid;grid-template-columns:34px minmax(0,1fr) 96px 84px 108px;gap:8px;align-items:center;min-height:46px;padding:0 16px;border-bottom:1px solid var(--line)}
.drv-row:hover{background:var(--hover)}
.drv-row small{color:var(--t3);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drv-ic{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--chip);color:var(--t2);flex:none}
.drv-ic.drv-fold{background:color-mix(in oklab,var(--acc) 14%,var(--card));color:var(--acc)}
.drv-nm{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:none;border:none;padding:6px 0;cursor:pointer;text-align:left;font-family:inherit;min-width:0;width:100%}
.drv-nm b{font-size:13px;color:var(--t1);font-weight:650;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drv-nm i{font-style:normal;font-size:10.5px;color:var(--t3)}
.drv-acts{display:flex;gap:2px;justify-content:flex-end;opacity:0;transition:opacity .12s}
.drv-row:hover .drv-acts{opacity:1}
.drv-in{background:var(--bg);border:1px solid var(--acc);border-radius:8px;color:var(--t1);font:var(--ff);font-size:13px;font-weight:650;padding:6px 10px;min-width:0;width:min(340px,100%)}
.drv-empty{display:flex;align-items:center;gap:10px;justify-content:center;padding:26px 16px;color:var(--t3);font-size:12.5px;border-bottom:1px solid var(--line)}
.drv-menu{position:fixed;z-index:1200;background:var(--card);border:1px solid var(--line2,var(--line));border-radius:12px;padding:6px;width:220px;max-height:320px;overflow:auto;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.drv-mh{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:6px 10px 4px}
.drv-mi{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:var(--t1);font:var(--ff);font-size:12.5px;font-weight:600;padding:7px 10px;border-radius:8px;cursor:pointer;text-align:left}
.drv-mi:hover{background:var(--hover)}
.drv-mi.on{color:var(--t3);cursor:default}
.fil-open{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.fil-open a{color:var(--acc);font-weight:800;font-size:12px;cursor:pointer}
.fil-open em{color:var(--t3);font-size:11px;font-style:normal}
@media (max-width:768px){
  /* Law 21 — the phone shows icon, name and actions; the metadata columns
     go (the name row's own <i> line already says kind + size). */
  .drv-cols{display:none}
  .drv-row{grid-template-columns:34px minmax(0,1fr) 104px}
  .drv-row small{display:none}
  .drv-acts{opacity:1}
}

/* ============ Epic D W2 — grid, preview, selection, queue ============ */
.drv-srch{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--t1);font:var(--ff);font-size:12.5px;padding:7px 12px;min-width:150px;flex:0 1 220px}
.drv-srch::placeholder{color:var(--t3)}
.drv-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.drv-seg b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;color:var(--t3);cursor:pointer}
.drv-seg b.on{background:color-mix(in oklab,var(--acc) 14%,var(--card));color:var(--acc)}
.drv-selbar{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line);background:color-mix(in oklab,var(--acc) 8%,var(--card));flex-wrap:wrap}
.drv-selbar b{font-size:12px;color:var(--t1)}
.drv-selbar em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--t3)}
.drv-hint{display:flex;align-items:center;gap:7px;padding:7px 16px;border-bottom:1px solid var(--line);color:var(--t3);font-size:11.5px}
.drv-hint a{color:var(--acc);cursor:pointer;font-weight:700}
.drv-row.sel,.drv-card.sel{background:color-mix(in oklab,var(--acc) 12%,var(--card));outline:1px solid color-mix(in oklab,var(--acc) 45%,transparent)}
.drv-row.droptarget,.drv-card.droptarget{outline:2px solid var(--acc);outline-offset:-2px;background:color-mix(in oklab,var(--acc) 14%,var(--card))}
.drv-body.dropzone{outline:2px dashed var(--acc);outline-offset:-6px;background:color-mix(in oklab,var(--acc) 6%,var(--card))}
.drv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:16px}
.drv-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;user-select:none}
.drv-card:hover{border-color:var(--line2,var(--t3))}
.drv-th{height:100px;display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--t3);overflow:hidden}
.drv-th img{width:100%;height:100%;object-fit:cover;display:block}
.drv-th-fold{background:color-mix(in oklab,var(--acc) 12%,var(--card));color:var(--acc)}
.drv-th-tile img{display:none}
.drv-cb{display:flex;align-items:center;gap:7px;padding:8px 10px;font-size:12px;font-weight:650;color:var(--t1);min-width:0}
.drv-cb b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.drv-cb i{font-style:normal;font-size:10px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drv-mi-red{color:var(--bad)}
.drv-menu hr{border:none;border-top:1px solid var(--line);margin:5px 0}
/* preview overlay */
.drv-ovl{position:fixed;inset:0;z-index:1400;background:rgba(4,8,6,.86);display:flex;align-items:center;justify-content:center;padding:18px}
.drv-ov-in{width:min(980px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.drv-ov-t{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.drv-ov-t b{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drv-ov-stage{flex:1;min-height:260px;max-height:min(66vh,640px);display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:auto}
.drv-ov-stage img{max-width:100%;max-height:min(66vh,640px);object-fit:contain;display:block}
.drv-ov-stage iframe{width:100%;height:min(66vh,640px);border:none;background:#fff}
.drv-ov-stage video{max-width:100%;max-height:min(66vh,640px)}
.drv-ov-txt{width:100%;margin:0;padding:16px;font:12px/1.6 ui-monospace,Consolas,monospace;color:var(--t1);white-space:pre-wrap;word-break:break-word}
.drv-ov-none{display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 20px;color:var(--t3);font-size:12.5px;text-align:center}
.drv-ov-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid var(--line)}
.drv-ov-nav em{font-style:normal;font-size:11px;color:var(--t3)}
/* upload queue */
.drv-q{position:fixed;right:16px;bottom:76px;z-index:1300;width:min(330px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.4);overflow:hidden}
.drv-qh{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12px}
.drv-qi{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:11.5px;color:var(--t1)}
.drv-qi span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drv-qi em{font-style:normal;color:var(--t3);font-size:10.5px;flex:none}
.drv-qi.bad{color:var(--bad)}
@media (max-width:768px){
  .drv-srch{flex:1 1 100%;order:9}
  .drv-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:12px}
  .drv-ovl{padding:0}
  .drv-ov-in{border-radius:0;height:100%;max-height:none}
  .drv-ov-stage{max-height:none}
}

/* ============ Epic D W3 — the Sensitive vault ============ */
.drv-vrow .drv-nm b{color:var(--warn,#e8b04b)}
.drv-vic{background:color-mix(in oklab,#e8b04b 16%,var(--card));color:#e8b04b}
.drv-th-vault{background:color-mix(in oklab,#e8b04b 14%,var(--card));color:#e8b04b}
.drv-vbadge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:3px 9px;border-radius:99px;border:1px solid color-mix(in oklab,#e8b04b 45%,transparent);background:color-mix(in oklab,#e8b04b 12%,var(--card));color:#e8b04b;font-size:9.5px;font-weight:800;letter-spacing:.05em}
.drv-vgate{display:flex;flex-direction:column;align-items:center;gap:12px;padding:46px 20px;text-align:center}
.drv-vgate b{font-size:14.5px;color:var(--t1)}
.drv-vgate p{color:var(--t3);font-size:12.5px;max-width:48ch;line-height:1.6;margin:0}
.drv-vbig{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,#e8b04b 16%,var(--card));color:#e8b04b}
.drv-vbtns{display:flex;gap:8px;margin-top:4px}
.drv-mi-vault{color:#e8b04b}

/* ============ Epic D W3.5 — NameDocs (js/docs.js) ============ */
.dc-shell{display:flex;flex-direction:column;min-height:calc(100vh - 140px);background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dc-top{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dc-back{display:inline-flex;align-items:center;gap:6px;color:var(--t3);font-size:12.5px;font-weight:700;text-decoration:none;cursor:pointer}
.dc-back:hover{color:var(--t1)}
.dc-name{font-size:14px;font-weight:750;background:none;border:none;color:var(--t1);font-family:inherit;min-width:160px;flex:1;outline:none;padding:5px 9px;border-radius:8px}
.dc-name:focus{background:var(--bg)}
.doc-saved{display:inline-flex;align-items:center;gap:6px;color:var(--t3);font-size:11px;white-space:nowrap}
.doc-saved i{width:6px;height:6px;border-radius:50%;background:var(--acc);display:inline-block}
.dc-tb{display:flex;align-items:center;gap:3px;padding:7px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--card);position:sticky;top:0;z-index:5}
.dc-g{display:flex;align-items:center;gap:2px;padding:0 6px;border-right:1px solid var(--line)}
.dc-g:last-child{border-right:none}
.dc-tb button{height:30px;min-width:30px;border:none;background:transparent;color:var(--t3);border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:700;font-family:inherit;padding:0 8px;transition:background .12s,color .12s}
.dc-tb button:hover{background:var(--hover);color:var(--t1)}
.dc-sw{width:15px;height:15px;border-radius:5px;display:inline-block;vertical-align:-3px;background:#e8b04b}
.dc-scroll{flex:1;overflow:auto;padding:26px 16px 44px;background:var(--bg)}
.dc-page{max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.28);padding:52px 58px;min-height:420px;outline:none;font-family:Georgia,'Times New Roman',serif;font-size:16.5px;line-height:1.75;color:var(--t1)}
.dc-page h1{font-size:28px;line-height:1.25;margin:0 0 14px;letter-spacing:-.3px}
.dc-page h2{font-size:19.5px;margin:24px 0 8px}
.dc-page p{margin:0 0 12px}
.dc-page ul,.dc-page ol{margin:0 0 12px 22px}
.dc-page li{margin-bottom:5px}
.dc-page blockquote{border-left:3px solid var(--acc);margin:14px 0;padding:4px 16px;color:var(--t2);font-style:italic}
.dc-page .todo{list-style:none;margin-left:2px}
.dc-page .todo li{display:flex;gap:10px;align-items:flex-start}
.dc-page .todo input{margin-top:7px;accent-color:var(--acc)}
.dc-page .dc-tbl{border-collapse:collapse;margin:14px 0;width:100%}
.dc-page .dc-tbl td{border:1px solid var(--line2,var(--line));padding:7px 11px;min-width:60px}
.dc-page .dc-img{border-radius:12px;overflow:hidden;margin:16px 0;border:1px solid var(--line)}
.dc-page .dc-img img{display:block;width:100%}
.dc-page hr{border:none;border-top:1px solid var(--line2,var(--line));margin:20px 0}
.dc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;border-top:1px solid var(--line);color:var(--t3);font-size:11px}
.dc-bubble{position:fixed;display:flex;gap:2px;background:var(--card);border:1px solid var(--line2,var(--line));border-radius:12px;padding:4px;box-shadow:0 14px 38px rgba(0,0,0,.5);z-index:1500}
.dc-bubble button{height:30px;min-width:30px;border:none;background:transparent;color:var(--t1);border-radius:8px;cursor:pointer;font-size:13px;font-weight:800}
.dc-bubble button:hover{background:var(--hover)}
.dc-pill{display:inline-flex;font-size:8.5px;font-weight:800;letter-spacing:.06em;padding:1px 7px;border-radius:99px;margin-left:7px;vertical-align:2px}
.dc-pill.doc{background:color-mix(in oklab,#6ab7ff 18%,var(--card));color:#6ab7ff}
.dc-pill.sheet{background:color-mix(in oklab,var(--acc) 18%,var(--card));color:var(--acc)}
.drv-ic.dc-ic-doc{background:color-mix(in oklab,#6ab7ff 16%,var(--card));color:#6ab7ff}
.drv-ic.dc-ic-sheet{background:color-mix(in oklab,var(--acc) 16%,var(--card));color:var(--acc)}
/* sheet */
.dc-fx{display:flex;align-items:center;gap:9px;padding:8px 14px;border-bottom:1px solid var(--line)}
.dc-cell{font-size:11.5px;font-weight:800;color:var(--acc);background:color-mix(in oklab,var(--acc) 12%,var(--card));border:1px solid color-mix(in oklab,var(--acc) 40%,transparent);border-radius:8px;padding:5px 10px;font-variant-numeric:tabular-nums}
.dc-fxin{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--t1);font:12.5px ui-monospace,Consolas,monospace;padding:7px 11px;min-width:0}
.dc-gridwrap{flex:1;overflow:auto;background:var(--bg)}
.dc-grid{border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.dc-grid th{position:sticky;top:0;background:var(--card);color:var(--t3);font-size:10.5px;font-weight:800;border:1px solid var(--line);padding:5px 10px;min-width:96px;z-index:2}
.dc-grid th.rn{min-width:38px;left:0;z-index:3}
.dc-grid td{border:1px solid var(--line);padding:5px 10px;color:var(--t1);background:var(--card);white-space:nowrap;min-width:96px;outline:none}
.dc-grid td.rn{position:sticky;left:0;background:var(--card);color:var(--t3);font-size:10.5px;font-weight:800;text-align:center;z-index:1;min-width:38px}
.dc-grid td.selc{outline:2px solid var(--acc);outline-offset:-2px}
.dc-grid td.fx{color:color-mix(in oklab,var(--acc) 75%,var(--t1))}
.dc-tabs{display:flex;align-items:center;gap:4px;padding:7px 12px;border-top:1px solid var(--line)}
.dc-tab{padding:6px 14px;border-radius:9px;font-size:11.5px;font-weight:750;color:var(--t3);cursor:pointer;border:1px solid transparent}
.dc-tab.on{background:color-mix(in oklab,var(--acc) 12%,var(--card));color:var(--acc);border-color:color-mix(in oklab,var(--acc) 40%,transparent)}
@media (max-width:768px){
  .dc-page{padding:28px 20px}
  .dc-tb{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .doc-saved{display:none}
  .dc-scroll{padding:14px 8px 30px}
}

/* ============ Epic D P0 redlines (Abdul live test 2026-09-01) ============ */
/* the sheet grid must never inherit the app's list-table cascade: the
   global `tbody tr:hover td` repaint and `tr:last-child td{border:none}`
   both outrank .dc-grid td — pin every side explicitly */
.dc-grid tbody tr:hover td{background:var(--card);cursor:text}
.dc-grid tbody tr:hover td.rn{background:var(--card);cursor:default}
.dc-grid tr:last-child td{border-bottom:1px solid var(--line)}
.dc-grid td,.dc-grid th{border:1px solid var(--line2,var(--line))}
.dc-grid td{height:30px;overflow-wrap:normal}
/* the preview is a VIEWER, not a modal — Drive-sized */
.drv-ov-in{width:min(1280px,97vw);height:min(92vh,900px);max-height:none}
.drv-ov-stage{max-height:none}
.drv-ov-stage img,.drv-ov-stage video{max-height:100%}
.drv-ov-stage iframe{height:100%}
.drv-crumb a.droptarget{background:color-mix(in oklab,var(--acc) 16%,var(--card));color:var(--acc);outline:1px solid var(--acc)}

/* W5 — share links list */
.drv-lk{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;font-size:12px}
.drv-lk:hover{background:var(--hover)}
.drv-lk span{flex:1;min-width:0;display:flex;flex-direction:column;font-weight:650;color:var(--t1)}
.drv-lk span i{font-style:normal;font-size:10px;color:var(--t3);font-weight:400}
.drv-lk.gone span{opacity:.5}
/* W5.2 — sheet column resize handles (th is sticky = positioned, so the
   absolute handle anchors to it) */
.dc-rz{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:4}
.dc-rz:hover{background:color-mix(in oklab,var(--acc) 40%,transparent)}
/* W5.3 — doc menus, color dots, find bar */
.dc-kbd{margin-left:auto;font-size:9.5px;color:var(--t3);font-weight:700}
.dc-dots{display:flex;gap:7px;padding:4px 12px 8px}
.dc-dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--line2,var(--line));cursor:pointer}
.dc-dot:hover{outline:2px solid var(--acc);outline-offset:1px}
.dc-find{position:absolute;top:52px;right:16px;z-index:20;display:flex;gap:5px;align-items:center;background:var(--card);border:1px solid var(--line2,var(--line));border-radius:11px;padding:6px 8px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.dc-find input{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--t1);font:12px var(--ff);padding:6px 10px;width:180px}
.dc-shell{position:relative}
.dc-page a{color:var(--acc);text-underline-offset:2px}
/* W5.4 — content tiles + sortable headers */
.drv-th-doc{padding:10px 12px;align-items:flex-start;background:var(--card)}
.drv-th-doc span{font:9.5px/1.6 Georgia,serif;color:var(--t2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.drv-th-sheet{padding:8px;background:var(--card)}
.drv-th-sheet table{border-collapse:collapse;width:100%}
.drv-th-sheet td{border:1px solid var(--line);font-size:8.5px;color:var(--t2);padding:2px 5px;height:16px;overflow:hidden;white-space:nowrap;max-width:52px;text-overflow:ellipsis}
.drv-hsort{cursor:pointer;user-select:none}
.drv-hsort:hover{color:var(--t1)}
.drv-hsort.on{color:var(--acc)}

/* ============ Epic D W5.5 — tree rail, kebabs, editor crumbs, meter ============ */
.drv-split{display:flex;align-items:stretch;min-height:220px}
.drv-tree{width:210px;flex:none;border-right:1px solid var(--line);padding:8px 6px;overflow:auto;max-height:60vh;position:sticky;top:0}
.drv-maincol{flex:1;min-width:0;display:flex;flex-direction:column}
.drv-tn{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;font-size:12px;font-weight:650;color:var(--t2);cursor:pointer;user-select:none;white-space:nowrap}
.drv-tn:hover{background:var(--hover);color:var(--t1)}
.drv-tn.on{background:color-mix(in oklab,var(--acc) 13%,var(--card));color:var(--acc)}
.drv-tn.vaultish{color:#e8b04b}
.drv-tn span{overflow:hidden;text-overflow:ellipsis}
.drv-tn.droptarget{outline:2px solid var(--acc);outline-offset:-2px;background:color-mix(in oklab,var(--acc) 14%,var(--card))}
.drv-tc{width:14px;flex:none;text-align:center;font-style:normal;color:var(--t3);font-size:10px}
.drv-troot{font-weight:800}
.drv-kb{position:absolute;top:6px;right:6px;z-index:3;width:28px;height:28px;border:none;border-radius:8px;background:color-mix(in oklab,var(--card) 82%,transparent);color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.drv-card{position:relative}
.drv-card:hover .drv-kb{opacity:1}
.drv-kb:hover{background:var(--hover);color:var(--t1)}
.drv-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;text-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none}
.drv-th{position:relative}
.drv-th-web{padding:0;overflow:hidden;background:#fff}
.drv-th-web img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.dc-crumb{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden}
.dc-crumb a{color:var(--t3);cursor:pointer;text-decoration:none;padding:3px 6px;border-radius:7px;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.dc-crumb a:hover{background:var(--hover);color:var(--t1)}
.dc-crumb b{color:var(--t3);opacity:.6;font-weight:400}
.fil-meter{margin-top:10px}
.fil-meter-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.fil-meter-bar i{display:block;height:100%;background:var(--acc);border-radius:3px}
.fil-meter span{display:block;margin-top:5px;font-size:11px;color:var(--t3)}
@media (max-width:900px){
  .drv-tree{display:none}
  .drv-kb{opacity:1}
}

/* multi-select engagement wizard — the PRIMARY badge */
.fx-prim{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.06em;color:var(--acc);background:color-mix(in oklab,var(--acc) 14%,var(--card));border:1px solid color-mix(in oklab,var(--acc) 40%,transparent);border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:2px}

/* ============ multi-number SMS (2026-09-05, ports landed) ============ */
/* THE LINE PICKER (2026-09-10, his "make the dropdown look alot nicer"): the
   dialer's Calling from and New text's From, one control (comms.js
   linePickHTML). The closed face is the interactive twin of .thr-line below:
   the same border, the line's name first, its number in tabular figures. */
.lp{position:relative;display:inline-flex;max-width:100%}
.lp-btn{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:36px;padding:5px 9px 5px 5px;background:var(--card);
  border:1px solid var(--border);border-radius:10px;color:var(--t1);font-family:inherit;font-size:12.5px;cursor:pointer;text-align:left;
  transition:background .12s,border-color .12s,box-shadow .12s}
.lp-btn:hover{background:var(--hover)}
.lp-btn:active{transform:translateY(1px)}
/* design law 13: the edge that is already there darkens; no second ring */
.lp-btn:focus-visible,.lp-btn[aria-expanded="true"]{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.lp-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--accent-bg);color:var(--accent-tx);flex:none}
.lp-nm{font-weight:700;white-space:nowrap}
.lp-num{color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lp-chev{display:inline-flex;color:var(--t3);transition:transform .15s}
.lp-btn[aria-expanded="true"] .lp-chev{transform:rotate(180deg)}
.lp-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:140;min-width:100%;width:max-content;max-width:min(320px,calc(100vw - 24px));
  background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shlg);padding:6px;outline:none}
/* the open list holds focus (aria-activedescendant), so the ACTIVE ROW shows where the keyboard
   is and the list draws no ring of its own: html :focus-visible (0,1,1) would otherwise put a
   second frame around a bordered card (law 13; measured in the first headless pass) */
.lp-menu:focus-visible{outline:none}
.lp-menu:focus-visible .lp-opt.act{box-shadow:inset 0 0 0 2px var(--accent)}
.lp-mh{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:4px 8px 6px}
.lp-opt{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;color:var(--t1)}
.lp-opt.act{background:var(--hover)}
.lp-oic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--bg);color:var(--t2);flex:none}
.lp-opt.on .lp-oic{background:var(--accent-bg);color:var(--accent-tx)}
.lp-on{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.lp-on b{font-size:13px;font-weight:700}
.lp-on span{font-size:11.5px;color:var(--t2);font-variant-numeric:tabular-nums}
.lp-tag{font-size:10px;font-weight:700;color:var(--t2);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:2px 7px;white-space:nowrap}
.lp-ck{display:inline-flex;justify-content:flex-end;width:16px;color:var(--accent);flex:none}
@media (prefers-reduced-motion:reduce){.lp-btn,.lp-chev{transition:none}.lp-btn:active{transform:none}}
/* the thread's line, read-only (2026-09-10): a conversation replies on the line it lives on */
.thr-line{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:8px;color:var(--t2);font-size:11.5px;font-weight:650;padding:5px 9px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.thr-line b{color:var(--t1);font-weight:750}
.ph-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.ph-row:last-of-type{border-bottom:none}
.ph-ic{width:30px;height:30px;border-radius:8px;background:var(--chip,var(--hover));color:var(--t2);display:inline-flex;align-items:center;justify-content:center;flex:none}
.ph-n{flex:1;min-width:0;display:flex;flex-direction:column}
.ph-n b{font-size:13px;color:var(--t1)}
.ph-n i{font-style:normal;font-size:11px;color:var(--t3)}
.ph-ok{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--acc)}
/* the line audit (2026-09-10): three chips per line, then the plain-words issues */
.ph-health{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ph-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:750;border-radius:99px;padding:2px 8px 2px 6px}
.ph-chip.ok{color:var(--acc);background:color-mix(in oklab,var(--acc) 14%,transparent)}
.ph-chip.warn{color:var(--warn-tx,#b45309);background:rgba(245,158,11,.14)}
.ph-chip.bad{color:var(--danger);background:color-mix(in oklab,var(--danger) 13%,transparent)}
.ph-issues{display:flex;flex-direction:column;gap:2px;margin-top:5px}
.ph-issue{font-size:11px;line-height:1.35;color:var(--t2)}
.ph-issue.bad{color:var(--danger);font-weight:650}

/* ============ THE SOFTPHONE (2026-09-05) + one-field New Text ============ */
.nt-hero{font-size:15px;font-weight:650;padding:12px 14px}
.sp-ovl{position:fixed;inset:0;z-index:2000;background:rgba(5,10,7,.82);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}
.sp-card{width:min(360px,92vw);background:var(--card);border:1px solid var(--line2,var(--line));border-radius:22px;padding:30px 24px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.sp-card h2{font-size:20px;color:var(--t1);font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sp-card p{color:var(--t3);font-size:13px;margin:0}
.sp-lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-top:2px}
.sp-pulse{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--acc) 16%,var(--card));color:var(--acc);margin-bottom:4px}
.sp-ringing .sp-pulse{animation:sp-ring 1.2s ease-in-out infinite}
@keyframes sp-ring{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in oklab,var(--acc) 40%,transparent)}50%{transform:scale(1.07);box-shadow:0 0 0 16px transparent}}
.sp-btns{display:flex;gap:26px;margin-top:14px}
.sp-b{width:60px;height:60px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff}
.sp-yes{background:#22a35b}
.sp-yes:hover{background:#1c8a4d}
.sp-no{background:#d64545;transform:rotate(135deg)}
.sp-no:hover{background:#b93b3b}
.sp-open{color:var(--acc);font-size:12px;font-weight:700;cursor:pointer;margin-top:8px}
.sp-row{display:flex;gap:8px;margin-top:6px}
.sp-pad{display:grid;grid-template-columns:repeat(3,58px);gap:8px;margin-top:10px;justify-content:center}
.sp-pad button{height:44px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--t1);font-size:16px;font-weight:700;cursor:pointer}
.sp-pad button:hover{background:var(--hover)}
.sp-echo{min-height:16px;font:13px ui-monospace,monospace;color:var(--t2);letter-spacing:2px}
@media (prefers-reduced-motion:reduce){.sp-ringing .sp-pulse{animation:none}}
/* THE MISSIONS (2026-09-05) — assign, watch live, get the verdict */
.ms-new{padding:12px 13px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.ms-new textarea{width:100%;border:1px solid var(--border);border-radius:10px;background:var(--input);color:var(--t1);font-family:inherit;font-size:12.5px;padding:9px 11px;resize:vertical;outline:none}
.ms-new textarea:focus,.ms-row input:focus{border-color:var(--accent)}
.ms-row{display:flex;align-items:center;gap:6px}
.ms-row input{flex:1;min-width:0;border:1px solid var(--border);border-radius:9px;background:var(--input);color:var(--t1);font-family:inherit;font-size:12.5px;padding:8px 10px;outline:none}
.ms-note{font-size:10.5px;color:var(--t3);line-height:1.5;margin:0}
.ms-list{overflow-y:auto}
.ms-card{padding:11px 13px;border-bottom:1px solid var(--border)}
.ms-card.ms-live{background:var(--accent-bg)}
.ms-top{display:flex;align-items:center;gap:8px}
.ms-to{font-size:11.5px;font-weight:600;color:var(--t2)}
.ms-when{margin-left:auto;font-size:10.5px;color:var(--t3)}
.ms-goal{font-size:12.5px;color:var(--t1);margin-top:6px;line-height:1.45}
.ms-outcome{display:flex;gap:6px;align-items:flex-start;font-size:12px;font-weight:600;color:var(--accent-tx);margin-top:6px;line-height:1.45}
.ms-acts{display:flex;gap:6px;margin-top:7px}
.ms-tx{margin-top:8px;border-top:1px dashed var(--border);padding-top:8px;display:flex;flex-direction:column;gap:5px;max-height:260px;overflow-y:auto}
.ms-bub{font-size:11.5px;line-height:1.5;color:var(--t2)}
.ms-bub.a b{color:var(--accent-tx)}
.ms-bub.u b{color:var(--t1)}
.ms-opts{display:flex;flex-wrap:wrap;gap:10px}
.ms-opt{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer}
.ms-opt input{accent-color:var(--accent)}
.ms-card.sel{background:var(--hover)}
.ms-pane{display:flex;flex-direction:column;height:100%;padding:14px 16px;gap:8px}
.ms-pane-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--t1)}
.ms-pane-st{margin-left:auto;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3)}
.ms-pane-goal{font-size:12px;color:var(--t2);line-height:1.5;border-bottom:1px solid var(--border);padding-bottom:8px}
.ms-pane-tx{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-top:4px;scroll-behavior:smooth}
.ms-whenwrap{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.ms-whenwrap input{border:1px solid var(--border);border-radius:8px;background:var(--input);color:var(--t1);font-family:inherit;font-size:11px;padding:5px 7px}
/* ===== THE ASSISTANT COMMAND CENTER v2 (his approved mockup cbed43bb) ===== */
/* v3 (mockup 61ac951f): the command bar is a BAND across the shell */
#clv.clv-ms{grid-template-rows:auto minmax(0,1fr)}
.ms-band{display:none;grid-column:1/-1;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--accent-bg),transparent 80%)}
#clv.clv-ms .ms-band{display:block}
.ms-band .ms-cmd{border-bottom:none;padding:14px 16px 12px}
.ms-band .ms-cmd-field textarea{font-size:14px;min-height:46px}
.ms-day{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);padding:12px 14px 5px}
/* the answers under the bar */
.ms-ans{display:flex;align-items:center;gap:12px;border-radius:12px;padding:9px 13px;margin-top:2px}
.ms-confirm{background:var(--accent-bg);border:1px solid var(--accent)}
.ms-confirm b{font-size:13px;color:var(--t1)}
.ms-confirm span:not(.ms-ans-ic):not(.ms-ans-num){display:block;font-size:11.5px;color:var(--t2);margin-top:1px}
.ms-ans-ic{width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--on-solid);display:grid;place-items:center;flex:none}
.ms-ans-num{margin-left:auto;font-size:13px;font-weight:700;color:var(--accent-tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-ans-x{border:none;background:none;color:var(--t3);font-family:inherit;font-size:11.5px;text-decoration:underline;cursor:pointer;white-space:nowrap}
.ms-err{background:rgba(220,38,38,.10);border:1px solid #dc2626;color:var(--t1)}
.ms-err svg{color:#dc2626;flex:none}
.ms-err b{font-size:12.5px;font-weight:600}
:root[data-theme="dark"] .ms-err{border-color:#fca5a5}:root[data-theme="dark"] .ms-err svg{color:#fca5a5}
.ms-choice{margin-top:2px}
.ms-choice-c{display:grid}
@media(min-width:700px){.ms-choice .ms-choice-c{display:inline-grid;width:calc(33.33% - 5px);vertical-align:top}.ms-choice{display:block}.ms-choice .ms-choice-c+.ms-choice-c{margin-left:6px}}
/* the pane's quick start */
.ms-qs{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:28px 32px;min-height:100%}
.ms-qs h3{font-size:15px;font-weight:800;margin:0 0 6px}
.ms-qs p{font-size:12.5px;color:var(--t2);line-height:1.6;max-width:54ch;margin:0}
.ms-qs-eg{display:grid;gap:8px}
.ms-qs-eg button{text-align:left;border:1px dashed var(--border);background:var(--card);color:var(--t2);font-family:inherit;font-size:12.5px;padding:10px 13px;border-radius:10px;cursor:pointer}
.ms-qs-eg button:hover{border-style:solid;border-color:var(--accent);color:var(--t1)}
.ms-qs-next{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2);border-top:1px solid var(--border);padding-top:14px}
.ms-cmd{padding:11px 12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.ms-cmd-field{display:flex;align-items:flex-end;gap:8px;background:var(--input);border:1.5px solid var(--border);border-radius:13px;padding:5px 5px 5px 13px;transition:border-color .15s}
.ms-cmd-field:focus-within{border-color:var(--accent)}
.ms-cmd-field textarea{flex:1;border:none;outline:none;background:none;font-family:inherit;font-size:13px;line-height:1.55;color:var(--t1);resize:none;padding:7px 0;min-height:44px}
.ms-cmd-mic .dict-field{background:var(--accent-bg);border-radius:9px;height:36px;width:36px;display:grid;place-items:center}
/* LISTENING must be visible (his "there is no waves and button click does
   nothing"): this rule sits later than .dict-field.dict-on and, at equal
   specificity, was silently overriding the ON face — the mic was recording
   with no change on screen. The on-state is now louder than the off-state:
   accent fill + a breathing ring. */
.ms-cmd-mic .dict-field.dict-on{background:var(--accent);color:var(--on-solid);box-shadow:0 0 0 0 var(--accent);animation:dictring 1.2s ease-out infinite}
@keyframes dictring{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}100%{box-shadow:0 0 0 12px rgba(22,163,74,0)}}
.ms-cmd-go{display:flex;align-items:center;gap:6px;background:var(--accent);color:var(--on-solid);border:none;font-family:inherit;font-size:12.5px;font-weight:700;padding:0 15px;height:36px;border-radius:9px;cursor:pointer;flex:none}
.ms-cmd-go:hover{background:var(--accent2)}
.ms-cmd-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.ms-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card);color:var(--t2);font-family:inherit;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;cursor:pointer}
.ms-chip:hover{border-color:var(--accent)}
.ms-chip.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-tx)}
.ms-chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.ms-chip.when{margin-left:auto}
.ms-at{border:1px solid var(--border);border-radius:8px;background:var(--input);color:var(--t1);font-family:inherit;font-size:11px;padding:5px 7px}
/* timeline cards: the status spine */
.ms-card{position:relative;padding:10px 12px;border-bottom:1px solid var(--border);border-left:4px solid var(--border);cursor:pointer}
.ms-card:hover{background:var(--hover)}
.ms-card.sel{background:var(--hover);box-shadow:inset -2px 0 0 var(--accent)}
.ms-card.sp-live{border-left-color:var(--accent);background:linear-gradient(90deg,var(--accent-bg),transparent 60%)}
.ms-card.sp-done{border-left-color:var(--accent)}
.ms-card.sp-sched{border-left-color:#f59e0b}
.ms-card.sp-fail{border-left-color:#dc2626}
.ms-pill{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:3px 8px}
.ms-pill.live{background:var(--accent);color:var(--on-solid)}
.ms-pill.done{background:var(--accent-bg);color:var(--accent-tx)}
.ms-pill.sched{background:rgba(245,158,11,.15);color:#b45309}
.ms-pill.fail{background:rgba(220,38,38,.12);color:#dc2626}
.ms-pill.off{background:var(--bg);color:var(--t3)}
.ms-livedot{width:6px;height:6px;border-radius:50%;background:#fff;animation:msblink 1.5s infinite}
.ms-livedot.big{width:9px;height:9px;background:var(--accent);flex:none}
@keyframes msblink{50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){.ms-livedot,.ms-eq i{animation:none}}
.ms-verdict{display:flex;gap:7px;margin-top:8px;font-size:12px;font-weight:600;line-height:1.5;color:var(--accent-tx)}
.ms-verdict.no{color:#b45309}
.ms-verdict svg{flex:none;margin-top:2px}
/* v3 cards read in one line each: name, then the goal, then the verdict */
.ms-card .ms-goal,.ms-card .ms-verdict span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ms-card .ms-verdict{margin-top:4px;font-size:11.5px;align-items:center}
.ms-card .ms-verdict svg{margin-top:0}
.ms-card .ms-verdict.bad{color:#dc2626}
:root[data-theme="dark"] .ms-card .ms-verdict.bad{color:#fca5a5}
:root[data-theme="dark"] .ms-verdict.no{color:#fcd34d}
.ms-card .ms-goal{margin-top:5px;font-size:12px}
/* the live pane v2 */
.ms-pane-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)}
.ms-pane-h.live{background:linear-gradient(180deg,var(--accent-bg),transparent)}
.ms-pane-t{font-size:13.5px;font-weight:800;color:var(--t1);display:flex;flex-direction:column}
.ms-pane-sub{font-size:10.5px;font-weight:600;color:var(--t3);text-transform:capitalize}
.ms-listen{display:flex;align-items:center;gap:8px;margin-left:auto;border:none;border-radius:999px;background:var(--accent);color:var(--on-solid);font-family:inherit;font-size:12px;font-weight:700;padding:8px 15px;cursor:pointer}
.ms-listen:hover{background:var(--accent2)}
.ms-listen.off{background:var(--card);color:var(--t2);border:1px solid var(--border)}
.ms-listen.off:hover{border-color:var(--accent);color:var(--accent-tx);background:var(--card)}
.ms-eq{display:flex;align-items:center;gap:2px;height:13px}
.ms-eq i{width:3px;background:currentColor;border-radius:2px;animation:mseq 1s infinite ease-in-out}
.ms-eq i:nth-child(1){height:6px}.ms-eq i:nth-child(2){height:12px;animation-delay:.15s}
.ms-eq i:nth-child(3){height:8px;animation-delay:.3s}.ms-eq i:nth-child(4){height:13px;animation-delay:.45s}
@keyframes mseq{50%{transform:scaleY(.4)}}
.ms-pane-tx{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:9px;background:var(--bg);scroll-behavior:smooth}
.ms-bub{max-width:84%;font-size:12.5px;line-height:1.55;padding:8px 12px;border-radius:13px}
.ms-bub.them{align-self:flex-start;background:var(--card);border:1px solid var(--border);color:var(--t1);border-bottom-left-radius:5px}
.ms-bub.her{align-self:flex-end;background:var(--accent);color:var(--on-solid);border-bottom-right-radius:5px}
.ms-bub .who{display:block;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-bottom:2px}
.ms-bub.sys{align-self:center;background:none;border:none;color:var(--t3);font-size:11px;font-style:italic;padding:1px}
/* ===== CALL-AROUND (mockup f35bc7bc) ===== */
.ms-chip.mode.on{background:var(--t1);border-color:var(--t1);color:var(--card)}
.ms-fields{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:var(--t3)}
.ms-fields b{color:var(--t2);font-weight:700;margin-right:2px}
.ms-fld{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--border);border-radius:8px;padding:4px 9px;color:var(--t1);font-weight:600;background:var(--card)}
.ms-fld i{font-style:normal;color:var(--t3);cursor:pointer}
.ms-fld.add{border-style:solid;color:var(--accent-tx);cursor:pointer}
.ms-set{margin-top:10px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.ms-set-l{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--t1);margin-bottom:8px;flex-wrap:wrap}
.ms-set-l span{font-weight:500;color:var(--t3)}
.ms-set-l .ms-cmd-go{margin-left:auto;height:34px}
.ms-places{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}
/* Design Law 26: every child pinned — the tall-card scar */
.ms-pl{display:grid;grid-template-columns:18px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:1px 10px;align-items:center;min-height:50px;padding:7px 11px;border:1px solid var(--border);border-radius:11px;background:var(--card);cursor:pointer}
.ms-pl:hover{border-color:var(--accent)}
.ms-pl.off{opacity:.45}
.ms-pl .ck{grid-column:1;grid-row:1/3;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border);display:grid;place-items:center;color:#fff;font-size:11px}
.ms-pl:not(.off) .ck{background:var(--accent);border-color:var(--accent)}
.ms-pl b{grid-column:2;grid-row:1;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-pl span{grid-column:2;grid-row:2;font-size:11px;color:var(--t3);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-pl i{grid-column:3;grid-row:1/3;font-style:normal;font-size:11px;font-weight:700;color:var(--accent-tx);white-space:nowrap;font-variant-numeric:tabular-nums}
.ms-pl i.closed{color:#b45309}
:root[data-theme="dark"] .ms-pl i.closed{color:#fcd34d}
.ms-set-x{margin-top:8px;font-size:11.5px;color:var(--t3)}
.ms-set-x u{cursor:pointer}
.ms-pill.camp{background:var(--t1);color:var(--card)}
.ms-prog{height:5px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:6px}
.ms-prog i{display:block;height:100%;background:var(--accent)}
.ms-kids{margin:-2px 8px 8px 22px;border-left:2px solid var(--border);padding-left:10px;display:flex;flex-direction:column;gap:4px}
.ms-kid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:11.5px;padding:6px 8px;border-radius:8px;background:var(--card);border:1px solid var(--border);cursor:pointer}
.ms-kid:hover,.ms-kid.sel{border-color:var(--accent)}
.ms-kid b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-kid em{font-style:normal;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.ms-read{margin:12px 16px 0;padding:11px 14px;border-radius:12px;background:var(--accent-bg);border:1px solid var(--accent);font-size:12.5px;line-height:1.55;color:var(--t1)}
.ms-read.wait{background:var(--bg);border-color:var(--border);color:var(--t2)}
.ms-tbl{margin:12px 16px 0;border:1px solid var(--border);border-radius:12px;overflow:auto;flex:1}
.ms-tbl table{width:100%;border-collapse:collapse;font-size:12px;min-width:520px}
.ms-tbl th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:9px 11px;border-bottom:1px solid var(--border);background:var(--bg);white-space:nowrap}
.ms-tbl td{padding:9px 11px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--t1)}
.ms-tbl tr{cursor:pointer}.ms-tbl tbody tr:hover td{background:var(--hover)}
.ms-tbl tr:last-child td{border-bottom:none}
.ms-tbl td small{display:block;color:var(--t3);font-size:11px;margin-top:2px}
.ms-tbl-dash{color:var(--t3)}
.ms-tbl-st{color:var(--t2)}.ms-tbl-st.bad{color:#b45309}
:root[data-theme="dark"] .ms-tbl-st.bad{color:#fcd34d}
/* her plan (the mission brief) + the place line */
.ms-pane-place{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:11px;color:var(--t3)}
.ms-plan{margin:10px 16px 0;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.ms-plan summary{display:flex;align-items:center;gap:7px;padding:9px 13px;cursor:pointer;list-style:none;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.ms-plan summary::-webkit-details-marker{display:none}
.ms-plan-r{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding:0 13px 9px;font-size:12px;color:var(--t1);line-height:1.5}
.ms-plan-r b{flex:0 0 76px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.ms-plan-chip{display:inline-block;background:var(--accent-bg);color:var(--accent-tx);border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:600}
.ms-plan-chip.no{background:rgba(220,38,38,.10);color:#b91c1c}
:root[data-theme="dark"] .ms-plan-chip.no{color:#fca5a5}
/* She remembers (call memory): a menu key that led nowhere is red, one that
   reached someone is accent, an unpressed one is quiet */
.ms-plan-chip.ok{background:rgba(22,163,74,.12);color:#15803d}
:root[data-theme="dark"] .ms-plan-chip.ok{color:#86efac}
.ms-plan-chip.dim{background:var(--bg);color:var(--t2);font-weight:500}
.ms-mem-n{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none;color:var(--t3)}
.ms-mem-tips{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.ms-mem-tips span{position:relative;padding-left:12px}
.ms-mem-tips span::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
/* the whisper row: text she does on her next turn (the conference wave) */
.ms-whisper{display:flex;gap:8px;padding:10px 16px 0;align-items:center}
.ms-whisper input{flex:1;min-width:0;border:1px solid var(--border);border-radius:9px;background:var(--input);color:var(--t1);font-family:inherit;font-size:12.5px;padding:8px 11px;outline:none}
.ms-whisper input:focus{border-color:var(--accent)}
.ms-pane-f{display:flex;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid var(--border);flex-wrap:wrap}
.ms-end:hover{border-color:#dc2626;color:#dc2626}
.ms-soon{font-size:8.5px;font-weight:800;letter-spacing:.05em;background:rgba(245,158,11,.15);color:#b45309;border-radius:5px;padding:1px 5px;text-transform:uppercase;margin-left:4px}
.ms-pane-note{margin-left:auto;font-size:10.5px;color:var(--t3)}

.ms-note{margin:0;font-size:10px;color:var(--t3);line-height:1.45}
/* the chooser: "which one should she call?" — candidates as full-width
   rows (name · address · number), nothing dials until one is tapped */
.ms-choice{margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);display:flex;flex-direction:column;gap:6px}
.ms-choice-l{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--warn-tx,#b45309)}
.ms-choice-c{display:grid;grid-template-columns:1fr auto;gap:1px 10px;text-align:left;padding:8px 11px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--t1);cursor:pointer;font-family:inherit}
.ms-choice-c:hover{border-color:var(--accent);background:var(--hover)}
.ms-choice-c b{font-size:12.5px;font-weight:700}
.ms-choice-c span{grid-column:1;font-size:11px;color:var(--t3)}
.ms-choice-c i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:11.5px;font-weight:600;color:var(--accent-tx,var(--accent));font-variant-numeric:tabular-nums}
.ms-choice-x{align-self:flex-start}
.ms-acts{display:flex;gap:6px;margin-top:7px}

.ms-ed{border-top:1px dashed var(--border);padding:11px 16px;display:flex;flex-direction:column;gap:7px;background:var(--card)}
.ms-ed-l{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.ms-ed textarea{width:100%;border:1px solid var(--border);border-radius:10px;background:var(--input);color:var(--t1);font-family:inherit;font-size:12.5px;line-height:1.5;padding:8px 11px;resize:vertical;outline:none}
.ms-ed textarea:focus,.ms-ed-row input:focus{border-color:var(--accent)}
.ms-ed-row{display:flex;align-items:center;gap:8px}
.ms-ed-row input{flex:1;border:1px solid var(--border);border-radius:9px;background:var(--input);color:var(--t1);font-family:inherit;font-size:12px;padding:7px 9px;outline:none}

/* ===== THE MONEY RAIL, Wave 2 (2026-09-09): the New invoice sheet's lines editor and totals ===== */
.mf-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mf-lines{margin:4px 0 8px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--card)}
.mf-lh,.mf-line{display:grid;grid-template-columns:1fr 56px 96px 28px;gap:6px;align-items:center}
.mf-lh{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);padding:0 0 4px}
.mf-line{padding:3px 0}
.mf-line input{width:100%;min-width:0;padding:8px 9px;border:1.5px solid transparent;border-radius:8px;background:var(--bg);color:var(--t1);font:var(--ff);font-size:13px;outline:none}
.mf-line input:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.mf-line .mf-qty,.mf-line .mf-unit{text-align:right;font-variant-numeric:tabular-nums}
.mf-line .mf-del{width:28px;height:28px;color:var(--t3)}
.mf-add{margin-top:6px}
.mf-disc{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.mf-disc input,.mf-disc select{padding:7px 9px;border:1.5px solid transparent;border-radius:8px;background:var(--bg);color:var(--t1);font:var(--ff);font-size:12.5px;outline:none}
.mf-disc input{width:96px;text-align:right}
.mf-disc input:focus,.mf-disc select:focus{border-color:var(--accent)}
.mf-tot{background:var(--bg);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:12.5px}
.mf-tr{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0;color:var(--t2)}
.mf-tr b{color:var(--t1);font-variant-numeric:tabular-nums}
.mf-tr b i{font-style:normal;font-size:10px;color:var(--t3)}
.mf-tb{border-top:1px solid var(--border);margin-top:6px;padding-top:6px;font-size:14px;color:var(--t1)}
.mf-sum{background:var(--bg);border-radius:10px;padding:4px 12px;margin-bottom:8px;font-size:12.5px}
.mf-sum .cp-f{border-bottom:1px solid var(--border)}
.mf-sum .cp-f:last-child{border-bottom:none}
@media(max-width:768px){.mf-2{grid-template-columns:1fr}.mf-lh,.mf-line{grid-template-columns:1fr 48px 84px 28px}}
/* the Flow Standard never shows native controls: no spinner on the money fields */
.mf-line input[type=number]::-webkit-inner-spin-button,.mf-line input[type=number]::-webkit-outer-spin-button,.mf-disc input[type=number]::-webkit-inner-spin-button,.mf-disc input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.mf-line input[type=number],.mf-disc input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* a badge or chip inside a timeline row's text stays inline: .cp-rb span is the
   two-line clamp for the SUBTITLE, and it was swallowing the sync chips (S / Q
   painted as full-width blocks on the customer Money card, measured 2026-09-09) */
/* 2026-10-04: the same rule swallowed the timeline's own status chips (SENT, OPENED, BOUNCED, NOT SENT painted as
   full-width bars under the title, seen in the 1x capture of the "not sent" row); the 09-09 fix covered .badge only */
.cp-rb .badge,.cp-rb .cp-chip{display:inline-flex;vertical-align:middle;-webkit-line-clamp:unset;white-space:nowrap;overflow:visible}
/* the full-screen flow (def.full): a centred panel with room for two columns;
   the phone keeps the bottom sheet it already knows */
.flow-full{width:min(1180px,96vw);left:50%;right:auto;top:2.5vh;bottom:2.5vh;transform:translateX(-50%);border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 80px rgba(15,23,42,.45);animation:flowfull .18s ease}
@keyframes flowfull{from{transform:translateX(-50%) translateY(14px);opacity:.4}to{transform:translateX(-50%);opacity:1}}
.flow-full .flow-b{padding:18px 22px}
@media(max-width:768px){.flow-full{width:100%;left:0;top:auto;bottom:0;transform:none;border-radius:18px 18px 0 0;border:none;animation:flowup .2s ease}}
/* the invoice sheet's two columns */
.mf-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:22px;align-items:start}
.mf-col{min-width:0}
.mf-side{position:sticky;top:0}
@media(max-width:900px){.mf-grid{grid-template-columns:1fr}.mf-side{position:static}}
/* the catalogue dropdown under a line's description */
.mf-line{position:relative}
.mf-sugg{display:none;position:absolute;top:calc(100% - 2px);left:0;width:min(520px,100%);background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shlg);z-index:30;max-height:260px;overflow:auto;padding:4px}
.mf-sugg.open{display:block}
.mf-so{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;font-size:12.5px;cursor:pointer}
.mf-so:hover,.mf-so.on{background:var(--hover)}
.mf-so .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-so .p{font-variant-numeric:tabular-nums;font-weight:700;color:var(--t1)}
.mf-so .p i{font-style:normal;font-weight:500;font-size:10.5px;color:var(--t3)}
.mf-src{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:20px;background:var(--bg);color:var(--t3);flex:none}
.mf-src.stripe{color:#635bff;background:rgba(99,91,255,.12)}
.mf-src.qbo{color:#2ca01c;background:rgba(44,160,28,.12)}
.mf-src.crm{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.mf-rec{font-size:9.5px;font-weight:700;color:var(--t3)}

/* ---------- Devices card (contact profile) ---------- */
.dv-n{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);margin-left:auto;margin-right:8px}
.dv-row{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--border)}
.dv-row:last-child{border-bottom:none}
.dv-row>svg{color:var(--t3);flex:none;margin-top:1px}
.dv-b{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.dv-b b{font-size:12.5px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-m{font-size:11px;color:var(--t2)}
.dv-ip{font-size:10.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.dv-note{display:flex;align-items:flex-start;gap:7px;font-size:11px;color:var(--t3);margin:0;line-height:1.55}
.dv-note>svg{flex:none;margin-top:2px}

/* ---------- pictures in a text (2026-09-14) ---------- */
.thr-pic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border:none;background:transparent;color:var(--t2);border-radius:50%;cursor:pointer}
.thr-pic:hover{background:var(--bg);color:var(--t1)}
.thr-pic-strip{padding:6px 0 0}

/* ---------- EMOJI (2026-09-22, "great now i want emojies in this chat") ----------
   The button lives in the composer row on a desktop only: a phone keyboard already carries emoji, and a fifth
   control in that row is what crushed the box she types in to 93px. The panel is anchored over the button by
   js/emoji.js (fixed, flipped above, clamped) so it never covers the field she is about to type in. */
.thr-emo{width:38px;height:38px;flex:none;border:none;border-radius:50%;background:transparent;color:var(--t2);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.thr-emo:hover{background:var(--bg);color:var(--t1)}
.thr-emo[aria-expanded="true"]{background:var(--accent-bg);color:var(--accent-tx)}
@media(max-width:768px){.thr-emo{display:none}}
.emo-p{position:fixed;z-index:1400;width:min(392px,calc(100vw - 20px));background:var(--card);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shlg);overflow:hidden;display:flex;flex-direction:column;max-height:min(438px,calc(100vh - 24px));
  animation:emoIn .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes emoIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.emo-top{display:flex;align-items:center;gap:8px;padding:9px 10px;flex:none}
.emo-t{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);flex:none}
.emo-find{flex:1;min-width:0;position:relative;display:flex;align-items:center}
.emo-find svg{position:absolute;left:11px;color:var(--t3);pointer-events:none}
.emo-q{width:100%;min-width:0;border:1px solid var(--border);background:var(--bg);color:var(--t1);border-radius:999px;
  padding:7px 12px 7px 31px;font-family:inherit;font-size:12.5px}
.emo-q:focus{outline:none;border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px var(--accent-bg)}
.emo-tone{flex:none;width:28px;height:28px;border:1px solid var(--border);background:var(--card);border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.emo-tone:hover{background:var(--hover)}
.emo-tone i{width:14px;height:14px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.emo-tonepop{position:fixed;z-index:1500;display:flex;gap:3px;padding:5px;border-radius:999px;background:var(--card);
  border:1px solid var(--border);box-shadow:var(--shlg);opacity:0;transform:scale(.85);transform-origin:top right;
  transition:.18s cubic-bezier(.34,1.56,.64,1)}
.emo-tonepop.on{opacity:1;transform:none}
.emo-tonepop button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.emo-tonepop button:hover{transform:scale(1.15)}
.emo-tonepop button.on{border-color:var(--accent)}
.emo-x{flex:none;width:28px;height:28px;border:none;background:transparent;color:var(--t3);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.emo-x:hover{background:var(--hover);color:var(--t1)}
/* the rail: lucide glyphs (law 16 - a category TAB is interface), with an indicator that slides between them */
.emo-rail{display:flex;align-items:center;gap:1px;padding:0 8px 6px;position:relative;border-bottom:1px solid var(--border);flex:none}
.emo-rail .emo-ind{position:absolute;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--accent);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),width .3s cubic-bezier(.34,1.56,.64,1)}
.emo-rail button{flex:1;height:32px;border:none;background:transparent;color:var(--t3);border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.16s}
.emo-rail button:hover{background:var(--hover);color:var(--t1)}
.emo-rail button.on{color:var(--accent-tx)}
/* POSITIONED ON PURPOSE: the scroll spy compares a header offsetTop against this element scrollTop, and with no
   position the offsetParent is the fixed panel, so the two numbers were measured from different origins and the
   rail pointed at the wrong group. Measured 2026-09-22: header at 389, max scroll 272. */
.emo-body{flex:1;overflow-y:auto;padding:2px 8px 6px;scrollbar-width:thin;scroll-behavior:smooth;position:relative}
/* sticky, so a long scroll always says where it is */
.emo-h{position:sticky;top:0;background:var(--card);font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.45px;color:var(--t3);padding:9px 4px 5px;z-index:2}
.emo-g{display:grid;grid-template-columns:repeat(9,1fr);gap:1px}
.emo-b{position:relative;border:none;background:transparent;font-size:21px;line-height:1;padding:5px 0;border-radius:10px;cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .14s;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emo-b:hover,.emo-b.on{background:var(--hover);transform:scale(1.22);z-index:1}
.emo-b.on{box-shadow:0 0 0 2px var(--accent)}
.emo-b:active{transform:scale(.88)}
/* a 3px dot marks a glyph that has skin tones. At 4px, as a triangle, it read as a render artifact. */
.emo-b.emo-t1::after{content:"";position:absolute;right:4px;bottom:4px;width:3px;height:3px;border-radius:50%;background:var(--t3);opacity:.35}
.emo-b.emo-t1:hover::after{opacity:.7}
.emo-b.picked{animation:emoPicked .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes emoPicked{0%{transform:scale(1)}40%{transform:scale(.8)}100%{transform:scale(1)}}
.emo-skin{position:fixed;z-index:1500;display:flex;gap:2px;padding:5px 6px;border-radius:999px;background:var(--card);
  border:1px solid var(--border);box-shadow:var(--shlg);opacity:0;transform:scale(.82);transform-origin:bottom center;
  transition:.18s cubic-bezier(.34,1.56,.64,1)}
.emo-skin.on{opacity:1;transform:none}
.emo-skin button{border:none;background:transparent;font-size:20px;line-height:1;padding:3px 5px;border-radius:9px;cursor:pointer;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;transition:transform .16s}
.emo-skin button:hover{transform:scale(1.22);background:var(--hover)}
/* THE PREVIEW FOOTER. This is the single thing that separates a picker from a wall of faces: it names what is
   under the pointer, so a glyph is chosen rather than guessed at. */
.emo-foot{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--border);background:var(--card);
  min-height:46px;flex:none}
.emo-fg{font-size:24px;line-height:1;width:28px;text-align:center;flex:none;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emo-ft{min-width:0;flex:1}
.emo-ft b{display:block;font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emo-ft span{display:block;font-size:10.5px;color:var(--t3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emo-keys{margin-left:auto;display:flex;align-items:center;gap:3px;flex:none}
.emo-keys kbd{font-family:inherit;font-size:9.5px;font-weight:700;color:var(--t2);background:var(--bg);border:1px solid var(--border);
  border-bottom-width:2px;border-radius:5px;padding:2px 5px;min-width:18px;text-align:center}
@media(max-width:560px){.emo-keys{display:none}.emo-g{grid-template-columns:repeat(8,1fr)}}
.emo-none{padding:22px 12px;font-size:12px;color:var(--t3);text-align:center}
.emo-none b{display:block;color:var(--t2);font-size:12.5px;margin-bottom:3px}
/* the bubbles and the box carry an emoji font too, or Windows draws them as outlines */
.bub,.thr-inrow textarea,.sms-row .sms-b,.mbx-p-subj{font-family:inherit,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji"}

.thr-pic-tray{display:none}
@media(max-width:768px){
  /* the phone row is [+][field][mic][send]: the camera is the tray's first item, and the field gets its width back */
  .thr-inrow .thr-pic{display:none}
  .thr-pic-tray{display:inline-flex}
  /* one height for the whole tray: Templates carried the 44px touch floor and its neighbours were 28px, so the
     row looked uneven and two of three targets were under the floor every other phone control here meets */
  .thr-cmp.tools-open .thr-bar-one>.btn,.thr-cmp.tools-open .thr-bar-one .mt-bar-s>.btn{min-height:44px}
  .thr-cmp.tools-open .thr-bar-one{align-items:center}
  .thr-inrow textarea{padding-left:13px;padding-right:13px}
}
.smspic{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);
  border-radius:10px;padding:5px 8px 5px 5px;max-width:100%}
.smspic img{width:34px;height:34px;object-fit:cover;border-radius:7px;flex:none}
.smspic span{font-size:11.5px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smspic-x{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;
  border:none;background:transparent;color:var(--t3);cursor:pointer;border-radius:50%}
.smspic-x:hover{background:var(--border);color:var(--t1)}
/* the picture IS the message: it sits above any words and fills the bubble edge to edge */
.bub-pics{display:flex;flex-direction:column;gap:4px;margin:-2px -2px 6px}
.bub-pics img{display:block;max-width:230px;width:100%;border-radius:10px;background:var(--bg)}
/* a Twilio picture is fetched with the session's headers, so it lands a beat after its
   bubble: hold the space instead of flashing a broken icon (2026-09-15) */
.bub-pics img.bub-pic-wait{min-height:120px;min-width:160px;opacity:.55}
.bub-pic-fail{display:block;font-size:11px;padding:6px 0;opacity:.75}
.bub.bub-pic{padding:4px 4px 2px}
.bub.bub-pic .bub-pics{margin-bottom:2px}

/* ================= THE CAMPAIGN REBUILD (2026-09-15) =================
   Measured before it: one column 3,616px tall, 1.3 screens of tag pills before you could write a
   word, and the preview 2.3 screens below the canvas it previews. Three steps, content first,
   and the email beside the thing that writes it. */

/* ---- the step nav ---- */
.camp-steps{display:flex;gap:4px;background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:4px;margin:0 0 16px}
.camp-step{flex:1;border:none;background:transparent;color:var(--t2);padding:9px 12px;
  border-radius:7px;font:var(--ff);font-weight:600;font-size:13.5px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px}
.camp-step:hover{color:var(--t1);background:var(--hover)}
/* Ink on the accent. This started as its own --on-accent token on the morning of the same day,
   which was one token too many: the design system already had --on-solid for exactly this and had
   simply never been given a value that passed. Folded in, so there is ONE answer to "what colour
   is text on a filled accent" rather than two that could drift. */
.camp-step.on{background:var(--accent);color:var(--on-solid)}
.camp-step.on:hover{background:var(--accent)}
.camp-step-n{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:rgba(148,163,184,.2);font-size:11px;font-weight:700;flex:none}
.camp-step.on .camp-step-n{background:rgba(3,26,19,.22)}
.camp-step-ok{display:inline-flex;color:var(--accent);line-height:0}
.camp-step.on .camp-step-ok{color:var(--on-solid)}
.camp-step-ok svg{width:13px;height:13px}

/* ---- the canvas beside the preview ---- */
/* THE EDITOR OPTS OUT OF THE READING-WIDTH CAP. .pc-pad holds every page to 920px, which is
   right for a profile or a settings form and wrong for a two-column editor: it left 235px of
   the window empty and squeezed the writing canvas to 504px. This screen takes the width it is
   given, with a ceiling so it does not sprawl on an ultrawide. */
/* BOTH campaign screens opt out of the reading-width cap, not just the editor. Shipping only the
   editor left the LIST at 920px with a quarter of the window empty beside a six column table. */
.camp-editor,.camp-wide{max-width:1560px}
.camp-split{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:18px;align-items:start}
.camp-canvas{min-width:0}
/* STICKY, so the email stays with you while the blocks scroll. 16px matches the page gutter. */
.camp-prevcol{position:sticky;top:16px;min-width:0}
.camp-prevcol .nb-prev-bar{border-radius:10px 10px 0 0}
/* A DESKTOP PREVIEW MUST BE 600px WIDE OR IT IS NOT A DESKTOP PREVIEW. The column is 400px, so
   the email renders at its real width and is SCALED to fit, rather than being squeezed into a
   width no inbox uses. The wrapper height follows the scale so nothing is clipped. */
.camp-prevcol .nb-prev-wrap{padding:14px 0;overflow:hidden}
.camp-prevcol .nb-prev-frame{max-width:600px;width:600px;transform:scale(.78);transform-origin:top center}
.camp-prevcol .nb-prev-wrap{height:430px}
/* mobile is 375px, which very nearly fits as-is: a gentler scale keeps it honest */
.camp-prevcol .nb-prev-wrap.nb-mobile .nb-prev-frame{width:375px;max-width:375px;transform:none}
.camp-prevcol .nb-prev-wrap.nb-mobile{height:548px}
@media(max-width:1000px){
  /* stacked, the column is full width again, so nothing needs scaling */
  .camp-prevcol .nb-prev-frame{transform:none;width:100%}
  .camp-prevcol .nb-prev-wrap,.camp-prevcol .nb-prev-wrap.nb-mobile{height:auto;padding:16px}
}
@media(max-width:1000px){
  .camp-split{grid-template-columns:1fr}
  /* on a phone the thing you want after a change is the RESULT, not more controls */
  .camp-prevcol{position:static;order:-1}
}

/* ---- the audience, as a sentence ---- */
.camp-audline .cb{padding:16px 18px}
.camp-audrow{display:flex;align-items:center;gap:16px}
.camp-audtext{flex:1;min-width:0}
.camp-audsent{font-size:16px;line-height:1.5;color:var(--t1)}
.camp-audsent b{color:var(--accent)}
.camp-audsub{margin-top:5px;font-size:13px;color:var(--t3)}
@media(max-width:600px){.camp-audrow{flex-direction:column;align-items:stretch;gap:12px}}

/* ---- the drawer the pickers moved into ---- */
.camp-drawer{position:fixed;inset:0;background:rgba(2,6,15,.55);z-index:60;display:none}
.camp-drawer.on{display:block}
.camp-drawer-p{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--card);
  border-left:1px solid var(--border);box-shadow:var(--shlg);display:flex;flex-direction:column;
  animation:campDrawerIn .18s ease both}
@keyframes campDrawerIn{from{transform:translateX(18px);opacity:.6}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.camp-drawer-p{animation:none}}
.camp-drawer-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex:none}
.camp-drawer-h .ct{flex:1;font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
.camp-drawer-b{padding:16px;overflow:auto;flex:1;min-height:0}
.camp-drawer-f{padding:12px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex:none}
/* inside the drawer the picker has the whole panel, so it can breathe instead of being a wall */
.camp-drawer-b .camp-pillbox{max-height:none}

/* ---- the list, as a table that tells you something ---- */
.camp-tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;margin-top:12px}
.camp-tbl th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t3);padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap;
  cursor:pointer;user-select:none}
.camp-tbl th:hover{color:var(--t1)}
.camp-ar{margin-left:5px;opacity:.6;font-size:9px}
.camp-tbl td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
.camp-tbl tr:last-child td{border-bottom:none}
.camp-tr{cursor:pointer}
.camp-tr:hover{background:var(--hover)}
.camp-tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.camp-n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.camp-grp td{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t3);background:var(--bg);padding:12px 14px 7px}
.camp-dash{color:var(--t3)}
.camp-stale{color:var(--warn-tx);font-size:10px;vertical-align:2px}
/* the bar is a shape you can scan down a column; the number beside it is the fact.
   NAMED .camp-rate, NOT .camp-bar: .camp-bar already existed as the list's toolbar, and defining
   it again as a 44x4 meter collapsed the New campaign button to a green sliver. A new class in a
   file this size gets checked against the file first. */
.camp-rate{display:inline-block;vertical-align:middle;width:44px;height:4px;border-radius:3px;
  background:var(--border);margin-right:8px;position:relative;overflow:hidden}
.camp-rate i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:3px}
/* the row action. The column is as narrow as its button and the header is not a sort target, so
   it must not inherit th's pointer cursor and hover colour. */
.camp-tbl th.camp-x{width:1%;cursor:default}
.camp-tbl th.camp-x:hover{color:var(--t3)}
.camp-tbl td.camp-x{width:1%;padding-left:0;text-align:right}
.camp-del{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  padding:0;border:0;border-radius:7px;background:transparent;color:var(--t3);cursor:pointer;
  opacity:0;transition:opacity .12s,color .12s,background .12s}
.camp-tr:hover .camp-del,.camp-tr:focus-within .camp-del{opacity:1}
.camp-del:hover{background:var(--danger-bg);color:var(--danger-tx)}
.camp-del:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:1px}
@media(hover:none){ .camp-del{opacity:1} }   /* a touch screen has no hover to reveal it with */
/* the same action inside the editor, where it is always visible because there is one campaign */
.camp-del-btn:hover{background:var(--danger-bg);color:var(--danger-tx)}
@media(max-width:760px){
  /* a phone keeps the campaign, its state and the one number that matters — and the delete,
     which is the reason the list gets opened on a phone at all. */
  .camp-tbl th:nth-child(3),.camp-tbl td:nth-child(3),
  .camp-tbl th:nth-child(4),.camp-tbl td:nth-child(4),
  .camp-tbl th:nth-child(6),.camp-tbl td:nth-child(6){display:none}
}

/* ---- the pre-flight ---- */
.camp-pf{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.camp-pf-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:12.5px;color:var(--t2);margin-bottom:10px}
.camp-pf ul{list-style:none;margin:0;padding:0}
.camp-pf li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.camp-pf li:last-child{border-bottom:none}
.camp-pf-i{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.camp-pf-i.y{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.camp-pf-i.n{background:rgba(252,211,77,.16);color:var(--warn-tx)}
.camp-pf-i.s{background:var(--border);color:var(--t3)}
.camp-pf-t{flex:1;font-size:13.5px;color:var(--t1)}
.camp-pf-t small{display:block;color:var(--t3);font-size:12px;margin-top:1px}
.camp-pf-f{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:12.5px;color:var(--t3)}
.camp-b18-q{opacity:.75}


/* ---------- MISSIONS: the questions before the call (2026-09-18) ----------
   Rides the .ms-choice card so it reads as the same family as "which one should she call?".
   Tokens only, so both themes follow; 44px targets for a thumb. */
.ms-detail-q{display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.ms-detail-q span{font-weight:600;color:var(--t1)}
.ms-detail-q input{min-height:44px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--t1);font:var(--ff);font-size:14px}
.ms-detail-q input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.ms-detail-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ms-detail-a .btn{min-height:40px}
/* measured on production 2026-09-18: at 1440 the field ran 1,100px wide for an answer like "2";
   at 386 "Cancel" wrapped alone onto a second row and the buttons were 40px. The field is capped,
   and on a phone the primary takes the first row, the two quiet ones share the second, all 44px. */
.ms-detail-q input{max-width:420px}
@media(max-width:640px){
  .ms-detail-q input{max-width:none}
  .ms-detail-a .btn{min-height:44px;flex:1 1 0;justify-content:center}
  .ms-detail-a .btn-primary{flex:1 1 100%}
}
/* ============================================================
   THE CARDS ON FILE (2026-09-19). Labels only: brand, last four, expiry.
   Colour comes from the tokens, so both themes follow the app without a
   second definition here; the brand mark is a monospace chip rather than a
   logo, because a logo per network is eight images for no information. */
.wl-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.wl-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.wl-def{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.wl-brand{font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;padding:6px 7px;border-radius:5px;background:var(--hover);color:var(--t2);min-width:46px;text-align:center}
.wl-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wl-b b{font-size:13px;font-weight:700;text-transform:capitalize}
.wl-b span{font-size:11px;color:var(--t3)}
.wl-t{display:flex;align-items:center;white-space:nowrap}
.wl-a{display:flex;gap:6px;white-space:nowrap}
.wl-empty{padding:14px;border:1px dashed var(--border);border-radius:10px;text-align:center;margin:10px 0}
.wl-empty b{display:block;font-size:13px}
.wl-empty div{font-size:11px;color:var(--t3);margin-top:3px}
.wl-sec{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.wl-sec-h{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t2);margin-bottom:8px}
.wl-con{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;background:var(--hover)}
.wl-con b{font-size:12px}
.wl-con span{font-size:11px;color:var(--t3)}
.wl-con-none b{color:var(--warn)}
.wl-consent-btns,.wl-add{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wl-plan{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
/* CHOOSING WHICH CARD TO CHARGE (2026-10-07). Tokens only: this sits inside the flow dialog, which is
   painted in both themes, and a literal colour here is the one that goes wrong in the other one. */
.wl-pick{display:flex;flex-direction:column;gap:2px;margin:8px 0 12px}
.wl-pick-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border);border-radius:9px;cursor:pointer;color:var(--t1);font-size:13.5px}
.wl-pick-row:hover{border-color:var(--accent)}
.wl-pick-row input{accent-color:var(--accent);margin:0}
.wl-pick-row i{font-style:normal;color:var(--t3);font-size:11.5px}
.wl-pick-row.is-off{opacity:.55;cursor:not-allowed}
.wl-pick-row.is-off:hover{border-color:var(--border)}
.wl-plan:last-child{border-bottom:0}
.wl-sel{font-size:11px;padding:5px 7px;border-radius:7px;border:1px solid var(--border);background:var(--card);color:var(--t1);max-width:180px}
@media(max-width:520px){
  .wl-card{flex-wrap:wrap}
  .wl-a{width:100%;justify-content:flex-end}
  .wl-plan{flex-wrap:wrap}
  .wl-sel{max-width:100%;width:100%}
}

/* ============================================================
   THE BOOKS TAB (2026-09-20) - js/views/books.js
   Revenue, expenses, profit, categories, vendors, clients, GST and cash,
   every figure read live from QuickBooks. Tokens only, so both themes
   follow; the chart takes its colours from the same tokens through
   classes, because an SVG fill written as a literal stays the light
   theme's colour in the dark one. Placed at the top level on purpose
   (law 4.dn): nothing here may land inside another block's @media.
   ============================================================ */
.bks-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.bks-pills{display:inline-flex;gap:4px;padding:3px;border-radius:9px;background:var(--hover);border:1px solid var(--border)}
.bks-pills .btn.on{background:var(--card);color:var(--t1);box-shadow:var(--sh);font-weight:700}
/* the date line and Refresh are one unit that keeps to the right and moves down whole, never split */
.bks-when{display:flex;align-items:center;gap:10px;margin-left:auto}
.bks-asof{font-size:11px;color:var(--t3);text-align:right;white-space:nowrap}
/* ANY LENGTH OF TIME (2026-09-21): eight periods wrap instead of pushing the page sideways, and the custom
   range sits on its own line under the bar. The date fields take the theme's own calendar glyph
   (color-scheme), or a dark theme draws a dark glyph on a dark field. */
.bks-periods{flex-wrap:wrap}
.bks-range{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px 14px;margin:-6px 0 16px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.bks-range-f{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:var(--t2)}
.bks-date{height:34px;padding:0 10px;border:1.5px solid var(--border);border-radius:9px;background:var(--input);color:var(--t1);font:var(--ff);font-size:13px;font-weight:500;color-scheme:light}
:root[data-theme="dark"] .bks-date{color-scheme:dark}
.bks-date:focus{outline:none;border-color:var(--accent);background:var(--card)}
.bks-date:focus-visible{box-shadow:0 0 0 3px var(--accent-bg)}
.bks-range-n{margin-left:auto;align-self:center;font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
@media(max-width:600px){.bks-range-f{flex:1 1 140px}.bks-date{width:100%}.bks-range-n{margin-left:0}}
.bks-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.bks-kpis .kpi-val{font-size:22px}
.bks-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.bks-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.bks-card .ch{gap:10px}
.bks-sub{font-size:11px;color:var(--t3);margin-left:auto}
.bks-wait{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t3);padding:18px 0}
.bks-err{font-size:12px;color:var(--danger-tx);background:var(--danger-bg);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.bks-chart{width:100%;height:auto;display:block}
.bks-bar-rev{fill:var(--accent)}
.bks-bar-exp{fill:var(--warn)}
.bks-base{stroke:var(--border);stroke-width:1}
.bks-ax{fill:var(--t3);font-size:9px;font-variant-numeric:tabular-nums}
.bks-legend{display:flex;gap:16px;justify-content:center;font-size:11px;color:var(--t2);margin:6px 0 14px}
.bks-legend span{display:inline-flex;align-items:center;gap:6px}
.bks-dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.bks-dot-rev{background:var(--accent)}
.bks-dot-exp{background:var(--warn)}
.bks-scroll{overflow-x:auto}
.bks-table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.bks-th{padding:9px 12px;text-align:left;font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.3px;background:var(--hover);border-bottom:1px solid var(--border);white-space:nowrap}
.bks-table td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--t1);white-space:nowrap}
.bks-table tr:last-child td{border-bottom:0}
.bks-table td:first-child{white-space:normal;min-width:150px}
.bks-r{text-align:right}
.bks-th.bks-r{text-align:right}
.bks-b{font-weight:700}
.bks-mute{color:var(--t3)}
.bks-pos{color:var(--accent-tx)}
.bks-neg{color:var(--danger-tx)}
.bks-total td{font-weight:800;background:var(--hover);border-top:1px solid var(--border)}
.bks-link{cursor:pointer}
.bks-link:hover td{background:var(--hover)}
.bks-list{display:flex;flex-direction:column;gap:12px}
.bks-row-h{display:flex;align-items:baseline;gap:8px;font-size:12px;margin-bottom:5px}
.bks-name{font-weight:600;color:var(--t1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bks-rank{width:16px;font-size:10px;font-weight:700;color:var(--t3);font-variant-numeric:tabular-nums}
.bks-amt{font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
.bks-share{width:44px;text-align:right;font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.bks-trend{font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.bks-up{color:var(--warn-tx);background:var(--warn-bg)}
.bks-down{color:var(--accent-tx);background:var(--accent-bg)}
.bks-row-b{display:flex;align-items:center;gap:10px}
.bks-track{flex:1;height:8px;border-radius:6px;background:var(--bg);overflow:hidden}
.bks-fill{height:100%;border-radius:6px}
.bks-fill-exp{background:var(--warn)}
.bks-fill-ven{background:var(--info)}
.bks-spark{width:96px;height:22px;flex:none;opacity:.75}
.bks-more{margin-top:12px}
.bks-foot{font-size:11px;line-height:1.5;color:var(--t3);margin-top:12px}
@media(max-width:1100px){.bks-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
  .bks-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bks-when{margin-left:0;flex-basis:100%;justify-content:space-between}
  .bks-asof{text-align:left;white-space:normal}
  .bks-spark{display:none}
  .bks-share{display:none}
  .bks-hide-sm{display:none}
  .bks-th,.bks-table td{padding-left:6px;padding-right:6px}
  .bks-table{font-size:11px}
  .bks-table td:first-child{min-width:0}
  .bks-yr{display:none}
  .bks-card .cb{padding:14px}
  .bks-sub{display:none}
}

/* KEEPING THE BOOKS (2026-09-20) - js/views/books-keep.js. The strip, the checks, the review queue and
   the rule book, all on the Books tab. Same rules as the block above: tokens only, the `bks-` prefix,
   top level. State is carried by form as well as colour (the icon, the led, the wording), so it reads
   in either theme and for an eye that does not separate green from amber. */
.bks-keep{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin:0 0 16px;border-radius:12px;background:var(--card);border:1px solid var(--border);box-shadow:var(--sh)}
.bks-keep-ic{flex:none;width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--hover);color:var(--t2)}
.bks-keep-ok .bks-keep-ic{background:var(--accent-bg);color:var(--accent-tx)}
.bks-keep-todo .bks-keep-ic{background:var(--warn-bg);color:var(--warn-tx)}
.bks-keep-todo{border-color:var(--warn)}
.bks-keep-t{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:2px}
.bks-keep-t b{font-size:13px;color:var(--t1)}
.bks-keep-t span{font-size:11.5px;line-height:1.45;color:var(--t2)}
.bks-keep-a{display:flex;gap:6px;flex-wrap:wrap}
.bks-keep-a .btn{display:inline-flex;align-items:center;gap:5px}
.bks-keep-a .btn.on{background:var(--hover);color:var(--t1);font-weight:700}
.bks-count{font-size:10px;font-weight:700;color:var(--t2);background:var(--border);border-radius:9px;padding:1px 6px;font-variant-numeric:tabular-nums}
.bks-checks{display:flex;flex-direction:column;margin:0 0 16px;border-radius:12px;background:var(--card);border:1px solid var(--border);overflow:hidden}
.bks-check{display:grid;grid-template-columns:8px minmax(150px,230px) minmax(64px,auto) minmax(0,1fr);align-items:baseline;column-gap:12px;padding:10px 16px;font-size:12px;border-bottom:1px solid var(--border)}
.bks-led{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.bks-check .bks-led{align-self:center}
.bks-check-todo .bks-led{background:var(--danger);border-radius:2px}
.bks-check-watch .bks-led{background:var(--warn);border-radius:2px;transform:rotate(45deg)}
.bks-check-l{min-width:0;color:var(--t1);font-weight:600}
.bks-check-v{color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.bks-check-todo .bks-check-v{color:var(--danger-tx)}
.bks-check-watch .bks-check-v{color:var(--warn-tx)}
.bks-check-hint{min-width:0;font-size:11.5px;line-height:1.45;color:var(--t2)}
.bks-quiet{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 16px;font-size:11.5px;color:var(--t2)}
.bks-chip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.bks-chip b{color:var(--t1);font-variant-numeric:tabular-nums}
.bks-review,.bks-rules{margin-bottom:16px}
.bks-sub-keep{margin-left:0}
.bks-review .ch,.bks-rules .ch{flex-wrap:wrap;justify-content:flex-start}
.bks-bulk{margin-left:auto}
.bks-review .ch .bks-sub:last-child{margin-left:auto}
.bks-rv{padding:14px 0;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.bks-rv:first-child{padding-top:0}
.bks-rv:last-child{border-bottom:0;padding-bottom:0}
.bks-rv-h{display:flex;align-items:baseline;gap:10px;font-size:13px}
.bks-rv-date{flex:none;width:48px;font-size:11px;font-weight:700;color:var(--t3);font-variant-numeric:tabular-nums}
.bks-rv-text{flex:1;min-width:0;font-weight:600;color:var(--t1);overflow-wrap:anywhere}
.bks-rv-amt{flex:none;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
.bks-rv-m{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;padding-left:58px}
.bks-tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:6px;font-size:10px;font-weight:700;white-space:nowrap;background:var(--warn-bg);color:var(--warn-tx)}
.bks-tag-ok{background:var(--accent-bg);color:var(--accent-tx)}
.bks-tag-info{background:var(--info-bg);color:var(--info-tx)}
.bks-rv-s{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-left:58px;font-size:12px;color:var(--t2)}
.bks-rv-say{flex:1 1 220px;min-width:0;line-height:1.45}
.bks-rv-say b{color:var(--t1)}
.bks-rv-b{display:inline-flex;gap:6px;flex:none}
.bks-edit{margin:6px 0 0 58px;padding:14px;border-radius:12px;background:var(--hover);border:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.bks-seg{align-self:flex-start}
.bks-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* background-COLOR: the shorthand would also wipe the arrow the .fl select draws as a background image */
.bks-edit .fl input,.bks-edit .fl select{background-color:var(--card)}
.bks-note{font-size:12px;line-height:1.45;color:var(--t2);padding:9px 0}
.bks-next .bks-seg{align-self:flex-start;flex-wrap:wrap;background:var(--card)}
.bks-next .seg-btn.on{background:var(--accent-bg);color:var(--accent-tx)}
.bks-say{font-size:11.5px;line-height:1.45;color:var(--t2)}
.bks-edit-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bks-retire{margin-left:auto;color:var(--danger-tx)}
.bks-rules-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.bks-rules-q{flex:1 1 220px}
.bks-rules-bar .btn{display:inline-flex;align-items:center;gap:5px;flex:none}
.bks-rule-form{margin:0 0 14px}
.bks-rule-editing td{background:transparent;padding:8px 0}
.bks-rule-editing .bks-rule-form{margin:0}
.bks-rules-t td{white-space:normal;vertical-align:middle}
.bks-rules-t td:last-child{white-space:nowrap;width:1%}
.bks-rules-t .btn{display:inline-flex;align-items:center;gap:4px}
.bks-pat{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--t1);background:var(--hover);border-radius:5px;padding:2px 6px;overflow-wrap:anywhere}
.bks-rules-none{padding:18px 12px;text-align:center}
.bks-rule-sub{display:none;font-size:11px;color:var(--t2);margin-top:3px}
@media(max-width:760px){
  .bks-rv-m,.bks-rv-s{padding-left:0}
  .bks-edit{margin-left:0;padding:12px}
  .bks-edit-grid{grid-template-columns:minmax(0,1fr)}
  .bks-rv-date{width:auto}
  .bks-check{grid-template-columns:8px minmax(0,1fr) auto;row-gap:4px}
  .bks-check-hint{grid-column:2 / -1}
  .bks-retire{margin-left:0}
  .bks-rules-t td:first-child{min-width:0}
  .bks-rule-sub{display:block}
}


/* ============================================================
   THE COMPOSER, REBUILT (2026-09-20)
   Abdul: "i asked for entire ui ux overhaul ... i want it all".
   The old window was a FORM: eight stacked blocks, each with its own
   margin, label style and box, and the message - the only reason the
   window exists - got under half the height at the bottom of the pile.
   This is the writing surface it should have been, on the Field
   Standard (DESIGN.md) and Part 1 rules 12, 13 and 15.
   ============================================================ */

/* ---- the header now says WHO, because it never did ---- */
.cmp-mh{gap:13px}
.cmp-who{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.cmp-who .dl-av{width:38px;height:38px;font-size:13px;flex:none}
.cmp-who-t{min-width:0}
.cmp-who-t b{display:block;font-size:15px;font-weight:700;color:var(--t1);line-height:1.25}
/* .cmp-who-f, by class: the old `.cmp-who-t span` also caught the "+ 2 more" inside the name and made it a block */
.cmp-who-f{display:block;font-size:11.5px;color:var(--t2);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-who-f i{font-style:normal}
.cmp-hd-r{display:flex;align-items:center;gap:10px;flex:none}
.cmp-hd-kind{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--t3);background:var(--bg);border-radius:999px;padding:4px 10px}

/* ---- two columns: the message, and what we know ----
   THE COLUMNS SCROLL SEPARATELY, and that is not cosmetic. With the modal as
   one scroller the rail STRETCHED the main column to its own height, .re-body
   flexed to fill it, and the formatting toolbar was pushed BELOW the sticky
   footer — measured 2026-09-20: main 1132px inside a 1104px modal. Worse than
   the clipping: it meant the height of the writing area was decided by how
   much history the recipient happened to have. A chatty client gave you a
   921px body and a hidden toolbar; a new lead gave you a short one. The
   message area belongs to the window, never to the rail. */
.cmp-modal{display:flex;flex-direction:column;overflow:hidden}
.cmp-bd{padding:0;display:flex;align-items:stretch;flex:1;min-height:0}
.cmp-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* what she writes scrolls; the dock under it (files, status, toolbar) never moves */
.cmp-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:6px 24px 0}
.cmp-scroll>*{flex-shrink:0}
.cmp-dock{flex:none;padding:6px 18px 8px;border-top:1px solid var(--border)}
.cmp-main.drag{outline:2px dashed var(--accent);outline-offset:-6px;border-radius:12px}
.cmp-modal .mf{position:static}
.cmp-main>.fl{margin-bottom:10px}

/* address + subject are single hairline ROWS, not boxed fields. Three
   alignment systems in one screen was most of why it read as dated. */
.cmp-bd .rc-row{gap:10px;align-items:center;margin:0;border-bottom:1px solid var(--border);padding:3px 0;transition:border-color .12s}
.cmp-bd .rc-row:focus-within{border-bottom-color:var(--accent)}
.cmp-bd .rc-row>label{width:54px;padding-top:0;font-weight:600;font-size:12px;color:var(--t3)}
.cmp-bd .rc-box{border:0;border-radius:0;background:none;min-height:38px;padding:4px 0;box-shadow:none}
.cmp-bd .rc-box:hover{background:none}
/* rule 13: darken the line that is there, never float a ring outside it */
.cmp-bd .rc-box:focus-within{border:0;background:none;box-shadow:none}
.cmp-bd .rc-chip{font-size:12.5px;padding:3px 6px 3px 11px}
.cmp-bd .rc-box input{font-size:13.5px}
.rc-togs{display:inline-flex;gap:2px;flex:none}
.cmp-bd .rc-tog{padding:6px 8px;border-radius:7px}
.cmp-bd .rc-tog:hover{background:var(--bg)}

.cmp-line{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);padding:2px 0;transition:border-color .12s}
.cmp-line:focus-within{border-bottom-color:var(--accent)}
.cmp-line>label{width:54px;flex:none;font-size:12px;font-weight:600;color:var(--t3)}
.cmp-subjline input,.cmp-subjline input:hover,.cmp-subjline input:focus,.cmp-subjline input:focus-visible{flex:1;min-width:0;
  border:0;border-radius:0;background:none;box-shadow:none;outline:none;
  color:var(--t1);font-family:inherit;font-size:14.5px;font-weight:600;padding:12px 0}
.cmp-subjline input::placeholder{color:var(--t3);font-weight:400}

/* the body is the surface: it takes everything left over */
.cmp-main .re-body,.cmp-main .re-body:hover,.cmp-main .re-body:focus{flex:1 0 auto;min-height:240px;margin:0;padding:18px 0 22px;
  border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;font-size:14px;line-height:1.65}
.cmp-dock .re-tb{padding:0}
.cmp-main #cmp-status{font-size:12px;color:var(--t2)}
.cmp-main #cmp-status:not(:empty){margin:4px 6px 8px}

/* ---- the rail: what the AI was already reading ---- */
.cmpr{width:340px;flex:none;border-left:1px solid var(--border);background:var(--bg);
  padding:16px 18px 20px;overflow-y:auto;min-height:0}
.cmpr-h{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--t3);margin:0 0 10px}
.cmpr-h+*{margin-bottom:18px}
/* a heading that follows content needs air above it, or it reads as a caption
   for the paragraph it is actually separating itself from */
.cmpr-h:not(:first-child){margin-top:22px}
.cmpr-alerts{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.cmpr-alert{display:flex;align-items:flex-start;gap:9px;border-radius:9px;padding:9px 11px;
  font-size:12.5px;font-weight:600;line-height:1.45}
.cmpr-alert>svg{flex:none;margin-top:1px}
.cmpr-alert.bad{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.34);color:var(--danger-tx)}
.cmpr-alert.warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:var(--warn-tx)}
.cmpr-fact{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--border)}
.cmpr-fact:first-child{border-top:none;padding-top:0}
/* the two text rules are scoped to the text column ON PURPOSE: as ".cmpr-fact span" they
   also matched the tile (a span) and outranked it, so the glyph sat top-left (2026-09-20) */
.cmpr-fact>div{min-width:0;flex:1 1 auto}
.cmpr-fact>div>b{display:block;font-size:12.5px;font-weight:600;color:var(--t1);line-height:1.35}
.cmpr-fact>div>span{display:block;font-size:11.5px;color:var(--t2);line-height:1.45;margin-top:2px}
.cmpr-tile{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;flex:none;margin-top:1px}
.cmpr-tile.info{background:rgba(59,130,246,.16);color:var(--info-tx)}
.cmpr-tile.ok{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-tx)}
.cmpr-tile.warn{background:rgba(245,158,11,.16);color:var(--warn-tx)}
.cmpr-tile.bad{background:rgba(239,68,68,.16);color:var(--danger-tx)}
.cmpr-tile.mut{background:rgba(148,163,184,.16);color:var(--t2)}
.cmpr-none{font-size:12px;color:var(--t2);line-height:1.55;margin:0}
.cmpr-ai{display:flex;flex-direction:column;gap:7px}
.cmpr-ai .btn{width:100%;justify-content:center}
.cmpr-ai2{display:flex;gap:7px}
.cmpr-ai2>*{flex:1;min-width:0}
.cmpr-ai2 .mt-bar{margin:0}
.cmpr-ai2 .mt-bar>.btn{width:100%;justify-content:center}
.cmpr-note{font-size:11px;color:var(--t3);line-height:1.5;margin:9px 0 0}
/* the undo-send countdown, in the status line the composer already has */
.cmp-hold{display:inline-flex;align-items:center;gap:9px;background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.32);border-radius:999px;padding:6px 8px 6px 12px;color:var(--warn-tx)}
.cmp-hold b{font-weight:700}
.cmp-hold .lnk-btn{font-weight:700;color:var(--warn-tx);text-decoration:underline;padding:2px 8px}

@media (max-width:900px){
  /* the rail stacks under the message rather than squeezing it; on a phone
     the facts still matter, they just come after what you are writing */
  /* selector leads with .cmp-modal on purpose: campui-cases forbids any rule
     below the campaign-rebuild marker that re-defines an earlier class, and
     a rule starting ".modal" reads as re-defining .modal */
  .cmp-modal.modal{width:820px}
  /* stacked, the two-scroller trick has nothing to divide, so the modal
     goes back to being one scroller and both columns size to content */
  .cmp-modal{display:block;overflow-y:auto}
  .cmp-bd{flex-direction:column;flex:none}
  .cmp-main{overflow:visible}
  .cmp-scroll{overflow:visible;flex:none}
  .cmpr{width:auto;border-left:none;border-top:1px solid var(--border);overflow:visible}
  .cmp-modal .mf{position:sticky}
}
@media (max-width:768px){
  .cmp-scroll{padding:4px 16px 0}
  .cmp-dock{padding:6px 10px 8px}
  .cmpr{padding:14px}
  .cmp-who-t b{font-size:14px}
  .cmp-main .re-body{min-height:200px}
}

/* the From identity, as a header pill rather than a full-width field with a
   permanent explainer under it (2026-09-20) */
.cmp-fromwrap{display:inline-flex;flex:none}
.cmp-frompill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 11px 0 5px;border:1px solid var(--border);
  border-radius:999px;background:var(--bg);color:var(--t2);font-family:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.cmp-frompill b{color:var(--t1);font-weight:600}
.cmp-frompill>svg{flex:none;color:var(--t3)}
/* rule 13: the edge that is there darkens, on hover, focus and while open */
.cmp-frompill:hover,.cmp-frompill:focus-visible,.cmp-frompill[aria-expanded="true"]{border-color:var(--t2);outline:none}
.cmp-frompill:disabled{cursor:default;padding-right:13px}
.cmp-frompill:disabled:hover{border-color:var(--border)}
.cmp-from-av{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:var(--accent-bg);color:var(--accent-tx);font-size:9.5px;font-weight:700;flex:none}
/* the follow-up chase chips (2026-09-20) — a designed picker, not a select */
.cmp-chase{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* one sentence with a checkbox; the days are a word in it you can change (the mockup) */
.cmp-chase-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:100%;border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;background:var(--card);font-size:12.5px;color:var(--t1);line-height:1.4}
.cmp-chase-row.on{border-color:var(--accent)}
.cmp-chk{width:18px;height:18px;flex:none;border:1.5px solid var(--t3);border-radius:5px;background:var(--card);color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.cmp-chase-row.on .cmp-chk{background:var(--accent);border-color:var(--accent)}
.cmp-chk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cmp-chase-t{cursor:pointer;flex:1 1 150px;min-width:0}
.cmp-chase-d{display:inline-flex;align-items:center;gap:3px;border:0;border-bottom:1px dashed var(--t3);background:none;
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--t1);padding:0 0 1px;cursor:pointer;flex:none}
.cmp-chase-d:hover,.cmp-chase-d[aria-expanded="true"]{border-bottom-color:var(--accent);color:var(--accent-tx)}
.cmp-chase-d>svg{color:var(--t3)}
.cmp-chase-n{flex-basis:100%;font-size:11px;color:var(--t3);line-height:1.5;margin-top:4px}
/* "Drop into the message" — pull a portal link, an invoice or a stored file
   into an open compose (2026-09-20) */
.cmp-insl{display:flex;flex-direction:column;gap:6px}
.cmp-ins{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font-family:inherit;
  background:var(--card);border:1px solid var(--border);border-radius:9px;padding:9px 11px;
  font-size:12.5px;color:var(--t1);cursor:pointer}
.cmp-ins:hover{border-color:var(--accent)}
.cmp-ins>svg{flex:none;color:var(--t3)}
.cmp-ins:hover>svg{color:var(--accent-tx)}
/* THE LABEL IS WHAT SHE READS, SO THE DETAIL YIELDS FIRST (2026-09-20). The detail was flex:none and
   the label flex:1 with min-width 0: a long detail squeezed "Quote 2048" down to the letter Q the
   moment a second button shared the row. The detail shrinks and ellipsises; the label keeps at
   least 45% of the row and is only cut when it is genuinely longer than that.
   (Second cut, same day: giving the label flex-GROW made it swallow the spare room and clip the
   detail instead. It takes what its words need, up to 68% of the row; the detail gets the rest,
   right-aligned, and is only cut when the two together are genuinely wider than the row.) */
.cmp-ins>span{flex:0 1 auto;min-width:0;max-width:68%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cmp-ins>em{flex:1 1 0;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-size:11px;color:var(--t3)}
/* "As it will arrive" — the preview overlay (2026-09-20). It sits ABOVE the
   composer modal because the composer stays open behind it; closing the
   preview must never close the draft. */
.cmp-pv{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:26px}
.cmp-pv-box{width:720px;max-width:100%;height:min(88vh,920px);display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shlg)}
.cmp-pv-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;
  border-bottom:1px solid var(--border);font-size:14px;color:var(--t1)}
.cmp-pv-meta{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:5px}
.cmp-pv-l{display:flex;gap:10px;font-size:12.5px;min-width:0}
.cmp-pv-l>span{width:58px;flex:none;color:var(--t3)}
.cmp-pv-l>b{min-width:0;color:var(--t1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the frame is WHITE on purpose at every theme: it is the client's inbox, not our app */
.cmp-pv-frame{flex:1;min-height:0;width:100%;border:0;background:var(--paper)}
.cmp-pv-ft{display:flex;align-items:flex-start;gap:8px;padding:11px 18px;border-top:1px solid var(--border);
  font-size:11px;color:var(--t3);line-height:1.5}
.cmp-pv-ft>svg{flex:none;margin-top:1px}
@media(max-width:640px){.cmp-pv{padding:0}.cmp-pv-box{height:100vh;border-radius:0;border:0}}
/* an unknown number that the thread identifies (2026-09-20) */
.txv-sub-found{color:var(--accent-tx)}

/* ============================================================
   COMPOSE — the fixes his first five minutes of real use found
   (2026-09-20). Every rule here has a check in tools/compose-live.cjs,
   which drives the real app in BOTH themes; none of these were visible
   to a static dark-theme render.
   ============================================================ */
/* THE RAIL'S BUTTONS. .btn-ghost has no border, which is right in a toolbar
   and wrong here: in LIGHT theme "AI Draft" read as a line of plain text. And
   Polish sat in a flex row beside the template bar with the default
   align-items:stretch, so it grew to the bar's two-row height — a 77px slab.
   They stack now, each one a real bordered button at its own height. */
.cmpr-ai .btn{border:1px solid var(--border);background:var(--card);min-height:38px}
.cmpr-ai .btn:hover{border-color:var(--accent)}
/* Polish and Templates two-up. The template bar dissolves (display:contents) so its button is a
   true sibling of Polish and its PANEL, when open, takes a full line under both instead of
   opening inside half a column or stretching Polish into a slab (that was a 77px button once).
   The row must WRAP for the panel's 100% basis to mean "own line" (law 4.dt). */
.cmpr-ai2{display:flex;flex-wrap:wrap;align-items:stretch;gap:7px}
/* three classes on purpose: ".cmpr .mt-bar{display:flex}" comes later at (0,2,0) and won the tie */
.cmpr .cmpr-ai2>.btn,.cmpr .cmpr-ai2 .mt-bar>.btn{flex:1 1 calc(50% - 4px);min-width:0;width:auto;box-sizing:border-box}
.cmpr .cmpr-ai2 .mt-bar{display:contents}
.cmpr .cmpr-ai2 .mt-pop{flex:1 0 100%;min-width:0}
/* THE one primary of the rail: tinted, not solid, so it leads without shouting beside Send */
.cmpr-ai .btn.cmp-ai-primary{background:color-mix(in srgb,var(--accent) 12%,var(--card));border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  color:var(--accent-tx);font-weight:700;min-height:42px;white-space:normal;line-height:1.3}
.cmpr-ai .btn.cmp-ai-primary:hover{border-color:var(--accent)}
/* the merge-field select kept its 210px max beside a button in a 304px column
   and hung out over the rail's edge */
.cmpr .mt-bar{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.cmpr .mt-bar>.btn{flex:1 1 120px;min-width:0}
.cmpr .mt-mf{flex:1 1 120px;min-width:0;display:flex}
.cmpr .mt-mf select.fs{width:100%;max-width:100%;min-width:0;min-height:38px}
.cmpr .mt-pop{flex-basis:100%}

/* whose file is open, when more than one recipient is a contact */
.cmpr-sw{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.cmpr-sw-b{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--card);
  border-radius:999px;padding:4px 12px 4px 4px;font-family:inherit;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer}
.cmpr-sw-b .dl-av{width:22px;height:22px;font-size:9px}
.cmpr-sw-b:hover{border-color:var(--accent);color:var(--t1)}
.cmpr-sw-b.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--t1)}
.cmp-who-more{font-weight:600;color:var(--t3);font-size:12px}

/* THE TO BOX DREW TWO FRAMES: .rc-box darkens its own border on focus-within
   (Part 1 rule 13), and the app's global input:focus then drew a second ring
   on the input INSIDE it. The box is the field; the input is only its caret. */
.cmp-bd .rc-box input,.cmp-bd .rc-box input:focus,.cmp-bd .rc-box input:focus-visible{
  border:0;box-shadow:none;outline:none;background:none}

/* the toolbar WRAPS. It was one scrolling row, which hid its last three
   controls at desktop width and SEVENTEEN of them on a phone, behind a scroll
   nobody knew was there. Two visible rows beat one row and a secret. */
.cmp-dock .re-tb{flex-wrap:wrap;overflow-x:visible;row-gap:2px}

/* ---- YOUR WRITING VOICE (js/voiceprofile.js) — read-only ---- */
.vp-box{width:760px}
.vp-body{padding:18px 22px 22px;overflow-y:auto;min-height:0;flex:1}
.vp-lead{font-size:13px;color:var(--t2);line-height:1.6;margin:0 0 14px}
.vp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.vp-chip{font-size:11.5px;font-weight:600;color:var(--t2);background:var(--bg);border:1px solid var(--border);
  border-radius:999px;padding:4px 11px}
.vp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-bottom:22px}
.vp-h{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin:0 0 10px}
.vp-bar{display:grid;grid-template-columns:minmax(0,1fr) 84px 34px;align-items:center;gap:10px;padding:5px 0}
.vp-bar-t{font-size:12.5px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-bar-track{height:6px;border-radius:999px;background:var(--bg);overflow:hidden}
.vp-bar-track i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.vp-bar-n{font-size:12px;font-weight:700;color:var(--t2);text-align:right;font-variant-numeric:tabular-nums}
.vp-habits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:22px}
.vp-habit{background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:11px 13px}
.vp-habit b{display:block;font-size:17px;font-weight:700;color:var(--t1);line-height:1.2;font-variant-numeric:tabular-nums}
.vp-habit span{display:block;font-size:11.5px;color:var(--t2);line-height:1.45;margin-top:3px}
.vp-brief{white-space:pre-wrap;font-size:12.5px;line-height:1.65;color:var(--t2);background:var(--bg);
  border:1px solid var(--border);border-radius:11px;padding:13px 15px;margin-bottom:16px}
.vp-foot,.vp-none{font-size:11.5px;color:var(--t3);line-height:1.55;margin:0}
.vp-empty{display:flex;flex-direction:column;gap:6px;padding:26px 6px}
.vp-empty b{font-size:14px;color:var(--t1)}
.vp-empty span{font-size:12.5px;color:var(--t2);line-height:1.6}
@media(max-width:640px){.vp-cols{grid-template-columns:minmax(0,1fr);gap:18px}.vp-habits{grid-template-columns:repeat(2,minmax(0,1fr))}.vp-body{padding:14px}}

/* ---- ATTACHMENT PREVIEW (js/views/mailbox.js mbxAttPreview, 2026-09-20) ----
   Rides the one overlay shell (.cmp-pv). The name in the chip is the way in. */
.mbx-att-nm{border:0;background:none;padding:0;font:var(--ff);color:var(--t1);cursor:pointer;text-align:left;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbx-att-nm:hover{color:var(--accent-tx);text-decoration:underline}
.mbx-att-nm:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mbx-pv-box{width:900px}
.mbx-pv-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.mbx-pv-acts{display:inline-flex;align-items:center;gap:8px;flex:none}
.mbx-pv-frame{flex:1;min-height:0;width:100%;border:0;background:var(--paper)}
.mbx-pv-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;background:var(--bg);padding:14px}
.mbx-pv-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.mbx-pv-text{flex:1;min-height:0;margin:0;overflow:auto;padding:16px 18px;font-size:12.5px;line-height:1.6;
  color:var(--t1);background:var(--bg);white-space:pre-wrap;word-break:break-word}
.mbx-pv-none{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:30px;text-align:center;color:var(--t3)}
.mbx-pv-none b{font-size:14px;color:var(--t1)}
.mbx-pv-none span{font-size:12.5px;color:var(--t2);max-width:420px;line-height:1.55}

/* ===== THE MERGED OVERVIEW (2026-09-20) =====
   Abdul: "both of these need to merge into overvview i also want to see monthly recurring and yearly recurring".
   The Books parts keep their own .bks-* classes; these are only what the merge added: the label that says
   where a row of tiles comes from, the recurring card, and the owed list. Tokens only. */
.ov-eyebrow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:4px 0 10px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t2)}
.ov-eyebrow span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--t3)}
.bks-kpis-wait{display:block}
.ov-per{font-size:.5em;font-weight:600;color:var(--t3);margin-left:2px;letter-spacing:0}
.ov-cur{font-size:10px;font-weight:600;color:var(--t3);letter-spacing:0}
.ov-plus{color:var(--t3);font-weight:500}
.ov-off{margin-bottom:16px}
/* a card title never wraps; what sits beside it moves to a second line instead */
.ov-ch{flex-wrap:wrap;row-gap:6px;column-gap:10px}
.ov-ch .ct{white-space:nowrap}
.ov-table td,.ov-table th{overflow-wrap:normal;word-break:normal}
.ov-rec .ch{gap:10px;flex-wrap:wrap}
.ov-rec-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ov-rec-col{min-width:0}
.ov-rec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.ov-rec-t,.ov-rec-st{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t2)}
.ov-rec-v{font-size:18px;font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}
.ov-rec-v .ov-per{font-size:11px}
.ov-plan{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;min-width:0}
.ov-plan:last-child{border-bottom:none}
.ov-plan-b{flex:1;min-width:0}
.ov-plan-n{font-size:13px;font-weight:600;color:var(--t1);overflow-wrap:break-word}
.ov-plan-p{font-size:12px;color:var(--t2);margin-top:1px;overflow-wrap:break-word}
.ov-plan-s,.ov-fx{font-size:11px;color:var(--t3);margin-top:2px;line-height:1.45}
.ov-plan-a{font-size:13px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}
.ov-plan-a .ov-per{font-size:10px}
.ov-plan-x{margin-top:8px}
.ov-none{font-size:12px;color:var(--t3);padding:12px 0 2px}
.ov-rec-sec{margin-top:18px}
.ov-rec-st{padding-bottom:6px;border-bottom:1px solid var(--border)}
.ov-rec-st span{font-weight:500;text-transform:none;letter-spacing:0;color:var(--t3);margin-left:6px}
.ov-owed-row{cursor:pointer;gap:10px}
.ov-owed-row .bl-info{min-width:0}
.ov-owed-row .bl-info h4,.ov-owed-row .bl-info p{overflow-wrap:break-word}
.ov-owed-row .bl-amt{white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:0}
.ov-owed-row .badge{flex-shrink:0}
@media(max-width:700px){
  .ov-rec-cols{grid-template-columns:minmax(0,1fr);gap:20px}
  .ov-owed-row{flex-wrap:wrap}
}

/* ================= THE PLACED MENU (js/popmenu.js, 2026-09-20) =================
   One menu surface for every small menu. FIXED and placed from its trigger (law 31, "a menu
   that can leave its box is placed, never nested"), so no scroller can clip it and no pane
   can paint over it. Above the modal (1500s), below the toasts (9999). */
.pm{position:fixed;z-index:9000;min-width:200px;max-width:min(340px,calc(100vw - 16px));overflow:auto;
  background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shlg);padding:6px;outline:none}
.pm:focus-visible{outline:none}
.pm-h{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:6px 8px 5px}
.pm-sep{height:1px;background:var(--border);margin:5px 2px}
.pm-i{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:none;border-radius:8px;background:none;
  font-family:inherit;text-align:left;color:var(--t1);cursor:pointer}
.pm-i.act{background:var(--hover)}
.pm:focus-visible .pm-i.act{box-shadow:inset 0 0 0 2px var(--accent)}
.pm-i:disabled{opacity:.45;cursor:default}
.pm-i.danger{color:var(--danger-tx)}
.pm-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
  background:var(--bg);color:var(--t2);flex:none}
.pm-i.on .pm-ic{background:var(--accent-bg);color:var(--accent-tx)}
.pm-i.danger .pm-ic{color:var(--danger-tx)}
.pm-av{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent-bg);color:var(--accent-tx);font-size:10px;font-weight:700;flex:none}
.pm-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.pm-t>b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-t>span{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-tag{font-size:10px;font-weight:700;color:var(--t2);background:var(--bg);border:1px solid var(--border);
  border-radius:999px;padding:2px 7px;white-space:nowrap;flex:none}
.pm-ck{display:inline-flex;justify-content:flex-end;width:16px;color:var(--accent);flex:none}
.pm-sw{display:flex;flex-wrap:wrap;gap:7px;padding:4px 8px 8px}
.pm-dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;color:var(--t2);background:var(--card)}
.pm-dot:hover{transform:scale(1.12)}
.pm-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- the composer's footer, as the mockup draws it (2026-09-20) ---- */
.cmp-mf{justify-content:flex-start;gap:8px}
.cmp-mf-sp{flex:1 1 12px}
.cmp-mf .sch-menu{left:0;right:auto}      /* Send lives on the left now; its menu must open INTO the window */
.cmp-saved{border:0;background:none;font-family:inherit;font-size:12px;color:var(--t3);cursor:pointer;padding:6px 8px;border-radius:7px;white-space:nowrap}
.cmp-saved:hover{background:var(--bg);color:var(--t1)}
.cmp-saved.box{color:var(--t2)}
.cmp-atts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cmp-atts .att-list{margin:0}
.cmp-atts .att-list:not(:empty){padding:2px 6px 8px}
.cmp-att-total{margin-left:auto;font-size:11px;font-weight:700;padding-right:6px}
.re-fmtbtn{gap:4px;padding:0 8px;font-weight:600;font-size:12px}
.re-fmtbtn>svg{color:var(--t3)}
@media (max-width:560px){
  /* ten controls in 350px: the hairlines between groups go, the buttons lose a little padding */
  .cmp-dock .re-tb .re-sep{display:none}
  .cmp-dock .re-tb{justify-content:space-between;flex-wrap:nowrap}
  .cmp-dock .re-btn{min-width:28px;padding:0 4px}
  /* Send and Discard keep their words; Attach and Preview are their icons, so the footer stays ONE row */
  .cmp-mf .cmp-mf-l{display:none}
  /* the header is for WHO it is to; on a phone the pill drops the word "from" so the name fits one line */
  .cmp-from-w{display:none}
  /* THE LINE UNDER THE NAME, ON A PHONE. Beside the From pill it had about 115px and read "ElayaLuxe · client
     si…"; letting it wrap there snapped the address in half ("gmail.c / om"). It takes the row BELOW instead,
     the full width under the name: the two wrappers dissolve (display:contents) so the header can lay the
     pieces out itself, and the line breaks only between facts. A single fact longer than the row ends in an
     ellipsis rather than pushing the dialog sideways. */
  .cmp-mh{flex-wrap:wrap;row-gap:3px}
  .cmp-who,.cmp-who-t{display:contents}
  .cmp-who .dl-av{order:0}
  .cmp-who-t b{order:1;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmp-hd-r{order:2}
  .cmp-who-f{order:3;flex:0 0 calc(100% - 51px);margin-left:51px;white-space:normal;overflow:visible}
  .cmp-who-f i{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
  .cmp-frompill{padding-right:8px;gap:6px}
  .cmp-mf .btn-ghost{padding-left:11px;padding-right:11px}
  .cmp-saved{flex-basis:100%;text-align:left;order:9;padding:2px 2px 0}
}
/* the body is the PAGE: it takes the caret, never a ring (the hairlines above it carry focus) */
.cmp-main .re-body:focus-visible{outline:none}
.cmp-subjline .lnk-btn{text-decoration:none;font-size:12px;display:inline-flex;align-items:center;gap:4px;flex:none}
/* the same picker as a FORM FIELD (bulk email, the customer deck): filled, full width, one radius */
.cmp-fromwrap.wide{display:flex}
.cmp-frompill.wide{width:100%;height:40px;border-radius:10px;justify-content:flex-start;padding:0 12px 0 8px;font-size:13px}
.cmp-frompill.wide>svg{margin-left:auto}
.cmp-frompill.wide .cmp-from-l{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cmp-from-e{color:var(--t3);font-weight:400}
/* a rail row with a second, smaller action: the document beside the link (cmpInsRow, 2026-09-20) */
.cmp-insrow{display:flex;gap:6px;align-items:stretch}
.cmp-insrow>.cmp-ins{flex:1 1 auto;min-width:0;width:auto}
.cmp-ins-pdf{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0 9px;min-width:40px;letter-spacing:.03em;border:1px solid var(--border);border-radius:10px;
  background:var(--card);color:var(--t2);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer}
.cmp-ins-pdf:hover{border-color:var(--accent);color:var(--accent-tx)}
.cmp-ins-pdf:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================================================
   THE INVOICE BUILDER (2026-09-21, js/views/invoice-editor.js), from the board he approved. Tokens only; the live
   document is PAPER, white in both themes like the PDF, so it speaks the --paper-* tokens.
   ============================================================ */
.ivb{display:flex;flex-direction:column;gap:14px}
.ivb-flex{flex:1 1 auto}
.ivb-head{display:flex;align-items:center;gap:12px;padding:14px 20px}
.ivb-av{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-solid);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.ivb-hid{min-width:0}
.ivb-hid h1{margin:0;font-size:17px;font-weight:800;letter-spacing:-.2px;color:var(--t1)}
.ivb-hsub{font-size:12px;color:var(--t2);margin-top:2px}
.ivb-status{font-size:11.5px;font-weight:600;color:var(--t2);background:var(--bg);border-radius:999px;padding:5px 11px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ivb-status.bad{background:var(--danger-bg);color:var(--danger-tx)}
.ivb-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
.ivb-form{padding:18px 22px;display:flex;flex-direction:column;gap:16px}
.ivb-lbl{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t2)}
.ivb-hint{font-size:11.5px;color:var(--t3);line-height:1.5}
.ivb-in{width:100%;box-sizing:border-box;min-width:0;padding:9px 11px;border:1.5px solid transparent;border-radius:10px;background:var(--input);color:var(--t1);font:var(--ff);font-size:13.5px;outline:none}
.ivb-in:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px var(--accent-bg)}
.ivb-num{text-align:right;font-variant-numeric:tabular-nums}
.ivb-note{resize:vertical;min-height:64px;line-height:1.5}
.ivb-row{display:flex;align-items:center;gap:10px}
.ivb-who b{font-size:14px;color:var(--t1)}
.ivb-pick{position:relative;flex:1 1 auto;max-width:420px}
.ivb-pickr{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shmd);padding:4px;max-height:280px;overflow:auto}
.ivb-pickr.open{display:block}
.ivb-pickopt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;border:0;background:none;padding:8px 10px;border-radius:8px;text-align:left;font:var(--ff);cursor:pointer;color:var(--t1)}
.ivb-pickopt:hover,.ivb-pickopt:focus-visible{background:var(--hover);outline:none}
.ivb-pickopt span{font-size:11.5px;color:var(--t3)}
.ivb-agree{border:1px solid var(--accent-bg);background:var(--accent-bg);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.ivb-agree-h{display:flex;align-items:center;gap:8px;color:var(--accent-tx);font-size:13px}
.ivb-agree-h span{font-size:11.5px;font-weight:500}
.ivb-chips{display:flex;flex-wrap:wrap;gap:8px}
.ivb-lines{display:flex;flex-direction:column}
/* the amount column keeps a floor: at 1280 a bare 1fr fell to nothing and the amount was drawn over the GST
   switch (seen in the dark capture, 2026-09-21; text over a control is neither clipped nor covering, so no sweep saw it) */
.ivb-line{display:grid;grid-template-columns:72px 130px auto minmax(112px,1fr) 32px;grid-template-areas:"d d d d x" "q p t a .";gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--border);align-items:end}
.ivb-desc{resize:none;overflow:hidden;line-height:1.45;min-height:40px;display:block}
.ivb-line:first-child{padding-top:2px}
.ivb-dcell{grid-area:d;position:relative;min-width:0}
.ivb-del{grid-area:x;align-self:start;margin-top:4px;color:var(--t3)}
.ivb-q{grid-area:q}.ivb-p{grid-area:p}.ivb-t{grid-area:t}
.ivb-mini{display:flex;flex-direction:column;gap:4px;min-width:0}
.ivb-mini>span{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.ivb-amt{grid-area:a;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding-bottom:6px;min-width:0}
.ivb-amt b{font-size:14px;color:var(--t1)}
.ivb-amt span{font-size:11px;color:var(--t3);white-space:nowrap}
.ivb-lnote{font-size:11.5px;color:var(--t3);margin-top:4px}
.ivb-lnote:empty{display:none}
.ivb-discline .ivb-in:not(.ivb-num){font-weight:600}
.ivb-sugg{display:none;position:absolute;left:0;right:0;top:44px;z-index:30;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shmd);padding:4px;max-height:300px;overflow:auto}
.ivb-sugg.open{display:block}
.ivb-so{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:8px 10px;border-radius:8px;font:var(--ff);font-size:12.5px;cursor:pointer;color:var(--t1);text-align:left}
.ivb-so:hover{background:var(--hover)}
.ivb-so .n{flex:1 1 auto;min-width:0}
.ivb-so .p{color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ivb-addrow{display:flex;align-items:center;gap:10px;padding-top:12px;flex-wrap:wrap}
.ivb-seg{display:inline-flex;gap:3px;padding:3px;border-radius:11px;background:var(--bg);border:1px solid var(--border);flex-wrap:wrap;width:fit-content}
.ivb-seg button{height:30px;padding:0 11px;border:0;border-radius:8px;background:none;font:var(--ff);font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;white-space:nowrap}
.ivb-seg button.on{background:var(--card);color:var(--t1);font-weight:700;box-shadow:var(--sh)}
/* ALREADY PAID, the invoice builder (2026-09-29). Tokens only, so it reads in both themes; the row wraps
   on a phone rather than pushing the card sideways. */
.ivb-check{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2);cursor:pointer;user-select:none}
.ivb-check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;margin:0}
.ivb-paidrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.ivb-paidrow .ivb-in{height:34px;min-width:0;flex:1 1 150px}
.ivb-paidrow .ivb-date{flex:0 0 auto}
.ivb-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ivb-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.ivb-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.ivb-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.ivb-date{max-width:190px}
.ivb-cardrow{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px dashed var(--border);border-radius:11px;font-size:12px;color:var(--t2)}
.ivb-totals{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:14px}
.ivb-tr{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:12.5px;color:var(--t2)}
.ivb-tr b{color:var(--t1)}
.ivb-tr.ivb-tb{border-top:1px solid var(--border);margin-top:4px;padding-top:8px;font-size:14px;color:var(--t1);font-weight:700}
.ivb-tr.ivb-tb b{font-size:17px}
.ivb-ok{display:flex;gap:6px;align-items:flex-start;font-size:11px;color:var(--accent-tx);line-height:1.45;margin-top:4px}
.ivb-warnrow{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;border-radius:12px;background:var(--warn-bg);color:var(--warn-tx);font-size:12px;line-height:1.5;margin-bottom:6px}
.ivb-warnrow svg{flex:none;margin-top:2px}
.ivb-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--border)}
.ivb-foothint{max-width:380px}
.ivb-foot .btn[disabled]{opacity:.55;cursor:not-allowed}
.ivb-docwrap{position:sticky;top:12px}
.ivb-docdet>summary{cursor:pointer;list-style:none;padding:0 0 10px}
.ivb-docdet>summary::-webkit-details-marker{display:none}
.ivb-doc{background:var(--paper);color:var(--paper-ink);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shmd);padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px;font-size:10px;line-height:1.45}
.ivbd-top{display:flex;justify-content:space-between;gap:12px}
.ivbd-biz{display:flex;gap:8px}
.ivbd-logo{width:22px;height:22px;border-radius:5px;background:var(--paper-brand);flex:none}
.ivbd-biz b{font-size:10.5px;letter-spacing:.02em;display:block}
.ivbd-biz span,.ivbd-meta span{display:block;font-size:8.5px;color:var(--paper-soft)}
.ivbd-meta{text-align:right}
.ivbd-meta b{font-size:11.5px;display:block}
.ivbd-rule{height:2px;background:var(--paper-ink)}
.ivbd-k{font-size:7.5px;font-weight:700;letter-spacing:.07em;color:var(--paper-soft);display:block}
.ivbd-bill b{font-size:10.5px;display:block;margin-top:2px}
.ivbd-bill span{display:block;font-size:9px;color:var(--paper-soft)}
.ivbd-lines{display:flex;flex-direction:column}
.ivbd-lh{display:flex;justify-content:space-between;background:var(--paper-band);padding:5px 7px;font-size:7.5px;font-weight:700;color:var(--paper-soft);letter-spacing:.05em}
.ivbd-l{display:flex;justify-content:space-between;gap:12px;padding:7px;border-bottom:1px solid var(--paper-line);font-size:9px}
.ivbd-l i{font-style:normal;color:var(--paper-soft)}
.ivbd-empty{color:var(--paper-soft)}
.ivbd-tot{align-self:flex-end;width:190px;display:flex;flex-direction:column;gap:4px;font-size:9px}
.ivbd-tot div{display:flex;justify-content:space-between;gap:10px}
.ivbd-grand{background:var(--paper-band);padding:4px 6px;font-weight:700;font-size:10px}
.ivbd-pay{display:flex;flex-direction:column;gap:6px;font-size:8.5px;color:var(--paper-ink)}
.ivbd-pay b{font-size:9.5px}
.ivbd-paybtn{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:5px;background:var(--paper-brand);color:var(--paper);font-size:9px;font-weight:700;width:fit-content}
.ivbd-note span:last-child{font-size:9px}
/* the form needs about 640px for a line; beside the 380px document that holds from a 1360 window up (his is 1440) */
@media(max-width:1360px){.ivb-grid{grid-template-columns:minmax(0,1fr)}.ivb-docwrap{position:static}.ivb-doc{max-width:520px}}
@media(max-width:768px){
  .ivb-head{padding:12px 14px;flex-wrap:wrap}.ivb-form{padding:14px}
  .ivb-line{grid-template-columns:72px minmax(0,1fr) 32px;grid-template-areas:"d d x" "q p p" "t t t" "a a a"}
  .ivb-amt{flex-direction:row;gap:10px;align-items:baseline}
  .ivb-two{grid-template-columns:minmax(0,1fr)}
  .ivb-foothint{max-width:none}
}

/* ============================================================
   THE INVOICE PAGE (2026-09-21, js/views/invoice-page.js): the state card, the journey, the brief. Tokens only.
   A tone is one of the semantic triads: grey / info / warn / danger / ok / purple.
   ============================================================ */
.ivp{display:flex;flex-direction:column;gap:14px}
.ivp a.btn,.ivp a.btn:hover{text-decoration:none}
.ivp-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ivp-hid{flex:1 1 320px;min-width:0}
.ivp-hid h1{margin:0 0 5px;font-size:24px;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--t1)}
.ivp-sub{font-size:12.5px;color:var(--t2);line-height:1.5}
.ivp-pill,.ivp-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;letter-spacing:0}
.ivp-tag{height:22px;font-size:11px;flex:none}
.ivp-t-grey{background:var(--bg);color:var(--t2)}
.ivp-t-info{background:var(--info-bg);color:var(--info-tx)}
.ivp-t-warn{background:var(--warn-bg);color:var(--warn-tx)}
.ivp-t-danger{background:var(--danger-bg);color:var(--danger-tx)}
.ivp-t-ok{background:var(--accent-bg);color:var(--accent-tx)}
.ivp-t-purple{background:var(--purple-bg);color:var(--purple-tx)}
.ivp-tiles{display:flex;gap:10px;flex-wrap:wrap}
.ivp-tile{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh);padding:11px 15px;min-width:132px;display:flex;flex-direction:column;gap:2px}
.ivp-tile span{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t2)}
.ivp-tile b{font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--t1)}
.ivp-tile i{font-style:normal;font-size:11.5px;color:var(--t3)}
.ivp-tile-warn{border-color:var(--warn-tx)}.ivp-tile-warn span{color:var(--warn-tx)}
.ivp-tile-bad{border-color:var(--danger-tx)}.ivp-tile-bad span{color:var(--danger-tx)}
.ivp-think{padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.ivp-k-warn{border-color:var(--warn-tx);background:linear-gradient(var(--warn-bg),var(--warn-bg)),var(--card)}
.ivp-k-danger{border-color:var(--danger-tx);background:linear-gradient(var(--danger-bg),var(--danger-bg)),var(--card)}
.ivp-k-info{background:linear-gradient(var(--info-bg),var(--info-bg)),var(--card)}
.ivp-k-ok{border-color:var(--accent);background:linear-gradient(var(--accent-bg),var(--accent-bg)),var(--card)}
.ivp-k-purple{background:linear-gradient(var(--purple-bg),var(--purple-bg)),var(--card)}
.ivp-thtop{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.ivp-thtxt{flex:1 1 360px;min-width:0}
.ivp-eye{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);display:block}
.ivp-k-warn .ivp-eye{color:var(--warn-tx)}.ivp-k-danger .ivp-eye{color:var(--danger-tx)}.ivp-k-ok .ivp-eye{color:var(--accent-tx)}.ivp-k-info .ivp-eye{color:var(--info-tx)}.ivp-k-purple .ivp-eye{color:var(--purple-tx)}
.ivp-thh{font-size:19px;font-weight:800;letter-spacing:-.3px;margin-top:5px;line-height:1.3;color:var(--t1)}
.ivp-thw{font-size:13px;color:var(--t2);margin-top:5px;line-height:1.55;max-width:780px}
.ivp-pbtn{height:42px;padding:0 20px;font-size:13.5px;flex:none}
.ivp-verbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ivp-jr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:16px 22px}
.ivp-step{display:flex;flex-direction:column;gap:6px;min-width:0;padding-right:14px}
.ivp-step b{font-size:12.5px;color:var(--t1)}
.ivp-step span:not(.ivp-dot):not(.ivp-bar){font-size:11.5px;color:var(--t3);line-height:1.45}
.ivp-dotrow{display:flex;align-items:center;gap:8px}
.ivp-dot{width:22px;height:22px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;border:2px solid var(--border);background:var(--card);color:var(--on-solid)}
.ivp-bar{height:2px;flex:1 1 auto;background:var(--border)}
.ivp-done .ivp-dot{background:var(--accent);border-color:var(--accent)}
.ivp-done .ivp-bar{background:var(--accent)}
.ivp-now .ivp-dot,.ivp-part .ivp-dot{border-color:var(--info-tx)}
.ivp-warn .ivp-dot{border-color:var(--warn-tx)}.ivp-warn b{color:var(--warn-tx)}
.ivp-bad .ivp-dot{background:var(--danger-tx);border-color:var(--danger-tx);color:var(--card)}.ivp-bad b{color:var(--danger-tx)}
.ivp-purple .ivp-dot{border-color:var(--purple-tx)}
.ivp-off .ivp-dot{background:var(--bg);border-color:var(--border)}.ivp-off b{color:var(--t3)}
.ivp-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
.ivp-main,.ivp-rail{display:flex;flex-direction:column;gap:14px;min-width:0}
.ivp-note{font-size:11.5px;color:var(--t3)}
.ivp-lines{padding:4px 18px 14px}
.ivp-line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.ivp-line>div{min-width:0}
.ivp-line b{color:var(--t1);font-weight:600}
.ivp-line span{display:block;font-size:11.5px;color:var(--t3);margin-top:2px}
.ivp-line>b.mono{flex:none;font-weight:700}
.ivp-line span.ivp-lrest{font-size:12.5px;color:var(--t2);line-height:1.45;max-width:62ch}
.ivp-scope{opacity:.7}
.ivp-tot{margin-left:auto;width:min(290px,100%);display:flex;flex-direction:column;margin-top:4px}
.ivp-tr{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:12.5px;color:var(--t2);border-bottom:1px solid var(--border)}
.ivp-tr b{color:var(--t1)}
.ivp-trb{font-weight:700;color:var(--t1);font-size:13.5px}
.ivp-facts{padding:4px 18px 12px}
.ivp-fact{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border)}
.ivp-fact:last-child{border-bottom:0}
.ivp-fact>div{flex:1 1 auto;min-width:0}
.ivp-fact b{display:block;font-size:12.5px;font-weight:600;color:var(--t1);line-height:1.4}
.ivp-fact span{display:block;font-size:11.5px;color:var(--t3);line-height:1.45;margin-top:2px}
.ivp-fd{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;padding:0}
.ivp-fd.ivp-t-ok{background:var(--accent)}.ivp-fd.ivp-t-warn{background:var(--warn-tx)}.ivp-fd.ivp-t-danger{background:var(--danger-tx)}.ivp-fd.ivp-t-grey{background:var(--t3)}.ivp-fd.ivp-t-info{background:var(--info-tx)}
.ivp-where{padding:4px 18px 12px}
.ivp-wr{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.ivp-wr>div{min-width:0}
.ivp-wr b{display:block;color:var(--t1);font-weight:600}
.ivp-wr span:not(.ivp-tag){display:block;font-size:11.5px;color:var(--t3);margin-top:2px;line-height:1.45}
.ivp-by{padding:12px 18px;display:flex;flex-direction:column;gap:10px;font-size:12.5px;color:var(--t2);line-height:1.5}
@media(max-width:1180px){.ivp-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:768px){
  .ivp-jr{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px}
  .ivp-step{flex-direction:row;align-items:baseline;gap:10px;padding-right:0}
  .ivp-dotrow{flex:none}.ivp-bar{display:none}
  .ivp-tiles{width:100%}.ivp-tile{flex:1 1 30%;min-width:0;padding:10px 11px}.ivp-tile b{font-size:16px}
  .ivp-think{padding:14px}.ivp-pbtn{width:100%;justify-content:center}
}

/* ============================================================
   THE INVOICE LIST (invoice overhaul phase 4, 2026-09-21): Billing > Invoices, js/views/invoice-page.js ivlHTML().
   The .seg primitive for the segments, the page's .ivp-pill tones for the state, five dots for the journey.
   ============================================================ */
.ivl{display:flex;flex-direction:column;gap:12px}
.ivl-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ivl-seg{margin-bottom:0;flex-wrap:wrap}
.ivl-sum{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;min-width:0}
.ivl-sum b{font-size:18px;font-weight:800;letter-spacing:-.3px;color:var(--t1)}
.ivl-sum span{font-size:11.5px;color:var(--t3)}
.ivl-card{overflow:hidden}
.ivl-scroll{overflow-x:auto}
.ivl-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ivl-tbl th{padding:10px 14px;text-align:left;font-size:10.5px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);white-space:nowrap}
.ivl-tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.ivl-r{cursor:pointer}
.ivl-r:hover{background:var(--hover)}
.ivl-r:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ivl-r-late{background:color-mix(in srgb,var(--danger-bg) 35%,transparent)}
.ivl-num{font-weight:700;color:var(--accent-tx);white-space:nowrap}
.ivl-who{min-width:180px}
.ivl-who b{display:block;color:var(--t1);font-weight:600}
.ivl-who span{display:block;font-size:11.5px;color:var(--t3);margin-top:2px;line-height:1.4}
.ivl-dots{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.ivl-d{width:10px;height:10px;box-sizing:border-box;border-radius:50%;border:2px solid var(--border);background:var(--card);flex:none}
.ivl-ln{width:9px;height:2px;background:var(--border);flex:none}
.ivl-ln.ivl-on{background:var(--accent)}
.ivl-d.ivl-done{background:var(--accent);border-color:var(--accent)}
.ivl-d.ivl-now,.ivl-d.ivl-part{border-color:var(--info-tx)}
.ivl-d.ivl-part{background:var(--info-tx)}
.ivl-d.ivl-warn{border-color:var(--warn-tx)}
.ivl-d.ivl-bad{background:var(--danger-tx);border-color:var(--danger-tx)}
.ivl-d.ivl-purple{border-color:var(--purple-tx)}
.ivl-d.ivl-off{background:var(--bg);border-color:var(--border)}
.ivl-st{white-space:nowrap}
.ivl-st .ivp-pill{height:22px;font-size:11px}
.ivl-hint{display:block;font-size:11px;color:var(--t3);margin-top:3px}
.ivl-amt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ivl-tbl th.ivl-amt{text-align:right}
.ivl-late-tx{color:var(--danger-tx)}
.ivl-mute{color:var(--t3)}
.ivl-go{white-space:nowrap}
.ivl-go .btn{min-width:150px;justify-content:flex-start}
.ivl-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 24px;color:var(--t3)}
.ivl-empty b{font-size:14px;color:var(--t1)}
.ivl-empty span{font-size:12.5px;max-width:460px;line-height:1.5}
.ivl-note{padding:10px 14px;font-size:11.5px;color:var(--t3);line-height:1.5;border-top:1px solid var(--border)}
.ivl-card .ivl-scroll + .ivl-note{border-top:0}
.ivl-pill-sm{height:20px;padding:0 8px;font-size:10.5px}
@media(max-width:1180px){.ivl-tot{display:none}}
@media(max-width:960px){.ivl-jr{display:none}}
/* a phone: each invoice is a card, the one step full width at the bottom */
@media(max-width:720px){
  .ivl-sum{align-items:flex-start;order:3;flex-basis:100%}
  .ivl-top .dt-sp{display:none}
  .ivl-tbl thead{display:none}
  .ivl-tbl,.ivl-tbl tbody{display:block}
  /* number and what is owed on top, then who, then the state and its hint, then the one step. The state cell is
     nowrap on a desktop; here it wraps, or it takes the width and squeezes the client to 41px (seen 2026-09-21) */
  .ivl-r{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"num amt" "who who" "st st" "go go";gap:6px 12px;padding:12px 14px;border-bottom:1px solid var(--border)}
  .ivl-tbl td{display:block;padding:0;border:0}
  /* .ivl-tbl td (0,1,1) outranks the plain .ivl-tot / .ivl-jr hide rules above; say it at the same weight, or the
     dots and the total come back under each card (the harness passed while they did, 2026-09-21) */
  .ivl-tbl td.ivl-tot,.ivl-tbl td.ivl-jr{display:none}
  .ivl-band{flex-wrap:wrap}.ivl-band>span{flex:1 1 calc(100% - 44px)}
  .ivl-num{grid-area:num;align-self:center}
  .ivl-st{grid-area:st;white-space:normal}.ivl-st .ivl-hint{display:inline;margin:0 0 0 8px}
  .ivl-who{grid-area:who;min-width:0}
  .ivl-r td.ivl-amt:not(.ivl-tot){grid-area:amt;align-self:center}
  .ivl-go{grid-area:go}.ivl-go .btn{width:100%;justify-content:center;min-width:0}
}
.ivl-band{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--danger-bg);color:var(--danger-tx);font-size:12.5px;line-height:1.45}
.ivl-band>span{flex:1 1 auto;min-width:0;color:var(--t1)}.ivl-band b{color:var(--danger-tx)}
.ivl-band .btn{flex:none}

/* Record a payment (invoice overhaul phase 5a, 2026-09-21): the live line under the amount, the method, what it records */
.mfp-line{font-size:12px;line-height:1.45;color:var(--t2);margin:-4px 0 12px;min-height:17px}
.mfp-line.mfp-ok{color:var(--accent-tx)}.mfp-line.mfp-info{color:var(--info-tx)}.mfp-line.mfp-bad{color:var(--danger-tx)}
.mfp-lbl{font-size:10.5px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px}
.mfp-seg{margin-bottom:12px;flex-wrap:wrap}
.mfp-rec{margin-top:4px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
#mfp-rec{font-size:12.5px;line-height:1.5;color:var(--t1)}

/* One Adjust sheet (invoice overhaul phase 5b, 2026-09-21): the mode switch on each of the four sheets, and why a mode is off */
.mfa{margin:0 0 14px}
.mfa-seg{margin-bottom:6px;flex-wrap:wrap}
.mfa-seg .seg-btn:disabled{opacity:.45;cursor:not-allowed}
.mfa-why{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--t3);line-height:1.45}
.mfa-why b{color:var(--t2);font-weight:600}

/* ---- the Plans tab + the segmented field (the Plans board, 2026-09-23); tokens only ---- */
.fx-lbl{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;margin:4px 0 6px}
.fx-seg{margin-bottom:10px;flex-wrap:wrap}
.pln-segs{display:flex;gap:8px;flex-wrap:wrap}
.pln-say{margin-top:0}
.pln-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.pln-opt{text-align:left;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;font:var(--ff);color:var(--t1)}
.pln-opt b{display:block;font-size:12.5px;margin-bottom:3px}
.pln-opt span{display:block;font-size:11px;color:var(--t3);line-height:1.45}
.pln-opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.pln-opt.off{opacity:.6;cursor:not-allowed}
.pln-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pln-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.pln-card{margin-bottom:14px}
/* the two editable defaults on Billing > Settings (2026-09-29): a small segmented control on a
   definition row, sized to sit inside it rather than to lead it */
.mterm-seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;vertical-align:middle}
.mterm-seg button{background:var(--card);color:var(--t2);border:none;border-right:1px solid var(--border);
  padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;transition:background .12s,color .12s}
.mterm-seg button:last-child{border-right:none}
.mterm-seg button:hover:not(:disabled){background:var(--hover);color:var(--t1)}
.mterm-seg button.on{background:var(--accent);color:var(--on-solid)}
.mterm-seg button:disabled{cursor:not-allowed;opacity:.55}
.mterm-say{display:block;font-size:11px;color:var(--t3);margin-top:5px}
/* a held installment is still listed, because forgetting it is the failure this exists to prevent; it
   is just visibly stood down */
.pb-row.pb-held{opacity:.62}
.pb-row.pb-held .pb-plan{text-decoration:line-through;text-decoration-thickness:1px}
/* AND THE ROUND + ALSO NEEDS A LANE, not just a corner (2026-09-29, measured).
   The 2026-09-21 rule above solves the END of a page. It does not solve the MIDDLE: the button is
   FIXED, so on any page tall enough to scroll it covers a 54px-wide band down the right edge at every
   scroll position, and whatever row happens to sit at its height is under it. Latent on the money
   board for as long as it has had a menu button per row, and exposed the moment a third card was added
   above Running. Measured at 1280x800 dark: the button occupies x 1202 to 1256, and the first Running
   row's menu sat at x 1197 to 1227, a 25px overlap, with nothing scrolled.
   The lane is reserved on the row-end column, which holds a 30px icon and has the slack for it, so no
   row control on this board can be under the button at any scroll position. Phones hide the button. */
@media(min-width:769px){
  /* THE LANE IS THE CARD, not a cell. Padding the menu column alone moved the button clear and left
     the AMOUNT beside it still under the round +, which the 1280 capture showed as $799.00 with its
     cents and its USD behind a green circle. Money half-hidden by a button is the same defect as a
     button that cannot be pressed, and only reading the picture finds it. */
  .pln-card .cb{padding-right:64px}
  /* the card HEADER holds a button on the same edge (New plan), and READING THE CAPTURE at 1440 is
     what found it sitting under the round +: the geometry sweep ran at 1280, where that header is at
     a different height. The lane is the element, not the width. */
  .pln-card .ch{padding-right:64px}
}
.pln-cb{padding-top:4px}
.pln-sec{margin-top:16px}.pln-sec:first-child{margin-top:0}
.pln-row{align-items:flex-start}
.pln-co{font-weight:500;color:var(--t3);font-size:12px}
.pln-dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--t3);vertical-align:middle;margin:0 2px}
.pln-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto;max-width:50%}
.pln-top{display:flex;align-items:center;gap:10px}
.pln-verbs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pln-inst{border:1px solid var(--border);border-radius:12px;margin-top:12px;overflow:hidden}
.pln-inst:first-child{margin-top:0}
.pln-inst-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--hover)}
.pln-inst-r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--border)}
.pln-inst-l b{display:block;font-size:12.5px;color:var(--t1)}.pln-inst-l span{font-size:11px;color:var(--t3)}
.pln-inst-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:640px){.pln-tiles{grid-template-columns:1fr 1fr}.pln-row{flex-direction:column}.pln-right{align-items:flex-start;max-width:none}.pln-verbs{justify-content:flex-start}.pln-opts{grid-template-columns:1fr}.pln-inst-r{flex-direction:column;align-items:flex-start}.pln-inst-a{justify-content:flex-start}}

/* ---- the client brief + the Billing panel (2026-09-23); tokens only ---- */
.cb-card .cb-facts{padding-bottom:6px}
.cb-facts .ivp-fact .btn{flex:0 0 auto;margin-left:6px}
.cb-next{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 10px;padding:12px 14px;border-radius:12px;background:var(--hover)}
.cb-next-t{min-width:0}
.cb-next-t b{display:block;font-size:13px;font-weight:700;color:var(--t1);margin-top:2px}
.cb-next-t span:last-child{display:block;font-size:11.5px;color:var(--t3);line-height:1.45;margin-top:2px}
.cb-next .btn{flex:0 0 auto;white-space:nowrap}
.cb-quiet b{font-weight:600;color:var(--t2)}
.cbb-hint{font-size:11.5px;color:var(--t3);line-height:1.5;margin:0 0 10px}
.cbb-f{margin-bottom:9px}
.cbb-f textarea{padding:9px 11px;border:1.5px solid transparent;border-radius:10px;font-size:13px;font-family:inherit;color:var(--t1);background:var(--bg);resize:vertical;min-height:52px}
.cbb-f textarea:focus{border-color:var(--accent);background:var(--card);outline:none;box-shadow:0 0 0 3px var(--accent-bg)}
.cbb-seg{flex-wrap:wrap}
.cbb-foot{display:flex;align-items:center;gap:10px;margin-top:4px}
.cbb-status{font-size:11.5px;color:var(--t3)}
@media(max-width:640px){.cb-next{flex-direction:column;align-items:flex-start}}

/* the next-best-action bar on a phone: the words above the button, never beside it (the money step's label is longer than the old ones) */
@media(max-width:640px){.nba-bar{flex-wrap:wrap}.nba-bar .nba-txt{flex:1 1 100%}.nba-bar .btn{flex:1 1 auto;justify-content:center}}
/* the quiet Next row (nothing waiting) stacks its eyebrow and sentence; seen spread across the card on Sean's real page (2026-09-23) */
.cb-next.cb-quiet{flex-direction:column;align-items:flex-start;gap:2px}

/* ============================================================================
   THE PLANS BOARD (2026-09-23). His words: "this page looks like a mess mashed up together clean
   this entire page up". A row is a table of facts, not a paragraph: every fact has a column, so
   the eye compares DOWN. The verbs sit behind the row menu, so only the money and the dates are
   always on screen. The same rows render on the Overview in the compact variant, because two
   copies of a list is how the two screens drifted apart in the first place.
   ============================================================================ */
.pb-strip{display:flex;align-items:stretch;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 4px;margin-bottom:14px}
.pb-stat{flex:1;padding:0 20px;min-width:0}
.pb-stat b{display:block;font-size:24px;font-weight:700;color:var(--t1);letter-spacing:-.02em;line-height:1.15}
.pb-stat b span{font-size:13px;font-weight:500;color:var(--t2);letter-spacing:0}
.pb-stat>span{display:block;font-size:12.5px;color:var(--t2);margin-top:4px}
.pb-stat .pb-off{color:var(--t3)}
.pb-stat .pb-warn{color:var(--warn)}
.pb-stat-wait{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pb-stat-wait a{font-size:12.5px;font-weight:600;color:var(--accent);white-space:nowrap;cursor:pointer;text-decoration:none}
.pb-stat-wait a:hover{text-decoration:underline}
.pb-sep{width:1px;background:var(--border);margin:2px 0}

.pb-t{display:block}
.pb-head,.pb-row{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(130px,1.1fr) 150px 170px 130px 40px;gap:16px;align-items:center}
.pb-t-wait .pb-head,.pb-t-wait .pb-row{grid-template-columns:minmax(150px,1.3fr) minmax(130px,1.1fr) minmax(120px,1fr) 130px 128px}
/* SCHEDULED is FIVE columns (client, what, when, amount, end), not the six Running uses. Written as its
   own rule rather than inherited, because a five-cell row in a six-column grid puts every header one
   column to the right, which is the defect fixed on the Projects table the same morning. */
.pb-t-sched .pb-head,.pb-t-sched .pb-row{grid-template-columns:minmax(150px,1.3fr) minmax(160px,1.4fr) 140px 130px 92px}
.pb-soon{color:var(--accent) !important;font-weight:600}
.pln-sub-h{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:2px 0 10px}
@media (max-width:820px){
  .pb-t-sched .pb-head{display:none}
  .pb-t-sched .pb-row{grid-template-columns:1fr auto;gap:6px 12px}
  .pb-t-sched .pb-row .pb-amt{text-align:right}
}
.pb-compact .pb-head,.pb-compact .pb-row{grid-template-columns:minmax(110px,1.2fr) minmax(100px,1fr) 118px 110px 36px;gap:12px}
.pb-compact.pb-t-wait .pb-head,.pb-compact.pb-t-wait .pb-row{grid-template-columns:minmax(110px,1.2fr) minmax(100px,1fr) 110px 128px}
.pb-head{padding:7px 2px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.pb-head div:nth-last-child(2){text-align:right}
.pb-row{padding:13px 2px;border-bottom:1px solid var(--border)}
.pb-row:last-child{border-bottom:none}
.pb-c{min-width:0}
.pb-c b{display:block;font-size:13.5px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-c span{display:block;font-size:11.5px;color:var(--t2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-who b{font-weight:650}
.pb-plan{font-weight:500 !important}
.pb-warn{color:var(--warn) !important}
.pb-bad{color:var(--danger) !important}
.pb-off{color:var(--t3) !important}
.pb-dim{color:var(--t3)}
.pb-col{display:flex;align-items:center;gap:6px;color:var(--t2)}
.pb-col svg{flex-shrink:0;color:var(--accent)}
.pb-colt{font-size:12.5px !important;color:var(--t2) !important;margin-top:0 !important}
.pb-src span{white-space:normal;font-size:12px}
.pb-amt{text-align:right}
.pb-amt b{font-size:14.5px;font-weight:700}
.pb-amt span{font-size:11.5px;color:var(--t3)}
.pb-end{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.pb-menu{width:30px;height:30px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--t2);cursor:pointer}
.pb-menu:hover{background:var(--hover);color:var(--t1)}
.pb-menu:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pb-make{white-space:nowrap}
.pb-note{margin:0 0 10px;font-size:12.5px;color:var(--t3);line-height:1.5;max-width:70ch}
.pb-sums{display:flex;gap:28px;margin-bottom:12px}
.pb-sums span{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.pb-sums b{font-size:19px;font-weight:700;color:var(--t1);letter-spacing:-.01em}
.pb-sums em{font-style:normal;font-size:11px;font-weight:500;color:var(--t2)}

/* a phone reads a plan as two lines, never a squeezed table */
@media (max-width:860px){
  .pb-strip{flex-wrap:wrap;gap:12px 0;padding:14px 0}
  .pb-sep{display:none}
  .pb-stat{flex:1 1 45%;padding:0 14px}
  .pb-head{display:none}
  .pb-row,.pb-t-wait .pb-row,.pb-compact .pb-row{grid-template-columns:1fr auto;gap:4px 12px;padding:12px 2px}
  .pb-c span{white-space:normal}
  .pb-amt{grid-column:2;grid-row:1;text-align:right}
  .pb-col,.pb-src{grid-column:1/-1}
  .pb-end{grid-column:2;grid-row:2;justify-content:flex-end}
}

/* the card header: the summary line must never run under the button beside it (seen in the 1440 and
   1280 captures, 2026-09-23; .bks-sub has margin-left:auto and no min-width, so it grew into it) */
.pln-card .ch,.ov-rec .ch{gap:12px}
.pln-card .ch .bks-sub,.ov-rec .ch .bks-sub{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pln-card .ch .btn,.ov-rec .ch .btn{flex:0 0 auto}
@media (max-width:1320px){.pb-stat-wait{flex-wrap:wrap;gap:4px 12px}}
/* ESTIMATE STUDIO: optional add-ons (2026-09-25). The same row language as the line items. */
.est-ah{display:grid;grid-template-columns:1fr 1.3fr 128px 128px 32px;gap:8px;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--border)}
.est-ah span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);font-weight:700}
.est-ah .r{text-align:right}
.est-ar{display:grid;grid-template-columns:1fr 1.3fr 128px 128px 32px;gap:8px;padding:6px 12px;align-items:center;border-bottom:1px solid var(--border)}
.est-ar:hover{background:var(--hover)}
.est-ar .est-box input{text-align:right}
/* a grid track never shrinks below its content, and a text input's natural width is ~20 characters: without these
   the row outgrew a phone and .est-lines (overflow:hidden) silently cut off the prices and the delete */
.est-ar>*{min-width:0}.est-ar>input[type=text]{width:100%;box-sizing:border-box}
/* a price is shown whole: the spinner took ~20px of a narrow field and $1,500.00 read as "1500." (and 300 as "30" on
   a phone); the harness asks every field whether its value fits */
.est-ar .est-box input[type=number]{-moz-appearance:textfield;appearance:textfield}
.est-ar .est-box input[type=number]::-webkit-outer-spin-button,.est-ar .est-box input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.est-ar .est-box .suf{display:none;color:var(--t3);font-size:12px;white-space:nowrap}
/* the delete shows on hover or focus like a line item's; the add-on row was missing from that rule, so its trash
   was never visible at all (2026-09-25) */
.est-ar:hover .est-del,.est-ar:focus-within .est-del{opacity:1}
/* a touch screen has no hover: every row's delete stays visible there, line items included */
@media (hover:none){.est-del{opacity:.75}}
/* phone: name and delete on the first line, the note under it, the two prices side by side, each naming itself */
@media(max-width:720px){.est-ah{display:none}
  .est-ar{grid-template-columns:1fr 1fr 32px;grid-template-areas:"n n d" "t t t" "p m m";row-gap:6px}
  .est-ar>input[data-ea="name"]{grid-area:n}.est-ar>input[data-ea="note"]{grid-area:t}
  .est-ar>.est-ap{grid-area:p}.est-ar>.est-am{grid-area:m}.est-ar>.est-del{grid-area:d}
  /* the label rides on its own small line ABOVE the figure, so the figure has the whole box */
  .est-ar .est-box{flex-wrap:wrap;row-gap:0;padding:6px 11px}
  .est-ar .est-box .suf{display:block;order:-1;width:100%;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}}
/* PORTAL 2b FILES BOTH WAYS (2026-09-26): the chips on a shared file and the inbox folder, the share toggle's on
   state, and the "Their portal" strip of requests above the listing. Tokens only, both themes. */
.drv-pchip{display:inline-flex;align-items:center;margin-left:8px;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--accent-bg);color:var(--accent-tx);white-space:nowrap;vertical-align:1px}
.drv-pchip.in{background:var(--hover);color:var(--t2);border:1px solid var(--border)}
.drv-on{color:var(--accent-tx)!important;background:var(--accent-bg)!important}
.drv-portal{border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin:10px 0 12px;background:var(--card)}
.drv-ph{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2);flex-wrap:wrap}.drv-ph b{color:var(--t1);font-size:12.5px}.drv-ph svg{color:var(--accent)}
.drv-rq{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border);margin-top:8px}
.drv-rq>div{flex:1;min-width:0}.drv-rq b{display:block;font-size:13px;color:var(--t1)}.drv-rq small{display:block;font-size:11.5px;color:var(--t3);margin-top:1px;overflow-wrap:anywhere}
.drv-rqi{flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--hover);color:var(--t2)}
.drv-rq.got .drv-rqi{background:var(--accent-bg);color:var(--accent-tx)}
/* on a phone the name is squeezed by the row's buttons and the chip beside it disappears: the SAME fact rides the
   row's second line there instead (NameDrive's own 768 breakpoint), so she can always tell what the client sees */
.drv-pmeta{display:none}
@media (max-width:768px){.drv-nm .drv-pchip{display:none}.drv-pmeta{display:inline;color:var(--accent-tx);font-weight:600;font-style:normal}i.drv-pmeta{display:block}}
/* READ TIME (2026-09-25): what the client read, and for how long. The line sits on the quote chip, the quotes
   table and the letter card; the sheet is the breakdown. Tokens only, both themes. */
.dr-line{display:inline-flex;align-items:center;gap:5px;border:0;background:var(--accent-bg);color:var(--accent-tx);font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 10px;cursor:pointer;max-width:100%;text-align:left;line-height:1.35}
.dr-line:hover{filter:brightness(.96)}
.dr-line svg{flex:none}
.dr-sheet{max-width:560px}
.dr-facts{margin:0 0 14px;color:var(--t2);font-size:13px;line-height:1.5}
.dr-bars{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.dr-bar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 64px;gap:10px;align-items:center;font-size:13px}
.dr-bl{color:var(--t1);min-width:0;overflow-wrap:anywhere}
.dr-bar.top .dr-bl{font-weight:700}
.dr-track{height:8px;border-radius:99px;background:var(--hover);overflow:hidden;border:1px solid var(--border)}
.dr-track span{display:block;height:100%;background:var(--accent);border-radius:99px}
.dr-bar:not(.top) .dr-track span{opacity:.55}
.dr-bv{text-align:right;font-variant-numeric:tabular-nums;color:var(--t2);font-weight:600}
.dr-visits{border-top:1px solid var(--border);padding-top:12px}
.dr-vh{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);font-weight:700;margin-bottom:6px}
.dr-v{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--t1)}
.dr-v:last-child{border-bottom:0}
.dr-vt{color:var(--t3);white-space:nowrap}
.dr-note{margin:14px 0 0;color:var(--t3);font-size:12px;line-height:1.5}
@media(max-width:560px){.dr-bar{grid-template-columns:minmax(0,1fr) 56px}.dr-track{grid-column:1/-1;order:3}.dr-v{grid-template-columns:minmax(0,1fr) auto}.dr-v>span:nth-child(2){grid-column:1/-1;order:3;color:var(--t2)}}

/* ============ COMMS > PORTAL: the client portal thread (QUEUE-PORTAL-HQ 2d, 2026-09-26) ============
   The Texts shell and bubbles as they are; these rules are only what a portal thread adds: files in a bubble, the
   composer (a real textarea, Attach, the vault line), the attach and pick dialogs. Tokens only. */
.pt-vault{display:flex;gap:8px;align-items:flex-start;margin:14px 10px 0;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);font-size:11.5px;line-height:1.45;color:var(--t2);background:var(--bg)}
.pt-vault svg{flex:none;margin-top:2px;color:var(--accent-tx)}
.pt-first{display:flex;gap:8px;align-items:center;justify-content:center;padding:28px 18px;color:var(--t3);font-size:12.5px;text-align:center}
.pt-files{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pt-files:first-child{margin-top:0}
.pt-file{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;padding:6px 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--t1);font:var(--ff);font-size:12px;font-weight:600;cursor:pointer;text-align:left;white-space:normal}
.pt-file span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-file:hover{border-color:var(--accent)}
.pt-file.gone{cursor:default;color:var(--t3);font-weight:500}
.pt-files.out .pt-file{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:var(--on-solid)}
.pt-cmp{display:flex;flex-direction:column;gap:8px}
.pt-cmp textarea{width:100%;box-sizing:border-box;min-height:44px;max-height:220px;resize:none;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--input);color:var(--t1);font:var(--ff);font-size:13.5px;line-height:1.5}
.pt-cmp textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.pt-cmp-row{display:flex;align-items:center;gap:10px;min-width:0}
.pt-cmp-note{flex:1;min-width:0;display:flex;gap:6px;align-items:center;font-size:11.5px;color:var(--t3);line-height:1.35}
.pt-cmp-note svg{flex:none}
.pt-cmp-off{flex-direction:row;align-items:flex-start;gap:8px;color:var(--warn-tx);background:var(--warn-bg);font-size:12.5px;line-height:1.45}
.pt-cmp-off svg{flex:none;margin-top:2px}
/* the contact page's Portal deck: the thread in a short box above the composer (the card is the frame) */
.pt-deck-scroll{max-height:320px;min-height:90px;border:1px solid var(--border);border-radius:var(--r);margin:0 0 10px}
.pt-cmp.pt-cmp-deck{border-top:0;padding:0;background:transparent}
.cp-ct-n{display:inline-block;min-width:16px;margin-left:6px;padding:1px 6px;border-radius:9px;background:var(--accent);color:var(--on-solid);font-size:10px;font-weight:700;text-align:center;line-height:1.5}
.pt-chips{display:flex;flex-wrap:wrap;gap:6px}
.pt-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 4px 4px 9px;border-radius:999px;background:var(--accent-bg);color:var(--accent-tx);font-size:12px;font-weight:600}
.pt-chip button{display:inline-flex;border:0;background:none;color:inherit;padding:3px;border-radius:50%;cursor:pointer}
.pt-chip button:hover{background:var(--hover)}
.pt-att-why{display:flex;gap:6px;align-items:flex-start;margin:0 0 12px;line-height:1.45}
.pt-att-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r);max-height:340px;overflow:auto}
.pt-att{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px;color:var(--t1)}
.pt-att:last-child{border-bottom:0}
.pt-att:hover{background:var(--hover)}
.pt-att-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-att-s{font-size:10.5px;font-weight:700;color:var(--accent-tx);background:var(--accent-bg);padding:1px 7px;border-radius:999px}
.pt-att-z{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.pt-pick{display:flex;flex-direction:column;gap:2px;max-height:min(56vh,480px);overflow-y:auto}
.pt-pick-q{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--input);color:var(--t3)}
.pt-pick-q input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font:var(--ff);font-size:13.5px;padding:10px 0;outline:none}
.pt-pick-q:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.pt-pick-none{padding:14px 12px;margin:0}
.pt-pick-i{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:var(--r);background:none;color:var(--t1);font:var(--ff);text-align:left;cursor:pointer}
.pt-pick-i:hover{background:var(--hover)}
.pt-pick-i>span:last-child{display:flex;flex-direction:column;min-width:0}
.pt-pick-i b{font-size:13.5px}
.pt-pick-i.off{opacity:.6}
@media(max-width:560px){.pt-cmp-row{flex-wrap:wrap}.pt-cmp-note{order:3;flex-basis:100%}.pt-cmp-row .btn-primary{margin-left:auto}.pt-att{grid-template-columns:auto minmax(0,1fr) auto}.pt-att>svg,.pt-att-z{display:none}}

/* ============ THE SETTINGS SHELL (2026-09-29, js/settings-shell.js) ============
   A grouped rail and one pane, in place of one scroll of 40 cards. Every colour
   is a token, so both themes and the two brand skins below still hold. */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body[data-view="settings"] #settings-content{padding:0;overflow:hidden;display:flex}
.st{display:flex;flex:1;min-height:0;min-width:0;width:100%}
/* ---- rail ---- */
.st-rail{width:246px;flex-shrink:0;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden}
.st-search{padding:13px 12px 9px;flex-shrink:0}
.st-search input{width:100%;padding:8px 11px;border:1.5px solid var(--border);border-radius:9px;font-size:12.5px;font-family:inherit;background:var(--bg);color:var(--t1);outline:none;transition:border-color .15s}
.st-search input:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.st-nav{padding:0 9px 16px}
.st-gl{font-size:10px;font-weight:700;letter-spacing:.09em;color:var(--t3);padding:10px 11px 5px;text-transform:uppercase}
.st-i{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--t2);min-height:36px;text-decoration:none;line-height:1.25}
.st-i:hover{background:var(--hover);color:var(--t1)}
.st-i.on{background:var(--hover);color:var(--t1);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
.st-i.off{color:var(--t3)}
.st-off-dot{display:inline-flex;align-items:center;color:var(--t3);margin-left:auto}
.st-none{font-size:12.5px;color:var(--t2);line-height:1.6;padding:18px 14px}
/* ---- the health strip: the only thing in settings allowed to shout ---- */
/* --warn-bg and --warn-tx are the existing pair for an amber surface and its ink,
   and they already carry their own dark-mode values. No second token system. */
.st-health:empty{display:none}
.st-health{margin:2px 12px 10px;border:1px solid var(--warn);background:var(--warn-bg);border-radius:10px;padding:9px 10px}
.st-health-h{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warn-tx)}
.st-health-h svg{flex-shrink:0}
.st-health-r{display:flex;align-items:flex-start;gap:4px}
.st-health-r a{flex:1;min-width:0;font-size:11.5px;line-height:1.45;color:var(--warn-tx);text-decoration:none;padding:3px 0;font-weight:500}
.st-health-r a:hover{text-decoration:underline}
.st-health-x{background:none;border:none;cursor:pointer;color:var(--warn-tx);opacity:.55;padding:3px;border-radius:5px;flex-shrink:0;line-height:0}
.st-health-x:hover{opacity:1;background:rgba(0,0,0,.06)}
.st-health-more{font-size:10.5px;color:var(--warn-tx);opacity:.8;padding:3px 0 0}
/* ---- pane ---- */
.st-pane{flex:1;min-width:0;min-height:0;overflow-y:auto;background:var(--bg)}
.st-pane-in{max-width:860px;padding:24px 28px 104px}   /* the foot must clear the floating + button */
.st-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.st-title{margin:6px 0 0;font-size:22px;font-weight:700;letter-spacing:-.018em;color:var(--t1)}
.st-sub{margin:7px 0 20px;font-size:13.5px;line-height:1.6;color:var(--t2);max-width:640px}
/* the cards below keep their own margins from the flat page; the first one must not inherit one */
.st-pane-in>.card:first-of-type{margin-top:0!important}
.st-note{font-size:11.5px;color:var(--t3);line-height:1.6;margin:10px 0 0}
/* a link inside a settings note reads as the app's own, in both themes (it fell back to browser blue, 2026-09-29) */
.st-note a{color:var(--accent-tx);font-weight:600;text-decoration:none}.st-note a:hover{text-decoration:underline}
/* ---- a page whose module is switched off: it sells, it does not vanish ---- */
.st-off-card .cb{padding:22px}
.st-off-blurb{font-size:13.5px;line-height:1.6;color:var(--t2);margin:11px 0 0;max-width:560px}
.st-off-mates{font-size:12px;line-height:1.7;color:var(--t2);margin:12px 0 14px}
.st-chip{display:inline-block;font-size:11px;font-weight:500;color:var(--t2);background:var(--hover);border:1px solid var(--border);border-radius:7px;padding:3px 8px;margin:2px 2px 0 0}
.st-off-ask{font-size:12px;color:var(--t3);line-height:1.6;margin:0}
/* ---- an honest wall, never a 404 ---- */
.st-wall{text-align:center;padding:30px 22px}
.st-wall h3{margin:11px 0 0;font-size:16px;font-weight:700;color:var(--t1)}
.st-wall p{margin:6px auto 0;font-size:13px;line-height:1.6;color:var(--t2);max-width:380px}
.st-wall button{margin-top:13px}
/* ---- phone: the rail stops being a rail ---- */
@media(max-width:760px){
  body[data-view="settings"] #settings-content{display:block;overflow-y:auto}
  .st{flex-direction:column}
  .st-rail{width:100%;border-right:none;border-bottom:1px solid var(--border);overflow:visible;max-height:none}
  .st-search input{font-size:16px;min-height:46px}  /* 16px or iOS zooms the page on focus */
  .st-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;padding-bottom:12px}
  .st-gl{grid-column:1/-1}
  .st-i{min-height:44px}
  .st-health{grid-column:1/-1}
  .st-health-r a{font-size:12.5px;padding:6px 0}
  .st-pane{overflow:visible}
  .st-pane-in{padding:18px 16px 32px;max-width:none}
  .st-title{font-size:21px}
}

/* ---- THE TWO SCROLLS (2026-09-29, measured, not guessed) ----
   #main is min-height:900px with no cap, so it GROWS with its content. Nothing
   below it was ever bounded, which meant overflow-y:auto on the rail and the
   pane had nothing to do: the whole document scrolled and the rail scrolled away
   with it. Measured on the real app: rail, pane and container were all 1941px
   tall inside a 900px window. Bounding the chain for this view only gives the
   two panes their own scroll, and the rail now stays where she left it. */
@media(min-width:761px){
  body[data-view="settings"] #main{height:100vh;min-height:0}
  body[data-view="settings"] #view-settings{min-height:0}
  body[data-view="settings"] #settings-content{min-height:0}
  .st-rail,.st-pane{min-height:0}
  /* the page you are on stays named while you scroll its content */
  .st-head{position:sticky;top:0;z-index:2;background:var(--bg);margin:-24px -28px 0;padding:24px 28px 14px}
  .st-head .st-sub{margin-bottom:0}
}
/* On a phone the whole thing is one scroll, so cap the list instead: without
   this, reaching the content means scrolling past forty links every time. */
@media(max-width:760px){
  .st-nav{max-height:44vh;overflow-y:auto}
  .st-head{padding-bottom:0}
}
.st-i{justify-content:space-between}
.st-i-n{display:flex;flex-direction:column;gap:1px;min-width:0}
.st-i-a{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
.st-none a{color:var(--accent2);font-weight:600}

/* ============================================================
   REVIEWS (2026-09-30) — the dashboard card, the settings page, the QR.
   Tokens only: these read correctly in light and dark because nothing here
   names a colour, it names a role.
   ============================================================ */
.rvw-dash{padding:14px}
.rvw-n{font-size:30px;font-weight:700;color:var(--t1);line-height:1.1;font-variant-numeric:tabular-nums}
.rvw-star{font-size:14px;font-weight:600;color:var(--t2);vertical-align:middle;margin-left:4px}
.rvw-sub{font-size:12px;color:var(--t3);margin-top:4px}
.rvw-todo{margin-top:10px;font-size:12px;font-weight:600;color:var(--accent-tx);cursor:pointer}
.rvw-todo:hover{text-decoration:underline}
.rvw-big{font-size:26px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
.rvw-list{display:flex;flex-direction:column;gap:2px}
.rvw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.rvw-row:last-child{border-bottom:0}
.rvw-row b{display:block;font-size:13px;color:var(--t1)}
.rvw-row span{display:block;font-size:11.5px;color:var(--t3);margin-top:1px}
.rvw-qr{display:inline-block;padding:10px;background:var(--qr-paper);border:1px solid var(--border);border-radius:10px}
.rvw-qr svg{display:block}

/* WELCOME AT CREATION (2026-09-30): the two switches on New contact, the CSV import and the card scan (js/portals.js wlc*) */
.wlc{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;margin:12px 0 4px;padding:12px 13px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.wlc-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t2)}
.wlc-h span{font-weight:500;text-transform:none;letter-spacing:0;color:var(--t3)}
.wlc-row{display:flex;align-items:flex-start;gap:12px}
.wlc-row .tgl{border:none;padding:0;appearance:none;-webkit-appearance:none;margin-top:1px}
.wlc-txt{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13px;color:var(--t1)}
.wlc-sub{font-size:12px;line-height:1.5;color:var(--t2);overflow-wrap:anywhere}
.wlc-sub em{font-style:normal;font-weight:600;color:var(--t1)}
.wlc-sub em.wlc-miss{color:var(--warn-tx)}
/* SETTINGS > PHONE (js/phonecfg.js). Added 2026-10-12: the page shipped on 2026-10-03 with none of its own classes
   defined anywhere, so titles ran into badges and labels into notes. Tokens only. */
.pc-card{margin-bottom:14px}
.pc-card .cb>.fx-hint:last-child{margin-bottom:0}
.pc-list{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px}
.pc-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc-num{flex:1 1 180px;min-width:0;max-width:260px}
.pc-skip{flex:1 1 100%;font-size:11.5px;color:var(--warn-tx)}
.pc-chk{margin:14px 0 4px}
.pc-gap{margin-top:10px}
.pc-actions{margin-top:14px}
.pc-ro{display:flex;flex-direction:column}
.pc-ro-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--border)}
.pc-ro-row:first-child{border-top:none}
.pc-ro-row>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-ro-row b{font-size:13px;font-weight:600;color:var(--t1)}
.pc-ro-row span{font-size:11.5px;color:var(--t3);line-height:1.5}
.pc-ro-row code{flex:0 0 auto;max-width:50%;font-size:12px;color:var(--t2);text-align:right;overflow-wrap:break-word}
.pc-seen{margin-top:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);font-size:12.5px;line-height:1.5;color:var(--t2)}
.pc-seen-ok b{color:var(--accent-tx)}
.pc-how{margin-top:12px}
.pc-how>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent-tx)}
.pc-steps{margin:10px 0 10px;padding-left:18px;font-size:12.5px;color:var(--t2);line-height:1.7}
.pc-steps code,.pc-how .fx-hint code{font-size:12.5px;font-weight:600;color:var(--t1);white-space:nowrap}

/* ============ CONTRACTORS (2026-10-21, js/contractors.js): the section, the contact card, the review sheet ============ */
.ctr-seg{margin:0 0 12px;flex-wrap:wrap}
.ctr-n{display:inline-block;min-width:16px;padding:0 5px;margin-left:4px;border-radius:9px;background:var(--hover);color:var(--t2);font-size:10.5px;font-weight:700;text-align:center}
.ctr-list{padding:4px 0}
.ctr-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:12px 16px;background:none;border:0;border-bottom:1px solid var(--border);text-align:left;color:var(--t1);font:inherit;cursor:pointer}
.ctr-row:last-child{border-bottom:0}
.ctr-row:hover{background:var(--hover)}
.ctr-who{min-width:0;display:flex;flex-direction:column;gap:2px}
.ctr-who b{font-size:14px;overflow-wrap:anywhere}
.ctr-who small,.ctr-sub{font-size:12px;color:var(--t3)}
.ctr-facts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.ctr-fact{display:flex;flex-direction:column;align-items:flex-end;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctr-fact small{font-weight:500;font-size:11px;color:var(--t3)}
.ctr-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px;text-align:center;color:var(--t2)}
.ctr-empty b{color:var(--t1);font-size:14px}
.ctr-empty span{font-size:12.5px;max-width:460px;line-height:1.5}
.ctr-err{padding:10px 12px;border-radius:8px;background:var(--danger-bg);color:var(--danger-tx);font-size:13px;margin:0 0 10px}
.ctr-note{padding:10px 12px;border-radius:8px;background:var(--warn-bg);color:var(--warn-tx);font-size:12.5px;margin:0 0 12px}
.ctr-cta{margin-top:8px;width:100%;justify-content:center}
.ctr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:0 0 14px}
.ctr-tiles>div{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:3px;min-width:0}
.ctr-tiles small{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.ctr-tiles b{font-size:17px;font-variant-numeric:tabular-nums;color:var(--t1)}
.ctr-tiles .badge{align-self:flex-start}
.ctr-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.ctr-ent{padding:12px 0;border-bottom:1px solid var(--border)}
.ctr-ent:last-child{border-bottom:0}
.ctr-ent.gone,.ctr-st.gone{opacity:.55}
.ctr-er{display:flex;justify-content:space-between;gap:12px}
.ctr-ew{min-width:0;flex:1}
.ctr-ew b{font-size:13.5px;color:var(--t1)}
.ctr-ew p{margin:3px 0 0;font-size:13px;color:var(--t2);line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.ctr-eh{display:flex;flex-direction:column;align-items:flex-end;font-weight:700;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ctr-eh small{font-weight:500;font-size:11.5px;color:var(--t3)}
.ctr-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.ctr-why{margin-top:7px;padding:8px 10px;border-radius:8px;background:var(--hover);font-size:12.5px;color:var(--t1);line-height:1.5;overflow-wrap:anywhere}
.ctr-why b{margin-right:4px}
.ctr-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px}
.ctr-no{color:var(--danger-tx)}
.ctr-form{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.ctr-form .ff{margin-bottom:8px}
.ctr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ctr-grid label{display:flex;flex-direction:column;min-width:0}
.ctr-in{font:inherit;font-size:14px;color:var(--t1);background:var(--input);border:1px solid var(--border);border-radius:8px;padding:8px 10px;min-width:0;width:100%;box-sizing:border-box}
.ctr-check{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--t1);margin:8px 0;line-height:1.4}
.ctr-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:16px 0 6px}
.ctr-h:first-child{margin-top:0}
.ctr-st{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.ctr-st>div:first-child{min-width:0;display:flex;flex-direction:column;gap:2px}
.ctr-st b{font-size:13.5px;color:var(--t1)}
.ctr-st small{font-size:12px;color:var(--t3);overflow-wrap:anywhere}
.ctr-sr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;font-variant-numeric:tabular-nums}
.ctr-sr>b{font-size:14px}
.ctr-sr .ff{margin:0;min-width:150px}
.ctr-hist{display:flex;flex-direction:column}
.ctr-hh{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px;align-items:baseline}
.ctr-hh span,.ctr-hh small{color:var(--t3)}
.ctr-hh b{font-weight:500;color:var(--t1);overflow-wrap:anywhere}
.ctr-hh.ctr-hand{background:var(--warn-bg)}
.ctr-hh.ctr-hand small{color:var(--warn-tx);font-weight:700}
@media(max-width:640px){
  .ctr-row{flex-direction:column;align-items:flex-start}
  .ctr-facts{justify-content:flex-start}
  .ctr-fact{align-items:flex-start}
  .ctr-grid{grid-template-columns:minmax(0,1fr)}
  .ctr-er{flex-direction:column;gap:4px}
  .ctr-eh{align-items:flex-start}
  .ctr-st{flex-direction:column;align-items:flex-start}
  .ctr-sr{justify-content:flex-start}
  .ctr-hh{grid-template-columns:minmax(0,1fr);gap:2px}
}