/* Brand palette measured from chatbase.co (its :root / .dark tokens, 2026-10-22): Geist,
   a neutral zinc ramp, near-black #09090B primary on white and #FAFAFA surfaces, 10px
   base radius. Token names are unchanged, so this is a value swap, not a restyle. */
/* ==========================================================================
   Revbound — Naviira v7.11 design system, application build.
   Tokens mirror naviira-site/assets/css/v7.11.css exactly.
   Light-first. Brand deep blue #005fa0 (hover LIGHTENS to #0078c8).
   Radius: buttons 12 / cards 16 / panels 24. Spacing on the 4px scale.
   ========================================================================== */

@font-face {
  font-family: 'InterVariable';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'InterVariable';
  font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/InterVariable-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lexend';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/lexend-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/geist-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/geist-mono-var.woff2') format('woff2');
}

/* The hidden attribute always wins. Without this, any class that sets display (.btn,
   .row, .grid) silently overrides it and "hidden" controls stay on screen. */
[hidden] { display: none !important; }

/* ---------- Tokens: LIGHT (canonical) ---------- */
:root {
  color-scheme: light;
  --bg: #FAFAFA;
  --bg-1: #FAFAFA;          /* cool, calm app canvas (matches the shell gradient) */
  --bg-2: #F4F4F5;
  --bg-3: #E4E4E7;
  --card: #FFFFFF;
  --card-2: #FAFAFA;
  --glass: rgba(255, 255, 255, 0.9);
  /* Lines are translucent warm ink, not opaque — KG Tasks' effective values (its later
     :root override wins). Reads lighter over white cards, which is the "calm" look. */
  --line: #F4F4F5;
  --line-2: #E4E4E7;
  --fg: #09090B;
  --fg-2: #3F3F46;
  --fg-3: #71717B;   /* darkened from #817B72 for AA (4.54:1 on white) — matches KG Tasks */
  --fg-4: #9F9FA9;
  --accent: #09090B; --accent-ink: #000000; --accent-tint: #F4F4F5; --accent-line: #E4E4E7;
  --sel-tint: #F4F4F5;
  --sel-border: #D4D4D8;
  --row-hover: var(--sel-tint);
  --row-active: var(--bg-3);
  --blue: #09090B;
  --blue-hover: #27272A;
  --blue-ink: #09090B;
  /* Text painted ON the primary surface. Light: white on charcoal. Dark: the primary
     flips to cream, so this flips to charcoal — hardcoding #fff here produced white
     badges on cream pills in dark mode. */
  --on-blue: #FAFAFA;
  --green: #15803D;
  --green-soft: #00A544;
  --red: #B91C1C;
  --amber: #B75000;
  --coral: #F05100;
  --violet: #E60076;
  --grad-edge-a: #E4E4E7; --grad-edge-b: #F4F4F5;
  --tint-blue: #F4F4F5;
  --tint-green: #DCFCE7;
  --tint-red: #FEF2F2;
  --tint-amber: #FFFBEB;
  --tint-coral: #FEF3C7;
  --tint-violet: #FFF4F9;
  --grad-btn: var(--blue);
  /* Chatbase brand gradient, used sparingly (brand mark, empty-state icons). */
  --grad-brand: linear-gradient(135deg, #e879f9 0%, #f472b6 50%, #fb923c 100%);   /* primary button follows the brand primary */
  /* Flat, professional depth: borders do the work; shadows are a whisper. Shadow ink is
     the WARM stone (hsl 30 10% 10% / rgba 20,20,18) — the cool rgba(16,24,40) slate ink is
     a deprecated remnant in KG Tasks and read blue against the oatmeal canvas. */
  --shadow-card: 0 1px 2px rgba(9, 9, 11, 0.04);
  --shadow-float: 0 12px 32px -12px rgba(9, 9, 11, 0.18), 0 2px 6px rgba(9, 9, 11, 0.05);
  --shadow-btn: 0 1px 2px rgba(9, 9, 11, 0.06);
  --glow-soft: 0 2px 12px -6px rgba(9, 9, 11, 0.2);
  --nav-bg: #FAFAFA;
  --chart-grid: rgba(9, 9, 11, 0.06);
  --canvas: #FAFAFA;
  /* Semantic status palette — one source of truth for outcome/sentiment/warmth
     colors, reused by chips, warmth bars, goals, sentiment & the ESP heatmap. */
  --sc-positive: var(--green); --sc-tint-positive: var(--tint-green);
  --sc-negative: var(--red);   --sc-tint-negative: var(--tint-red);
  --sc-neutral: var(--fg-4);   --sc-tint-neutral: var(--bg-2);
  --sc-warm: var(--amber);     --sc-tint-warm: var(--tint-amber);
  --sc-meeting: var(--violet); --sc-tint-meeting: var(--tint-violet);
  --sc-won: var(--green-soft); --sc-lost: var(--red);
  /* Radius ladder from KG Tasks' design constitution (globals.css: "10 control ·
     18 card · 20 surface · 22 overlay"). Its :root token still says 12px for cards and
     that is what it renders today, but the documented ladder is the intent and reads
     as the rounder, softer surface Harsh asked for. */
  --r-btn: 10px;
  --r-card: 14px;
  --r-panel: 16px;
  --r-shell: 0px;                    /* the app shell is square in KG Tasks; cards carry the radius */
  --r-lg: 14px; --r-md: 10px; --r-sm: 8px;
  /* Alias vocabulary KG Tasks defines in later :root blocks — kept so any rule ported
     from there resolves without renaming. */
  --r: var(--r-card); --shadow: var(--shadow-card); --float: var(--shadow-float);
  --ink: var(--fg); --ink2: var(--fg-3); --ink3: var(--fg-4);
  --ok: var(--green); --urgent: var(--red); --caution: var(--amber);
  --row-sel: var(--sel-tint);
  --info: #2563EB; --warn: #D97706; --line2: #F4F4F5;
  /* Clean, flat surfaces: neutral canvas → light panel → white cards. */
  --app-bg: #FAFAFA;                 /* canvas behind the shell */
  --shadow-shell: 0 6px 24px -10px rgba(9, 9, 11, 0.10), 0 1px 3px rgba(9, 9, 11, 0.04);
  --main-grad: #FAFAFA;              /* sidebar + main panel surface (flat) */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mo-fast: .12s; --mo-base: .18s; --mo-slow: .24s;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 56px;
  /* Sub-scale for space INSIDE a component: the gap between a chip and its label, the
     lift under a line of secondary text. The 4px step is too coarse there, which is why
     2, 6, 10 and 20 had been written as raw pixels in a hundred places. Named here so
     they read as chosen rather than typed. */
  --s-hair: 2px; --s-tight: 6px; --s-snug: 10px; --s-loose: 20px;
  /* Type scale. There were 25 distinct font sizes in this file: six different "big
     number" sizes on the dashboard alone (16, 19, 20, 22, 26, 30) and four ways to
     write small text (10, 10.5, 11, 11.5). Ten steps now, and every step earns its
     place. Nothing in the 9-17 band moved by more than half a pixel; the display sizes
     above it were deliberately collapsed, which is the visible part of this change. */
  --t-micro: 9px;   --t-caption: 10.5px; --t-small: 11.5px; --t-body: 12.5px;
  --t-emph: 13.5px; --t-title: 15px;     --t-head: 16.5px;  --t-lg: 19px;
  --t-xl: 20px;     --t-display: 26px;
  /* InterVariable is KG Tasks' `data-font="inter"` typeface, which is the one in use. */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  /* KG Tasks' token says 224px but its sidebar renders at 256px (Tailwind w-64 wins);
     the rendered width is what the eye compares. */
  --sidebar-w: 256px;
}

/* ---------- Tokens: DARK (supported alternative) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* One WARM stone ramp, token-for-token with KG Tasks: #1C1A17 shell < #1E1C19 page
     < #232120 card < #2A2724 well < #33302C chip. The previous cool blue-black ramp
     (#0f1014…) made dark mode a different product from light. */
  --bg: #09090B;
  --bg-1: #09090B;
  --bg-2: #18181B;
  --bg-3: #27272A;
  --card: #18181B;
  --card-2: #09090B;
  --glass: rgba(24, 24, 27, 0.85);
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.15);
  --fg: #FAFAFA;
  --fg-2: #E4E4E7;
  --fg-3: #A1A1AA;   /* collapses with fg-2 on dark by design (KG Tasks frozen tokens) */
  --fg-4: #71717A;
  --accent: #E4E4E7; --accent-ink: #FFFFFF; --accent-tint: #27272A; --accent-line: #3F3F46;
  /* Primary becomes cream on dark. Without this the light #2B2B2B leaked through and the
     primary button was near-black on a dark canvas. */
  --blue: #E4E4E7;
  --blue-hover: #FAFAFA;
  --blue-active: #D4D4D8;
  --blue-ink: #FAFAFA;
  --on-blue: #18181B;   /* KG Tasks: warm charcoal label on the cream primary */
  --green: #86EFAC;
  --green-soft: #00BB7F;
  --red: #FCA5A5;
  --amber: #FCD34D;
  --coral: #FB923C;
  --violet: #F472B6;
  --grad-edge-a: #27272A; --grad-edge-b: #3F3F46;
  --tint-blue: #27272A;
  --tint-green: #032E15;
  --tint-red: #450A0A;
  --tint-amber: #451A03;
  --tint-coral: #451A03;
  --tint-violet: rgba(244, 114, 182, 0.15);
  --sel-tint: rgba(255, 255, 255, 0.08);
  --sel-border: rgba(255, 255, 255, 0.3);
  --row-hover: #27272A;
  --row-active: #3F3F46;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 12px 40px -16px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.4);
  --glow-soft: 0 2px 12px -6px rgba(0, 0, 0, 0.4);
  --nav-bg: #18181B;
  --chart-grid: rgba(255, 255, 255, 0.06);
  --canvas: #09090B;
  --app-bg: #09090B;
  --shadow-shell: 0 1px 3px rgba(0, 0, 0, 0.35);
  --main-grad: #09090B;
  --warn: #FCD34D;
  --info: #60A5FA;
  --line2: rgba(255, 255, 255, 0.06);
  --td-y: 7px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

body {
  font-family: var(--font);
  font-feature-settings: "ss01", "cv11";
  font-size: var(--t-emph);   /* 13.5px — KG Tasks' body step; was a hardcoded 14px */
  line-height: 1.55;
  letter-spacing: -0.006em;
  overflow-wrap: break-word;
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100dvh;
}
::selection { background: rgba(9, 9, 11, 0.12); color: var(--fg); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
b, strong { color: var(--fg); font-weight: 600; }
h1, h2, h3, h4 { color: var(--fg); letter-spacing: -0.022em; font-weight: 650; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-4); background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Calm, static canvas (professional — no motion) ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--app-bg); background-attachment: fixed; }
.aurora .blob, .aurora .particles, .aurora .p { display: none; }
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Shell: flat, as KG Tasks ----------
   The sidebar and the page sit directly on the oatmeal canvas; only the topbar and the
   cards are white. The previous shell floated the sidebar and the page in two rounded
   white panels with a gap between them, and that single treatment was what made the
   two apps read as different products even with identical tokens. */
.shell { position: relative; z-index: 1; display: flex; gap: 0; height: 100dvh; padding: 0; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w); flex: none;
  display: flex; flex-direction: column; min-height: 0;
  padding: var(--s-4) var(--s-4) var(--s-4);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: width .22s var(--ease), padding .22s var(--ease);
}

/* ---------- Collapsed sidebar (icons only, tooltips on hover) ---------- */
.sidebar.collapsed { width: 68px; padding-left: var(--s-2); padding-right: var(--s-2); }
.sidebar.collapsed .brand { justify-content: center; padding: 4px 0 var(--s-4); }
.sidebar.collapsed .brand-text { display: none; }
.sidebar.collapsed .nav-section { font-size: 0; padding: var(--s-3) 0 var(--s-2); height: 12px; }
.sidebar.collapsed .nav-item { justify-content: center; padding: var(--s-2) 0; position: relative; }
.sidebar.collapsed .nav-item > span:not(.badge) { display: none; }
.sidebar.collapsed .nav-item .badge {
  position: absolute; top: 3px; right: 9px; min-width: 15px; padding: 0 var(--s-1);
  font-size: var(--t-micro); line-height: 15px; text-align: center;
}
.sidebar.collapsed .sidebar-footer { padding-left: 0; padding-right: 0; }
.sidebar.collapsed .sidebar-footer .foot-row { flex-direction: column; gap: var(--s-tight); padding: var(--s-tight) 0; }
.sidebar.collapsed .foot-label { display: none; }
.sidebar.collapsed .user-chip { justify-content: center; padding: var(--s-2) 0; }
.sidebar.collapsed .user-text { display: none; }
.sidebar.collapsed .user-chip { flex-direction: column; }
.sidebar.collapsed .user-actions { flex-direction: column; margin-left: 0; }
.sidebar.collapsed #logoutBtn { display: none; }
/* hover tooltip when collapsed */
.sidebar.collapsed [data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--card); color: var(--fg); border: 1px solid var(--line);
  padding: var(--s-tight) var(--s-snug); border-radius: 8px; font-size: var(--t-body); font-weight: 600;
  white-space: nowrap; box-shadow: var(--shadow-float);
  opacity: 0; pointer-events: none; transition: opacity .14s var(--ease); z-index: 40;
}
.sidebar.collapsed [data-tip]:hover::after { opacity: 1; }
/* Sidebar toggle lives in the topbar so it's always visible (both states). */
.topbar-collapse { flex: none; }
.topbar-collapse svg { transition: transform .22s var(--ease); }
.topbar-collapse.is-collapsed svg { transform: rotate(180deg); }
.brand { display: flex; align-items: center; gap: var(--s-snug); padding: 0 0 var(--s-3); }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--blue);
  color: var(--on-blue); font-weight: 700; font-size: var(--t-emph); letter-spacing: -0.02em;
  box-shadow: var(--shadow-btn);
}
.brand-logo { width: 32px; height: 32px; border-radius: 10px; object-fit: contain; flex: none; background: #fff; padding: var(--s-hair); box-shadow: var(--shadow-card); }
/* The KlientsGrowth and Revbound mark SVGs are self-contained (their own rounded field), so
   drop the extra tile padding/background the generic .brand-logo adds. */
.brand-logo.kg-mark { padding: 0; background: transparent; box-shadow: var(--shadow-card); }
:root[data-theme="dark"] .brand-logo.kg-mark { box-shadow: 0 0 0 1px var(--line-2); }
.brand-name { font-weight: 700; font-size: var(--t-title); letter-spacing: -0.02em; color: var(--fg); }
.brand-sub { font-size: var(--t-small); color: var(--fg-4); margin-top: -2px; }

.nav-groups { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* Section labels are sentence-case and quiet in KG Tasks ("Core", "Workspace"), not
   tracked uppercase caps — the caps treatment is what made the sidebar feel busy. */
.nav-section {
  font-size: var(--t-body); font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--fg-3); padding: var(--s-4) 0 var(--s-1);
}
.nav-section:first-child { padding-top: var(--s-3); }

/* The topbar's right side is an icon cluster (KG Tasks: timer / trash / display / bell /
   phone). Ask AI keeps its id and handler but shows as its spark icon; the live-sync pill
   collapses to its dot. Labels move to tooltips. */
/* Specificity matches .btn.ai so the tinted-box treatment does not win in the topbar. */
.topbar .btn.ai.ask-ai-btn { flex: none; width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: var(--r-btn); background: transparent; border-color: transparent; color: var(--fg-2); }
.topbar .btn.ai.ask-ai-btn:hover { background: var(--bg-2); border-color: transparent; color: var(--fg); }
.ask-ai-btn span { display: none; }
.ask-ai-btn svg { width: 16px; height: 16px; }
.live-pill {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; padding: 0; border-radius: var(--r-btn); font-size: 0;
  color: var(--green); background: transparent;
}
.live-pill:hover { background: var(--bg-2); }
.topbar-right .btn.icon { width: 32px; height: 32px; border-radius: var(--r-btn); color: var(--fg-2); }
.topbar-right .btn.icon:hover { background: var(--bg-2); color: var(--fg); }
.topbar-right .btn.icon svg { width: 16px; height: 16px; }

/* Ask Your CRM chat modal */
.modal.ask-modal { width: min(680px, calc(100vw - 32px)); display: flex; flex-direction: column; max-height: 86dvh; }
.ask-msgs { flex: 1; min-height: 240px; overflow-y: auto; padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.ask-empty { margin: auto; text-align: center; padding: var(--s-loose) 0; }
.ask-empty-title { color: var(--fg-3); font-size: var(--t-emph); margin-bottom: var(--s-3); }
.ask-starters { display: flex; flex-direction: column; gap: var(--s-2); align-items: center; }
.ask-starter { font-size: var(--t-body); color: var(--fg-2); background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: var(--s-tight) var(--s-3); transition: border-color .13s, background .13s; }
.ask-starter:hover { border-color: var(--blue); background: var(--tint-blue); color: var(--blue-ink); }
.ask-q { align-self: flex-end; max-width: 80%; background: var(--blue); color: var(--on-blue); padding: var(--s-2) var(--s-3); border-radius: 15px 15px 4px 15px; font-size: var(--t-emph); line-height: 1.5; }
.ask-a { align-self: flex-start; max-width: 92%; display: flex; flex-direction: column; gap: var(--s-2); }
.ask-answer { background: var(--card-2); border: 1px solid var(--line); padding: var(--s-snug) var(--s-3); border-radius: 15px 15px 15px 4px; font-size: var(--t-emph); line-height: 1.55; color: var(--fg-2); }
.ask-answer .ask-line { margin: 0 0 var(--s-1); }
.ask-answer .ask-line:last-child { margin-bottom: 0; }
.ask-answer .ask-line b, .ask-answer .ask-ul b { color: var(--fg); }
.ask-answer .ask-ul { margin: var(--s-tight) 0 0; padding-left: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); }
.ask-answer .ask-ul li { font-size: var(--t-emph); }
.ask-err { background: var(--tint-coral); color: var(--coral); padding: var(--s-2) var(--s-3); border-radius: 12px; font-size: var(--t-body); }
.ask-a .spinner { margin-right: var(--s-2); }
.ask-data { font-size: var(--t-body); }
.ask-data summary { cursor: pointer; color: var(--blue-ink); font-weight: 600; font-size: var(--t-small); padding: var(--s-hair) 0; }
.ask-data .table-wrap { margin-top: var(--s-2); max-height: 260px; overflow: auto; }
.ask-data .tbl th, .ask-data .tbl td { font-size: var(--t-small); padding: var(--s-tight) var(--s-2); }
.ask-input-row { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-5); border-top: 1px solid var(--line); flex: none; }
.ask-input-row .input { flex: 1; }
.ask-input-row .btn.primary { flex: none; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: live-pulse 2.2s infinite; } }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  70% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (max-width: 980px) { .live-pill { display: none; } }
/* 36px rows, 16px icon, the active row is a slightly darker oatmeal pill (--bg-3) with
   ink text — KG Tasks' sidebar row exactly. */
.nav-item {
  display: flex; align-items: center; gap: var(--s-snug); width: 100%;
  height: 36px; padding: 0 var(--s-3); border-radius: var(--r-btn); color: var(--fg-2);
  font-weight: 500; font-size: var(--t-emph); text-align: left;
  transition: background .18s var(--ease), color .18s var(--ease);
  margin-bottom: 0;
}
.nav-item svg { width: 16px; height: 16px; flex: none; }
.nav-item:hover { background: var(--bg-2); color: var(--fg); }
.nav-item.active { background: var(--bg-3); color: var(--fg); font-weight: 500; }
.nav-item .badge {
  margin-left: auto; font-size: var(--t-caption); font-weight: 650;
  background: var(--blue); color: var(--on-blue); padding: 1px var(--s-tight); border-radius: 999px;
}
/* Footer: no rule above it, a small avatar, name, then the muted role/email line. */
.sidebar-footer { margin-top: auto; padding: var(--s-2) 0 0; border-top: 0; }
.user-chip { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-1); }
.user-chip .avatar { width: 26px; height: 26px; font-size: var(--t-caption); }
.user-chip .u-name { font-size: var(--t-emph); font-weight: 500; color: var(--fg); }
.user-chip .u-mail { font-size: var(--t-small); color: var(--fg-3); }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2.6s infinite; flex: none; }
.sync-dot.err { background: var(--red); }
.user-actions { display: flex; align-items: center; gap: var(--s-hair); margin-left: auto; flex: none; }
.user-actions .btn.icon { color: var(--fg-3); }
/* Sync health as a small dot on the topbar sync button (replaces the separate Live pill). */
#syncBtn { position: relative; overflow: visible; }
#syncBtn .sync-dot { position: absolute; top: var(--s-tight); right: var(--s-tight); width: 6px; height: 6px; box-shadow: 0 0 0 2px var(--bg); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;   /* clip the scrolling content to the panel */
}

/* The topbar is the one white band in the chrome: 56px, hairline underneath, a collapse
   toggle, a vertical rule, the page title, then search and an icon cluster on the right.
   The subtitle is not rendered here (KG Tasks' topbar carries the title alone). */
.topbar {
  display: flex; align-items: center; gap: var(--s-3); flex: none;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--card);
  min-height: 56px; height: 56px;
}
.topbar .page-sub { display: none; }
.topbar-rule { width: 1px; height: 20px; background: var(--line-2); flex: none; margin: 0 var(--s-1); }
/* Title sizes are KG Tasks' — a 16.5px title is what keeps the topbar from reading as
   cluttered; the previous 21px/750 was the single loudest difference between the apps. */
.page-title { font-size: var(--t-head); font-weight: 700; letter-spacing: -0.02em; color: var(--fg); line-height: 1.15; }
.page-sub { font-size: var(--t-small); color: var(--fg-4); margin-top: 1px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
/* The page-tab seg sits inline in the topbar on desktop (display:contents = no extra box);
   on mobile it drops to its own full-width, horizontally-scrollable row so it never
   crowds the title, search, or notification bell. */
.topbar-seg-slot { display: contents; }

/* Compact search pill, as in KG Tasks' topbar: "Search…  ⌘K", not a wide input. */
.searchbar {
  display: flex; align-items: center; gap: var(--s-2);
  min-width: 0; max-width: none; flex: none; height: 34px; padding: 0 var(--s-snug) 0 var(--s-3);
  border-radius: var(--r-btn); border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--fg-2); font-size: var(--t-emph); font-weight: 500; cursor: pointer;
  white-space: nowrap; overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.searchbar:hover { border-color: var(--fg-4); background: var(--card-2); }
.searchbar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchbar svg { width: 15px; height: 15px; flex: none; }
.searchbar kbd {
  margin-left: auto; font-family: var(--mono); font-size: var(--t-caption);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px var(--s-tight); color: var(--fg-4);
}

.content { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-5) var(--s-5) var(--s-8); }
.content.no-pad { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.content.no-pad > .page-enter { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.page-enter { animation: page-in .32s var(--ease); }
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Last paint held over a page while it re-renders (holdPaint in core.js). It dims only
   if the fetch is slow enough to notice, so a quick refresh reads as no change at all. */
.page-ghost { position: fixed; z-index: 30; overflow: hidden; pointer-events: none; }
.page-ghost > * { animation: ghost-dim .2s var(--ease) .18s both; }
@keyframes ghost-dim { to { opacity: .55; } }

/* ---------- Cards ---------- */
.card {
  position: relative;
  border-radius: var(--r-card);
  border: 1px solid var(--line-2);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

/* Flat cards are defined by their border alone — the animated glow edge was
   removed for a cleaner, calmer surface. */

.bulk-assign-bar { display: flex; align-items: center; gap: var(--s-snug); padding: 10px var(--s-4); border-bottom: 1px solid var(--line); background: var(--card-2); flex-wrap: wrap; }
.bulk-assign-all { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); font-weight: 600; color: var(--fg-2); cursor: pointer; }
.bulk-assign-bar input[type="checkbox"], .ua-check { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.card.panel { border-radius: var(--r-panel); }
.card.hoverable:hover { border-color: var(--fg-4); transform: translateY(-1px); }
/* Aligned, comparable numbers everywhere they carry meaning. */
.tbl td.num, .tbl th.num, .num, .c-score, .warmth, .kv .v { font-variant-numeric: tabular-nums; }
.card-pad { padding: var(--s-4) var(--s-4); }
.card-title { font-size: var(--t-emph); font-weight: 650; color: var(--fg); letter-spacing: -0.01em; }

/* ---------- Buttons (Naviira: 12px radius, brand blue, hover lightens) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border-radius: var(--r-btn);
  font-weight: 600; letter-spacing: -0.01em;
  height: 32px; padding: 0 var(--s-3); font-size: var(--t-emph);
  border: 1px solid var(--line-2);
  background: var(--card); color: var(--fg);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  position: relative; overflow: hidden; white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { border-color: var(--line-2); background: var(--bg-1); box-shadow: none; }
.btn:active { transform: translateY(0.5px); }
.btn.primary { background: var(--grad-btn); border-color: transparent; color: var(--on-blue); box-shadow: var(--shadow-btn); }
.btn.primary:hover { background: var(--blue-hover); box-shadow: var(--shadow-btn); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--fg-3); }
.btn.ghost:hover { color: var(--fg); background: var(--bg-2); transform: none; box-shadow: none; }
/* Destructive actions: red label + red-tinted edge. Keeps this app's existing convention
   (red text, not a filled red button) while reading clearly as the action to take. */
.btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 42%, var(--line-2)); }
.btn.danger:hover { background: var(--tint-red); border-color: var(--red); }
.btn.sm { height: 28px; padding: 0 var(--s-snug); font-size: var(--t-body); }
.btn.lg { height: 36px; padding: 0 var(--s-4); }
.btn.icon { width: 32px; padding: 0; }
.btn.icon.sm { width: 28px; }
.btn.icon.lg { width: 36px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.icon.on { color: var(--blue-ink); }
.btn .spinner { width: 13px; height: 13px; }
.btn.ai {
  background: var(--tint-blue); border-color: transparent; color: var(--blue-ink);
  box-shadow: none;
}
.btn.ai:hover { border-color: var(--blue); background: var(--tint-blue); box-shadow: none; }

/* ---------- Inputs ---------- */
.input, .select, textarea.input {
  width: 100%; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-btn); border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--fg); font-size: var(--t-emph); outline: none;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--tint-blue);
}
.input::placeholder { color: var(--fg-4); }
.select { appearance: none; cursor: pointer; padding-right: var(--s-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
input[type="date"].input { font-family: var(--font); }
input.input:not([type="color"]):not([type="checkbox"]):not([type="radio"]), .select { height: 32px; padding-top: 0; padding-bottom: 0; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-caption); font-weight: 550; height: 20px; padding: 0 var(--s-2); border-radius: 999px;
  background: var(--bg-2); color: var(--fg-3); white-space: nowrap;
  border: 1px solid transparent;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip.green { background: var(--tint-green); color: var(--green); }
.chip.amber { background: var(--tint-amber); color: var(--amber); }
.chip.coral { background: var(--tint-coral); color: var(--coral); }
.chip.red { background: var(--tint-red); color: var(--red); }
.chip.violet { background: var(--tint-violet); color: var(--violet); }
.chip.blue { background: var(--tint-blue); color: var(--blue-ink); }
.chip.dashed { background: transparent; border: 1px dashed var(--line-2); color: var(--fg-4); cursor: pointer; }
.chip.dashed:hover { color: var(--blue-ink); border-color: var(--blue); }
.chip .x { display: grid; place-items: center; opacity: .55; margin-left: 1px; cursor: pointer; }
.chip .x:hover { opacity: 1; }
.chip .x svg { width: 9px; height: 9px; }

/* Provenance for a manually logged conversation. Intentionally NOT a warning colour:
   it reads as ordinary metadata beside the campaign name, the way a logged call does in
   any CRM. It stays visible in presentation mode — hiding it is what would turn an
   entered conversation into a claim about where it came from. */
.logged-chip { color: var(--fg-4); border-bottom: 1px dotted var(--line-2); cursor: help; }

/* Rows in the "Log a conversation" composer. */
.lc-msg { display: grid; gap: var(--s-2); padding: var(--s-3); margin-bottom: var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card-2); }
.lc-msg textarea { resize: vertical; }

/* ---- Presentation mode ----
   For screen-sharing the CRM on a call. Hides internal-only annotation so the view is
   clean and does not leak team chatter to whoever is watching.

   Note what is NOT in this list: .logged-chip. Internal notes are ours to show or not,
   but where a conversation came from is a property of the record. Hiding that while the
   record is on screen as an outcome would make the screen misrepresent itself, so the
   provenance marker is explicitly forced visible below. */
body.presenting .c-score,
body.presenting .comment,
body.presenting .comment-composer,
body.presenting .intel-internal,
body.presenting [data-internal] { display: none !important; }
body.presenting .logged-chip { display: inline !important; }
.chip svg { width: 11px; height: 11px; flex: none; }
.ico-xs svg { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; }
/* Consistent search field (icon + input) */
.search-field { position: relative; display: flex; align-items: center; min-width: 0; }
.search-field > svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--fg-4); pointer-events: none; flex: none; }
.search-field .input { padding-left: var(--s-6); width: 100%; }
/* Clients card grid (flat, matches reference) */
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s-3); }
.client-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--shadow-card); cursor: pointer; transition: border-color .16s, transform .16s; }
.client-card:hover { border-color: var(--fg-4); transform: translateY(-1px); }
.client-card .client-head { display: flex; align-items: center; gap: var(--s-snug); }
.client-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3) var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.client-stats .cs-k { font-size: var(--t-caption); color: var(--fg-4); }
.client-stats .cs-v { font-weight: 600; font-size: var(--t-title); font-variant-numeric: tabular-nums; color: var(--fg); margin-top: var(--s-hair); }
/* Relationships card grid */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--s-3); padding: var(--s-hair); }
.rel-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg, 14px); padding: var(--s-3); cursor: pointer; transition: box-shadow .16s, border-color .16s, transform .16s; display: flex; flex-direction: column; gap: var(--s-snug); }
.rel-card:hover { border-color: var(--fg-4); box-shadow: 0 6px 20px rgba(9, 9, 11, .07); transform: translateY(-1px); }
.rel-card-top { display: flex; align-items: center; gap: var(--s-snug); }
.rel-card-id { flex: 1; min-width: 0; }
.rel-card-id b { font-size: var(--t-emph); color: var(--fg); display: block; }
.rel-card-meta { display: flex; align-items: center; gap: var(--s-tight); flex-wrap: wrap; }
.rel-card-focus { font-size: var(--t-body); color: var(--fg-2); line-height: 1.5; }
.rel-card-foot { display: flex; align-items: center; gap: var(--s-2); margin-top: auto; padding-top: var(--s-1); }
.rel-link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; color: var(--fg-4); background: var(--bg-2); }
.rel-link:hover { color: var(--blue-ink); background: var(--tint-blue); }
.rel-link svg { width: 14px; height: 14px; }
.warm-dots { display: inline-flex; align-items: center; gap: var(--s-1); flex: none; }
.warm-dots .wd { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.warm-dots .wd.on { background: var(--green); }
.warm-dots .warm-num { font-size: var(--t-caption); color: var(--fg-4); margin-left: var(--s-1); font-variant-numeric: tabular-nums; }
/* Pipeline row quick action (revealed on hover) */
.pipe-act { text-align: right; padding-right: 10px !important; }
.pipe-act .btn { opacity: 0; transition: opacity .14s var(--ease); }
.tbl tbody tr:hover .pipe-act .btn, .tbl tbody tr:focus-within .pipe-act .btn { opacity: 1; }
@media (hover: none) { .pipe-act .btn { opacity: 1; } }
/* Pipeline stage tabs */
.stage-tabs { display: flex; gap: var(--s-tight); flex-wrap: wrap; padding: var(--s-4) var(--s-5) var(--s-3); }
.stage-tab { display: inline-flex; align-items: center; gap: var(--s-tight); height: 30px; padding: 0 var(--s-3); border-radius: var(--r-btn); border: 1px solid transparent; background: transparent; color: var(--fg-3); font-size: var(--t-body); font-weight: 550; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.stage-tab:hover { background: var(--bg-2); color: var(--fg); }
.stage-tab.active { background: var(--card); color: var(--fg); border-color: var(--line-2); box-shadow: var(--shadow-card); }
.stage-tab[disabled] { opacity: .45; cursor: not-allowed; }
.stage-tab .k-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.stage-tab-n { font-variant-numeric: tabular-nums; font-size: var(--t-small); opacity: .7; }
/* Pipeline: the owed-work strip, and the cell that says what to do next */
.stage-tabs.sub { padding-top: 0; padding-bottom: var(--s-3); }
.stage-tabs.sub .stage-tab { font-size: var(--t-small); height: 26px; padding: 0 var(--s-snug); }
.pipe-owed { display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; }
.pipe-owed-d { font-size: var(--t-caption); color: var(--fg-3); }
.pipe-note { margin: 0 var(--s-5) var(--s-3); font-size: var(--t-small); color: var(--fg-3); }
/* The whole point of this column is to be actionable, so the button for the one action
   that is ready to take does not hide until hover like the secondary "Open" does. */
.pipe-act .btn.primary { opacity: 1; }
.kcard .k-owed { margin-top: var(--s-2); }
.drawer-owed { border: 1px solid var(--line-2); border-radius: 10px; padding: var(--s-snug) var(--s-3); margin-bottom: var(--s-3); background: var(--bg-2); }
.drawer-owed .do-label { font-size: var(--t-caption); text-transform: none; letter-spacing: .05em; color: var(--fg-4); font-weight: 600; margin-bottom: var(--s-1); }

/* OpenRouter model picker */
.or-selected { padding: var(--s-2) var(--s-snug); border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); font-size: var(--t-body); color: var(--fg); }
.or-selected .or-id { font-family: var(--mono); font-size: var(--t-small); color: var(--fg-4); }
.or-list { max-height: 230px; overflow-y: auto; border: 1px solid var(--line-2); border-radius: 8px; margin-top: var(--s-2); }
.or-list:empty { display: none; }
.or-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-snug); background: none; border: none; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.or-row:last-child { border-bottom: none; }
.or-row:hover { background: var(--bg-2); }
.or-row.active { background: var(--tint-blue); }
.or-row .or-name { font-weight: 550; font-size: var(--t-body); color: var(--fg); }
.or-row .or-id { font-family: var(--mono); font-size: var(--t-caption); color: var(--fg-4); white-space: nowrap; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: var(--t-body); font-weight: 650; color: #fff;
  background: linear-gradient(135deg, var(--av-c1, #f472b6), var(--av-c2, #fb923c));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
:root[data-theme="dark"] .avatar { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }

/* ---------- Skeletons ---------- */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--bg-2); border-radius: 8px; min-height: 12px;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: shimmer 1.4s infinite;
  transform: translateX(-100%);
}
:root[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---------- Metrics ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(212px, 100%), 1fr)); gap: var(--s-4); }
.metric { padding: var(--s-4) var(--s-4) var(--s-3); display: flex; flex-direction: column; min-width: 0; }
.metric .m-label { font-size: var(--t-small); font-weight: 650; color: var(--fg-3); }
.metric .m-value { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.03em; margin-top: var(--s-1); font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1.15; }
.metric .m-foot { display: flex; align-items: center; gap: var(--s-tight); margin-top: var(--s-1); font-size: var(--t-small); color: var(--fg-4); min-height: 17px; }
.metric .m-trend { font-weight: 700; display: inline-flex; align-items: center; gap: var(--s-hair); font-variant-numeric: tabular-nums; }
.metric .m-trend.up { color: var(--green); }
.metric .m-trend.down { color: var(--red); }
.metric .m-trend.flat { color: var(--fg-4); }
.metric .m-spark { margin-top: var(--s-2); align-self: stretch; }
.metric .m-spark svg { width: 100%; }
/* Analytics: headline KPIs on one row, the funnel ratios a step quieter beneath. */
.dash-window { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); font-size: var(--t-small); }
.metric-grid.kpi-primary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.metric-grid.kpi-secondary { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--s-4); }
.kpi-secondary .metric { padding: var(--s-3) var(--s-4); }
.kpi-secondary .metric .m-value { font-size: var(--t-lg); }
@media (max-width: 1280px) { .metric-grid.kpi-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .metric-grid.kpi-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .metric-grid.kpi-primary, .metric-grid.kpi-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart-body.pad { padding: var(--s-2) var(--s-4) var(--s-4); }
/* Stat strip: one card, cells divided by hairlines. Values stay ink; tone lives in subs. */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); overflow: hidden; }
.stat-strip .ss-cell { padding: var(--s-3) var(--s-4); border-left: 1px solid var(--line-2); min-width: 0; }
.stat-strip .ss-cell:first-child { border-left: 0; }
.ss-label { font-size: var(--t-small); color: var(--fg-3); font-weight: 500; }
.ss-value { font-size: var(--t-lg); font-weight: 650; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: var(--s-hair); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-sub { font-size: var(--t-caption); color: var(--fg-4); margin-top: var(--s-hair); }
@media (max-width: 760px) { .stat-strip .ss-cell { border-left: 0; border-top: 1px solid var(--line-2); } .stat-strip .ss-cell:first-child { border-top: 0; } }
/* Page sections stack on one rhythm. */
.stack { display: grid; gap: var(--s-4); align-content: start; }
.stack > .filterbar { margin-bottom: 0; }
/* Pager */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); padding: var(--s-2) var(--s-3); font-size: var(--t-small); border-top: 1px solid var(--line); }
.pager .pager-n { font-variant-numeric: tabular-nums; color: var(--fg-2); min-width: 44px; text-align: center; }
/* Status as dot + label (no filled chip). */
.st { display: inline-flex; align-items: center; gap: var(--s-tight); font-size: var(--t-body); color: var(--fg-2); white-space: nowrap; }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-4); flex: none; }
.st.green::before { background: var(--green); } .st.amber::before { background: var(--amber); } .st.red::before { background: var(--red); }
.t-muted { color: var(--fg-4); } .t-sub { font-size: var(--t-small); color: var(--fg-3); }
.t-good { color: var(--green); } .t-warn { color: var(--amber); } .t-bad { color: var(--red); }
.legend.inline { padding: 0; }
/* Mailboxes: domain rows expand in place to show their mailboxes. */
.mb-ask { display: flex; gap: var(--s-2); flex: 2 1 300px; max-width: 520px; }
.mb-ask .input { flex: 1; }
.ai-answer { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--fg); background: var(--card); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); }
.mb-dom-cell { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.mb-dom-name { font-weight: 600; color: var(--fg); }
.mb-chev { display: grid; place-items: center; color: var(--fg-4); transition: transform .16s var(--ease); flex: none; }
.mb-chev svg { width: 14px; height: 14px; }
.mb-dom.open .mb-chev { transform: rotate(90deg); color: var(--fg); }
.mb-dom.open td { border-bottom-color: transparent; }
.mb-sub td { background: var(--bg); font-size: var(--t-small); }
.mb-sub td:first-child { padding-left: var(--s-7); }
.mb-sub-email { max-width: 280px; color: var(--fg-2); }
.mb-sub-actions { display: flex; justify-content: flex-end; gap: var(--s-1); margin-top: var(--s-1); opacity: 0; transition: opacity .14s var(--ease); }
.mb-sub:hover .mb-sub-actions, .mb-sub:focus-within .mb-sub-actions { opacity: 1; }
.mb-util { margin-top: var(--s-1); height: 3px; min-width: 0; margin-inline: auto; width: 72px; }
.deliv-foot { display: flex; align-items: center; gap: var(--s-tight); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.col-check { width: 36px; }
.camp-name { font-weight: 600; color: var(--fg); }
.cx-id { font-weight: 600; color: var(--fg); }
.cx-note { display: grid; place-items: center; color: var(--fg-4); }
.cx-note svg { width: 13px; height: 13px; }
/* Row actions stay quiet until the row is hovered or focused. */
.row-actions { display: flex; gap: var(--s-1); justify-content: flex-end; flex-wrap: nowrap; opacity: .35; transition: opacity .14s var(--ease); }
.tbl tbody tr:hover .row-actions, .tbl tbody tr:focus-within .row-actions { opacity: 1; }
.dash-section { margin-top: var(--s-4); }

/* ---------- Charts ---------- */
.chart-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); margin-top: var(--s-4); }
.chart-card { grid-column: span 6; min-width: 0; }
.chart-card.third { grid-column: span 4; }
.chart-card.full { grid-column: span 12; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-1); flex-wrap: wrap; }
.chart-value { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); }
.chart-body { padding: var(--s-1) var(--s-3) var(--s-3); min-width: 0; }
.chart-body svg { display: block; width: 100%; height: auto; }
.chart-tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-float);
  padding: var(--s-2) var(--s-snug); font-size: var(--t-body); line-height: 1.45; min-width: 110px;
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.chart-tip.show { opacity: 1; transform: none; }
.chart-tip .t-date { color: var(--fg-4); font-size: var(--t-caption); }
.chart-tip b { font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: var(--s-3); flex-wrap: wrap; padding: 0 var(--s-4) var(--s-3); font-size: var(--t-small); color: var(--fg-3); }
.legend i { width: 8px; height: 8px; border-radius: 6px; display: inline-block; margin-right: var(--s-1); }
.donut-note {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line);
  font-size: var(--t-body); color: var(--fg-3);
}
.donut-note i { width: 8px; height: 8px; border-radius: 6px; display: inline-block; margin-right: var(--s-1); }
.donut-note b { color: var(--fg); font-variant-numeric: tabular-nums; }
.donut-note .muted { font-size: var(--t-small); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-card); min-width: 0; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-body); min-width: 640px; }
.tbl th {
  text-align: left; font-size: var(--t-small); font-weight: 550; letter-spacing: 0;
  text-transform: none; color: var(--fg-3);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; background: var(--card-2); z-index: 2;
  /* Headers must never wrap: a two-line "Reply %" breaks the header baseline and stops
     the label lining up with its column. */
  white-space: nowrap;
}
.tbl td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .14s var(--ease); }
.tbl tbody tr:hover { background: var(--bg); }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl .num { font-variant-numeric: tabular-nums; text-align: center; }
/* Headings are centred across every table; the first column is the row label, so it stays left with its text. */
.tbl th { text-align: center; }
.tbl th:first-child, .tbl th.col-check + th { text-align: left; }
.tbl .mono { font-family: var(--mono); font-size: var(--t-body); }

/* ---------- Filter bar / tabs / segments ---------- */
.filterbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.filterbar .select { width: auto; min-width: 132px; }
.filterbar .seg button { height: 32px; }
.filterbar .input { width: 220px; }
.filterbar .spacer { flex: 1; }
.filterbar .dates { display: flex; align-items: center; gap: var(--s-tight); }
.filterbar .dates .input { width: 138px; }

/* Tabs sit directly on the canvas as in KG Tasks: no bordered tray around the group; the
   active tab is a white pill with a hairline border, the rest are plain text. */
.seg {
  display: inline-flex; align-items: center; padding: 0; gap: var(--s-1);
  border-radius: var(--r-btn); background: transparent; border: 0;
  /* A segmented control with more items than room must scroll, not clip. The
     scrollbar is hidden because the control is short; the overflow is real. */
  max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
/* Wrapped onto its own line the control spans the row, so every tab is
   reachable without a scroll gesture nobody can see is available. */
.topbar > .seg { flex: 1 1 auto; }
.seg button { height: 30px; padding: 0 var(--s-3); border-radius: var(--r-btn); font-size: var(--t-body); font-weight: 500; color: var(--fg-2); white-space: nowrap; border: 1px solid transparent; transition: all .16s var(--ease); }
.seg button:hover { color: var(--fg); }
.seg button.active { background: var(--card); color: var(--fg); border-color: var(--line-2); box-shadow: var(--shadow-card); }

/* ---------- Inbox 3-panel (every pane min-height:0 so nothing overflows) ---------- */
/* Two columns — list + a wide thread/composer. Lead intel is an on-demand drawer
   (below), so the conversation and composer get the full remaining width. */
.inbox-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); flex: 1; min-height: 0; }
.inbox-list {
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  min-width: 0; min-height: 0; background: var(--card-2);
}
.inbox-list-head { padding: var(--s-3) var(--s-3) var(--s-2); flex: none; }
.inbox-search-row { display: flex; gap: var(--s-tight); align-items: center; }
.inbox-search-row .input { flex: 1; min-width: 0; }
#filtersToggle { flex: none; }
#filtersToggle.on { background: var(--tint-blue); color: var(--blue-ink); }
.inbox-tabs-row { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.inbox-tabs-row .inbox-filters { flex: 1; min-width: 0; padding: 0; }
#filtersToggle { flex: none; }
#filtersToggle.on { background: var(--bg-2); color: var(--fg); }
.f-count { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 var(--s-1); border-radius: 999px; background: var(--fg); color: var(--bg); font-size: var(--t-micro); font-weight: 700; }
.f-count[hidden] { display: none; }
/* Filter panel: grouped, labelled, opens smoothly under the tabs. */
.inbox-advanced { margin-top: var(--s-2); padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-float); display: grid; gap: var(--s-3); animation: adv-in .16s var(--ease); }
@keyframes adv-in { from { opacity: 0; transform: translateY(-4px); } }
.adv-group { display: grid; gap: var(--s-1); }
.adv-label { font-size: var(--t-caption); font-weight: 600; color: var(--fg-3); }
.adv-group .select { width: 100%; }
.adv-foot { display: flex; align-items: center; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.adv-foot .spacer { flex: 1; }
.active-filters { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-2); }
.active-filters[hidden] { display: none; }
.af-chip { cursor: pointer; background: var(--card); border-color: var(--line-2); color: var(--fg-2); max-width: 100%; }
.af-chip .x { margin-left: var(--s-hair); }
.af-chip:hover { border-color: var(--fg-4); color: var(--fg); }
.tag-wrap { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.note-card + .note-card { margin-top: var(--s-tight); }
.intel-360 { width: 100%; }
.intel-title .link-btn svg { width: 12px; height: 12px; vertical-align: -1px; }
.inbox-advanced[hidden] { display: none; }
.inbox-selects { display: flex; gap: var(--s-tight); }
.inbox-selects .select { flex: 1; min-width: 0; }
.inbox-filters { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; flex: none; }
.inbox-filters .filter-pill { flex: none; white-space: nowrap; padding: 0 var(--s-2); }
#filtersToggle .f-label { display: none; }
#filtersToggle { width: auto; min-width: 28px; padding: 0 var(--s-tight); gap: var(--s-1); }
.inbox-filters::-webkit-scrollbar { display: none; }
.inbox-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.convo {
  display: flex; gap: var(--s-snug); padding: 12px var(--s-4); cursor: pointer;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: background .14s var(--ease);
}
.convo:hover { background: var(--bg-2); }
.convo.active { background: var(--tint-blue); border-left-color: var(--blue); }
.convo .c-body { flex: 1; min-width: 0; }
.convo .c-top { display: flex; align-items: baseline; gap: var(--s-tight); }
.convo .c-top .c-tag { flex: none; height: 18px; font-size: var(--t-caption); padding: 0 var(--s-tight); align-self: center; }
.convo .c-name { font-weight: 650; font-size: var(--t-emph); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; min-width: 0; flex: 0 1 auto; }
.convo.unread .c-name::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-right: var(--s-tight); vertical-align: 1px; }
.convo .c-time { margin-left: auto; font-size: var(--t-caption); color: var(--fg-4); white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: var(--s-1); }
.convo .c-subj { font-size: var(--t-body); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: var(--s-1); }
.convo.unread .c-subj { font-weight: 600; color: var(--fg-2); }
.convo .c-prev { font-size: var(--t-small); color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
/* Minimal card meta: a single quiet status signal (dot + label), no chip pill. */
.convo .c-meta { display: flex; align-items: center; gap: var(--s-snug); margin-top: var(--s-tight); }
.c-stage { display: inline-flex; align-items: center; gap: var(--s-tight); font-size: var(--t-small); font-weight: 550; color: var(--fg-3); }
.c-stage-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.c-score { font-size: var(--t-caption); font-weight: 700; color: var(--fg-3); background: var(--bg-2); border-radius: 999px; padding: 1px var(--s-tight); font-variant-numeric: tabular-nums; }
.c-star { color: var(--amber); flex: none; display: inline-flex; }
.c-star svg { width: 12px; height: 12px; fill: var(--amber); }
.convo .c-time svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: var(--s-1); opacity: .6; }

.thread-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-1); }
.thread-head {
  display: flex; align-items: center; gap: var(--s-3); flex: none;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line);
  background: var(--card-2); min-width: 0;
}
.thread-head .th-info { min-width: 0; flex: 1; }
.thread-actions { display: flex; align-items: center; gap: var(--s-1); flex: none; }
.thread-more { display: inline-flex; }   /* the More menu is always the home for secondary actions */
.thread-actions .tb-txt { margin-left: var(--s-1); }

/* The thread pane's width is independent of the viewport — the intel pane can
   squeeze it to ~330px on a wide screen. Query the pane itself so the action bar
   never overflows the contact name (which was the Reply-button-over-name bug). */
.thread-pane { container-type: inline-size; }
@container (max-width: 620px) {
  .thread-head .th-info .chip { display: none; }   /* stage is in the list + intel */
  .thread-actions .tb-txt { display: none; }       /* icon-only Details when the pane is tight */
}
.thread-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4) var(--s-6) var(--s-4); display: flex; flex-direction: column; gap: var(--s-tight); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }

/* Day separator (iMessage-style centered pill) */
.day-sep { align-self: center; margin: var(--s-3) 0 var(--s-2); }
.day-sep span {
  font-size: var(--t-caption); font-weight: 650; color: var(--fg-4);
  background: var(--bg-2); padding: var(--s-1) var(--s-3); border-radius: 999px; letter-spacing: .02em;
}

/* Message row */
.msg { max-width: min(76%, 640px); min-width: 0; display: flex; flex-direction: column; }
/* Only a newly arrived message animates; opening a thread does not replay every one. */
.msg.is-new { animation: msg-in .26s var(--ease); }
#convoList.is-loading .convo { opacity: .55; transition: opacity .15s var(--ease); }
.msg.in { align-self: flex-start; align-items: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.msg:not(.grouped-prev) { margin-top: var(--s-3); }
.msg.grouped-prev { margin-top: 0; }

.m-who { font-size: var(--t-small); font-weight: 650; color: var(--fg-3); margin: 0 var(--s-snug) var(--s-1); }
.m-time { font-size: var(--t-caption); color: var(--fg-4); margin: var(--s-1) var(--s-snug) 0; }

.m-bubble {
  padding: var(--s-snug) var(--s-4); border-radius: 17px;
  font-size: var(--t-emph); line-height: 1.62; color: var(--fg-2);
  overflow-wrap: break-word; word-break: break-word; overflow: hidden; max-width: 100%;
}
.msg.in .m-bubble { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); border-radius: 10px; }
.msg.out .m-bubble { background: var(--blue); color: var(--on-blue); }
:root[data-theme="dark"] .msg.out .m-bubble { background: #27272a; color: var(--fg); }
/* Email HTML carries its own inline colours (usually black). In dark mode they would be
   black on charcoal, so message text and its links follow the theme instead. */
:root[data-theme="dark"] .m-content, :root[data-theme="dark"] .m-content * { color: var(--fg-2) !important; background-color: transparent !important; border-color: var(--line-2) !important; }
:root[data-theme="dark"] .m-content a { color: var(--blue-ink) !important; }
.msg.in.grouped-prev .m-bubble { border-top-left-radius: 7px; }
.msg.in.grouped-next .m-bubble { border-bottom-left-radius: 7px; }
.msg.out.grouped-prev .m-bubble { border-top-right-radius: 7px; }
.msg.out.grouped-next .m-bubble { border-bottom-right-radius: 7px; }

.m-content > *:first-child { margin-top: 0; }
.m-content > *:last-child { margin-bottom: 0; }
.m-content p { margin: 0 0 var(--s-2); }
.m-content p:last-child { margin-bottom: 0; }
.m-content ul, .m-content ol { margin: var(--s-tight) 0 var(--s-tight) var(--s-4); }
.m-content li { margin: var(--s-hair) 0; }
.m-bubble a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }
.msg.out .m-bubble a { color: #fafafa; }
.m-bubble img { max-width: 100%; height: auto; border-radius: 10px; margin: var(--s-1) 0; }
/* Attachment previews inside an outgoing bubble (images sent as real attachments). */
.m-attachs { display: flex; flex-wrap: wrap; gap: var(--s-tight); margin-top: var(--s-tight); }
.m-attach-img { max-width: 180px; max-height: 180px; border-radius: 10px; object-fit: cover; display: block; }
.m-attach-file { background: rgba(255, 255, 255, .18); color: #fff; border: none; }
.m-bubble blockquote { border-left: 2px solid var(--line-2); margin: var(--s-tight) 0; padding-left: var(--s-snug); color: var(--fg-4); }
.msg.out .m-bubble blockquote { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.8); }

/* Collapsed signature / quoted-history toggles */
.m-toggle {
  display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2);
  font-size: var(--t-small); font-weight: 600; color: var(--fg-4);
  padding: var(--s-hair) var(--s-2); border-radius: 999px; border: 1px dashed var(--line-2);
  transition: color .15s, border-color .15s;
}
.m-toggle svg { width: 11px; height: 11px; }
.m-toggle:hover { color: var(--blue-ink); border-color: var(--blue); }
.msg.out .m-toggle { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.4); }
.msg.out .m-toggle:hover { color: #fff; border-color: #fff; }
.m-toggle.open { border-style: solid; }
.m-sig, .m-quoted {
  margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px dashed var(--line-2);
  font-size: var(--t-body); color: var(--fg-3);
}
.msg.out .m-sig, .msg.out .m-quoted { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.85); }
.m-sig img, .m-quoted img { max-width: 100%; border-radius: 8px; }
.m-quoted { color: var(--fg-4); font-size: var(--t-body); }

/* Optimistic send states */
.msg.sending .m-bubble { opacity: .72; }
.msg.sending.failed .m-bubble { opacity: 1; outline: 1px solid var(--red); }
.send-state { display: flex; align-items: center; gap: var(--s-tight); }
.link-btn { font-size: var(--t-caption); font-weight: 650; color: var(--blue-ink); }
.link-btn:hover { text-decoration: underline; }

/* ---------- Composer ---------- */
.composer {
  border-top: 1px solid var(--line); flex: none;
  padding: var(--s-2) var(--s-5) var(--s-3);
  background: var(--card-2);
}
/* Unified composer card: toolbar sits atop the editor inside one bordered box. */
.composer-box {
  border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--card);
  overflow: hidden; transition: border-color .16s, box-shadow .16s;
}
.composer-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--tint-blue); }

/* AI summary popup */
.aisum-top { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-hair) 0 var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); }
.aisum-sec { margin-bottom: var(--s-3); }
.aisum-sec:last-of-type { margin-bottom: 0; }
.aisum-sec h4 { font-size: var(--t-small); font-weight: 700; letter-spacing: .03em; text-transform: none; color: var(--fg-3); margin-bottom: var(--s-1); }
.aisum-sec p { font-size: var(--t-emph); line-height: 1.55; color: var(--fg-2); }
.aisum-sec ul { margin: 0; padding-left: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); }
.aisum-sec li { font-size: var(--t-emph); line-height: 1.5; color: var(--fg-2); }
/* Lead-intel drawer header */
.intel-drawer-head { font-size: var(--t-title); font-weight: 700; letter-spacing: -.01em; color: var(--fg); margin: 0 0 var(--s-3); }

/* Sidebar collapse toggle — bigger tap target, pulled toward the sidebar edge. */
.topbar-collapse { flex: none; width: 34px; height: 34px; margin-left: -8px; border-radius: var(--r-btn); color: var(--fg-2); }
.topbar-collapse svg { width: 16px; height: 16px; }
/* Small by default so the conversation gets the room; grows with the text you write. */
.composer .editor {
  width: 100%; min-height: 44px; max-height: 180px; overflow-y: auto;
  border: none; border-radius: 0; background: transparent;
  padding: var(--s-2) var(--s-3); font-size: var(--t-emph); line-height: 1.55; outline: none;
  color: var(--fg-2);
}
.thread-actions-hidden, .composer-hidden { display: none !important; }
.composer .editor:empty::before { content: attr(data-placeholder); color: var(--fg-4); pointer-events: none; }
.composer-format {
  display: flex; align-items: center; gap: var(--s-hair); flex-wrap: wrap;
  padding: var(--s-1) var(--s-tight); border-bottom: 1px solid var(--line); background: var(--card-2);
}
.composer-format .btn.icon { padding: var(--s-1); border-radius: 8px; }
.composer-format .divider { width: 1px; height: 16px; background: var(--line-2); margin: 0 var(--s-tight); }
.composer-tools { display: flex; align-items: center; gap: var(--s-tight); margin-top: var(--s-2); flex-wrap: wrap; }
.composer-tools .from { font-size: var(--t-small); color: var(--fg-4); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.attach-list { display: flex; gap: var(--s-tight); flex-wrap: wrap; margin-top: var(--s-2); }
.draft-banner {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2);
  padding: var(--s-tight) var(--s-snug); border-radius: 10px; font-size: var(--t-body); font-weight: 600;
  background: var(--tint-blue); color: var(--blue-ink);
}
.draft-banner span { display: flex; align-items: center; gap: var(--s-tight); }
.draft-banner svg { width: 13px; height: 13px; }
.draft-banner .link-btn { margin-left: auto; }

/* ---------- Intel pane ---------- */
/* Lead-intel panel: a right slide-in drawer, opened from the thread header.
   Keeps the conversation + composer full-width until you actually want the detail. */
.intel-pane {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(380px, 92vw); transform: translateX(102%);
  transition: transform .3s var(--ease);
  border-left: 1px solid var(--line); overflow-y: auto;
  padding: var(--s-8) var(--s-4) var(--s-6); background: var(--card);
  box-shadow: var(--shadow-float);
}
.intel-pane.open { transform: translateX(0); }
.intel-scrim {
  position: fixed; inset: 0; z-index: 59; background: rgba(9, 9, 11, .28);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
}
.intel-scrim.open { opacity: 1; pointer-events: auto; }
:root[data-theme="dark"] .intel-scrim { background: rgba(0, 0, 0, .5); }
.intel-close {
  display: grid; position: fixed; top: 12px; right: 12px; z-index: 61;
  width: 34px; height: 34px; border-radius: 50%; place-items: center;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.intel-close svg { width: 16px; height: 16px; }
.intel-block { margin-bottom: var(--s-4); }
.intel-title {
  font-size: var(--t-caption); font-weight: 700; letter-spacing: .09em; text-transform: none;
  color: var(--fg-4); margin-bottom: var(--s-2); display: flex; align-items: center; gap: var(--s-tight);
}
.intel-title svg { width: 13px; height: 13px; }
.intel-title .right { margin-left: auto; }
.intel-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: var(--s-3); font-size: var(--t-body); box-shadow: var(--shadow-card); }
.score-ring { position: relative; width: 62px; height: 62px; flex: none; }
.score-ring .s-val { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--t-head); font-weight: 750; font-variant-numeric: tabular-nums; color: var(--fg); }
.kv { display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) 0; font-size: var(--t-body); }
.kv .k { color: var(--fg-4); flex: none; }
.kv .v { font-weight: 600; color: var(--fg); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- Kanban ---------- */
.kanban { display: flex; gap: var(--s-3); overflow-x: auto; flex: 1; min-height: 0; padding: var(--s-4) var(--s-5) var(--s-5); align-items: stretch; }
.kcol { min-width: 268px; width: 268px; flex: none; display: flex; flex-direction: column; min-height: 0; }
.kcol-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2) var(--s-2); flex: none; }
.kcol-head .k-dot { width: 8px; height: 8px; border-radius: 6px; flex: none; }
.kcol-head .k-name { font-size: var(--t-body); font-weight: 700; color: var(--fg); }
.kcol-head .k-count { font-size: var(--t-small); color: var(--fg-4); background: var(--bg-2); padding: 0 var(--s-tight); border-radius: 999px; }
.kcol-body {
  display: flex; flex-direction: column; gap: var(--s-2);
  flex: 1; min-height: 60px; overflow-y: auto;
  padding: var(--s-1) var(--s-1) var(--s-3); border-radius: var(--r-card);
  transition: background .18s;
}
.kcol-body.dragover { background: var(--tint-blue); outline: 2px dashed var(--blue); outline-offset: -2px; }
.kcard { padding: var(--s-3); cursor: grab; user-select: none; }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .45; transform: rotate(2deg) scale(.98); }
.kcard.settle { animation: kanban-settle .34s var(--ease); }
@keyframes kanban-settle {
  0% { transform: scale(1.04); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
  60% { transform: scale(.99); }
  100% { transform: scale(1); box-shadow: none; }
}
.kcard .k-lead { font-weight: 650; font-size: var(--t-emph); color: var(--fg); display: flex; align-items: center; gap: var(--s-tight); min-width: 0; }
.kcard .k-lead span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard .k-co { font-size: var(--t-small); color: var(--fg-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard .k-meta { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); flex-wrap: wrap; }
.kcard .k-foot { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--t-caption); color: var(--fg-4); }
.kcard .k-score { margin-left: auto; font-weight: 750; font-size: var(--t-small); font-variant-numeric: tabular-nums; }

/* ---------- Modal / drawer / palette ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(9, 9, 11, .4);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: grid; place-items: center;
  animation: fade-in .18s var(--ease);
}
:root[data-theme="dark"] .overlay { background: rgba(0, 0, 0, .6); }
@keyframes fade-in { from { opacity: 0; } }
.modal {
  width: min(560px, calc(100vw - 32px)); max-height: 86dvh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-panel); box-shadow: var(--shadow-float);
  animation: modal-in .26s var(--ease);
}
.modal.wide { width: min(680px, calc(100vw - 32px)); }
/* Confirm/prompt dialogs: narrower than a form modal so the question reads as a question. */
.modal.narrow { width: min(420px, calc(100vw - 32px)); }

@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal-head { display: flex; align-items: center; gap: var(--s-snug); padding: var(--s-4) var(--s-5) 0; }
.modal-head h3 { font-size: var(--t-title); font-weight: 700; display: flex; align-items: center; gap: var(--s-2); }
.modal-head svg { width: 16px; height: 16px; }
.modal-body { padding: var(--s-3) var(--s-5) var(--s-5); }
.modal .x { margin-left: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(470px, 94vw);
  background: var(--card); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  animation: drawer-in .3s var(--ease);
  display: flex; flex-direction: column; min-height: 0;
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--line); flex: none; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4) var(--s-4) var(--s-6); }

.field { margin-bottom: var(--s-3); }
/* Field captions only. A label styled as a button (file upload) or wrapping a checkbox
   keeps its own look; before this, an Upload button inside a field rendered as a caption. */
.field > label:not(.btn):not(.switch-row):not(.share-check):not(.atoggle):not(.row):not(.share-col) { display: block; font-size: var(--t-small); font-weight: 650; color: var(--fg-3); margin-bottom: var(--s-1); }
.field-row { display: flex; gap: var(--s-3); }
.field-row .field { flex: 1; min-width: 0; }

.opt-pills { display: flex; gap: var(--s-tight); flex-wrap: wrap; }
.opt-pills button {
  padding: var(--s-tight) var(--s-3); border-radius: 999px; font-size: var(--t-body); font-weight: 600;
  border: 1px solid var(--line-2); color: var(--fg-3); background: var(--card);
  transition: all .15s var(--ease);
}
.opt-pills button:hover { border-color: var(--blue); color: var(--fg); }
.opt-pills button.active { background: var(--tint-blue); border-color: var(--blue); color: var(--blue-ink); }

.palette {
  width: min(600px, calc(100vw - 32px)); align-self: start; margin-top: 12vh;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-panel); box-shadow: var(--shadow-float); overflow: hidden;
  animation: modal-in .22s var(--ease);
}
.palette input {
  width: 100%; padding: var(--s-4) var(--s-5); font-size: var(--t-title); background: transparent; border: none; outline: none;
  border-bottom: 1px solid var(--line); color: var(--fg);
}
.palette-results { max-height: 46dvh; overflow-y: auto; padding: var(--s-tight); }
.p-item { display: flex; align-items: center; gap: var(--s-snug); padding: var(--s-2) var(--s-3); border-radius: var(--r-btn); cursor: pointer; min-width: 0; }
.p-item:hover, .p-item.sel { background: var(--tint-blue); }
.p-item .p-type {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: none;
  padding: var(--s-hair) var(--s-tight); border-radius: 6px; background: var(--bg-2); color: var(--fg-3); flex: none;
}
.p-item .p-title { font-size: var(--t-emph); font-weight: 550; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.p-item .p-sub { font-size: var(--t-small); color: var(--fg-4); white-space: nowrap; flex: none; }
.p-item .p-kbd { font-family: var(--mono); font-size: var(--t-caption); color: var(--fg-4); border: 1px solid var(--line); border-radius: 6px; padding: 1px var(--s-tight); flex: none; }
.p-item.sel .p-kbd { border-color: var(--blue); color: var(--blue-ink); }
/* Command palette (Raycast/Linear-style) */
.cmdk-search { display: flex; align-items: center; gap: var(--s-snug); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.cmdk-search > svg { width: 17px; height: 17px; color: var(--fg-4); flex: none; }
.cmdk-search input { flex: 1; min-width: 0; padding: 0; font-size: var(--t-title); background: transparent; border: none; outline: none; color: var(--fg); }
.cmdk-search .cmdk-esc { font-family: var(--mono); font-size: var(--t-caption); color: var(--fg-4); border: 1px solid var(--line); border-radius: 6px; padding: var(--s-hair) var(--s-tight); flex: none; }
.cmdk-head { font-size: var(--t-caption); font-weight: 700; letter-spacing: .07em; text-transform: none; color: var(--fg-4); padding: var(--s-snug) var(--s-3) var(--s-1); }
.cmdk-head:first-child { padding-top: var(--s-1); }
.cmdk-empty { padding: var(--s-5) var(--s-4); text-align: center; color: var(--fg-4); font-size: var(--t-emph); }
.cmdk-empty kbd { font-family: var(--mono); border: 1px solid var(--line); border-radius: 6px; padding: 0 var(--s-tight); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: var(--s-2); }
.toast {
  display: flex; align-items: center; gap: var(--s-snug);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-float);
  padding: var(--s-snug) var(--s-4); font-size: var(--t-emph); min-width: 240px; max-width: 380px;
  animation: toast-in .3s var(--ease); color: var(--fg-2);
}
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } }
.toast.out { animation: toast-out .25s var(--ease) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
.toast .t-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.toast.ok .t-dot { background: var(--green); }
.toast.err .t-dot { background: var(--red); }
.toast.info .t-dot { background: var(--blue); }
.toast .undo { margin-left: auto; color: var(--blue-ink); font-weight: 700; }

.spinner {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-2); border-top-color: var(--blue);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Empty states ---------- */
.empty { text-align: center; padding: var(--s-8) var(--s-5); color: var(--fg-4); }
.empty .e-icon {
  width: 44px; height: 44px; margin: 0 auto var(--s-3); border-radius: 14px;
  background: var(--tint-blue); color: var(--blue-ink);
  display: grid; place-items: center;
}
.empty .e-icon svg { width: 21px; height: 21px; }
.empty .e-title { font-weight: 700; color: var(--fg); font-size: var(--t-title); }
.empty .e-sub { font-size: var(--t-body); margin-top: var(--s-1); max-width: 340px; margin-left: auto; margin-right: auto; }
/* Compact inline empty (section-level, not full-page). */
.autom-empty { padding: var(--s-5) var(--s-4); color: var(--fg-3); font-size: var(--t-body); line-height: 1.5; text-align: center; }
/* Contract share modal */
.share-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-tight) var(--s-4); }
.share-col { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); color: var(--fg-2); cursor: pointer; }
.share-col input { width: 15px; height: 15px; accent-color: var(--blue); flex: none; }
.share-row { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-snug) 0; border-top: 1px solid var(--line); }
/* Automations: on-page engine bar + per-family cards */
.autom-engine-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.autom-engine-ctl { display: flex; align-items: center; gap: var(--s-4); flex: none; }
.atoggle { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); font-weight: 600; color: var(--fg-2); cursor: pointer; }
.atoggle input[type="checkbox"] { width: 38px; height: 21px; appearance: none; background: var(--bg-3); position: relative; cursor: pointer; transition: background .2s var(--ease); flex: none; }
.atoggle input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.atoggle input[type="checkbox"]:checked { background: var(--blue); }
.atoggle input[type="checkbox"]:checked::after { transform: translateX(17px); background: var(--on-blue); }
.autom-families { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--s-3); }
.afam { display: flex; flex-direction: column; gap: var(--s-2); }
.afam.is-off { opacity: .62; }
.afam-head { display: flex; align-items: center; gap: var(--s-snug); }
.afam-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--tint-blue); color: var(--blue-ink); flex: none; }
.afam-ico svg { width: 16px; height: 16px; }
.afam-name { font-weight: 650; font-size: var(--t-emph); color: var(--fg); flex: 1; min-width: 0; }
.afam-desc { font-size: var(--t-body); color: var(--fg-3); line-height: 1.5; }
.afam-count { font-size: var(--t-body); color: var(--fg-3); font-variant-numeric: tabular-nums; margin-top: auto; padding-top: var(--s-hair); }

/* ---------- Utilities ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.row { display: flex; align-items: center; gap: var(--s-snug); min-width: 0; }
.muted { color: var(--fg-4); }
.mono { font-family: var(--mono); }
.mt8 { margin-top: var(--s-2); } .mt12 { margin-top: var(--s-3); } .mt16 { margin-top: var(--s-4); } .mt20 { margin-top: var(--s-loose); }
.icon-sm { width: 18px; height: 18px; flex: none; color: var(--fg-4); display: inline-grid; }
.icon-sm svg { width: 100%; height: 100%; }
.health-bar { height: 5px; border-radius: 6px; background: var(--bg-2); overflow: hidden; min-width: 60px; }
.health-bar i { display: block; height: 100%; border-radius: 6px; transition: width .5s var(--ease); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: var(--s-loose); }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1.5px; background: var(--line-2); }
.tl-item { position: relative; padding: 0 0 var(--s-4); }
.tl-item::before {
  content: ''; position: absolute; left: -21px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--fg-4);
}
.tl-item.in::before { border-color: var(--green); background: var(--tint-green); }
.tl-item.out::before { border-color: var(--blue); background: var(--tint-blue); }
.tl-item.note::before { border-color: var(--amber); background: var(--tint-amber); }
.tl-item.stage::before { border-color: var(--violet); background: var(--tint-violet); }
.tl-time { font-size: var(--t-caption); color: var(--fg-4); }
.tl-title { font-size: var(--t-emph); font-weight: 650; color: var(--fg); margin-top: 1px; }
.tl-body { font-size: var(--t-body); color: var(--fg-3); margin-top: var(--s-hair); overflow-wrap: break-word; }

/* ---------- Contact 360 page ---------- */
.contact-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.contact-hero { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); min-width: 0; }
.contact-hero .avatar { width: 52px; height: 52px; font-size: var(--t-lg); border-radius: 16px; }
.contact-hero h2 { font-size: var(--t-xl); font-weight: 750; letter-spacing: -0.02em; }
.tabs { display: flex; gap: var(--s-hair); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: var(--s-2) var(--s-3); font-size: var(--t-emph); font-weight: 600; color: var(--fg-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color .15s var(--ease);
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--blue-ink); border-color: var(--blue); font-weight: 700; }
.tab .count { font-size: var(--t-caption); background: var(--bg-2); border-radius: 999px; padding: 1px var(--s-tight); margin-left: var(--s-tight); color: var(--fg-3); }

/* ---------- Mobile bottom sheet (nav overflow + account/logout) ---------- */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(9, 9, 11, .45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end;
  animation: fade-in .18s var(--ease);
}
:root[data-theme="dark"] .sheet-overlay { background: rgba(0, 0, 0, .6); }
.sheet {
  width: 100%; max-height: 82dvh; overflow-y: auto;
  background: var(--card); border-radius: var(--r-panel) var(--r-panel) 0 0;
  padding: var(--s-2) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-float);
  animation: sheet-up .26s var(--ease);
}
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet-grab { width: 38px; height: 4px; border-radius: 99px; background: var(--line-2); margin: var(--s-2) auto var(--s-3); }
.sheet-item {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-3) var(--s-2); border-radius: var(--r-btn);
  font-size: var(--t-title); font-weight: 600; color: var(--fg-2); text-align: left;
}
.sheet-item:active { background: var(--tint-blue); }
.sheet-item svg { width: 19px; height: 19px; flex: none; }
.sheet-item.active { color: var(--blue-ink); background: var(--tint-blue); }
.sheet-item.danger { color: var(--red); }
.sheet-item .badge { margin-left: auto; background: var(--blue); color: var(--on-blue); font-size: var(--t-caption); font-weight: 650; padding: 1px var(--s-tight); border-radius: 999px; }
.sheet-sep { height: 1px; background: var(--line); margin: var(--s-2) 0; }
.sheet-user { display: flex; align-items: center; gap: var(--s-snug); padding: var(--s-2) 8px var(--s-3); }

/* ---------- Auth screen ---------- */
.auth-screen {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center; padding: var(--s-5);
  background:
    radial-gradient(120% 80% at 75% -10%, rgba(244, 114, 182, 0.16), transparent 55%),
    radial-gradient(90% 70% at 5% 105%, rgba(22, 163, 74, 0.08), transparent 60%),
    var(--bg-1);
}
:root[data-theme="dark"] .auth-screen {
  background:
    radial-gradient(120% 80% at 75% -10%, rgba(244, 114, 182, 0.12), transparent 58%),
    var(--bg-1);
}
.auth-card { width: min(400px, 100%); padding: var(--s-6) var(--s-6) var(--s-5); border-radius: var(--r-panel); }
.auth-title { font-size: var(--t-head); font-weight: 700; text-align: center; color: var(--fg); }
.auth-err { color: var(--red); font-size: var(--t-body); min-height: 18px; margin: var(--s-hair) 0 var(--s-snug); }
.auth-err a { color: inherit; text-decoration: underline; }
.auth-brand { justify-content: center; padding: 0 0 var(--s-4); }
.auth-lede { text-align: center; color: var(--fg-3); font-size: var(--t-body); margin: var(--s-1) 0 var(--s-4); }
.auth-go { width: 100%; justify-content: center; }
.auth-alt { text-align: center; margin-top: var(--s-4); font-size: var(--t-body); color: var(--fg-3); }
.auth-alt a, .auth-small { color: var(--fg); font-weight: 600; text-decoration: none; }
.auth-alt a:hover, .auth-small:hover { text-decoration: underline; }
.auth-small { font-size: var(--t-small); font-weight: 550; color: var(--fg-3); }
.auth-lab-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-1); }
.auth-lab-row > label { font-size: var(--t-small); font-weight: 650; color: var(--fg-3); }
h1.auth-title { margin: 0; }
h1.auth-title + .field { margin-top: var(--s-4); }

/* Log in / sign up: the product story on the left, the form on the right. */
.auth-screen.auth-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: 0; place-items: stretch; overflow-y: auto; }
.auth-side { display: grid; place-items: center; padding: var(--s-6) var(--s-5); }
.auth-story { position: relative; display: grid; place-items: center; padding: var(--s-7) var(--s-6); border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 70%, transparent); overflow: hidden; }
@media (max-width: 900px) { .auth-screen.auth-split { grid-template-columns: 1fr; } .auth-story { display: none; } }
.as-wrap { position: relative; z-index: 1; width: min(600px, 100%); display: flex; flex-direction: column; gap: var(--s-4); }
.as-head { min-height: 0; transition: opacity .26s var(--ease), transform .26s var(--ease); }
.as-head.swap { opacity: 0; transform: translateY(-6px); }
.as-h { margin: 0; font-size: var(--t-display); line-height: 1.15; letter-spacing: -0.02em; color: var(--fg); }
.as-p { margin: var(--s-2) 0 0; color: var(--fg-3); font-size: var(--t-emph); line-height: 1.5; }
/* The scenes stack in one box and cross-fade; zoomed so the fragments read at a glance. */
.as-stage { position: relative; height: 330px; zoom: 1.18; }
/* Top-aligned so every card sits right under the headline, whatever its height. */
.as-scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity .28s var(--ease), transform .28s var(--ease); pointer-events: none; }
/* Out first, then in: two translucent cards never sit on top of each other. */
.as-scene.on { opacity: 1; transform: none; transition-duration: .45s; transition-delay: .3s; }
.as-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-card); }
.as-row { display: flex; align-items: center; gap: var(--s-2); }
.as-av { width: 28px; height: 28px; border-radius: 999px; background: var(--bg-2); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-micro); font-weight: 700; color: var(--fg-2); flex: none; }
.as-who { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: var(--t-body); }
.as-who > span { color: var(--fg-4); font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-msg { margin-top: var(--s-2); font-size: var(--t-body); color: var(--fg-2); }
.as-label { font-size: var(--t-small); font-weight: 650; color: var(--fg-3); }
.as-sub { font-size: var(--t-small); color: var(--fg-4); }
.as-tags, .as-pills { display: flex; flex-wrap: wrap; gap: var(--s-tight); margin-top: var(--s-2); }
.as-pill { padding: var(--s-hair) var(--s-2); border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--t-small); color: var(--fg-2); }
/* Things that arrive after the scene opens: --d is each one's delay. */
.as-pop, .as-reveal { opacity: 0; transform: scale(.92); }
.as-scene.on .as-pop, .as-scene.on .as-reveal { animation: asPop .4s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes asPop { to { opacity: 1; transform: none; } }
.as-scene.on .as-sel { animation: asSel .3s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes asSel { to { background: var(--fg); color: var(--bg-1); border-color: var(--fg); } }
/* Inbox */
.as-inbox { padding: var(--s-1) 0; }
.as-irow { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
.as-irow:last-child { border-bottom: 0; }
.as-irow.fresh { background: var(--tint-blue); }
.as-scene.on .as-irow { animation: asPop .35s var(--ease) both; animation-delay: var(--d); }
/* Draft typing */
.as-scene.on .as-type { animation: asType 1.1s steps(40) both; }
@keyframes asType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Pipeline */
.as-pipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.as-col { background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-tight); min-height: 150px; }
.as-deal { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: var(--s-2); font-size: var(--t-small); display: flex; flex-direction: column; box-shadow: var(--shadow-card); position: relative; z-index: 1; }
.as-deal span { color: var(--fg-4); }
.as-deal.ghost { border-style: dashed; background: transparent; box-shadow: none; min-height: 38px; z-index: 0; }
.as-deal.as-slot { min-height: 48px; }
.as-mover { z-index: 2; }
.as-scene.on .as-mover { animation: asMove 1s var(--ease) .6s forwards; }
@keyframes asMove { to { transform: translateX(calc(100% + var(--s-2) * 3)); } }
/* Week calendar */
.as-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-tight); margin-top: var(--s-2); }
.as-day { display: flex; flex-direction: column; gap: var(--s-tight); font-size: var(--t-micro); color: var(--fg-4); }
.as-day i { display: block; height: 14px; border-radius: 4px; background: var(--bg-2); font-style: normal; }
.as-day i.as-ev { height: auto; padding: var(--s-1); background: var(--tint-green); border-left: 2px solid var(--green); color: var(--fg-2); font-size: var(--t-micro); }
.as-day i.as-ev b { display: block; color: var(--fg); }
/* Follow-up timeline */
.as-steps-c { display: flex; flex-direction: column; gap: var(--s-2); }
.as-step-r { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: var(--s-2); font-size: var(--t-body); }
.as-scene.on .as-step-r { animation: asPop .35s var(--ease) both; animation-delay: var(--d); }
.as-dot { width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid var(--fg-4); }
.as-step-r.done .as-dot { background: var(--green); border-color: var(--green); }
.as-step-r.next .as-dot { border-color: var(--fg); background: var(--fg); }
/* Relationships */
.as-rel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-2); }
.as-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-hair); font-size: var(--t-body); }
.as-node > span:last-child { color: var(--fg-4); font-size: var(--t-small); }
.as-link { position: relative; width: 70px; display: flex; justify-content: center; }
.as-link::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--fg-4); }
.as-link .chip { position: relative; }
/* Contact */
.as-kv { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--t-body); }
.as-kv > span { color: var(--fg-4); }
.as-kv b { display: inline-flex; align-items: center; gap: var(--s-tight); font-weight: 600; }
/* Mailbox health */
.as-mb { display: grid; grid-template-columns: 1fr 90px 36px; align-items: center; gap: var(--s-2); padding: var(--s-1) 0; font-size: var(--t-small); }
.as-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.as-bar { height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.as-bar i { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.as-mb.bad .as-bar i { background: var(--red); }
.as-mb.bad b { color: var(--red); }
/* Report */
.as-rep-g { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-2); }
.as-num { font-size: var(--t-display); font-weight: 750; letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.as-bars { display: flex; align-items: flex-end; gap: var(--s-tight); height: 64px; flex: 1; max-width: 200px; }
.as-bars i { flex: 1; height: var(--h); background: var(--fg-4); border-radius: 3px 3px 0 0; transform-origin: bottom; }
.as-bars i:last-child { background: var(--fg); }
.as-scene.on .as-bars i { animation: asGrow .5s var(--ease) both; animation-delay: var(--d); }
@keyframes asGrow { from { transform: scaleY(0); } }
/* Slow-reply alert */
.as-alert { display: flex; gap: var(--s-2); border-left: 2px solid var(--amber); background: var(--tint-amber); font-size: var(--t-body); }
.as-alert-ic svg { width: 16px; height: 16px; color: var(--amber); margin-top: 2px; }
.as-names { display: flex; gap: var(--s-3); margin-top: var(--s-1); color: var(--fg-2); font-size: var(--t-small); }
.as-names em { font-style: normal; color: var(--fg-4); }
/* Progress dots, no words. */
.as-dots { display: flex; gap: var(--s-tight); }
.as-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--line-2); transition: background .3s var(--ease), width .3s var(--ease); }
.as-dots i.on { background: var(--fg); width: 16px; }
/* The tools we connect to, drifting slowly behind it all. */
.as-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.as-logo { position: absolute; opacity: .2; filter: grayscale(1); border-radius: 8px; object-fit: contain;
  animation: asDrift var(--dur) ease-in-out infinite alternate; }
.as-logo.mono { filter: brightness(0); opacity: .16; border-radius: 0; }
:root[data-theme="dark"] .as-logo { opacity: .22; }
:root[data-theme="dark"] .as-logo.mono { filter: brightness(0) invert(1); opacity: .2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .as-logo.mono { filter: brightness(0) invert(1); } }
@keyframes asDrift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
/* Small charts: the inbox sparkline, the analytics card. */
.as-ihead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-4) var(--s-2); border-bottom: 1px solid var(--line); }
.as-kpi { display: flex; align-items: center; gap: var(--s-tight); font-size: var(--t-lg); font-weight: 700; color: var(--fg); }
.as-spark { width: 120px; height: 36px; }
.as-spark polyline, .as-line polyline { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 400; stroke-dashoffset: 400; }
.as-scene.on .as-spark polyline, .as-scene.on .as-line polyline { animation: asDraw 1.2s var(--ease) .2s forwards; }
@keyframes asDraw { to { stroke-dashoffset: 0; } }
.as-line polyline.b { stroke: var(--green); }
.as-ana-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.as-ana-k div { display: flex; flex-direction: column; }
.as-ana-k span { font-size: var(--t-small); color: var(--fg-4); }
.as-ana-k b { font-size: var(--t-lg); color: var(--fg); font-variant-numeric: tabular-nums; }
.as-ana-g { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.as-line { flex: 1; height: 80px; }
.as-donut { width: 72px; height: 72px; flex: none; transform: rotate(-90deg); }
.as-donut circle { fill: none; stroke-width: 5; }
.as-donut .t { stroke: var(--bg-2); }
.as-donut .v { stroke: var(--green); stroke-dasharray: 0 100; stroke-linecap: round; }
.as-scene.on .as-donut .v { animation: asDonut 1s var(--ease) .4s forwards; }
@keyframes asDonut { to { stroke-dasharray: 31 100; } }
.as-donut text { font-size: var(--t-micro); font-weight: 700; fill: var(--fg); transform: rotate(90deg); transform-origin: 21px 21px; }
.auth-story.still .as-logo, .auth-story.still .as-scene, .auth-story.still * { animation: none !important; transition: none !important; }
.auth-story.still .as-pop, .auth-story.still .as-reveal, .auth-story.still .as-irow, .auth-story.still .as-step-r { opacity: 1; transform: none; }
.auth-story.still .as-spark polyline, .auth-story.still .as-line polyline { stroke-dashoffset: 0; }
.auth-story.still .as-donut .v { stroke-dasharray: 31 100; }

/* Trial and email state: a slim bar under the topbar, and a chip in the sidebar. */
.acct-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); background: var(--tint-blue); font-size: var(--t-body); }
.acct-bar[hidden] { display: none; }
.acct-bar.bad { background: var(--tint-red); }
.ab-msg { flex: 1; min-width: 0; }
.trial-chip { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); width: calc(100% - 2 * var(--s-2)); margin: var(--s-4) var(--s-2) 0;
  padding: var(--s-1) var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--card); font-size: var(--t-small); color: var(--fg-2); cursor: pointer; text-align: left; }
.trial-chip:hover { border-color: var(--fg-4); }
.trial-cta { font-weight: 650; color: var(--fg); }
.sidebar.collapsed .trial-chip { display: none; }

/* ---------- New: chips with icons, SLA ---------- */
.chip svg { width: 11px; height: 11px; flex: none; }
.chip.sla { gap: var(--s-1); font-variant-numeric: tabular-nums; padding: var(--s-hair) var(--s-2); }
.chip.sla svg { width: 10px; height: 10px; opacity: .7; }
/* Meta-row chips are compact — scale their icons down to match the 9.5px text. */
.c-meta .chip { gap: var(--s-1); height: 18px; }
.c-meta .chip svg { width: 9px; height: 9px; }
.c-meta .chip .dot { width: 5px; height: 5px; }

/* ---------- New: seg sm ---------- */
.seg.sm { padding: var(--s-hair); }
.seg.sm button { padding: var(--s-1) var(--s-snug); font-size: var(--t-small); }

/* ---------- New: inbox toolbar + filter pills ---------- */
.inbox-toolbar { display: flex; align-items: center; gap: var(--s-tight); margin-top: var(--s-2); }
/* Filter tabs follow the same rule as every tab row: the active one is a white pill with
   a hairline, the rest plain text. The old 2px charcoal ring was the heaviest element
   in the inbox list. */
.filter-pill { cursor: pointer; background: transparent; color: var(--fg-2); font-weight: 500; font-size: var(--t-body); height: 28px; padding: 0 var(--s-snug); border-radius: var(--r-btn); border: 1px solid transparent; transition: background .14s var(--ease), color .14s var(--ease); }
.filter-pill:hover { color: var(--fg); }
.filter-pill.on, .chip.blue.on.filter-pill { outline: none; box-shadow: var(--shadow-card); background: var(--card); color: var(--fg); border-color: var(--line-2); font-weight: 500; }

/* ---------- New: multi-select + bulk bar ---------- */
.convo-check { display: none; align-items: center; flex: none; padding-right: var(--s-hair); }
.inbox-layout.select-mode .convo-check { display: flex; }
.convo-check input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
/* Three distinct states: open thread (filled), ticked for bulk (ring), keyboard cursor (rail). */
.convo.selected { box-shadow: inset 0 0 0 1px var(--fg-4); }
.convo.kb-active { box-shadow: inset 2px 0 0 var(--fg); }
.convo.selected.kb-active { box-shadow: inset 2px 0 0 var(--fg), inset 0 0 0 1px var(--fg-4); }
.filter-pill:focus-visible, .convo-actions .btn:focus-visible, .af-chip:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
.bulk-bar {
  display: flex; align-items: center; gap: var(--s-2); flex: none;
  padding: 8px var(--s-3); border-bottom: 1px solid var(--line);
  background: var(--tint-blue); animation: page-in .2s var(--ease);
}
/* display:flex above beats the [hidden] UA rule — restore it, or an empty bar shows. */
.bulk-bar[hidden] { display: none; }
.bulk-count { font-size: var(--t-body); font-weight: 700; color: var(--blue-ink); flex: none; }
.bulk-actions { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; flex: 1; }
.bulk-actions::-webkit-scrollbar { display: none; }
.bulk-bar .btn.sm { flex: none; }

/* ---------- New: assignee chip (explicit size so it never stretches) ---------- */
.assignee {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none; box-sizing: border-box;
  line-height: 1; font-size: var(--t-micro); font-weight: 700; color: #fff; vertical-align: middle; align-self: center;
}
.assignee.sm { width: 18px; height: 18px; font-size: var(--t-micro); }
.assignee.empty {
  border: 1.5px dashed var(--line-2); color: var(--fg-4); background: transparent;
  font-weight: 600; cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); border-radius: 10px; }
.assignee.empty:hover { border-color: var(--blue); color: var(--blue-ink); }
.avatar.assignee-av { width: 22px; height: 22px; font-size: var(--t-micro); }
.avatar.assignee-av.sm { width: 18px; height: 18px; font-size: var(--t-micro); }
.convo .c-top .avatar, .convo .c-top .assignee { margin-left: var(--s-hair); }
.owner-cell { cursor: pointer; }
/* Empty-owner "+" is an SVG replaced element — fixed intrinsic size, never stretches. */
.owner-add { display: inline-block; vertical-align: middle; color: var(--fg-4); cursor: pointer; flex: none; }
.owner-cell:hover .owner-add { color: var(--blue-ink); }

/* ---------- New: company logo (default favicon, enriched logo overrides) ---------- */
.co-logo-wrap { display: inline-block; flex: none; overflow: hidden; }
.co-fallback { color: #fff; }
.avatar.has-photo { color: transparent; background-color: var(--bg-2); }

/* ---------- New: reusable choice menu ---------- */
.menu-modal { width: min(380px, calc(100vw - 32px)); }
.menu-list { display: flex; flex-direction: column; gap: var(--s-hair); }
.menu-row {
  display: flex; align-items: center; gap: var(--s-snug); width: 100%; text-align: left;
  padding: var(--s-snug) var(--s-3); border-radius: var(--r-btn); font-size: var(--t-emph); font-weight: 550;
  color: var(--fg-2); transition: background .13s var(--ease);
}
.menu-row:hover { background: var(--tint-blue); color: var(--fg); }
.menu-row.danger { color: var(--red); }
.menu-row svg { width: 16px; height: 16px; flex: none; color: var(--fg-4); }
.menu-row .menu-label { flex: 1; min-width: 0; }
.menu-row .menu-hint { font-size: var(--t-small); color: var(--fg-4); flex: none; }

/* ---------- New: command palette commands + footer ---------- */
.palette-foot {
  display: flex; gap: var(--s-4); align-items: center; justify-content: flex-start;
  padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line);
  font-size: var(--t-caption); color: var(--fg-4); background: var(--card-2);
}
.palette-foot span { display: inline-flex; align-items: center; gap: var(--s-1); }
.palette-foot kbd { font-family: var(--mono); border: 1px solid var(--line); border-radius: 6px; padding: 0 var(--s-tight); }
.p-item .p-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: var(--tint-blue); color: var(--blue-ink); flex: none; }
.p-item .p-ico svg { width: 14px; height: 14px; }

/* ---------- New: shortcuts help ---------- */
.shortcuts .kv { padding: var(--s-tight) 0; }
.sc-kbd { font-family: var(--mono); font-size: var(--t-small); color: var(--fg-2);
  border: 1px solid var(--line-2); border-radius: 6px; padding: var(--s-hair) var(--s-2); background: var(--bg-2); }

/* ---------- New: dashboard needs-action panel ---------- */
.needs-action { margin-bottom: var(--s-4); }
.na-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.na-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1);
  padding: var(--s-4); border-radius: var(--r-card);
  border: 1px solid var(--line-2); background: var(--card); box-shadow: var(--shadow-card);
  text-align: left; transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.na-card:hover { box-shadow: var(--shadow-float); border-color: var(--line-2); }
/* KG Tasks stat card anatomy: label on top, then the number. No icon chip — the coloured
   tile was the busiest element on the dashboard. The tone colour survives on the number. */
.na-card .na-ico { display: none; }
.na-card .na-num { order: 2; font-size: var(--t-lg); font-weight: 700; letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: var(--s-2); }
.na-card .na-label { order: 1; font-size: var(--t-emph); font-weight: 500; color: var(--fg-2); }
.na-card.coral .na-ico { background: var(--tint-coral); color: var(--coral); }
.na-card.coral .na-num { color: var(--coral); }
.na-card.violet .na-ico { background: var(--tint-violet); color: var(--violet); }
.na-card.amber .na-ico { background: var(--tint-amber); color: var(--amber); }
.na-card.green .na-ico { background: var(--tint-green); color: var(--green); }
.na-list { margin-top: var(--s-4); background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); padding: var(--s-3) var(--s-4) var(--s-4); box-shadow: var(--shadow-card); }
.na-list-title { font-size: var(--t-caption); font-weight: 700; letter-spacing: .08em; text-transform: none;
  color: var(--fg-4); padding: 2px 0 var(--s-2); }
.na-row { display: flex; align-items: center; gap: var(--s-snug); width: 100%; text-align: left;
  padding: var(--s-2) var(--s-tight); border-radius: 10px; transition: background .13s var(--ease); }
.na-row + .na-row { border-top: 1px solid var(--line); border-radius: 0; }
.na-row:hover { background: var(--tint-blue); border-radius: 10px; }
.na-row-name { font-size: var(--t-body); font-weight: 650; color: var(--fg); flex: none; max-width: 180px; }
.na-row-subj { font-size: var(--t-body); flex: 1; min-width: 0; }
.na-row .chip.sla { margin-left: auto; }

/* ---------- New: reminders ---------- */
.reminder .k { display: flex; align-items: center; gap: var(--s-1); }
.reminder.overdue .k { color: var(--red); }
.rem-sep { height: 1px; background: var(--line); margin: var(--s-tight) 0; }

/* ---------- New: settings switch row ---------- */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-snug);
  padding: var(--s-tight) 0; font-size: var(--t-emph); font-weight: 550; color: var(--fg-2); cursor: pointer; }
.switch-row input[type="checkbox"] { width: 40px; height: 22px; appearance: none; border-radius: 999px;
  background: var(--bg-3); position: relative; cursor: pointer; transition: background .2s var(--ease); flex: none; }
.switch-row input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s var(--ease); }
.switch-row input[type="checkbox"]:checked { background: var(--blue); }
.switch-row input[type="checkbox"]:checked::after { transform: translateX(18px); background: var(--on-blue); }

/* ---------- New: composer post-send select ---------- */
.composer-tools .post-send { width: auto; min-width: 0; max-width: 190px; padding: var(--s-tight) var(--s-5) var(--s-tight) var(--s-snug);
  font-size: var(--t-body); border-radius: 10px; }

/* ---------- New: client report modal ---------- */
.report-modal { width: min(640px, calc(100vw - 32px)); }
/* .rep-metric now shares the canonical .stat definition (see the type-scale block). */
/* Headline metrics in a client report read bigger than the supporting ones. */
.rep-metric-big { background: var(--card); border-color: var(--line-2); padding: var(--s-4); }
.rep-metric .rep-medit { opacity: 0; transition: opacity .14s var(--ease); font-size: var(--t-caption); padding: 1px var(--s-tight); }
.rep-metric:hover .rep-medit { opacity: 1; }
/* Remove-card affordance: hidden until hover so a report preview stays calm to read. */
.rep-metric { position: relative; }
.rep-mdel {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center;
  width: 18px; height: 18px; border: 0; border-radius: 6px; background: transparent;
  color: var(--fg-4); cursor: pointer; opacity: 0; transition: opacity .14s var(--ease);
}
.rep-metric:hover .rep-mdel { opacity: 1; }
.rep-mdel:hover { background: var(--tint-red); color: var(--red); }
.rep-mdel svg { width: 11px; height: 11px; }
.btn.xs { height: 24px; padding: 0 var(--s-2); font-size: var(--t-small); border-radius: var(--r-sm); }
input.input.sm, .select.sm { height: 28px; padding-left: var(--s-snug); font-size: var(--t-body); border-radius: var(--r-btn); }
.select.sm { padding-right: var(--s-6); }
.rep-reply .k { display: flex; align-items: center; gap: var(--s-tight); min-width: 0; }

/* ---------- New: empty-state action ---------- */
.empty .e-action { display: flex; justify-content: center; }

/* ---------- New: client card header (name never clips; actions wrap) ---------- */
.client-head { display: flex; align-items: center; gap: var(--s-snug); }
.client-head .avatar, .client-head .brand-logo { flex: none; }
.client-head .client-id { flex: 1; min-width: 0; }
.client-head .client-id b { line-height: 1.25; display: block; font-size: var(--t-title); color: var(--fg); }
.client-mark { width: 36px; height: 36px; border-radius: var(--r-md); }
.client-card.idle { opacity: .6; }
.client-card.idle:hover { opacity: 1; }
.client-card:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.client-head .btn { flex: none; margin-left: auto; }
.client-actions { display: flex; flex-wrap: wrap; gap: var(--s-tight); margin-top: var(--s-3); }
.client-actions .btn { flex: none; }

/* Guard: action clusters that sit beside a title should wrap, never clip */
.chart-head { row-gap: var(--s-tight); }
.chart-head .row { flex-wrap: wrap; justify-content: flex-end; }

/* ==========================================================================
   Motion & interaction polish (modern, professional, reduced-motion aware)
   ========================================================================== */

/* Staggered row entrance + optimistic collapse-out */
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.convo.removing { transition: height .28s var(--ease), opacity .2s var(--ease), margin .28s var(--ease); }

/* View Transitions: gentle cross-fade between pages / theme */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }

/* Segmented control sliding thumb */
.seg { position: relative; }
/* The sliding thumb carries the active pill's white fill + hairline border, so the
   transition still glides between tabs under the new flat-on-canvas styling. */
.seg-thumb {
  position: absolute; z-index: 0; border-radius: var(--r-btn); background: var(--card);
  border: 1px solid var(--line-2); box-shadow: none; pointer-events: none;
  transition: left .24s var(--ease), width .24s var(--ease), top .24s var(--ease); opacity: 0;
}
.seg.seg-enhanced button { position: relative; z-index: 1; }
.seg.seg-enhanced button.active { background: transparent; border-color: transparent; box-shadow: none; }

/* Sortable table headers */
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color .14s var(--ease); }
.th-sort:hover { color: var(--fg-2); }
.sort-ar { display: inline-block; width: 0; height: 0; margin-left: var(--s-1); vertical-align: middle; opacity: .28;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }
.th-sort.asc .sort-ar { opacity: .9; }
.th-sort.desc .sort-ar { opacity: .9; transform: rotate(180deg); }

/* Inbox row hover-actions (only on hover-capable devices) */
.convo { position: relative; }
.convo-actions {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%) translateX(6px);
  display: flex; gap: var(--s-hair); opacity: 0; pointer-events: none;
  padding-left: var(--s-loose); background: linear-gradient(90deg, transparent, var(--card-2) 34%);
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.convo-actions .btn.icon { padding: var(--s-tight); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
@media (hover: hover) {
  .convo:hover .convo-actions { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
}
.inbox-layout.select-mode .convo-actions { display: none; }

/* Tactile press states */
.btn:active { transform: translateY(0.5px) scale(.99); }
.nav-item:active, .menu-row:active, .na-card:active, .sheet-item:active { transform: scale(.99); }
.nav-item.active { animation: nav-pop .24s var(--ease); }
@keyframes nav-pop { from { transform: scale(.97); } to { transform: none; } }
.na-card, .kcard, .convo, .p-item, .menu-row { transition: background .14s var(--ease), box-shadow .2s var(--ease),
  border-color .2s var(--ease), transform .12s var(--ease); }

/* Sharper focus ring for keyboard users */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.convo:focus-visible, .na-card:focus-visible { outline-offset: -2px; }

/* Sidebar hover-expand when collapsed — smooth in-flow reveal (no layout jump) */
@media (hover: hover) and (min-width: 861px) {
  .sidebar.collapsed:hover {
    width: var(--sidebar-w); padding-left: var(--s-3); padding-right: var(--s-3);
    box-shadow: var(--shadow-float);
  }
  .sidebar.collapsed:hover .brand-text, .sidebar.collapsed:hover .nav-item > span:not(.badge),
  .sidebar.collapsed:hover .foot-label, .sidebar.collapsed:hover .user-text,
  .sidebar.collapsed:hover #logoutBtn { display: block; }
  .sidebar.collapsed:hover .nav-item { justify-content: flex-start; padding: 8px var(--s-3); }
  .sidebar.collapsed:hover .nav-item .badge { position: static; }
  .sidebar.collapsed:hover [data-tip]::after { display: none; }
  .sidebar.collapsed:hover .brand { justify-content: flex-start; padding: var(--s-1) var(--s-2) var(--s-4); }
  /* The hover-expanded sidebar lays the account row out like the open sidebar, not
     stacked like the collapsed one (which is what put the name and icons in a column). */
  .sidebar.collapsed:hover .user-chip { flex-direction: row; justify-content: flex-start; padding: var(--s-2) var(--s-1); }
  .sidebar.collapsed:hover .user-actions { flex-direction: row; margin-left: auto; }
  .sidebar.collapsed:hover .sidebar-footer .foot-row { flex-direction: row; }
}

/* Density: Compact */
:root[data-density="compact"] .tbl td { padding: var(--s-1) var(--s-3); }
:root[data-density="compact"] .tbl th { padding: var(--s-2) var(--s-3); }
:root[data-density="compact"] .convo { padding: var(--s-2) var(--s-3); }
:root[data-density="compact"] .card-pad { padding: var(--s-3); }
:root[data-density="compact"] .metric { padding: var(--s-3) var(--s-4) var(--s-2); }
:root[data-density="compact"] .metric .m-value { font-size: var(--t-xl); }
:root[data-density="compact"] .na-card { padding: var(--s-3); }
:root[data-density="compact"] .kcard { padding: var(--s-2) var(--s-3); }
:root[data-density="compact"] .kv { padding: var(--s-1) 0; }

/* ==========================================================================
   Relationships: warmth, toolbar, accounts, contact/company 360
   ========================================================================== */
.rel-toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.rel-toolbar .select { width: auto; min-width: 132px; }

/* Warmth track + score */
.warmth { display: inline-flex; align-items: center; gap: var(--s-tight); }
.warmth-track { width: 54px; height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; flex: none; }
.warmth-track i { display: block; height: 100%; border-radius: 999px; transition: width .5s var(--ease); }
.warmth b { font-size: var(--t-body); font-variant-numeric: tabular-nums; }

/* Multi-select checkbox column (hidden until select mode) */
.rel-tbl .check-col { display: none; width: 34px; }
.rel-sel .rel-tbl .check-col { display: table-cell; }
.rel-tbl .check-col input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.rel-tbl tbody tr.selected, .rel-tbl tr.selected { background: var(--tint-blue); }
.rel-tbl .nowrap { white-space: nowrap; }
/* svg is display:block in the reset — force inline so it sits beside its label. */
.rel-tbl .nowrap svg { width: 11px; height: 11px; display: inline-block; vertical-align: -2px; opacity: .7; }
.reminder .k svg, .nba-banner svg { display: inline-block; vertical-align: -2px; }
.link-cell { cursor: pointer; }
.link-cell:hover { color: var(--blue-ink); text-decoration: underline; }

/* Contact / company hero extras */
.hero-warmth { display: flex; flex-direction: column; align-items: center; gap: var(--s-hair); flex: none; }
.nba-banner {
  display: flex; align-items: center; gap: var(--s-snug); margin-bottom: var(--s-4);
  padding: var(--s-snug) var(--s-3); border-radius: var(--r-card);
  background: var(--tint-blue); color: var(--blue-ink); font-size: var(--t-emph); font-weight: 550;
}
.nba-banner span { display: flex; align-items: center; gap: var(--s-tight); flex: 1; min-width: 0; }
.nba-banner svg { width: 15px; height: 15px; flex: none; }
.nba-banner b { color: var(--fg); font-weight: 700; }
.nba-banner .btn { flex: none; }

/* ---------- Deliverability (ESP matrix) ---------- */
.deliv-note { font-size: var(--t-body); line-height: 1.55; }
/* Deliverability: actionable insight band */
.deliv-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.di-card { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-snug) var(--s-3); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-card); }
.di-card .di-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; background: var(--bg-2); color: var(--fg-3); }
.di-card .di-ico svg { width: 17px; height: 17px; }
.di-card.good .di-ico { background: var(--tint-green); color: var(--green); }
.di-card.warn .di-ico { background: var(--tint-amber); color: var(--amber); }
.di-big { font-size: var(--t-title); font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-sub { font-size: var(--t-small); color: var(--fg-3); margin-top: 1px; }
/* Provider summary cards */
.deliv-providers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--s-3); }
.dprov-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.dprov-head b { font-size: var(--t-emph); }
.dprov-health { font-size: var(--t-display); font-weight: 780; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: var(--s-snug) 0 var(--s-1); line-height: 1; }
.dprov-health span { font-size: var(--t-small); font-weight: 500; color: var(--fg-4); margin-left: var(--s-2); letter-spacing: 0; }
.dprov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-snug); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.dps-k { font-size: var(--t-caption); color: var(--fg-4); }
.dps-v { font-size: var(--t-title); font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; margin-top: 1px; }
.cap-bar { height: 6px; background: var(--bg-2); overflow: hidden; margin-top: var(--s-3); }
.cap-bar i { display: block; height: 100%; background: var(--blue); transition: width .5s var(--ease); }
.dps-cap { font-size: var(--t-small); margin-top: var(--s-tight); }
/* Matrix */
.deliv-matrix { min-width: 560px; }
.deliv-matrix th { text-align: center; font-size: var(--t-small); }
.deliv-matrix th:first-child { text-align: left; }
.deliv-matrix td { text-align: center; vertical-align: middle; border-left: 1px solid var(--line); padding: var(--s-3) var(--s-3); }
.deliv-matrix td:first-child { border-left: none; }
.deliv-rowhead { font-weight: 700; color: var(--fg); text-align: left !important; white-space: nowrap; }
.deliv-cell .dc-replies { font-size: var(--t-lg); font-weight: 650; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.1; }
.deliv-cell .dc-replies span { font-size: var(--t-caption); font-weight: 500; color: var(--fg-4); }
.deliv-cell .dc-pos { font-size: var(--t-body); font-weight: 650; margin-top: var(--s-1); }
.deliv-cell .dc-out { font-size: var(--t-small); margin-top: var(--s-hair); }

/* ---------- Active-filter banner + clear ---------- */
.filter-note {
  display: flex; align-items: center; gap: var(--s-snug); margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-card);
  background: var(--tint-amber); color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  font-size: var(--t-body);
}
.filter-note span { flex: 1; min-width: 0; color: var(--fg-2); }
.filter-note b { color: var(--fg); }
.filter-note svg { width: 16px; height: 16px; flex: none; }
.filter-note .btn { flex: none; }
.filter-clear { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.filter-clear:hover { border-color: var(--amber); background: var(--tint-amber); }

/* ---------- Notification center ---------- */
.notif-bell { position: relative; }
.notif-badge {
  position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 var(--s-1);
  border-radius: 999px; background: var(--red); color: #fff; font-size: var(--t-micro); font-weight: 700;
  line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--nav-bg);
}
.notif-bell.has-unread svg { color: var(--blue-ink); }
.notif-overlay { position: fixed; inset: 0; z-index: 80; animation: fade-in .12s var(--ease); }
.notif-panel {
  position: fixed; top: 62px; right: 14px; width: min(390px, calc(100vw - 20px));
  max-height: min(560px, calc(100dvh - 80px)); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel);
  box-shadow: var(--shadow-float); overflow: hidden;
  animation: notif-in .24s var(--ease);
}
@keyframes notif-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); flex: none; }
.notif-head b { font-size: var(--t-emph); }
.notif-enable {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; text-align: left;
  padding: 10px var(--s-4); background: var(--tint-blue); color: var(--blue-ink);
  font-size: var(--t-body); font-weight: 600; border-bottom: 1px solid var(--line); flex: none;
}
.notif-enable svg { width: 15px; height: 15px; flex: none; }
.notif-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-tight); }
.notif-item { display: flex; gap: var(--s-snug); width: 100%; text-align: left; padding: var(--s-snug) var(--s-snug); border-radius: var(--r-btn); transition: background .13s var(--ease); }
.notif-item:hover { background: var(--card-2); }
.notif-item.unread { background: var(--tint-blue); }
.notif-item.unread:hover { background: color-mix(in srgb, var(--tint-blue) 70%, var(--card-2)); }
.notif-ico { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--bg-2); color: var(--fg-3); }
.notif-ico svg { width: 15px; height: 15px; }
.notif-ico.pos { background: var(--sc-tint-positive); color: var(--sc-positive); }
.notif-ico.meeting { background: var(--sc-tint-meeting); color: var(--sc-meeting); }
.notif-ico.warm { background: var(--sc-tint-warm); color: var(--sc-warm); }
.notif-ico.neg { background: var(--tint-coral); color: var(--coral); }
.notif-ico.blue { background: var(--tint-blue); color: var(--blue-ink); }
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-hair); }
.notif-title { font-size: var(--t-body); font-weight: 650; color: var(--fg); }
.notif-sub { font-size: var(--t-small); color: var(--fg-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-time { font-size: var(--t-caption); color: var(--fg-4); margin-top: var(--s-hair); }
.notif-foot { padding: 8px var(--s-4); border-top: 1px solid var(--line); text-align: center; flex: none; }
@media (max-width: 860px) {
  .notif-panel { top: 56px; right: 8px; left: 8px; width: auto; }
  /* Swipe-to-reveal quick actions on a conversation row. */
  .convo > .avatar, .convo > .c-body, .convo > .convo-check { transition: transform .2s var(--ease); }
  .convo.swiped > .avatar, .convo.swiped > .c-body, .convo.swiped > .convo-check { transform: translateX(-124px); }
  .convo.swiped .convo-actions { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
  .convo.swiped .convo-actions .btn.icon { background: var(--card); }
}

/* ---------- Reply templates ---------- */
.empty-mini { padding: var(--s-3) var(--s-2); text-align: center; display: flex; flex-direction: column; gap: var(--s-1); align-items: center; }
.tmpl-list { display: flex; flex-direction: column; gap: var(--s-tight); max-height: 46vh; overflow-y: auto; }
.tmpl-item { display: flex; flex-direction: column; gap: var(--s-1); width: 100%; text-align: left; padding: var(--s-snug) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); transition: border-color .13s var(--ease), background .13s var(--ease); }
.tmpl-item:hover { border-color: var(--blue); background: var(--tint-blue); }
.tmpl-item-top { display: flex; align-items: center; gap: var(--s-2); }
.tmpl-item-top b { font-size: var(--t-emph); }
.chip.sm { font-size: var(--t-micro); padding: 1px var(--s-tight); }
.tmpl-subj { font-size: var(--t-small); font-weight: 600; color: var(--fg-2); }
.tmpl-preview { font-size: var(--t-small); color: var(--fg-3); white-space: pre-wrap; word-break: break-word; }
.tmpl-group-label { font-size: var(--t-caption); font-weight: 700; letter-spacing: .04em; text-transform: none; color: var(--fg-4); margin: var(--s-3) 0 var(--s-2); }
.tmpl-group-label:first-child { margin-top: 0; }
.tmpl-row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-snug) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-btn); margin-bottom: var(--s-2); background: var(--card); }
.tmpl-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.tmpl-row-main b { font-size: var(--t-emph); }
.tmpl-row-actions { display: flex; gap: var(--s-1); flex: none; }

/* ---------- API tokens / code blocks / MCP guide ---------- */
.code-block { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-btn); padding: var(--s-snug) var(--s-3); overflow-x: auto; margin-top: var(--s-2); }
.code-block pre { margin: 0; font-family: var(--mono); font-size: var(--t-body); line-height: 1.55; color: var(--fg-2); white-space: pre; }
.code-copy { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); font-size: var(--t-caption); font-weight: 650; border-radius: 8px; background: var(--card); border: 1px solid var(--line); color: var(--fg-3); box-shadow: var(--shadow-card); }
.code-copy:hover { color: var(--blue-ink); border-color: var(--blue); }
.code-copy svg { width: 11px; height: 11px; }
.set-tab[data-settab="api"] .card-title svg { width: 15px; height: 15px; vertical-align: -2px; }
.set-tab[data-settab="api"] .muted svg { width: 12px; height: 12px; vertical-align: -1px; }
.guide-step { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-3); }
.guide-step > div { flex: 1; min-width: 0; }
.guide-step b { font-size: var(--t-emph); }
.guide-num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-blue); color: var(--blue-ink); font-size: var(--t-small); font-weight: 700; margin-top: 1px; }
.tool-groups { display: flex; flex-direction: column; gap: var(--s-2); }
.tool-group { display: flex; gap: var(--s-2); align-items: baseline; }
.tool-group .chip { flex: none; }
.prompt-list { display: flex; flex-direction: column; gap: var(--s-tight); }
.prompt-ex { font-size: var(--t-body); color: var(--fg-2); padding: var(--s-tight) var(--s-snug); background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-btn); font-style: italic; }
.tok-reveal { margin-top: var(--s-3); padding: var(--s-3); border: 1px solid var(--sc-positive); border-radius: var(--r-btn); background: var(--sc-tint-positive); }
.tok-reveal input { flex: 1; min-width: 0; }
.tok-reveal svg { width: 13px; height: 13px; vertical-align: -2px; }

/* ---------- Internal comments + @mentions ---------- */
.comment-list { display: flex; flex-direction: column; gap: var(--s-snug); max-height: 340px; overflow-y: auto; margin-bottom: var(--s-snug); }
.comment { display: flex; gap: var(--s-2); }
.avatar.sm { width: 26px; height: 26px; font-size: var(--t-caption); flex: none; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: var(--s-tight); }
.comment-meta b { font-size: var(--t-body); }
.comment-meta .muted { font-size: var(--t-caption); }
.comment-text { font-size: var(--t-body); color: var(--fg-2); line-height: 1.5; word-break: break-word; margin-top: 1px; }
.mention { color: var(--blue-ink); background: var(--tint-blue); border-radius: 6px; padding: 0 var(--s-1); font-weight: 600; }
.comment-compose { position: relative; display: flex; gap: var(--s-tight); align-items: flex-end; }
.comment-compose textarea { resize: none; min-height: 36px; line-height: 1.4; }
.comment-compose .btn { flex: none; }
.mention-pop { position: absolute; bottom: calc(100% + 6px); left: 0; right: 40px; z-index: 20;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-btn); box-shadow: var(--shadow-float);
  overflow: hidden; max-height: 200px; overflow-y: auto; }
.mention-pop[hidden] { display: none; }
.mention-opt { display: flex; align-items: center; gap: var(--s-2); width: 100%; text-align: left; padding: var(--s-2) var(--s-snug); font-size: var(--t-body); transition: background .12s var(--ease); }
.mention-opt:hover { background: var(--tint-blue); }
.flash-in { animation: flash-in .9s var(--ease); }
@keyframes flash-in { 0% { background: var(--tint-blue); } 100% { background: transparent; } }

/* ---------- Priority queue (smart inbox digest) ---------- */
.prio-list .na-list-title svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: var(--s-1); }
/* The title row carries the window control, so it has to lay out horizontally. Scoped to
   .prio-list so the other na-list titles keep their original block layout. */
.prio-list .na-list-title { display: flex; align-items: center; gap: var(--s-2); }
.prio-list .na-list-title .muted { text-transform: none; letter-spacing: 0; }
.prio-row { display: flex; align-items: center; gap: var(--s-snug); width: 100%; text-align: left; }
.prio-score { min-width: 30px; justify-content: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.prio-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-hair); }
.prio-name { font-size: var(--t-body); font-weight: 600; color: var(--fg); }
.prio-reason { font-size: var(--t-small); }
.prio-stage { flex: none; }
@media (max-width: 640px) { .prio-stage { display: none; } }

/* ---------- Goals ---------- */
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--s-3); }
.goal-card { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.goal-top { display: flex; align-items: center; gap: var(--s-3); }
.goal-ring { position: relative; flex: none; display: grid; place-items: center; }
.goal-ring-val { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 750; font-size: var(--t-title); font-variant-numeric: tabular-nums; }
.goal-meta { flex: 1; min-width: 0; }
.goal-metric { font-size: var(--t-emph); font-weight: 650; color: var(--fg); }
.goal-count { font-size: var(--t-xl); font-weight: 750; font-variant-numeric: tabular-nums; margin: 1px 0; }
.goal-count .muted { font-size: var(--t-emph); font-weight: 500; }
.goal-sub { font-size: var(--t-small); }
.goal-del { flex: none; align-self: flex-start; }
.goal-bar { height: 7px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.goal-bar i { display: block; height: 100%; border-radius: 6px; }
.goal-done { align-self: flex-start; }

/* ---------- Sentiment & intent trends ---------- */
.chart-draw .ln-stroke { will-change: stroke-dashoffset; }
.intent-bars { display: flex; flex-direction: column; gap: var(--s-2); }
.intent-row { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: var(--s-3); }
.intent-label { font-size: var(--t-body); color: var(--fg-2); }
.intent-track { height: 9px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.intent-track i { display: block; height: 100%; border-radius: 6px; background: var(--blue); }
.intent-count { font-size: var(--t-body); font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
@media (max-width: 640px) { .intent-row { grid-template-columns: 110px 1fr 40px; gap: var(--s-2); } }

/* ---------- AI meeting brief ---------- */
.brief-loading { display: flex; align-items: center; gap: var(--s-snug); padding: var(--s-6) var(--s-tight); justify-content: center; }
.brief-headline { font-size: var(--t-title); font-weight: 700; line-height: 1.4; color: var(--fg); }
.brief-goal { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-btn); background: var(--tint-green); color: var(--fg); font-size: var(--t-body); }
.brief-goal-label { font-weight: 700; color: var(--green); text-transform: none; font-size: var(--t-caption); letter-spacing: .04em; margin-right: var(--s-tight); }
.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-loose); margin-top: var(--s-4); }
.brief-sec h4 { font-size: var(--t-small); font-weight: 700; letter-spacing: .03em; text-transform: none; color: var(--fg-3); display: flex; align-items: center; gap: var(--s-tight); margin-bottom: var(--s-tight); }
.brief-sec h4 svg { width: 13px; height: 13px; }
.brief-sec p { font-size: var(--t-body); line-height: 1.5; color: var(--fg-2); }
.brief-sec ul { margin: 0; padding-left: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); }
.brief-sec li { font-size: var(--t-body); line-height: 1.45; color: var(--fg-2); }
@media (max-width: 620px) { .brief-grid { grid-template-columns: 1fr; } }

/* ---------- Mobile ---------- */
.mobile-nav { display: none; }

@media (max-width: 1180px) {
  .inbox-layout { grid-template-columns: 300px minmax(0, 1fr); }
  .chart-card, .chart-card.third { grid-column: span 6; }
  /* minmax(0,1fr) — a bare 1fr has an automatic min-content floor, so a wide table
     (min-width:640px) or a nowrap value would force the column past the viewport. */
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-layout > * { min-width: 0; }
}
@media (max-width: 860px) {
  body { overflow: auto; }
  .sidebar { display: none; }
  .shell { flex-direction: column; padding: 0; gap: 0; }
  .main { height: calc(100dvh - 58px); border: none; border-radius: 0; box-shadow: none; }
  .content { padding: var(--s-4) var(--s-4) 90px; }
  .topbar { padding: var(--s-2) var(--s-4); min-height: 54px; flex-wrap: wrap; }
  .page-sub { display: none; }
  .topbar-collapse { display: none; }   /* no sidebar on mobile */
  .searchbar { min-width: 0; flex: 1; }
  .searchbar span { display: none; }
  /* Page tabs drop to their own scrollable row below the title/search/bell. */
  .topbar-right { flex-wrap: wrap; row-gap: var(--s-2); }
  .topbar-seg-slot {
    display: block; order: 5; flex: 1 1 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .topbar-seg-slot::-webkit-scrollbar { display: none; }
  .topbar-seg-slot .seg { width: max-content; min-width: 100%; }
  .mobile-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--line);
    padding: var(--s-tight) 8px calc(var(--s-tight) + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .mobile-nav button {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
    font-size: var(--t-micro); font-weight: 650; color: var(--fg-4); padding: var(--s-1) var(--s-snug);
    border-radius: 10px; transition: color .15s;
  }
  .mobile-nav button svg { width: 20px; height: 20px; }
  .mobile-nav button.active { color: var(--blue-ink); }
  .inbox-layout { grid-template-columns: 1fr; }
  .inbox-list { display: flex; }
  .inbox-layout.thread-open .inbox-list { display: none; }
  .thread-pane { display: none; }
  .inbox-layout.thread-open .thread-pane { display: flex; }
  .msg { max-width: 92%; }

  /* Thread open = fullscreen composing room; the back arrow returns to the list. */
  body.thread-open .mobile-nav { display: none; }
  body.thread-open .main { height: 100dvh; }
  /* Header: keep it from cramping/overlapping */
  .thread-head { padding: var(--s-2) var(--s-3); gap: var(--s-2); }
  .thread-head .avatar { width: 30px; height: 30px; font-size: var(--t-small); }
  #replyJump { display: none; }               /* composer is right there on mobile */
  .thread-head .th-info .chip { font-size: var(--t-micro); padding: 1px var(--s-tight); }
  /* Composer: all AI tools reachable via horizontal scroll instead of clipping */
  .composer { padding: var(--s-2) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .composer-format {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    margin: 0 calc(var(--s-3) * -1) var(--s-2); padding: 0 var(--s-3) 2px;
  }
  .composer-format::-webkit-scrollbar { display: none; }
  .composer-format .btn { flex: none; white-space: nowrap; }
  .composer .editor { min-height: 64px; }
  .composer-tools { gap: var(--s-2); }
  .composer-tools .from { max-width: 44%; }

  .intel-pane { width: min(340px, 92vw); }
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-card, .chart-card.third, .chart-card.full { grid-column: span 1; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* minmax(0,1fr), not 1fr: the automatic min-content floor of a bare 1fr lets
     nowrap values / wide tables push cards past the viewport edge. */
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-2 > *, .grid-3 > *, .chart-grid > * { min-width: 0; }
  .kanban { padding: var(--s-3) var(--s-4) 100px; }
  .drawer { width: 100vw; }
  .filterbar .input, .filterbar .dates .input { width: 100%; }

  /* Thread header on a phone: keep only the primary actions inline and move the
     rest behind "…", so the contact name isn't squeezed to nothing and the stage
     chip can't spill over the icons. */
  .thread-actions { flex: none; gap: var(--s-hair); }
  .thread-actions .btn { flex: none; }
  #assignBtn, #followBtn, #meetBtn, #starBtn { display: none; }
  .thread-more { display: inline-flex; }
  .thread-head .th-info .chip { display: none; }   /* redundant: shown in list + intel */
  .thread-head .th-info { flex: 1; min-width: 0; }
  .na-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .na-row-name { max-width: 40vw; }
  .menu-modal, .report-modal { width: calc(100vw - 24px); }

  /* Topbar: the title, search and any page control (e.g. People/Companies) were
     colliding. Collapse search to an icon and let the title ellipsis. */
  .searchbar { flex: none; width: 38px; padding: var(--s-2); justify-content: center; }
  .searchbar kbd { display: none; }
  .page-title { font-size: var(--t-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { min-width: 0; flex-shrink: 1; gap: var(--s-1); }
  .topbar-right .seg button { padding: var(--s-1) var(--s-2); font-size: var(--t-small); }
  /* Sync lives in the More sheet on mobile — drop it here so the page control fits. */
  #syncBtn { display: none; }

  /* Contact / company hero must wrap instead of shoving the action button off-screen */
  .contact-hero { flex-wrap: wrap; }
  .contact-hero h2 { font-size: var(--t-lg); }
  .contact-hero .btn, .hero-warmth { margin-left: auto; }

  /* Relationships table: drop low-priority columns so it's readable on a phone.
     Company is dropped too — the domain is already visible in the email. */
  .rel-tbl th:nth-child(3), .rel-tbl td:nth-child(3),   /* Company */
  .rel-tbl th:nth-child(5), .rel-tbl td:nth-child(5),   /* Owner */
  .rel-tbl th:nth-child(7), .rel-tbl td:nth-child(7),   /* Replies */
  .rel-tbl th:nth-child(8), .rel-tbl td:nth-child(8),   /* Next touch */
  .rel-tbl th:nth-child(9), .rel-tbl td:nth-child(9) {  /* Last activity */
    display: none;
  }
  .rel-tbl .warmth-track { width: 40px; }
  table.rel-tbl { min-width: 0; }   /* beat table.tbl{min-width:640px} so it fits the screen */
  .rel-tbl td:nth-child(2) { max-width: 46vw; }
  .rel-tbl td:nth-child(2) .row > div { min-width: 0; }
}

/* ---------------- Automations queue ---------------- */
.input.sm { padding: var(--s-tight) var(--s-2); font-size: var(--t-body); border-radius: var(--r-btn); }
.autom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s-3); }
.autom-card { margin: 0; }
.autom-note {
  margin-top: var(--s-snug); padding: var(--s-2) var(--s-snug); font-size: var(--t-body); line-height: 1.5;
  color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--line);
  border-left: 2px solid var(--blue); border-radius: 8px; white-space: pre-wrap;
}
@media (max-width: 640px) { .autom-grid { grid-template-columns: 1fr; } }
.autom-ic { display: inline-flex; }
.autom-ic svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--fg-3); }

/* Automations queue tables + detail/help */
.autom-tbl td { vertical-align: middle; }
.autom-tbl tbody tr:hover { background: var(--bg-2); }
.autom-help {
  margin-top: var(--s-3); padding: var(--s-snug) var(--s-3); font-size: var(--t-body); line-height: 1.55;
  color: var(--fg-2); background: var(--tint-blue); border-radius: 10px;
}
.autom-help svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--blue); }
.hiw-p { font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); margin: 0 0 var(--s-3); }
.hiw-item { display: flex; gap: var(--s-snug); align-items: flex-start; font-size: var(--t-body); line-height: 1.5; color: var(--fg-2); margin-bottom: var(--s-snug); }
.hiw-item svg { width: 16px; height: 16px; color: var(--blue); flex: none; margin-top: 1px; }
.hiw-item b { color: var(--fg); }
.autom-msg {
  margin-top: var(--s-2); padding: var(--s-3) var(--s-3); font-size: var(--t-body); line-height: 1.6;
  color: var(--fg); background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; white-space: normal;
}
.autom-msg-subj { font-weight: 650; margin-bottom: var(--s-tight); color: var(--fg); }

/* Automations analytics cards + expandable rows */
.autom-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-bottom: var(--s-4); }
.astat-label { font-size: var(--t-small); color: var(--fg-3); font-weight: 550; }
.astat-num { font-size: var(--t-display); font-weight: 700; letter-spacing: -0.02em; margin: var(--s-1) 0 var(--s-hair); }
.astat-num.green { color: var(--green); }
.astat-sub { font-size: var(--t-small); }
.autom-tbl .chev-col { width: 26px; text-align: center; }
.autom-tbl .chev { display: inline-block; color: var(--fg-4); transition: transform .15s var(--ease); font-size: var(--t-title); }
.autom-tbl .chev svg { width: 14px; height: 14px; }
/* Automations: engine header, five stat cards, then sectioned, paged lists. */
.autom-head { display: flex; align-items: center; gap: var(--s-2); }
.metric-grid.autom-stats5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 1100px) { .metric-grid.autom-stats5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .metric-grid.autom-stats5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.autom-sec { overflow: hidden; }
.sec-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sec-n { font-size: var(--t-small); color: var(--fg-3); background: var(--bg-2); border-radius: 999px; padding: 0 var(--s-2); font-variant-numeric: tabular-nums; }
.sec-body { padding: var(--s-4); display: grid; gap: var(--s-3); }
.sec-sub { font-size: var(--t-small); font-weight: 600; color: var(--fg-3); }
.autom-sec .table-wrap { border-radius: 0; }
.autom-sec .bk-card { margin-bottom: 0; }
.autom-av { width: 26px; height: 26px; font-size: var(--t-caption); flex: none; }
.autom-tbl { table-layout: fixed; }
.autom-tbl th:nth-child(2) { width: 26%; }
.autom-tbl th:nth-child(3) { width: 18%; }
.autom-tbl th:nth-child(5) { width: 128px; }
.autom-tbl th:nth-child(6) { width: 104px; }
.autom-tbl td.autom-detail { max-width: 0; }
.pagetabs .spacer { flex: 1; }
/* Settings */
.sec-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sec-row .spacer, .sec-head .spacer { flex: 1; }
.sec-note { padding: var(--s-3) var(--s-4) 0; }
.sync-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.sync-tile { display: flex; flex-direction: column; gap: var(--s-hair); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg); min-width: 0; }
.sync-tile .st { max-width: 100%; }
.sync-tile .st > span { overflow: hidden; text-overflow: ellipsis; }
.ai-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.ai-facts > div { padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ai-fact { font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.integ-grid, .rule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--s-3); align-items: start; }
.rule-grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.integ-card { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.integ-card.open { grid-column: 1 / -1; }
.integ-head { display: flex; align-items: center; gap: var(--s-2); justify-content: space-between; }
.integ-head b { color: var(--fg); font-size: var(--t-emph); }
.integ-key { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md); }
.integ-key .mono { color: var(--fg-2); letter-spacing: .04em; }
.integ-actions { display: flex; gap: var(--s-2); }
.integ-form { border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: var(--s-1); }
.integ-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); min-height: 140px; border-style: dashed; color: var(--fg-3); cursor: pointer; text-align: center; }
.integ-add svg { width: 18px; height: 18px; }
.integ-add:hover { border-color: var(--fg-4); color: var(--fg); }
.rule-card { display: flex; flex-direction: column; gap: var(--s-2); }
.rule-pat { font-weight: 600; color: var(--fg); word-break: break-all; }
.rule-add { background: var(--bg); }
.tok-val { flex: 1; min-width: 0; padding: var(--s-2) var(--s-3); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md); font-size: var(--t-body); overflow-x: auto; white-space: nowrap; }
.api-base { font-size: var(--t-body); }
.mcp-panel .code-block { margin-top: var(--s-2); }
.autom-row.open .chev { transform: rotate(90deg); color: var(--fg-2); }
.autom-row.open { background: var(--bg-2); }
.autom-detail-row > td { background: var(--bg-2); padding: 0; }
.autom-detail-inner { padding: var(--s-3) var(--s-4) var(--s-4); }
@media (max-width: 900px) { .autom-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .autom-stats { grid-template-columns: 1fr; } }

/* Proposed calls. The two clocks sit side by side because the only mistake this can
   make is a timezone mistake, and seeing both is what makes it obvious. */
.bk-card { margin-bottom: var(--s-3); }
.bk-quote { font-size: var(--t-body); color: var(--fg-2); margin-top: var(--s-tight);
  padding-left: var(--s-snug); border-left: 2px solid var(--line-2); }
.bk-times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  margin-top: var(--s-snug); max-width: 440px; }
.bk-times > div { display: flex; flex-direction: column; gap: var(--s-hair); min-width: 0; }
.bk-k { font-size: var(--t-micro); text-transform: none; letter-spacing: .05em;
  color: var(--fg-4); font-weight: 600; }
@media (max-width: 620px) { .bk-times { grid-template-columns: 1fr; } }

/* Relationships: automatic demand<->supply matches */
.mt-card { margin-bottom: var(--s-3); }
.mt-head-row { display: flex; gap: var(--s-3); align-items: flex-start; }
.mt-score { flex: none; width: 42px; height: 42px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: var(--t-title);
  background: var(--bg-2); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.mt-score.green { background: var(--tint-green); color: var(--green); }
.mt-score.amber { background: var(--tint-amber); color: var(--amber); }
.mt-why { font-size: var(--t-emph); color: var(--fg); line-height: 1.5; }
.mt-sides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-3);
  border-top: 1px solid var(--line); padding-top: var(--s-3); }
.mt-side { min-width: 0; }
.mt-side-label { font-size: var(--t-caption); text-transform: none; letter-spacing: .05em;
  color: var(--fg-4); font-weight: 600; margin-bottom: var(--s-1); }
.mt-head { font-size: var(--t-body); color: var(--fg-2); margin-top: var(--s-1); line-height: 1.45; }
.mt-chips { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-2); }
.mt-chips .chip { height: 19px; font-size: var(--t-caption); padding: 0 var(--s-2); }
@media (max-width: 760px) { .mt-sides { grid-template-columns: 1fr; } }

/* Automations outcome split: sent / drafted / waiting / blocked / failed */
.aout { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); margin-top: var(--s-3); }
.aout-cell { text-align: center; min-width: 0; }
.aout-n { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; }
.aout-n.green { color: var(--green); }
.aout-n.amber { color: var(--amber); }
.aout-n.red { color: var(--red); }
.aout-l { font-size: var(--t-small); color: var(--fg-3); font-weight: 550; margin-top: var(--s-hair); }
@media (max-width: 760px) { .aout { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-3); } }

/* Relationships: one card per campaign pair, click through to its matches. */
.aout.six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 760px) { .aout.six { grid-template-columns: repeat(3, 1fr); } }
.pair-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s-3); }
.pair-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg, 14px); padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3); cursor: pointer; transition: border-color .16s, transform .16s; }
.pair-card:hover { border-color: var(--fg-4); transform: translateY(-1px); }
.pair-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pair-title { font-size: var(--t-title); font-weight: 650; color: var(--fg); }
.pair-sides { display: flex; flex-direction: column; gap: var(--s-tight); font-size: var(--t-small); color: var(--fg-2); }
.pair-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line-2); }
.pair-stat { display: flex; flex-direction: column; min-width: 0; }
.pair-stat b { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em; }
.pair-stat span { font-size: var(--t-caption); color: var(--fg-3); }
.pair-status { font-size: var(--t-small); font-weight: 550; color: var(--fg-3); }
.pair-status.green { color: var(--green); }
.pair-status.amber { color: var(--amber); }
.afam-count .amber { color: var(--amber); }
.afam-count .red { color: var(--red); }
.autom-alert { border-color: color-mix(in srgb, var(--amber) 38%, var(--line-2)); background: var(--tint-amber); }
.autom-alert .autom-ic.amber { color: var(--amber); }

/* Automations expanded detail (skimmable) */
.autom-detail-inner { padding: var(--s-4) var(--s-4) var(--s-4); }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--s-3) var(--s-5); }
.ad-field { display: flex; flex-direction: column; gap: var(--s-hair); min-width: 0; }
.ad-k { font-size: var(--t-caption); text-transform: none; letter-spacing: .05em; color: var(--fg-4); font-weight: 600; }
.ad-v { font-size: var(--t-body); color: var(--fg); font-weight: 550; overflow-wrap: anywhere; }
.ad-row { margin-top: var(--s-3); }
.ad-row .ad-k { display: block; margin-bottom: var(--s-1); }
.ad-quote { font-size: var(--t-body); font-style: italic; color: var(--fg-2); }
.ad-msg-label { font-size: var(--t-caption); text-transform: none; letter-spacing: .05em; color: var(--fg-4); font-weight: 600; margin: var(--s-4) 0 var(--s-tight); display: flex; align-items: center; gap: var(--s-1); }
.ad-msg-label svg { width: 12px; height: 12px; color: var(--blue); }
.ad-msg-empty { font-size: var(--t-body); color: var(--fg-3); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); }
.ad-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); flex-wrap: wrap; }
.ad-help { font-size: var(--t-small); color: var(--fg-3); line-height: 1.5; margin: 0; max-width: 62ch; }

/* ---------------- Relationships (curated) ---------------- */
.one-liner { font-size: var(--t-body); color: var(--fg-2); max-width: 300px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bkt { font-size: var(--t-small); color: var(--fg-2); }
.bkt small { color: var(--fg-4); }
.rel-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3) var(--s-4); }
.rel-form .field.full { grid-column: 1 / -1; }
.rel-form .note { font-size: var(--t-small); color: var(--fg-4); margin-top: var(--s-1); }
.rel-linkres { max-height: 200px; overflow-y: auto; }
.rel-linkopt { padding: var(--s-2) var(--s-snug); border: 1px solid var(--line); border-radius: 10px; margin-top: var(--s-tight); cursor: pointer; transition: background .12s var(--ease); }
.rel-linkopt:hover { background: var(--bg-2); border-color: var(--line-2); }
.rel-linked { display: flex; align-items: center; gap: var(--s-tight); font-size: var(--t-body); color: var(--green-soft); background: var(--tint-green); border-radius: 10px; padding: var(--s-2) var(--s-3); margin-top: var(--s-tight); }
.rel-linked svg { width: 14px; height: 14px; flex: none; }
.rel-linked .link-btn { margin-left: auto; }
@media (max-width: 680px) { .rel-form { grid-template-columns: 1fr; } }
.rel-form .input, .rel-form .select { width: 100%; min-width: 0; }

/* ---------------- Matching + Intros ---------------- */
.fm-target { margin-top: var(--s-1); padding: var(--s-3) var(--s-3); background: var(--tint-blue); border: 1px solid var(--line-2); border-radius: 12px; }
.fm-lbl { font-size: var(--t-caption); font-weight: 700; text-transform: none; letter-spacing: .05em; color: var(--fg-4); margin: var(--s-4) 0 var(--s-2); }
.cand-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-snug) var(--s-3); border: 1px solid var(--line); border-radius: 12px; margin-bottom: var(--s-2); }
.cand-row:hover { border-color: var(--sel-border); background: var(--card-2); }
.warm-n { font-weight: 700; color: var(--green); font-size: var(--t-emph); min-width: 26px; text-align: right; }
.intro-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); align-items: start; }
.icol { background: rgba(255,255,255,.5); border: 1px solid var(--line); border-radius: 14px; padding: var(--s-snug); min-height: 220px; }
:root[data-theme="dark"] .icol { background: rgba(255,255,255,.03); }
.icol-h { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-small); font-weight: 700; text-transform: none; letter-spacing: .05em; color: var(--fg-3); padding: var(--s-1) var(--s-tight) var(--s-snug); }
.idot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: var(--s-tight); }
.icard { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: var(--s-snug); margin-bottom: var(--s-snug); box-shadow: var(--shadow-card); cursor: pointer; transition: border-color .12s var(--ease); }
.icard:hover { border-color: var(--fg-4); }
.imeta { font-size: var(--t-caption); color: var(--fg-4); text-transform: none; letter-spacing: .04em; font-weight: 600; margin-bottom: var(--s-2); }
.icard .person { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-1) 0; }
.iarrow { color: var(--fg-4); font-size: var(--t-caption); margin: 1px 0 1px var(--s-6); }
.ifoot { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--t-caption); color: var(--fg-4); }
@media (max-width: 1100px) { .intro-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .intro-board { grid-template-columns: 1fr; } }

/* The "sharp-corner theme" that used to live here (`* { border-radius: 0 !important }`
   plus a re-rounding list for dots and avatars) is gone. It silently overrode every
   radius token in the app, so no card, button or input ever rendered the corners the
   tokens described. The circular indicators below used to depend on its exception
   list, so they keep an explicit pill radius here — a plain rule is enough now that
   nothing is fighting it. */
.assignee,
.c-stage-dot, .idot, .toast .t-dot,
.warm-dots .wd, .stage-tab .k-dot, .kcol-head .k-dot, .k-dot,
.convo.unread .c-name::before, .tl-item::before, .guide-num,
.switch-row input[type="checkbox"], .switch-row input[type="checkbox"]::after,
.atoggle input[type="checkbox"], .atoggle input[type="checkbox"]::after {
  border-radius: 999px;
}

/* ==========================================================================
   Type scale + layout utilities  (UI audit P2)
   Before this, pages set font-size inline in 15 different values (9 … 21px,
   including 9.5/10.5/11.5/12.5/13.5) across 12 files — so "small muted label"
   meant a different size on every screen and no global change was possible.
   These classes hold the CURRENT sizes exactly, so adopting them changes no
   pixels; collapsing the scale afterwards becomes a one-line edit here.
   The only deliberate change: 9px and 9.5px round up to 10px (below 10px is
   not comfortably legible).
   ========================================================================== */
.t-micro { font-size: var(--t-caption); }      /* was 9, 9.5, 10  */
.t-2xs   { font-size: var(--t-caption); }
.t-xs    { font-size: var(--t-small); }
.t-sm    { font-size: var(--t-small); }    /* most common size in the app */
.t-base  { font-size: var(--t-body); }
.t-md    { font-size: var(--t-body); }
.t-lg    { font-size: var(--t-emph); }      /* was 13, 13.5 */
.t-xl    { font-size: var(--t-title); }      /* was 14, 15   */
.t-2xl   { font-size: var(--t-head); }
.t-display { font-size: var(--t-lg); }
.t-display-lg { font-size: var(--t-xl); }

/* Weights, so "bold-ish" stops being an inline guess (400/650/750/780 were all in use). */
.fw-normal { font-weight: 400; }
.fw-med    { font-weight: 600; }
.fw-semi   { font-weight: 650; }
.fw-bold   { font-weight: 750; }

/* Layout utilities for the patterns repeated most often inline. */
.u-min0    { min-width: 0; }
.u-flex1   { flex: 1; }
.u-end     { justify-content: flex-end; }
.u-push    { margin-left: auto; }
.u-nowrap  { white-space: nowrap; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-tight); } .gap-3 { gap: var(--s-2); } .gap-4 { gap: var(--s-3); }

/* One canonical "label + number" stat card. The same idea previously existed as
   .rep-metric, .client-stats cells and ad-hoc .mini/.cards divs; those now inherit
   from this single definition instead of drifting apart. */
.stat, .rep-metric {
  padding: var(--s-4); border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--line-2);
}
.stat-v { font-weight: 700; font-size: var(--t-xl); color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-l { font-size: var(--t-caption); color: var(--fg-3); }

/* Semantic status colours: these tokens existed (--sc-positive etc.) but pages referenced
   them 0 times, using generic chip green/amber/red instead — so "green" meant different
   things on different screens. Chips now resolve THROUGH the semantic tokens (identical
   colours today), which makes the meaning explicit and changeable in one place. */
.chip.positive { background: var(--sc-tint-positive); color: var(--sc-positive); }
.chip.negative { background: var(--sc-tint-negative); color: var(--sc-negative); }
.chip.warm     { background: var(--sc-tint-warm);     color: var(--sc-warm); }
.chip.neutral  { background: var(--sc-tint-neutral);  color: var(--sc-neutral); }

/* ---------- Settings: readable measure ----------
   Configuration screens are prose plus small forms, not dashboards. Left
   full-width the explanatory paragraphs run past 150 characters, which is
   where reading accuracy falls off. Cards keep their own widths inside. */
.set-tab { max-width: 1100px; }

/* ---------- Page tabs row ----------
   KG Tasks separates three things the CRM had stacked in one bar: app chrome
   (search + global actions), the page's own tabs, and the page's filters.
   Given its own row the tab strip stops competing with the search box, and no
   tab gets clipped off the end. */
.pagetabs {
  flex: none;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5) 0;
}
.pagetabs:not([hidden]) + .content:not(.no-pad) { padding-top: var(--s-4); }
.pagetabs[hidden] { display: none; }
.pagetabs > .seg { max-width: 100%; }

/* Priority-queue window control + the out-of-window tail count. The queue is bounded on
   purpose, so the tail is stated as a number rather than allowed to fill the list. */
.na-list-title .prio-win { margin-left: auto; }
.prio-older {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3) 0; font-size: var(--t-caption);
}
.prio-older .btn-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--blue); font: inherit; font-weight: 600;
}
.prio-older .btn-link:hover { text-decoration: underline; }

/* ---------- Colour themes (Settings > Appearance). Zinc is the default and has no block. ---------- */
:root[data-accent="blue"] { --blue: #2563EB; --blue-hover: #1D4ED8; --blue-active: #1D4ED8; --blue-ink: #1D4ED8; --on-blue: #FFFFFF; --tint-blue: #EFF6FF; --accent: #2563EB; --accent-ink: #1D4ED8; --accent-tint: #EFF6FF; --accent-line: #BFDBFE; }
:root[data-theme="dark"][data-accent="blue"] { --blue: #60A5FA; --blue-hover: #93C5FD; --blue-active: #93C5FD; --blue-ink: #93C5FD; --on-blue: #09090B; --tint-blue: color-mix(in srgb, #60A5FA 16%, transparent); --accent: #60A5FA; --accent-ink: #93C5FD; --accent-tint: color-mix(in srgb, #60A5FA 16%, transparent); --accent-line: color-mix(in srgb, #60A5FA 40%, transparent); }
:root[data-accent="indigo"] { --blue: #4F46E5; --blue-hover: #4338CA; --blue-active: #4338CA; --blue-ink: #4338CA; --on-blue: #FFFFFF; --tint-blue: #EEF2FF; --accent: #4F46E5; --accent-ink: #4338CA; --accent-tint: #EEF2FF; --accent-line: #C7D2FE; }
:root[data-theme="dark"][data-accent="indigo"] { --blue: #818CF8; --blue-hover: #A5B4FC; --blue-active: #A5B4FC; --blue-ink: #A5B4FC; --on-blue: #09090B; --tint-blue: color-mix(in srgb, #818CF8 16%, transparent); --accent: #818CF8; --accent-ink: #A5B4FC; --accent-tint: color-mix(in srgb, #818CF8 16%, transparent); --accent-line: color-mix(in srgb, #818CF8 40%, transparent); }
:root[data-accent="violet"] { --blue: #7C3AED; --blue-hover: #6D28D9; --blue-active: #6D28D9; --blue-ink: #6D28D9; --on-blue: #FFFFFF; --tint-blue: #F5F3FF; --accent: #7C3AED; --accent-ink: #6D28D9; --accent-tint: #F5F3FF; --accent-line: #DDD6FE; }
:root[data-theme="dark"][data-accent="violet"] { --blue: #A78BFA; --blue-hover: #C4B5FD; --blue-active: #C4B5FD; --blue-ink: #C4B5FD; --on-blue: #09090B; --tint-blue: color-mix(in srgb, #A78BFA 16%, transparent); --accent: #A78BFA; --accent-ink: #C4B5FD; --accent-tint: color-mix(in srgb, #A78BFA 16%, transparent); --accent-line: color-mix(in srgb, #A78BFA 40%, transparent); }
:root[data-accent="emerald"] { --blue: #059669; --blue-hover: #047857; --blue-active: #047857; --blue-ink: #047857; --on-blue: #FFFFFF; --tint-blue: #ECFDF5; --accent: #059669; --accent-ink: #047857; --accent-tint: #ECFDF5; --accent-line: #A7F3D0; }
:root[data-theme="dark"][data-accent="emerald"] { --blue: #34D399; --blue-hover: #6EE7B7; --blue-active: #6EE7B7; --blue-ink: #6EE7B7; --on-blue: #09090B; --tint-blue: color-mix(in srgb, #34D399 16%, transparent); --accent: #34D399; --accent-ink: #6EE7B7; --accent-tint: color-mix(in srgb, #34D399 16%, transparent); --accent-line: color-mix(in srgb, #34D399 40%, transparent); }
:root[data-accent="teal"] { --blue: #0D9488; --blue-hover: #0F766E; --blue-active: #0F766E; --blue-ink: #0F766E; --on-blue: #FFFFFF; --tint-blue: #F0FDFA; --accent: #0D9488; --accent-ink: #0F766E; --accent-tint: #F0FDFA; --accent-line: #99F6E4; }
:root[data-theme="dark"][data-accent="teal"] { --blue: #2DD4BF; --blue-hover: #5EEAD4; --blue-active: #5EEAD4; --blue-ink: #5EEAD4; --on-blue: #09090B; --tint-blue: color-mix(in srgb, #2DD4BF 16%, transparent); --accent: #2DD4BF; --accent-ink: #5EEAD4; --accent-tint: color-mix(in srgb, #2DD4BF 16%, transparent); --accent-line: color-mix(in srgb, #2DD4BF 40%, transparent); }
:root[data-accent="orange"] { --blue: #EA580C; --blue-hover: #C2410C; --blue-active: #C2410C; --blue-ink: #C2410C; --on-blue: #FFFFFF; --tint-blue: #FFF7ED; --accent: #EA580C; --accent-ink: #C2410C; --accent-tint: #FFF7ED; --accent-line: #FED7AA; }
:root[data-theme="dark"][data-accent="orange"] { --blue: #FB923C; --blue-hover: #FDBA74; --blue-active: #FDBA74; --blue-ink: #FDBA74; --on-blue: #09090B; --tint-blue: color-mix(in srgb, #FB923C 16%, transparent); --accent: #FB923C; --accent-ink: #FDBA74; --accent-tint: color-mix(in srgb, #FB923C 16%, transparent); --accent-line: color-mix(in srgb, #FB923C 40%, transparent); }
:root[data-accent="rose"] { --blue: #E11D48; --blue-hover: #BE123C; --blue-active: #BE123C; --blue-ink: #BE123C; --on-blue: #FFFFFF; --tint-blue: #FFF1F2; --accent: #E11D48; --accent-ink: #BE123C; --accent-tint: #FFF1F2; --accent-line: #FECDD3; }
:root[data-theme="dark"][data-accent="rose"] { --blue: #FB7185; --blue-hover: #FDA4AF; --blue-active: #FDA4AF; --blue-ink: #FDA4AF; --on-blue: #09090B; --tint-blue: color-mix(in srgb, #FB7185 16%, transparent); --accent: #FB7185; --accent-ink: #FDA4AF; --accent-tint: color-mix(in srgb, #FB7185 16%, transparent); --accent-line: color-mix(in srgb, #FB7185 40%, transparent); }
/* Appearance pickers */
.font-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.font-opt { display: flex; align-items: baseline; gap: var(--s-2); height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--card); color: var(--fg); cursor: pointer; text-align: left; overflow: hidden; }
.font-opt .fo-aa { font-size: var(--t-head); font-weight: 600; flex: none; }
.font-opt .fo-name { font-size: var(--t-body); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-opt:hover { border-color: var(--fg-4); }
.font-opt.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.accent-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.accent-opt { width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; padding: 0; }
.accent-opt.active { box-shadow: 0 0 0 2px var(--fg); }
.font-opt:focus-visible, .accent-opt:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.ap-label { font-size: var(--t-small); font-weight: 550; color: var(--fg-3); margin: var(--s-4) 0 var(--s-2); }
.rel-side-pick { display: inline-flex; align-items: center; gap: var(--s-1); }

/* Overflow guards, app-wide. Grid and flex children default to min-width:auto, so one long
   unbreakable label (a sync resource id, an email, a URL) widens its track and pushes the
   whole row out of its card. Letting them shrink keeps every grid inside its container. */
[class*="-grid"] > *, .grid-2 > *, .stack > *, .card { min-width: 0; }
.row > :not(.btn):not(.seg):not(.chip), .filterbar > :not(.btn):not(.seg) { min-width: 0; }
.st { max-width: 100%; }
.stage-tabs.flush { padding: 0; }
.ctx-tbl td { vertical-align: top; }
/* Every column but the lead is centred, cells and headings alike. */
.ctx-tbl td:not(:first-child), .ctx-tbl th:not(:first-child) { text-align: center; }
.ctx-tbl td:first-child, .ctx-tbl td:nth-child(3), .ctx-tbl td:nth-child(6), .ctx-tbl td:nth-child(7) { max-width: 220px; }
.ctx-tbl .ctx-tags { justify-content: center; margin-top: 0; }
.ctx-row { cursor: pointer; }
.ctx-row:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.ctx-tags { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-1); }
.ctx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: var(--s-tight); vertical-align: middle; }
.ctx-task { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-tight) 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.ctx-task-t { flex: 1; min-width: 0; color: var(--fg); }
.ctx-task.done .ctx-task-t { color: var(--fg-4); text-decoration: line-through; }
#ctxBody.is-loading { opacity: .55; transition: opacity .15s var(--ease); }
.metric-grid.autom-stats6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 1200px) { .metric-grid.autom-stats6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .metric-grid.autom-stats6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.autom-qcard { text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.autom-qcard:hover { border-color: var(--fg-4); }
.autom-qcard.on { border-color: var(--fg); }
.autom-qcard:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.autom-sched td, .autom-calls td { vertical-align: top; }
.autom-msgcell { min-width: 220px; max-width: 360px; text-align: left; }
.autom-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.autom-quote { max-width: 340px; color: var(--fg-2); font-style: italic; text-align: left; }
.autom-sched td:first-child, .autom-calls td:first-child { max-width: 200px; }
.autom-filters .select.sm { width: auto; min-width: 140px; }

/* Plan banner (70% of replies, over, or capped) */
.plan-banner { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) var(--s-5) 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-card); border: 1px solid var(--line-2); background: var(--card); }
.plan-banner[hidden] { display: none; }
.plan-banner.warn { background: var(--tint-amber); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.plan-banner.bad { background: var(--tint-red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.plan-banner .pb-ic { display: inline-flex; width: 18px; height: 18px; flex: none; color: var(--amber); }
.plan-banner.bad .pb-ic { color: var(--red); }
.plan-banner .pb-ic svg { width: 18px; height: 18px; }
.plan-banner .pb-msg { flex: 1; min-width: 0; color: var(--fg); font-size: var(--t-body); }
@media (max-width: 640px) { .plan-banner { margin: var(--s-2) var(--s-4) 0; flex-wrap: wrap; } }
.plan-meter { display: block; height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin-top: var(--s-tight); }
.plan-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--blue); transition: width .3s var(--ease); }
.plan-meter.warn > span { background: var(--amber); }
.plan-meter.bad > span { background: var(--red); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: var(--s-3); }
.plan-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--card); min-width: 0; }
.plan-card.rec { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.plan-card.cur { background: var(--bg-2); }
.plan-act { margin-top: auto; padding-top: var(--s-2); }
.plan-act .btn { width: 100%; justify-content: center; }
.plan-cur { align-self: flex-start; }
.plan-price { font-size: var(--t-xl); font-weight: 700; color: var(--fg); }
.plan-list { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-body); flex: 1; }
/* Setup guide */
#onbSlot { padding: 0 var(--s-2) var(--s-2); }
.onb-pill { display: flex; flex-direction: column; width: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--card); text-align: left; cursor: pointer; }
.onb-pill:hover { border-color: var(--fg-4); }
.onb-pill-top { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-body); font-weight: 550; color: var(--fg); }
.sidebar.collapsed #onbSlot { display: none; }
.onb-list { display: flex; flex-direction: column; }
.onb-step { padding: var(--s-snug) 0; border-bottom: 1px solid var(--line); }
.onb-step-head { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.onb-step.done .onb-step-head { cursor: default; }
.onb-step-head .onb-title { flex: 1; min-width: 0; }
.onb-n { font-size: var(--t-micro); font-weight: 600; color: var(--fg-3); }
.onb-step.open .onb-check { border-color: var(--fg); }
.onb-step.open .onb-n { color: var(--fg); }
.onb-step-body { margin: var(--s-2) 0 var(--s-1) calc(20px + var(--s-3)); font-size: var(--t-body); color: var(--fg-2); }
.onb-tip { padding: var(--s-2) var(--s-3); border-left: 2px solid var(--blue); background: var(--bg-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
/* Signup questions: full screen, cannot be closed. */
.overlay.onb-full { align-items: flex-start; overflow-y: auto; padding: var(--s-6) var(--s-4); }
.onb-profile { width: 100%; max-width: 560px; margin: auto; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-float); }
.onb-profile h2 { margin: 0 0 var(--s-1); font-size: var(--t-head); }
.onb-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-3); }
.onb-form > .field:has(.onb-chips) { grid-column: 1 / -1; }
.onb-chips { display: flex; flex-wrap: wrap; gap: var(--s-tight); }
.onb-chip { display: inline-flex; align-items: center; gap: var(--s-tight); padding: var(--s-1) var(--s-2); border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; font-size: var(--t-body); }
.onb-chip:has(input:checked) { border-color: var(--fg); background: var(--bg-2); }
@media (max-width: 620px) { .onb-form { grid-template-columns: 1fr; } .onb-profile { padding: var(--s-4); } }
/* "Step 6 of 10" across the top of the page a setup step sent you to. */
.onb-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); background: var(--bg-2); font-size: var(--t-body); }
.onb-bar[hidden] { display: none; }
.onb-bar-msg { flex: 1; min-width: 0; }
.onb-bar-ic { width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: #FFFFFF; flex: none; }
.onb-bar-ic svg { width: 11px; height: 11px; }
.onb-step:last-child { border-bottom: 0; }
.onb-check { width: 20px; height: 20px; flex: none; border-radius: 999px; border: 1.5px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: var(--on-blue); }
.onb-check svg { width: 12px; height: 12px; }
.onb-step.done .onb-check { background: var(--green); border-color: var(--green); color: #FFFFFF; }
.onb-step.next .onb-check { border-color: var(--fg); }
.onb-title { font-weight: 550; color: var(--fg); }
.onb-step.done .onb-title, .onb-step.skipped .onb-title { color: var(--fg-4); }
.onb-step.done .onb-title { text-decoration: line-through; }

/* Automations tables: fixed columns so nothing wraps one word per line */
.sec-tools { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: 0 var(--s-4) var(--s-3); }
.sec-tools .select.sm { width: auto; min-width: 150px; max-width: 240px; }
.autom-tbl2 { table-layout: fixed; min-width: 860px; }
.autom-tbl2 td { vertical-align: top; }
.autom-tbl2 col.c-who { width: 200px; }
.autom-tbl2 col.c-phone { width: 140px; }
.autom-tbl2 col.c-camp { width: 190px; }
.autom-tbl2 col.c-when { width: 90px; }
.autom-tbl2 col.c-step { width: 170px; }
.autom-tbl2 col.c-due { width: 110px; }
.autom-tbl2 col.c-act { width: 128px; }
.autom-tbl2 th, .autom-tbl2 td { text-align: left; }
.autom-tbl2 .autom-who { font-weight: 600; color: var(--fg); }
.autom-subj { font-weight: 550; color: var(--fg); }
.autom-said { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); }
.autom-goal { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.autom-flag { margin-top: var(--s-1); }
.autom-phone { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 550; }
.autom-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1); flex-wrap: nowrap; }
.autom-tbl2 .nowrap { white-space: nowrap; }
/* Approve meetings */
.bk-setup { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); border-radius: var(--r-card); background: var(--tint-amber); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); color: var(--fg); }
.bk-setup > svg { width: 18px; height: 18px; flex: none; color: var(--amber); }
.bk-camp { margin-top: var(--s-hair); }
.bk-why { margin-top: var(--s-2); font-size: var(--t-body); color: var(--fg-2); padding-left: var(--s-2); border-left: 2px solid var(--line-2); }
.bk-why.warn { border-left-color: var(--amber); }
.pt-slots { display: flex; flex-direction: column; gap: var(--s-tight); margin-top: var(--s-2); }
.pt-slot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.pt-slot:hover { border-color: var(--line-2); }
.pt-slot:has(input:not(:checked)) { opacity: .55; }
@media (max-width: 620px) { .pt-slot { grid-template-columns: auto 1fr; } .pt-slot > .t-sub { grid-column: 2; } }
.bk-why.bad { border-left-color: var(--red); }

/* Settings: grouped side menu */
.set-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.set-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--s-hair); }
.set-nav-g { font-size: var(--t-small); font-weight: 550; color: var(--fg-4); padding: var(--s-3) var(--s-2) var(--s-1); }
.set-nav-g:first-child { padding-top: 0; }
.set-nav button { text-align: left; height: 32px; padding: 0 var(--s-2); border-radius: var(--r-btn); color: var(--fg-2); font-size: var(--t-body); }
.set-nav button:hover { background: var(--bg-2); color: var(--fg); }
.set-nav button.active { background: var(--card); color: var(--fg); font-weight: 550; box-shadow: var(--shadow-card); border: 1px solid var(--line-2); }
.set-nav button:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
@media (max-width: 860px) {
  .set-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .set-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .set-nav-g { display: none; }
  .set-nav button { flex: none; }
}
.sync-sum { display: flex; align-items: center; gap: var(--s-2); }
.plan-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--s-2) var(--s-4); }
.plan-feats li { display: flex; align-items: center; gap: var(--s-2); color: var(--fg); }
.plan-feats li.off { color: var(--fg-4); }
.plan-feats .pf-ic { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--tint-green); color: var(--green); }
.plan-feats li.off .pf-ic { background: var(--bg-2); color: var(--fg-4); }
.plan-feats .pf-ic svg { width: 11px; height: 11px; }
.ws-logo { width: 64px; height: 64px; flex: none; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; }
.ws-logo img { width: 100%; height: 100%; object-fit: contain; }
.ws-logo span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-weight: 700; font-size: var(--t-lg); }
.ws-color { width: 40px; height: 28px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: none; }
.cal-card { margin-bottom: var(--s-4); }
#onbSlot { margin-top: var(--s-4); }
.font-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
.font-opt { height: 34px; }

/* Any inline icon without a size of its own takes the size of the text around it. A bare
   svg otherwise fills its container, which is how a status line rendered a page-wide icon.
   :where() keeps this at zero specificity so every sized icon rule still wins. */
:where(svg[viewBox="0 0 24 24"]) { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
/* Row actions never squeeze a button narrower than its label. */
.autom-acts > *, .row-actions > * { flex: none; }
.autom-tbl2 col.c-act { width: 176px; }

/* Read-only client shares */
.plan-banner.viewer-bar { background: transparent; border: 0; padding: 0; margin-bottom: 0; gap: var(--s-2); color: var(--fg-3); }
.plan-banner.viewer-bar .pb-msg { color: var(--fg-3); font-size: var(--t-small); }
.plan-banner.viewer-bar .pb-ic { color: var(--fg-4); width: 14px; height: 14px; }
.plan-banner.viewer-bar .pb-ic svg { width: 14px; height: 14px; }
.share-checks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.share-check { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--fg); }
.share-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.share-row:last-child { border-bottom: 0; }
.share-row.off { opacity: .6; }
.share-pages { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-1) 0; }
.share-edit { flex-basis: 100%; padding: var(--s-3); border-radius: var(--r-btn); background: var(--bg-2); }
/* The inbox route renders edge to edge (content.no-pad), so the viewer brings its own
   page padding, and each pane scrolls on its own instead of the whole page. */
.vw-inbox { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) var(--s-5) var(--s-5); }
.vw-list, .vw-thread { min-height: 0; overflow-y: auto; }
@media (max-width: 860px) { .vw-inbox { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; overflow-y: auto; padding: var(--s-3) var(--s-4); } .vw-list, .vw-thread { overflow: visible; } }
.vw-list { overflow-x: hidden; }
.vw-list-head { position: sticky; top: 0; z-index: 1; background: var(--card); padding: var(--s-3); border-bottom: 1px solid var(--line); }
.vw-row { display: block; width: 100%; text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--line); }
.vw-row:hover { background: var(--row-hover); }
.vw-row.active { background: var(--sel-tint); }
.vw-row:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.vw-subj { color: var(--fg); font-size: var(--t-body); }
.vw-thread { padding: var(--s-4); min-height: 320px; }
.vw-thread-head { padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.vw-msgs { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
.vw-msg { padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--card); }
.vw-msg.out { background: var(--bg-2); }
.vw-body { margin-top: var(--s-2); color: var(--fg-2); overflow-wrap: anywhere; }
.vw-body img { max-width: 100%; height: auto; }

/* File inputs live inside a button-styled label. */
label.btn { cursor: pointer; }
label.btn input[type="file"] { display: none; }

/* ---------- Audit pass 2026-10-22 ---------- */
/* Small inputs really are 28px: the 32px input rule outranked .input.sm. */
input.input.sm:not([type="color"]):not([type="checkbox"]):not([type="radio"]) { height: 28px; }
/* A button is never squeezed below its label (overflow:hidden let flex shrink it to 0). */
.btn { flex-shrink: 0; }
.btn.icon.xs { width: 24px; }
/* A small segmented control matches a small button. */
.seg.sm button { height: 24px; }
/* Long chips truncate instead of running out of their column. */
.chip { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.convo .c-top .c-tag { flex: 0 1 auto; min-width: 0; }
/* Key/value rows: a long key truncates, the value with its controls stays visible. */
.kv .k.ellipsis, .kv.reminder .k { flex: 0 1 auto; min-width: 0; }
.kv .v:has(button), .kv .v:has(.btn) { flex: none; }
/* Help text inside a switch row is body weight, not the row label's semi-bold. */
.switch-row .muted, .switch-row .t-sub, .switch-row .t-sm { font-weight: 400; }
/* Utilities pages already use. */
.nowrap { white-space: nowrap; }
.mt4 { margin-top: var(--s-1); }
/* Composer: one control height across the toolbar and the send row. */
.composer-tools .post-send { height: 28px; }
/* Page tab rows wrap on phones instead of clipping their buttons. */
@media (max-width: 860px) { .pagetabs { padding: var(--s-3) var(--s-4) 0; flex-wrap: wrap; } }

/* Login: workspace picker */
.auth-pick { display: flex; flex-direction: column; gap: var(--s-2); }
.auth-ws { width: 100%; justify-content: flex-start; height: 40px; }
/* Support session bar */
.imp-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: var(--fg); color: var(--bg); font-size: var(--t-body); }
.imp-bar .btn { background: var(--bg); color: var(--fg); border-color: transparent; }
/* Admin console */
.adm-tbl td { vertical-align: top; }
.adm-tbl td:first-child { max-width: 260px; }
.adm-audit .kv { align-items: flex-start; }
/* Sequencer types */
.seq-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--s-2); }
.seq-type { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-hair); padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--card); text-align: left; }
.seq-type:hover { border-color: var(--fg-4); }
.seq-type.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.seq-type:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* Admin: one workspace */
.adm-row { cursor: pointer; }
.adm-row:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.acc-page { max-width: 1100px; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--s-2) var(--s-4); }
.acc-months { display: flex; flex-direction: column; gap: var(--s-2); }
.acc-month { display: grid; grid-template-columns: 72px 1fr 56px; align-items: center; gap: var(--s-3); }
.acc-month .plan-meter { margin-top: 0; }
.acc-month b { text-align: right; font-variant-numeric: tabular-nums; }
.acc-danger { border-color: color-mix(in srgb, var(--red) 35%, transparent); }

/* ---------- Glass ----------
   A soft colour field sits behind the app and every surface (sidebar, topbar, cards,
   modals, menus) is frosted glass over it. Text stays on near-opaque glass so contrast
   holds; anyone who asks the OS for less transparency gets solid surfaces. */
:root {
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-blur: blur(18px) saturate(160%);
  --app-field:
    radial-gradient(42% 38% at 8% 4%, rgba(232, 121, 249, 0.16), transparent 70%),
    radial-gradient(38% 34% at 96% 10%, rgba(96, 165, 250, 0.16), transparent 70%),
    radial-gradient(46% 40% at 78% 98%, rgba(251, 146, 60, 0.13), transparent 70%),
    radial-gradient(40% 36% at 20% 92%, rgba(52, 211, 153, 0.10), transparent 70%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --glass-bg: rgba(24, 24, 27, 0.58); --glass-strong: rgba(24, 24, 27, 0.78); --glass-edge: rgba(255, 255, 255, 0.08);
  --app-field: radial-gradient(42% 38% at 8% 4%, rgba(232, 121, 249, 0.12), transparent 70%),
    radial-gradient(38% 34% at 96% 10%, rgba(96, 165, 250, 0.12), transparent 70%),
    radial-gradient(46% 40% at 78% 98%, rgba(251, 146, 60, 0.09), transparent 70%); } }
:root[data-theme="dark"] {
  --glass-bg: rgba(24, 24, 27, 0.58); --glass-strong: rgba(24, 24, 27, 0.78); --glass-edge: rgba(255, 255, 255, 0.08);
  --app-field: radial-gradient(42% 38% at 8% 4%, rgba(232, 121, 249, 0.12), transparent 70%),
    radial-gradient(38% 34% at 96% 10%, rgba(96, 165, 250, 0.12), transparent 70%),
    radial-gradient(46% 40% at 78% 98%, rgba(251, 146, 60, 0.09), transparent 70%);
}
.aurora { background: var(--app-field), var(--app-bg); }
body:not(.no-glass) .card, body:not(.no-glass) .stat-strip, body:not(.no-glass) .topbar,
body:not(.no-glass) .sidebar, body:not(.no-glass) .pagetabs .seg, body:not(.no-glass) .stage-tabs .stage-tab.active,
body:not(.no-glass) .onb-pill, body:not(.no-glass) .plan-banner:not(.viewer-bar) {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
body:not(.no-glass) .card, body:not(.no-glass) .stat-strip { box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-card); }
/* Overlays read best a little more opaque. */
body:not(.no-glass) .modal, body:not(.no-glass) .drawer, body:not(.no-glass) .menu-modal {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* Sticky table headers and the inbox panes stay legible over what scrolls beneath. */
body:not(.no-glass) .tbl th { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
/* Cards inside cards do not stack a second frost. */
body:not(.no-glass) .card .card { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
@media (prefers-reduced-transparency: reduce) {
  .card, .stat-strip, .topbar, .sidebar, .modal, .drawer, .menu-modal, .tbl th, .pagetabs .seg { background: var(--card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
body.no-glass .aurora { background: var(--app-bg); }

/* ---------- Layout breathing room, sidebar edge ---------- */
.sidebar { border-right: 1px solid var(--line-2); }
/* Pages sit in a centred column on wide screens and always end with space below. */
.content:not(.no-pad) > .page-enter { max-width: 1440px; margin-inline: auto; }
.content:not(.no-pad) > .page-enter::after { content: ""; display: block; height: var(--s-6); }

/* ---------- Glass, dark mode and tables ---------- */
:root[data-theme="dark"] {
  --glass-bg: rgba(24, 24, 27, 0.52); --glass-strong: rgba(24, 24, 27, 0.74); --glass-edge: rgba(255, 255, 255, 0.07);
}
/* Tables are glass too: the body rows are clear so the card's frost shows through,
   hover is a light wash, and a table outside a card gets its own glass panel. */
body:not(.no-glass) .tbl td { background: transparent; }
body:not(.no-glass) .tbl tbody tr:hover td { background: color-mix(in srgb, var(--fg) 4%, transparent); }
body:not(.no-glass) .table-wrap:not(.card .table-wrap):not(.card.table-wrap) {
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line-2); border-radius: var(--r-card);
}

/* ---------- Background grid ----------
   Hairline grid faded toward the edges, a scatter of faintly lit cells breathing slowly,
   and a few tiny envelopes gliding along grid lines that end in a soft pulse. All very
   low opacity so text contrast is untouched. */
.grid-bg { position: absolute; inset: 0; overflow: hidden;
  --gl: color-mix(in srgb, var(--fg) 6%, transparent);
  background-image: linear-gradient(var(--gl) 1px, transparent 1px), linear-gradient(90deg, var(--gl) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 100%); }
:root[data-theme="dark"] .grid-bg { --gl: color-mix(in srgb, var(--fg) 7%, transparent); }
.gb-cell { position: absolute; width: 44px; height: 44px; background: color-mix(in srgb, var(--fg) 3.5%, transparent);
  animation: gb-breathe 14s ease-in-out infinite; }
.gb-cell.big { width: 88px; height: 44px; background: color-mix(in srgb, #f472b6 6%, transparent); }
@keyframes gb-breathe { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.gb-send { position: absolute; width: 0; height: 0; animation: gb-h linear infinite; }
.gb-send.v { animation-name: gb-v; }
.gb-send i { position: absolute; left: -5px; top: -4px; width: 10px; height: 7px; border-radius: 2px;
  border: 1px solid color-mix(in srgb, #f472b6 70%, transparent); background: color-mix(in srgb, #f472b6 18%, var(--app-bg));
  box-shadow: 0 0 8px color-mix(in srgb, #f472b6 45%, transparent); }
.gb-send i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  clip-path: polygon(0 0, 50% 100%, 100% 0); background: color-mix(in srgb, #f472b6 55%, transparent); }   /* the envelope flap */
.gb-send:nth-child(3n+1) i { border-color: color-mix(in srgb, #60a5fa 70%, transparent); background: color-mix(in srgb, #60a5fa 18%, var(--app-bg)); box-shadow: 0 0 8px color-mix(in srgb, #60a5fa 45%, transparent); }
.gb-send:nth-child(3n+1) i::after { background: color-mix(in srgb, #60a5fa 40%, transparent); }
.gb-send:nth-child(3n) i { border-color: color-mix(in srgb, #34d399 70%, transparent); background: color-mix(in srgb, #34d399 18%, var(--app-bg)); box-shadow: 0 0 8px color-mix(in srgb, #34d399 45%, transparent); }
.gb-send:nth-child(3n) i::after { background: color-mix(in srgb, #34d399 40%, transparent); }
/* Travel, then a short landing pulse, then a pause before the next send. */
@keyframes gb-h { 0% { transform: translateX(0); opacity: 0; } 4% { opacity: .9; } 60% { transform: translateX(var(--len)); opacity: .9; }
  64% { transform: translateX(var(--len)) scale(1.8); opacity: 0; } 100% { transform: translateX(var(--len)); opacity: 0; } }
@keyframes gb-v { 0% { transform: translateY(0); opacity: 0; } 4% { opacity: .9; } 60% { transform: translateY(var(--len)); opacity: .9; }
  64% { transform: translateY(var(--len)) scale(1.8); opacity: 0; } 100% { transform: translateY(var(--len)); opacity: 0; } }
body.no-glass .grid-bg { display: none; }
@media (prefers-reduced-motion: reduce) { .gb-cell, .gb-send { animation: none; } .gb-send { display: none; } }

/* ---------- Table headers: larger, with a visible frame ---------- */
.tbl th { font-size: var(--t-body); font-weight: 600; color: var(--fg-2); padding: var(--s-snug) var(--s-3);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.tbl th + th { border-left: 1px solid var(--line); }
.card > .table-wrap .tbl th, .card.table-wrap .tbl th { border-top: 0; }
:root[data-density="compact"] .tbl th { padding: var(--s-2) var(--s-3); }

/* ---------- Resizable table columns ---------- */
.tbl th { position: sticky; }
.col-grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 3; touch-action: none; }
.col-grip::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 3px; width: 1px; background: var(--line-2); opacity: 0; transition: opacity .12s var(--ease); }
.tbl th:hover .col-grip::after, .col-grip.dragging::after { opacity: 1; background: var(--fg-4); }
body.col-resizing { cursor: col-resize; user-select: none; }
.tbl.cols-fixed { table-layout: fixed; }
.tbl.cols-fixed td, .tbl.cols-fixed th { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Light mode contrast ----------
   The canvas was the same near-white as the cards, so surfaces blurred together and the
   grey text was faint. The canvas now sits a step darker, cards stay white with a crisp
   edge, and secondary text is darker. Dark mode is untouched. */
:root:not([data-theme="dark"]) {
  --bg: #F4F4F5; --bg-1: #F1F1F3; --app-bg: #EEEEF1; --card-2: #F7F7F8;
  --line: #E8E8EB; --line-2: #D4D4D8;
  --fg-2: #27272A; --fg-3: #52525B; --fg-4: #71717A;
  --glass-bg: rgba(255, 255, 255, 0.84); --glass-strong: rgba(255, 255, 255, 0.94); --glass-edge: rgba(255, 255, 255, 0.9);
  --shadow-card: 0 1px 2px rgba(9, 9, 11, 0.06), 0 1px 1px rgba(9, 9, 11, 0.03);
  --r-card: 12px;
}
:root:not([data-theme="dark"]) .grid-bg { --gl: color-mix(in srgb, var(--fg) 7%, transparent); }
:root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .stat-strip { border-color: var(--line-2); }
:root:not([data-theme="dark"]) body:not(.no-glass) .tbl th { background: color-mix(in srgb, var(--bg-2) 92%, transparent); color: var(--fg-2); }
:root:not([data-theme="dark"]) .tbl td { border-bottom-color: var(--line); }
:root:not([data-theme="dark"]) .input, :root:not([data-theme="dark"]) .select { border-color: var(--line-2); background: #FFFFFF; }
:root:not([data-theme="dark"]) .sidebar { border-right-color: var(--line-2); }

/* ---------- Top chrome and sticky table headers ----------
   The tab row under the title had no surface of its own, so content scrolling up met it
   edge to edge and the two read as one. It is now part of the top chrome: the same glass
   as the topbar, a hairline below, and room underneath before the page starts. */
.pagetabs:not([hidden]) {
  padding-bottom: var(--s-3);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 4;
}
.topbar { position: relative; z-index: 5; }
/* Headers stick while a long table scrolls. A table box that scrolls sideways is also
   its own vertical scroll box, so the header can only stick inside it: tables on a page
   get a height cap (most of the screen) and scroll inside, header pinned on top. */
.content .table-wrap { max-height: calc(100dvh - 210px); overflow: auto; }
.content .table-wrap .tbl thead th { position: sticky; top: 0; z-index: 2; }
.content .table-wrap .tbl thead th .col-grip { z-index: 3; }

/* ---------- Pipeline: the table card is the scroller ----------
   Tabs and notes stay put above; the card fills the rest and scrolls inside itself with
   its header pinned, so rows never slide up into the notes or lose the header. */
.pipe-notes { display: flex; flex-direction: column; gap: var(--s-hair); padding: 0 var(--s-5) var(--s-3); }
.pipe-notes:empty { display: none; }
.pipe-notes .pipe-note { margin: 0; }
.pipe-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--s-5) var(--s-5); }
.content .pipe-scroll .pipe-card { flex: 1; min-height: 0; max-height: none; overflow: auto; }

/* ---------- Smoothness ----------
   Background blur is the costly part of glass: every blurred surface is recomputed each
   time anything moves beneath it. Blur now stays on the few chrome surfaces (sidebar,
   topbar, tab row, dialogs); cards, strips and table headers use a near-opaque glass tint
   with no blur, which looks the same over a quiet background and costs nothing. The lit
   grid cells no longer animate; only the six small sends move. Page entry is a quick fade. */
body:not(.no-glass) .card, body:not(.no-glass) .stat-strip, body:not(.no-glass) .tbl th,
body:not(.no-glass) .pagetabs .seg, body:not(.no-glass) .stage-tabs .stage-tab.active,
body:not(.no-glass) .onb-pill, body:not(.no-glass) .table-wrap:not(.card .table-wrap):not(.card.table-wrap) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body:not(.no-glass) .card, body:not(.no-glass) .stat-strip { background: var(--glass-strong); }
.gb-cell { animation: none; opacity: .7; }
.gb-send { will-change: transform, opacity; }
.page-enter { animation: page-in .16s ease-out; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* Booking autopilot status line (Approve meetings) */
.bk-auto { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); border-radius: var(--r-card);
  background: var(--tint-green); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); color: var(--fg); }
.bk-auto > svg { width: 16px; height: 16px; flex: none; color: var(--green); }
.bk-auto > div { flex: 1; }
.oc-stats { margin-bottom: var(--s-3); }
/* Interested leads waiting on a reply (Unibox head, Analytics overview). */
.wait-strip { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-left: 2px solid var(--amber); border-radius: var(--r-sm);
  background: var(--tint-amber); font-size: var(--t-body); margin: var(--s-2) 0; }
.wait-strip.bad { border-left-color: var(--red); background: var(--tint-red); }
.wait-strip > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--amber); }
.wait-strip.bad > svg { color: var(--red); }
.wait-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-hair); }
.wait-names { display: flex; flex-wrap: wrap; gap: var(--s-tight) var(--s-3); }
.wait-names a { color: var(--fg); text-decoration: none; }
.wait-names a:hover { text-decoration: underline; }
/* Mailboxes, Needs attention. */
.mb-alerts { padding-bottom: var(--s-1); }
.mb-alert { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--line); border-left: 2px solid var(--amber); }
.mb-alert.bad { border-left-color: var(--red); }
.mb-alert-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--s-hair); }
@media (max-width: 620px) { .mb-alert { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .as-logo { animation: none; } }
/* ---------- Plans and billing page ---------- */
.pl-page { max-width: 1120px; margin: 0 auto; width: 100%; }
.pl-now { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto; gap: var(--s-5); align-items: center; padding: var(--s-4) var(--s-5); }
.pl-now-main { display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; }
.pl-now-name { font-size: var(--t-xl); font-weight: 700; color: var(--fg); letter-spacing: -0.01em; }
.pl-now-price { font-size: var(--t-body); font-weight: 500; color: var(--fg-3); margin-left: var(--s-1); }
.pl-now-use { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center; }
.pl-now-use > .row, .pl-now-use > .plan-meter { flex-basis: 100%; }
.pl-lim { text-transform: none; }
.pl-now-act { display: flex; flex-direction: column; gap: var(--s-2); align-items: stretch; }
@media (max-width: 860px) { .pl-now { grid-template-columns: 1fr; } .pl-now-act { flex-direction: row; } }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s-4); align-items: stretch; }
.pl-card { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-card); min-width: 0; }
.pl-card.rec { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg), var(--shadow-float); }
.pl-card.cur { background: var(--bg-2); }
.pl-badge { position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-5); padding: var(--s-hair) var(--s-2); border-radius: 999px; background: var(--fg); color: var(--bg-1); font-size: var(--t-small); font-weight: 650; }
.pl-name { font-size: var(--t-lg); font-weight: 700; color: var(--fg); }
.pl-tag { min-height: 34px; }
.pl-price { font-size: var(--t-display); font-weight: 750; letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.pl-price span { font-size: var(--t-body); font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
.pl-was { text-decoration: line-through; margin-top: calc(-1 * var(--s-1)); }
.pl-buy { width: 100%; justify-content: center; height: 38px; margin: var(--s-2) 0; }
.pl-cur { display: flex; align-items: center; justify-content: center; height: 38px; margin: var(--s-2) 0; border: 1px dashed var(--line-2); border-radius: var(--r-btn); font-size: var(--t-body); font-weight: 600; color: var(--fg-3); }
.pl-list { list-style: none; margin: 0; padding: var(--s-2) 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-body); color: var(--fg-2); }
.pl-list li { display: flex; gap: var(--s-2); align-items: flex-start; }
.pl-list li svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--green); }
.pl-list li.off { color: var(--fg-4); }
.pl-list li.off svg, .pl-list li.lose svg { color: var(--red); }
.pl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.pl-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s-4); padding-top: var(--s-2); }
.pl-card.deal { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.pl-card.deal .pl-badge { background: var(--green); color: #FFFFFF; }
/* Cancel flow */
.cf-stat b { font-size: var(--t-xl); color: var(--fg); }
.cf-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.cf-reason { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-btn); cursor: pointer; font-size: var(--t-body); }
.cf-reason:has(input:checked) { border-color: var(--fg); background: var(--bg-2); }
@media (max-width: 620px) { .cf-reasons { grid-template-columns: 1fr; } }
.cf-offer { position: relative; padding: var(--s-5); border: 1px solid var(--green); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--green); text-align: center; }
.cf-offer .pl-badge { left: 50%; transform: translateX(-50%); background: var(--green); color: #FFFFFF; }
.cf-offer-h { font-size: var(--t-lg); font-weight: 700; color: var(--fg); margin-bottom: var(--s-2); }
/* ---------- Setup tour: spotlight, coach card, launcher ---------- */
.tour-hole { position: fixed; z-index: 70; border-radius: var(--r-md); pointer-events: none;
  box-shadow: 0 0 0 2px var(--fg), 0 0 0 9999px rgba(9, 9, 11, .55); transition: left .25s var(--ease), top .25s var(--ease), width .25s var(--ease), height .25s var(--ease); }
.tour-card { position: fixed; z-index: 71; width: min(360px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-float); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-body); color: var(--fg-2);
  animation: fade-in .18s var(--ease); }
.tour-card.center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
body:has(.tour-card.center) .tour-card.center { box-shadow: 0 0 0 9999px rgba(9, 9, 11, .45), var(--shadow-float); }
.tour-top { display: flex; align-items: center; justify-content: space-between; }
.tour-n { font-size: var(--t-small); font-weight: 650; color: var(--fg-3); }
.tour-dots { display: flex; gap: var(--s-tight); }
.tour-dots i { flex: 1; height: 4px; border-radius: 999px; background: var(--bg-2); }
.tour-dots i.done { background: var(--green); }
.tour-dots i.skip { background: var(--line-2); }
.tour-dots i.on { background: var(--fg); }
.tour-title { display: flex; align-items: center; gap: var(--s-tight); font-size: var(--t-lg); font-weight: 700; color: var(--fg); margin-top: var(--s-1); }
.tour-tick { width: 20px; height: 20px; border-radius: 999px; background: var(--green); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tour-tick svg { width: 12px; height: 12px; }
.tour-do b { color: var(--fg); }
.tour-go { justify-content: center; margin-top: var(--s-1); }
.tour-acts { display: flex; align-items: center; gap: var(--s-tight); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.onb-launch { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 64px; height: 64px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--card); box-shadow: var(--shadow-float); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
.onb-launch:hover { border-color: var(--fg-4); transform: translateY(-1px); }
.onb-launch svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); transform: rotate(-90deg); }
.onb-launch circle { fill: none; stroke-width: 3; }
.onb-launch .t { stroke: var(--bg-2); }
.onb-launch .v { stroke: var(--green); stroke-linecap: round; transition: stroke-dasharray .4s var(--ease); }
.onb-launch-n { font-size: var(--t-body); font-weight: 750; color: var(--fg); line-height: 1; font-variant-numeric: tabular-nums; }
.onb-launch-l { font-size: var(--t-micro); color: var(--fg-3); margin-top: var(--s-hair); }
body.has-launcher .toasts { bottom: 96px; }
@media (max-width: 760px) { .onb-launch { bottom: 76px; right: 12px; width: 56px; height: 56px; } body.has-launcher .toasts { bottom: 144px; } }
@media (prefers-reduced-motion: reduce) { .tour-hole, .onb-launch .v { transition: none; } .tour-card { animation: none; } }
.danger-zone { border-color: color-mix(in srgb, var(--red) 40%, var(--line-2)); }
.danger-zone .card-title { color: var(--red); }
/* Today: playbooks */
.opp-keyhint { color: var(--amber); white-space: nowrap; }
.opp-src { display: inline-flex; align-items: center; gap: var(--s-tight); color: var(--fg-3); text-decoration: none; max-width: 100%; overflow: hidden; }
.opp-src:hover { color: var(--fg); text-decoration: underline; }
.opp-src svg { width: 12px; height: 12px; flex: none; }
.tour-acts .spacer { flex: 1; }
/* Operator console */
.adm-cust th.th-sort { cursor: pointer; user-select: none; }
.adm-cust td { vertical-align: middle; }
/* Operator console: activation funnel */
.fn-list { display: flex; flex-direction: column; }
.fn-row { display: grid; grid-template-columns: 170px 1fr 120px; align-items: center; gap: var(--s-3); padding: var(--s-1) 0; font-size: var(--t-body); }
.fn-lab { color: var(--fg-2); }
.fn-bar { height: 22px; background: var(--bg-2); border-radius: var(--r-sm); overflow: hidden; }
.fn-bar i { display: block; height: 100%; background: var(--fg); border-radius: inherit; transition: width .4s var(--ease); }
.fn-n { text-align: right; font-variant-numeric: tabular-nums; }
.fn-arrow { display: flex; gap: var(--s-3); margin-left: 170px; padding-left: var(--s-3); font-size: var(--t-small); color: var(--fg-3); border-left: 1px dashed var(--line-2); margin-top: calc(-1 * var(--s-hair)); margin-bottom: calc(-1 * var(--s-hair)); }
@media (max-width: 720px) { .fn-row { grid-template-columns: 1fr 90px; } .fn-row .fn-bar { grid-column: 1 / -1; grid-row: 2; } .fn-arrow { margin-left: 0; } }
/* At risk, retention bars, system */
.risk-why { max-width: 420px; }
.hb-list { display: flex; flex-direction: column; gap: var(--s-2); }
.hb-row { display: grid; grid-template-columns: 170px 1fr 40px; align-items: center; gap: var(--s-2); font-size: var(--t-body); }
.hb-row b { text-align: right; font-variant-numeric: tabular-nums; }
.hb-bar { height: 10px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.hb-bar i { display: block; height: 100%; background: var(--red); border-radius: inherit; }
.sys-ok { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-5); border: 1px solid color-mix(in srgb, var(--green) 40%, var(--line-2)); border-radius: var(--r-lg); background: var(--tint-green); }
.sys-ok > svg { width: 22px; height: 22px; color: var(--green); flex: none; }
.sys-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-body); min-width: 0; }
.an-reach { font-size: var(--t-body); color: var(--fg-2); min-height: 36px; display: flex; flex-direction: column; justify-content: center; }
/* Plans page: an offer made by the Revbound team */
.pl-op { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--green); border-radius: var(--r-lg); background: var(--tint-green); }
.pl-op > div { flex: 1; min-width: 0; }
.pl-badge-s { padding: var(--s-hair) var(--s-2); border-radius: 999px; background: var(--green); color: #FFFFFF; font-size: var(--t-small); font-weight: 650; white-space: nowrap; }
/* Announcements: form beside the live email */
.an-compose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.an-prev { display: flex; flex-direction: column; position: sticky; top: var(--s-4); }
.an-prev iframe { width: 100%; height: 640px; border: 0; border-top: 1px solid var(--line); background: #FFFFFF; border-radius: 0 0 var(--r-lg) var(--r-lg); }
@media (max-width: 1100px) { .an-compose { grid-template-columns: 1fr; } .an-prev { position: static; } }
/* Customers: wide table scrolls inside its card */
.adm-scroll { overflow-x: auto; }
.adm-cust { width: max-content; min-width: 100%; }
.adm-goal { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-colpick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }