/* ==========================================================================
   Edge CRM — design system ("Rose UI 2026")
   Tenant identity and business language come only from the packaged manifest.
   The full reference is docs/ROSE_DESIGN_SYSTEM.md.

   DIRECTION: paper, ink and one volt signal.
   A calm, bright paper workspace. White cards float on warm paper; ink is
   reserved for the dark "live" moments (calls, recording, coaching). One volt
   highlight marks the next step. The practice's own brand colour (tenant
   config) appears only as the workspace's identity: the rail mark, links,
   selection. Motion is confident and springy, and always optional.

   Rules the whole file obeys:
   1. Volt means "next, active, done, on". Use it once per view for the next
      step; never as decoration.
   2. Coral means overdue, needs attention or destructive. Nothing else is red.
   3. Stages keep their temperature ramp. Treatment started is volt; Not
      proceeding is neutral grey, never red.
   4. Unknown attribution is HATCHED, never solid (--hatch). A hatch cannot be
      mistaken for a real source category or summed into "direct".
   5. Sentence-case labels. The mono uppercase .kicker appears at most once per
      card or section.

   Type: Geist (UI, numbers and the one accent word per view) and Geist Mono
   (kickers and code only). No italics and no serif. Self-hosted under
   /fonts/ (SIL OFL 1.1, fonts/OFL.txt); the system stack is the fallback.

   Section order: fonts · tokens · dark · reset · type · shell · components ·
   motion. Screen blocks go at the very END of this file (see the markers).
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-latin-v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono-latin-v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  color-scheme: light dark;

  /* ---- type ---- */
  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  /* The accent word is Geist too (owner decision 2026-09-29: no serif or
     italic). --font-serif stays as an alias so existing references resolve. */
  --font-serif: var(--font-ui);
  /* numbers read in Geist with tabular figures (body sets tabular-nums) */
  --font-num: var(--font-ui);

  --fs-2xs: 0.6875rem;  /* 11px */
  --fs-xs:  0.75rem;    /* 12px — labels, meta */
  --fs-sm:  0.8125rem;  /* 13px — dense rows, hints */
  --fs-md:  0.875rem;   /* 14px — BODY */
  --fs-lg:  1rem;       /* 16px — card titles */
  --fs-xl:  1.25rem;    /* 20px — drawer / section titles */
  --fs-2xl: 1.75rem;    /* 28px — view titles */
  --fs-3xl: 2.5rem;     /* 40px — hero numbers */

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;

  --ls-label: 0.01em;   /* sentence-case labels (was the mono uppercase voice) */
  --ls-kicker: 0.12em;  /* .kicker only */
  --ls-tight: -0.011em;
  --ls-display: -0.03em;

  /* ---- spacing — 4px base ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  /* ---- shape ---- */
  --r-card: 16px;
  --r-ctl: 10px;
  --r-chip: 999px;
  --r-sm: 6px;
  /* compatibility aliases */
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;

  /* ---- structure ---- */
  --rail-w: 228px;
  --rail-w-mini: 60px;
  --topbar-h: 60px;
  --row-h: 40px;
  --kanban-col-w: 268px;
  --drawer-w: 680px;
  --content-max: 1440px;
  --ctl-h: 36px;
  --tap: 44px;

  --z-drawer: 60;
  --z-modal: 70;
  --z-menu: 80;
  --z-toast: 90;

  /* ---- motion ---- */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 700ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  /* compatibility aliases */
  --dur-fast: var(--dur-1);
  --dur: var(--dur-2);
  --dur-slow: var(--dur-3);
  --ease: var(--ease-out);

  /* ---- paper, ink and volt (light) ---- */
  --paper: #F1EEE7;
  --paper-2: #E8E4DA;
  --card: #FFFFFF;
  --card-2: #FAF8F4;
  --ink: #0B0D12;
  --ink-panel: #0B0D12;
  --ink-panel-text: #F1EEE7;
  --ink-panel-muted: #9AA0AD;
  --muted: #5E6270;
  --line: rgba(11, 13, 18, 0.08);
  --line-strong: rgba(11, 13, 18, 0.16);
  --volt: #CFF465;
  --volt-ink: #1F2A00;
  --volt-soft: rgba(207, 244, 101, 0.28);
  --coral: #F0584B;
  --coral-soft: rgba(240, 88, 75, 0.12);
  /* coral as TEXT needs more weight than the pure coral (3.4:1 on white) */
  --coral-text: #B8321F;
  --danger-on: #FFFFFF;   /* text on a solid coral-text fill */
  --focus-offset: var(--ink);

  /* ---- brand (tenant) — app-config.js writes --brand-primary, --brand,
         --brand-ink, --brand-on-light and --brand-on-dark inline on :root ---- */
  --brand: var(--brand-primary, #1f63c4);
  --brand-ink: #FFFFFF;
  --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --link: var(--brand-on-light, var(--brand));

  /* ---- pastel avatars (fill + matching ink) ---- */
  --av-1: #F6C9B8; --av-1-ink: #6E3420;  /* peach */
  --av-2: #D9CCF5; --av-2-ink: #432F86;  /* lilac */
  --av-3: #C8DDF7; --av-3-ink: #1C4A7E;  /* sky */
  --av-4: #C9ECD9; --av-4-ink: #1B5638;  /* mint */
  --av-5: #F5E6A8; --av-5-ink: #5E4A0C;  /* butter */
  --av-6: #F3C6D6; --av-6-ink: #742344;  /* rose */
  --av-7: #D6E4C4; --av-7-ink: #3A5420;  /* sage */
  --av-8: #E8D9C4; --av-8-ink: #574025;  /* sand */

  /* ---- depth ---- */
  --shadow-card: 0 1px 2px rgba(11, 13, 18, .04), 0 10px 30px -12px rgba(11, 13, 18, .14);
  --shadow-pop: 0 2px 4px rgba(11, 13, 18, .06), 0 24px 48px -16px rgba(11, 13, 18, .22);
  --shadow-ink: 0 30px 60px -20px rgba(0, 0, 0, .45);

  /* ---- compatibility aliases (every pre-2026 token keeps working) ---- */
  --bg: var(--paper);
  --surface: var(--card);
  --surface-2: var(--card-2);
  --surface-3: var(--paper-2);
  --surface-inset: #F6F4EF;
  --border: var(--line);
  --border-strong: var(--line-strong);
  --border-faint: rgba(11, 13, 18, 0.05);

  --text: var(--ink);
  --text-2: #3D4150;
  --text-3: var(--muted);
  --text-4: var(--muted);
  --text-inv: #FFFFFF;

  --ink-hover: #262A34;
  --ink-text: #FFFFFF;

  --accent: var(--brand);
  --accent-hover: color-mix(in srgb, var(--brand) 84%, #000);
  --accent-bg: color-mix(in srgb, var(--brand) 10%, var(--card));
  --accent-fg: var(--link);
  --ring: rgba(207, 244, 101, 0.55);

  --danger: var(--coral-text);
  --danger-bg: #FCEBE8;
  --danger-fg: #9C2A1A;
  --warn: #8A5F06;
  --warn-bg: #F7EBD0;
  --warn-fg: #6E4B04;
  --ok: #4D7C0F;
  --ok-bg: #EEF8D2;
  --ok-fg: #2F4A00;

  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-pop);
  --scrim: rgba(11, 13, 18, 0.36);

  /* ---- pipeline stages: the temperature ramp.
         --stage-<id> is the strong colour (charts, rails, tests);
         --stage-<id>-soft is the chip background (-bg / -fg kept as aliases). */
  --stage-new_inquiry: #6b7a8c;
  --stage-new_inquiry-soft: #E9ECF0;
  --stage-new_inquiry-bg: var(--stage-new_inquiry-soft);
  --stage-new_inquiry-fg: #414D5B;

  --stage-qualifying: #0e8aa0;
  --stage-qualifying-soft: #DCF0F3;
  --stage-qualifying-bg: var(--stage-qualifying-soft);
  --stage-qualifying-fg: #075868;

  --stage-consult_booked: #7d53c4;
  --stage-consult_booked-soft: #ECE5F8;
  --stage-consult_booked-bg: var(--stage-consult_booked-soft);
  --stage-consult_booked-fg: #533390;

  --stage-doctor_consult_booked: #9850a8;
  --stage-doctor_consult_booked-soft: #F3E5F5;
  --stage-doctor_consult_booked-bg: var(--stage-doctor_consult_booked-soft);
  --stage-doctor_consult_booked-fg: #6A3277;

  --stage-records_plan: #b03e86;
  --stage-records_plan-soft: #F8E6F0;
  --stage-records_plan-bg: var(--stage-records_plan-soft);
  --stage-records_plan-fg: #7A255B;

  --stage-proposal: #b0700b;
  --stage-proposal-soft: #F8ECD5;
  --stage-proposal-bg: var(--stage-proposal-soft);
  --stage-proposal-fg: #7A4E07;

  --stage-treatment_started: #4D7C0F;
  --stage-treatment_started-soft: var(--volt);
  --stage-treatment_started-bg: var(--stage-treatment_started-soft);
  --stage-treatment_started-fg: var(--volt-ink);

  --stage-not_proceeding: #7A7670;
  --stage-not_proceeding-soft: #ECEAE5;
  --stage-not_proceeding-bg: var(--stage-not_proceeding-soft);
  --stage-not_proceeding-fg: #4A4640;

  /* ---- attribution: the honesty device ---- */
  --unknown: #7a828c;
  --unknown-bg: #ECEAE4;
  --unknown-fg: #4B5058;
  --hatch-ink: rgba(122, 130, 140, 0.7);
  --hatch: repeating-linear-gradient(
    45deg, transparent 0 4px, var(--hatch-ink) 4px 5px);
  /* the same device, quieter, behind text (unknown-source chips) */
  --hatch-soft: repeating-linear-gradient(
    45deg, transparent 0 5px, color-mix(in srgb, var(--hatch-ink) 45%, transparent) 5px 6px);

  /* ---- categorical series for charts ---- */
  --series-1: var(--brand);
  --series-2: #0e8aa0;
  --series-3: #b03e86;
  --series-4: #b0700b;
  --series-5: #4D7C0F;
  --series-6: #7d53c4;
  --series-7: #a34a3a;
  --series-8: #4a6070;
  --grid-line: rgba(11, 13, 18, 0.07);
  --axis-line: rgba(11, 13, 18, 0.22);
}

/* ------------------------------------------------------------------ dark --
   The same paper/ink/volt system with the field inverted. Written three
   times on purpose: the system preference, then the explicit user choices
   (which must beat the media query). Keep the three blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B0D12;
    --paper-2: #12151C;
    --card: #161A22;
    --card-2: #1C212B;
    --ink: #F1EEE7;
    --ink-panel: #07080C;
    --muted: #9AA0AD;
    --line: rgba(241, 238, 231, 0.08);
    --line-strong: rgba(241, 238, 231, 0.16);
    --volt-soft: rgba(207, 244, 101, 0.16);
    --coral: #FF6B5E;
    --coral-soft: rgba(255, 107, 94, 0.16);
    --coral-text: #FF8A7F;
    --danger-on: #1A0806;
    --link: var(--brand-on-dark, #8FB2F5);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -14px rgba(0, 0, 0, .6);
    --shadow-pop: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 48px -16px rgba(0, 0, 0, .7);
    --surface-inset: #10131A;
    --border-faint: rgba(241, 238, 231, 0.05);
    --text-2: #D2D5DC;
    --text-inv: #0B0D12;
    --ink-hover: #FFFFFF;
    --ink-text: #0B0D12;
    --accent: var(--link);
    --accent-hover: color-mix(in srgb, var(--link) 85%, #fff);
    --accent-bg: color-mix(in srgb, var(--brand) 22%, var(--card));
    --danger-bg: #3A1A17;
    --danger-fg: #FFA79E;
    --warn: #E8B04A;
    --warn-bg: #33270F;
    --warn-fg: #F0C874;
    --ok: #CFF465;
    --ok-bg: rgba(207, 244, 101, 0.14);
    --ok-fg: #DDF78F;
    --scrim: rgba(0, 0, 0, 0.62);
    --stage-new_inquiry: #93a2b4;
    --stage-new_inquiry-soft: #1E242D;
    --stage-new_inquiry-fg: #B3BFCD;
    --stage-qualifying: #34b5cc;
    --stage-qualifying-soft: #0F2A31;
    --stage-qualifying-fg: #6FD2E3;
    --stage-consult_booked: #a98be8;
    --stage-consult_booked-soft: #251D39;
    --stage-consult_booked-fg: #C4AEF2;
    --stage-doctor_consult_booked: #c77ed8;
    --stage-doctor_consult_booked-soft: #2F1B34;
    --stage-doctor_consult_booked-fg: #E2AAEC;
    --stage-records_plan: #e07ac0;
    --stage-records_plan-soft: #331A2B;
    --stage-records_plan-fg: #EDA3D4;
    --stage-proposal: #e0a03a;
    --stage-proposal-soft: #33260F;
    --stage-proposal-fg: #EEC27A;
    --stage-treatment_started: #CFF465;
    --stage-treatment_started-soft: rgba(207, 244, 101, 0.16);
    --stage-treatment_started-fg: #DDF78F;
    --stage-not_proceeding: #948c85;
    --stage-not_proceeding-soft: #24221F;
    --stage-not_proceeding-fg: #B3ACA5;
    --unknown: #8a929c;
    --unknown-bg: #1B1F26;
    --unknown-fg: #A4ABB5;
    --hatch-ink: rgba(138, 146, 156, 0.5);
    --series-1: var(--link);
    --series-2: #34b5cc;
    --series-3: #e07ac0;
    --series-4: #e0a03a;
    --series-5: #CFF465;
    --series-6: #a98be8;
    --series-7: #e08d78;
    --series-8: #8fa2b2;
    --grid-line: rgba(241, 238, 231, 0.07);
    --axis-line: rgba(241, 238, 231, 0.22);
  }
}

/* explicit override: user-chosen dark (must beat the media query) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0B0D12;
  --paper-2: #12151C;
  --card: #161A22;
  --card-2: #1C212B;
  --ink: #F1EEE7;
  --ink-panel: #07080C;
  --muted: #9AA0AD;
  --line: rgba(241, 238, 231, 0.08);
  --line-strong: rgba(241, 238, 231, 0.16);
  --volt-soft: rgba(207, 244, 101, 0.16);
  --coral: #FF6B5E;
  --coral-soft: rgba(255, 107, 94, 0.16);
  --coral-text: #FF8A7F;
  --danger-on: #1A0806;
  --link: var(--brand-on-dark, #8FB2F5);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -14px rgba(0, 0, 0, .6);
  --shadow-pop: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 48px -16px rgba(0, 0, 0, .7);
  --surface-inset: #10131A;
  --border-faint: rgba(241, 238, 231, 0.05);
  --text-2: #D2D5DC;
  --text-inv: #0B0D12;
  --ink-hover: #FFFFFF;
  --ink-text: #0B0D12;
  --accent: var(--link);
  --accent-hover: color-mix(in srgb, var(--link) 85%, #fff);
  --accent-bg: color-mix(in srgb, var(--brand) 22%, var(--card));
  --danger-bg: #3A1A17;
  --danger-fg: #FFA79E;
  --warn: #E8B04A;
  --warn-bg: #33270F;
  --warn-fg: #F0C874;
  --ok: #CFF465;
  --ok-bg: rgba(207, 244, 101, 0.14);
  --ok-fg: #DDF78F;
  --scrim: rgba(0, 0, 0, 0.62);
  --stage-new_inquiry: #93a2b4;
  --stage-new_inquiry-soft: #1E242D;
  --stage-new_inquiry-fg: #B3BFCD;
  --stage-qualifying: #34b5cc;
  --stage-qualifying-soft: #0F2A31;
  --stage-qualifying-fg: #6FD2E3;
  --stage-consult_booked: #a98be8;
  --stage-consult_booked-soft: #251D39;
  --stage-consult_booked-fg: #C4AEF2;
  --stage-doctor_consult_booked: #c77ed8;
  --stage-doctor_consult_booked-soft: #2F1B34;
  --stage-doctor_consult_booked-fg: #E2AAEC;
  --stage-records_plan: #e07ac0;
  --stage-records_plan-soft: #331A2B;
  --stage-records_plan-fg: #EDA3D4;
  --stage-proposal: #e0a03a;
  --stage-proposal-soft: #33260F;
  --stage-proposal-fg: #EEC27A;
  --stage-treatment_started: #CFF465;
  --stage-treatment_started-soft: rgba(207, 244, 101, 0.16);
  --stage-treatment_started-fg: #DDF78F;
  --stage-not_proceeding: #948c85;
  --stage-not_proceeding-soft: #24221F;
  --stage-not_proceeding-fg: #B3ACA5;
  --unknown: #8a929c;
  --unknown-bg: #1B1F26;
  --unknown-fg: #A4ABB5;
  --hatch-ink: rgba(138, 146, 156, 0.5);
  --series-1: var(--link);
  --series-2: #34b5cc;
  --series-3: #e07ac0;
  --series-4: #e0a03a;
  --series-5: #CFF465;
  --series-6: #a98be8;
  --series-7: #e08d78;
  --series-8: #8fa2b2;
  --grid-line: rgba(241, 238, 231, 0.07);
  --axis-line: rgba(241, 238, 231, 0.22);
}

/* explicit override: user-chosen light. The light values live on :root and
   the dark media block is guarded by :not([data-theme="light"]), so this only
   pins the colour scheme. */
:root[data-theme="light"] { color-scheme: light; }

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--link); text-decoration: none; text-underline-offset: 0.18em; }
a:hover { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
table { border-collapse: collapse; border-spacing: 0; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }
:focus { outline: none; }
/* Focus: a 2px volt outline with an ink offset (paper in dark, since --ink flips). */
:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-offset);
  border-radius: var(--r-sm);
}

::selection { background: var(--volt-soft); color: var(--ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); background-clip: content-box; }

/* Reduced motion is mandatory: every animation and transition is off, the
   View Transition is skipped, and core.motion.reduced() reports true. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ----------------------------------------------------------------- type -- */
.view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.view-head-text { min-width: 0; flex: 1 1 320px; }
.view-head-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.view-title {
  font-family: var(--font-ui);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  color: var(--ink);
  text-wrap: balance;
}
.view-context {
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: 72ch;
}
/* One accent word per view: <em class="serif serif-mark">pipeline</em>.
   Same face, weight and style as the title (no italic, no serif); the volt
   marker underneath is what sets it apart. */
.serif {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 700;
  letter-spacing: inherit;
  font-size: inherit;
}
/* The volt marker under the accent word: a band that sits on and just
   below the baseline, behind the text, so the word keeps full contrast in
   both themes (only descender tails cross it). */
.serif-mark {
  position: relative;
  display: inline-block;
  z-index: 0;
  isolation: isolate;
}
.serif-mark::after {
  content: "";
  position: absolute;
  left: -0.04em; right: -0.04em; bottom: -0.06em;
  height: 0.2em;
  z-index: -1;
  border-radius: 999px;
  background: var(--volt);
  transform-origin: left center;
  animation: m-mark var(--dur-4) var(--ease-out) 160ms both;
}
@keyframes m-mark { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The small mono label the reel uses ("• SOURCES"). At most one per card. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.kicker::before {
  content: "";
  width: 6px; height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--volt-ink) 22%, transparent);
}
.label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
}
.num, .tnum { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ app shell -- */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--paper);
}
.app[data-rail="mini"] { grid-template-columns: var(--rail-w-mini) minmax(0, 1fr); }

/* Left rail: paper chrome with the practice's own identity at the top. */
.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.rail-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--topbar-h);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  flex: 0 0 auto;
}
/* The tenant mark: brand colour with the business initial, or the tenant
   logo (app-config.js sets it as the background image). */
.rail-brand-mark {
  position: relative;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background-color: var(--brand);
  color: var(--brand-ink);
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 1px 2px rgba(11, 13, 18, 0.12);
}
.rail-brand-mark::before { content: attr(data-initial); }
.rail-brand-mark[style*="background-image"]::before { content: none; }
.rail-brand-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.rail-brand-business {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.rail-brand-business:empty { display: none; }
.rail-brand-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
}
.rail-brand-business:empty + .rail-brand-text {
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--ink);
}
.rail-toggle.btn {
  flex: 0 0 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 44px;
  min-height: 44px;
  height: auto;
  padding: var(--sp-1);
  border-radius: var(--r-ctl);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--muted);
}
.rail-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.rail-group-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  padding: var(--sp-4) var(--sp-2) var(--sp-2);
}
.rail-group-label:first-child { padding-top: var(--sp-1); }
/* Sub-destinations under Consults (Appointments, Zoom consults). */
.nav-item.is-sub { height: 32px; padding-left: 36px; font-size: var(--fs-sm); }
.nav-item.is-sub .nav-item-icon { width: 14px; }
.nav-item.is-sub .nav-item-icon svg { width: 14px; height: 14px; }
/* "More": everything past the five everyday destinations. */
.rail-more { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.rail-more-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 var(--sp-2) 0 10px;
  margin-bottom: 2px;
  border-radius: var(--r-ctl);
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.rail-more-summary::-webkit-details-marker { display: none; }
.rail-more-summary::marker { content: ""; }
.rail-more-summary:hover { background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink); }
.rail-more-icon { width: 16px; display: grid; place-items: center; flex: 0 0 auto; }
.rail-more-label { flex: 1 1 auto; }
.rail-more-chevron {
  width: 7px; height: 7px;
  margin-right: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-2) var(--ease-out);
}
.rail-more[open] .rail-more-chevron { transform: rotate(45deg); }
.rail-more[open] .rail-more-body { animation: m-rise var(--dur-2) var(--ease-out) both; }
/* A role with one or two extra views (a consultant's Settings, the
   reporting login's Monthly review) sees them directly, no "More". */
.rail-more.is-flat { margin-top: 0; padding-top: 0; border-top: 0; }
.rail-more.is-flat > .rail-more-summary { display: none; }
.rail-primary:not(:has(> .nav-item:not([hidden]))) + .rail-more.is-flat { margin-top: 0; }
.app[data-rail="mini"] .rail-more-label,
.app[data-rail="mini"] .rail-more-chevron { display: none; }
.app[data-rail="mini"] .rail-more-summary { justify-content: center; padding: 0; }
.app[data-rail="mini"] .nav-item.is-sub { padding-left: 0; }
/* A consultant's few destinations are all first-level for them. */
@media (min-width: 1181px) {
  body.is-consultant .app:not([data-rail="mini"]) .nav-item.is-sub { height: 36px; padding-left: 10px; font-size: var(--fs-md); }
}
body.is-consultant .app[data-rail="wide"] .nav-item.is-sub { height: 36px; padding-left: 10px; font-size: var(--fs-md); }
body.is-consultant .nav-item.is-sub .nav-item-icon,
body.is-consultant .nav-item.is-sub .nav-item-icon svg { width: 16px; height: 16px; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 var(--sp-2) 0 10px;
  height: 36px;
  margin-bottom: 2px;
  border-radius: var(--r-ctl);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.nav-item:hover { background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink); text-decoration: none; }
.nav-item.is-active {
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.06), inset 0 0 0 1px var(--line);
}
.nav-item-icon {
  flex: 0 0 auto;
  width: 16px;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.nav-item-icon svg { width: 16px; height: 16px; stroke-width: 1.5; }
.nav-item.is-active .nav-item-icon { color: var(--ink); }
/* The volt lead dot marks where you are. */
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -7px; top: 50%;
  width: 4px; height: 16px;
  margin-top: -8px;
  border-radius: 999px;
  background: var(--volt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--volt-ink) 25%, transparent);
}
.nav-item-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.nav-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-chip);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: var(--muted);
  background: transparent;
}
.nav-count:empty { display: none; }
.nav-item.is-active .nav-count { background: var(--paper-2); color: var(--text-2); }
.nav-count.is-alert { color: var(--danger-on); background: var(--coral-text); }
/* Counts are neutral. A small coral dot means some of them are late (the
   number stays grey; screen readers hear ", N overdue"). */
.nav-count.has-attention { position: relative; }
.nav-count.has-attention::after {
  content: "";
  position: absolute;
  top: -1px; right: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 2px var(--paper);
}
.rail-foot {
  flex: 0 0 auto;
  margin: var(--sp-2) var(--sp-3) var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-ctl);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.rail-user { min-width: 0; flex: 1 1 auto; }
.rail-user-name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-user-role {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app[data-rail="mini"] .rail-brand-text,
.app[data-rail="mini"] .rail-brand-name,
.app[data-rail="mini"] .nav-item-label,
.app[data-rail="mini"] .nav-count,
.app[data-rail="mini"] .rail-group-label,
.app[data-rail="mini"] .rail-user,
.app[data-rail="mini"] .rail-foot > .avatar { display: none; }
.app[data-rail="mini"] .rail-brand-mark { width: 28px; height: 28px; font-size: 14px; }
.app[data-rail="mini"] .nav-item { justify-content: center; padding: 0; }
.app[data-rail="mini"] .nav-item.is-active::before { left: -9px; }
.app[data-rail="mini"] .rail-brand { flex-direction: column; justify-content: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-1); }
.app[data-rail="mini"] .rail-foot { justify-content: center; padding: var(--sp-1); margin: var(--sp-2) var(--sp-1) var(--sp-3); background: transparent; box-shadow: none; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }

/* Topbar: paper with a soft blur so content slides under it. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 var(--sp-6);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.topbar-sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.topbar .search { min-width: 220px; flex: 0 1 300px; }
.topbar .search .input {
  height: 38px;
  border-radius: var(--r-chip);
  padding-left: 34px;
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04);
}
.topbar .search .search-icon { left: 13px; }
.topbar .search-kbd {
  position: absolute;
  right: 10px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  pointer-events: none;
}
.topbar .search .input:focus + .search-kbd,
.topbar .search .input:not(:placeholder-shown) + .search-kbd { display: none; }
.topbar .btn-icon { width: 38px; height: 38px; border-radius: var(--r-chip); background: var(--card); border-color: var(--line); }
.topbar .btn-icon:hover { background: var(--card-2); }
#shellAccountBtn { padding: 0; }
#shellAccountBtn .avatar { width: 32px; height: 32px; }
.topbar .search-toggle { display: none; }

.heartbeat-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--card);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.heartbeat-pill:hover { border-color: var(--line-strong); color: var(--ink); }
.heartbeat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 14%, transparent);
}
.heartbeat-pill.is-healthy { color: var(--ok-fg); }
.heartbeat-pill.is-healthy .heartbeat-dot { background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 16%, transparent); }
.heartbeat-pill.is-warning,
.heartbeat-pill.is-pending { color: var(--warn-fg); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.heartbeat-pill.is-warning .heartbeat-dot,
.heartbeat-pill.is-pending .heartbeat-dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 16%, transparent); }
.heartbeat-pill.is-critical,
.heartbeat-pill.is-error { color: var(--danger-fg); background: var(--danger-bg); border-color: color-mix(in srgb, var(--coral) 40%, transparent); }
.heartbeat-pill.is-critical .heartbeat-dot,
.heartbeat-pill.is-error .heartbeat-dot { background: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
/* All well (or still checking): only a quiet grey dot, its words in the
   tooltip. The pill speaks up, in coral and plain words, only when
   something needs you. */
.heartbeat-pill.is-quiet {
  width: 32px;
  padding: 0;
  justify-content: center;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.heartbeat-pill.is-quiet:hover { background: var(--card); border-color: var(--line); }
.heartbeat-pill.is-quiet .heartbeat-label { display: none; }
.heartbeat-pill.is-quiet .heartbeat-dot { background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 16%, transparent); }
.heartbeat-pill.is-warning,
.heartbeat-pill.is-critical,
.heartbeat-pill.is-error { color: var(--danger-fg); background: var(--coral-soft); border-color: color-mix(in srgb, var(--coral) 40%, transparent); }
.heartbeat-pill.is-warning .heartbeat-dot { background: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.heartbeat-row.is-quiet .heartbeat-dot { background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 16%, transparent); }

/* When the active view draws its own header (.view-head), the topbar title
   steps back so there is one title on screen; screen readers still get it. */
.main:has(.view.is-active .view-head) .topbar-title,
.main:has(.view.is-active .view-head) .topbar-sub {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Account menu: the phone home of the heartbeat and the theme switch. */
.shell-account .menu { min-width: 240px; }
.heartbeat-row .heartbeat-dot { flex: 0 0 auto; }
.heartbeat-row.is-healthy .heartbeat-dot { background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 16%, transparent); }
.heartbeat-row.is-warning .heartbeat-dot { background: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.heartbeat-row.is-critical .heartbeat-dot,
.heartbeat-row.is-error .heartbeat-dot { background: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.account-menu-row svg { flex: 0 0 auto; color: var(--muted); }
.account-menu-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); }
.account-menu-head .eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .account-menu-row { display: none; }

/* view containers — router toggles .is-active */
/* The host is the flex column the .view sections grow inside. Without it
   the active view cannot fill the window and the kanban loses its height. */
.view-host { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; view-transition-name: rose-view; }
.view { display: none; flex: 1 1 auto; min-width: 0; }
.view.is-active { display: flex; flex-direction: column; }
.view-body {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: var(--content-max);
  padding: var(--sp-7) var(--sp-7) var(--sp-8);
}
.view-body.is-flush { padding: 0; }
.view-body.is-full { max-width: none; }

/* ------------------------------------------- shell: phone (≤ 760px) -- */
/* The topbar collapses: search becomes an icon, the heartbeat and theme
   move into the account menu. Nothing may scroll sideways. */
@media (max-width: 760px) {
  .topbar { padding: 0 var(--sp-3) 0 var(--sp-4); gap: var(--sp-2); }
  .topbar-sub { display: none; }
  .topbar-actions { gap: var(--sp-1); }
  .topbar-actions > .heartbeat-pill,
  .topbar-actions > #themeToggle { display: none; }
  .topbar .btn-icon { width: 44px; height: 44px; }
  #shellAccountBtn .avatar { width: 34px; height: 34px; }
  .topbar .search-toggle { display: inline-flex; }
  .topbar .search { display: none; min-width: 0; }
  .topbar.is-searching .topbar-title,
  .topbar.is-searching .search-toggle { display: none; }
  .topbar.is-searching .topbar-actions { flex: 1 1 auto; margin-left: 0; }
  .topbar.is-searching .search { display: flex; flex: 1 1 auto; }
  .topbar.is-searching .search .input { height: 44px; font-size: 16px; }
  .topbar .search-kbd { display: none; }
  .menu .account-menu-row { display: flex; }
  .menu .account-menu-row[hidden] { display: none; }
  .shell-account .menu { position: fixed; top: calc(var(--topbar-h) + 4px); right: var(--sp-3); left: auto; max-width: calc(100vw - var(--sp-6)); }
  .view-body { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
}

/* ========================================================== components -- */
/* Base styles every screen builds on. Class names are fixed by the design
   contract; screens add their own layout at the END of this file. */

/* cards ------------------------------------------------------------------ */
.card.card--ink {
  background: var(--ink-panel);
  color: var(--ink-panel-text);
  border-color: rgba(241, 238, 231, 0.08);
  box-shadow: var(--shadow-ink);
  /* Tokens re-pointed for everything inside the dark panel (derived tokens
     resolve on :root, so the aliases are restated here too). */
  --ink: var(--ink-panel-text);
  --ink-text: #0B0D12;
  --ink-hover: #FFFFFF;
  --muted: var(--ink-panel-muted);
  --line: rgba(241, 238, 231, 0.1);
  --line-strong: rgba(241, 238, 231, 0.2);
  --card: rgba(241, 238, 231, 0.06);
  --card-2: rgba(241, 238, 231, 0.09);
  --paper-2: rgba(241, 238, 231, 0.1);
  --text: var(--ink-panel-text);
  --text-2: #D2D5DC;
  --text-3: var(--ink-panel-muted);
  --text-4: var(--ink-panel-muted);
  --surface: var(--card);
  --surface-2: var(--card-2);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --border-faint: rgba(241, 238, 231, 0.06);
  --focus-offset: var(--ink-panel-text);
}
.card.card--ink .card-head { border-bottom-color: rgba(241, 238, 231, 0.1); }
.card.card--ink .card-title { color: var(--ink-panel-text); }
.card.card--ink .card-sub,
.card.card--ink .kicker { color: var(--ink-panel-muted); }
.card.is-lift,
a.card, button.card { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.card.is-lift:hover,
a.card:hover, button.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); text-decoration: none; }

/* chips ------------------------------------------------------------------ */
.chip.chip--volt { background: var(--volt); color: var(--volt-ink); border-color: transparent; }
.chip.chip--coral { background: var(--coral-soft); color: var(--coral-text); border-color: transparent; }
.chip.chip--brand { background: var(--brand-soft); color: var(--link); border-color: transparent; }
.chip.chip--ghost { background: transparent; color: var(--text-2); border-color: var(--line-strong); }
.chip.chip--source { background: var(--card); color: var(--text-2); border-color: var(--line); }
.chip.chip--source svg,
.chip > svg { width: 14px; height: 14px; flex: 0 0 auto; }
.chip.chip--source.is-unknown {
  border-style: dashed;
  border-color: var(--line-strong);
  background-color: var(--unknown-bg);
  background-image: var(--hatch-soft);
  color: var(--unknown-fg);
}
.chip.chip--stage { background: var(--stage-b); color: var(--stage-t); border-color: transparent; }
.chip.chip--stage::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--stage-c);
  flex: 0 0 auto;
}
.chip.chip--stage[data-stage="treatment_started"]::before { background: var(--stage-t); }

/* avatars ---------------------------------------------------------------- */
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack > .avatar { box-shadow: 0 0 0 2px var(--card); }
.avatar-stack > .avatar + .avatar { margin-left: -8px; }
.avatar.avatar--sm { width: 24px; height: 24px; font-size: 9.5px; }
.avatar.avatar--lg { width: 44px; height: 44px; font-size: var(--fs-md); }
.avatar[data-tone="1"] { --av: var(--av-1); --av-ink: var(--av-1-ink); }
.avatar[data-tone="2"] { --av: var(--av-2); --av-ink: var(--av-2-ink); }
.avatar[data-tone="3"] { --av: var(--av-3); --av-ink: var(--av-3-ink); }
.avatar[data-tone="4"] { --av: var(--av-4); --av-ink: var(--av-4-ink); }
.avatar[data-tone="5"] { --av: var(--av-5); --av-ink: var(--av-5-ink); }
.avatar[data-tone="6"] { --av: var(--av-6); --av-ink: var(--av-6-ink); }
.avatar[data-tone="7"] { --av: var(--av-7); --av-ink: var(--av-7-ink); }
.avatar[data-tone="8"] { --av: var(--av-8); --av-ink: var(--av-8-ink); }

/* buttons ---------------------------------------------------------------- */
.btn.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--ink-text); }
.btn.btn--primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--ink-text); }
.btn.btn--volt {
  background: var(--volt);
  border-color: color-mix(in srgb, var(--volt-ink) 18%, var(--volt));
  color: var(--volt-ink);
  font-weight: 600;
}
.btn.btn--volt:hover { background: #C3EC52; border-color: color-mix(in srgb, var(--volt-ink) 28%, var(--volt)); color: var(--volt-ink); }
.btn.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.btn--ghost:hover { background: var(--card-2); border-color: transparent; color: var(--ink); }
.btn.btn--danger { background: var(--coral-text); border-color: var(--coral-text); color: var(--danger-on); }
.btn.btn--danger:hover { background: color-mix(in srgb, var(--coral-text) 88%, var(--ink)); border-color: transparent; color: var(--danger-on); }

/* stat ------------------------------------------------------------------- */
.stat-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.stat .delta { margin-top: var(--sp-2); }
.delta {
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-chip);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--paper-2);
  color: var(--text-2);
}
.delta.is-up { background: var(--volt); color: var(--volt-ink); }
.delta.is-down { background: var(--coral-soft); color: var(--coral-text); }

/* timeline nodes --------------------------------------------------------- */
.tl-node {
  position: absolute;
  left: calc(var(--sp-7) * -1);
  top: 0;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 4px var(--card);
}
.tl-node svg { width: 13px; height: 13px; }
.tl-node.is-volt { background: var(--volt); color: var(--volt-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volt-ink) 20%, transparent), 0 0 0 4px var(--card); }
.tl-node.is-coral { background: var(--coral-soft); color: var(--coral-text); }
.timeline.has-nodes { padding-left: var(--sp-7); }
.timeline.has-nodes::before { left: 11px; top: 12px; }

/* flow rail: a horizontal step rail with a playhead ---------------------- */
.flow-rail {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2);
  padding-top: 4px;
}
.flow-rail::before,
.flow-rail::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}
.flow-rail::after {
  /* --flow-progress is 0–1: the share of the rail already travelled (grey: done) */
  background: var(--muted);
  transform: scaleX(var(--flow-progress, 0));
  transform-origin: left center;
  transition: transform var(--dur-4) var(--ease-out);
}
.flow-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.flow-node {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  color: var(--text-2);
  box-shadow: inset 0 0 0 1.5px var(--line-strong), 0 0 0 4px var(--card);
}
.flow-node svg { width: 14px; height: 14px; }
/* Done is grey (rule 3: ink means a live call, volt the step that is now). */
.flow-step.is-done .flow-node { background: color-mix(in srgb, var(--muted) 26%, var(--card)); color: var(--ink); box-shadow: 0 0 0 4px var(--card); }
.flow-step.is-current .flow-node {
  background: var(--volt);
  color: var(--volt-ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--volt-ink) 25%, transparent), 0 0 0 4px var(--card), 0 0 0 8px var(--volt-soft);
}
.flow-step.is-current { color: var(--ink); font-weight: 600; }
.flow-step.is-paused .flow-node { background: var(--coral); color: #FFFFFF; }
.flow-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* toggle ----------------------------------------------------------------- */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-md);
  min-height: 28px;
}
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track {
  position: relative;
  width: 38px; height: 22px;
  flex: 0 0 auto;
  border-radius: var(--r-chip);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background var(--dur-2) var(--ease-out);
}
.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(11, 13, 18, 0.25);
  transition: transform var(--dur-2) var(--ease-pop);
}
.toggle input:checked + .toggle-track { background: var(--volt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volt-ink) 25%, transparent); }
.toggle input:checked + .toggle-track::after { transform: translateX(16px); background: var(--volt-ink); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--volt); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-offset); }
.toggle input:disabled + .toggle-track { opacity: 0.5; }
/* A button-pair switch (two real buttons, e.g. On / Off):
   <div class="seg toggle"><button class="seg-btn is-on">On</button><button class="seg-btn">Off</button></div>
   The chosen "on" button is volt; a chosen "off" button is the plain white seg. */
.seg.toggle { display: inline-flex; gap: 2px; min-height: 0; cursor: default; font-size: inherit; }
.seg.toggle > .is-on,
.seg.toggle > .seg-btn.is-on {
  background: var(--volt);
  color: var(--volt-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.08), inset 0 0 0 1px color-mix(in srgb, var(--volt-ink) 20%, transparent);
}

/* progress and the pipeline column meter --------------------------------- */
.progress {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: var(--paper-2);
  overflow: hidden;
}
.progress > span,
.progress-fill {
  display: block;
  height: 100%;
  width: var(--value, 0%);
  border-radius: inherit;
  background: var(--ink);
  transform-origin: left center;
  animation: m-meter var(--dur-4) var(--ease-out) both;
}
.progress.is-volt > span,
.progress.is-volt .progress-fill { background: var(--volt); }
.column-meter {
  height: 3px;
  margin-top: var(--sp-2);
  border-radius: 3px;
  background: var(--paper-2);
  overflow: hidden;
}
.column-meter > span {
  display: block;
  height: 100%;
  width: var(--value, 0%);
  border-radius: inherit;
  background: var(--stage-c, var(--ink));
  transform-origin: left center;
  animation: m-meter var(--dur-4) var(--ease-out) both;
}
@keyframes m-meter { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* journey bar: where a lead is (core.journeyHtml) ------------------------ */
/* The one visual answer to "where is this lead?", in the stage colours used
   everywhere (--stage-<id> via [data-stage]). Done steps are small filled
   dots, the current step is a larger dot with a halo and its label, future
   steps are hollow. The two outcomes sit after a gap: won is volt, lost is
   grey (never red). */
.journey {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}
.journey-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}
.journey-step {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
/* the connector to the previous step */
.journey-step + .journey-step::before {
  content: "";
  position: absolute;
  right: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  margin-top: -1px;
  background: var(--line-strong);
  z-index: 0;
}
.journey-step.is-done::before,
.journey-step.is-current:not(.journey-outcome)::before { background: color-mix(in srgb, var(--stage-c) 55%, var(--line-strong)); }
.journey-gap { width: 10px; }
.journey-gap + .journey-step::before,
.journey-outcome + .journey-outcome::before { content: none; }
.journey-outcome + .journey-outcome { margin-left: 2px; }
.journey-dot {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: transform var(--dur-2) var(--ease-pop);
}
.journey-step.is-done .journey-dot { background: var(--stage-c); box-shadow: none; }
.journey-step.is-current .journey-dot {
  width: 12px;
  height: 12px;
  background: var(--stage-c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-c) 22%, transparent);
}
.journey-outcome .journey-dot { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.journey-outcome.is-won.is-current .journey-dot {
  background: var(--volt);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--volt-ink) 30%, transparent), 0 0 0 3px var(--volt-soft);
}
.journey-outcome.is-lost.is-current .journey-dot { background: var(--stage-not_proceeding); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-not_proceeding) 20%, transparent); }
.journey.is-lost .journey-step:not(.journey-outcome) .journey-dot { opacity: 0.55; }
.journey-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--stage-t, var(--ink));
}
.journey.is-won .journey-label { color: var(--ok-fg); }
.journey--sm { gap: 8px; }
.journey--sm .journey-step { width: 12px; height: 12px; }
.journey--sm .journey-step + .journey-step::before { width: 12px; }
.journey--sm .journey-dot { width: 6px; height: 6px; }
.journey--sm .journey-step.is-current .journey-dot { width: 9px; height: 9px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage-c) 22%, transparent); }
.journey--sm .journey-gap { width: 6px; }
.journey--sm .journey-label { font-size: var(--fs-xs); font-weight: 500; }

/* tooltip: [data-tip] ---------------------------------------------------- */
/* CSS only, on hover (never on touch) and on keyboard focus. Put it on
   icon-only buttons with a matching aria-label. data-tip-pos="bottom" |
   "left" | "right" moves it (default: above). Uses ::after, so don't put it
   on an element that already draws an ::after. */
:where([data-tip]) { position: relative; }
[data-tip]::after {
  /* The tip box exists only while it shows: an invisible box near the right
     edge would still widen the page on phones (sideways scroll at 390). */
  content: none;
  position: absolute;
  z-index: var(--z-toast);
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 240px;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  background: var(--ink-panel);
  color: var(--ink-panel-text);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.4);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  transform: translate(-50%, 0);
}
[data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); }
[data-tip-pos="left"]::after { left: auto; right: calc(100% + 8px); bottom: 50%; transform: translate(0, 50%); }
[data-tip-pos="right"]::after { left: calc(100% + 8px); bottom: 50%; transform: translate(0, 50%); }
[data-tip]:focus-visible::after { content: attr(data-tip); animation: tip-in var(--dur-1) var(--ease-out) both; }
@media (hover: hover) {
  [data-tip]:hover::after { content: attr(data-tip); animation: tip-in var(--dur-1) var(--ease-out) 380ms both; }
}
@keyframes tip-in { from { opacity: 0; translate: 0 3px; } to { opacity: 1; translate: 0 0; } }
[data-tip=""]::after,
[data-tip=""]:focus-visible::after,
[data-tip=""]:hover::after { content: none; }

/* disclosure: progressive detail (<details class="disclosure">) ---------- */
/* <details class="disclosure"><summary>Details <span class="disclosure-count">5</span></summary>
     <div class="disclosure-body">…</div></details>
   core.disclosureMemory(details, 'lead.came-from') remembers it per browser. */
.disclosure { min-width: 0; }
.disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 0 var(--sp-1);
  border-radius: var(--r-sm);
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::marker { content: ""; }
.disclosure > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin: 0 3px 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-2) var(--ease-out);
}
.disclosure[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.disclosure > summary:hover { color: var(--ink); background: var(--card-2); }
.disclosure-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-chip);
  background: var(--paper-2);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.disclosure-body { padding: var(--sp-2) 0 var(--sp-1) 22px; }
.disclosure[open] > .disclosure-body,
.disclosure[open] > summary ~ * { animation: m-rise var(--dur-2) var(--ease-out) both; }
@media (pointer: coarse) { .disclosure > summary { min-height: var(--tap); } }

/* overflow menu: a "⋯" trigger and its .menu (core.wireMenu) ------------- */
.menu-anchor { position: relative; display: inline-flex; }
.menu-anchor > .menu { top: calc(100% + 6px); right: 0; }
.menu-anchor > .menu.is-left { right: auto; left: 0; }
.menu-trigger {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.menu-trigger:hover,
.menu-trigger[aria-expanded="true"] { background: var(--card-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
@media (pointer: coarse) { .menu-trigger { width: var(--tap); height: var(--tap); } }
.menu-item .icon { color: var(--muted); }
.menu-item.is-danger .icon { color: currentColor; }

/* icons ------------------------------------------------------------------ */
.icon { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--20 { width: 20px; height: 20px; }

/* ============================================================== motion -- */
/* CSS and Web Animations only. Animate transform and opacity (highlight
   wipes excepted). About one looping animation per view: the lead dot. */
.m-rise { animation: m-rise var(--dur-3) var(--ease-out) both; }
.m-pop { animation: m-pop var(--dur-3) var(--ease-pop) both; }
.m-stagger > * {
  animation: m-rise var(--dur-3) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 12) * 45ms);
}
@keyframes m-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes m-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* "What just changed": a volt-soft wipe behind the row, then it fades. */
.m-wipe { position: relative; isolation: isolate; }
.m-wipe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--volt-soft);
  transform-origin: left center;
  pointer-events: none;
  animation: m-wipe 1400ms var(--ease-out) both;
}
@keyframes m-wipe {
  0% { transform: scaleX(0); opacity: 1; }
  35% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* The volt lead dot: one per view, on the live or next-step marker. */
.m-dot {
  display: inline-block;
  width: 8px; height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--volt-ink) 25%, transparent);
  animation: m-dot 1.6s var(--ease-in-out) infinite;
}
@keyframes m-dot {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px color-mix(in srgb, var(--volt-ink) 25%, transparent), 0 0 0 0 rgba(207, 244, 101, 0.55); }
  50% { transform: scale(1.18); box-shadow: 0 0 0 1px color-mix(in srgb, var(--volt-ink) 25%, transparent), 0 0 0 7px rgba(207, 244, 101, 0); }
}

/* SVG connector with a travelling volt pulse (source → lead, step → step).
   Markup: <svg class="m-flow"><path class="m-flow-line" d=…/><path class="m-flow-pulse" d=…/></svg> */
.m-flow { overflow: visible; }
.m-flow .m-flow-line,
.m-flow path:first-child {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.m-flow .m-flow-pulse {
  fill: none;
  stroke: var(--volt);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 14 400;
  animation: m-flow 2.4s var(--ease-in-out) infinite;
}
@keyframes m-flow { from { stroke-dashoffset: 414; } to { stroke-dashoffset: 0; } }

/* A number that counts up on first view: core.motion.countUp(el). */
.m-count { font-variant-numeric: tabular-nums; }

/* Skeleton shimmer. */
.m-shimmer,
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border-radius: var(--r-sm);
}
.m-shimmer::after,
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 70%, transparent), transparent);
  transform: translateX(-100%);
  animation: crm-shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes crm-shimmer { 100% { transform: translateX(100%); } }

/* Hover lift and press. */
.btn:active:not(:disabled) { transform: scale(0.98); }

/* View changes: the active view rises in; with the View Transitions API the
   old view fades out while the new one rises (core.motion.viewTransition). */
.view.is-active > .view-body { animation: m-rise var(--dur-3) var(--ease-out) both; }
::view-transition-old(rose-view) { animation: m-fade-out var(--dur-2) var(--ease-out) both; }
::view-transition-new(rose-view) { animation: m-fade-in var(--dur-2) var(--ease-out) both; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--dur-2); }
/* The transition overlay never swallows a click. */
::view-transition { pointer-events: none; }
@keyframes m-fade-out { to { opacity: 0; } }
@keyframes m-fade-in { from { opacity: 0; } }

/* Paper never animates: a print (or PDF) taken mid-entrance must not come
   out blank, so every animation and transition is off for print. */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .m-rise, .m-pop, .m-stagger > *, .m-dot, .m-flow .m-flow-pulse,
  .m-shimmer::after, .skeleton::after, .serif-mark::after, .column-meter > span,
  .progress > span, .progress-fill, .bar-fill,
  .view.is-active > .view-body { animation: none !important; }
  .m-wipe::after { animation: none !important; opacity: 0; }
  .btn:active:not(:disabled) { transform: none; }
}

/* ------------------------------------------------------- layout helpers -- */
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-2); }
.row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--sp-1); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scroll-x { overflow-x: auto; max-width: 100%; }
.push { margin-left: auto; }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-4) 0; }

.detail-split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.85fr);
  gap: var(--sp-4);
  align-items: start;
}
.list-pane { min-width: 0; }
.detail-pane { min-width: 0; position: sticky; top: calc(var(--topbar-h) + var(--sp-5)); }

/* ----------------------------------------------------- consult schedule -- */
.consult-schedule { margin-bottom: var(--sp-4); overflow: hidden; }
.consult-schedule .card-head { align-items: flex-start; }
.consult-schedule-table { min-width: 840px; }
.consult-schedule-table td:first-child {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.consult-schedule-group th {
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-align: left;
}
.consult-schedule-table tr.is-canceled td:first-child { color: var(--text-3); text-decoration: line-through; font-weight: 500; }
.consult-schedule-event { color: var(--text); }
.consult-schedule-sub { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }
.consult-schedule-sub.is-ok { color: var(--ok-fg); }
.consult-schedule-sub.is-warn { color: var(--warn-fg); }
.consult-schedule-pending { font-size: var(--fs-xs); color: var(--warn-fg); white-space: nowrap; }
/* On a phone the ledger schedule is a list: every row keeps its Join button
   on screen instead of in a sideways-scrolling table. */
@media (max-width: 640px) {
  .consult-schedule-table.is-ledger { min-width: 0; }
  .consult-schedule-table.is-ledger thead { display: none; }
  .consult-schedule-table.is-ledger,
  .consult-schedule-table.is-ledger tbody,
  .consult-schedule-table.is-ledger tr,
  .consult-schedule-table.is-ledger th,
  .consult-schedule-table.is-ledger td { display: block; width: 100%; }
  .consult-schedule-table.is-ledger tr { padding: var(--sp-2) var(--sp-3); }
  .consult-schedule-table.is-ledger tr + tr { border-top: 1px solid var(--border-faint); }
  .consult-schedule-table.is-ledger tbody tr[data-stage] { box-shadow: inset 3px 0 0 var(--stage-c); }
  .consult-schedule-table.is-ledger tbody td,
  .consult-schedule-table.is-ledger tbody th { border: 0; padding: 2px 0; height: auto; white-space: normal; box-shadow: none; }
  .consult-schedule-table.is-ledger tbody tr[data-stage] td:first-child { box-shadow: none; }
  .consult-schedule-table.is-ledger tr.consult-schedule-group { padding: 0; }
  .consult-schedule-table.is-ledger tr.consult-schedule-group th { padding: var(--sp-1) var(--sp-3); }
  .consult-schedule-table.is-ledger td[data-label="Stage"]:has(.faint),
  .consult-schedule-table.is-ledger td[data-label="Meeting"]:has(> .faint) { display: none; }
  .consult-schedule-table.is-ledger td[data-label="With"]::before,
  .consult-schedule-table.is-ledger td[data-label="Meeting"]::before {
    content: attr(data-label) " ";
    color: var(--text-3);
    font-size: var(--fs-2xs);
    letter-spacing: 0.06em;
  }
  .consult-schedule-table.is-ledger td .ct-join { margin-top: var(--sp-1); }
}
.consult-schedule-error {
  margin: var(--sp-3) var(--sp-4) 0;
  color: var(--danger-fg);
  background: var(--danger-bg);
}
.consult-type-detail {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}
.consult-classification {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: end;
  padding: var(--sp-3);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.consult-classification .field-hint {
  max-width: 58ch;
  margin-top: 3px;
}

/* ------------------------------------------------------ phone & inbox -- */
.inbox-shell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.inbox-loading,
.inbox-readiness {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.inbox-ready-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.inbox-ready-card strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-ready-card p {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.inbox-front-desk-status .card-body { display: grid; gap: var(--sp-2); }
.inbox-front-desk-status p { margin: 0; }
.inbox-front-desk-lock { color: var(--warn-fg); font-size: var(--fs-xs); }
.inbox-handoffs { overflow: hidden; }
.inbox-handoff-summary {
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.inbox-handoff-list { display: grid; }
.inbox-handoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.inbox-handoff:last-child { border-bottom: 0; }
.inbox-handoff-copy p {
  margin: var(--sp-2) 0 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.inbox-handoff-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}
.inbox-handoff-resolution { flex: 1 1 100%; }
.row-wrap { flex-wrap: wrap; }
.inbox-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  min-width: 0;
}
.inbox-list {
  position: sticky;
  top: calc(var(--topbar-h) + var(--sp-5));
  min-width: 0;
  overflow: hidden;
}
.inbox-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 var(--sp-3) var(--sp-2);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.inbox-thread-list {
  max-height: min(66vh, 680px);
  overflow-y: auto;
  border-top: 1px solid var(--border-faint);
}
.inbox-thread {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-faint);
  color: var(--text-2);
  text-align: left;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.inbox-thread:hover { background: var(--surface-2); }
.inbox-thread.is-selected {
  background: var(--accent-bg);
  box-shadow: inset 2px 0 0 var(--accent);
}
.inbox-channel {
  display: grid;
  place-items: center;
  width: 34px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-3);
  font-family: var(--font-num);
  font-size: 9px;
  letter-spacing: 0.04em;
}
.inbox-thread-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.inbox-thread-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-thread-copy span,
.inbox-thread time {
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.inbox-thread time {
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}
.inbox-conversation { min-width: 0; overflow: hidden; }
.inbox-contact-link { display: grid; gap: var(--sp-3); }
.inbox-contact-link p { margin: 0; overflow-wrap: anywhere; }
.inbox-contact-link .btn, .inbox-contact-link .select { min-height: 44px; height: auto; }
.inbox-contact-link .btn { white-space: normal; justify-self: start; }
.inbox-contact-link .field { min-width: 0; }
.inbox-mode {
  display: grid;
  gap: var(--sp-1);
  min-width: 152px;
  color: var(--text-3);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.inbox-message-log {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 220px;
  max-height: 480px;
  overflow-y: auto;
  padding: var(--sp-4);
  border-top: 1px solid var(--border-faint);
  background: var(--surface-inset);
}
.inbox-message {
  width: min(78%, 680px);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.inbox-message.is-outbound {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: var(--accent-bg);
}
.inbox-message-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
  color: var(--text-3);
  font-size: var(--fs-2xs);
}
.inbox-message-meta strong {
  color: var(--text-2);
  font-family: var(--font-num);
  font-weight: 600;
}
.inbox-message p {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.inbox-delivery {
  display: block;
  margin-top: var(--sp-2);
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  text-align: end;
}
.inbox-compose { min-width: 0; }
.inbox-compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(140px, 0.5fr);
  gap: var(--sp-3);
}
.inbox-consent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.inbox-consent.is-ready {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--border));
  background: var(--ok-bg);
}
.inbox-consent.is-blocked {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
  background: var(--warn-bg);
}
.inbox-consent strong {
  color: var(--text);
  font-size: var(--fs-sm);
}
.inbox-consent p {
  margin: 2px 0 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.inbox-consent-editor {
  position: relative;
  width: min(390px, 42vw);
}
.inbox-consent-editor > summary {
  float: right;
  list-style: none;
  user-select: none;
}
.inbox-consent-editor > summary::-webkit-details-marker { display: none; }
.inbox-consent-editor[open] > summary { margin-bottom: var(--sp-2); }
.inbox-consent-fields {
  display: grid;
  gap: var(--sp-2);
  clear: both;
  padding-top: var(--sp-2);
}
.inbox-consent-fields .btn { justify-self: end; }
.inbox-consent-editor :is(.input, .select, .btn) { min-height: 44px; }
.inbox-consent-editor .checkbox { min-height: 44px; align-items: flex-start; padding-block: var(--sp-2); }

/* ------------------------------------------------------------- toolbar -- */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-bottom: var(--sp-4);
}
.search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
  flex: 0 1 320px;
}
.search .input { padding-left: 28px; }
.search-icon {
  position: absolute;
  left: 8px;
  color: var(--text-4);
  pointer-events: none;
  font-size: var(--fs-xs);
}

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-chip);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.seg-btn {
  padding: 0 var(--sp-3);
  height: 30px;
  border-radius: var(--r-chip);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-active { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(11, 13, 18, 0.08), 0 0 0 1px var(--line); }

.tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--line); }
.tab {
  padding: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
/* On a phone a row of tabs scrolls sideways instead of widening the page. */
@media (max-width: 640px) {
  .tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: 1px; }
  .tabs::-webkit-scrollbar { display: none; }
}

.pagination {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-top: var(--sp-3);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* --------------------------------------------------------------- cards -- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
/* kicker + title on the left, actions on the right */
.card-head {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  min-height: 52px;
}
.card-head > .kicker { flex: 0 0 auto; }
/* Opt-in: the kicker on its own line above the title. */
.card-head.is-stacked > .kicker { flex-basis: 100%; margin-bottom: -4px; }
.card-head-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.card-title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; line-height: var(--lh-snug); }
.card-sub { font-size: var(--fs-sm); color: var(--muted); }
.card-body { padding: var(--sp-5); }
.card-body.is-flush { padding: 0; }
.card-foot {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--card-2);
  border-radius: 0 0 var(--r-card) var(--r-card);
  display: flex; align-items: center; gap: var(--sp-2);
}

/* --------------------------------------------------------------- stage -- */
/* One vocabulary for stage colour, reused by kanban, rows, pills and charts.
   Any element carrying data-stage="<id>" resolves --stage-c / --stage-b / --stage-t. */
[data-stage] { --stage-c: var(--text-3); --stage-b: var(--surface-2); --stage-t: var(--text-2); }
[data-stage="new_inquiry"] {
  --stage-c: var(--stage-new_inquiry);
  --stage-b: var(--stage-new_inquiry-bg);
  --stage-t: var(--stage-new_inquiry-fg);
}
[data-stage="qualifying"] {
  --stage-c: var(--stage-qualifying);
  --stage-b: var(--stage-qualifying-bg);
  --stage-t: var(--stage-qualifying-fg);
}
[data-stage="consult_booked"] {
  --stage-c: var(--stage-consult_booked);
  --stage-b: var(--stage-consult_booked-bg);
  --stage-t: var(--stage-consult_booked-fg);
}
[data-stage="doctor_consult_booked"] {
  --stage-c: var(--stage-doctor_consult_booked);
  --stage-b: var(--stage-doctor_consult_booked-bg);
  --stage-t: var(--stage-doctor_consult_booked-fg);
}
[data-stage="records_plan"] {
  --stage-c: var(--stage-records_plan);
  --stage-b: var(--stage-records_plan-bg);
  --stage-t: var(--stage-records_plan-fg);
}
[data-stage="proposal"] {
  --stage-c: var(--stage-proposal);
  --stage-b: var(--stage-proposal-bg);
  --stage-t: var(--stage-proposal-fg);
}
[data-stage="treatment_started"] {
  --stage-c: var(--stage-treatment_started);
  --stage-b: var(--stage-treatment_started-bg);
  --stage-t: var(--stage-treatment_started-fg);
}
[data-stage="not_proceeding"] {
  --stage-c: var(--stage-not_proceeding);
  --stage-b: var(--stage-not_proceeding-bg);
  --stage-t: var(--stage-not_proceeding-fg);
}

.stage-dot {
  display: inline-block;
  width: 8px; height: 8px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--stage-c);
}
.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px 0 8px;
  border-radius: var(--r-chip);
  background: var(--stage-b);
  color: var(--stage-t);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.stage-pill::before {
  content: "";
  width: 6px; height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--stage-c);
}
.stage-pill[data-stage="treatment_started"]::before { background: var(--stage-t); }
/* Older markup brings its own <span class="stage-dot">: then draw only that one. */
.stage-pill:has(> .stage-dot)::before,
.chip.chip--stage:has(> .stage-dot)::before { content: none; }
/* the 3px state rail — the one consistent read across kanban, tables, drawer */
.stage-rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--stage-c);
}

/* -------------------------------------------------------------- kanban -- */
.kanban {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  scroll-snap-type: x proximity;
  min-height: 0;
  flex: 1 1 auto;
}
.kanban-col {
  flex: 0 0 var(--kanban-col-w);
  width: var(--kanban-col-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-lg);
  scroll-snap-align: start;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kanban-col.is-drop {
  border-color: var(--stage-c);
  background: var(--stage-b);
}
.kanban-col-head {
  flex: 0 0 auto;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-faint);
  border-top: 2px solid var(--stage-c);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.kanban-col-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  color: var(--text-2);
}
.kanban-col-count {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  color: var(--text-3);
  background: var(--surface-3);
  border-radius: var(--r-sm);
  padding: 1px 5px;
}
.kanban-col-meta {
  margin-top: var(--sp-1);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  color: var(--text-3);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.kanban-col-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 80px;
}

.kcard {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 3px);
  cursor: grab;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.kcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.kcard.is-dragging { opacity: 0.45; cursor: grabbing; transform: scale(0.99); }
.kcard.is-overdue { border-color: var(--danger); }
.kcard[data-stage="not_proceeding"] { opacity: 0.66; }
.kcard-name {
  display: block;
  width: 100%;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kcard-meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kcard-foot {
  margin-top: var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  color: var(--text-3);
}
.kcard-value { font-family: var(--font-num); font-weight: 600; color: var(--text-2); }

/* --------------------------------------------------------------- table -- */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: auto;
  max-width: 100%;
}
.table { width: 100%; font-size: var(--fs-md); }
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.table tbody td {
  padding: 0 var(--sp-4);
  height: var(--row-h);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  vertical-align: middle;
  white-space: nowrap;
}
.table tbody td:first-child { color: var(--text); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-fast) var(--ease); }
.table tbody tr:hover td { background: var(--card-2); }
.table tbody tr.is-selected td { background: var(--volt-soft); }
.table tbody tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
/* rows carry the stage rail via data-stage on <tr> */
.table tbody tr[data-stage] td:first-child { box-shadow: inset 3px 0 0 var(--stage-c); }
.table tbody tr[data-stage].is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--text); }
.table th[aria-sort="ascending"]::after { content: " \2191"; }
.table th[aria-sort="descending"]::after { content: " \2193"; }
.t-num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.t-mono { font-family: var(--font-num); font-size: var(--fs-xs); }
.t-wide { white-space: normal; min-width: 220px; }
.row-link { color: inherit; font-weight: 600; }
.row-link:hover { color: var(--link); text-decoration: none; }

/* -------------------------------------------------------------- drawer -- */
.drawer-scrim {
  position: fixed; inset: 0;
  z-index: var(--z-drawer);
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 8px; right: 8px; bottom: 8px;
  z-index: calc(var(--z-drawer) + 1);
  width: min(var(--drawer-w), calc(100vw - 16px));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transform: translateX(calc(100% + 16px));
  transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; transition: transform var(--dur-3) var(--ease-out), visibility 0s; }
/* Sections stagger in when the drawer opens. */
.drawer.is-open .drawer-body > * { animation: m-rise var(--dur-3) var(--ease-out) both; }
.drawer.is-open .drawer-body > :nth-child(2) { animation-delay: 45ms; }
.drawer.is-open .drawer-body > :nth-child(3) { animation-delay: 90ms; }
.drawer.is-open .drawer-body > :nth-child(4) { animation-delay: 135ms; }
.drawer.is-open .drawer-body > :nth-child(n + 5) { animation-delay: 180ms; }
.drawer-head {
  position: relative;
  flex: 0 0 auto;
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.drawer-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  padding-right: var(--sp-8);
}
.drawer-sub {
  margin-top: var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-6); }
.drawer-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--line);
  background: var(--card);
}
.drawer-close {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--text-2);
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid; place-items: center;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-pop);
}
.drawer-close:hover { background: var(--paper-2); color: var(--ink); transform: rotate(90deg); }
/* Phones: the drawer is the whole screen, at 0 offset. */
@media (max-width: 760px) {
  .drawer {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100vw;
    max-width: 100vw;
    border: 0;
    border-radius: 0;
    transform: translateX(100%);
  }
  .drawer-head { padding: var(--sp-4) var(--sp-4) var(--sp-3); padding-top: max(var(--sp-4), env(safe-area-inset-top)); }
  .drawer-close { width: 44px; height: 44px; top: var(--sp-2); right: var(--sp-2); }
  .drawer-body { padding: var(--sp-4); }
  .drawer-foot { padding: var(--sp-3) var(--sp-4); padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom)); flex-wrap: wrap; }
}

/* --------------------------------------------------------------- modal -- */
.modal-scrim {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: var(--scrim);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.modal-scrim.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
.modal {
  width: min(460px, 100%);
  max-height: calc(100vh - var(--sp-8));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  transform: translateY(8px) scale(0.97);
  opacity: 0;
  transition: transform var(--dur-3) var(--ease-pop), opacity var(--dur-2) var(--ease-out);
}
.modal-scrim.is-open .modal { transform: none; opacity: 1; }
.modal-head { padding: var(--sp-5) var(--sp-6) 0; }
.modal-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.modal-body { padding: var(--sp-3) var(--sp-6) var(--sp-5); overflow-y: auto; color: var(--text-2); }
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--line);
  background: var(--card-2);
  border-radius: 0 0 var(--r-card) var(--r-card);
}

/* ----------------------------------------------------------------- menu -- */
.menu {
  position: absolute;
  z-index: var(--z-menu);
  min-width: 200px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  box-shadow: var(--shadow-pop);
  transform-origin: top right;
  animation: m-pop var(--dur-2) var(--ease-pop) both;
}
.menu[hidden] { display: none; }
.menu-item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  color: var(--text-2);
  text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--card-2); color: var(--ink); text-decoration: none; }
.menu-item.is-danger { color: var(--coral-text); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 0; }
@media (pointer: coarse) { .menu-item { min-height: 44px; } }

/* ---------------------------------------------------------------- forms -- */
.fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
.legend {
  display: block;
  padding: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
  width: 100%;
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.field-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
.field-label .req { color: var(--danger); margin-left: 2px; }
.field-hint { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-snug); }
.office-setup-panel .fieldset { min-width: 0; }
.office-setup-panel p, .office-setup-panel legend, .office-setup-panel .field-label { overflow-wrap: anywhere; }
.field-error { font-size: var(--fs-xs); color: var(--danger); }

.input, .select, .textarea {
  width: 100%;
  min-width: 0;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  padding: 0 var(--sp-3);
  height: var(--ctl-h);
  font-size: var(--fs-md);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.textarea { height: auto; min-height: 84px; padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: var(--lh-body); }
.select {
  appearance: none;
  padding-right: var(--sp-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 0.9; }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.input:focus, .select:focus, .textarea:focus,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: var(--r-ctl);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--card-2);
  color: var(--muted);
  cursor: not-allowed;
}
/* Touch widths: 16px text so iOS never zooms, 44px controls. */
@media (pointer: coarse), (max-width: 760px) {
  .input, .select, .textarea { font-size: 16px; }
  .input, .select { height: var(--tap); }
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); }
.input[type="date"], .input[type="datetime-local"] { font-family: var(--font-num); font-size: var(--fs-sm); }
.input.is-money { font-family: var(--font-num); text-align: right; }

.checkbox { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }

.switch { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-sm); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 34px; height: 20px;
  border-radius: var(--r-full);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  position: relative;
  transition: background var(--dur) var(--ease);
  flex: 0 0 auto;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: var(--r-full);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(11, 13, 18, 0.25);
  transition: transform var(--dur-2) var(--ease-pop);
}
.switch input:checked + .switch-track { background: var(--volt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volt-ink) 25%, transparent); }
.switch input:checked + .switch-track::after { transform: translateX(14px); background: var(--volt-ink); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--ring); }

/* -------------------------------------------------------------- buttons -- */
/* .btn is the default button: ink text on a white card. .btn-primary (alias
   .btn--primary) is solid ink. .btn--volt is the ONE next-step action per
   view. Coral (.btn-danger / .btn--danger) is destructive only. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--ctl-h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-chip);
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 550;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.btn:hover { background: var(--card-2); border-color: color-mix(in srgb, var(--ink) 28%, transparent); text-decoration: none; }
.btn:active { background: var(--paper-2); }
.btn[disabled], .btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--ink-text); }
.btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--ink-text); }
.btn-primary:active { background: var(--ink); }
.btn-secondary { /* alias of the default look, named for clarity in markup */ }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--card-2); border-color: transparent; color: var(--ink); }
.btn-danger { border-color: color-mix(in srgb, var(--coral-text) 45%, transparent); color: var(--coral-text); background: var(--card); }
.btn-danger:hover { background: var(--coral-soft); border-color: var(--coral-text); color: var(--danger-fg); }
.btn-sm { height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-lg { height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-md); }
.btn-icon { width: var(--ctl-h); padding: 0; }
.btn-icon.btn-sm { width: 30px; }
/* Touch widths: every button is a 44px target. */
@media (pointer: coarse), (max-width: 760px) {
  .btn { min-height: var(--tap); }
  .btn-icon { min-width: var(--tap); }
}
.btn-block { width: 100%; }
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border-radius: var(--r-full);
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--text-2);
  animation: crm-spin 640ms linear infinite;
}
.btn-primary.is-loading::after { color: var(--ink-text); }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-chip) 0 0 var(--r-chip); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-chip) var(--r-chip) 0; }

@keyframes crm-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------- badges & pills -- */
/* Badges, pills, tags and chips share one voice: sentence case, Geist 500,
   12px, fully rounded. */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-chip);
  background: var(--paper-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge-warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge-danger { background: var(--coral-soft); color: var(--danger-fg); }
.badge-info { background: var(--brand-soft); color: var(--link); }
.badge-muted { background: var(--card-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.badge-outline { background: transparent; border: 1px solid var(--line-strong); color: var(--text-2); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-chip);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.tag {
  display: inline-flex; align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-chip);
  background: var(--paper-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-chip);
  background: var(--paper-2);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.chip:has(.chip-close) { padding-right: 4px; }
.chip-close {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: inherit;
  opacity: 0.65;
}
.chip-close:hover { opacity: 1; background: rgba(127, 127, 127, 0.2); }

.overdue { color: var(--coral-text); font-weight: 600; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; flex: 0 0 auto; }
/* Round pastel with initials. The pastel comes from a hash of the name:
   data-tone="1..8" (core.avatarTone(name)); sky is the default. */
.avatar {
  --av: var(--av-3);
  --av-ink: var(--av-3-ink);
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--av);
  color: var(--av-ink);
  display: inline-grid; place-items: center;
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  user-select: none;
}

/* --------------------------------------- attribution: the honesty device -- */
/* Unknown source is never a solid fill. A hatch reads as "no data" and cannot
   be visually summed into "direct" — which is the reporting error that would
   cost this business the most. */
.hatch, .attr-unknown, .bar-fill.is-unknown, .legend-swatch.is-unknown, .funnel-step.is-unknown {
  background-color: var(--unknown-bg);
  background-image: var(--hatch);
}
/* the fill must never read as an empty track — hard edge on the unknown bar */
.bar-fill.is-unknown { box-shadow: inset 0 0 0 1px var(--unknown); }
.attr-unknown { background-image: var(--hatch-soft); }
.attr-unknown {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 22px;
  padding: 0 9px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-chip);
  color: var(--unknown-fg);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.attr-note {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--card-2);
  box-shadow: inset 2px 0 0 var(--unknown);
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

/* ------------------------------------------- settings: source links -- */
/* Each social account's tracked links (Settings, Links; app-settings.js). */
.source-links-intro { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-snug); max-width: 72ch; }
.source-link-account .card-sub { overflow-wrap: anywhere; }
.source-link-profile { margin-left: var(--sp-1); }
.source-link-list { list-style: none; margin: 0; display: grid; gap: var(--sp-3); }
.source-link { display: grid; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border-faint); min-width: 0; }
.source-link:first-child { padding-top: 0; border-top: 0; }
.source-link-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); min-width: 0; }
.source-link-title { min-width: 0; overflow-wrap: anywhere; }
.source-link-note { margin: 0; }
.source-link-copy { display: flex; gap: var(--sp-2); align-items: center; min-width: 0; }
.source-link-copy .input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.source-link-copy .btn { flex: 0 0 auto; min-height: 44px; min-width: 76px; }
@media (max-width: 640px) {
  .source-link-head { flex-direction: column; gap: var(--sp-1); }
  .source-link-copy { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------- stat tiles -- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
/* A big number (.m-count), a label, and a delta chip (volt up, coral down). */
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  min-width: 0;
}
.stat-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.stat-value {
  margin-top: var(--sp-2);
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-value.is-lg { font-size: var(--fs-3xl); letter-spacing: -0.045em; }
.stat-delta {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: var(--sp-2);
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-chip);
  background: var(--paper-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
}
.stat-delta.is-up { background: var(--volt); color: var(--volt-ink); }
.stat-delta.is-down { background: var(--coral-soft); color: var(--coral-text); }
.stat-foot { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.stat.is-alert { border-color: color-mix(in srgb, var(--coral) 45%, transparent); box-shadow: var(--shadow-card), inset 0 0 0 1px color-mix(in srgb, var(--coral) 25%, transparent); }
.stat.is-alert .stat-value { color: var(--coral-text); }

/* --------------------------------------------------------------- charts -- */
.chart {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chart-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.chart-title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; }
.chart-note { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; text-align: right; }
.chart-body { padding: var(--sp-5); min-width: 0; overflow-x: auto; }
.chart-body svg { width: 100%; height: auto; overflow: visible; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  padding: 0 var(--sp-4) var(--sp-3);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); }
.legend-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; background: var(--text-3); }
.legend-value { font-family: var(--font-num); color: var(--text-3); }

/* horizontal bar rows — the default breakdown form for sources and channels */
.bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) 68px;
  align-items: center;
  gap: var(--sp-3);
  padding: 5px 0;
  font-size: var(--fs-xs);
}
.bar-label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { display: block; height: 10px; background: var(--paper-2); border-radius: var(--r-chip); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--series-1); border-radius: var(--r-chip); min-width: 2px; transform-origin: left center; animation: m-meter var(--dur-4) var(--ease-out) both; }
.bar-value { font-family: var(--font-num); color: var(--text-3); text-align: right; }

/* funnel — stage-coloured, widths proportional, terminal states split out */
.funnel { display: flex; flex-direction: column; gap: 3px; }
.funnel-step {
  display: flex; align-items: center; gap: var(--sp-2);
  height: 28px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--stage-b);
  box-shadow: inset 2px 0 0 var(--stage-c);
  font-size: var(--fs-xs);
  color: var(--stage-t);
  min-width: 90px;
}
.funnel-step-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel-step-value { margin-left: auto; font-family: var(--font-num); font-weight: 600; }
.funnel-drop {
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  color: var(--text-4);
  padding-left: var(--sp-3);
}

.sparkline { width: 100%; height: 28px; display: block; }

/* --------------------------------------------------------- key / value -- */
.kv { display: grid; grid-template-columns: minmax(104px, 140px) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); align-items: baseline; }
.kv-k {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  padding-top: 1px;
}
.kv-v { font-size: var(--fs-md); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.kv-v.is-empty { color: var(--muted); }
.calendly-form-note {
  max-width: 65ch;
  margin: calc(var(--sp-2) * -1) 0 var(--sp-3);
}
.calendly-answer {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------------------------------------------------- lead intelligence -- */
.consult-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: var(--sp-3);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--border);
}
.consult-time-grid > div {
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
}
.consult-time-grid strong {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.consult-time-label {
  display: block;
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  color: var(--text-3);
}
.consult-loading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
}
.consult-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.consult-summary {
  padding-block: var(--sp-1) var(--sp-4);
}
.consult-summary h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: var(--ls-tight);
}
.consult-empty-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-3) 0;
  border-block: 1px solid var(--border-faint);
}
.consult-empty-note strong { font-size: var(--fs-sm); }
.consult-empty-note span {
  max-width: 70ch;
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: var(--lh-snug);
}
.consult-actions { margin-top: var(--sp-3); }

.lead-transcript {
  border-block: 1px solid var(--border-faint);
}
.lead-transcript > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 42px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 620;
}
.lead-transcript > summary::-webkit-details-marker { display: none; }
.lead-transcript > summary::after {
  content: "⌄";
  color: var(--text-3);
  transition: transform var(--dur) var(--ease);
}
.lead-transcript[open] > summary::after { transform: rotate(180deg); }
.lead-transcript > summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.lead-transcript-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0 0 var(--sp-3);
}
.lead-transcript-list {
  max-height: 420px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  border-block: 1px solid var(--border-faint);
}
.lead-transcript-line {
  min-width: 0;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-faint);
}
.lead-transcript-line:last-child { border-bottom: 0; }
.lead-transcript-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: 3px;
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  color: var(--text-3);
}
.lead-transcript-meta time {
  flex: 0 0 auto;
  letter-spacing: normal;
}
.lead-transcript-line p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.lead-chat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.lead-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.lead-chat-head p {
  max-width: 65ch;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-3);
}
.lead-chat-head .badge { flex: 0 0 auto; }
.lead-chat-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.lead-chat-log {
  min-height: 156px;
  max-height: 340px;
  overflow-y: auto;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  scroll-behavior: smooth;
}
.lead-chat-message {
  min-width: 0;
  padding: var(--sp-2) 0 var(--sp-3);
  border-bottom: 1px solid var(--border-faint);
}
.lead-chat-message:first-child { padding-top: 0; }
.lead-chat-message:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.lead-chat-message.is-user {
  margin-inline-start: 12%;
}
.lead-chat-speaker {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  color: var(--text-3);
}
.lead-chat-message.is-user .lead-chat-speaker { text-align: end; }
.lead-chat-message p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text);
  overflow-wrap: anywhere;
}
.lead-chat-message.is-user p {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-3);
}
.lead-chat-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}
.lead-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-2);
}
.lead-chat-form .textarea {
  min-height: 62px;
  max-height: 160px;
}

/* ------------------------------------------------------------ timeline -- */
.timeline { position: relative; padding-left: var(--sp-5); }
.timeline::before {
  content: "";
  position: absolute;
  left: 4px; top: 5px; bottom: 5px;
  width: 1px;
  background: var(--line-strong);
}
.tl-item { position: relative; padding: 0 0 var(--sp-4); }
.tl-dot {
  position: absolute;
  left: calc(var(--sp-5) * -1 + 0.5px);
  top: 6px;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--muted), 0 0 0 3px var(--card);
}
.tl-dot.is-stage { background: var(--stage-c); box-shadow: 0 0 0 3px var(--card); }
.tl-head {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text);
}
.tl-type {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
}
.tl-time { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-body { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-snug); overflow-wrap: anywhere; }

/* ------------------------------------------------------- command center -- */
.command-shell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
  min-height: 100%;
}
.command-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent-bg) 70%, transparent), transparent 42%),
    var(--surface);
  box-shadow: var(--shadow-sm);
}
.command-head h2 {
  margin-top: var(--sp-1);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-tight);
}
.command-head p {
  margin-top: var(--sp-2);
  max-width: 68ch;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.command-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  overflow-x: auto;
  padding: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  scrollbar-width: thin;
}
.command-tab {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-3);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.command-tab:hover { color: var(--text); background: var(--surface-2); }
.command-tab.is-active {
  color: var(--text);
  background: var(--surface-3);
  box-shadow: inset 0 -2px 0 var(--accent);
  font-weight: 620;
}
.command-panel { min-width: 0; }
.command-loading {
  display: grid;
  gap: var(--sp-2);
  max-width: 680px;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.command-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.command-filter { max-width: 100%; overflow-x: auto; }
.command-search {
  flex: 1 1 260px;
  max-width: 520px;
}
.command-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(112px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.command-stats .stat { min-height: 72px; }
.command-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  letter-spacing: 0.02em;
}
.command-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: var(--sp-3);
  align-items: start;
}
.command-column {
  min-width: 0;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-inset);
}
.command-column-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding: 0 var(--sp-1);
}
.command-column-head h3 {
  font-size: var(--fs-sm);
  font-weight: 650;
}
.command-card-list { display: grid; gap: var(--sp-2); }
.command-task-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.command-task-open {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-3);
  color: var(--text);
  text-align: left;
}
.command-task-open:hover { background: var(--surface-2); }
.command-task-open strong {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
.command-task-kicker {
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.command-task-desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.command-task-meta,
.command-mention-tags,
.command-consult-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.command-task-meta { color: var(--text-3); font-size: var(--fs-xs); }
.command-card-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.command-card-dates span {
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.command-task-need {
  padding: var(--sp-2);
  border-left: 2px solid var(--warn);
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.command-card-actions {
  display: flex;
  align-items: center;
  padding: var(--sp-1);
  border-top: 1px solid var(--border-faint);
}
.command-empty-column {
  padding: var(--sp-5) var(--sp-2);
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  text-align: center;
}
.command-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
}
.command-dialog::backdrop {
  background: var(--scrim);
  backdrop-filter: blur(2px);
}
.command-dialog form {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
}
.command-dialog-head,
.command-dialog-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.command-dialog-head { align-items: flex-start; }
.command-dialog-head h3 { margin-top: 2px; font-size: var(--fs-xl); }
.command-dialog-actions {
  position: sticky;
  bottom: calc(var(--sp-5) * -1);
  margin: 0 calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.command-textarea { min-height: 112px; resize: vertical; }
.check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
}
.check-row input { margin-top: 2px; accent-color: var(--accent); }
.check-row span { display: grid; gap: 2px; }
.check-row strong { color: var(--text); font-size: var(--fs-sm); }
.check-row small { color: var(--text-3); font-size: var(--fs-xs); line-height: var(--lh-snug); }
.command-legacy-docs {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.command-legacy-docs span { color: var(--text-2); }
.command-legacy-docs ul {
  display: grid;
  gap: 2px;
  max-height: 132px;
  overflow: auto;
  padding-left: var(--sp-5);
  color: var(--text-3);
}
/*
   THESIS: turn the calendar from a generic plan into dated, inspectable work evidence.
   OWN-WORLD: inherit the reading-room neutrals; color remains category/state only.
   STORY: select a week, inspect outcomes and blockers, then read the verified total.
   FIRST VIEWPORT: record controls, week navigation, evidence summary, seven-day ledger.
   FORM: dense operational ledger; an extension of the incumbent Command Center.
*/
.command-work-entry-fields {
  display: grid;
  gap: var(--sp-4);
}
.command-calendar-title {
  margin-top: 2px;
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
}
.command-calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  padding: var(--sp-2);
  border-block: 1px solid var(--border);
}
.command-week-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.command-week-nav strong {
  min-width: 148px;
  color: var(--text-2);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  text-align: center;
}
.command-baseline-note {
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.command-work-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--sp-3);
  border-block: 1px solid var(--border);
  background: var(--surface);
}
.command-work-summary > div {
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  border-right: 1px solid var(--border-faint);
}
.command-work-summary > div:last-child { border-right: 0; }
.command-work-summary span {
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.command-work-summary strong {
  color: var(--text);
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}
.command-reconstruction-note {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.command-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(205px, 1fr));
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: thin;
}
.command-day {
  min-width: 205px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-inset);
}
.command-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 38px;
  padding: 0 var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.command-day-head > div { display: grid; gap: 1px; }
.command-day-head h3 { font-size: var(--fs-xs); font-weight: 650; }
.command-day-head > div > span {
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.command-day-events {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-2);
}
.command-event {
  --event-rail: var(--text-4);
  display: grid;
  gap: 2px;
  width: 100%;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: inset 2px 0 0 var(--event-rail), var(--shadow-sm);
}
.command-event:hover { background: var(--surface-2); }
.command-event strong { font-size: var(--fs-xs); line-height: var(--lh-snug); }
.command-event span {
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.command-event.is-work-log { gap: var(--sp-1); }
.command-event .command-event-category { color: var(--text-3); }
.command-event .command-event-flags {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-top: 2px;
  font-family: var(--font-ui);
}
.command-work-state,
.command-work-basis {
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-ui) !important;
  font-size: var(--fs-2xs) !important;
  line-height: 1.2;
}
.command-work-state.is-ok { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok); }
.command-work-state.is-accent { color: var(--accent-fg); background: var(--accent-bg); border-color: var(--accent); }
.command-work-state.is-warn { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn); }
.command-work-state.is-muted { color: var(--text-3); background: var(--surface-2); }
.command-work-basis { color: var(--text-3); background: var(--surface-2); }
.command-event .command-event-detail,
.command-event .command-event-waiting,
.command-event .command-event-proof {
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.command-event .command-event-waiting {
  padding: var(--sp-1);
  background: var(--warn-bg);
  color: var(--warn-fg);
}
.command-event .command-event-proof { color: var(--text-3); }
.command-event .command-event-waiting b,
.command-event .command-event-proof b { font-weight: 650; }
.command-event.is-blue { --event-rail: var(--accent); }
.command-event.is-green { --event-rail: var(--ok); }
.command-event.is-violet { --event-rail: var(--stage-consult_booked); }
.command-event.is-amber { --event-rail: var(--warn); }
.command-event.is-red { --event-rail: var(--danger); }
.command-event.is-rose { --event-rail: var(--stage-records_plan); }
.command-work-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  padding: var(--sp-4) 0;
  border-block: 1px solid var(--border-strong);
}
.command-work-total > div { display: grid; gap: var(--sp-1); }
.command-work-total span {
  color: var(--text-3);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
}
.command-work-total strong {
  color: var(--text);
  font-family: var(--font-num);
  font-size: var(--fs-3xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.command-work-total p {
  max-width: 66ch;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  text-align: right;
}
.command-consensus {
  margin-bottom: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--r-lg);
  background: var(--accent-bg);
}
.command-consensus > p {
  margin-top: var(--sp-2);
  color: var(--accent-fg);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}
.command-consensus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.command-consensus-grid div {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}
.command-consensus-grid strong { font-size: var(--fs-xs); }
.command-consensus-grid span { color: var(--text-3); font-size: var(--fs-xs); line-height: var(--lh-snug); }
.command-mentions,
.command-archive,
.command-trends {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.command-mention,
.command-consult-card,
.command-trend-card {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.command-mention {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}
.command-mention-head,
.command-consult-head,
.command-trend-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  width: 100%;
}
.command-mention h3,
.command-consult-card h3,
.command-trend-card h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.command-mention p,
.command-consult-card > p,
.command-trend-card p {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.command-sentiment.is-positive,
.command-trend-split .is-positive { color: var(--ok-fg); background: var(--ok-bg); }
.command-sentiment.is-negative,
.command-trend-split .is-negative { color: var(--danger-fg); background: var(--danger-bg); }
.command-sentiment.is-neutral { color: var(--text-3); background: var(--surface-2); }
.command-more { display: flex; margin: var(--sp-4) auto 0; }
.command-trend-card { display: grid; gap: var(--sp-3); }
.command-partial-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-size: var(--fs-xs);
  box-shadow: inset 2px 0 0 var(--warn);
}
.command-partial-note span { color: var(--text-2); }
.command-trend-bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--surface-3);
}
.command-trend-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.command-trend-split { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.command-trend-split span {
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  background: var(--surface-2);
  font-size: var(--fs-xs);
}
.command-trend-card ul {
  display: grid;
  gap: var(--sp-1);
  padding-left: var(--sp-5);
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.command-consult-card { display: grid; gap: var(--sp-3); }
.command-consult-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.command-consult-grid div {
  display: grid;
  gap: 2px;
  padding: var(--sp-2);
  background: var(--surface-2);
}
.command-consult-grid strong {
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.command-consult-grid span { color: var(--text-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.command-transcript {
  max-height: 420px;
  overflow: auto;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-inset);
}
.command-transcript pre {
  margin: 0;
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.command-history {
  margin-top: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.command-history > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 42px;
  padding: 0 var(--sp-4);
  cursor: pointer;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 650;
  list-style: none;
}
.command-history > summary::-webkit-details-marker { display: none; }
.command-history > summary::before {
  content: "›";
  color: var(--text-4);
  transform: rotate(0);
  transition: transform var(--dur) var(--ease);
}
.command-history[open] > summary::before { transform: rotate(90deg); }
.command-history > summary span {
  margin-left: auto;
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: 500;
}
.command-history-grid,
.command-idea-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
}
.command-history-grid article,
.command-idea-grid article {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.command-history-grid p,
.command-idea-grid p {
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.command-history-metrics {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.command-history-metrics span {
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-3);
  font-size: var(--fs-2xs);
}
.command-history-narratives {
  display: grid;
  gap: var(--sp-2);
}
.command-history-narratives div {
  display: grid;
  gap: 2px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.command-history-narratives strong {
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.command-history-narratives span {
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.command-idea-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.command-idea-grid h3 { font-size: var(--fs-md); line-height: var(--lh-snug); }
.command-vault { margin-bottom: var(--sp-4); }

/* --------------------------------------------------------- empty states -- */
/* The CRM ships empty on purpose. Every empty state names the next action. */
/* A small volt-dot illustration, one sentence and one action. */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  color: var(--muted);
}
.empty-mark {
  position: relative;
  width: 56px; height: 56px;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 8px color-mix(in srgb, var(--card) 55%, transparent);
}
.empty-mark::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--volt-ink) 25%, transparent), 0 0 0 6px var(--volt-soft);
}
.empty-mark::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
}
.empty-title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.empty-text { font-size: var(--fs-md); color: var(--muted); max-width: 44ch; line-height: var(--lh-snug); }
.empty-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.empty.is-inline { padding: var(--sp-5) var(--sp-4); }
.empty.is-col {
  padding: var(--sp-5) var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* --------------------------------------------------------------- toasts -- */
/* Toasts: bottom-centre, an ink pill with a volt (ok), coral (error) or
   neutral (info) dot, and an optional Undo (core.toast(msg, { undo })). */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: max(var(--sp-5), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  width: max-content;
  max-width: calc(100vw - var(--sp-6));
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  max-width: 400px;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--ink-panel);
  border: 1px solid color-mix(in srgb, var(--ink-panel-text) 10%, transparent);
  border-radius: var(--r-ctl);
  box-shadow: var(--shadow-ink);
  color: var(--ink-panel-text);
  font-size: var(--fs-md);
  pointer-events: auto;
  animation: crm-toast-in var(--dur-3) var(--ease-pop);
}
.toast::before {
  content: "";
  width: 8px; height: 8px;
  margin-top: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--volt);
}
.toast.is-error::before { background: var(--coral); }
.toast.is-info::before { background: var(--ink-panel-muted); }
.toast-undo {
  flex: 0 0 auto;
  align-self: center;
  margin: -4px 0;
  padding: 0 var(--sp-3);
  height: 28px;
  border-radius: var(--r-chip);
  background: var(--volt);
  color: var(--volt-ink);
  font-size: var(--fs-sm);
  font-weight: 650;
}
.toast-undo:hover { background: #C3EC52; }
.toast-undo:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink-panel); }
.toast.is-leaving { animation: crm-toast-out var(--dur) var(--ease) forwards; }
.toast-msg { flex: 1 1 auto; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.toast-close { flex: 0 0 auto; color: var(--ink-panel-muted); width: 24px; height: 24px; border-radius: 50%; }
.toast-close:hover { color: var(--ink-panel-text); background: rgba(241, 238, 231, 0.1); }

@keyframes crm-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes crm-toast-out {
  to { opacity: 0; transform: translateY(4px); }
}

/* ------------------------------------------------------------ skeletons -- */
/* .skeleton base and the shimmer are defined with the motion utilities. */
.skeleton-line { height: 10px; margin-bottom: 6px; }
.skeleton-line.is-short { width: 45%; }
.skeleton-line.is-mid { width: 70%; }
.skeleton-row { height: var(--row-h); border-radius: 0; margin-bottom: 1px; }
.skeleton-card { height: 72px; border-radius: var(--r-ctl); margin-bottom: var(--sp-2); }
.skeleton-tile { height: 96px; border-radius: var(--r-card); }

/* -------------------------------------------------------------- utility -- */
.muted { color: var(--muted); }
.faint { color: var(--muted); }
.strong { font-weight: 620; color: var(--ink); }
/* .mono is the numbers voice: Geist with tabular figures. Code uses <code>. */
.mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[hidden] { display: none !important; }

/* ------------------------------------------------------------- auth gate -- */
.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--paper);
}
.gate-card {
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-7);
  animation: m-pop var(--dur-3) var(--ease-pop) both;
}
.gate-title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--ls-display); line-height: 1.1; margin-top: var(--sp-1); }
.gate-sub { margin: var(--sp-1) 0 var(--sp-5); font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-snug); }
.gate-msg {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-ctl);
  background: var(--card-2);

  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: var(--lh-snug);
}
.gate-msg.is-error { border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger-fg); }
.gate-form { display: grid; gap: var(--sp-3); }
.gate-or {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-xs);
}
.gate-or::before,
.gate-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.gate-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-faint);
}
.mfa-intro { display: grid; justify-items: start; gap: var(--sp-2); }
.mfa-intro p { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-body); }
.google-mark { width: 18px; height: 18px; flex: none; }
.mfa-qr-wrap {
  display: grid;
  place-items: center;
  min-height: 216px;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #ffffff;
}
.mfa-qr { display: block; width: min(210px, 100%); height: auto; image-rendering: pixelated; }
.mfa-manual {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.mfa-manual summary { cursor: pointer; color: var(--text-2); font-weight: 600; }
.mfa-manual p { margin-top: var(--sp-2); }
.mfa-manual code {
  display: block;
  margin-top: var(--sp-1);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.auth-code {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.34em;
  text-align: center;
}

/* ----------------------------------------------------------- responsive -- */
/* Target is a 1280px desk. Below that the rail collapses, then the split
   panes stack. The kanban always scrolls horizontally — eight stages side by
   side is the point of the view and must not be reflowed away. */
/* ----------------------------------------------------------- legacy leads -- */
.legacy-shell { min-width: 0; }
.legacy-boundary {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-inset);
}
.legacy-boundary-copy { max-width: 72ch; }
.legacy-boundary h2 {
  max-width: 24ch;
  margin: var(--sp-3) 0 var(--sp-2);
  color: var(--text);
  font-size: var(--fs-2xl);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.legacy-boundary p {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.legacy-receipt {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: start;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.legacy-receipt > div {
  min-width: 0;
  padding: var(--sp-3);
  border-right: 1px solid var(--border-faint);
}
.legacy-receipt > div:last-child { border-right: 0; }
.legacy-receipt dt,
.legacy-detail-grid dt,
.legacy-source-grid dt {
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.legacy-receipt dd {
  margin: var(--sp-1) 0 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.legacy-rule-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--border);
}
.legacy-rule-grid span {
  position: relative;
  min-height: 38px;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 34px;
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.legacy-rule-grid span::before {
  position: absolute;
  top: 12px;
  left: 13px;
  width: 9px;
  height: 5px;
  border-bottom: 1.5px solid var(--ok);
  border-left: 1.5px solid var(--ok);
  content: "";
  transform: rotate(-45deg);
}
.legacy-ledger { min-width: 0; }
.legacy-toolbar { padding-bottom: var(--sp-3); }
.legacy-toolbar .select { width: auto; min-width: 150px; }
.legacy-table-wrap { max-height: min(64vh, 720px); }
.legacy-table { min-width: 980px; }
.legacy-table tbody tr { cursor: default; }
.legacy-table tbody tr.is-attention td:first-child {
  box-shadow: inset 2px 0 0 var(--warn);
}
.legacy-open {
  display: block;
  max-width: 280px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.legacy-attention-note {
  display: block;
  margin-top: 2px;
  color: var(--warn-fg);
  font-size: var(--fs-2xs);
}
.legacy-result-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 42px;
  color: var(--text-3);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.legacy-inline-error {
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--danger);
  border-radius: var(--r-md);
  background: var(--danger-bg);
  color: var(--danger-fg);
  font-size: var(--fs-xs);
}
.legacy-consent-lock {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--warn) 36%, var(--border));
  border-radius: var(--r-md);
  background: var(--warn-bg);
}
.legacy-consent-lock > div {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.legacy-consent-lock strong { color: var(--warn-fg); font-size: var(--fs-sm); }
.legacy-consent-lock p {
  max-width: 68ch;
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.legacy-detail-grid,
.legacy-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
  margin: 0;
}
.legacy-detail-grid > div,
.legacy-source-grid > div { min-width: 0; }
.legacy-detail-grid dd,
.legacy-source-grid dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.legacy-notes {
  max-height: 340px;
  overflow-y: auto;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.legacy-review-list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding-left: var(--sp-5);
  color: var(--warn-fg);
  font-size: var(--fs-sm);
}
.legacy-history {
  border-top: 1px solid var(--border-faint);
}
.legacy-history:last-child { border-bottom: 1px solid var(--border-faint); }
.legacy-history summary {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 1.4fr) auto;
  gap: var(--sp-3);
  align-items: center;
  min-height: 38px;
  color: var(--text-2);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.legacy-history summary span:last-child {
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.legacy-history-body {
  padding: 0 var(--sp-2) var(--sp-3);
  color: var(--text-2);
}
.legacy-history-body p {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

@media (max-width: 1400px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .app { grid-template-columns: var(--rail-w-mini) minmax(0, 1fr); }
  .rail-brand-text, .rail-brand-name, .nav-item-label, .nav-count, .rail-group-label, .rail-user, .rail-foot > .avatar { display: none; }
  .rail-brand-mark { width: 28px; height: 28px; font-size: 14px; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item.is-active::before { left: -9px; }
  .rail-nav { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .rail-brand { flex-direction: column; justify-content: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-1); }
  .rail-foot { justify-content: center; padding: var(--sp-1); margin: var(--sp-2) var(--sp-1) var(--sp-3); background: transparent; box-shadow: none; }
  .app[data-rail="wide"] { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .app[data-rail="wide"] .rail-brand-name { display: flex; }
  .app[data-rail="wide"] .rail-brand-text,
  .app[data-rail="wide"] .nav-item-label,
  .app[data-rail="wide"] .nav-count,
  .app[data-rail="wide"] .rail-group-label,
  .app[data-rail="wide"] .rail-user { display: block; }
  .app[data-rail="wide"] .nav-count:empty { display: none; }
  .app[data-rail="wide"] .rail-foot > .avatar { display: inline-grid; }
  .app[data-rail="wide"] .rail-brand-mark { width: 32px; height: 32px; font-size: 16px; }
  .app[data-rail="wide"] .nav-item { justify-content: flex-start; padding: 0 var(--sp-2) 0 10px; }
  .app[data-rail="wide"] .nav-item.is-active::before { left: -7px; }
  .app[data-rail="wide"] .rail-nav { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .app[data-rail="wide"] .rail-brand { flex-direction: row; justify-content: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); }
  .app[data-rail="wide"] .rail-foot { justify-content: flex-start; padding: var(--sp-2); margin: var(--sp-2) var(--sp-3) var(--sp-3); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
  .rail-more-label, .rail-more-chevron { display: none; }
  .rail-more-summary { justify-content: center; padding: 0; }
  .nav-item.is-sub { padding-left: 0; }
  .app[data-rail="wide"] .rail-more-label { display: block; }
  .app[data-rail="wide"] .rail-more-chevron { display: block; }
  .app[data-rail="wide"] .rail-more-summary { justify-content: flex-start; padding: 0 var(--sp-2) 0 10px; }
  .app[data-rail="wide"] .nav-item.is-sub { padding-left: 36px; }
  .detail-split { grid-template-columns: minmax(0, 1fr); }
  .detail-pane { position: static; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-stats { grid-template-columns: repeat(3, minmax(112px, 1fr)); }
  .command-consensus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-idea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inbox-workspace { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  :root { --drawer-w: 100vw; }
  .view-body { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .kanban { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consult-classification { grid-template-columns: minmax(0, 1fr); }
  .consult-classification .row,
  .consult-classification .select,
  .consult-classification .btn { width: 100%; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .topbar { padding: 0 var(--sp-4); }
  .topbar-sub { display: none; }
  .heartbeat-label { display: none; }
  .heartbeat-pill { width: 32px; padding: 0; justify-content: center; }
  .bar-row { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 56px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv-k { padding-top: var(--sp-2); }
  .command-head { align-items: flex-start; }
  .command-board { overflow-x: auto; grid-template-columns: repeat(3, minmax(260px, 1fr)); }
  .command-mentions,
  .command-archive,
  .command-trends { grid-template-columns: minmax(0, 1fr); }
  .command-history-grid { grid-template-columns: minmax(0, 1fr); }
  .command-calendar-controls { align-items: stretch; }
  .command-week-nav { justify-content: flex-start; }
  .command-work-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-work-summary > div:nth-child(2) { border-right: 0; }
  .command-work-summary > div:nth-child(-n + 2) { border-bottom: 1px solid var(--border-faint); }
  .inbox-readiness,
  .inbox-loading { grid-template-columns: minmax(0, 1fr); }
  .inbox-handoff { grid-template-columns: minmax(0, 1fr); }
  .inbox-handoff-actions { justify-content: flex-start; }
  .inbox-workspace { grid-template-columns: minmax(0, 1fr); }
  .inbox-list { position: static; }
  .inbox-thread-list { max-height: 320px; }
  .legacy-boundary { grid-template-columns: minmax(0, 1fr); }
  .legacy-receipt { align-self: stretch; }
  .legacy-rule-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .toast-host { left: var(--sp-3); right: var(--sp-3); transform: none; width: auto; max-width: none; align-items: stretch; }
  .toast { max-width: none; }
  .consult-time-grid { grid-template-columns: minmax(0, 1fr); }
  .lead-chat-head { flex-direction: column; }
  .lead-chat-form { grid-template-columns: minmax(0, 1fr); }
  .lead-chat-form .btn { justify-self: stretch; }
  .lead-chat-message.is-user { margin-inline-start: 0; }
  .command-head { flex-direction: column; }
  .command-head .btn { width: 100%; }
  .command-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-consensus-grid,
  .command-consult-grid,
  .command-idea-grid { grid-template-columns: minmax(0, 1fr); }
  .command-toolbar > .btn,
  .command-search { width: 100%; max-width: none; }
  .command-calendar-controls,
  .command-week-nav { align-items: stretch; flex-direction: column; }
  .command-week-nav .btn { width: 100%; }
  .command-week-nav strong {
    width: 100%;
    min-width: 0;
    padding: var(--sp-1) 0;
    text-align: left;
  }
  .command-work-summary { grid-template-columns: minmax(0, 1fr); }
  .command-work-summary > div {
    border-right: 0;
    border-bottom: 1px solid var(--border-faint);
  }
  .command-work-summary > div:last-child { border-bottom: 0; }
  .command-reconstruction-note { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .command-work-total { align-items: flex-start; flex-direction: column; }
  .command-work-total p { text-align: left; }
  .command-dialog form { padding: var(--sp-4); }
  .command-dialog-actions {
    margin: 0 calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);
    padding: var(--sp-3) var(--sp-4);
    flex-wrap: wrap;
  }
  .inbox-compose-grid,
  .inbox-consent { grid-template-columns: minmax(0, 1fr); }
  .inbox-consent-editor { width: 100%; }
  .inbox-consent-editor > summary { float: none; width: 100%; }
  .inbox-message { width: 92%; }
  .legacy-boundary { padding: var(--sp-4); }
  .legacy-receipt { grid-template-columns: minmax(0, 1fr); }
  .legacy-receipt > div {
    border-right: 0;
    border-bottom: 1px solid var(--border-faint);
  }
  .legacy-receipt > div:last-child { border-bottom: 0; }
  .legacy-toolbar .search,
  .legacy-toolbar .select,
  .legacy-toolbar .btn { width: 100%; max-width: none; }
  .legacy-result-foot { align-items: stretch; flex-direction: column; padding: var(--sp-2) 0; }
  .legacy-detail-grid,
  .legacy-source-grid { grid-template-columns: minmax(0, 1fr); }
  .legacy-history summary { grid-template-columns: minmax(0, 1fr) auto; }
  .legacy-history summary span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* -------------------------------------------- consultant warm-lead desk -- */
.consultant-workspace {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}
.consultant-command {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.consultant-command h2 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.consultant-command p {
  margin: 0;
  max-width: 68ch;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
/* Signed in with no office (or staff access paused): one line above every screen. */
.office-access-notice {
  margin: var(--sp-3) var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--warn-bg);
  color: var(--text-1);
  font-size: var(--fs-sm);
}
.consultant-connect-banner {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--ok);
  border-radius: var(--r-md);
  background: var(--ok-bg);
  color: var(--text-1);
  font-size: var(--fs-sm);
}
.consultant-rehearsal {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.consultant-rehearsal h3 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-md);
}
.consultant-rehearsal p {
  margin: 0;
  max-width: 72ch;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.consultant-rehearsal-form {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(18rem, 1.4fr);
  gap: var(--sp-3);
  align-items: end;
}
.consultant-rehearsal-form > .checkbox { grid-column: 1 / -1; }
.consultant-rehearsal-form > button { justify-self: start; }
.consultant-rehearsal-meet { min-width: 0; }
.consultant-rehearsal-link {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-sm);
  word-break: break-all;
}
.consultant-rehearsal.is-ready {
  border-color: var(--ok);
  background: var(--ok-bg);
}
.consultant-rehearsal-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-sm);
}
@media (max-width: 960px) {
  .consultant-rehearsal-form {
    grid-template-columns: 1fr;
  }
}
.consultant-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.consultant-search { width: min(340px, 100%); }
.consultant-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.consultant-summary-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--sp-2);
  row-gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border-right: 1px solid var(--border-faint);
}
.consultant-summary-item:last-child { border-right: 0; }
.consultant-summary-item strong {
  justify-self: end;
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}
.consultant-summary-item > span:last-child {
  grid-column: 1 / -1;
  color: var(--text-4);
  font-size: var(--fs-2xs);
}
.consultant-summary-label {
  font-size: var(--fs-xs);
  color: var(--text-2);
  font-weight: 620;
}
.consultant-calendar {
  display: grid;
  gap: var(--sp-5);
}
.consultant-day {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.consultant-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.consultant-day-head h3 {
  margin: 0;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
}
.consultant-day-head span {
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}
.consultant-day-list { display: grid; }
.consultant-appointment {
  min-width: 0;
  display: grid;
  grid-template-columns: 112px minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-faint);
}
.consultant-appointment:last-child { border-bottom: 0; }
.consultant-appointment:hover { background: var(--surface-2); }
.consultant-appointment-time { display: grid; gap: 1px; }
.consultant-appointment-time strong {
  color: var(--text);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.consultant-appointment-time span {
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.consultant-appointment-main { min-width: 0; }
.consultant-appointment-status { white-space: nowrap; }
.consultant-lead-name { display: block; font-weight: 650; }
.consultant-row-meta {
  display: block;
  margin-top: 2px;
  color: var(--text-4);
  font-size: var(--fs-2xs);
}
.consultant-drawer { display: grid; gap: var(--sp-5); }
.consultant-launch-state {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.consultant-launch-state.is-ready { background: var(--ok-bg); border-color: var(--ok); }
.consultant-launch-state.is-blocked { background: var(--warn-bg); border-color: var(--warn); }
.consultant-launch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.consultant-launch-head > div { display: grid; gap: 2px; }
.consultant-launch-head strong { font-size: var(--fs-md); }
.consultant-launch-head span:not(.badge) { color: var(--text-2); font-size: var(--fs-xs); }
.consultant-launch-checks {
  margin: 0;
  padding: var(--sp-2) 0;
  list-style: none;
  display: grid;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.consultant-launch-check {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.consultant-launch-check > div { display: grid; gap: 1px; }
.consultant-launch-check strong { font-size: var(--fs-xs); }
.consultant-launch-check span:not(.badge) { color: var(--text-2); font-size: var(--fs-xs); }
.consultant-launch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-4);
}
.consultant-launch-check.is-ready .consultant-launch-dot { background: var(--ok); }
.consultant-launch-check.is-blocked .consultant-launch-dot { background: var(--warn); }
.consultant-launch-check.is-action .consultant-launch-dot { background: var(--accent); }
.consultant-launch-note {
  margin: 0;
  max-width: 68ch;
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
.consultant-section {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-faint);
}
.consultant-section:first-of-type { padding-top: 0; border-top: 0; }
.consultant-section h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-tight);
}
.consultant-section p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); }
.consultant-section .consultant-section-intro {
  margin-top: calc(var(--sp-2) * -1);
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.consultant-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.consultant-kv-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border-faint);
  border-radius: var(--r-md);
  overflow: hidden;
}
.consultant-kv {
  min-width: 0;
  padding: var(--sp-3);
  border-right: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.consultant-kv:nth-child(2n) { border-right: 0; }
.consultant-kv:nth-last-child(-n + 2) { border-bottom: 0; }
.consultant-kv dt,
.consultant-answers dt {
  margin: 0 0 var(--sp-1);
  color: var(--text-4);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
}
.consultant-kv dd,
.consultant-answers dd { margin: 0; color: var(--text); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.consultant-answers { margin: 0; display: grid; gap: var(--sp-3); }
.consultant-answers > div {
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-faint);
}
.consultant-answers > div:last-child { padding-bottom: 0; border-bottom: 0; }
.consultant-history { margin: 0; padding: 0; list-style: none; display: grid; }
.consultant-history li {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-faint);
}
.consultant-history li:last-child { border-bottom: 0; }
.consultant-history time { color: var(--text-4); font-family: var(--font-num); font-size: var(--fs-2xs); }
.consultant-history strong { font-size: var(--fs-xs); text-transform: capitalize; }
.consultant-history p { margin-top: 2px; color: var(--text-2); overflow-wrap: anywhere; }
.consultant-post-call-empty {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--surface-raised);
}
.consultant-post-call-empty p { color: var(--text-3); }
.consultant-post-call-state {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-3);
  font-size: var(--fs-xs);
  text-transform: capitalize;
}
.consultant-post-call-list { display: grid; gap: var(--sp-2); }
.consultant-post-call-item,
.consultant-post-call-booking,
.consultant-post-call-followup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  cursor: pointer;
}
.consultant-post-call-item:has(input:checked),
.consultant-post-call-booking:has(input:checked),
.consultant-post-call-followup:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.consultant-post-call-item input,
.consultant-post-call-booking input,
.consultant-post-call-followup input { margin-top: 3px; }
.consultant-post-call-item > span,
.consultant-post-call-booking > span,
.consultant-post-call-followup > span { display: grid; gap: var(--sp-1); min-width: 0; }
.consultant-post-call-item strong,
.consultant-post-call-booking strong,
.consultant-post-call-followup strong { font-size: var(--fs-sm); }
.consultant-post-call-item span span,
.consultant-post-call-booking span span,
.consultant-post-call-followup span span,
.consultant-post-call-followup small { color: var(--text-3); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.consultant-post-call-evidence summary { color: var(--accent); font-size: var(--fs-xs); cursor: pointer; }
.consultant-post-call-evidence blockquote {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-xs);
}
.consultant-post-call-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.consultant-outreach-stack { display: grid; gap: var(--sp-3); }
.consultant-outreach-head {
  display: grid;
  grid-template-columns: minmax(140px, 0.45fr) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: end;
}
.consultant-outreach-head > div {
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
  padding-bottom: 9px;
}
.consultant-outreach-head strong {
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.consultant-outreach-log {
  min-height: 0;
  max-height: 270px;
  padding: var(--sp-3);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-md);
}
.consultant-outreach-empty {
  padding: var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  color: var(--text-4);
  font-size: var(--fs-xs);
  text-align: center;
}
.consultant-outreach-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.consultant-outreach-actions .field-hint { flex: 1 1 180px; }
.drawer-action-note { margin-right: auto; color: var(--text-3); font-size: var(--fs-xs); }

@media (max-width: 900px) {
  .consultant-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consultant-summary-item:nth-child(2) { border-right: 0; }
  .consultant-summary-item:nth-child(-n + 2) { border-bottom: 1px solid var(--border-faint); }
  .consultant-appointment { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .consultant-appointment-status { display: none; }
}
@media (max-width: 640px) {
  .consultant-workspace { padding: var(--sp-4); }
  .consultant-command { align-items: stretch; flex-direction: column; }
  .consultant-command .btn { width: 100%; }
  .consultant-controls { align-items: stretch; flex-direction: column; }
  .consultant-search { width: 100%; }
  .consultant-controls .seg { overflow-x: auto; }
  .consultant-summary { grid-template-columns: minmax(0, 1fr); }
  .consultant-summary-item,
  .consultant-summary-item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--border-faint); }
  .consultant-summary-item:last-child { border-bottom: 0; }
  .consultant-day-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .consultant-appointment {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-2) var(--sp-3);
  }
  .consultant-appointment-time { grid-column: 1 / -1; grid-template-columns: auto 1fr; gap: var(--sp-2); }
  .consultant-appointment > .btn { align-self: center; }
  .consultant-kv-grid { grid-template-columns: minmax(0, 1fr); }
  .consultant-kv,
  .consultant-kv:nth-child(2n),
  .consultant-kv:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--border-faint); }
  .consultant-kv:last-child { border-bottom: 0; }
  .consultant-history li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .consultant-launch-head { align-items: stretch; flex-direction: column; }
  .consultant-launch-head .badge { align-self: flex-start; }
  .consultant-launch-check { grid-template-columns: 10px minmax(0, 1fr); }
  .consultant-launch-check > .badge { grid-column: 2; justify-self: start; }
  .consultant-outreach-head { grid-template-columns: minmax(0, 1fr); }
  .consultant-outreach-head > div { padding-bottom: 0; }
  .consultant-outreach-actions { align-items: stretch; flex-direction: column; }
  .consultant-outreach-actions .btn,
  .consultant-outreach-actions .field-hint { width: 100%; }
  .consultant-post-call-actions { align-items: stretch; flex-direction: column; }
  .consultant-post-call-actions .btn { width: 100%; }
}

/* -------------------------------------------------------------- printing -- */
@media print {
  .rail, .topbar-actions, .toolbar, .drawer, .drawer-scrim, .toast-host { display: none !important; }
  .app { grid-template-columns: minmax(0, 1fr); }
  body { background: #fff; }
  .card, .table-wrap, .chart, .stat { box-shadow: none; break-inside: avoid; }
}

/* Automatic pipeline actions (HQ-21): Settings → Pipeline (app-pipeline-automation.js). */
.pa-card .card-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.pa-card .card-head > .seg, .pa-card .card-head > .btn { flex-shrink: 0; }
.pa-status { margin: 0; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.pa-status .badge { margin-right: var(--sp-2); }
.pa-card .field-hint { margin: var(--sp-2) 0 0; }
.pa-card .field-hint.is-error { color: var(--danger); }
.pa-card .card-body > .btn { margin-top: var(--sp-2); }
.pa-review-list { list-style: none; margin: 0; padding: 0; }
.pa-review-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--border-faint); }
.pa-review-item:first-child { border-top: 0; padding-top: 0; }
.pa-review-item:last-child { padding-bottom: 0; }
.pa-review-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pa-review-reason { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.pa-review-item > .btn { flex-shrink: 0; }
.pa-doctor-options { border: 0; margin: var(--sp-3) 0 0; padding: 0; min-width: 0; }
.pa-doctor-options legend { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); padding: 0; }
.pa-doctor-option { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) 0; border-top: 1px solid var(--border-faint); overflow-wrap: anywhere; cursor: pointer; }
.pa-doctor-option:first-of-type { border-top: 0; }
.pa-doctor-option input { margin-top: 3px; flex-shrink: 0; }
.pa-doctor-other { margin-top: var(--sp-3); font-size: var(--fs-sm); }
.pa-doctor-other summary { cursor: pointer; color: var(--text-2); }
.pa-doctor-other .field { margin: var(--sp-2) 0 0; }
.pa-doctor-add { display: flex; gap: var(--sp-2); }
.pa-doctor-add .input { flex: 1 1 auto; min-width: 0; }
.pa-doctor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); }
@media (max-width: 600px) {
  .pa-card .card-head { flex-wrap: wrap; }
  .pa-review-item { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   ROSE UI 2026 · screen blocks
   Each screen agent writes ONLY between its own two markers below (contract
   §8). Tokens, base, shell, components and motion live at the top of this
   file and belong to the foundation; ask the Integrator for changes there.
   ========================================================================== */

/* ==== ROSE UI 2026 · pipeline ==== */
/* The pipeline board (app-pipeline.js) and the automatic-pipeline-actions
   switch (app-pipeline-automation.js). Built on the shared tokens only.
   Screen-local additions, named here as the contract asks:
     --pl-card-r      nested card radius inside a column well (r-card − 4px)
     --meter          0…1 on .column-meter: the stage's share of the busiest stage
     --arrive-offset  resumes the card arrival after a re-render
     --flash-offset   resumes a moved card's volt flash after a re-render
   Motion is transform and opacity only, plus the one volt landing highlight. */
.pipeline-view { --pl-card-r: calc(var(--r-card) - 4px); }

/* ---- header: kicker, one title with its serif word, one muted line ---- */
.view-head.pipeline-head {
  gap: var(--sp-3) var(--sp-6);
  margin: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
}
.pipeline-head .kicker { margin-bottom: 10px; }
.pipeline-head .view-title { margin: 0; }
.pipeline-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-height: 1.4em;
}
.pipeline-sub .num { font-family: var(--font-num, inherit); color: var(--text-2); }
.pipeline-sub-alert { color: var(--coral-text); font-weight: 600; }
.pipeline-sub .eyebrow {
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
#pipeline-summary:not(:empty) + #pipeline-status:not(:empty)::before { content: "· "; }
.pipeline-head-actions { flex: 0 0 auto; }
.pipeline-head-actions .btn { gap: 6px; }
.pipeline-view .pl-icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---- filters ---- */
.pipeline-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) 10px;
  margin: 0;
  padding: var(--sp-1) var(--sp-6) var(--sp-3);
}
.pipeline-toolbar .search { flex: 1 1 240px; max-width: 340px; min-width: 200px; }
.pipeline-toolbar .search .input { padding-left: 34px; }
.pipeline-toolbar .search-icon { left: 11px; display: inline-flex; color: var(--muted); }
.pipeline-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.pipeline-filters .select { flex: 0 0 auto; width: 156px; min-width: 0; }
.pipeline-overdue-filter {
  min-height: 34px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-chip);
  background: var(--card);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}
.pipeline-overdue-filter input { accent-color: var(--coral-text); }
.pipeline-overdue-filter:has(input:checked) {
  background: var(--coral-soft);
  border-color: transparent;
  color: var(--coral-text);
}

/* ---- the board: paper-2 wells on paper ---- */
.kanban {
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-6) var(--sp-6);
  /* Snap to the first column without scrolling the gutter away. */
  scroll-padding-inline: var(--sp-6);
}
.kanban-col {
  background: var(--paper-2);
  border: 0;
  border-radius: var(--r-card);
  transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.kanban-col.is-drop {
  background: var(--volt-soft);
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent);
}
.kanban-col-head {
  padding: 14px 14px 10px;
  border: 0;
  border-radius: 0;
}
.kanban-col-title {
  margin: 0;
  gap: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
}
.kanban-col-title .stage-dot { width: 8px; height: 8px; }
/* "5 leads · $70,000", then the coral overdue chip. */
.kanban-col-meta {
  margin-top: 4px;
  min-height: 22px;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.kanban-col-meta .num { font-family: var(--font-num, inherit); font-weight: 500; color: var(--text-2); }
.kanban-col-meta .kanban-col-count {
  margin: 0; padding: 0; min-width: 0;
  background: none; box-shadow: none; border-radius: 0;
  font-size: var(--fs-xs); text-align: left;
}
.kanban-col-value:not(:empty)::before { content: "· "; color: var(--muted); }
.kanban-col-meta .overdue.chip { margin-left: 2px; }
.kanban-col-meta .overdue.chip { min-height: 20px; padding: 2px 8px; font-size: var(--fs-2xs); font-weight: 600; }
/* On the paper-2 column well the soft coral sits on card white, so the count keeps 4.5:1. */
.kanban-col-meta .overdue.chip.chip--coral { background-color: var(--card); background-image: linear-gradient(var(--coral-soft), var(--coral-soft)); }
.kanban-col .column-meter {
  margin-top: 10px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
/* The meter grows from empty when the first rows land, and eases to its new
   share after every move — a transform, never a width. */
.kanban-col .column-meter > span {
  width: 100%;
  transform: scaleX(var(--meter, 0));
  transform-origin: left center;
  animation: none;
  transition: transform var(--dur-4) var(--ease-out);
}
.kanban-col[data-kind="lost"] .column-meter > span { background: var(--muted); }
.kanban-col-body {
  padding: 12px var(--sp-2) var(--sp-3);
  gap: 10px;
}
.kanban-col-body .empty.is-col {
  padding: 18px var(--sp-3);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--pl-card-r, 12px);
  font-family: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.kanban-col.is-drop .empty.is-col { border-color: color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink); }
.kanban-col-body .skeleton-card { height: 132px; margin: 0; border-radius: var(--pl-card-r, 12px); }

/* ---- the card: white on the well, lead first, then where from, what next, who ---- */
.kcard {
  position: relative;
  isolation: isolate;
  padding: 12px 12px 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--pl-card-r, 12px);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.kcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: var(--line); }
.kcard:active { cursor: grabbing; }
.kcard.is-dragging {
  opacity: 0.4;
  transform: none;
  box-shadow: none;
  border-style: dashed;
  border-color: var(--line-strong);
}
.kcard.is-overdue {
  border-color: color-mix(in srgb, var(--coral) 72%, transparent);
  box-shadow: 0 0 0 3px var(--coral-soft), var(--shadow-card);
}
.kcard.is-overdue:hover { box-shadow: 0 0 0 3px var(--coral-soft), var(--shadow-pop); }
/* Not proceeding is a normal outcome: quieter, never faded below legible. */
.kcard[data-stage="not_proceeding"] { opacity: 1; background: var(--card-2); box-shadow: none; }
.kcard[data-stage="not_proceeding"] .kcard-avatar { filter: saturate(0.2); }

.kcard .kcard-flag {
  position: absolute;
  top: -11px;
  right: 12px;
  z-index: 2;
  min-height: 20px;
  padding: 2px 9px;
  border: 0;
  background: var(--coral);
  color: var(--ink-panel);
  font-size: var(--fs-2xs);
  font-weight: 650;
  transform: rotate(-3deg);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--coral) 70%, transparent);
  pointer-events: none;
}
.kcard-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}
.kcard-avatar { width: 30px; height: 30px; margin-top: 1px; font-size: var(--fs-2xs); }
.kcard-id { min-width: 0; }
.kcard-name {
  display: block;
  width: 100%;
  text-align: left;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kcard-name:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.kcard-meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* One quiet quick action ("Log a call") and the ⋯ menu, shown on hover or
   keyboard focus so the resting card stays clean; always shown on touch. */
.kcard-actions {
  position: absolute;
  top: 10px;
  right: 8px;
  z-index: 2;
  display: flex;
  gap: 2px;
  padding-left: 18px;
  border-radius: var(--r-sm);
  background: linear-gradient(to right, transparent, var(--card) 16px);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.kcard:hover .kcard-actions,
.kcard:focus-within .kcard-actions,
.kcard-actions:has([aria-expanded="true"]) { opacity: 1; transform: none; }
.kcard[data-stage="not_proceeding"] .kcard-actions { background: linear-gradient(to right, transparent, var(--card-2) 16px); }
.kcard .kcard-actions .btn {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  color: var(--muted);
}
.kcard .kcard-actions .btn:hover,
.kcard .kcard-actions .btn:focus-visible,
.kcard .kcard-menu[aria-expanded="true"] { color: var(--ink); background: var(--card-2); }
.kcard-actions svg { width: 16px; height: 16px; }
@media (hover: none) {
  .kcard-actions { position: static; opacity: 1; transform: none; padding: 0; background: none; margin: -6px -6px 0 0; }
}
.menu-journey { padding: var(--sp-2) var(--sp-3) var(--sp-1); }

.kcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-width: 0; }
.kcard-tags .chip { min-height: 22px; max-width: 100%; padding: 2px 8px 2px 7px; gap: 5px; font-size: var(--fs-2xs); }
.kcard-tags .chip > svg { width: 12px; height: 12px; }
.kcard-tags .chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard-account { color: var(--muted); }
.kcard-tags .attr-unknown { height: auto; font-family: inherit; letter-spacing: 0; text-transform: none; border-radius: var(--r-chip); }
.kcard-reason { color: var(--text-2); }

.kcard-facts { display: grid; justify-items: start; gap: 4px; margin-top: 10px; min-width: 0; }
.kcard-fact {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-2);
}
.kcard-fact > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
/* The follow-up words are pinned markup with an inline 11px size; the card
   reads them at its own 12px (an inline style only yields to !important). */
.kcard-fact > .mono { font-size: var(--fs-xs) !important; letter-spacing: 0; }
.kcard-due.is-late, .kcard-due.is-late > svg, .kcard-due .overdue { color: var(--coral-text); }
.kcard-due .overdue { font-weight: 600; }
.kcard-due.is-now {
  margin-left: -6px;
  padding: 2px 9px 2px 6px;
  border-radius: var(--r-chip);
  background: var(--volt-soft);
  color: var(--ink);
  font-weight: 600;
}
.kcard-due.is-now > svg { color: var(--ink); }
.kcard-appt .muted { color: var(--muted); }

.kcard-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.kcard-owner { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.kcard-owner .avatar--sm { width: 20px; height: 20px; font-size: 0.5625rem; }
.kcard-owner.is-open .avatar { background: transparent; border: 1px dashed var(--line-strong); }
.kcard-owner.is-open .kcard-owner-name { color: var(--muted); }
.kcard-owner-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard-value {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-num, inherit);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

/* Mid-save: a thin line draws along the card's foot (aria-busy), no veil. */
.kcard[aria-busy="true"] { cursor: progress; }
.kcard[aria-busy="true"]::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0.35;
  transform-origin: left center;
  animation: pl-saving 1100ms var(--ease-in-out) infinite;
}

/* ---- moving a card: the clone flies (app-pipeline.js), the card lands volt ---- */
.kcard.kcard-ghost {
  position: fixed;
  z-index: var(--z-menu, 80);
  margin: 0;
  pointer-events: none;
  box-shadow: var(--shadow-pop);
  will-change: transform;
}
.kcard::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: inherit;
  background: var(--volt);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.kcard.kcard-ghost .kcard-actions { display: none; }
.kcard.is-landed { animation: pl-land var(--dur-3) var(--ease-pop) both; animation-delay: var(--flash-offset, 0ms); }
.kcard.is-landed::after { animation: pl-volt 1700ms var(--ease-out) both; animation-delay: var(--flash-offset, 0ms); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kcard::after {
    mix-blend-mode: normal;
    background: color-mix(in srgb, var(--volt) 24%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--volt);
  }
}
:root[data-theme="dark"] .kcard::after {
  mix-blend-mode: normal;
  background: color-mix(in srgb, var(--volt) 24%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--volt);
}

/* ---- the board builds itself in ---- */
.kanban.is-entering > .kanban-col {
  animation: pl-rise var(--dur-3) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 12) * 45ms);
}
.kanban.is-arriving .kcard {
  animation: pl-rise var(--dur-3) var(--ease-out) both;
  animation-delay: calc(80ms + min(var(--i, 0), 12) * 45ms + var(--arrive-offset, 0ms));
}
.kanban.is-arriving .kcard-flag {
  animation: pl-pop var(--dur-3) var(--ease-pop) both;
  animation-delay: calc(460ms + min(var(--i, 0), 12) * 45ms + var(--arrive-offset, 0ms));
}
.kanban.is-arriving .column-meter > span {
  transition-delay: calc(160ms + min(var(--i, 0), 12) * 45ms);
}

@keyframes pl-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pl-pop {
  0% { opacity: 0; transform: rotate(-3deg) scale(0.4); }
  100% { opacity: 1; transform: rotate(-3deg) scale(1); }
}
@keyframes pl-land {
  0% { transform: scale(0.97); }
  55% { transform: scale(1.02); }
  100% { transform: none; }
}
@keyframes pl-volt {
  0% { opacity: 0; }
  10% { opacity: 1; }
  52% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes pl-saving {
  0% { transform: scaleX(0); transform-origin: left center; }
  50% { transform: scaleX(1); transform-origin: left center; }
  50.01% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@media (prefers-reduced-motion: reduce) {
  .kanban.is-entering > .kanban-col,
  .kanban.is-arriving .kcard,
  .kanban.is-arriving .kcard-flag,
  .kcard.is-landed,
  .kcard.is-landed::after,
  .kcard[aria-busy="true"]::before { animation: none; }
  .kcard:hover { transform: none; }
  .kanban-col .column-meter > span { transition: none; }
}

/* ---- automatic pipeline actions: Off / On as one .toggle, volt when on ---- */
/* The switch sits beside its title on a desk (the long description no longer
   pushes it onto its own line); on a phone the head wraps as before. */
@media (min-width: 601px) {
  .pa-card .card-head { flex-wrap: nowrap; align-items: flex-start; }
  .pa-card .card-head > div:first-child { flex: 1 1 0; }
}
.pa-card .seg.toggle {
  gap: 0;
  min-height: 0;
  padding: 3px;
  border: 0;
  border-radius: var(--r-chip);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  overflow: visible;
  cursor: default;
  font-size: var(--fs-sm);
}
.pa-card .seg.toggle .seg-btn {
  height: 30px;
  min-width: 54px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.pa-card .seg.toggle .seg-btn:hover:not(:disabled) { background: transparent; color: var(--ink); }
.pa-card .seg.toggle .seg-btn.is-active {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.12), 0 0 0 1px var(--line);
}
.pa-card .seg.toggle.is-on .seg-btn.is-active {
  background: var(--volt);
  color: var(--volt-ink);
  box-shadow: 0 1px 2px rgba(31, 42, 0, 0.2), inset 0 0 0 1px color-mix(in srgb, var(--volt-ink) 22%, transparent);
}
.pa-card .seg.toggle .seg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pa-card .seg.toggle .seg-btn.is-active:not(:where(.is-on *)) { background: var(--card-2); }
}
:root[data-theme="dark"] .pa-card .seg.toggle .seg-btn.is-active:not(:where(.is-on *)) { background: var(--card-2); }

/* ---- phone: one column in view at a time, 44px targets, nothing sideways ---- */
@media (pointer: coarse) {
  .kcard .kcard-actions .btn { width: 44px; height: 44px; }
  .kcard-actions { margin: -12px -12px -10px 0; }
  .pa-card .seg.toggle .seg-btn { height: 44px; min-width: 64px; }
}
@media (max-width: 760px) {
  .view-head.pipeline-head { align-items: flex-start; padding: var(--sp-5) var(--sp-4) var(--sp-3); }
  .pipeline-head-actions { width: 100%; }
  .pipeline-head-actions .btn { flex: 1 1 0; min-height: 44px; }
  .pipeline-toolbar { padding: 0 var(--sp-4) var(--sp-3); }
  .pipeline-toolbar .search { flex: 1 1 100%; max-width: none; min-width: 0; }
  .pipeline-toolbar .search .input { min-height: 44px; }
  .pipeline-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .pipeline-filters .select { width: 100%; min-width: 0; min-height: 44px; }
  .pipeline-overdue-filter { min-height: 44px; justify-content: center; }
  .kanban { gap: 10px; padding: var(--sp-1) var(--sp-4) var(--sp-4); scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-4); }
  /* One column in view with the next one peeking, so the sideways scroll is obvious. */
  .kanban-col { flex-basis: min(calc(100vw - 106px), 320px); width: min(calc(100vw - 106px), 320px); }
}
/* ==== END pipeline ==== */

/* ==== ROSE UI 2026 · lead ==== */

/* ==== END lead ==== */

/* ==== ROSE UI 2026 · dashboard ==== */
/* The admin landing view (app-analytics.js). Built on the Rose UI 2026
   tokens; every token read here carries a fallback to its value in the
   design contract, so the screen renders the same before and after the
   foundation layer lands. Fallbacks for shared components are wrapped in
   :where() so the shared definitions always win once they exist. */

.dash {
  --d-card: var(--card, var(--surface));
  --d-card-2: var(--card-2, var(--surface-2));
  --d-paper: var(--paper, #F1EEE7);
  --d-paper-2: var(--paper-2, #E8E4DA);
  --d-muted: var(--muted, #5E6270);
  --d-line: var(--line, rgba(11, 13, 18, .08));
  --d-line-strong: var(--line-strong, rgba(11, 13, 18, .16));
  --d-volt: var(--volt, #CFF465);
  --d-volt-ink: var(--volt-ink, #1F2A00);
  --d-volt-soft: var(--volt-soft, rgba(207, 244, 101, .28));
  --d-coral: var(--coral, #F0584B);
  --d-coral-soft: var(--coral-soft, rgba(240, 88, 75, .12));
  --d-coral-text: var(--coral-text, color-mix(in srgb, var(--d-coral) 70%, #0B0D12));
  --d-ink-panel: var(--ink-panel, #0B0D12);
  --d-brand: var(--brand, var(--accent));
  --d-brand-ink: var(--brand-ink, #FFFFFF);
  --d-r-card: var(--r-card, 16px);
  --d-r-ctl: var(--r-ctl, 10px);
  --d-shadow: var(--shadow-card, 0 1px 2px rgba(11, 13, 18, .04), 0 10px 30px -12px rgba(11, 13, 18, .14));
  --d-shadow-pop: var(--shadow-pop, 0 2px 4px rgba(11, 13, 18, .06), 0 24px 48px -16px rgba(11, 13, 18, .22));
  --d-ease: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
  --d-ease-io: var(--ease-in-out, cubic-bezier(.65, 0, .35, 1));
  --d-dur-2: var(--dur-2, 220ms);
  --d-dur-3: var(--dur-3, 420ms);
  --d-dur-4: var(--dur-4, 700ms);
  /* the wins series wears the won stage's own colour */
  --dash-won: var(--stage-treatment_started, #4D7C0F);
  --dash-trend-ink: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1440px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dash {
    --d-muted: var(--muted, #9AA0AD);
    --d-line: var(--line, rgba(241, 238, 231, .08));
    --d-line-strong: var(--line-strong, rgba(241, 238, 231, .16));
    --d-paper: var(--paper, #0B0D12);
    --d-paper-2: var(--paper-2, #12151C);
    --d-coral: var(--coral, #FF6B5E);
    --d-coral-soft: var(--coral-soft, rgba(255, 107, 94, .16));
    --d-coral-text: var(--coral-text, color-mix(in srgb, var(--d-coral) 82%, #FFFFFF));
    --d-volt-soft: var(--volt-soft, rgba(207, 244, 101, .16));
  }
}
:root[data-theme="dark"] .dash {
  --d-muted: var(--muted, #9AA0AD);
  --d-line: var(--line, rgba(241, 238, 231, .08));
  --d-line-strong: var(--line-strong, rgba(241, 238, 231, .16));
  --d-paper: var(--paper, #0B0D12);
  --d-paper-2: var(--paper-2, #12151C);
  --d-coral: var(--coral, #FF6B5E);
  --d-coral-soft: var(--coral-soft, rgba(255, 107, 94, .16));
  --d-coral-text: var(--coral-text, color-mix(in srgb, var(--d-coral) 82%, #FFFFFF));
  --d-volt-soft: var(--volt-soft, rgba(207, 244, 101, .16));
}

.dash .dash-ico { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
.dash span.dash-ico { display: inline-grid; place-items: center; }
.dash span.dash-ico > svg { width: 100%; height: 100%; }

/* ---- header: what this is, the one next step, then the controls ------ */
.dash .dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 0;
}
.dash .dash-primary { flex: 0 0 auto; }
.dash .dash-primary .btn { min-height: 40px; padding: 0 16px; font-weight: 600; }
.dash .dash-btn-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  margin-left: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--d-volt-ink) 14%, transparent);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.dash .dash-head-text { min-width: 0; flex: 0 0 auto; display: grid; align-content: start; gap: 6px; }
.dash .dash-title {
  margin: 0;
  font-size: var(--fs-2xl, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}
.dash .dash-context { margin: 0; font-size: var(--fs-md); color: var(--d-muted); line-height: 1.45; }

.dash .dash-controls { padding: 0; margin-top: -8px; gap: 8px; align-items: center; flex-wrap: wrap; }
.dash .dash-controls-gap { flex: 1 1 0; min-width: 0; }
.dash .dash-icon-btn { width: 36px; padding: 0; justify-content: center; }
.dash .dash-seg .seg-btn { min-width: 44px; }
.dash .dash-select {
  height: 36px;
  min-width: 150px;
  width: auto;
  flex: 0 0 auto;
  padding-left: 12px;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--d-r-ctl);
  background-color: var(--d-card);
  color: var(--ink);
  font-size: var(--fs-sm);
}
.dash .dash-btn { gap: 6px; }

.dash :is(button, select, a):focus-visible {
  outline: 2px solid var(--d-volt);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ink);
}

/* ---- section heads and the kicker ------------------------------------ */
.dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dash .chart-note { font-size: var(--fs-xs); color: var(--d-muted); margin-left: 0; text-align: left; }
.dash .dash-note { margin: -4px 0 12px; font-size: var(--fs-sm); color: var(--d-muted); }
.dash .dash-note[hidden] { display: none; }

/* ---- anything that opens a list: hover lift and a quiet "View" ------- */
.dash button.stat,
.dash button.dash-ws-total,
.dash button.dash-fstep,
.dash button.dash-src-chip {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dash button.stat { width: 100%; }
.dash .stat > .stat-label,
.dash .stat > .stat-value,
.dash .stat > .stat-foot { display: block; }
.dash .dash-view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--d-muted);
  transition: color var(--d-dur-2) var(--d-ease);
}
.dash .dash-view-ico { width: 13px; height: 13px; transition: transform var(--d-dur-2) var(--d-ease); }
.dash .is-link:hover .dash-view,
.dash .is-link:focus-visible .dash-view,
.dash .dash-ws-total:hover .dash-view { color: var(--ink); }
.dash .is-link:hover .dash-view-ico,
.dash .is-link:focus-visible .dash-view-ico,
.dash .dash-ws-total:hover .dash-view-ico { transform: translateX(3px); }
.dash .dash-row-go {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  color: var(--d-muted);
  opacity: .45;
  transition: opacity var(--d-dur-2) var(--d-ease), transform var(--d-dur-2) var(--d-ease);
}
.dash .dash-row-go .dash-ico { width: 14px; height: 14px; }
.dash :is(.dash-lead, .dash-fstep):is(:hover, :focus-visible) .dash-row-go { opacity: 1; color: var(--ink); transform: translateX(2px); }

/* ---- disclosures: the depth, one tap away ------------------------------ */
.dash .dash-disclosure-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.dash .dash-disclosure-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--d-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash .dash-disclosure > summary { gap: 10px; }
.dash .dash-disclosure > summary .disclosure-count { order: 1; }
.dash #dash-more-numbers { margin-top: 12px; }
.dash #dash-more-numbers .dash-more { margin-top: 8px; }
.dash .dash-detail > summary { min-height: 44px; }
.dash .dash-detail-body { display: flex; flex-direction: column; gap: 24px; margin-top: 12px; }

/* ---- the headline figures -------------------------------------------- */
.dash .dash-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dash .stat.dash-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 18px;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  background: var(--d-card);
  box-shadow: var(--d-shadow);
  transition: transform var(--d-dur-2) var(--d-ease), box-shadow var(--d-dur-2) var(--d-ease);
}
.dash .stat.dash-kpi:hover { transform: translateY(-2px); box-shadow: var(--d-shadow-pop); }
.dash .stat.dash-kpi:active { transform: translateY(0) scale(.99); }
.dash .stat.dash-kpi .dash-view { position: absolute; top: 20px; right: 18px; }
.dash .stat.dash-kpi.is-link .stat-label { padding-right: 56px; }
.dash .stat .stat-label {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--d-muted);
  white-space: normal;
}
.dash .stat.dash-kpi .stat-value {
  margin: 2px 0 0;
  font-family: inherit;
  font-size: var(--fs-3xl, 40px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.dash .stat .stat-foot { margin: 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--d-muted); }
.dash .stat.dash-kpi .stat-foot { margin-top: auto; }
.dash .stat-delta-slot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 22px; }
.dash .stat-delta-slot[hidden] { display: none; }
.dash-delta-note { font-size: var(--fs-xs); color: var(--d-muted); }

/* chips drawn here: delta, counts, pills, stages */
.dash .dash-delta, .dash .dash-pill, .dash .dash-attn-count, .dash .dash-lead-stage {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.dash .dash-delta .dash-delta-ico { width: 12px; height: 12px; stroke-width: 2; }
.dash .dash-delta.is-up { background: var(--d-volt); color: var(--d-volt-ink); }
.dash .dash-delta.is-down, .dash .dash-pill, .dash .dash-attn-count { background: var(--d-coral-soft); color: var(--d-coral-text); }
.dash .dash-delta.is-flat { background: transparent; color: var(--d-muted); box-shadow: inset 0 0 0 1px var(--d-line-strong); font-weight: 500; }
.dash .dash-lead-stage {
  height: 20px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--stage-b, var(--d-card-2));
  color: var(--stage-t, var(--d-muted));
}

/* the rest of the window, in one quiet strip */
.dash .dash-more {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin-top: 16px;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  background: var(--d-line);
  box-shadow: var(--d-shadow);
  overflow: hidden;
}
.dash .stat.dash-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: var(--d-card);
  box-shadow: none;
  min-width: 0;
}
.dash .stat.dash-mini .stat-label { font-size: var(--fs-xs); }
.dash .stat.dash-mini .stat-value {
  margin: 0;
  font-family: inherit;
  font-size: var(--fs-xl);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.dash .stat.dash-mini .stat-foot { font-size: 11.5px; }
.dash .stat.dash-mini .stat-delta-slot { display: none; }
.dash button.stat.dash-mini { position: relative; transition: background var(--d-dur-2) var(--d-ease); }
.dash button.stat.dash-mini:hover { background: var(--d-card-2); }
.dash .stat.dash-mini .dash-view { position: absolute; top: 12px; right: 12px; font-size: 0; opacity: .5; }
.dash .stat.dash-mini.is-link .stat-label { padding-right: 18px; }
.dash .stat.dash-mini:is(:hover, :focus-visible) .dash-view { opacity: 1; }

/* ---- cards ------------------------------------------------------------ */
.dash .dash-row { display: grid; gap: 24px; align-items: stretch; }
.dash .dash-row--flow { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dash .chart,
.dash .dash-card {
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  background: var(--d-card);
  box-shadow: var(--d-shadow);
  overflow: visible;
}
.dash .dash-card { display: flex; flex-direction: column; min-width: 0; }
.dash .dash-card-head,
.dash .chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 18px 20px 10px;
  border-bottom: 0;
}
.dash .dash-card-titles { display: grid; gap: 6px; min-width: 0; }
.dash .dash-card-title,
.dash .chart-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.dash .chart-head .chart-note { margin-left: auto; text-align: right; }
.dash .dash-card-head .chart-note { padding-top: 2px; text-align: right; }
.dash .chart-body { padding: 6px 20px 20px; overflow-x: visible; }
.dash .chart-legend { padding: 0 20px 18px; }
.dash .legend-value { font-family: inherit; color: var(--d-muted); }
.dash .legend-item { color: var(--ink); }

/* ---- where leads come from -------------------------------------------- */
.dash .dash-flow-card .dash-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.dash .dash-flow {
  flex: 1 1 auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(72px, 1fr) minmax(210px, 256px);
  align-items: center;
  gap: 0;
  min-height: 300px;
  padding: 22px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 1px 1px, var(--d-line-strong) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--d-paper);
  isolation: isolate;
}
.dash .dash-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.dash .dash-wires .dash-wire {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: .3;
  stroke-linecap: round;
}
.dash .dash-wires .dash-wire.is-unknown { stroke-dasharray: 3 5; stroke-opacity: .4; }
.dash .dash-wires .dash-pulse,
.dash .dash-wires .dash-pulse-under {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 3 197;
  stroke-dashoffset: 6;
  animation: dash-travel 3.4s var(--d-ease-io) infinite both;
}
.dash .dash-wires .dash-pulse { stroke: var(--d-volt); }
.dash .dash-wires .dash-pulse-under { stroke: var(--d-ink-panel); }
/* The pulses repaint every frame: on their own layer that is all that repaints,
   and they rest while the diagram is scrolled out of sight. */
.dash .dash-pulses { will-change: transform; }
.dash .dash-flow.is-offscreen .dash-pulses path { animation-play-state: paused; }
@keyframes dash-travel {
  0% { stroke-dashoffset: 6; }
  70% { stroke-dashoffset: -106; }
  100% { stroke-dashoffset: -106; }
}

.dash .dash-sources {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash .dash-src { display: flex; align-items: center; min-width: 0; }
.dash .dash-src-chip {
  transition: transform var(--d-dur-2) var(--d-ease), box-shadow var(--d-dur-2) var(--d-ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  max-width: 100%;
  padding: 0 6px 0 10px;
  border: 1px solid var(--d-line);
  border-radius: 999px;
  background: var(--d-card);
  box-shadow: 0 1px 2px rgba(11, 13, 18, .06), 0 6px 16px -10px rgba(11, 13, 18, .25);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 550;
}
.dash .dash-src-chip:hover { transform: translateY(-1px); box-shadow: var(--d-shadow-pop); }
.dash .dash-src-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash .dash-src-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--d-card-2);
  box-shadow: inset 0 0 0 1px var(--d-line);
  font-weight: 650;
}
.dash .dash-src.is-unknown .dash-src-chip {
  border-style: dashed;
  border-color: var(--d-line-strong);
  background: var(--d-card-2);
  color: var(--d-muted);
  box-shadow: none;
}
.dash .dash-src.is-unknown .dash-src-count { background: transparent; box-shadow: inset 0 0 0 1px var(--d-line-strong); color: var(--ink); }

.dash .dash-ws {
  grid-column: 3;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--d-line);
  border-radius: 14px;
  background: var(--d-card);
  box-shadow: var(--d-shadow-pop);
}
.dash .dash-ws-port {
  position: absolute;
  left: -6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--d-volt);
  box-shadow: 0 0 0 2px var(--d-ink-panel), 0 0 0 5px var(--d-card);
}
.dash .dash-ws-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 13px 13px 0 0;
  background: var(--d-brand);
  color: var(--d-brand-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  min-width: 0;
}
.dash .dash-ws-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  /* The workspace initial as a tile: the brand pair inverted, so it reads at the
     brand's own contrast (a white tint over the brand did not reach 4.5:1). */
  background: var(--d-brand-ink);
  color: var(--d-brand);
  font-size: 12px;
  font-weight: 700;
}
.dash .dash-ws-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash .dash-ws-total {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px 16px 12px;
  border: 0;
  background: transparent;
  transition: background var(--d-dur-2) var(--d-ease);
}
.dash .dash-ws-total:hover { background: var(--d-card-2); }
.dash .dash-ws-total .dash-view { position: absolute; top: 16px; right: 14px; }
.dash .dash-ws-num { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.dash .dash-ws-caption { font-size: var(--fs-xs); color: var(--d-muted); line-height: 1.4; }
.dash .dash-ws-sub {
  padding: 10px 16px 2px;
  border-top: 1px solid var(--d-line);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--d-muted);
}
.dash .dash-ws-list,
.dash .dash-attn-list { margin: 0; padding: 4px 6px 8px; list-style: none; display: grid; gap: 2px; }

/* a person, as a row you can open */
.dash .dash-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--d-dur-2) var(--d-ease);
}
.dash .dash-lead:hover { background: var(--d-card-2); }
.dash .dash-lead:active { transform: scale(.99); }
.dash .dash-lead-main { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }
.dash .dash-lead-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash .dash-lead-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--d-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dash .dash-lead-ico { width: 13px; height: 13px; }
.dash .dash-ws-lead .dash-lead-stage { flex: 0 0 auto; }
.dash .dash-av { flex: 0 0 auto; }

/* the list behind a number, in the shared drawer (outside .dash) */
.dash-list { display: flex; flex-direction: column; gap: 10px; }
.dash-list-note { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.dash-list-rows { margin: 0 -8px; padding: 0; list-style: none; display: grid; gap: 2px; }
.dash-list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-2, 220ms) var(--ease-out, ease);
}
.dash-list-row:hover { background: var(--card-2); }
.dash-list-row:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink); }
.dash-list-row .avatar { flex: 0 0 auto; }
.dash-list-main { display: grid; gap: 3px; min-width: 0; }
.dash-list-name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list-fact { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list-where { display: inline-flex; justify-content: flex-end; min-width: 0; }
.dash-list-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}
.dash-list-go .dash-ico { width: 13px; height: 13px; transition: transform var(--dur-2, 220ms) var(--ease-out, ease); }
.dash-list-row:is(:hover, :focus-visible) .dash-list-go { color: var(--ink); }
.dash-list-row:is(:hover, :focus-visible) .dash-list-go .dash-ico { transform: translateX(3px); }
.dash-list-row .dash-lead-stage {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--stage-b);
  color: var(--stage-t);
}
.dash-list-foot { display: flex; justify-content: flex-end; width: 100%; }
.dash-list-foot .btn { gap: 6px; }
.dash-list-foot .dash-ico { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .dash-list-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dash-list-where { grid-column: 2 / 3; grid-row: 2; justify-content: flex-start; }
  .dash-list-go { font-size: 0; }
}

/* honesty notes under the diagram */
.dash .attr-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--d-line);
  border-radius: 10px;
  background: var(--d-card-2);
  box-shadow: none;
  color: var(--d-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.dash .attr-unknown {
  flex: 0 0 auto;
  height: 20px;
  padding: 0 8px 0 6px;
  gap: 6px;
  border-radius: 999px;
  background: var(--d-card);
  background-image: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.dash .attr-unknown::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background-color: var(--unknown-bg, var(--d-card-2));
  background-image: var(--hatch);
  box-shadow: inset 0 0 0 1px var(--d-line-strong);
}
.dash .badge { font-family: inherit; text-transform: none; letter-spacing: 0; border-radius: 999px; }

/* ---- where attention is needed ---------------------------------------- */
.dash .dash-now {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 4px 20px 0;
  border-bottom: 1px solid var(--d-line);
  background: var(--d-line);
}
.dash .dash-now .stat.dash-mini { padding: 8px 12px 14px 14px; }
.dash .dash-now .stat.dash-mini:first-child { padding-left: 0; }
.dash .dash-now .stat-foot { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash .dash-attn-body { padding: 10px 12px 14px; }
.dash .dash-attn-group + .dash-attn-group { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--d-line); }
.dash .dash-attn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 8px 2px; }
.dash .dash-attn-what { font-size: var(--fs-xs); color: var(--d-muted); }
.dash .dash-pill { flex: 0 0 auto; height: 22px; font-size: 11.5px; }
.dash .dash-attn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin: 0 4px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.dash .dash-attn-link:hover { background: var(--d-card-2); }
.dash .dash-link-ico { width: 14px; height: 14px; transition: transform var(--d-dur-2) var(--d-ease); }
.dash .dash-attn-link:hover .dash-link-ico { transform: translateX(3px); }

/* ---- the stage funnel ------------------------------------------------- */
.dash .dash-funnel { margin: 0 -10px; padding: 0; list-style: none; display: grid; gap: 2px; }
.dash .dash-fstep {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) 48px minmax(170px, 220px) 18px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 42px;
  padding: 4px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  transition: background var(--d-dur-2) var(--d-ease);
}
.dash .dash-fstep:hover { background: var(--d-card-2); }
.dash .dash-fstep-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink);
}
.dash .dash-fstep-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--stage-c);
}
.dash .dash-fstep-track {
  display: block;
  height: 22px;
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--d-paper-2) 55%, transparent);
  overflow: hidden;
}
.dash .dash-fstep-bar {
  display: block;
  width: calc(var(--pct, 0) * 100%);
  height: 100%;
  border-radius: 0 5px 5px 0;
  background: var(--stage-c);
  transform-origin: left center;
  animation: dash-grow var(--d-dur-4) var(--d-ease) both;
  animation-delay: calc(min(var(--i, 0), 12) * 70ms + 120ms);
}
@keyframes dash-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dash .dash-fstep-num { font-size: var(--fs-lg); font-weight: 650; text-align: right; color: var(--ink); }
.dash .dash-fstep-conv { font-size: var(--fs-xs); color: var(--d-muted); line-height: 1.35; }
.dash .dash-conv-pct { font-weight: 650; color: var(--ink); }
.dash .dash-conv-drop::before { content: " · "; }
.dash .dash-conv-muted { color: var(--d-muted); }
.dash .dash-outcomes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--d-line); }
.dash .dash-outcomes-head {
  display: flex;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
}
.dash .dash-outcomes-title { font-weight: 600; color: var(--ink); }
.dash .dash-fstep.is-won .dash-fstep-bar,
.dash .dash-fstep.is-won .dash-fstep-dot {
  background: var(--d-volt);
  box-shadow: inset 0 0 0 1px rgba(31, 42, 0, .28);
}
.dash .dash-fstep.is-lost .dash-fstep-bar,
.dash .dash-fstep.is-lost .dash-fstep-dot { background: var(--stage-not_proceeding); }

/* ---- over time -------------------------------------------------------- */
.dash .dash-trend-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dash .dash-trend-bar {
  fill: var(--dash-trend-ink);
  opacity: .88;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: dash-grow-y var(--d-dur-4) var(--d-ease) both;
  animation-delay: calc(min(var(--i, 0), 30) * 18ms + 150ms);
}
@keyframes dash-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.dash .dash-trend-line { fill: none; stroke: var(--dash-won); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash .dash-trend-dot { fill: var(--dash-won); stroke: var(--d-card); stroke-width: 2; }
.dash .dash-axis-text { fill: var(--d-muted); font-family: var(--font-ui); font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dash .dash-grid-line { stroke: var(--d-line); stroke-width: 1; }
.dash .dash-axis-line { stroke: var(--d-line-strong); stroke-width: 1; }

/* ---- the detail -------------------------------------------------------- */
.dash .dash-detail-head { margin: 8px 0 -4px; }
.dash .dash-detail-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.dash .dash-grid { gap: 24px; }
.dash .dash-grid--wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.dash .dash-stack { gap: 24px; }
.dash .bar-row { grid-template-columns: minmax(96px, 170px) minmax(0, 1fr) 56px; gap: 12px; padding: 6px 0; font-size: var(--fs-sm); }
.dash .bar-label { color: var(--ink); }
.dash .bar-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--d-paper-2) 70%, transparent); }
.dash .bar-fill { border-radius: 999px; }
.dash .bar-value { font-family: inherit; font-weight: 600; color: var(--ink); }
.dash .t-num { font-family: inherit; font-variant-numeric: tabular-nums; }
.dash .funnel-drop { font-family: inherit; }
.dash .table th { font-family: inherit; text-transform: none; letter-spacing: 0; }

/* ---- empty and loading ------------------------------------------------- */
.dash .empty { color: var(--d-muted); }
.dash .empty-title { font-size: var(--fs-md); font-weight: 650; color: var(--ink); }
.dash .empty-text { color: var(--d-muted); }
.dash .dash-empty { padding: 72px 24px; border: 1px solid var(--d-line); border-radius: var(--d-r-card); background: var(--d-card); box-shadow: var(--d-shadow); }
.dash .dash-empty-ok { padding: 28px 16px 20px; }
.dash-skel { display: flex; flex-direction: column; gap: 24px; }
.dash .dash-skel-tile { height: 132px; border-radius: var(--d-r-card); background: var(--d-paper-2); }
.dash .dash-skel-card { height: 220px; border-radius: var(--d-r-card); background: var(--d-paper-2); }
.dash .dash-skel-card.is-tall { height: 340px; }

/* ---- entrance: the shared .m-stagger rises the cards and the pills ---- */
@media (prefers-reduced-motion: reduce) {
  .dash .dash-fstep-bar,
  .dash .dash-trend-bar { animation: none; }
  .dash .dash-wires .dash-pulse, .dash .dash-wires .dash-pulse-under { display: none; }
  .dash .stat.dash-kpi:hover { transform: none; }
}

/* ---- widths ------------------------------------------------------------ */
@media (max-width: 1280px) {
  .dash .dash-more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .dash .dash-row--flow { grid-template-columns: minmax(0, 1fr); }
  .dash .dash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash .dash-grid--wide-left { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .dash .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash .dash-fstep { grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) 40px 18px; }
  .dash .dash-fstep-conv { grid-column: 2 / 4; grid-row: 2; margin-top: -6px; }
}
@media (max-width: 640px) {
  .dash { gap: 22px; }
  .dash .dash-title { font-size: 26px; }
  .dash .dash-controls { width: 100%; }
  .dash .dash-seg { width: 100%; justify-content: space-between; }
  .dash .dash-seg .seg-btn { flex: 1 1 0; min-height: 40px; padding: 0 6px; }
  .dash .dash-select { flex: 1 1 100%; min-height: 44px; }
  .dash .dash-btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .dash .dash-kpi-row { gap: 12px; }
  .dash .stat.dash-kpi { padding: 16px 14px 14px; }
  .dash .stat.dash-kpi .stat-value { font-size: clamp(24px, 7.2vw, 32px); }
  .dash .stat.dash-kpi .dash-view { position: static; margin-top: 6px; }
  .dash .stat.dash-kpi.is-link .stat-label { padding-right: 0; }
  .dash .dash-now .stat-foot { display: none; }
  .dash .dash-delta-note { flex-basis: 100%; }
  .dash .dash-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash .chart-head .chart-note, .dash .dash-card-head .chart-note { margin-left: 0; text-align: left; }
  .dash .chart-body { padding: 4px 16px 18px; }
  .dash .dash-card-head, .dash .chart-head { padding: 16px 16px 8px; }
  /* the diagram folds: pills in a wrap, then the workspace below them */
  .dash .dash-flow { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 16px; min-height: 0; }
  .dash .dash-wires { display: none; }
  .dash .dash-sources { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .dash .dash-src-chip { height: 34px; }
  .dash .dash-ws-port { left: 50%; top: -6px; margin: 0 0 0 -5.5px; }
  .dash .dash-now { margin: 4px 16px 0; }
  .dash .dash-now .stat.dash-mini .stat-value { font-size: var(--fs-lg); }
  .dash .dash-fstep { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 6px 12px; padding: 8px 10px; }
  .dash .dash-fstep-track { grid-column: 1 / -1; grid-row: 2; height: 16px; }
  .dash .dash-fstep-conv { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .dash .dash-head { flex-direction: column; align-items: stretch; }
  .dash .dash-primary .btn { width: 100%; justify-content: center; min-height: 44px; }
  .dash .dash-controls { margin-top: 0; }
  .dash .dash-controls-gap { display: none; }
  .dash .dash-icon-btn { flex: 0 0 44px; width: 44px; }
  .dash .dash-disclosure-hint { display: none; }
  .dash .dash-lead { min-height: 52px; }
  .dash .attr-note { flex-direction: column; gap: 6px; }
  .dash .bar-row { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) 40px; font-size: var(--fs-xs); }
}
/* ==== END dashboard ==== */

/* ==== ROSE UI 2026 · contacts ==== */
/* Contacts, Companies, Legacy Leads and the New lead form. Screen scoped:
   .cx (contacts), .co (companies), .lg (legacy leads). Every colour comes from
   the shared tokens; the --cx-* names are local shorthands for them. */
.cx, .co, .lg {
  --cx-card: var(--card);
  --cx-card-2: var(--card-2);
  --cx-paper-2: var(--paper-2);
  --cx-line: var(--line);
  --cx-line-strong: var(--line-strong);
  --cx-ink: var(--ink);
  --cx-ink-2: var(--text-2);
  --cx-muted: var(--muted);
  --cx-volt: var(--volt);
  --cx-volt-ink: var(--volt-ink);
  --cx-volt-soft: var(--volt-soft);
  --cx-coral: var(--coral);
  --cx-coral-soft: var(--coral-soft);
  --cx-coral-ink: var(--coral-text);
  --cx-r-card: var(--r-card);
  --cx-r-ctl: var(--r-ctl);
  --cx-shadow: var(--shadow-card);
  --cx-shadow-pop: var(--shadow-pop);
  --cx-ease: var(--ease-out);
  --cx-dur: var(--dur-2);
  --cx-row-h: 64px;
}

.cx .chip.attr-unknown { height: auto; padding: 4px 10px; }

/* ---- view header extras ---- */
.cx-sep { color: var(--cx-line-strong); }
.cx-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-variant-numeric: tabular-nums; }
.cx-sum-n { color: var(--cx-ink); font-weight: 600; }
.cx-sum-overdue { color: var(--cx-coral-ink); font-weight: 600; }
.cx-head .view-head-actions .btn { gap: 6px; }

/* stage dot on filter toggles (the stage chip draws its own) */
.cx .chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--stage-c, currentColor); }

/* filter toggles */
:is(.cx, .co, .lg) .cx-fchip {
  position: relative;
  height: 32px;
  padding: 0 12px;
  border: 1px solid;
  background: var(--cx-card);
  border-color: var(--cx-line-strong);
  color: var(--cx-ink-2);
  cursor: pointer;
  transition: transform var(--cx-dur) var(--cx-ease), background-color var(--cx-dur) var(--cx-ease),
    border-color var(--cx-dur) var(--cx-ease), color var(--cx-dur) var(--cx-ease);
}
:is(.cx, .co, .lg) .cx-fchip:hover { border-color: var(--cx-ink); color: var(--cx-ink); }
:is(.cx, .co, .lg) .cx-fchip:active { transform: scale(.97); }
:is(.cx, .co, .lg) .cx-fchip[aria-pressed="true"] {
  background: var(--cx-ink);
  border-color: var(--cx-ink);
  color: var(--cx-card);
}
:is(.cx, .co, .lg) .cx-fchip[aria-pressed="true"] .icon { color: inherit; }
:is(.cx, .co, .lg) .cx-fchip.is-unknown { border-style: dashed; }
:is(.cx, .co, .lg) .cx-fchip.is-unknown:not([aria-pressed="true"]) { background-image: var(--hatch); background-color: var(--unknown-bg); color: var(--unknown-fg); }

/* ---- toolbar: search, selects, sort ---- */
.cx-filters { margin-bottom: var(--sp-4); }
.cx .cx-toolbar, .co .cx-toolbar, .lg .cx-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0; margin-bottom: 12px;
}
.cx .cx-search, .co .cx-search, .lg .cx-search {
  position: relative; display: flex; align-items: center;
  flex: 1 1 260px; min-width: 0; max-width: none;
}
.cx .cx-search .input, .co .cx-search .input, .lg .cx-search .input {
  height: 40px; width: 100%;
  padding: 0 40px 0 38px;
  border-radius: 999px;
  border: 1px solid var(--cx-line-strong);
  background: var(--cx-card);
  color: var(--cx-ink);
  font-size: var(--fs-md);
  box-shadow: 0 1px 2px rgba(11, 13, 18, .04);
  transition: border-color var(--cx-dur) var(--cx-ease), box-shadow var(--cx-dur) var(--cx-ease);
}
.cx .cx-search .input::placeholder, .co .cx-search .input::placeholder, .lg .cx-search .input::placeholder { color: var(--cx-muted); }
.cx .cx-search .input:focus, .co .cx-search .input:focus, .lg .cx-search .input:focus {
  border-color: var(--cx-ink);
  box-shadow: 0 0 0 4px var(--cx-volt-soft);
}
.cx .cx-search .search-icon, .co .cx-search .search-icon, .lg .cx-search .search-icon {
  left: 14px; color: var(--cx-muted); display: inline-flex; font-size: 0;
}
.cx-kbd {
  position: absolute; right: 12px;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--cx-line-strong); border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--cx-muted);
  pointer-events: none;
  transition: opacity var(--cx-dur) var(--cx-ease);
}
.cx-search .input:focus ~ .cx-kbd,
.cx-search .input:not(:placeholder-shown) ~ .cx-kbd { opacity: 0; }
.cx-selects { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cx .cx-select, .co .cx-select, .lg .cx-select {
  width: auto; height: 40px;
  padding: 0 32px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--cx-line-strong);
  background-color: var(--cx-card);
  color: var(--cx-ink);
  font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
  transition: border-color var(--cx-dur) var(--cx-ease), box-shadow var(--cx-dur) var(--cx-ease);
}
.cx .cx-select:hover, .co .cx-select:hover, .lg .cx-select:hover { border-color: var(--cx-ink); }
.cx .cx-select.is-set, .lg .cx-select.is-set { border-color: var(--cx-ink); box-shadow: inset 0 0 0 1px var(--cx-ink); }
.cx-sort { position: relative; display: inline-flex; align-items: center; }
.cx-sort > .icon { position: absolute; left: 12px; color: var(--cx-muted); pointer-events: none; }
.cx-sort .cx-select { padding-left: 34px; }
:is(.cx, .co) .cx-sort {
  width: 40px; height: 40px; justify-content: center;
  border: 1px solid var(--cx-line-strong); border-radius: 50%; background: var(--cx-card);
  transition: border-color var(--cx-dur) var(--cx-ease);
}
:is(.cx, .co) .cx-sort:hover, :is(.cx, .co) .cx-sort:focus-within { border-color: var(--cx-ink); }
:is(.cx, .co) .cx-sort > .icon { position: static; color: var(--cx-ink); }
:is(.cx, .co) .cx-sort .cx-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; cursor: pointer; }
.cx .cx-selects .cx-select:not(#contacts-sort) { max-width: 176px; }

.cx-chiprow { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 8px; }
.cx-chiprow-label { flex: 0 0 52px; font-size: var(--fs-xs); font-weight: 500; color: var(--cx-muted); }
.cx-chips {
  display: flex; gap: 6px; min-width: 0; flex: 1 1 auto;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 3px 24px 3px 2px; margin: -3px 0;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.cx-chips::-webkit-scrollbar { display: none; }
.cx-chips > .chip { flex: 0 0 auto; overflow: visible; }

/* ---- filter popovers: one button per filter, choices one tap away ---- */
.cx-pop { position: relative; }
.cx-pop-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px 0 14px;
  border: 1px solid var(--cx-line-strong); border-radius: 999px;
  background: var(--cx-card); color: var(--cx-ink);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--cx-dur) var(--cx-ease), box-shadow var(--cx-dur) var(--cx-ease);
}
.cx-pop-btn:hover { border-color: var(--cx-ink); }
.cx-pop-btn.is-set { border-color: var(--cx-ink); box-shadow: inset 0 0 0 1px var(--cx-ink); }
.cx-pop-btn > .icon:last-child { width: 14px; height: 14px; color: var(--cx-muted); transition: transform var(--cx-dur) var(--cx-ease); }
.cx-pop.is-open .cx-pop-btn > .icon:last-child { transform: rotate(180deg); }
.cx-pop-lead { display: inline-flex; align-items: center; }
.cx-pop-lead:empty { display: none; }
.cx-pop-lead .icon { width: 14px; height: 14px; }
.cx-pop-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.cx-pop-count {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 999px; background: var(--cx-ink); color: var(--cx-card);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cx-pop-count[hidden] { display: none; }
.cx-pop-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  width: max-content; max-width: min(420px, calc(100vw - 32px));
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px;
  background: var(--cx-card);
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  box-shadow: var(--cx-shadow-pop);
  transform-origin: top left;
  animation: m-pop var(--dur-2, 220ms) var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1)) both;
}
.cx-pop-panel[hidden] { display: none; }
.cx-fchip-n { color: var(--cx-muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.cx-fchip[aria-pressed="true"] .cx-fchip-n { color: inherit; opacity: .7; }
.cx .cx-clear { height: 40px; border-radius: 999px; }
.cx .cx-clear[hidden] { display: none; }

/* ---- the split: roster left, what comes next right ---- */
.cx .cx-split { grid-template-columns: minmax(0, 1fr) minmax(280px, 304px); gap: var(--sp-5); }
.cx .cx-split > .detail-pane { position: sticky; top: calc(var(--topbar-h) + var(--sp-5)); }

/* ---- the roster: one card, airy rows that lift on hover ---- */
.cx-list { container: cxlist / inline-size; min-width: 0; }
.cx .cx-table-wrap, .co .cx-table-wrap, .lg .cx-table-wrap {
  background: var(--cx-card);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-card);
  box-shadow: var(--cx-shadow);
  overflow: visible;
  max-width: 100%;
}
.cx .cx-table, .co .cx-table, .lg .cx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.cx .cx-table thead th, .co .cx-table thead th, .lg .cx-table thead th {
  position: static;
  background: transparent;
  border-bottom: 1px solid var(--cx-line);
  padding: 14px 12px 10px;
  font-family: inherit; font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--cx-muted);
}
.cx .cx-table thead th:first-child, .co .cx-table thead th:first-child, .lg .cx-table thead th:first-child { padding-left: 20px; }
.cx .cx-table thead th:last-child, .co .cx-table thead th:last-child, .lg .cx-table thead th:last-child { padding-right: 20px; }
.cx .cx-table th.sortable, .co .cx-table th.sortable { transition: color var(--cx-dur) var(--cx-ease); }
.cx .cx-table th.t-num, .co .cx-table th.t-num, .lg .cx-table th.t-num { text-align: right; }
.cx .cx-table th.sortable:hover, .co .cx-table th.sortable:hover { color: var(--cx-ink); }
.cx .cx-table th[aria-sort="ascending"], .cx .cx-table th[aria-sort="descending"],
.co .cx-table th[aria-sort="ascending"], .co .cx-table th[aria-sort="descending"] { color: var(--cx-ink); }
.cx .cx-table tbody td, .co .cx-table tbody td, .lg .cx-table tbody td {
  height: var(--cx-row-h);
  padding: 10px 12px;
  border-bottom: 1px solid var(--cx-line);
  background: var(--cx-card);
  color: var(--cx-ink-2);
  transition: background-color var(--cx-dur) var(--cx-ease);
}
.cx .cx-table tbody td:first-child, .co .cx-table tbody td:first-child, .lg .cx-table tbody td:first-child { padding-left: 20px; }
.cx .cx-table tbody td:last-child, .co .cx-table tbody td:last-child, .lg .cx-table tbody td:last-child { padding-right: 20px; }
.cx .cx-table tbody tr:last-child td, .co .cx-table tbody tr:last-child td, .lg .cx-table tbody tr:last-child td { border-bottom: 0; }
.cx .cx-table tbody tr:last-child td:first-child, .co .cx-table tbody tr:last-child td:first-child, .lg .cx-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--cx-r-card); }
.cx .cx-table tbody tr:last-child td:last-child, .co .cx-table tbody tr:last-child td:last-child, .lg .cx-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--cx-r-card); }
/* the old 3px stage rail gives way to the stage chip */
.cx .cx-table tbody tr.cx-row td:first-child,
.co .cx-table tbody tr.cx-row td:first-child,
.lg .cx-table tbody tr.cx-row td:first-child { box-shadow: none; }
.cx-row { cursor: pointer; transition: transform var(--cx-dur) var(--cx-ease), box-shadow var(--cx-dur) var(--cx-ease); }
@media (hover: hover) {
  .cx .cx-table tbody tr.cx-row:hover,
  .co .cx-table tbody tr.cx-row:hover,
  .lg .cx-table tbody tr.cx-row:hover {
    position: relative; z-index: 1;
    transform: translateY(-2px);
    box-shadow: var(--cx-shadow-pop);
  }
  .cx .cx-table tbody tr.cx-row:hover td,
  .co .cx-table tbody tr.cx-row:hover td,
  .lg .cx-table tbody tr.cx-row:hover td { background: var(--cx-card); border-bottom-color: transparent; }
}
.cx .cx-table tbody tr.cx-row.is-selected td,
.co .cx-table tbody tr.cx-row.is-selected td { background: var(--cx-volt-soft); }
.cx-row:focus-within { position: relative; z-index: 1; }

.cx-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cx-lead .avatar { width: 36px; height: 36px; font-size: 13px; }
.cx-lead-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx .row-link, .co .row-link, .lg .row-link {
  color: var(--cx-ink); font-size: var(--fs-md); font-weight: 600;
  text-align: left; letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.cx .row-link:hover, .co .row-link:hover, .lg .row-link:hover { color: var(--cx-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cx-lead-sub {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: var(--fs-xs); color: var(--cx-muted);
  white-space: nowrap; overflow: hidden;
}
.cx-office { flex: 0 1 auto; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; }
.cx-office.is-none { color: var(--cx-muted); text-decoration: underline dotted var(--cx-line-strong); text-underline-offset: 3px; }
.cx-updated { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cx-lead-sub .cx-sep { flex: 0 0 auto; }
.cx .cx-table { table-layout: fixed; }
/* where the lead stands: the journey dots with the stage named under them */
.cx-journey { min-width: 0; }
.cx-journey .journey { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.cx-journey .journey-label { max-width: 100%; }
.cx .cx-table th.cx-c-stage { width: 160px; }
.cx .cx-table th.cx-c-source { width: 128px; }
.cx .cx-table th.cx-c-owner { width: 150px; }
.cx .cx-table th.cx-c-value { width: 96px; }
.cx .cx-table th.cx-c-next { width: 164px; }
.cx .cx-table tbody td { overflow: hidden; text-overflow: ellipsis; }
.cx .cx-c-stage .chip--stage, .cx .cx-c-source .chip { max-width: 100%; }
.cx .chip { overflow: hidden; text-overflow: ellipsis; }
.cx-owner { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 150px; }
.cx-owner-name { font-size: var(--fs-sm); color: var(--cx-ink-2); }
.cx-owner.is-none .cx-owner-name { color: var(--cx-muted); }
.cx-owner-empty {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px dashed var(--cx-line-strong);
}
.cx .cx-c-value { color: var(--cx-ink); font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; }
.cx .cx-c-value:not(.has-value) { color: var(--cx-muted); font-weight: 400; }
.cx .cx-c-next { font-family: inherit; }
.cx-next { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.cx-act {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--cx-line-strong); border-radius: 999px;
  background: var(--cx-card); color: var(--cx-ink);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  cursor: pointer;
  opacity: 0; transform: translateX(4px);
  transition: opacity var(--cx-dur) var(--cx-ease), transform var(--cx-dur) var(--cx-ease),
    border-color var(--cx-dur) var(--cx-ease), background-color var(--cx-dur) var(--cx-ease);
}
.cx-act .icon { width: 14px; height: 14px; }
.cx-act:hover { border-color: var(--cx-ink); background: var(--cx-card-2); }
.cx-row:hover .cx-act, .cx-row:focus-within .cx-act, .cx-act:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .cx-act { display: none; } }
.cx .cx-table tbody td.cx-c-next { text-overflow: clip; overflow: visible; }
.cx .cx-c-next .cx-due { max-width: 100%; }

/* due state: coral only once overdue, volt when due right now */
.cx-due {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 999px;
  background: var(--cx-paper-2);
  color: var(--cx-ink-2);
  font-size: var(--fs-xs); font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cx-due .mono, .cx-due .overdue { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; }
.cx-due .faint { color: var(--cx-muted); }
.cx-due.is-overdue { background-color: var(--cx-card, var(--card)); background-image: linear-gradient(var(--cx-coral-soft), var(--cx-coral-soft)); color: var(--cx-coral-ink); font-weight: 600; }   /* soft coral on card white, even on a tinted row */
.cx-due.is-overdue::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-coral); }
.cx-due.is-now { background: var(--cx-volt); color: var(--cx-volt-ink); font-weight: 600; }
.cx-due.is-now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-volt-ink); }
.cx-due.is-appt { background: transparent; box-shadow: inset 0 0 0 1px var(--cx-line-strong); }
.cx-due.is-appt .icon { width: 14px; height: 14px; }
.cx-due.is-none { background: transparent; color: var(--cx-muted); padding: 0; font-weight: 400; }

.cx .cx-foot, .co .cx-foot, .lg .cx-foot {
  font-family: inherit; font-size: var(--fs-xs); color: var(--cx-muted);
  padding: 12px 4px 0;
}

/* container steps: the owner's name gives way first, then the value */
@container cxlist (max-width: 900px) {
  .cx-owner-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cx-owner { max-width: none; }
  .cx .cx-table th.cx-c-owner { width: 56px; }
  .cx .cx-table th.cx-c-next { width: 148px; }
  .cx .cx-c-next .cx-due { padding: 0 8px; }
}
@container cxlist (max-width: 760px) {
  .cx .cx-c-value { display: none; }
  .cx .cx-lead-sub .cx-sep, .cx .cx-updated { display: none; }
  .cx .cx-table th.cx-c-stage { width: 140px; }
  .cx .cx-table th.cx-c-source { width: 112px; }
  .cx .cx-table tbody td { padding-left: 10px; padding-right: 10px; }
  .cx .cx-table thead th { padding-left: 10px; padding-right: 10px; }
}

/* ---- loading and empty ---- */
.cx-skeleton {
  background: var(--cx-card);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-card);
  box-shadow: var(--cx-shadow);
  overflow: hidden;
}
.cx-skel-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 110px 72px;
  align-items: center; gap: 14px;
  height: var(--cx-row-h); padding: 0 20px;
  border-bottom: 1px solid var(--cx-line);
}
.cx-skel-row:last-child { border-bottom: 0; }
.cx-skel-av { width: 36px; height: 36px; border-radius: 50%; }
.cx-skel-lines .skeleton-line { margin-bottom: 7px; max-width: 220px; }
.cx-skel-lines .skeleton-line:last-child { margin-bottom: 0; }
.cx-skel-chip { height: 24px; border-radius: 999px; }
.cx-skel-chip.is-short { width: 72px; }

.cx-empty { background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: var(--cx-r-card); box-shadow: var(--cx-shadow); }

/* ---- follow-up queue ---- */
.cx-queue { border-radius: var(--cx-r-card); border-color: var(--cx-line); box-shadow: var(--cx-shadow); background: var(--cx-card); overflow: hidden; }
.cx-queue .card-head { display: block; padding: 18px 20px 14px; border-bottom: 1px solid var(--cx-line); min-height: 0; }
.cx-queue .card-title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; color: var(--cx-ink); }
.cx-queue .card-sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--cx-muted); }
.cx-qhead { padding: 14px 20px 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--cx-muted); font-variant-numeric: tabular-nums; }
.cx-qhead.is-overdue { color: var(--cx-coral-ink); }
.cx-qlist { list-style: none; margin: 0; padding: 0 8px 6px; }
.cx-qrow {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 12px 6px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color var(--cx-dur) var(--cx-ease), transform var(--cx-dur) var(--cx-ease);
}
.cx-qrow:hover { background: var(--cx-card-2); }
.cx-qrow:active { transform: scale(.99); }
.cx-qrow.is-next { background: color-mix(in srgb, var(--cx-volt) 14%, transparent); }
.cx-next-dot {
  position: absolute; left: 3px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--cx-volt); box-shadow: 0 0 0 3px var(--cx-volt-soft);
}
.cx-qtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cx-qtext .row-link { font-size: var(--fs-sm); }
.cx-qsub { font-size: var(--fs-xs); color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-queue .card-foot { background: transparent; border-top: 1px solid var(--cx-line); padding: 12px 20px; font-size: var(--fs-xs); border-radius: 0; }
.cx-queue .card-foot .faint { color: var(--cx-muted); }

/* ---- touch: 44px targets without inflating the look ---- */
@media (pointer: coarse), (max-width: 640px) {
  .cx .cx-search .input, .co .cx-search .input, .lg .cx-search .input,
  .cx .cx-select, .co .cx-select, .lg .cx-select { height: 44px; font-size: 16px; }
  :is(.cx, .co, .lg) .cx-fchip { height: 36px; }
  :is(.cx, .co, .lg) .cx-fchip::after { content: ""; position: absolute; inset: -4px 0; }
  .cx-kbd { display: none; }
  .cx-qrow { min-height: 52px; }
}

@media (max-width: 1024px) {
  .cx .cx-split { grid-template-columns: minmax(0, 1fr); }
  .cx .cx-split > .detail-pane { position: static; }
}

/* ---- phone: rows reflow into cards, nothing scrolls sideways ---- */
@container cxlist (max-width: 560px) {
  .cx .cx-table, .cx .cx-table tbody { display: block; }
  .cx .cx-table thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .cx .cx-table tbody tr.cx-row {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(0, 1fr);
    grid-template-areas: "lead lead next" "lead lead value" "stage source owner";
    align-items: center; gap: 4px 6px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cx-line);
  }
  .cx .cx-table tbody tr.cx-row:last-child { border-bottom: 0; }
  .cx .cx-table tbody tr.cx-row td { display: block; height: auto; padding: 0; border: 0; background: transparent; min-width: 0; }
  .cx .cx-table tbody tr.cx-row:hover { transform: none; box-shadow: none; }
  .cx .cx-c-lead { grid-area: lead; }
  .cx .cx-c-next { grid-area: next; justify-self: end; align-self: end; }
  .cx .cx-c-value { grid-area: value; display: block; justify-self: end; align-self: start; text-align: right; font-size: var(--fs-xs); }
  .cx .cx-c-value:not(.has-value) { visibility: hidden; }
  .cx .cx-c-stage { grid-area: stage; margin-top: 8px; }
  .cx .cx-c-source { grid-area: source; margin-top: 8px; }
  .cx .cx-c-owner { grid-area: owner; margin-top: 8px; justify-self: end; }
  .cx .cx-c-stage .chip, .cx .cx-c-source .chip { padding: 0 9px; gap: 5px; }
  .cx .cx-updated, .cx .cx-lead-sub .cx-sep { display: none; }
  .cx .cx-act { display: none; }
  .cx .cx-c-stage .chip--stage { max-width: 150px; }
  .cx .t-wide { min-width: 0; }
  .cx-lead .avatar { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
  .cx-head { margin-bottom: var(--sp-5); align-items: center; }
  .cx .cx-toolbar { gap: 8px; }
  .cx .cx-search { flex-basis: 100%; }
  .cx-head { align-items: flex-start; flex-wrap: nowrap; }
  .cx-head .view-head-text { flex: 1 1 0; }
  .cx-head .view-head-actions .btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
  .cx-head .view-head-actions .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cx-head .view-head-actions .btn .icon { width: 20px; height: 20px; }
  .cx .cx-selects { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; width: 100%; }
  .cx .cx-selects .cx-select { width: 100%; min-width: 0; padding-right: 28px; }
  .cx .cx-pop { position: static; }
  .cx .cx-pop-btn { width: 100%; height: 44px; justify-content: space-between; font-size: 15px; }
  .cx .cx-pop-panel { left: 0; right: 0; width: auto; max-width: none; top: auto; margin-top: 8px; }
  .cx .cx-toolbar { position: relative; }
  .cx .cx-clear { grid-column: 1 / -1; height: 44px; }
  .cx .cx-pop[data-pop="stage"] { grid-column: 1; grid-row: 1; }
  .cx .cx-pop[data-pop="source"] { grid-column: 2; grid-row: 1; }
  .cx .cx-sort { grid-column: 3; grid-row: 1; }
  .cx #contacts-filter-office { grid-column: 1; grid-row: 2; }
  .cx #contacts-filter-owner { grid-column: 2 / span 2; grid-row: 2; }
  .cx-sort { width: 44px; height: 44px; border: 1px solid var(--cx-line-strong); border-radius: 50%; background: var(--cx-card); justify-content: center; }
  .cx-sort > .icon { position: static; color: var(--cx-ink); }
  .cx-sort .cx-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; }
  .cx-chiprow { align-items: flex-start; flex-direction: column; gap: 6px; }
  .cx-chiprow-label { flex: 0 0 auto; }
  .cx-chips { width: 100%; }
}
/* select arrow sits on the pill's centre line */
.cx .cx-select, .co .cx-select, .lg .cx-select {
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
}

/* ---- stat tiles: flat inside the referral card (no card in a card) ---- */
.co .co-stats .stat {
  background: var(--cx-card-2);
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  box-shadow: none;
  padding: 14px 16px;
}
.co .co-stats .stat-value { font-size: 1.75rem; }
.co .stat.is-alert, .lg .stat.is-alert { border-color: color-mix(in srgb, var(--cx-coral) 40%, var(--cx-line)); background: var(--cx-coral-soft); }
.co .stat.is-alert .stat-value, .lg .stat.is-alert .stat-value { color: var(--cx-coral-ink); }

/* ---- companies ---- */
.co .cx-split { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--sp-6); }
.co .cx-split > .detail-pane { position: sticky; top: calc(var(--topbar-h) + var(--sp-5)); }
.co .scroll-x { overflow: visible; }
.co .cx-table { table-layout: fixed; }
.co .cx-table th.co-c-kind { width: 172px; }
.co .cx-table th.co-c-people { width: 96px; }
.co .cx-table th.co-c-referred { width: 108px; }
.co .cx-table th.co-c-won { width: 96px; }
.co .cx-table tbody td { overflow: hidden; text-overflow: ellipsis; }
.co .co-c-name .row-link {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25;
}
.co .co-mono { border-radius: 10px; width: 36px; height: 36px; font-size: 12.5px; letter-spacing: .02em; }
.co .cx-skel-av.co-mono { border-radius: 10px; }
.co .co-web { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.co .co-c-people, .co .co-c-referred, .co .co-c-won { font-family: inherit; font-variant-numeric: tabular-nums; color: var(--cx-ink); }
.co .co-c-people .strong, .co .co-c-referred .strong { font-weight: 650; font-size: var(--fs-md); }
.co .co-c-won:not(.has-value) { color: var(--cx-muted); }
.co .co-unit { color: var(--cx-muted); font-size: var(--fs-xs); }
.co .co-kind { max-width: 100%; }
.co .co-kind.is-referrer { background: var(--brand-soft, var(--accent-bg)); color: var(--cx-ink); border-color: transparent; }
.co .co-kind.is-referrer .icon { color: var(--brand, var(--accent)); }
.co .company-row:focus-visible { outline: 2px solid var(--cx-volt); outline-offset: -2px; }
@container cxlist (max-width: 720px) {
  .co .co-unit { display: none; }
  .co .cx-lead-sub .cx-sep:has(+ .cx-updated), .co .cx-updated { display: none; }
  .co .cx-table th.co-c-kind { width: 150px; }
  .co .cx-table th.co-c-people, .co .cx-table th.co-c-referred { width: 76px; }
}

/* referral leaderboard */
.co-referral { border-radius: var(--cx-r-card); border-color: var(--cx-line); box-shadow: var(--cx-shadow); background: var(--cx-card); overflow: hidden; }
.co-referral .card-head { display: block; padding: 18px 20px 14px; border-bottom: 1px solid var(--cx-line); min-height: 0; }
.co-referral .card-title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; color: var(--cx-ink); }
.co-referral .card-sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--cx-muted); }
.co-referral .card-body { padding: 16px 20px 20px; }
.co .co-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.co-bars-head { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--cx-muted); padding: 0 4px 6px; border-bottom: 1px solid var(--cx-line); }
.co-bars { display: flex; flex-direction: column; }
.co .co-bar {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 4px; margin: 0;
  border-bottom: 1px solid var(--cx-line);
  cursor: pointer;
  border-radius: 10px;
  transition: background-color var(--cx-dur) var(--cx-ease);
}
.co .co-bar:last-child { border-bottom: 0; }
.co .co-bar:hover { background: var(--cx-card-2); }
.co .co-bar .co-mono { width: 32px; height: 32px; font-size: 11px; border-radius: 9px; }
.co .co-bar .bar-label { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co .co-bar .row-link { font-size: var(--fs-sm); }
.co-bar-sub { font-size: var(--fs-xs); color: var(--cx-muted); }
.co .co-bar .bar-track {
  margin-top: 6px; height: 6px; border-radius: 999px;
  background: var(--cx-paper-2); overflow: hidden;
}
.co .co-bar .bar-fill {
  height: 100%; border-radius: 999px;
  background: var(--cx-ink);
  transform-origin: left center;
}
.co .co-bar.is-top .bar-fill { background: var(--cx-volt); box-shadow: inset 0 0 0 1px rgba(31, 42, 0, .12); }
.co .co-bar .bar-fill.is-growing { animation: co-grow var(--dur-4, 700ms) var(--cx-ease) both; animation-delay: calc(min(var(--i, 0), 8) * 60ms + 120ms); }
.co .co-bar .bar-value { font-size: var(--fs-sm); font-weight: 650; color: var(--cx-ink); font-variant-numeric: tabular-nums; }
@keyframes co-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.co .co-note { margin-top: 16px; border-radius: 12px; border-color: var(--cx-line); background: var(--cx-card-2); box-shadow: none; align-items: flex-start; }
.co-note-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; flex: 0 0 auto; background: var(--unknown); background-image: var(--hatch); box-shadow: 0 0 0 1px var(--unknown); }

/* company drawer */
.co-drawer .card { border-radius: var(--cx-r-card); border-color: var(--cx-line); box-shadow: none; background: var(--cx-card); }
.co-drawer .card-head { border-bottom-color: var(--cx-line); }
.co-drawer-head { margin-bottom: var(--sp-5); }
.co-drawer .stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.co-drawer .cx-table tbody td { height: 52px; }
.co-drawer .cx-table thead th:first-child, .co-drawer .cx-table tbody td:first-child { padding-left: 16px; }

@media (max-width: 1024px) {
  .co .cx-split { grid-template-columns: minmax(0, 1fr); }
  .co .cx-split > .detail-pane { position: static; }
}
@container cxlist (max-width: 560px) {
  .co .cx-table, .co .cx-table tbody { display: block; }
  .co .cx-table thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .co .cx-table tbody tr.cx-row {
    display: grid;
    grid-template-columns: minmax(0, max-content) repeat(2, auto) minmax(0, 1fr);
    grid-template-areas: "name name name won" "kind people referred .";
    align-items: center; gap: 8px 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--cx-line);
  }
  .co .cx-table tbody tr.cx-row:last-child { border-bottom: 0; }
  .co .cx-table tbody tr.cx-row td { display: block; height: auto; padding: 0; border: 0; background: transparent; min-width: 0; }
  .co .cx-table tbody tr.cx-row:hover { transform: none; box-shadow: none; }
  .co .co-c-name { grid-area: name; }
  .co .co-c-kind { grid-area: kind; }
  .co .co-c-people { grid-area: people; text-align: left; }
  .co .co-c-referred { grid-area: referred; text-align: left; }
  .co .co-c-won { grid-area: won; justify-self: end; align-self: start; }
  .co .co-unit { display: inline; }
  .co .t-wide { min-width: 0; }
}
@media (max-width: 640px) {
  .co .cx-toolbar { flex-wrap: nowrap; }
  .co .cx-search { flex: 1 1 auto; }
  .co .cx-selects { flex: 0 0 auto; }
  .co .cx-sort { width: 44px; height: 44px; border: 1px solid var(--cx-line-strong); border-radius: 50%; background: var(--cx-card); justify-content: center; }
  .co .cx-sort > .icon { position: static; color: var(--cx-ink); }
  .co .cx-sort .cx-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; }
  .co .cx-head { align-items: flex-start; flex-wrap: nowrap; }
  .co .cx-head .view-head-text { flex: 1 1 0; }
  .cx-chiprow { align-items: flex-start; flex-direction: column; gap: 6px; }
  .cx-chiprow-label { flex: 0 0 auto; }
  .cx-chips { width: 100%; }
}

/* ---- legacy leads ---- */
.lg .legacy-shell { gap: var(--sp-6); }
.lg .cx-head { margin-bottom: 0; }
.lg .legacy-boundary {
  background: var(--cx-card);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-card);
  box-shadow: var(--cx-shadow);
  padding: 24px;
  gap: 20px 28px;
}
.lg .legacy-boundary.is-empty { display: flex; align-items: center; gap: 16px; }
.lg .legacy-boundary.is-empty strong { color: var(--cx-ink); font-size: var(--fs-md); }
.lg .legacy-boundary.is-empty p { margin-top: 2px; }
.lg .legacy-boundary h2 { font-size: var(--fs-xl); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 6px; color: var(--cx-ink); }
.lg .legacy-boundary p { color: var(--cx-muted); font-size: var(--fs-sm); }
.lg .legacy-receipt { border-color: var(--cx-line); border-radius: 12px; background: var(--cx-card-2); }
.lg .legacy-receipt > div { border-right-color: var(--cx-line); padding: 12px 14px; }
.lg .legacy-receipt dt, .lg .legacy-detail-grid dt, .lg .legacy-source-grid dt {
  font-family: inherit; font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--cx-muted);
}
.lg .legacy-receipt dd { font-family: inherit; font-size: var(--fs-md); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--cx-ink); }
.lg .legacy-rule-grid { border: 0; background: transparent; gap: 8px; }
.lg .legacy-rule-grid span {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 12px;
  border-radius: 12px;
  background: var(--cx-card-2);
  border: 1px solid var(--cx-line);
  color: var(--cx-ink-2);
}
.lg .legacy-rule-grid span::before { content: none; }
.lg .legacy-rule-grid .icon { color: var(--cx-ink); width: 15px; height: 15px; }
.lg .legacy-stats { gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg .legacy-receipt dd { white-space: normal; text-overflow: clip; }
.lg .lg-skel-card { height: 148px; border-radius: var(--cx-r-card); }
.lg .lg-skel-stat { height: 104px; border-radius: 14px; }
.lg .legacy-toolbar { padding-bottom: 0; }
.lg .legacy-toolbar .select { min-width: 180px; }
.lg .cx-selects .btn-ghost { height: 40px; border-radius: 999px; padding: 0 14px; }
.lg .legacy-table-wrap { max-height: none; }
.lg .legacy-table { min-width: 0; table-layout: fixed; }
.lg .cx-table th.lg-c-source { width: 144px; }
.lg .cx-table th.lg-c-state { width: 150px; }
.lg .cx-table th.lg-c-interest { width: 20%; }
.lg .cx-table th.lg-c-match { width: 150px; }
.lg .cx-table th.lg-c-seen { width: 112px; }
.lg .cx-table th.lg-c-rows { width: 60px; }
.lg .cx-table tbody td { overflow: hidden; text-overflow: ellipsis; }
.lg .legacy-table tbody tr { cursor: default; }
.lg .legacy-table tbody tr.is-attention td:first-child { box-shadow: none; }
.lg .legacy-open { max-width: 100%; }
.lg .legacy-attention-note {
  display: inline-flex; align-items: center; gap: 5px; width: max-content;
  margin-top: 3px; font-size: var(--fs-xs); font-weight: 600; color: var(--cx-coral-ink);
}
.lg .legacy-attention-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-coral); }
.lg .lg-c-seen, .lg .lg-c-rows { font-variant-numeric: tabular-nums; color: var(--cx-ink-2); font-family: inherit; font-size: var(--fs-sm); }
.lg .lg-interest { overflow: hidden; text-overflow: ellipsis; }
.lg .lg-c-name .cx-lead-sub { display: none; }
.lg .chip.lg-state, .lg .chip.lg-match { max-width: 100%; }
.lg .badge-ok.chip { background: var(--cx-volt-soft); color: var(--cx-ink); }
.lg .badge-warn.chip { background: color-mix(in srgb, var(--cx-coral) 9%, var(--cx-card)); color: var(--cx-coral-ink); }
.lg .badge-danger.chip { background: var(--cx-coral-soft); color: var(--cx-coral-ink); }
.lg .badge-info.chip { background: var(--brand-soft, var(--accent-bg)); color: var(--cx-ink); }
.lg .badge-muted.chip { background: var(--cx-paper-2); color: var(--cx-ink-2); }
.lg .badge-outline.chip { background: transparent; border-color: var(--cx-line-strong); color: var(--cx-ink-2); }
.lg .legacy-result-foot { font-family: inherit; font-size: var(--fs-xs); color: var(--cx-muted); }
.lg .cx-empty { margin-top: 0; }
.lg-drawer .legacy-consent-lock { border-radius: 12px; }
.lg-drawer .legacy-history { border-radius: 10px; }
@container cxlist (max-width: 1100px) {
  .lg .cx-table .lg-c-interest { display: none; }
  .lg .lg-c-name .cx-lead-sub { display: flex; }
}
.lg .legacy-ledger { container: cxlist / inline-size; }
@container cxlist (max-width: 720px) {
  .lg .cx-table .lg-c-seen, .lg .cx-table .lg-c-rows { display: none; }
}
@container cxlist (max-width: 560px) {
  .lg .cx-table, .lg .cx-table tbody { display: block; }
  .lg .cx-table thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .lg .cx-table tbody tr.cx-row {
    display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
    grid-template-areas: "name name match" "source state state";
    gap: 10px 8px; padding: 14px 16px; border-bottom: 1px solid var(--cx-line);
  }
  .lg .cx-table tbody tr.cx-row td.lg-c-interest,
  .lg .cx-table tbody tr.cx-row td.lg-c-seen,
  .lg .cx-table tbody tr.cx-row td.lg-c-rows { display: none; }
  .lg .cx-table tbody tr.cx-row:last-child { border-bottom: 0; }
  .lg .cx-table tbody tr.cx-row td { display: block; height: auto; padding: 0; border: 0; background: transparent; min-width: 0; }
  .lg .cx-table tbody tr.cx-row:hover { transform: none; box-shadow: none; }
  .lg .lg-c-name { grid-area: name; }
  .lg .lg-c-source { grid-area: source; }
  .lg .lg-c-state { grid-area: state; }
  .lg .lg-c-match { grid-area: match; justify-self: end; align-self: start; }
  .lg .t-wide { min-width: 0; }
}
@media (max-width: 900px) {
  .lg .legacy-boundary { grid-template-columns: minmax(0, 1fr); }
  .lg .legacy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lg .legacy-boundary { padding: 18px; }
  .lg .cx-search { flex-basis: 100%; }
  .lg .cx-selects { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .lg .legacy-toolbar .search, .lg .legacy-toolbar .select, .lg .legacy-toolbar .btn { width: auto; }
  .lg .legacy-toolbar .select { min-width: 0; width: 100%; }
  .lg .cx-selects .btn-ghost { height: 44px; }
  .lg .legacy-rule-grid { grid-template-columns: minmax(0, 1fr); }
  .lg .legacy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lg .stat { padding: 14px; }
  .lg .stat-value { font-size: 1.5rem; }
}

/* ---- the New lead form and the company form: grouped card sections ---- */
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .fieldset,
.co-drawer #company-form .fieldset {
  margin: 0 0 16px;
  padding: 16px 18px 6px;
  border: 1px solid var(--line, var(--border-faint));
  border-radius: var(--r-card, 16px);
  background: var(--card, var(--surface));
  box-shadow: var(--shadow-card, 0 1px 2px rgba(11, 13, 18, .04), 0 10px 30px -12px rgba(11, 13, 18, .14));
  min-width: 0;
}
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .legend,
.co-drawer #company-form .legend {
  float: left; width: 100%;
  margin: 0 0 14px; padding: 0;
  border: 0;
  font-family: inherit; font-size: var(--fs-md); font-weight: 650;
  letter-spacing: -0.01em; text-transform: none;
  color: var(--ink, var(--text));
}
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .legend + *,
.co-drawer #company-form .legend + * { clear: both; }
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .field-label,
.co-drawer #company-form .field-label { font-size: var(--fs-xs); font-weight: 500; color: var(--muted, var(--text-3)); }
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .input,
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .select,
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .textarea,
.co-drawer #company-form .input, .co-drawer #company-form .select, .co-drawer #company-form .textarea {
  border-radius: var(--r-ctl, 10px);
  border-color: var(--line-strong, var(--border));
}
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .input,
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .select,
.co-drawer #company-form .input, .co-drawer #company-form .select { height: 38px; padding-left: 12px; }
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .select,
.co-drawer #company-form .select { background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; }
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .input:focus,
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .select:focus,
#contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .textarea:focus,
.co-drawer #company-form .input:focus, .co-drawer #company-form .select:focus, .co-drawer #company-form .textarea:focus {
  border-color: var(--ink, var(--text));
  box-shadow: 0 0 0 4px var(--volt-soft, rgba(207, 244, 101, .28));
  outline: none;
}
#contact-drawer-root:not(:has(#contact-stage-move)) .tabs { display: none; }
@media (pointer: coarse), (max-width: 640px) {
  #contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .input,
  #contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .select,
  .co-drawer #company-form .input, .co-drawer #company-form .select { height: 44px; font-size: 16px; }
  #contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .textarea,
  .co-drawer #company-form .textarea { font-size: 16px; }
  #contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .field-row,
  .co-drawer #company-form .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #contact-drawer-root:not(:has(#contact-stage-move)) #contact-form .fieldset,
  .co-drawer #company-form .fieldset { padding: 14px 14px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .co .co-bar .bar-fill.is-growing { animation: none; }
  .cx-row, .cx-qrow, :is(.cx, .co, .lg) .cx-fchip { transition: none; }
}
/* ==== END contacts ==== */

/* ==== ROSE UI 2026 · consults ==== */
/* Consults, the consultant's Appointments desk and its lead drawer.
   Paper, ink and one volt signal: white cards on paper, pastel avatars,
   the next or live consult in volt. Local aliases fall back to the
   pre-2026 tokens so this block reads correctly on either token set. */
.consultant-workspace,
.consultant-drawer,
[data-module="consults"],
.recording-tabs {
  --cx-card: var(--card, var(--surface));
  --cx-card-2: var(--card-2, var(--surface-2));
  --cx-well: var(--paper-2, var(--surface-2));
  --cx-line: var(--line, var(--border-faint));
  --cx-line-strong: var(--line-strong, var(--border));
  --cx-text: var(--text);
  --cx-muted: var(--muted, var(--text-3));
  --cx-volt: var(--volt, #CFF465);
  --cx-volt-ink: var(--volt-ink, #1F2A00);
  --cx-volt-soft: var(--volt-soft, rgba(207, 244, 101, .28));
  --cx-soft-ink: var(--volt-ink, #1F2A00);
  --cx-coral: var(--coral, #F0584B);
  --cx-coral-soft: var(--coral-soft, rgba(240, 88, 75, .12));
  --cx-panel: var(--ink-panel, #0B0D12);
  --cx-r-card: var(--r-card, 16px);
  --cx-r-ctl: var(--r-ctl, 10px);
  --cx-shadow: var(--shadow-card, 0 1px 2px rgba(11, 13, 18, .04), 0 10px 30px -12px rgba(11, 13, 18, .14));
  --cx-shadow-pop: var(--shadow-pop, 0 2px 4px rgba(11, 13, 18, .06), 0 24px 48px -16px rgba(11, 13, 18, .22));
  --cx-ease: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
  --cx-dur: var(--dur-2, 220ms);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.consultant-workspace, .consultant-drawer, [data-module="consults"], .recording-tabs) {
    --cx-soft-ink: var(--volt, #CFF465);
    --cx-volt-soft: var(--volt-soft, rgba(207, 244, 101, .16));
  }
}
:root[data-theme="dark"] :is(.consultant-workspace, .consultant-drawer, [data-module="consults"], .recording-tabs) {
  --cx-soft-ink: var(--volt, #CFF465);
  --cx-volt-soft: var(--volt-soft, rgba(207, 244, 101, .16));
}

/* ---- the Appointments desk ---- */
.consultant-workspace {
  width: min(100%, 1440px);
  padding: var(--sp-7) var(--sp-7) var(--sp-8);
  gap: var(--sp-6);
  min-width: 0;
}
.consultant-workspace > * { min-width: 0; }
.consultant-workspace [hidden] { display: none !important; }
.consultant-workspace .consultant-command {
  align-items: flex-end;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}
.consultant-workspace .consultant-command h2 { margin: 0; font-size: var(--fs-2xl); line-height: 1.08; }
.consultant-workspace .consultant-command p { margin-top: var(--sp-2); color: var(--cx-muted); font-size: var(--fs-md); line-height: 1.5; max-width: 64ch; }
.consultant-workspace .consultant-command .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2); }
.consultant-workspace .consultant-command .btn svg { display: block; }

.consultant-workspace .consultant-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.consultant-workspace .consultant-summary-item {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  row-gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-card);
  background: var(--cx-card);
  box-shadow: var(--cx-shadow);
}
.consultant-workspace .consultant-summary-item strong {
  justify-self: start;
  margin-top: var(--sp-1);
  font-family: var(--font-num, inherit);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--cx-text);
}
.consultant-workspace .consultant-summary-label { color: var(--cx-muted); font-size: var(--fs-xs); font-weight: 500; }
.consultant-workspace .consultant-summary-item > span:last-child { color: var(--cx-muted); font-size: var(--fs-xs); margin-top: 0; }

/* The week grid: seven days, three bands, booked slots as chips. */
.cw-week {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-card);
  background: var(--cx-card);
  box-shadow: var(--cx-shadow);
}
.cw-week-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.cw-week-head > div:first-child { display: grid; gap: 2px; min-width: 0; }
.cw-week-head h3 { margin: 2px 0 0; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; }
.cw-week-head p { margin: 0; color: var(--cx-muted); font-size: var(--fs-sm); }
.cw-next {
  display: flex; align-items: center; gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  background: var(--cx-card-2);
}
.cw-next-text { display: grid; gap: 1px; min-width: 0; }
.cw-next-when { color: var(--cx-text); font-size: var(--fs-2xs); font-weight: 600; }
.cw-next-name.row-link { justify-self: start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--cx-text); font-size: var(--fs-md); font-weight: 650; line-height: 1.25; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-next-text > span:last-child { color: var(--cx-muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-next-join { margin-left: var(--sp-2); flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2); }
.cw-next-join svg { display: block; }
.cw-next > .chip { margin-left: var(--sp-2); }

.cw-grid {
  display: grid;
  grid-template-columns: 86px repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, minmax(60px, auto));
  gap: var(--sp-2);
}
.cw-bands, .cw-day { grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; min-width: 0; }
.cw-band { align-self: center; display: grid; gap: 1px; padding-right: var(--sp-2); }
.cw-band strong { font-size: var(--fs-xs); font-weight: 600; color: var(--cx-text); }
.cw-band small { font-size: var(--fs-2xs); color: var(--cx-muted); }
.cw-day-head { display: grid; justify-items: center; gap: 2px; padding-bottom: var(--sp-1); }
.cw-day-head span { color: var(--cx-muted); font-size: var(--fs-2xs); font-weight: 500; }
.cw-day-head strong {
  display: grid; place-items: center;
  min-width: 30px; height: 30px;
  border-radius: 999px;
  font-size: var(--fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cw-day.is-today .cw-day-head strong { background: var(--cx-text); color: var(--cx-card); }
.cw-cell {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
  padding: 4px;
  border-radius: var(--cx-r-ctl);
  background: var(--cx-well);
}
.cw-day-empty { display: none; }
.cw-slot {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 5px 6px;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  background: var(--cx-card);
  color: var(--cx-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 13, 18, .05);
  transition: transform var(--cx-dur) var(--cx-ease), box-shadow var(--cx-dur) var(--cx-ease);
}
.cw-slot:hover { transform: translateY(-1px); box-shadow: var(--cx-shadow-pop); }
.cw-slot:active { transform: scale(.98); }
.cw-slot-text { display: grid; min-width: 0; line-height: 1.2; }
.cw-slot-text strong { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.cw-slot-text span { font-size: var(--fs-2xs); color: var(--cx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-slot.is-next { background: var(--cx-volt); border-color: transparent; color: var(--cx-volt-ink); }
.cw-slot.is-next .cw-slot-text span { color: var(--cx-volt-ink); opacity: .78; }
.cw-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin: 0 4px 0 3px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--cx-volt-ink);
  box-shadow: 0 0 0 3px rgba(31, 42, 0, .14);
}

.consultant-workspace .consultant-controls { gap: var(--sp-3); }
.consultant-workspace .consultant-search { flex: 1 1 320px; width: auto; max-width: 420px; }
.consultant-workspace .consultant-search .input { height: 40px; border-radius: 999px; padding-left: 34px; background: var(--cx-card); border-color: var(--cx-line-strong); }
.consultant-workspace .consultant-search .search-icon { left: 14px; }
:where(.consultant-workspace .consultant-controls, #consults-toolbar) .seg {
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--cx-line);
  border-radius: 999px;
  background: var(--cx-well);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
:where(.consultant-workspace .consultant-controls, #consults-toolbar) .seg-btn {
  height: 32px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: 999px;
  color: var(--cx-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background var(--cx-dur) var(--cx-ease), color var(--cx-dur) var(--cx-ease);
}
:where(.consultant-workspace .consultant-controls, #consults-toolbar) .seg-btn:hover { background: transparent; color: var(--cx-text); }
:where(.consultant-workspace .consultant-controls, #consults-toolbar) .seg-btn.is-active {
  background: var(--cx-card);
  color: var(--cx-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(11, 13, 18, .08), 0 2px 8px -4px rgba(11, 13, 18, .16);
}

/* Agenda: one white card per day. */
.consultant-workspace .consultant-calendar { gap: var(--sp-4); }
.consultant-workspace .consultant-day {
  padding: 0;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-card);
  background: var(--cx-card);
  box-shadow: var(--cx-shadow);
}
.consultant-workspace .consultant-day-head {
  align-items: center;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  background: none;
  border-bottom: 0;
}
.consultant-workspace .consultant-day-head h3 { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.01em; }
.consultant-workspace .consultant-day-head span { font-family: inherit; font-size: var(--fs-xs); color: var(--cx-muted); }
.consultant-workspace .consultant-appointment {
  grid-template-columns: 84px 32px minmax(0, 1fr) auto auto;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 0;
  border-top: 1px solid var(--cx-line);
  transition: background var(--cx-dur) var(--cx-ease);
}
.consultant-workspace .consultant-appointment:last-child { border-radius: 0 0 var(--cx-r-card) var(--cx-r-card); }
.consultant-workspace .consultant-appointment:hover { background: var(--cx-card-2); }
.consultant-workspace .consultant-appointment.is-next { background: var(--cx-volt-soft); }
.consultant-workspace .consultant-appointment-time strong { font-family: inherit; font-size: var(--fs-md); font-weight: 600; }
.consultant-workspace .consultant-appointment-time span { font-family: inherit; font-size: var(--fs-xs); color: var(--cx-muted); }
.consultant-workspace .consultant-lead-name { font-size: var(--fs-md); font-weight: 600; color: var(--cx-text); }
.consultant-workspace .consultant-row-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.consultant-workspace .consultant-appointment-status { display: flex; align-items: center; gap: var(--sp-2); }
.consultant-workspace .cw-meet {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.consultant-workspace .cw-meet.badge-ok { background: var(--cx-well); color: var(--cx-muted); }
.consultant-workspace .cw-meet.badge-warn { background: var(--cx-coral-soft); color: var(--coral-text, var(--cx-text)); }
.consultant-workspace .cw-when { background: transparent; color: var(--cx-text); font-weight: 600; padding-inline: 0; }
.consultant-workspace .cw-meet svg { display: block; }

/* An admin or staff login: one calm notice instead of a dead calendar. */
.consultant-workspace .consultant-blocked {
  max-width: 560px;
  margin: var(--sp-4) auto 0;
  padding: var(--sp-7) var(--sp-6);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-card);
  background: var(--cx-card);
  box-shadow: var(--cx-shadow);
}
.consultant-blocked-mark {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--sp-2);
  border-radius: 999px;
  background: var(--cx-volt-soft);
}
.consultant-blocked-mark .m-dot {
  display: block;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--cx-volt);
  box-shadow: 0 0 0 4px rgba(207, 244, 101, .35);
}
.consultant-workspace .consultant-blocked .empty-title { font-size: var(--fs-lg); font-weight: 650; }
.consultant-workspace .consultant-blocked .empty-text { color: var(--cx-muted); font-size: var(--fs-md); max-width: 46ch; }

@media (max-width: 1180px) {
  .cw-grid { grid-template-columns: 70px repeat(7, minmax(0, 1fr)); }
  .cw-slot .avatar { display: none; }
}
@media (max-width: 900px) {
  .consultant-workspace { padding: var(--sp-5) var(--sp-4) var(--sp-7); gap: var(--sp-5); }
  .consultant-workspace .consultant-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .consultant-workspace .consultant-appointment { grid-template-columns: 72px 32px minmax(0, 1fr) auto; }
  .consultant-workspace .consultant-appointment-status { grid-column: 3 / -1; grid-row: 2; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .consultant-workspace .consultant-command { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .consultant-workspace .consultant-command .btn { justify-content: center; min-height: 44px; }
  .consultant-workspace .consultant-summary-item { padding: var(--sp-3) var(--sp-4); }
  .consultant-workspace .consultant-summary-item strong { font-size: var(--fs-xl); }
  .consultant-workspace .consultant-controls { flex-direction: column; align-items: stretch; }
  .consultant-workspace .consultant-search { max-width: none; flex-basis: auto; min-width: 0; }
  .consultant-workspace .consultant-search .input { height: 44px; font-size: 16px; }
  .consultant-workspace .consultant-controls .seg { display: flex; }
  .consultant-workspace .consultant-controls .seg-btn { flex: 1 1 auto; height: 38px; padding: 0 6px; font-size: var(--fs-xs); }
  .consultant-workspace .consultant-command .view-head-text { flex: 0 1 auto; }
  .consultant-workspace .consultant-day-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; text-align: left; }
  .cw-week { padding: var(--sp-4); gap: var(--sp-4); }
  .cw-next { width: 100%; flex-wrap: wrap; padding: var(--sp-3); }
  .cw-next-text { flex: 1 1 0; }
  .cw-next-join { flex: 1 1 100%; justify-content: center; min-height: 44px; margin-left: 0; }
  .cw-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--sp-2); }
  .cw-bands { display: none; }
  .cw-day {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: var(--sp-3);
    row-gap: 6px;
    align-items: start;
    padding: var(--sp-2);
    border-radius: 12px;
    background: var(--cx-well);
  }
  .cw-day.is-open:not(.is-today) { display: none; }
  .cw-day-head { grid-column: 1; grid-row: 1; align-self: start; padding: 0; }
  .cw-cell { display: contents; }
  .cw-slot { grid-column: 2; min-height: 44px; }
  .cw-slot .avatar { display: inline-grid; }
  .cw-day-empty { display: block; grid-column: 2; align-self: center; color: var(--cx-muted); font-size: var(--fs-sm); padding: var(--sp-2) 0; }
  .consultant-workspace .consultant-day-head { padding: var(--sp-3) var(--sp-4) var(--sp-1); }
  .consultant-workspace .consultant-appointment {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }
  .consultant-workspace .consultant-appointment-time { grid-column: 2 / -1; grid-row: 1; display: flex; gap: var(--sp-2); align-items: baseline; }
  .consultant-workspace .consultant-appointment > .avatar { grid-column: 1; grid-row: 2; align-self: start; }
  .consultant-workspace .consultant-appointment-main { grid-column: 2; grid-row: 2; }
  .consultant-workspace .consultant-appointment > .btn { grid-column: 3; grid-row: 2; align-self: start; min-height: 44px; }
  .consultant-workspace .consultant-appointment-status { grid-column: 2 / -1; grid-row: 3; }
}
/* ---- the consultant's lead drawer ---- */
.consultant-drawer { gap: var(--sp-6); }
.consultant-drawer .badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.consultant-drawer .badge-ok { background: var(--cx-volt-soft); color: var(--cx-soft-ink); }
.consultant-drawer .badge-warn { background: var(--cx-coral-soft); color: var(--cx-text); }
.consultant-drawer .badge-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--cx-line-strong); border: 0; color: var(--cx-muted); }
.consultant-drawer .consultant-launch-state {
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-card);
  background: var(--cx-card-2);
  color: var(--cx-text);
}
.consultant-drawer .consultant-launch-state.is-ready { background: var(--cx-volt-soft); border-color: transparent; }
.consultant-drawer .consultant-launch-state.is-blocked { background: var(--cx-card-2); border-color: var(--cx-line); }
.consultant-drawer .consultant-launch-head strong { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; }
.consultant-drawer .consultant-launch-head span:not(.badge) { color: var(--cx-muted); font-size: var(--fs-sm); }
.consultant-drawer .consultant-launch-checks { position: relative; padding: 0; gap: 0; border: 0; }
.consultant-drawer .consultant-launch-check {
  position: relative;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-3);
}
.consultant-drawer .consultant-launch-check + .consultant-launch-check::before {
  content: "";
  position: absolute;
  left: 11.5px; top: -10px;
  width: 1px; height: 16px;
  background: var(--cx-line-strong);
}
.consultant-drawer .consultant-launch-check strong { font-size: var(--fs-sm); font-weight: 600; }
.consultant-drawer .consultant-launch-check span:not(.badge) { color: var(--cx-muted); font-size: var(--fs-sm); line-height: 1.45; }
.consultant-drawer .consultant-launch-check > .badge { margin-top: 1px; }
.consultant-drawer .consultant-launch-dot {
  position: relative;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--cx-card);
  box-shadow: inset 0 0 0 1.5px var(--cx-line-strong);
}
.consultant-drawer .consultant-launch-check.is-ready .consultant-launch-dot { background: var(--cx-volt); box-shadow: none; }
.consultant-drawer .consultant-launch-check.is-ready .consultant-launch-dot::after {
  content: "";
  position: absolute; left: 8px; top: 5px;
  width: 6px; height: 11px;
  border: solid var(--cx-volt-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consultant-drawer .consultant-launch-check.is-blocked .consultant-launch-dot { background: var(--cx-coral-soft); box-shadow: inset 0 0 0 1.5px var(--cx-coral); }
.consultant-drawer .consultant-launch-check.is-blocked .consultant-launch-dot::after {
  content: "";
  position: absolute; left: 9px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--cx-coral);
}
.consultant-drawer .consultant-launch-check.is-action .consultant-launch-dot { background: var(--cx-card); box-shadow: inset 0 0 0 1.5px var(--cx-text); }
.consultant-drawer .consultant-launch-check.is-action .consultant-launch-dot::after {
  content: "";
  position: absolute; left: 7px; top: 7px;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--cx-text);
  opacity: .85;
}
.consultant-drawer .consultant-launch-note { color: var(--cx-muted); font-size: var(--fs-sm); border-top: 1px solid var(--cx-line); padding-top: var(--sp-3); }
.consultant-drawer .consultant-section { border-top-color: var(--cx-line); gap: var(--sp-3); }
.consultant-drawer .consultant-section h3 { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; }
.consultant-drawer .consultant-section .consultant-section-intro { color: var(--cx-muted); }
.consultant-drawer .consultant-kv-grid { border-color: var(--cx-line); border-radius: 12px; background: var(--cx-card); }
.consultant-drawer .consultant-kv { border-color: var(--cx-line); padding: var(--sp-3) var(--sp-4); }
.consultant-drawer .consultant-kv dt,
.consultant-drawer .consultant-answers dt {
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-muted);
}
.consultant-drawer .consultant-kv dd,
.consultant-drawer .consultant-answers dd { font-size: var(--fs-md); }
.consultant-drawer .consultant-answers > div,
.consultant-drawer .consultant-history li { border-bottom-color: var(--cx-line); }
.consultant-drawer .consultant-history time { font-family: inherit; font-size: var(--fs-xs); color: var(--cx-muted); font-variant-numeric: tabular-nums; }
.consultant-drawer .consultant-history strong { font-size: var(--fs-sm); font-weight: 600; }
.consultant-drawer .consultant-actions .btn { border-radius: 999px; }
#warm-launch.btn--volt[aria-busy="true"] { opacity: .8; }
@media (max-width: 760px) {
  .consultant-drawer .consultant-kv-grid { grid-template-columns: minmax(0, 1fr); }
  .consultant-drawer .consultant-kv { border-right: 0; }
  .consultant-drawer .consultant-kv:nth-last-child(2) { border-bottom: 1px solid var(--cx-line); }
  .consultant-drawer .consultant-launch-check { grid-template-columns: 24px minmax(0, 1fr); }
  .consultant-drawer .consultant-launch-check > .badge { grid-column: 2; justify-self: start; }
  .consultant-drawer .consultant-history li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* ---- Consults (admin): header, one tidy filter row, the week ---- */
[data-module="consults"] { gap: var(--sp-5); min-width: 0; }
[data-module="consults"] > * { min-width: 0; }
.consults-view-head.view-head { margin: 0; }
#consults-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--cx-line);
  border-radius: 18px;
  background: var(--cx-card);
  box-shadow: var(--cx-shadow);
}
#consults-toolbar .search { flex: 1 1 200px; min-width: 180px; max-width: 280px; }
#consults-toolbar .search .input {
  height: 36px;
  padding-left: 32px;
  border: 0;
  border-radius: 999px;
  background: var(--cx-well);
}
#consults-toolbar .search .search-icon { left: 13px; }
#consults-toolbar .select {
  width: auto;
  field-sizing: content;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 220px;
  height: 36px;
  padding-left: 14px;
  padding-right: 30px;
  border: 1px solid var(--cx-line-strong);
  border-radius: 999px;
  background-color: var(--cx-card);
  color: var(--cx-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-overflow: ellipsis;
  background-position: calc(100% - 17px) 15px, calc(100% - 12px) 15px;
}
#consults-toolbar .select:hover { border-color: var(--cx-muted); }
#consults-toolbar .seg-btn { height: 30px; padding: 0 10px; font-size: var(--fs-xs); }
#consults-filter-stumped {
  height: 36px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--cx-line-strong);
  border-radius: 999px;
  background: var(--cx-card);
  color: var(--cx-text);
  font-weight: 500;
}
#consults-filter-stumped[aria-pressed="true"] { background: var(--cx-volt); border-color: transparent; color: var(--cx-volt-ink); font-weight: 600; }
#consults-clear { height: 36px; border-radius: 999px; }
#consults-clear.push { margin-left: auto; }

[data-module="consults"] .consult-schedule {
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-card);
  background: var(--cx-card);
  box-shadow: var(--cx-shadow);
}
[data-module="consults"] .consult-schedule > .card-head { padding: var(--sp-5) var(--sp-5) var(--sp-3); border-bottom: 0; }
[data-module="consults"] .consult-schedule .card-title { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; }
[data-module="consults"] .consult-schedule .card-sub { color: var(--cx-muted); font-size: var(--fs-sm); }
.consult-week-wrap { padding: 0 var(--sp-5) var(--sp-5); }
[data-module="consults"] .consult-schedule-table thead th {
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-muted);
  background: var(--cx-card-2);
}
[data-module="consults"] .consult-schedule-table td:first-child { font-family: inherit; font-variant-numeric: tabular-nums; }
[data-module="consults"] .consult-schedule-table tbody tr:hover td { background: var(--cx-card-2); }
[data-module="consults"] .consult-schedule-group th {
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-text);
  background: var(--cx-well);
}
.consult-schedule-lead { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.consult-schedule-lead .row-link { font-weight: 600; text-align: left; white-space: nowrap; }
[data-module="consults"] .consult-schedule .badge {
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
[data-module="consults"] .consult-schedule .badge-ok { background: var(--cx-volt-soft); color: var(--cx-soft-ink); }
[data-module="consults"] .consult-schedule .badge-warn { background: var(--cx-coral-soft); color: var(--cx-text); }
[data-module="consults"] .consult-schedule .badge-info { background: var(--cx-well); color: var(--cx-text); }
[data-module="consults"] .consult-schedule-sub {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 4px 4px 0 0;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--cx-well);
  color: var(--cx-muted);
  line-height: 1.6;
}
[data-module="consults"] .consult-schedule-sub.is-ok { background: var(--cx-volt-soft); color: var(--cx-soft-ink); }
[data-module="consults"] .consult-schedule-sub.is-warn { background: var(--cx-coral-soft); color: var(--cx-text); }
[data-module="consults"] .consult-schedule-pending { color: var(--cx-muted); }
/* Only the next booking is volt; every other Join Meet stays quiet. */
[data-module="consults"] .consult-schedule-table tr.is-next td { background: var(--cx-volt-soft); }
[data-module="consults"] .consult-schedule-table .ct-join { background: var(--cx-card); color: var(--cx-text); border: 1px solid var(--cx-line-strong); box-shadow: none; }
[data-module="consults"] .consult-schedule-table tr.is-next .ct-join { background: var(--cx-volt); color: var(--cx-volt-ink); border-color: transparent; }
/* The Consults screen mounts beside its section's own .view-body (the
   recordings wrapper adds tabs and a panel): the empty one takes no space. */
#view-consults > .view-body:empty { display: none; }
[data-module="consults"] .stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
[data-module="consults"] .consult-schedule-table:not(.is-ledger) { min-width: 720px; }
[data-module="consults"] .consult-schedule-table td:nth-child(3),
[data-module="consults"] .consult-schedule-table td:nth-child(4) { white-space: normal; line-height: 1.35; }
[data-module="consults"] .consult-schedule-table td:first-child { white-space: nowrap; }
[data-module="consults"] .consult-schedule-table td:first-child,
[data-module="consults"] .consult-schedule-table tbody tr[data-stage] td:first-child,
[data-module="consults"] .consult-schedule-table.is-ledger tbody tr[data-stage] { box-shadow: none; }
@media (max-width: 760px) {
  #consults-toolbar { border-radius: var(--cx-r-card); padding: var(--sp-3); }
  #consults-toolbar .search { flex: 1 1 100%; max-width: none; min-width: 0; }
  #consults-toolbar .search .input { height: 44px; font-size: 16px; }
  #consults-toolbar .select { flex: 1 1 130px; max-width: none; height: 44px; field-sizing: fixed; }
  #consults-toolbar .seg { display: flex; flex: 1 1 100%; }
  #consults-toolbar .seg-btn { flex: 1 1 auto; height: 38px; }
  #consults-filter-stumped, #consults-clear { flex: 1 1 auto; height: 44px; }
  .consult-week-wrap { padding: 0 var(--sp-4) var(--sp-4); }
  /* The contacts-fallback schedule stacks into rows, like the ledger does. */
  [data-module="consults"] .consult-schedule-table:not(.is-ledger) { min-width: 0; }
  [data-module="consults"] .consult-schedule-table:not(.is-ledger) thead { display: none; }
  [data-module="consults"] .consult-schedule-table:not(.is-ledger),
  [data-module="consults"] .consult-schedule-table:not(.is-ledger) tbody { display: block; width: 100%; }
  [data-module="consults"] .consult-schedule-table:not(.is-ledger) tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--cx-line);
  }
  [data-module="consults"] .consult-schedule-table:not(.is-ledger) tbody td {
    display: block; height: auto; padding: 0; border: 0; white-space: normal; background: none;
  }
  [data-module="consults"] .consult-schedule-table:not(.is-ledger) tbody td:nth-child(1) { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--cx-muted); }
  [data-module="consults"] .consult-schedule-table:not(.is-ledger) tbody td:nth-child(2) { grid-column: 1; min-width: 0; }
  [data-module="consults"] .consult-schedule-lead .row-link { white-space: normal; }
  [data-module="consults"] .consult-schedule-table:not(.is-ledger) tbody td:nth-child(6) { grid-column: 2; grid-row: 2; align-self: center; }
  [data-module="consults"] .consult-schedule-table:not(.is-ledger) tbody td:nth-child(3),
  [data-module="consults"] .consult-schedule-table:not(.is-ledger) tbody td:nth-child(4),
  [data-module="consults"] .consult-schedule-table:not(.is-ledger) tbody td:nth-child(5) { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--cx-muted); }
}
/* ==== END consults ==== */

/* ==== ROSE UI 2026 · comms ==== */
/* Follow-up, Campaigns, Phone & Inbox, office messages and the Monthly review.
   The private --cx-* names resolve to the Rose UI 2026 tokens and fall back to
   the older names, so these screens read correctly on either side of the
   foundation tokens. They never redefine a shared token. */
:where(.follow-up, .fu-metrics, .campaigns, .review-view, .review-print, .inbox-shell, .office-inbox, .office-inbox-tabs) {
  --cx-paper: var(--paper, var(--bg));
  --cx-paper-2: var(--paper-2, var(--surface-inset));
  --cx-card: var(--card, var(--surface));
  --cx-card-2: var(--card-2, var(--surface-2));
  --cx-ink: var(--ink, var(--text));
  --cx-ink-panel: var(--ink-panel, #0B0D12);
  --cx-on-ink: #F1EEE7;
  --cx-muted: var(--muted, var(--text-3));
  --cx-line: var(--line, var(--border-faint));
  --cx-line-strong: var(--line-strong, var(--border));
  --cx-volt: var(--volt, #CFF465);
  --cx-volt-ink: var(--volt-ink, #1F2A00);
  --cx-volt-soft: var(--volt-soft, rgba(207, 244, 101, 0.28));
  --cx-volt-edge: color-mix(in srgb, var(--cx-volt) 55%, #1F2A00);
  --cx-coral: var(--coral, var(--danger));
  --cx-coral-soft: var(--coral-soft, var(--danger-bg));
  --cx-coral-text: var(--coral-text, color-mix(in srgb, var(--cx-coral) 62%, var(--cx-ink)));
  --cx-brand: var(--brand, var(--accent));
  --cx-brand-ink: var(--brand-ink, #FFFFFF);
  --cx-brand-soft: var(--brand-soft, color-mix(in srgb, var(--cx-brand) 12%, transparent));
  --cx-link: var(--link, var(--accent));
  --cx-r-card: var(--r-card, 16px);
  --cx-r-ctl: var(--r-ctl, 10px);
  --cx-shadow-card: var(--shadow-card, 0 1px 2px rgba(11, 13, 18, 0.04), 0 10px 30px -12px rgba(11, 13, 18, 0.14));
  --cx-shadow-pop: var(--shadow-pop, 0 2px 4px rgba(11, 13, 18, 0.06), 0 24px 48px -16px rgba(11, 13, 18, 0.22));
  --cx-shadow-ink: var(--shadow-ink, 0 30px 60px -20px rgba(0, 0, 0, 0.45));
  --cx-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --cx-dur: var(--dur-2, 220ms);
  --cx-dur-3: var(--dur-3, 420ms);
}
/* Icons, chips and avatars: the foundation's .chip/.avatar plus two extras. */
.cm-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.chip .cm-icon { width: 13px; height: 13px; }
.chip.cm-chip--ink { background: var(--cx-ink-panel); color: var(--cx-on-ink); border-color: transparent; }
.cm-avatar { font-variant-numeric: normal; }
.cm-avatar-empty {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px dashed var(--cx-line-strong); color: var(--cx-muted);
}
.cm-avatar-empty .cm-icon { width: 13px; height: 13px; }

/* Sequences on the foundation's .flow-rail, with an overdue (coral) step and
   an ink playhead just before the current step. */
.fu-rail, .cp-rail { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
:is(.fu-rail, .cp-rail) > .flow-rail { flex: 1 1 auto; min-width: 0; margin: 0; padding-left: 0; list-style: none; }
.flow-step.is-late .flow-node { background: var(--cx-coral-soft); color: var(--cx-coral-text); box-shadow: inset 0 0 0 1.5px var(--cx-coral), 0 0 0 4px var(--cx-card); }
.flow-step.is-late { color: var(--cx-coral-text); font-weight: 600; }
.flow-step.is-wait .flow-node { color: var(--cx-ink); box-shadow: inset 0 0 0 1.5px var(--cx-ink), 0 0 0 4px var(--cx-card); }
.flow-step.is-paused { color: var(--cx-ink); font-weight: 600; }
.fr-playhead {
  position: absolute; z-index: 2; top: 9px; left: calc(var(--sp-2) / -2 - 5px); width: 10px; height: 10px; border-radius: 50%;
  background: var(--cx-ink); box-shadow: 0 0 0 2px var(--cx-card);
}
/* On a follow-up card the call button is the one volt element: the current
   step reads as "now" with an ink ring on a soft volt fill. */
.fu-rail .flow-step.is-current .flow-node { background: var(--cx-volt-soft); color: var(--cx-ink); box-shadow: inset 0 0 0 2px var(--cx-ink), 0 0 0 4px var(--cx-card); }
.fu-rail .flow-step.is-paused .flow-node { background: var(--cx-card); color: var(--cx-muted); box-shadow: inset 0 0 0 1.5px var(--cx-line-strong), 0 0 0 4px var(--cx-card); }
:is(.fu-rail, .cp-rail) > .chip { flex: 0 0 auto; margin-top: 6px; }
@media (max-width: 700px) {
  :is(.fu-rail, .cp-rail) .flow-label { white-space: normal; line-height: 1.2; text-wrap: balance; }
}
/* The track runs between the first and last node centres; --flow-progress
   (set per rail) ends the ink at the playhead, halfway into the gap before
   the current step. */
:is(.fu-rail, .cp-rail) .flow-rail { --flow-col: calc((100% - (var(--flow-steps, 4) - 1) * var(--sp-2)) / var(--flow-steps, 4)); }
:is(.fu-rail, .cp-rail) .flow-rail::before, :is(.fu-rail, .cp-rail) .flow-rail::after { top: 17px; left: calc(var(--flow-col) / 2); right: calc(var(--flow-col) / 2); }

/* Phone & Inbox: threads read like the reel's messages. */
.inbox-shell { gap: var(--sp-5); color: var(--cx-ink); }
.inbox-shell .card { border-color: var(--cx-line); border-radius: var(--cx-r-card); background: var(--cx-card); box-shadow: var(--cx-shadow-card); }
.inbox-shell .card-head { min-height: 56px; padding: 16px 20px; border-bottom-color: var(--cx-line); }
.inbox-shell .card-body { padding: 18px 20px; }
.inbox-shell .card-title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; }
.inbox-shell .card-sub { color: var(--cx-muted); }
.inbox-shell .badge {
  height: auto; min-height: 22px; padding: 2px 9px; border-radius: 999px; font-family: inherit; font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: 0; text-transform: none;
}
.inbox-shell .badge-ok { gap: 6px; border: 1px solid var(--cx-line-strong); background: var(--cx-card); color: var(--cx-ink); }
.inbox-shell .badge-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-muted); }
.inbox-shell .card-head > .badge:last-child { margin-left: auto; }
.inbox-shell .badge-warn, .inbox-shell .badge-outline { border: 1px solid var(--cx-line-strong); background: transparent; color: var(--cx-muted); }
.inbox-shell .badge-danger { background: var(--cx-coral-soft); color: var(--cx-coral-text); }
.inbox-shell .select, .inbox-shell .input, .inbox-shell .textarea { border-radius: var(--cx-r-ctl); }
.inbox-readiness { gap: 16px; }
.inbox-ready-card { gap: 10px; padding: 18px 20px; border-color: var(--cx-line); border-radius: var(--cx-r-card); background: var(--cx-card); box-shadow: var(--cx-shadow-card); }
.inbox-ready-card strong { font-size: var(--fs-md); font-weight: 600; }
.inbox-ready-card p { color: var(--cx-muted); }
/* The moment a person needs to step in is a dark live panel. */
.inbox-shell .inbox-handoffs { border-color: transparent; background: var(--cx-ink-panel); color: var(--cx-on-ink); box-shadow: var(--cx-shadow-ink); }
.inbox-handoffs .card-head { border-bottom-color: rgba(241, 238, 231, 0.1); }
.inbox-handoffs .card-title { color: var(--cx-on-ink); }
.inbox-handoffs .card-sub, .inbox-handoffs .eyebrow, .inbox-handoffs .field-hint, .inbox-handoffs .field-label { color: rgba(241, 238, 231, 0.72); }
.inbox-handoff-summary { border-color: rgba(241, 238, 231, 0.1); background: rgba(241, 238, 231, 0.04); color: rgba(241, 238, 231, 0.8); padding: 10px 20px; }
.inbox-handoff { gap: 20px; padding: 18px 20px; border-bottom-color: rgba(241, 238, 231, 0.1); border-left: 0; }
.inbox-handoff-copy .row { gap: 10px; align-items: center; }
.inbox-handoff-copy strong { color: var(--cx-on-ink); }
.inbox-handoff-copy .badge { text-transform: capitalize; }
.inbox-handoff-copy p { color: rgba(241, 238, 231, 0.76); }
.inbox-handoff-icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(241, 238, 231, 0.12); color: var(--cx-on-ink);
}
.inbox-handoff.is-critical .inbox-handoff-icon { background: var(--cx-coral); color: #FFFFFF; }
.inbox-handoffs .badge-warn, .inbox-handoffs .badge-outline { border-color: rgba(241, 238, 231, 0.28); color: rgba(241, 238, 231, 0.8); }
.inbox-handoffs .btn { border-color: rgba(241, 238, 231, 0.28); background: transparent; color: var(--cx-on-ink); }
.inbox-handoffs .btn:hover { background: rgba(241, 238, 231, 0.08); }
.inbox-handoffs .btn-primary { border-color: var(--cx-volt); background: var(--cx-volt); color: var(--cx-volt-ink); }
.inbox-handoffs .btn-primary:hover { background: var(--cx-volt); filter: brightness(1.05); }
.inbox-handoffs .textarea { border-color: rgba(241, 238, 231, 0.24); background: rgba(241, 238, 231, 0.06); color: var(--cx-on-ink); }
.inbox-handoffs .textarea::placeholder { color: rgba(241, 238, 231, 0.55); }
.inbox-workspace { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 20px; }
.inbox-list .card-head { border-bottom: 0; }
.inbox-filters { margin: 0 16px 12px; padding: 3px; gap: 3px; border: 0; border-radius: 999px; background: var(--cx-paper-2); }
.inbox-filters .seg-btn { min-height: 34px; height: auto; border: 0; border-radius: 999px; background: transparent; color: var(--cx-muted); font-weight: 500; }
.inbox-filters .seg-btn:hover { background: color-mix(in srgb, var(--cx-card) 60%, transparent); color: var(--cx-ink); }
.inbox-filters .seg-btn.is-active { background: var(--cx-card); color: var(--cx-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(11, 13, 18, 0.08); }
.inbox-thread-list { border-top-color: var(--cx-line); }
.inbox-thread { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; min-height: 64px; padding: 10px 16px; border-bottom-color: var(--cx-line); }
.inbox-thread:hover { background: var(--cx-card-2); }
.inbox-thread.is-selected { background: var(--cx-paper-2); box-shadow: inset 3px 0 0 var(--cx-ink); }
.inbox-channel {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--cx-paper-2); color: var(--cx-ink);
  font-family: inherit; font-size: 10px; font-weight: 600;
}
.inbox-channel[data-channel="sms"] { background: var(--av-4, #C9ECD9); color: #1E5C40; }
.inbox-channel[data-channel="email"] { background: var(--av-3, #C8DDF7); color: #1F4C80; }
.inbox-thread-copy strong { font-size: var(--fs-md); font-weight: 600; }
.inbox-thread-copy span { display: inline-flex; align-items: center; gap: 6px; color: var(--cx-muted); }
.inbox-thread-state { text-transform: capitalize; display: inline-flex; align-items: center; min-height: 20px; padding: 1px 8px; border-radius: 999px; background: var(--cx-paper-2); color: var(--cx-ink); font-size: var(--fs-2xs); font-weight: 500; }
.inbox-thread-state.is-waiting { background: var(--cx-coral-soft); color: var(--cx-coral-text); }
.inbox-thread time { color: var(--cx-muted); font-family: inherit; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.inbox-mode { color: var(--cx-muted); font-family: inherit; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; }
.inbox-message-log { gap: 14px; padding: 20px; border-top-color: var(--cx-line); background: var(--cx-paper); }
.inbox-message {
  position: relative; width: auto; max-width: min(78%, 620px); padding: 12px 16px; border: 1px solid var(--cx-line);
  border-radius: 18px 18px 18px 6px; background: var(--cx-card); box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05);
}
.inbox-message.is-inbound { align-self: flex-start; }
.inbox-message.is-outbound {
  align-self: flex-end; border-color: transparent; border-radius: 18px 18px 6px 18px; background: var(--cx-brand); color: var(--cx-brand-ink);
}
.inbox-message.is-outbound.is-assistant { background: var(--cx-ink-panel); color: var(--cx-on-ink); }
.inbox-message-meta { margin-bottom: 4px; color: var(--cx-muted); font-size: var(--fs-xs); }
.inbox-message-meta strong { color: var(--cx-ink); font-family: inherit; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none; }
.inbox-message.is-outbound .inbox-message-meta, .inbox-message.is-outbound .inbox-message-meta strong { color: inherit; opacity: 0.86; }
.inbox-message p { color: inherit; font-size: var(--fs-md); line-height: 1.5; }
.inbox-message.is-inbound p { color: var(--cx-ink); }
.inbox-delivery {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: inherit; opacity: 0.82;
  font-family: inherit; font-size: var(--fs-2xs); letter-spacing: 0; text-transform: none;
}
.inbox-delivery .cm-icon { width: 12px; height: 12px; }
.inbox-consent { border-color: var(--cx-line-strong); border-radius: 12px; background: var(--cx-card-2); }
.inbox-consent.is-ready { border-color: var(--cx-volt-edge); background: var(--cx-volt-soft); }
.inbox-consent.is-blocked { border-color: var(--cx-line-strong); background: var(--cx-paper-2); }
@media (max-width: 900px) {
  .inbox-workspace { grid-template-columns: minmax(0, 1fr); }
  .inbox-list { position: static; }
}
@media (max-width: 760px) {
  .inbox-readiness { grid-template-columns: minmax(0, 1fr); }
  .inbox-handoff { grid-template-columns: minmax(0, 1fr); }
  .inbox-handoff-actions { justify-content: flex-start; }
  .inbox-shell .btn, .inbox-shell .select, .inbox-filters .seg-btn { min-height: 44px; height: auto; white-space: normal; }
  .inbox-message { max-width: 88%; }
  .inbox-shell .card-head { flex-wrap: wrap; }
}
/* ==== END comms ==== */

/* ==== ROSE UI 2026 · sign-in loading ==== */
/* One calm loading screen (index.html #bootSplash, driven by app-core.js)
   from the first paint until this visit's first real screen is ready. Paper,
   the product name with its volt dot, one thin volt bar and one plain line.
   While it shows, the sign-in card is held back, so the form never flashes
   and its entrance plays once, when the card is really the answer. */
.boot-splash {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(1100px 620px at 50% 0%, color-mix(in srgb, var(--card) 72%, transparent), transparent 65%),
    var(--paper);
  color: var(--ink);
  transition: opacity var(--dur-3, 420ms) var(--ease-out, ease-out);
}
.boot-splash.is-leaving { opacity: 0; pointer-events: none; }
.boot-splash-inner { display: grid; justify-items: center; gap: 16px; width: min(320px, 100%); text-align: center; }
.boot-splash-name {
  min-height: 1.05em;
  font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -0.035em;
  color: var(--ink);
  transition: opacity var(--dur-2, 220ms) var(--ease-out, ease-out);
}
/* the same volt dot that ends the product name on the sign-in card */
.boot-splash-name::after {
  content: ""; display: inline-block;
  width: 0.26em; height: 0.26em; margin-left: 0.07em;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--volt-ink) 22%, transparent);
}
.boot-splash-name:empty::after { display: none; }
.boot-splash-bar {
  position: relative; overflow: hidden;
  width: 148px; height: 3px; border-radius: 999px;
  background: var(--paper-2);
}
.boot-splash-bar > span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  border-radius: inherit;
  background: var(--volt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--volt-ink) 14%, transparent);
  animation: boot-splash-bar 1.25s var(--ease-in-out, ease-in-out) infinite;
}
@keyframes boot-splash-bar { from { transform: translateX(-105%); } to { transform: translateX(245%); } }
.boot-splash-label {
  min-height: 1.5em;
  font-size: var(--fs-md, 14px); line-height: 1.5; color: var(--muted);
  transition: opacity var(--dur-2, 220ms) var(--ease-out, ease-out);
}
/* the name and the line fade in when app-core fills them, never pop */
.boot-splash-name:empty,
.boot-splash-label:empty { opacity: 0; }
@media (max-width: 480px) {
  .boot-splash-name { font-size: 30px; }
}

/* Held back while the splash decides. If app-core never starts, the page's
   own fallback message (an error on #gateMsg) shows the card instead. */
body.is-booting #gate .gate-card { display: none; }
body.is-booting:has(#gateMsg.is-error) #gate .gate-card { display: block; }
body.is-booting:has(#gateMsg.is-error) #bootSplash:not(.is-live) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .boot-splash, .boot-splash-name, .boot-splash-label { transition: none; }
  .boot-splash-bar > span { animation: none; transform: none; left: 29%; }
}
/* ==== END sign-in loading ==== */

/* ==== ROSE UI 2026 · settings ==== */
/* Settings (every tab), My connections, Command Center and the sign-in page.
   Built to DESIGN-CONTRACT.md: paper, ink and one volt signal. The private
   --s-* aliases read the contract tokens and fall back to the older token set,
   so this block renders correctly on either side of the foundation merge. */
.set-root,
.integrations,
.command-shell,
.gate {
  --s-paper: var(--paper, var(--bg));
  --s-paper-2: var(--paper-2, var(--surface-2));
  --s-card: var(--card, var(--surface));
  --s-card-2: var(--card-2, var(--surface-2));
  --s-muted: var(--muted, var(--text-3));
  --s-line: var(--line, var(--border-faint));
  --s-line-strong: var(--line-strong, var(--border));
  --s-on-ink: var(--paper, var(--ink-text));
  --s-volt: var(--volt, #cff465);
  --s-volt-ink: var(--volt-ink, #1f2a00);
  --s-volt-soft: var(--volt-soft, rgba(207, 244, 101, 0.28));
  --s-coral: var(--coral, var(--danger));
  --s-coral-soft: var(--coral-soft, var(--danger-bg));
  --s-coral-ink: var(--coral-text, color-mix(in srgb, var(--s-coral) 72%, var(--ink)));   /* one coral for "needs you" text */
  --s-r-card: var(--r-card, 16px);
  --s-r-ctl: var(--r-ctl, 10px);
  --s-shadow-card: var(--shadow-card, 0 1px 2px rgba(11, 13, 18, 0.04), 0 10px 30px -12px rgba(11, 13, 18, 0.14));
  --s-shadow-pop: var(--shadow-pop, 0 2px 4px rgba(11, 13, 18, 0.06), 0 24px 48px -16px rgba(11, 13, 18, 0.22));
  --s-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --s-pop: var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1));
  --s-d1: var(--dur-1, 120ms);
  --s-d2: var(--dur-2, 220ms);
  --s-d3: var(--dur-3, 420ms);
  --s-d4: var(--dur-4, 700ms);
}

/* ---- frame: header, two-level layout, section nav ---------------------- */
.set-root { container: settings / inline-size; gap: 28px; }
.set-root > .view-head { margin-bottom: 0; }
.set-head .view-title { margin-top: 12px; }
.set-layout { display: grid; gap: 20px; min-width: 0; }
.set-nav { display: grid; gap: 16px; align-content: start; min-width: 0; }
.set-panels { min-width: 0; }
.set-panels > [role="tabpanel"] { gap: 20px; min-width: 0; }
.set-panel-body { gap: 24px; min-width: 0; }
.set-section-head { display: grid; gap: 4px; padding: 2px 2px 0; }
.set-section-title { margin: 0; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.set-section-context { margin: 0; max-width: 68ch; font-size: var(--fs-md); line-height: 1.5; color: var(--s-muted); }
.set-panels > [role="tabpanel"]:not([hidden]) { animation: set-rise var(--s-d3) var(--s-ease) both; }

.set-root .set-tabs {
  position: relative;
  display: flex; gap: 4px;
  width: 100%; max-width: 100%;
  padding: 4px;
  border: 0; border-radius: 999px;
  background: var(--s-paper-2);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.set-root .set-tabs::-webkit-scrollbar { display: none; }
.set-root .set-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  min-height: 40px; margin: 0; padding: 0 16px;
  border: 0; border-radius: 999px;
  color: var(--s-muted);
  font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap;
  transition: background var(--s-d2) var(--s-ease), color var(--s-d2) var(--s-ease), box-shadow var(--s-d2) var(--s-ease);
}
.set-root .set-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--s-card) 60%, transparent); }
.set-root .set-tab.is-active {
  color: var(--ink); font-weight: 600;
  background: var(--s-card);
  border-bottom-color: transparent;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.06), 0 6px 16px -8px rgba(11, 13, 18, 0.22);
}
.set-icon { flex: none; width: 16px; height: 16px; }
.set-tab .set-icon { opacity: 0.72; }
.set-tab.is-active .set-icon { opacity: 1; }

@container settings (min-width: 880px) {
  .set-layout { grid-template-columns: 212px minmax(0, 1fr); gap: 32px; align-items: start; }
  .set-nav { position: sticky; top: calc(var(--topbar-h, 48px) + 20px); }
  .set-root .set-tabs { flex-direction: column; gap: 2px; padding: 0; border-radius: 0; background: transparent; overflow: visible; }
  .set-root .set-tab { justify-content: flex-start; width: 100%; border-radius: 10px; padding: 0 12px; }
  .set-root .set-tab.is-active::after {
    content: ""; position: absolute; right: 12px; top: 50%;
    width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
    background: var(--s-volt);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-volt-ink) 25%, transparent);
  }
}
@media (max-width: 640px), (pointer: coarse) {
  .set-root .set-tab { min-height: 44px; }
}

/* ---- cards ---------------------------------------------------------------- */
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; align-items: stretch; }
.set-grid:empty { display: none; }
.set-root .card,
.integrations .card {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--s-card);
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-card);
  box-shadow: var(--s-shadow-card);
}
.set-root .card-head,
.integrations .card-head {
  flex-wrap: wrap; align-items: flex-start; gap: 12px 16px;
  min-height: 0;
  padding: 20px 20px 0;
  border-bottom: 0;
}
.set-root .card-head > div:not(.row):not(.seg),
.integrations .card-head > div:not(.row):not(.seg) { display: grid; gap: 6px; min-width: 0; flex: 1 1 240px; }
.set-root .card-head .set-kicker { margin-bottom: 2px; }
.set-root .card-title,
.integrations .card-title { margin: 0; font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); }
.set-root .card-sub,
.integrations .card-sub { max-width: 64ch; font-size: var(--fs-sm); line-height: 1.45; color: var(--s-muted); }
.set-root .card-head .push { margin-left: auto; }
.set-root .card-body,
.integrations .card-body { padding: 16px 20px 20px; min-width: 0; }
.set-root .card-body.is-flush { padding: 12px 0 0; }
.set-root .card-body.is-flush > .card-body { padding-left: 20px; padding-right: 20px; }
.set-root .card-foot {
  margin-top: auto;
  padding: 14px 20px;
  background: transparent;
  border-top: 1px solid var(--s-line);
  border-radius: 0 0 var(--s-r-card) var(--s-r-card);
  flex-wrap: wrap;
}
.set-card--focus { box-shadow: var(--s-shadow-pop), 0 0 0 1px var(--ink) !important; animation: set-pop var(--s-d3) var(--s-pop) both; }
.set-root .field-hint { color: var(--s-muted); font-size: var(--fs-xs); line-height: 1.5; }
.set-note { margin-top: 14px; }
.set-root .set-code,
.set-root code {
  font-family: var(--font-mono); font-size: 0.92em;
  overflow-wrap: anywhere; word-break: break-word;
}
.set-root code.set-code {
  padding: 1px 6px; border-radius: 6px;
  background: var(--s-paper-2); color: var(--ink);
}
.set-wrap { overflow-wrap: anywhere; }

/* key / value, sentence case */
.set-root .kv { grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 10px 16px; }
.set-root .kv-k {
  padding-top: 1px;
  font-family: inherit; font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--s-muted);
}
.set-root .kv-v { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); }
.set-kv { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--s-line); }
@container settings (max-width: 520px) {
  .set-root .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .set-root .kv-k { padding-top: 10px; }
}

/* ---- chips --------------------------------------------------------------- */
:is(.set-root, .integrations, .command-shell) .badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--s-paper-2); color: var(--s-muted);
  font-family: inherit; font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0; text-transform: none; line-height: 1;
  white-space: nowrap;
}
:is(.set-root, .integrations) :is(.badge-ok, .badge-warn, .badge-danger, .badge-muted):not(.set-role)::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
:is(.set-root, .integrations, .command-shell) .badge-ok { background: var(--s-volt); color: var(--s-volt-ink); }
:is(.set-root, .integrations, .command-shell) .badge-muted { background: var(--s-paper-2); color: var(--s-muted); }
:is(.set-root, .integrations) .badge-muted:not(.set-role)::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
:is(.set-root, .integrations, .command-shell) .badge-warn { background: var(--s-card); border-color: var(--s-line-strong); color: var(--ink); }
:is(.set-root, .integrations) .badge-warn::before { background: conic-gradient(currentColor 0 50%, transparent 0); box-shadow: inset 0 0 0 1.5px currentColor; }
:is(.set-root, .integrations, .command-shell) .badge-danger { background: var(--s-coral-soft); color: var(--s-coral-ink); }
:is(.set-root, .integrations, .command-shell) .badge-info { background: var(--ink); color: var(--s-on-ink); }
:is(.set-root, .integrations, .command-shell) .badge-outline { background: transparent; border-color: var(--s-line-strong); color: var(--s-muted); }
.set-root .set-role.badge-muted { background: var(--s-card-2); border-color: var(--s-line); color: var(--ink); }

/* ---- people ---------------------------------------------------------------- */
.set-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.set-person-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-person-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink); font-size: var(--fs-md); font-weight: 600; line-height: 1.3; }
.set-person-name .is-empty { color: var(--s-muted); font-weight: 500; }
.set-person-mail { font-size: var(--fs-xs); color: var(--s-muted); overflow-wrap: anywhere; line-height: 1.4; }
.set-person--lg { align-items: flex-start; }
.set-person--lg .set-person-name { font-size: var(--fs-lg); }
.set-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.set-chip {
  display: inline-flex; align-items: center;
  max-width: 100%; height: 20px; padding: 0 8px;
  border: 1px solid var(--s-line); border-radius: 999px;
  background: var(--s-card-2); color: var(--s-muted);
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.set-chip.is-all { color: var(--ink); border-color: var(--s-line-strong); }
.set-chip.is-more { color: var(--ink); }
/* ---- tables inside settings cards ------------------------------------------ */
.set-root .table-wrap { background: transparent; border: 0; border-radius: 0 0 var(--s-r-card) var(--s-r-card); }
.set-root .set-table thead th {
  position: static;
  padding: 8px 12px;
  background: transparent;
  border-bottom: 1px solid var(--s-line);
  font-family: inherit; font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--s-muted);
}
.set-root .set-table tbody td { height: auto; padding: 12px; border-bottom-color: var(--s-line); color: var(--ink); }
.set-root .set-table :is(th, td):first-child { padding-left: 20px; }
.set-root .set-table :is(th, td):last-child { padding-right: 20px; }
.set-root .set-table tbody tr:hover td { background: var(--s-card-2); }
.set-root .set-table tbody tr.is-paused td { color: var(--s-muted); }
.set-root .set-table tbody tr.is-paused .set-avatar { filter: grayscale(1); opacity: 0.6; }
.set-root .set-people td,
.set-root .set-table td.t-wide { white-space: normal; }
.set-root .set-table td.t-wide { min-width: 200px; }
.set-root .set-people .set-actions-cell .row { justify-content: flex-end; flex-wrap: wrap; }
.set-root .set-stages tbody tr[data-stage] td:first-child { box-shadow: none; }
.set-root .set-db .set-db-name { color: var(--ink); font-size: var(--fs-xs); }
.set-root .set-db tr[data-db-state="missing"] .set-db-name,
.set-root .set-db tr[data-db-state="outdated"] .set-db-name { color: var(--s-coral-ink); }
.set-root .t-num,
.set-root .bar-value { font-variant-numeric: tabular-nums; }

@container settings (max-width: 620px) {
  .set-root :is(.set-people, .set-db) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .set-root :is(.set-people, .set-db),
  .set-root :is(.set-people, .set-db) tbody { display: block; width: 100%; }
  .set-root .set-people tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--s-line); }
  .set-root .set-people tr:last-child { border-bottom: 0; }
  .set-root :is(.set-people, .set-db) td { display: block; height: auto; padding: 0 !important; border: 0; white-space: normal; background: transparent !important; }
  .set-root .set-people .set-person-cell { flex: 1 0 100%; margin-bottom: 2px; }
  .set-root .set-people .set-actions-cell { flex: 1 0 100%; }
  .set-root .set-people .set-actions-cell:empty { display: none; }
  .set-root .set-people .set-actions-cell .row { justify-content: flex-start; }
  .set-root .set-db tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 20px; border-bottom: 1px solid var(--s-line); }
  .set-root .set-db tr:last-child { border-bottom: 0; }
  .set-root .set-db .set-db-name { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; }
  .set-root .set-db .set-db-status { grid-column: 2; grid-row: 1; }
  .set-root .set-db .set-db-kind { grid-column: 1; grid-row: 2; }
  .set-root .set-db .set-db-count { grid-column: 2; grid-row: 2; text-align: right; }
  .set-root .set-db .set-db-purpose { grid-column: 1 / -1; grid-row: 3; font-size: var(--fs-xs); }
}

/* ---- the setup checklist ("we set it up") ---------------------------------- */
.set-setup-title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.025em !important; }
.set-progress { margin: 2px 0 12px; }
.set-setup.is-complete .set-progress > span { background: var(--s-volt); }
.set-checklist { list-style: none; margin: 0; padding: 0; display: grid; }
.set-check {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 40px; padding: 7px 0;
  border-bottom: 1px solid var(--s-line);
}
.set-check:last-child { border-bottom: 0; }
.set-check-box {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--s-line-strong);
  color: var(--s-on-ink);
  transition: background var(--s-d2) var(--s-ease), border-color var(--s-d2) var(--s-ease);
}
.set-check-tick { width: 12px; height: 12px; overflow: visible; }
.set-check-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--s-d3) var(--s-ease); }
.set-check-label { font-size: var(--fs-md); font-weight: 500; color: var(--s-muted); line-height: 1.3; transition: color var(--s-d2) var(--s-ease); }
.set-check-note { font-size: var(--fs-xs); color: var(--s-muted); text-align: right; max-width: 22ch; overflow-wrap: anywhere; line-height: 1.35; }
.set-check[data-state="done"] .set-check-box {
  background: var(--ink); border-color: var(--ink);
  animation: set-tick-pop var(--s-d3) var(--s-pop) both;
  animation-delay: calc(min(var(--i, 0), 12) * 70ms);
}
.set-check[data-state="done"] .set-check-tick path { stroke-dashoffset: 0; transition-delay: calc(min(var(--i, 0), 12) * 70ms + 140ms); }
.set-check[data-state="done"] .set-check-label { color: var(--ink); }
.set-check[data-state="checking"] .set-check-box { border-style: dashed; animation: set-spin 1.6s linear infinite; }
.set-check[data-state="unknown"] .set-check-box { border-style: dotted; }
.set-check[data-state="failed"] .set-check-box { border-color: var(--s-coral); background: var(--s-coral-soft); }
.set-check[data-state="failed"] .set-check-note { color: var(--s-coral-ink); }
.set-check[data-state="todo"] .set-check-label,
.set-check[data-state="failed"] .set-check-label { color: var(--ink); }

/* status line (mailbox) */
.set-status-line { display: flex; align-items: baseline; gap: 8px; color: var(--ink) !important; font-size: var(--fs-sm) !important; }
.set-status-line::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--s-muted); }
.set-status-line[data-mailbox-state="connected"]::before { background: var(--s-volt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-volt-ink) 30%, transparent); }
.set-status-line[data-mailbox-state="failed"]::before { background: var(--s-coral); box-shadow: none; }

/* segmented theme switch */
.set-root .seg { padding: 3px; gap: 2px; border: 0; border-radius: 999px; background: var(--s-paper-2); max-width: 100%; }
.set-root .seg-btn { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; color: var(--s-muted); font-size: var(--fs-sm); font-weight: 500; }
.set-root .seg-btn:hover { background: transparent; color: var(--ink); }
.set-root .seg-btn.is-active { background: var(--s-card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(11, 13, 18, 0.08), 0 4px 10px -6px rgba(11, 13, 18, 0.25); }

/* one-time database steps */
.set-steps-label { margin-top: 14px; }
.set-steps { counter-reset: set-step; list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; }
.set-steps > li { counter-increment: set-step; position: relative; padding-left: 32px; min-width: 0; overflow-wrap: anywhere; }
.set-steps > li::before {
  content: counter(set-step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--s-line-strong);
  font-size: 11px; font-weight: 600; color: var(--s-muted);
  font-variant-numeric: tabular-nums;
}
.set-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; vertical-align: baseline; }
.set-path code.set-code { word-break: break-all; }

/* copy buttons: "Copied" pops in on a volt flash */
.set-copy { gap: 6px; }
.set-copy .set-icon { width: 14px; height: 14px; }
.btn.is-copied,
.set-root .btn.is-copied {
  background: var(--s-volt) !important; border-color: transparent !important; color: var(--s-volt-ink) !important;
  animation: set-copied var(--s-d3) var(--s-pop) both;
}
.btn.is-copied .set-icon { display: none; }
.btn.is-copied::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.5 4.9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.5 4.9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- team: office checklist --------------------------------------------- */
.set-office-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; margin: 0 0 8px; }
.set-office-grid > legend { margin-bottom: 8px; }
.set-office-grid > .field-hint { grid-column: 1 / -1; }
.set-root .set-office-grid .checkbox {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--s-line); border-radius: var(--s-r-ctl);
  background: var(--s-card);
  transition: border-color var(--s-d2) var(--s-ease), background var(--s-d2) var(--s-ease);
}
.set-root .set-office-grid .checkbox:hover { border-color: var(--s-line-strong); }
.set-root .set-office-grid .checkbox:has(input:checked) { border-color: var(--ink); background: var(--s-card-2); }
.set-root .set-office-grid .checkbox input { width: 16px; height: 16px; accent-color: var(--ink); }
.set-root .set-office-grid[disabled] .checkbox { opacity: 0.6; cursor: not-allowed; }
.set-root #settings-office-access details,
.set-root .office-setup-panel details { padding: 12px 14px; border-radius: var(--s-r-ctl); background: var(--s-card-2); border: 1px solid var(--s-line); }
.set-root #settings-office-access summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

/* ---- links ----------------------------------------------------------------- */
.set-intro {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px;
  border-radius: var(--s-r-card);
  background: var(--s-card-2);
  border: 1px solid var(--s-line);
}
.set-intro > .set-icon { width: 20px; height: 20px; margin-top: 2px; color: var(--ink); }
.set-intro .source-links-intro { margin: 0; color: var(--ink); font-size: var(--fs-md); line-height: 1.5; }
.set-intro .field-hint:empty { display: none; }
.set-platform {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--ink); color: var(--s-on-ink);
}
.set-platform .set-icon { width: 20px; height: 20px; }
.source-link-account { animation: set-rise var(--s-d3) var(--s-ease) both; animation-delay: calc(min(var(--i, 0), 12) * 60ms); }
.set-root .source-link-list { gap: 0; padding-top: 8px; }
.set-root .source-link { position: relative; isolation: isolate; gap: 10px; padding: 16px 0; border-top: 1px solid var(--s-line); }
.set-root .source-link:first-child { padding-top: 4px; border-top: 0; }
.set-root .source-link.is-copied::after {
  content: ""; position: absolute; inset: 0 -20px; z-index: -1; pointer-events: none;
  background: var(--s-volt-soft);
  transform-origin: left center;
  animation: set-wipe 900ms var(--s-ease) both;
}
.set-root .source-link-title .strong { font-size: var(--fs-md); }
.set-root .source-link-copy {
  gap: 0; padding: 3px;
  border: 1px solid var(--s-line-strong); border-radius: calc(var(--s-r-ctl) + 3px);
  background: var(--s-card-2);
}
.set-root .source-link-copy .input {
  min-height: 44px; border: 0; background: transparent; box-shadow: none;
  font-size: var(--fs-xs); color: var(--ink); text-overflow: ellipsis;
}
.set-root .source-link-copy .input:focus { box-shadow: none; outline: 0; }
.set-root .source-link-copy:focus-within { border-color: var(--ink); }
.set-root .source-link-copy .btn { min-height: 44px; min-width: 104px; border-radius: var(--s-r-ctl); background: var(--ink); border-color: var(--ink); color: var(--s-on-ink); font-size: var(--fs-sm); }
.set-root .source-link-copy .btn:hover { background: var(--ink-hover, var(--ink)); }
@container settings (max-width: 560px) {
  .set-root .source-link-head { flex-direction: column; gap: 6px; }
  .set-root .source-link-copy { flex-direction: column; align-items: stretch; }
  .set-root .source-link-copy .btn { width: 100%; }
}

/* ---- attribution: the hatched unknown stays, restyled --------------------- */
.set-root .attr-note {
  align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--s-line); border-radius: 12px;
  background: var(--s-card-2); box-shadow: none;
  color: var(--ink); font-size: var(--fs-sm); line-height: 1.5;
}
.attr-note-swatch {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  border: 1px dashed var(--s-line-strong);
  background-color: var(--unknown-bg); background-image: var(--hatch);
}
.set-bars { margin-top: 20px; gap: 10px; }
.set-root .set-bar { grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) 84px; gap: 16px; padding: 4px 0; font-size: var(--fs-sm); }
.set-root .set-bar .bar-label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.set-root .set-bar .bar-track { height: 10px; border-radius: 999px; background: var(--s-paper-2); }
.set-root .set-bar .bar-fill {
  border-radius: 999px;
  transform-origin: left center;
  animation: set-grow var(--s-d4) var(--s-ease) both;
  animation-delay: calc(min(var(--i, 0), 12) * 70ms);
}
.set-root .set-bar .bar-fill.is-unknown { box-shadow: inset 0 0 0 1px var(--unknown); }
.set-root .attr-unknown {
  height: 20px; padding: 0 8px; border-radius: 999px;
  font-family: inherit; font-size: 11px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
.set-root .set-bar .bar-value { font-family: inherit; color: var(--s-muted); }
@container settings (max-width: 520px) {
  .set-root .set-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .set-root .set-bar .bar-track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- motion --------------------------------------------------------------- */
@keyframes set-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes set-pop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes set-tick-pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
@keyframes set-spin { to { transform: rotate(360deg); } }
@keyframes set-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes set-copied { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes set-wipe { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---- command center: a lighter touch ------------------------------------- */
.command-shell { gap: 20px; }
.command-shell .command-head {
  flex-wrap: wrap; align-items: flex-end; gap: 16px;
  padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
.command-shell .command-head { margin-bottom: 0; }
.command-shell .command-head .view-title { margin-top: 12px; font-size: var(--fs-2xl); letter-spacing: var(--ls-display, -0.03em); }
.command-shell .command-head .view-context { margin-top: 8px; max-width: 72ch; font-size: var(--fs-md); line-height: 1.5; color: var(--s-muted); }
.command-shell .command-tabs {
  width: fit-content; max-width: 100%;
  gap: 4px; padding: 4px;
  border: 0; border-radius: 999px;
  background: var(--s-paper-2);
  scrollbar-width: none;
}
.command-shell .command-tab { min-height: 36px; padding: 0 16px; border-radius: 999px; color: var(--s-muted); font-weight: 500; transition: background var(--s-d2) var(--s-ease), color var(--s-d2) var(--s-ease); }
.command-shell .command-tab:hover { background: transparent; color: var(--ink); }
.command-shell .command-tab.is-active { background: var(--s-card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(11, 13, 18, 0.06), 0 6px 16px -8px rgba(11, 13, 18, 0.22); }
.command-shell .command-panel { animation: set-rise var(--s-d3) var(--s-ease) both; }
.command-shell .command-loading,
.command-shell .command-stats .stat,
.command-shell .command-mention,
.command-shell .command-consult-card,
.command-shell .command-trend-card,
.command-shell .command-consensus,
.command-shell .command-work-summary,
.command-shell .command-work-total {
  border: 1px solid var(--s-line); border-radius: var(--s-r-card);
  background: var(--s-card); box-shadow: var(--s-shadow-card);
}
.command-shell .command-stats { gap: 12px; }
.command-shell .command-stats .stat { padding: 14px 16px; }
.command-shell .command-column,
.command-shell .command-day { border: 0; border-radius: var(--s-r-card); background: var(--s-paper-2); box-shadow: none; }
.command-shell .command-column-head h3,
.command-shell .command-day-head h3 { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em; text-transform: none; font-family: inherit; }
.command-shell .command-task-card,
.command-shell .command-event {
  border: 1px solid var(--s-line); border-radius: 12px;
  background: var(--s-card); box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04);
  transition: transform var(--s-d2) var(--s-ease), box-shadow var(--s-d2) var(--s-ease);
}
.command-shell .command-task-card:hover,
.command-shell .command-event:hover { transform: translateY(-2px); box-shadow: var(--s-shadow-pop); background: var(--s-card); }
.command-shell .command-task-open { border-radius: 12px; }
.command-shell .command-task-open:hover { background: transparent; }
.command-shell .command-task-kicker { font-family: var(--font-mono); letter-spacing: 0.1em; color: var(--s-muted); }
.command-shell .command-empty-column { border-radius: 12px; }
.command-shell .command-meta { font-family: inherit; font-size: var(--fs-xs); color: var(--s-muted); letter-spacing: 0; }
.command-shell .command-panel > .empty { margin-top: 12px; padding: 48px 20px; border: 1px dashed var(--s-line-strong); border-radius: var(--s-r-card); background: color-mix(in srgb, var(--s-card) 55%, transparent); }
.command-shell .command-panel > .empty .empty-mark {
  width: 14px; height: 14px; margin-bottom: 6px;
  border: 0; border-radius: 50%;
  background: var(--s-volt); background-image: none;
  box-shadow: 0 0 0 6px var(--s-volt-soft), 0 0 0 1px color-mix(in srgb, var(--s-volt-ink) 25%, transparent);
}
.command-shell .command-panel > .empty .empty-title { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; }
.command-shell .command-sentiment.is-positive,
.command-shell .command-trend-split .is-positive { color: var(--s-volt-ink); background: var(--s-volt); }
.command-shell .command-work-state.is-ok { color: var(--s-volt-ink); background: var(--s-volt); border-color: transparent; }
@media (max-width: 640px) {
  .command-shell .command-head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .command-shell .command-tabs { width: 100%; overflow-x: auto; }
  .command-shell .command-tab { min-height: 44px; }
  .command-shell .command-head .view-head-actions, .command-shell .command-head .view-head-actions .btn { width: 100%; min-height: 44px; }
}

/* ---- sign-in: a paper canvas with a floating card ------------------------ */
.gate {
  position: relative; isolation: isolate;
  padding: 24px 16px;
  background:
    radial-gradient(1100px 620px at 50% 0%, color-mix(in srgb, var(--s-card) 72%, transparent), transparent 65%),
    var(--s-paper);
}
/* the reel's corner frame marks, drawn in hairlines */
.gate::before {
  content: ""; position: absolute; inset: 24px; z-index: -1; pointer-events: none;
  --m: var(--s-line-strong);
  background:
    linear-gradient(var(--m), var(--m)) 0 0 / 16px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 0 / 1px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 16px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 1px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 16px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 1px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 16px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 1px 16px no-repeat;
}
.gate .gate-card {
  width: min(424px, 100%);
  padding: 32px 32px 24px;
  border: 1px solid var(--s-line);
  border-radius: 22px;
  background: var(--s-card);
  box-shadow: var(--s-shadow-pop);
  animation: set-rise var(--s-d4) var(--s-ease) both;
}
.gate .gate-card > .eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-muted);
}
.gate .gate-card > .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s-volt); box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-volt-ink) 28%, transparent); }
.gate .gate-title { margin-top: 12px; font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; color: var(--ink); }
/* the volt dot of the end card, after the product name */
.gate .gate-title::after {
  content: ""; display: inline-block;
  width: 0.26em; height: 0.26em; margin-left: 0.07em;
  border-radius: 50%;
  background: var(--s-volt);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-volt-ink) 22%, transparent);
  animation: set-tick-pop var(--s-d3) var(--s-pop) 360ms both;
}
.gate .gate-sub { margin: 8px 0 22px; font-size: var(--fs-md); line-height: 1.5; color: var(--s-muted); }
.gate .gate-form { gap: 12px; }
.gate .gate-form .field { margin-bottom: 0; gap: 6px; }
.gate .field-label { font-size: var(--fs-xs); font-weight: 500; color: var(--ink); }
.gate .input {
  height: 44px; padding: 0 14px;
  border: 1px solid var(--s-line-strong); border-radius: var(--s-r-ctl);
  background: var(--s-card); font-size: var(--fs-md);
}
.gate .input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--s-volt-soft); }
.gate .btn { min-height: 40px; border-radius: var(--s-r-ctl); font-weight: 550; }
.gate .btn-lg { min-height: 44px; font-size: var(--fs-md); }
.gate .btn:not(.btn-primary):not(.btn-ghost) { background: var(--s-card); border-color: var(--s-line-strong); }
.gate .btn:not(.btn-primary):not(.btn-ghost):hover { background: var(--s-card-2); border-color: var(--ink); }
.gate .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--s-on-ink); }
.gate .btn:active { transform: scale(0.98); }
/* One obvious way in: when Google sign-in is on, its button is the primary
   and the password route steps back to a quiet outlined button. */
.gate #gateGoogle:not([hidden]) {
  min-height: 52px; gap: 12px;
  background: var(--ink); border-color: var(--ink); color: var(--s-on-ink);
  font-size: var(--fs-lg); font-weight: 600;
  box-shadow: 0 10px 24px -14px rgba(11, 13, 18, 0.55);
}
.gate #gateGoogle:not([hidden]):hover { background: var(--ink-hover, var(--ink)); border-color: var(--ink); }
.gate #gateGoogle .google-mark {
  width: 26px; height: 26px; padding: 4px;
  border-radius: 50%; background: #fff;
}
.gate .gate-card:has(#gateGoogle:not([hidden])) #gateSignIn {
  background: var(--s-card); border-color: var(--s-line-strong); color: var(--ink);
  font-size: var(--fs-md);
}
.gate .gate-card:has(#gateGoogle:not([hidden])) #gateSignIn:hover { background: var(--s-card-2); border-color: var(--ink); }
.gate .gate-card .gate-or {
  font-family: inherit; font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--s-muted);
}
.gate .gate-card .gate-or::before,
.gate .gate-card .gate-or::after { background: var(--s-line); }
.gate .gate-msg { margin-top: 14px; padding: 10px 12px; border-radius: var(--s-r-ctl); background: var(--s-paper-2); color: var(--s-muted); font-size: var(--fs-xs); }
.gate .gate-msg.is-error { background: var(--s-coral-soft); color: var(--s-coral-ink); }
.gate .gate-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--s-line); }
.gate .gate-foot .field-hint { color: var(--s-muted); }
.gate .mfa-intro .badge { border-radius: 999px; font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 500; background: var(--ink); color: var(--s-on-ink); }
@media (max-width: 480px) {
  .gate { padding: 24px 16px; }
  .gate::before { inset: 10px; }
  .gate .gate-card { padding: 28px 20px 22px; border-radius: 18px; }
  .gate .gate-title { font-size: 30px; }
}

/* ---- reduced motion: nothing moves ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .set-root *, .set-root *::before, .set-root *::after,
  .integrations *, .integrations *::before, .integrations *::after,
  .command-shell *, .command-shell *::before, .command-shell *::after,
  .gate *, .gate *::before, .gate *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* ==== END settings ==== */

/* ==== ROSE UI 2026 · outgoing activity ==== */
.outgoing-shell { display: grid; gap: var(--sp-5); max-width: var(--content-max); min-width: 0; }
.outgoing-shell .view-head { margin-bottom: 0; }
.outgoing-shell .card, .outgoing-shell .card-body, .outgoing-shell .card-head > div { min-width: 0; }
.outgoing-shell .card-head { gap: var(--sp-3); flex-wrap: wrap; }
.outgoing-shell .card-head .btn { margin-left: auto; }
.outgoing-shell .card-title, .outgoing-shell .card-sub { overflow-wrap: anywhere; }
.outgoing-scope, .outgoing-help, .outgoing-stamp, .outgoing-missing { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.outgoing-scope { margin: 0; max-width: 84ch; }
.outgoing-filters { display: flex; gap: var(--sp-4); align-items: end; flex-wrap: wrap; }
.outgoing-filters .field { min-width: 170px; flex: 1 1 220px; margin: 0; }
.outgoing-filters .select { width: 100%; }
.outgoing-list, .outgoing-history { display: grid; gap: var(--sp-4); }
.outgoing-message { min-width: 0; overflow-wrap: anywhere; }
.outgoing-message-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.outgoing-message-head .chip { white-space: normal; }
.outgoing-message p { margin: var(--sp-2) 0; }
.outgoing-delivery { font-weight: 600; font-size: var(--fs-sm); }
.outgoing-body, .outgoing-subject { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.outgoing-body { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card-2); color: var(--ink); }
.outgoing-approval { font-size: var(--fs-sm); line-height: 1.5; }
.outgoing-copy > summary, .outgoing-evidence > summary { cursor: pointer; padding: var(--sp-2) 0; min-height: 36px; font-weight: 500; }
.outgoing-evidence { font-size: var(--fs-sm); }
.outgoing-evidence dl { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: var(--sp-2); margin: var(--sp-2) 0; }
.outgoing-evidence dt { opacity: .85; }
.outgoing-evidence dd { margin: 0; overflow-wrap: anywhere; }
.outgoing-pages, .outgoing-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.outgoing-pages { justify-content: space-between; margin-top: var(--sp-4); }
.outgoing-pages > span { color: var(--muted); font-size: var(--fs-sm); }
.outgoing-history .outgoing-message { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.outgoing-history .is-inbound { border-left: 3px solid var(--line-strong); padding-left: var(--sp-3); }
.inbox-message .outgoing-body { color: inherit; background: transparent; padding: 0; border: 0; }
.inbox-message .outgoing-missing { color: inherit; opacity: .85; }
.inbox-message .outgoing-evidence { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .outgoing-shell .card-body, .outgoing-shell .card-head { padding: var(--sp-4); }
  .outgoing-filters .field { min-width: 0; flex-basis: 100%; }
  .outgoing-shell .btn, .outgoing-copy > summary, .outgoing-evidence > summary { min-height: var(--tap); }
  .outgoing-filters .select { min-height: var(--tap); font-size: var(--fs-lg); }
  .outgoing-evidence dl { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .outgoing-evidence dd { margin-bottom: var(--sp-2); }
}
/* ==== END outgoing activity ==== */
/* Manual booking/deposit receipts, shared by both lead drawers. */
.manual-consult{padding:20px;margin-top:18px;min-width:0;overflow-wrap:anywhere}
.manual-consult h3{margin:0 0 10px;font-size:16px}
.manual-consult p{line-height:1.55;margin:10px 0}
.manual-consult .mc-scope,.manual-consult .mc-stamp{color:var(--muted);font-size:13px}
.manual-consult .mc-hold{padding:12px;border:1px solid var(--border);border-radius:var(--radius,8px);font-size:13px}
.manual-consult .mc-receipt{padding:14px 0;border-top:1px solid var(--border)}
.manual-consult dl{margin:12px 0;display:grid;gap:8px}
.manual-consult dl>div{display:grid;grid-template-columns:minmax(120px,1fr) 1.6fr;gap:12px}
.manual-consult dt{color:var(--muted);font-size:13px}
.manual-consult dd{margin:0;font-size:13px}
.manual-consult .mc-basis{white-space:pre-wrap}
.manual-consult fieldset{border:0;padding:0;margin:16px 0;min-width:0}
.manual-consult legend{font-weight:650;margin-bottom:12px}
.manual-consult .field{display:grid;gap:6px;margin:10px 0;font-size:13px;min-width:0}
.manual-consult .mc-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px}
.manual-consult .mc-check input{width:18px;height:18px;flex-shrink:0}
.manual-consult .mc-money{display:grid;grid-template-columns:minmax(0,2fr) minmax(70px,1fr);gap:12px}
.manual-consult .mc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.manual-consult .mc-actions .btn,.manual-consult summary{min-height:44px}
.manual-consult .mc-error{color:var(--danger);font-weight:550}
.manual-consult .mc-history{margin-top:18px}
.manual-consult summary{cursor:pointer;display:flex;align-items:center;font-size:13px}
@media(max-width:480px){.manual-consult{padding:14px}.manual-consult dl>div{grid-template-columns:1fr;gap:2px}.manual-consult .mc-actions .btn{width:100%}}