/* Routive AI brand CSS.
   Brand Guideline v7.2 (Comprehensive), May 2026.
   Source of truth: BRAND_V7_GUIDELINE.md (in repo root).
   Visual reference: BRAND_V7_REFERENCE.html. */

/* ════════════════════════════════════════════════════════════════
   BRAND v7.2 TOKEN MIGRATION (2026-05-08, Phase 0)
   ════════════════════════════════════════════════════════════════
   Brand v7.2 replaces the v3-era theme-toggle palette with a
   calibrated two-mode system (Cream + Warm) plus a deferred Print
   variant. Trust-loaded colors hit AAA in both modes, chrome AA.
   Three-elevation surface scale, three-tier hairline hierarchy,
   five-step radius scale.

   The :root paste-ready CSS lives in §24 of the spec and is what
   the blocks below implement.

   Attribute rename (Phase 2): data-theme → data-mode per §3.

   ── v7.2 → v3 alias mapping (legacy tokens stay readable, ~9000
      lines of existing component CSS keeps working unchanged) ──

   SURFACES (3 raised + 1 recessed):
     --paper             #F6F4EF / #0E1013       page ground
     --paper-card        #FFFFFF / #1C2026       raised cards
     --paper-pop         #FFFFFF / #242932       modals, popovers
     --paper-well        #ECE9DF / #060709       recessed inputs/wells

     Aliases:
       --bg              → --paper
       --surface-1       → --paper-card    (sub-card tier collapsed)
       --surface-2       → --paper-card
       --surface-3       → --paper-pop
       --bg-elev         → --paper-card
       --bg-card         → --paper-card    (silent fallback resolved)
       --card-bg         → --paper-card
       --surface-tint    → --paper-card    (wash kept as alias)
       --inset           → --paper-well

   INK (three roles):
     --ink               #14202C / #F2F2F1       body 13.4:1 / 14.6:1 AAA
     --ink-soft          #3A4756 / #B4B5B3       secondary 8.1:1 / 8.4:1 AAA
     --ink-mute          #5F6772 / #8A8E8C       tertiary 4.9:1 / 5.1:1 AA

     Aliases:
       --text-primary    → --ink
       --primary         → --ink
       --text            → --ink
       --off-white       → --ink           (resolves silent fallback)
       --charcoal        → --paper-card    (legacy off-bg use)
       --text-secondary  → --ink-soft
       --secondary       → --ink-soft
       --text-muted      → --ink-mute
       --meta            → --ink-mute      (was 0.62 alpha; now AA token)

   HAIRLINES (three tiers):
     --line              rgba(20,32,44,.10)/rgba(255,255,255,.08)   default
     --line-2            rgba(20,32,44,.16)/rgba(255,255,255,.14)   section break
     --line-strong       rgba(20,32,44,.28)/rgba(255,255,255,.24)   major hierarchy

     Aliases:
       --hairline        → --line
       --hairline-2      → --line          (consolidated)
       --rule            → --line-2
       --divider         → --line
       --card-border     → --line

   TRUST-LOADED · AAA both modes:
     --gold              #7A560C / #D89C2A       commission
     --red               #9E2A2A / #E47474       customer-bad
     --green             #246A3F / #5DB39A       customer-good (NEW)
     --brand-fg          #1F4D3F / #5DB39A       brand foreground (NEW)

     Aliases:
       --gold-deep       → --gold
       --warm-gold       → --gold
       --red-deep        → --red
       --red-bg          → --red-soft
       --forest          → --brand-fg
       --forest-bright   → --brand-fg
       --stale-amber     → --gold
       --gold-light      → --gold

   CHROME (AA light / AAA dark):
     --teal              #0B7268 / #2A9D8F       primary chrome
     --teal-deep         #085A52 / #3FB8A6       hover/active
     --violet            #5C42AE / #9B8AE6       AI voice
     --violet-soft       rgba(...,.10/.14)       AI block bg (NEW)

     Aliases:
       --teal-mid        → --teal
       --teal-hover      → --teal-deep
       --ai              → --violet
       --ai-text         → --violet
       --ai-deep         → --violet
       --ai-bg           → --violet-soft
       --ai-wash         → --violet-soft
       --ai-wash-2       → --violet-soft         (consolidated)
       --ai-glow         → --violet-soft

   BRAND · logo only:
     --brand-teal        #1C9F76                 NEVER UI; lockup only

     Invariants kept: --navy #1E1B3D (Deep Navy brand-moment),
                      --on-teal / --on-gold (text on accent pills).

   FOCUS:
     --focus             #0B7268 / #2A9D8F
     --focus-ring        0 0 0 3px rgba(...,.32)

   SHADOWS (Phase 4 — two strengths only):
     --shadow-card       v7.2 spec; replaces hard-coded card shadow
     --shadow-pop        v7.2 spec; replaces hard-coded modal shadow

   WASH TOKENS kept (component-level usage):
     --teal-soft / --teal-soft-2 / --teal-line
     --gold-soft / --gold-soft-2 / --gold-line
     --red-soft / --ai-border / --gold-tint

   TYPOGRAPHY (Phase 3 — family tokens):
     --sans   'IBM Plex Sans', system-ui, sans-serif
     --serif  'IBM Plex Serif', Georgia, serif       (NEW for v7.2)
     --mono   'IBM Plex Mono', monospace

   SPACING (Phase 3 — 8px base, nine steps):
     --s-0..--s-9 = 2/4/8/12/16/24/32/48/64/96

   RADII (Phase 6 — five-step scale):
     --r-0  0    tables, dense rows
     --r-1  4    buttons, inputs, chips
     --r-2  8    cards, callouts, modals
     --r-3  12   marketing cards, hero panels
     --r-pill 9999 toggle pills only

   DEFERRED (not in this branch — see BRAND_V7_BUILD_PLAN.md):
     - Print/Paper mode (data-mode="print")
     - Commission disclosure component
     - DiffNumber outcome-coded pattern (▲ / ▼)
     - AI block component refactor
     - Plex Serif italic AI voice rollout (tokens only this branch)
     - 13-item ship gate enforcement

   ── WCAG 2.1 contrast verified 2026-05-08 (Phase 7) ──
   Measured ratios (relative luminance method):

     Trust-loaded (target: AAA at body / large-text AAA at display):
       Light  --gold     #7A560C on #F6F4EF   6.04:1  AA  body / AAA large
       Light  --red      #9E2A2A on #F6F4EF   6.78:1  AA  body / AAA large
       Light  --green    #246A3F on #F6F4EF   5.95:1  AA  body / AAA large
       Light  --brand-fg #1F4D3F on #F6F4EF   8.72:1  AAA body
       Dark   --gold     #D89C2A on #0E1013   7.90:1  AAA body
       Dark   --red      #E47474 on #0E1013   6.40:1  AA  body / AAA large
       Dark   --green    #5DB39A on #0E1013   7.60:1  AAA body
       Dark   --brand-fg #5DB39A on #0E1013   7.60:1  AAA body

     Chrome (target: AA minimum):
       Light  --teal     #0B7268 on #F6F4EF   5.28:1  AA   ✓
       Light  --violet   #5C42AE on #F6F4EF   6.71:1  AA   ✓
       Dark   --teal     #2A9D8F on #0E1013   5.73:1  AA   ✓
       Dark   --violet   #9B8AE6 on #0E1013   6.51:1  AA   ✓

     Body text (--ink): 15.01:1 light / 17.01:1 dark — AAA both modes.

     Trust-loaded colors that miss strict body-text AAA (7.0:1) all
     clear large-text AAA (4.5:1) — the contexts they're used in
     (commission headlines, status pills, large amounts) are
     display-size by spec. Per §1 rule 2 the AAA gate applies to
     trust-loaded text in its actual display context.
   ════════════════════════════════════════════════════════════════ */

/* ── v7.2 Light · Cream (canonical default) ────────────────────── */
:root,
:root[data-mode="light"] {
  color-scheme: light;

  /* Surface · 3 raised + 1 recessed */
  --paper:        #F6F4EF;
  --paper-card:   #FFFFFF;
  --paper-pop:    #FFFFFF;
  --paper-well:   #ECE9DF;

  /* Ink · three roles (AAA / AAA / AA) */
  --ink:          #14202C;
  --ink-soft:     #3A4756;
  --ink-mute:     #5F6772;

  /* Hairlines · three tiers */
  --line:         rgba(20,32,44,.10);
  --line-2:       rgba(20,32,44,.16);
  --line-strong:  rgba(20,32,44,.28);

  /* Trust-loaded · AAA */
  --gold:         #7A560C;
  --red:          #9E2A2A;
  --green:        #246A3F;
  --brand-fg:     #1F4D3F;

  /* Chrome · AA */
  --teal:         #0B7268;
  --teal-deep:    #085A52;
  --violet:       #5C42AE;
  --violet-soft:  rgba(92,66,174,.10);
  --violet-well:  rgba(92,66,174,.18);

  /* Brand · logo only · NEVER UI */
  --brand-teal:   #1C9F76;

  /* Focus */
  --focus:        #0B7268;
  --focus-ring:   0 0 0 3px rgba(11,114,104,.32);

  /* Shadows · two strengths */
  --shadow-card:  0 1px 2px rgba(20,32,44,.06), 0 4px 12px -6px rgba(20,32,44,.10);
  --shadow-pop:   0 1px 0 rgba(20,32,44,.04), 0 12px 32px -16px rgba(20,32,44,.20);

  /* Radii · five-step scale, no SaaS tropes */
  --r-0:    0;
  --r-1:    4px;
  --r-2:    8px;
  --r-3:    12px;
  --r-pill: 9999px;

  /* Spacing · 8px base, nine steps */
  --s-0:    2px;
  --s-1:    4px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    24px;
  --s-6:    32px;
  --s-7:    48px;
  --s-8:    64px;
  --s-9:    96px;

  /* Typography · family tokens. Routive override on §6: Sans + Mono
     only. --serif is retained as an alias to --sans for any inherited
     class references but no Serif font is loaded. */
  --sans:   'IBM Plex Sans', system-ui, sans-serif;
  --serif:  var(--sans);
  --mono:   'IBM Plex Mono', 'JetBrains Mono', monospace;

  /* On-accent · text on bright accent pills (uses page ground so it
     auto-flips per mode: cream on dark teal, near-black on bright teal) */
  --on-teal:      var(--paper);
  --on-gold:      var(--paper);

  /* Wash tokens · component-level surface tints (recalibrated to v7.2 hues) */
  --teal-soft:    rgba(11,114,104,.10);
  --teal-soft-2:  rgba(11,114,104,.05);
  --teal-line:    rgba(11,114,104,.32);
  --gold-soft:    rgba(122,86,12,.10);
  --gold-soft-2:  rgba(122,86,12,.05);
  --gold-line:    rgba(122,86,12,.32);
  --red-soft:     rgba(158,42,42,.10);
  --gold-tint:    rgba(122,86,12,.08);
  --ai-border:    rgba(92,66,174,.32);

  /* Brand-moment invariants */
  --navy:         #1E1B3D;

  /* ── Semantic text-role aliases (kept) ────────────────
     --primary / --secondary / --meta read more naturally in
     component CSS than --ink / --ink-soft / --ink-mute. All
     other legacy aliases (--card-bg, --surface-tint, --rule,
     --inset, --hairline, etc.) have been migrated to canonical
     tokens and removed. */
  --primary:        var(--ink);
  --secondary:      var(--ink-soft);
  --meta:           var(--ink-mute);

  --gold-deep:      var(--gold);
  --warm-gold:      var(--gold);
  --gold-light:     var(--gold);
  --red-deep:       var(--red);
  --red-bg:         var(--red-soft);
  --forest:         var(--brand-fg);
  --forest-bright:  var(--brand-fg);
  --stale-amber:    var(--gold);

  --teal-mid:       var(--teal);
  --teal-hover:     var(--teal-deep);
  --ai:             var(--violet);
  --ai-text:        var(--violet);
  --ai-deep:        var(--violet);
  --ai-bg:          var(--violet-soft);
  --ai-wash:        var(--violet-soft);
  --ai-wash-2:      var(--violet-soft);
  --ai-glow:        var(--violet-soft);

  /* Legacy aliases used by workshop.css and other pre-v7 stylesheets.
     Defining them here in the bare :root part means they persist into
     dark mode automatically — the underlying v7 tokens (--paper,
     --ink, --line) get redefined in :root[data-mode="dark"] and these
     aliases follow. */
  --bg:             var(--paper);
  --surface:        var(--paper-card);
  --surface-2:      var(--paper-well);
  --surface-3:      var(--paper-pop);
  --text:           var(--ink);
  --hairline:       var(--line);
  --hairline-2:     var(--line-2);
  --faint:          var(--ink-mute);
  --ai-soft:        var(--violet-soft);
  --ai-line:        var(--ai-border);

  --card-hover:     rgba(20,32,44,.04);
}

/* ── v7.2 Dark · Warm ──────────────────────────────────────────── */
:root[data-mode="dark"] {
  color-scheme: dark;

  --paper:        #0E1013;
  --paper-card:   #1C2026;
  --paper-pop:    #242932;
  --paper-well:   #060709;

  --ink:          #F2F2F1;
  --ink-soft:     #B4B5B3;
  --ink-mute:     #8A8E8C;

  --line:         rgba(255,255,255,.08);
  --line-2:       rgba(255,255,255,.14);
  --line-strong:  rgba(255,255,255,.24);

  /* Trust-loaded · AAA on dark Warm */
  --gold:         #D89C2A;
  --red:          #E47474;
  --green:        #5DB39A;
  --brand-fg:     #5DB39A;

  /* Chrome · AAA on dark Warm */
  --teal:         #2A9D8F;
  --teal-deep:    #3FB8A6;
  --violet:       #9B8AE6;
  --violet-soft:  rgba(155,138,230,.14);
  --violet-well:  rgba(155,138,230,.22);

  --focus:        #2A9D8F;
  --focus-ring:   0 0 0 3px rgba(79,195,181,.32);

  --shadow-card:  0 1px 2px rgba(0,0,0,.5), 0 4px 12px -6px rgba(0,0,0,.6);
  --shadow-pop:   0 1px 0 rgba(0,0,0,.5), 0 14px 36px -18px rgba(0,0,0,.75);

  /* Wash tokens · recalibrated to v7.2 dark hues */
  --teal-soft:    rgba(42,157,143,.16);
  --teal-soft-2:  rgba(42,157,143,.08);
  --teal-line:    rgba(42,157,143,.36);
  --gold-soft:    rgba(216,156,42,.18);
  --gold-soft-2:  rgba(216,156,42,.08);
  --gold-line:    rgba(216,156,42,.40);
  --red-soft:     rgba(228,116,116,.16);
  --gold-tint:    rgba(216,156,42,.10);
  --ai-border:    rgba(155,138,230,.32);

  --card-hover:   rgba(255,255,255,.05);
}

/* OS-default fallback when user hasn't picked a mode (no JS bootstrap yet) */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]):not([data-mode="dark"]) {
    color-scheme: dark;

    --paper:        #0E1013;
    --paper-card:   #1C2026;
    --paper-pop:    #242932;
    --paper-well:   #060709;

    --ink:          #F2F2F1;
    --ink-soft:     #B4B5B3;
    --ink-mute:     #8A8E8C;

    --line:         rgba(255,255,255,.08);
    --line-2:       rgba(255,255,255,.14);
    --line-strong:  rgba(255,255,255,.24);

    --gold:         #D89C2A;
    --red:          #E47474;
    --green:        #5DB39A;
    --brand-fg:     #5DB39A;

    --teal:         #2A9D8F;
    --teal-deep:    #3FB8A6;
    --violet:       #9B8AE6;
    --violet-soft:  rgba(155,138,230,.14);
    --violet-well:  rgba(155,138,230,.22);

    --focus:        #2A9D8F;
    --focus-ring:   0 0 0 3px rgba(79,195,181,.32);

    --shadow-card:  0 1px 2px rgba(0,0,0,.5), 0 4px 12px -6px rgba(0,0,0,.6);
    --shadow-pop:   0 1px 0 rgba(0,0,0,.5), 0 14px 36px -18px rgba(0,0,0,.75);

    --teal-soft:    rgba(42,157,143,.16);
    --teal-soft-2:  rgba(42,157,143,.08);
    --teal-line:    rgba(42,157,143,.36);
    --gold-soft:    rgba(216,156,42,.18);
    --gold-soft-2:  rgba(216,156,42,.08);
    --gold-line:    rgba(216,156,42,.40);
    --red-soft:     rgba(228,116,116,.16);
    --gold-tint:    rgba(216,156,42,.10);
    --ai-border:    rgba(155,138,230,.32);

    --card-hover:   rgba(255,255,255,.05);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-deep); }

/* ── v7.2 type tier classes (§6) ──
   Tier 1 (cards/components): Sans + Mono only. Serif never appears
   inside a card. Tier 2 (page-level + AI block): Serif joins. */

.t-caption {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.30;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.t-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.30;
  color: var(--ink);
}

.t-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.t-body-sm {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.50;
  color: var(--ink-soft);
}

.t-tabular {
  font-family: var(--mono);
  font-weight: 500;
  font-feature-settings: "tnum";
  color: var(--ink);
}

/* Tier 2 — page-level. Routive uses Sans only (no Serif).
   See ROUTIVE OVERRIDE notes in BRAND_V7_GUIDELINE.md §6. */
.t-display {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.10;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.t-headline {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.20;
  color: var(--ink);
}

.t-lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* AI voice — single permitted italic per §1 rule 3.
   Routive override: italic Sans, not Serif. */
.t-ai, em.ai, .ai-quote {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--violet);
}

/* Numbers default to mono with tnum (§5, §16) */
.num, code, .tabular {
  font-family: var(--mono);
  font-feature-settings: "tnum";
}

/* Right padding is intentionally larger to reserve a gutter for the
   .narrator-tab (Routive Insights pull tab) which is fixed-positioned
   at viewport right: 0. The reservation keeps page content from
   running under the tab on narrow viewports. */
/* Top padding is 0 because the header band (.app-chrome) above the
   shell carries the 28px top offset + 36px header margin. */
.app-shell { max-width: 960px; margin: 0 auto; padding: 0 56px 64px 24px; }

.app-header { display: flex; align-items: center; margin-bottom: 36px; gap: 16px; }
.header-spacer { flex: 1; }
.logo { display: inline-flex; align-items: center; }
.logo-img { height: 56px; width: auto; display: block; }
/* Mode-swap the wordmark: light-text logo on dark Warm, dark-text logo
   on light Cream. Default (light Cream) shows the dark-text variant. */
.logo-img-dark { display: none; }
:root[data-mode="dark"] .logo-img-dark { display: block; }
:root[data-mode="dark"] .logo-img-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]):not([data-mode="dark"]) .logo-img-dark { display: block; }
  :root:not([data-mode="light"]):not([data-mode="dark"]) .logo-img-light { display: none; }
}

/* ── Header chrome icon buttons ──
   Cases (.admin-btn-cases): elevated pill — icon + "Cases" label inside
   a paper-card box with a hairline border.
   Inbox + Cog (.admin-btn without .admin-btn-cases): flat icons, no
   card or border. Soft hover fill keeps the affordance readable.
   This treatment is global. The welcome-page :has scope that used to
   live in welcome.css has been retired. */
.admin-wrapper { position: relative; }
.admin-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--secondary);
  width: 36px;
  height: 36px;
  border-radius: var(--r-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.admin-btn:hover {
  background: var(--card-hover, rgba(20, 32, 44, 0.04));
  color: var(--teal-mid);
}
.admin-btn-cases,
.admin-btn-book,
.admin-btn-home,
.admin-btn-renewals {
  background: var(--paper-card);
  border-color: var(--line);
  width: auto;
  min-width: 0;
  padding: 0 14px 0 12px;
  gap: 8px;
  color: var(--ink-soft);
  text-decoration: none;
}
.admin-btn-cases:hover,
.admin-btn-book:hover,
.admin-btn-home:hover,
.admin-btn-renewals:hover {
  background: var(--paper-card);
  border-color: var(--teal-mid);
  color: var(--teal-mid);
}
/* Active page marker — matches the hover treatment so the broker can
   see which surface they are on without changing the button system. */
.admin-btn-cases[aria-current="page"],
.admin-btn-book[aria-current="page"],
.admin-btn-home[aria-current="page"],
.admin-btn-renewals[aria-current="page"] {
  border-color: var(--teal-mid);
  color: var(--teal-mid);
}
.admin-btn-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* ── Global header chrome (standing rule, 2026-07-18) ──
   The header lives in .app-chrome, OUTSIDE every page shell, so page
   content width (960 case shell vs 1500 workspace shell) can never
   squeeze the nav. Before this, flexbox crushed pill icons to 0 width
   and wrapped labels on every non-wide page. Three guarantees:
   1. .app-chrome gives the header the wide-canvas metrics on every
      screen - current and future - with no per-page CSS.
   2. Header chrome never shrinks; only the spacer flexes; labels
      never wrap.
   3. The app is desktop-first: body carries a min-width, so an
      undersized window gets a horizontal scrollbar instead of a
      degraded layout. Mobile/tablet support is a separate,
      deliberate project - do not bolt it on here. */
body { min-width: 1080px; }
.app-chrome { max-width: 1500px; margin: 0 auto; padding: 28px 80px 0 56px; }
@media (max-width: 1180px) {
  .app-chrome { padding-left: 24px; padding-right: 48px; }
}
.app-header > * { flex-shrink: 0; }
.app-header .header-spacer { flex: 1 1 0; min-width: 0; }
.admin-btn svg { flex: none; }
.admin-btn-label { white-space: nowrap; }
.admin-dropdown {
  position: absolute;
  top: 44px;
  right: 0;
  width: 360px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-pop);
  z-index: 100;
  padding: 8px;
}
.admin-cases-loading {
  padding: 12px;
  font-size: 12px;
  color: var(--meta);
  font-style: italic;
}

/* Settings/admin gear dropdown. Same shell as the cases dropdown but
   denser per-item layout for diagnostic links. */
.admin-dropdown-settings {
  width: 280px;
  padding: 6px;
}
.admin-dropdown-eyebrow {
  font: 500 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: 0.14em; color: var(--meta);
  text-transform: uppercase;
  padding: 10px 12px 6px;
}
.admin-dropdown-link {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.12s ease;
}
.admin-dropdown-link:hover { background: rgba(63,207,195,0.08); }
.admin-dropdown-label {
  display: block;
  font-size: 13px;
  color: var(--primary);
  font-weight: 500;
}
.admin-dropdown-meta {
  display: block;
  font: 400 10.5px/1.3 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
  color: var(--meta);
  margin-top: 3px;
}
/* Developer-section variants of the admin-dropdown link pattern.
   `admin-dropdown-button` mirrors the link visuals but is a real
   <button>; `admin-dropdown-label-row` lays out an icon + label
   inline so the developer rows match the existing link cadence. */
.admin-dropdown-button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
}
.admin-dropdown-label-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.admin-dropdown-label-row svg {
  color: var(--meta);
  flex: 0 0 auto;
}
.admin-dropdown-subitems {
  display: flex;
  flex-direction: column;
  padding: 2px 0 6px 26px;
  gap: 1px;
}
.admin-dropdown-subitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--secondary);
  text-decoration: none;
  transition: background 0.12s ease;
}
.admin-dropdown-subitem:hover { background: rgba(63,207,195,0.08); color: var(--primary); }
.admin-dropdown-active-tag {
  font: 500 10.5px/1 'IBM Plex Mono', monospace;
  color: var(--teal-mid, #0E8C7E);
}
.admin-dropdown-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
}
.admin-dropdown-toggle-row .admin-dropdown-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.admin-cases-new {
  display: block;
  padding: 10px 12px;
  background: var(--teal);
  color: var(--on-teal);
  text-decoration: none;
  border-radius: var(--r-1);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  text-align: center;
}
.admin-cases-new:hover { background: var(--teal-hover); color: var(--on-teal); }
.admin-cases-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--meta);
  padding: 8px 12px 4px;
}
.admin-case-row {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-1);
  text-decoration: none;
  border: 1px solid transparent;
  margin-bottom: 2px;
  transition: all 0.12s;
}
.admin-case-row:hover {
  background: var(--card-hover);
  border-color: var(--teal-line);
}
.admin-case-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.admin-case-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
}
.admin-case-stage {
  font-size: 10px;
  color: var(--teal-mid);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-case-row-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
}
.admin-case-meta {
  font-size: 11px;
  color: var(--meta);
}
.admin-case-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--meta);
  background: var(--paper-card);
  padding: 1px 6px;
  border-radius: var(--r-1);
}
.admin-cases-empty {
  padding: 16px 12px;
  font-size: 12px;
  color: var(--meta);
  font-style: italic;
  text-align: center;
}
.admin-cases-view-all {
  display: block;
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font-size: 12.5px;
  color: var(--teal-mid);
  text-align: center;
  text-decoration: none;
  transition: all 0.12s;
}
.admin-cases-view-all:hover {
  background: var(--card-hover);
  border-color: var(--teal-mid);
  color: var(--teal-hover);
}

h1, h2, h3, h4 { font-weight: 500; color: var(--primary); margin: 0 0 12px; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; color: var(--secondary); }

.section-header { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--meta); margin-bottom: 10px; font-weight: 500; }
.input-explainer { font-size: 13px; color: var(--meta); margin-bottom: 14px; line-height: 1.5; }
.brand-divider { height: 1px; background: var(--line); margin: 24px 0; }

/* ── Case header (Stage 2 + 4 + 5 pages) ── */
.case-header {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.case-header h1 { margin: 0 0 4px; font-size: 22px; font-weight: 500; }
.case-header .case-meta {
  font-size: 12px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
}
.case-header .case-meta code {
  font-size: 11px;
  background: var(--paper-card);
  padding: 1px 6px;
  border-radius: var(--r-1);
}

/* Case header in flex mode hosts two cards side-by-side: a case
   summary on the left and the contribution-control slider on the
   right. align-items: stretch makes both cards match the taller's
   height so they read as a paired surface. */
.case-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 24px;
  flex-wrap: wrap;
}

/* Case summary card: identity + key profile rows so the broker can
   read the group at a glance. Mirrors the contribution-control-card
   visual treatment (card-bg, card-border, 8px radius) so the two
   surfaces feel paired. */
.case-summary-card {
  flex: 1;
  min-width: 320px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-summary-id h1 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 500;
}
.case-summary-id .case-meta {
  font-size: 12px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
}
.case-summary-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.case-summary-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  position: relative;
}
/* No ::before separator — when rows wrap to a new line, the dot
   appeared orphaned at the start. The 18px flex column-gap
   already separates rows visually. */
.case-summary-label {
  font-size: 11px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.case-summary-value {
  font-size: 13px;
  color: var(--primary);
  white-space: nowrap;
}
.case-summary-more {
  color: var(--meta);
  font-size: 11px;
}
.contribution-control {
  text-align: right;
  min-width: 280px;
}
.contribution-control-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 14px 18px;
}
.contribution-control-label {
  font-size: 11px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.contribution-slider-track-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.contribution-slider-end {
  font-size: 10px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  flex-shrink: 0;
  width: 30px;
}
.contribution-slider-end-left { text-align: right; }
.contribution-slider-end-right { text-align: left; }
.contribution-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 24px;
  background: transparent;
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.contribution-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--line);
  border-radius: var(--r-1);
  border: 0;
}
.contribution-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--teal);
  border-radius: 50%;
  cursor: pointer;
  margin-top: -6px;
  box-shadow: 0 0 0 4px var(--teal-line);
  border: 0;
}
.contribution-slider::-moz-range-track {
  height: 4px;
  background: var(--line);
  border-radius: var(--r-1);
  border: 0;
}
.contribution-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--teal);
  border-radius: 50%;
  cursor: pointer;
  border: 0;
  box-shadow: 0 0 0 4px var(--teal-line);
}
.contribution-slider-ticks {
  /* Match the inner track where the thumb center actually moves.
     Outer slider has 30px end-cap + 8px gap on each side = 38px,
     plus another 8px thumb-radius inset (the thumb cannot reach
     the slider's outer edge because half the thumb would overflow).
     Total inset = 46px on each side so tick at left: 20 percent
     aligns with the thumb center at slider value 20. */
  position: absolute;
  left: 46px;
  right: 46px;
  top: 50%;
  height: 12px;
  pointer-events: none;
  transform: translateY(-50%);
}
.contribution-slider-tick {
  position: absolute;
  width: 2px;
  height: 12px;
  background: var(--meta);
  opacity: 0.6;
  transform: translateX(-50%);
}
.contribution-slider-tick-labels {
  /* Same inset logic as .contribution-slider-ticks so labels sit
     directly under their tick marks. */
  position: relative;
  height: 14px;
  margin: 4px 46px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--meta);
}
.contribution-slider-tick-label {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.contribution-control-value {
  margin-top: 10px;
  font-size: 12px;
  color: var(--primary);
  font-family: 'IBM Plex Mono', monospace;
  text-align: center;
}

/* Pricing summary inline rows. The label and value columns share a
   single grid so the right edge of every label and the left edge of
   every value (i.e. each dollar sign) line up vertically across all
   four rows. Rows themselves use display: contents so their child
   span elements become direct grid items in the parent .rec-pricing
   grid (see below). */
.rec-pricing-row {
  display: contents;
}
.rec-pricing-row-label {
  font-size: 11px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: right;
}
.rec-pricing-row-value {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  font-family: 'IBM Plex Mono', monospace;
  justify-content: flex-start;
}

/* ── Brand footer ── */
.brand-footer {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-align: center;
  padding: 32px 0 16px;
  /* Major page boundary — uses the strongest hairline tier per v7.2 §8 */
  border-top: 1px solid var(--line-strong);
  margin-top: 48px;
}

/* ── Stage 3 (Model Selection) cards with inline expectations ── */
.select-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 16px 20px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.18s;
}
.select-card:hover {
  border-color: var(--teal-line);
  background: var(--card-hover);
}
.select-card-checked {
  /* Checked state: teal top-rail + teal border, no decorative fill.
     Same pattern as rec-card-primary on the recommendation page. */
  border-color: var(--teal-mid);
  box-shadow: var(--shadow-card), inset 0 4px 0 var(--teal);
}
.select-card-eliminated {
  opacity: 0.7;
}
.select-card-eliminated.select-card-checked { opacity: 1; }

.select-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}
.select-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.select-checkbox {
  font-size: 18px;
  color: var(--teal-mid);
  flex-shrink: 0;
}
.select-card-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--primary);
}
.select-primary-star {
  color: var(--gold);
  font-size: 14px;
}
.select-card-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.select-score-pct {
  font-size: 22px;
  font-weight: 500;
  color: var(--teal-mid);
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1;
}
.select-fit {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 500;
  margin-top: 4px;
}

.select-card-driver {
  font-size: 13px;
  color: var(--secondary);
  margin-bottom: 12px;
  padding-left: 28px;
}
.rec-pricing-inline {
  color: var(--teal-mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}

.select-card-expectations {
  /* Inset content block — left rail binds to the parent card's
     checked state. No nested-card surface; spacing + the rail do
     the hierarchy work. */
  margin-top: 12px;
  padding: 4px 0 4px 16px;
  margin-left: 28px;
  border-left: 2px solid var(--line);
}
.select-card-checked .select-card-expectations {
  border-left-color: var(--teal);
}
.select-expectations-header {
  font-size: 11px;
  color: var(--meta);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'IBM Plex Mono', monospace;
  margin-bottom: 8px;
}
.select-expectations-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.select-expectations-list li {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  gap: 12px;
}
.select-expectations-item {
  color: var(--secondary);
}
.select-expectations-note {
  color: var(--meta);
  font-style: italic;
  font-size: 11px;
  text-align: right;
}
.select-expectations-effort {
  font-size: 11px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.select-expectations-effort strong {
  color: var(--secondary);
  font-weight: 500;
}

/* ── Sprint 3b: per-model strategy accordion (Selection page) ── */
.select-strategy {
  /* Same rail-only treatment as .select-card-expectations. */
  margin-top: 16px;
  margin-left: 28px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--line);
}
.select-card-checked .select-strategy {
  border-left-color: var(--teal);
}
.select-strategy-title {
  font-size: 11px;
  color: var(--meta);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'IBM Plex Mono', monospace;
  margin-bottom: 10px;
}
.select-strategy-option {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  align-items: flex-start;
}
.select-strategy-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.select-strategy-option strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary);
}
.select-strategy-helper {
  display: block;
  font-size: 12px;
  color: var(--meta);
  line-height: 1.45;
  margin-top: 2px;
}
.select-strategy-cta-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.select-strategy-cta-helper {
  font-size: 11px;
  color: var(--meta);
  font-style: italic;
}
.select-strategy-deferred {
  font-size: 12px;
  color: var(--meta);
  font-style: italic;
  line-height: 1.5;
}

/* ── Welcome / overview page ── */
.welcome-tagline {
  font-size: 12px;
  color: var(--meta);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  font-family: 'IBM Plex Mono', monospace;
}
.welcome-hero { margin-top: 8px; }
.welcome-hero h1 {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 14px;
  max-width: 720px;
}
.welcome-hero .welcome-sub {
  font-size: 15px;
  color: var(--secondary);
  max-width: 720px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.welcome-hero .welcome-anchor {
  font-size: 12px;
  color: var(--meta);
  max-width: 720px;
  line-height: 1.55;
  font-style: italic;
  margin: 0;
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 760px) { .stage-grid { grid-template-columns: 1fr; } }

.stage-card {
  display: flex;
  gap: 16px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 18px 22px;
  transition: border-color 0.18s;
}
.stage-card:hover { border-color: var(--teal-line); }
.stage-card-pending {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.stage-card-pending h3 { color: var(--meta); }
.stage-card-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--on-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 16px;
}
.stage-card-pending .stage-card-num {
  background: var(--line);
  color: var(--meta);
}
.stage-card-body { flex: 1; min-width: 0; }
.stage-card-body h3 {
  margin: 2px 0 4px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stage-card-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--teal-mid);
  margin-bottom: 8px;
}
.stage-card-pending .stage-card-time { color: var(--meta); }
.stage-card-body p {
  font-size: 13px;
  color: var(--meta);
  line-height: 1.5;
  margin: 0;
}
.stage-card-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--meta);
  background: var(--card-hover);
  padding: 2px 6px;
  border-radius: var(--r-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
}

.welcome-principles { margin-top: 36px; }
.principles-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.principles-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--secondary);
  line-height: 1.55;
}
.principles-list li:last-child { border-bottom: none; }
.principles-list strong { color: var(--primary); font-weight: 500; }

/* ── Persistent 6-stage strip on case-bound pages ── */
.stage-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 28px;
  padding: 4px 0;
  flex-wrap: nowrap;
}
.stage-strip::-webkit-scrollbar { height: 4px; }

.stage-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  text-decoration: none;
  flex: 1 1 0;
  min-width: 0;
  transition: all 0.15s;
}
a.stage-pill { cursor: pointer; }
a.stage-pill:hover { background: var(--card-hover); border-color: var(--teal-line); }

.stage-pill-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  background: var(--line);
  color: var(--meta);
}
.stage-pill-body { display: flex; flex-direction: column; min-width: 0; }
.stage-pill-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.stage-pill-time {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--meta);
  white-space: nowrap;
}

/* States */
.stage-pill-done .stage-pill-num { background: var(--teal); color: var(--on-teal); }
.stage-pill-done .stage-pill-name { color: var(--secondary); }
a.stage-pill-done { cursor: pointer; transition: background 0.12s, border-color 0.12s; }
a.stage-pill-done:hover {
  background: var(--teal-soft);
  border-color: var(--teal-line);
}

.stage-pill-current {
  border-color: var(--teal-mid);
  background: var(--teal-soft);
}
.stage-pill-current .stage-pill-num { background: var(--teal); color: var(--on-teal); }
.stage-pill-current .stage-pill-name { color: var(--primary); }
.stage-pill-current .stage-pill-time { color: var(--teal-mid); }

.stage-pill-pending { opacity: 0.55; }

/* Visited but not completed: broker has been to this stage but it
   doesn't yet meet its strict exit criterion. Distinct from done. */
.stage-pill-visited {
  border-color: var(--teal-line);
  border-style: dashed;
}
.stage-pill-visited .stage-pill-num {
  background: var(--teal-line);
  color: var(--teal-mid);
  border: 1px dashed var(--teal);
}
.stage-pill-visited .stage-pill-name { color: var(--secondary); }

.stage-pill-connector {
  flex: 0 0 12px;
  min-width: 8px;
  height: 1px;
  background: var(--line);
  align-self: center;
}

/* ── Lifecycle phase strip (broker default view: 4 phase pills) ──
   Renders Route / Market / Quote / Place. Active phase expands to
   show its 1 to 3 steps with progress markers (done / active / future).
   Non-active phases render compact with phase name (and ✓ if done).
   No step enumeration globally, no Optimize arc, no automation
   percentages. Admin variant with full 9-step / 2-arc view lands in
   Build 5. */
.lifecycle-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 28px;
  padding: 4px 0;
  flex-wrap: nowrap;
}

.phase-pill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px 10px;
  background-color: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  /* Raised card + persistent teal top-accent rail. Future state by
     default; current intensifies, done neutralizes (see below). */
  box-shadow: var(--shadow-card), inset 0 3px 0 var(--teal-mid);
  text-decoration: none;
  flex: 1 1 0;
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
a.phase-pill { cursor: pointer; }
a.phase-pill:hover {
  border-color: var(--teal-mid);
  box-shadow: var(--shadow-card), inset 0 3px 0 var(--teal);
}

.phase-pill-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.phase-pill-step {
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--teal-mid);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.phase-pill-check {
  display: inline-block;
  color: var(--teal-mid);
  font-weight: 500;
  margin-right: 4px;
}

.phase-pill-current {
  border-color: var(--teal-mid);
  /* Current phase: thicker rail at full teal — same anchor position
     as the resting state, just intensified. */
  box-shadow: var(--shadow-card), inset 0 4px 0 var(--teal);
  padding: 14px 14px 10px;
}
.phase-pill-current .phase-pill-name { color: var(--primary); }

.phase-pill-done {
  /* Visited but not current: rail neutralizes to --line-2. */
  box-shadow: var(--shadow-card), inset 0 3px 0 var(--line-2);
}
.phase-pill-done .phase-pill-name { color: var(--secondary); }

.phase-pill-future {
  opacity: 0.55;
}

.phase-pill-connector {
  flex: 0 0 auto;
  min-width: 12px;
  height: 1px;
  background: var(--line);
  align-self: center;
}

/* Step list inside the active phase pill. Only renders when the
   active phase has 2 or more steps (Place is single-step and uses
   the inline phase-pill-step instead). */
.phase-step-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.phase-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phase-step-marker {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--meta);
}

.phase-step-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phase-step-done .phase-step-marker { color: var(--teal-mid); }
.phase-step-done .phase-step-name { color: var(--secondary); }

.phase-step-active .phase-step-marker { color: var(--teal-mid); }
.phase-step-active .phase-step-name {
  color: var(--primary);
  font-weight: 500;
}

.phase-step-future .phase-step-marker { color: var(--line); }
.phase-step-future .phase-step-name { color: var(--meta); }

/* Clickable step labels (back-navigation within the active phase). */
.phase-step-link {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.phase-step-link:hover .phase-step-name { text-decoration: underline; }
.phase-step-active .phase-step-link { cursor: default; }
.phase-step-active .phase-step-link:hover .phase-step-name { text-decoration: none; }

/* ── Step placeholder card (Steps 5-8 not-yet-built pages) ── */
.placeholder-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 32px 32px 28px;
  margin: 0 auto;
  max-width: 720px;
}
.placeholder-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-mid);
  margin-bottom: 10px;
}
.placeholder-title {
  font-size: 26px;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 12px;
}
.placeholder-lede {
  font-size: 15px;
  color: var(--secondary);
  line-height: 1.55;
  margin-bottom: 22px;
}
.placeholder-details {
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  border-radius: var(--r-2);
  padding: 16px 20px;
  margin-bottom: 22px;
}
.placeholder-details-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 10px;
}
.placeholder-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.placeholder-list li {
  padding: 6px 0 6px 20px;
  font-size: 14px;
  color: var(--secondary);
  position: relative;
  line-height: 1.5;
}
.placeholder-list li::before {
  content: "·";
  position: absolute;
  left: 6px;
  top: 2px;
  color: var(--teal-mid);
  font-size: 18px;
  line-height: 1;
}
.placeholder-actions {
  display: flex;
  gap: 12px;
}

/* ── Stage indicator ── */
.stage-indicator {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--teal-mid); margin-bottom: 18px; font-weight: 500;
}
.stage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* ── Progress dots ── */
.progress-row { display: flex; align-items: flex-start; gap: 0; margin-bottom: 28px; }
.progress-step { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.progress-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); border: 2px solid var(--line); transition: all 0.18s; }
.progress-dot-current { background: var(--teal); border-color: var(--teal-mid); box-shadow: 0 0 0 4px var(--teal-line); }
.progress-dot-done { background: var(--teal); border-color: var(--teal-mid); }
.progress-step-label { font-size: 11px; color: var(--meta); margin-top: 6px; white-space: nowrap; }
.progress-step.is-current .progress-step-label,
.progress-step.is-done .progress-step-label { color: var(--teal-mid); }
.progress-line { flex: 1; height: 2px; background: var(--line); margin-top: 5px; min-width: 8px; }
.progress-line-done { background: var(--teal); }

/* ── Layout ── */
.intake-grid { display: grid; grid-template-columns: 5fr 3fr; gap: 28px; }
@media (max-width: 760px) { .intake-grid { grid-template-columns: 1fr; } }

/* ── Form controls ── */
label { display: block; font-weight: 500; color: var(--primary); margin-bottom: 6px; font-size: 14px; }
input[type="number"],
input[type="text"],
input[type="email"],
input[type="search"],
input[type="date"],
input[type="tel"],
select,
textarea {
  width: 100%;
  /* v7.2 §13: inputs are recessed (--paper-well); focus lifts to --paper-card */
  background: var(--paper-well);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 10px 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-mute); }
input:focus, select:focus, textarea:focus {
  background: var(--paper-card);
  border-color: var(--focus);
  box-shadow: var(--focus-ring);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--paper-well) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}
/* Select chevron — light Cream default (dark ink fill) */
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='%2314202C' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
/* Dark Warm overrides chevron fill to light ink */
:root[data-mode="dark"] select,
:root[data-mode="dark"] select:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='%23F2F2F1' d='M0 0h10L5 6z'/></svg>");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]):not([data-mode="dark"]) select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='%23F2F2F1' d='M0 0h10L5 6z'/></svg>");
  }
}

.field { margin-bottom: 18px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: var(--secondary);
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.btn:hover { background: var(--card-hover); color: var(--primary); }
.btn-primary {
  background: var(--teal);
  border-color: var(--teal-mid);
  color: var(--on-teal);
}
.btn-primary:hover { background: var(--teal-hover); border-color: var(--teal-hover); color: var(--on-teal); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 12px; margin-top: 18px; }
.btn-row .btn { flex: 1; }

/* UX v2: split footer (back buttons left, primary CTA right) */
.btn-row-split {
  align-items: center;
}
.btn-row-split .btn-row-secondary {
  display: flex;
  gap: 8px;
  flex: 1;
}
.btn-row-split .btn-row-secondary .btn {
  flex: 0 0 auto;
}
.btn-row-split .btn-primary {
  flex: 0 0 auto;
}
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--meta);
  font-size: 13px;
}
.btn-ghost:hover {
  background: var(--paper-card);
  color: var(--secondary);
  border-color: var(--line);
}
.btn-large {
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 500;
}

/* Selectable button group (radio replacement) */
.choice-group { display: grid; gap: 10px; }
.choice-group.cols-3 { grid-template-columns: repeat(3, 1fr); }
.choice-group.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) { .choice-group.cols-3, .choice-group.cols-4 { grid-template-columns: 1fr; } }

.choice-btn {
  display: block; width: 100%; text-align: left;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 14px 16px;
  color: var(--secondary);
  font-family: inherit; font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.choice-btn:hover { background: var(--card-hover); border-color: var(--teal-line); }
.choice-btn.is-selected {
  background: var(--teal-soft);
  border-color: var(--teal-mid);
  color: var(--primary);
}
.choice-btn-title { font-weight: 500; color: var(--primary); display: block; margin-bottom: 2px; }
.choice-btn-desc { font-size: 13px; color: var(--meta); display: block; line-height: 1.4; }

/* ── Completed step summary ── */
.completed-step {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
}
.completed-step-check { color: var(--teal-mid); margin-right: 8px; }
.completed-step-label { color: var(--meta); }
.completed-step-value { color: var(--primary); font-weight: 500; }
.completed-step .edit-link { color: var(--teal-mid); font-size: 12px; cursor: pointer; background: none; border: none; padding: 0; }

/* ── Context feed (chat-style, ephemeral) ── */
.context-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 4px;
}
.context-feed::-webkit-scrollbar { width: 6px; }
.context-feed::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-1); }

.context-message {
  background: var(--ai-bg);
  border-left: 2px solid var(--ai);
  border-radius: var(--r-1);
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--secondary);
  line-height: 1.45;
  animation: ctxSlideIn 0.32s ease-out;
}
.context-message-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--meta);
  margin-bottom: 3px;
  font-family: 'IBM Plex Mono', monospace;
}

@keyframes ctxSlideIn {
  0%   { opacity: 0; transform: translateX(8px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Empty context state, looks like a system message in a chat log */
.context-empty {
  font-size: 11px;
  color: var(--meta);
  font-style: italic;
  padding: 6px 12px;
}

/* ── Recommendation cards ── */
.rec-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 22px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.rec-card-primary {
  border-color: var(--teal-mid);
  /* Best-fit signal: full teal top-rail (4px), no decorative fill.
     Same pattern as the phase-strip active state. */
  box-shadow: var(--shadow-card), inset 0 4px 0 var(--teal);
}
.rec-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.rec-model-name { font-size: 18px; font-weight: 500; color: var(--primary); margin-bottom: 4px; }
.rec-confidence { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 500; }
.confidence-very_high { color: var(--teal-mid); text-shadow: 0 0 8px var(--teal-line); }
.confidence-high { color: var(--teal-mid); }
.confidence-moderate { color: var(--gold); }
.confidence-medium { color: var(--gold); }
.confidence-low { color: var(--meta); }

/* v2 header layout (rebuilt with proper type hierarchy):
   - Title row: model name + status pill (BEST FIT / COMPETITIVE / etc.)
   - Rationale: separate line, weight 400 sans, primary ink
   - Sub-line: raw score in mono-tabular meta
   - Score bar follows below with margin-top
   Each level gets its own visual rhythm instead of cramming three
   sizes onto one row. */
.rec-card-header-v2 .rec-card-header-main {
  flex: 1;
  min-width: 0;
}
.rec-card-header-v2 .rec-card-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.rec-card-header-v2 .rec-model-name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 0;
  white-space: nowrap;
}
/* Status pill: real chip treatment, not flat colored text. Tinted
   background + hairline border keeps it readable against the cream
   card without competing with the model name. */
.rec-card-header-v2 .rec-fit {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.10em;
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  text-shadow: none;
  line-height: 1.4;
}
.rec-card-header-v2 .rec-fit.fit-decent,
.rec-card-header-v2 .rec-fit.fit-weak {
  background: var(--gold-soft);
  border-color: var(--gold-line);
  color: var(--gold);
}
.rec-card-header-v2 .rec-fit.fit-weak {
  background: rgba(20, 32, 44, 0.04);
  border-color: var(--line-2);
  color: var(--meta);
}
.rec-card-header-v2 .rec-card-header-rationale {
  font: 400 14px/1.45 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--primary);
  margin: 0 0 6px;
  max-width: 56ch;
}
.rec-card-header-v2 .rec-card-header-subline {
  font: 400 11.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
}
.rec-card-header-v2 .rec-card-header-competitive {
  font-size: 11px;
  color: var(--teal-mid);
  margin-top: 6px;
  font-style: italic;
}
/* Right-side relative fit badge: percent number sits big and teal,
   label small caps below. */
.rec-card-header-v2 .rec-score-label {
  line-height: 1.25;
  font-size: 9.5px;
  letter-spacing: 0.10em;
}
.rec-card-header-v2 .rec-score {
  align-self: flex-start;
  padding-top: 2px;
}
/* Score bar breathing room from the header text. */
.rec-card-header-v2 + .rec-score-bar {
  margin-top: 14px;
}

/* Fit band labels (replaces per-card confidence). Derived directly
   from the match score, not from a separate signal. */
.rec-fit { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 500; }
.fit-excellent { color: var(--teal-mid); text-shadow: 0 0 8px var(--teal-line); }
.fit-strong { color: var(--teal-mid); }
.fit-decent { color: var(--gold); }
.fit-weak { color: var(--meta); }
.rec-score-badge { font-size: 28px; font-weight: 500; color: var(--teal-mid); line-height: 1; }
.rec-score-label { font-size: 10px; color: var(--meta); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 2px; text-align: right; }
.rec-score-bar { height: 4px; background: var(--line); border-radius: var(--r-1); overflow: hidden; margin-bottom: 14px; }
.rec-score-fill { height: 100%; background: var(--teal); }
.rec-rationale { font-size: 14px; color: var(--secondary); flex: 1; line-height: 1.55; }
.rec-footer {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.rec-driver { font-size: 12px; color: var(--meta); }
.rec-driver-positive { color: var(--meta); }
.rec-driver-caution { color: var(--gold); }
.rec-pricing {
  font-size: 13px;
  color: var(--secondary);
  font-family: 'IBM Plex Mono', monospace;
  max-width: 60%;
  /* Two-column grid: label column right-aligned, value column left-
     aligned. max-content sizes the label column to the widest label
     (RENEWAL (+8.4%) is typically widest); 1fr lets values stretch.
     Rows nested under this container use display: contents so their
     children participate directly in the grid. */
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 4px;
  align-items: baseline;
}
.rec-pricing-eyebrow {
  grid-column: 1 / -1;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  font-weight: 500;
  margin-bottom: 2px;
}
.rec-pricing-header {
  grid-column: 1 / -1;
  color: var(--secondary);
  font-style: italic;
  margin-bottom: 4px;
}
.rec-pricing-dollars {
  margin-top: 2px;
  font-size: 12px;
  color: var(--secondary);
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: flex-end;
}
.rec-pricing-point { color: var(--teal-mid); font-weight: 500; }
.rec-pricing-band { color: var(--meta); font-size: 11px; }
/* point_basis: small italic tag next to the premium estimate value
   indicating what coverage level the engine anchored the point to
   (e.g. "Gold tier" for FI, "Silver benchmark" for ICHRA,
   "equivalent or better plan" for PEO). Sits inline after the
   dollar amount, separated by visual whitespace only. */
.rec-pricing-point-basis {
  font-size: 11px;
  font-style: italic;
  color: var(--meta);
  margin-left: 6px;
}

/* Pricing details accordion. The summary doubles as the inline
   pricing readout: relative text + premium range + estimate +
   current invoice + renewal all visible at the right side of the
   rec-footer. Clicking the summary expands the Cost estimate
   breakdown directly underneath, in place.

   Light teal fill so the whole pricing module reads as a contained
   section whether collapsed or expanded. No border — the fill alone
   gives it dimension. */
.rec-pricing-details {
  max-width: 60%;
  background: rgba(63, 207, 195, 0.05);
  border-radius: 6px;
  padding: 14px 18px;
}
.rec-pricing-details > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 16px;
}
.rec-pricing-details > summary::-webkit-details-marker { display: none; }
.rec-pricing-details > summary::after {
  content: "▾";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--teal-mid);
  font-size: 11px;
  transition: transform 0.15s ease;
}
.rec-pricing-details[open] > summary::after { transform: rotate(180deg); }
.rec-pricing-details > summary .rec-pricing { max-width: none; }
.rec-pricing-details > summary:hover .rec-pricing-point { filter: brightness(1.15); }
.rec-pricing-detail-body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.rec-pricing-detail-body .score-breakdown { font-family: 'IBM Plex Sans', system-ui, sans-serif; }

/* ── Recommendation card · redesigned body (Claude Design handoff,
      2026-05-12). Two-column body grid replaces the old .rec-footer
      stack: left column carries the driver chip plus a case-specific
      AI-violet intelligence note; right column consolidates the
      previous PRICING accordion + COST ESTIMATE block into a single
      pane (eyebrow, normalized methodology subheader, hero estimate,
      mono context line, dashed-bordered deltas group). Old .rec-* and
      .rec-pricing-* classes left in place for now so the layout flip
      is fully reversible. */
.rec-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.rec-card-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Case-specific context note. Plain-language sentence built by
   services/rec_context.py from real engine signals (state rating
   mode, PEO state advantage, LF availability, ICHRA favorability,
   industry tier). Default secondary text color, no line-clamp:
   copy length is controlled at the service layer so brokers see the
   full explanation. */
.rec-card-context {
  margin: 0;
  font: 400 13px/1.6 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--secondary);
}
.rec-card-pricing {
  display: flex;
  flex-direction: column;
}
.rec-card-pricing-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.rec-card-pricing-eyebrow {
  font: 500 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
}
.rec-card-pricing-aside {
  font: 400 10.5px/1 'IBM Plex Mono', monospace;
  color: var(--meta);
}
/* Methodology subheader. Per the vocabulary contract, .rule is the
   pricing-rule noun phrase (e.g. "Master-policy bundle") and .anchor
   is the benchmark (e.g. "large-group rated, plan parity with
   current"). Never name a specific carrier or PEO here; relative-
   to-current claims live in the deltas block. */
.rec-card-pricing-method {
  font: 400 13px/1.5 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--secondary);
  margin-bottom: 14px;
}
.rec-card-pricing-method .rule {
  color: var(--primary);
  font-weight: 500;
}
.rec-card-pricing-method .anchor {
  color: var(--meta);
}
.rec-card-pricing-estimate {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
.rec-card-pricing-est-num {
  font: 500 30px/1 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.rec-card-pricing-est-unit {
  font: 400 13px/1 'IBM Plex Mono', monospace;
  color: var(--meta);
}
.rec-card-pricing-context {
  font: 400 11.5px/1.5 'IBM Plex Mono', monospace;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.rec-card-pricing-context .v {
  color: var(--secondary);
}
/* Deltas group: dashed top divider separates Routive's projection
   above from the broker's actual baselines below. .down (cheaper)
   reads teal; .up (more expensive) reads red; .flat (within ±0.5%)
   stays muted. */
.rec-card-pricing-deltas {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  display: grid;
  gap: 6px;
}
.rec-card-pricing-delta {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 10px;
  align-items: baseline;
  font: 400 12px/1.5 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.rec-card-pricing-delta .lbl {
  color: var(--meta);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.rec-card-pricing-delta .base {
  color: var(--secondary);
}
.rec-card-pricing-delta .v {
  font-weight: 500;
  font-size: 12.5px;
  text-align: right;
}
.rec-card-pricing-delta .v.down { color: var(--teal-mid); }
.rec-card-pricing-delta .v.up { color: var(--red); }
.rec-card-pricing-delta .v.flat { color: var(--meta); }

/* Card-foot accordion group. Vertical stack of <details> elements
   with violet uppercase summary lines and a rotated ▸ glyph. Group
   sits below the body grid with its own top hairline so the two
   accordions read as a single grouped strip, not as two unrelated
   <details>. Body content (breakdown tables, risk-component grid,
   plain-English primer) is unchanged. */
.rec-card-acc-group {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.rec-card-acc {
  border-bottom: 1px solid var(--line);
}
.rec-card-acc:last-child { border-bottom: 0; }
.rec-card-acc > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1 'IBM Plex Mono', monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ai-text);
}
.rec-card-acc > summary::-webkit-details-marker { display: none; }
.rec-card-acc > summary::before {
  content: "\25b8";
  color: var(--meta);
  font-size: 11px;
  display: inline-block;
  transition: transform 150ms ease;
}
.rec-card-acc[open] > summary::before { transform: rotate(90deg); }
.rec-card-acc-body {
  padding: 4px 0 18px 18px;
  font: 400 13.5px/1.6 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--ink);
}
.rec-card-acc-body p { margin: 0 0 12px; }
.rec-card-acc-body p:last-child { margin-bottom: 0; }
.rec-card-acc-body strong { font-weight: 500; color: var(--primary); }
/* Subheader above each accordion section: anchors the explanatory
   intro paragraph with a clear title (How the model fit score works
   / How the risk profile score works). Sans 13/1.3 weight 500, with
   18px top margin so the second section breathes after the first
   table closes. */
.rec-card-acc-body .rec-card-acc-subhead {
  font: 500 13px/1.3 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--primary);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.rec-card-acc-body .score-breakdown + .rec-card-acc-subhead {
  margin-top: 18px;
}
/* Intro paragraph above each breakdown table: explains what the
   table measures and how to read it. Quieter than body prose so the
   table itself remains the primary signal. */
.rec-card-acc-body .rec-card-acc-intro {
  font: 400 12.5px/1.55 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--meta);
  margin: 0 0 10px;
}
/* Breakdown tables inside the accordion body: light cream fill on
   the white rec-card surface, hairline border, 6px corner radius.
   --paper is the page-background cream (#F6F4EF) which lands lighter
   than --paper-well's recessed tone but reads as distinct cream
   against the white rec-card body. Hairline below the header
   separates the section title from the data rows; --line-2 fires
   the same hairline above the total row. */
.rec-card-acc-body .score-breakdown {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 14px;
}
.rec-card-acc-body .score-breakdown:first-of-type {
  margin-top: 0;
}
.rec-card-acc-body .score-breakdown-header {
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.rec-card-acc-body .score-breakdown-total {
  border-top: 1px solid var(--line-2);
  margin-top: 8px;
  padding-top: 8px;
}

/* Responsive: collapse to single column below 720px (driver/context
   stack above the pricing pane). At < 480px the deltas grid relaxes
   its label column so labels can wrap with their values. */
@media (max-width: 720px) {
  .rec-card-body { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 480px) {
  .rec-card-pricing-delta { grid-template-columns: auto auto auto; }
}

/* When the top model lands in the WEAK band, drop the primary teal
   highlight to signal "no strong fit found." Pairs with the
   .weak-top-banner above the grid. */
.rec-card-primary-weak {
  background: var(--paper-card);
  border-color: var(--line);
  filter: grayscale(0.4);
}

.weak-top-banner {
  background: rgba(253, 224, 115, 0.06);
  border: 1px solid rgba(253, 224, 115, 0.25);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-2);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--secondary);
  line-height: 1.55;
}
.weak-top-banner strong { color: var(--gold); }

/* Empty state card for owner-only knockout etc. */
.empty-state-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 24px 28px;
  margin-bottom: 18px;
}
.empty-state-card h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--primary);
}
.empty-state-card p {
  font-size: 13px;
  color: var(--secondary);
  line-height: 1.6;
  margin: 8px 0;
}
.empty-state-card ul li {
  margin-bottom: 4px;
  line-height: 1.5;
}

.rec-explainer {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 14px 18px; font-size: 13px; color: var(--secondary); line-height: 1.55;
  margin-bottom: 14px;
}
.rec-explainer summary { cursor: pointer; color: var(--meta); font-size: 12px; margin-bottom: 8px; }
.rec-scoring-drawer {
  border-left: 3px solid var(--ai);
  background: var(--ai-bg);
}
.rec-scoring-drawer summary { color: var(--ai-text); }

/* "How to read this page" — prominent collapsed accordion at the
   top of the recommendation. Distinguished visually from the muted
   `.rec-explainer` accordions that live elsewhere on the page. */
.rec-howto {
  background-color: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 13px;
}
.rec-howto summary {
  cursor: pointer;
  list-style: none;
  outline: none;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
}
.rec-howto summary::-webkit-details-marker { display: none; }
.rec-howto summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--teal-mid);
  font-size: 12px;
  transition: transform 0.15s;
}
.rec-howto[open] summary::after { content: "▾"; }
.rec-howto-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--on-teal);
  font-size: 11px;
  font-weight: 500;
  font-family: 'IBM Plex Mono', monospace;
}
.rec-howto-hint {
  color: var(--meta);
  font-size: 11px;
  font-weight: 400;
  font-family: 'IBM Plex Mono', monospace;
  margin-left: 4px;
}
.rec-howto-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  line-height: 1.6;
}

/* Learn more accordion that lives INSIDE the rec-card */
.card-learn-more {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.card-learn-more summary {
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--teal-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  list-style: none;
  outline: none;
}
.card-learn-more summary::-webkit-details-marker { display: none; }
.card-learn-more summary::before { content: "▸ "; transition: transform 0.15s; }
.card-learn-more[open] summary::before { content: "▾ "; }
.card-learn-more .learn-more-content {
  font-size: 13px;
  color: var(--secondary);
  line-height: 1.6;
  padding-top: 10px;
}

/* ── Build 1.5b: select-page override reason ── */
.override-reason {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: var(--r-1);
  padding: 14px 16px;
  margin: 14px 0 18px;
}

/* ── Build 1.5b: broker-notes considerations on rec cards ── */
.model-considerations {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.model-considerations h4 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ai-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}
.model-considerations ul { list-style: none; padding: 0; margin: 0; }
.model-considerations li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--r-3);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--paper-card);
  color: var(--secondary);
}
.tag-pill-for {
  border-color: var(--teal-mid);
  color: var(--teal-mid);
}
.tag-pill-against {
  border-color: var(--gold);
  color: var(--gold);
}
.tag-explainer {
  font-size: 12px;
  color: var(--meta);
  line-height: 1.5;
}
.considerations-disclaimer {
  font-size: 11px;
  color: var(--meta);
  margin-top: 6px;
  font-style: italic;
}

/* ── Group profile / overrides ── */
.profile-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.profile-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.profile-row .key { color: var(--meta); }
.profile-row .val { color: var(--primary); }
.profile-row .editable { color: var(--teal-mid); cursor: pointer; border-bottom: 1px dashed var(--teal); }

/* ── Annotation / info boxes ── */
.annotation-box {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: var(--r-1);
  padding: 12px 14px; font-size: 13px; color: var(--secondary);
  margin-top: 14px;
}

.followup-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.followup-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--teal-mid); margin-bottom: 8px; }

/* ── Stage 4: Universal drop zone (banner at top) ── */
.universal-drop {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background-color: var(--paper-well);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-2);
  padding: 18px 22px;
  margin-bottom: 24px;
  position: relative;
  transition: border-color 0.12s, background-color 0.12s;
}
.universal-drop-compact {
  padding: 14px 18px;
  margin-bottom: 16px;
}
.universal-drop-icon {
  flex-shrink: 0;
  font-size: 28px;
  color: var(--teal-mid);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--teal-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.universal-drop-body { flex: 1; min-width: 0; }
.universal-drop-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 4px;
}
.universal-drop-sub {
  font-size: 13px;
  color: var(--secondary);
  line-height: 1.5;
  margin: 0 0 10px;
}
.universal-drop-email {
  font-size: 12px;
  color: var(--meta);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.universal-drop-email code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--teal-mid);
  background: var(--paper);
  padding: 2px 8px;
  border-radius: var(--r-1);
}
.universal-pending {
  margin: 12px 0 10px;
  padding: 10px 12px;
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  border-radius: var(--r-1);
}
.universal-pending-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-mid);
  margin-bottom: 6px;
}
.universal-pending-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--secondary);
  padding: 4px 0;
}
.universal-pending-badge {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--meta);
  background: var(--paper-card);
  padding: 2px 6px;
  border-radius: var(--r-1);
}
.universal-pending-badge-info {
  color: var(--teal-mid);
  background: var(--teal-soft);
}
.universal-pending-badge-error {
  color: var(--red);
  background: rgba(255, 100, 100, 0.1);
}
/* Multi-dimensional upload card: one full-width row per artifact the
   universal pipeline found inside a file. Violet = the AI
   intelligence/classification layer. Renders below the file row. */
.artifact-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 2px 26px;
}
.artifact-rows-flush {
  margin-left: 0;
}
.artifact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--violet);
  background: var(--violet-soft);
  border: 1px solid var(--violet-soft);
  border-radius: var(--r-1);
}
.artifact-row-type {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.artifact-row-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
  background: var(--paper-card);
  padding: 0 6px;
  border-radius: var(--r-1);
}
.artifact-row-source {
  flex: 1;
  min-width: 0;
  color: var(--meta);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.artifact-row-conf {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--meta);
  white-space: nowrap;
}
.artifact-row-flag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
}
.artifact-row-review {
  background: rgba(216, 156, 42, 0.10);
  border-color: rgba(216, 156, 42, 0.25);
}
.artifact-row-review .artifact-row-type {
  color: var(--gold);
}
.artifact-row-view {
  margin-left: 4px;
}
/* Inline one-line document summary for single-document files (no sub-row).
   Lives in the file-row meta, violet to mark the AI-identified type. */
.artifact-inline {
  color: var(--violet);
  font-weight: 500;
}
.artifact-recon-flag {
  margin: 4px 0 4px 26px;
  font-size: 11px;
  color: var(--gold);
}
/* Per-dependent household link basis: how Routive tied the dependent to
   its employee, shown so the broker can validate it on the intake page.
   Strong links (Family ID / name) are muted; row-order is tinted gold to
   nudge confirmation. */
.dep-link-basis {
  display: inline-block;
  margin-left: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--meta);
}
.dep-link-basis-family_id { color: var(--violet); }
.dep-link-basis-row_order { color: var(--gold); }
.universal-pending-foot {
  font-size: 11px;
  color: var(--meta);
  margin-top: 6px;
}
/* Hide x-cloak elements until Alpine boots. Without this, every
   x-show="..." element renders for one frame on first paint. */
[x-cloak] {
  display: none !important;
}

/* ── File delete affordance ───────────────────────── */
.file-delete-x {
  background: none;
  border: 1px solid transparent;
  color: var(--meta);
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: var(--r-1);
  cursor: pointer;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  flex-shrink: 0;
}
.file-delete-x:hover {
  background: rgba(255, 100, 100, 0.12);
  border-color: rgba(255, 100, 100, 0.4);
  color: var(--red);
}
/* Preview + download icons alongside each uploaded file row.
   Flat transparent style matching the delete ×. */
.file-action-icon {
  background: none;
  border: 1px solid transparent;
  color: var(--meta);
  font-size: 14px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: var(--r-1);
  cursor: pointer;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0;
  font-family: inherit;
}
.file-action-icon:hover {
  background: var(--teal-soft);
  border-color: var(--teal-line);
  color: var(--teal-mid);
}
/* Inline SVG icons via CSS masks. Single color, scales with
   font-size, matches the delete × exactly. */
.icon-preview,
.icon-download {
  display: block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.icon-preview {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16' y1='16' x2='22' y2='22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16' y1='16' x2='22' y2='22'/%3E%3C/svg%3E");
}
.icon-download {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M5 12l7 7 7-7'/%3E%3Cline x1='5' y1='21' x2='19' y2='21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M5 12l7 7 7-7'/%3E%3Cline x1='5' y1='21' x2='19' y2='21'/%3E%3C/svg%3E");
}

/* File drag-to-recategorize states */
.file-row-dragging {
  opacity: 0.4;
}
.wave-file-row[data-file-id] {
  cursor: grab;
}
.wave-file-row[data-file-id]:active {
  cursor: grabbing;
}
.wave-item-drop-target {
  outline: 2px dashed var(--teal) !important;
  outline-offset: -2px;
  background: var(--teal-soft) !important;
}

/* File category mismatch bar: nudge when classifier disagrees
   with where the broker placed the file. */
.file-mismatch-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  margin: 2px 0 4px;
  background: rgba(255, 187, 51, 0.08);
  border: 1px solid rgba(255, 187, 51, 0.3);
  border-radius: var(--r-1);
  font-size: 12px;
  color: var(--gold);
}
.file-mismatch-text {
  flex: 1;
}

/* ── File preview modal ───────────────────────────── */
.preview-modal-card {
  display: flex;
  flex-direction: column;
  width: 90vw;
  max-width: 1000px;
  height: 85vh;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2);
  flex-shrink: 0;
}
.preview-modal-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-modal-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.preview-modal-body {
  flex: 1;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--paper);
}
.preview-modal-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── Delete modal ─────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 28px 30px;
  max-width: 720px;
  width: 100%;
  box-shadow: var(--shadow-pop);
}
.modal-card-wide {
  max-width: 880px;
}

/* Intake mismatch comparison block (inside the modal) */
.mismatch-comparison {
  margin: 16px 0 20px;
  padding: 14px 18px;
  background: rgba(255, 187, 51, 0.06);
  border: 1px solid rgba(255, 187, 51, 0.3);
  border-radius: var(--r-1);
}
.mismatch-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px dashed rgba(255, 187, 51, 0.2);
}
.mismatch-row:last-child {
  border-bottom: none;
}
.mismatch-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--meta);
  min-width: 130px;
}
.mismatch-values {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  color: var(--secondary);
}
.mismatch-intake {
  color: var(--secondary);
}
.mismatch-arrow {
  color: var(--meta);
  font-style: italic;
  font-size: 11px;
}
.mismatch-census {
  color: var(--gold);
  font-weight: 500;
}

.modal-card h3 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 500;
}
.modal-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--secondary);
  margin: 0 0 16px;
}
.modal-meta {
  font-size: 12px;
  color: var(--meta);
}
.modal-loading {
  text-align: center;
  color: var(--meta);
  padding: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.modal-actions-center {
  justify-content: center;
}
.modal-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0 10px;
}
.modal-choice {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 16px 18px;
  background: var(--paper-card);
  display: flex;
  flex-direction: column;
}
.modal-choice-destructive {
  border-color: rgba(255, 100, 100, 0.3);
  background: rgba(255, 100, 100, 0.04);
}
.modal-choice-title {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--teal-mid);
  margin-bottom: 8px;
}
.modal-choice-destructive .modal-choice-title {
  color: var(--red);
}
.modal-choice-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--secondary);
  flex: 1;
  margin-bottom: 14px;
}
.modal-choice-btn {
  width: 100%;
}

/* Destructive button — used for "Undo parsing" and any other
   action that permanently removes broker work. */
.btn-destructive {
  background: rgba(255, 100, 100, 0.12);
  border: 1px solid rgba(255, 100, 100, 0.5);
  color: var(--red);
}
.btn-destructive:hover {
  background: rgba(255, 100, 100, 0.2);
  border-color: var(--red);
}

.wave-locked .wave-items-locked-wrap {
  opacity: 0.4;
  pointer-events: none;
}

/* Intake step counter (UX v2 wizard progress indicator) */
.intake-step-counter {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--meta);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-2);
}
.intake-step-counter-label {
  margin-left: 12px;
  color: var(--teal-mid);
}

/* Collapsible wave header (Wave 2 + 3 default-collapsed pattern) */
.wave-header-collapsible {
  cursor: pointer;
  user-select: none;
}
.wave-header-collapsible:hover {
  background: var(--paper-card);
}
.wave-collapsed-summary {
  margin-left: auto;
  margin-right: 8px;
  font-size: 12px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
}
.wave-toggle-chevron {
  font-size: 14px;
  color: var(--meta);
  width: 16px;
  text-align: center;
}
.wave-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  border-radius: var(--r-1);
}
.wave-cta-btn {
  flex-shrink: 0;
}
.wave-cta-hint {
  font-size: 12px;
  color: var(--secondary);
  flex: 1;
}
.wave-status-pending_review {
  background: rgba(255, 187, 51, 0.12);
  color: var(--gold);
}
.wave-status-confirmed {
  background: var(--teal-soft);
  color: var(--teal-mid);
}
.package-needs-confirm {
  border-left: 3px solid #FFBB33;
}
.package-status-pending {
  color: var(--gold);
}
.package-missing-link {
  color: inherit;
  text-decoration: none;
}
.package-missing-link:hover {
  color: var(--teal-mid);
  text-decoration: underline;
}

.side-panel-footer-hint {
  font-size: 11px;
  color: var(--meta);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

/* Universal drop zone — active drag state */
.universal-drop-active {
  border-color: var(--teal) !important;
  background-color: var(--teal-soft) !important;
  transform: scale(1.005);
  transition: all 0.12s;
}

/* Wave item drop target — entire card lights up while dragging */
.wave-item {
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.wave-item-drop-active {
  background: var(--teal-soft) !important;
  box-shadow: 0 0 0 2px var(--teal), 0 0 24px var(--teal-soft);
  border-radius: var(--r-1);
}
.wave-item-drop-active .wave-drop-btn {
  background: var(--teal-line) !important;
  border-color: var(--teal) !important;
  color: var(--teal-mid) !important;
}

/* Copy button */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  color: var(--teal-mid);
  padding: 4px 10px;
  border-radius: var(--r-1);
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  cursor: pointer;
  transition: all 0.15s;
}
.copy-btn:hover {
  background: var(--teal-soft);
}
.copy-btn-success {
  background: var(--teal) !important;
  color: var(--on-teal) !important;
  border-color: var(--teal) !important;
}
.copy-btn-icon {
  font-size: 12px;
}

/* Census field template grid */
.wave-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.wave-template-card {
  padding: 12px 14px;
  background: var(--paper-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
}
.wave-template-card-required {
  border-color: var(--teal-line);
  background: var(--teal-soft);
}
.wave-template-card .wave-template-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--meta);
  margin-bottom: 8px;
}
.wave-template-card-required .wave-template-label {
  color: var(--teal-mid);
}
.wave-template-card ul {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--secondary);
}
.wave-template-card li {
  margin-bottom: 3px;
}

/* ── Breadcrumbs ───────────────────────────────────── */
.breadcrumbs {
  font-size: 12px;
  color: var(--meta);
  margin-bottom: 16px;
  font-family: 'IBM Plex Mono', monospace;
}
.breadcrumbs a {
  color: var(--teal-mid);
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs-sep {
  margin: 0 8px;
  opacity: 0.5;
}
.breadcrumbs-current {
  color: var(--secondary);
}

/* ── Census preview screen ─────────────────────────── */
.census-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 16px;
}
.census-header-title h2 {
  margin: 0 0 4px;
}
.census-header-stats {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
}
.census-header-supplements {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 12px;
}
.census-stat {
  text-align: center;
  min-width: 56px;
}
.census-stat-num {
  font-size: 28px;
  font-weight: 500;
  color: var(--teal-mid);
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1;
}
.census-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--meta);
  margin-top: 4px;
}
.census-stat-warning .census-stat-num {
  color: var(--gold);
}

.intake-match-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.intake-match-chip {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--r-3);
  font-family: 'IBM Plex Mono', monospace;
}
.intake-match-ok {
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  color: var(--teal-mid);
}
.intake-match-warn {
  background: rgba(255, 187, 51, 0.08);
  border: 1px solid rgba(255, 187, 51, 0.35);
  color: var(--gold);
}

.census-sources {
  margin: 14px 0;
  padding: 10px 14px;
  background: var(--paper-card);
  border: 1px solid var(--card-hover);
  border-radius: var(--r-1);
}
.census-sources-toggle {
  background: none;
  border: none;
  color: var(--secondary);
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
}
.census-sources-caption {
  font-size: 11px;
  color: var(--meta);
  margin-top: 4px;
}
.census-sources-list {
  margin-top: 10px;
}
.census-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--secondary);
  padding: 6px 0;
  border-bottom: 1px dashed var(--paper-card);
}
.census-source-row:last-child {
  border-bottom: none;
}
.census-source-icon {
  width: 18px;
  text-align: center;
}
.census-source-name {
  font-weight: 500;
  flex: 0 0 auto;
}
.census-source-meta {
  color: var(--meta);
  font-size: 12px;
  margin-left: auto;
}

/* Census table (Airtable-style) */
.census-table {
  margin-top: 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--paper-card);
}
.census-table-header,
.census-row-summary {
  display: grid;
  grid-template-columns: 28px 1.6fr 1.1fr 50px 70px 0.8fr 1.0fr 60px 0.8fr 50px;
  gap: 0;
  align-items: center;
  font-size: 13px;
}
.census-table-header {
  background: var(--paper-card);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--meta);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
}
.census-cell {
  padding: 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.census-row {
  border-bottom: 1px solid var(--paper-card);
}
.census-row:last-child {
  border-bottom: none;
}
.census-row-summary {
  padding: 12px 0;
  cursor: pointer;
  transition: background 0.12s;
  color: var(--secondary);
}
.census-row-summary:hover {
  background: var(--teal-soft);
}
.census-row-summary:hover .census-cell-chevron {
  color: var(--teal-mid);
}
.census-cell-chevron {
  color: var(--meta);
  transition: color 0.12s;
}
.census-table-hint {
  font-size: 12px;
  color: var(--meta);
  margin: 18px 0 6px;
  font-style: italic;
}
.census-add-divider {
  border-top: 1px dashed var(--line);
  margin-top: 8px;
}

/* UX v2: Wave 1 census mode tabs (Upload file vs Type by hand) */
.census-mode-tabs {
  display: flex;
  gap: 0;
  margin: 14px 0 12px;
  border-bottom: 1px solid var(--line);
}
.census-mode-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--meta);
  padding: 10px 18px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
}
.census-mode-tab:hover {
  color: var(--secondary);
}
.census-mode-tab-active {
  color: var(--teal-mid);
  border-bottom-color: var(--teal-mid);
}
.census-mode-tab-aux {
  margin-left: auto;
  font-size: 12px;
  color: var(--meta);
}

/* UX v2: sticky "Quoting:" summary on selection page */
.select-quoting-sticky {
  /* Live selection feedback — earned use of teal as signal because
     it tracks the user's checked state. Tokenized from raw rgba. */
  position: sticky;
  top: 8px;
  z-index: 50;
  background-color: var(--teal-soft);
  border: 1px solid var(--teal-line);
  backdrop-filter: blur(8px);
  border-radius: var(--r-1);
  padding: 10px 16px;
  margin-bottom: 18px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.select-quoting-label {
  color: var(--teal-mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.select-quoting-models {
  color: var(--primary);
  font-weight: 500;
}
.census-row-summary-expanded {
  background: var(--teal-soft);
}
.census-row-conflict .census-row-summary {
  border-left: 3px solid #FFBB33;
}
.census-conflict-badge {
  color: var(--gold);
  margin-left: 6px;
}
.census-sanity-badge {
  color: var(--red);
  margin-left: 4px;
  cursor: help;
}
.dep-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--teal-mid);
  background: var(--teal-soft);
  border-radius: var(--r-2);
  cursor: help;
}

/* Age-off (S14) attention markers. Gold = attention state (ui-standards).
   Collapsed row: a small gold dot beside the +N chip signals that a
   dependent in this household is aged off (not rated). Expanded row: a
   gold pill on the aged-off dependent's name names the condition. */
.dep-ageoff-dot {
  display: inline-block;
  margin-left: 4px;
  font-size: 8px;
  line-height: 1;
  color: var(--gold);
  cursor: help;
  vertical-align: middle;
}
.dep-ageoff-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-2);
  cursor: help;
  white-space: nowrap;
}

/* Dependents subtable inside the expanded census row */
.census-deps {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--teal-soft);
  border-left: 3px solid var(--teal);
  border-radius: var(--r-1);
}
.census-deps-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--teal-mid);
  margin-bottom: 8px;
}
.census-deps-caption {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-mute);
  margin-top: 2px;
}
.census-deps-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.census-deps-header,
.census-deps-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 0.6fr 0.8fr 1.4fr;
  gap: 12px;
  padding: 6px 8px;
  font-size: 13px;
  align-items: center;
}
.census-deps-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--teal-line);
}
.census-deps-row {
  background: var(--paper-card);
  border-radius: var(--r-1);
}
.census-deps-cell {
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.census-deps-cell-name {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
}
.census-deps-cell-rel {
  text-transform: capitalize;
}
.census-deps-cell-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.dep-action-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--teal-line);
  color: var(--teal-mid);
  border-radius: var(--r-1);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.dep-action-btn:hover {
  background: var(--teal-soft);
}
.dep-action-btn-delete {
  color: var(--red);
  border-color: rgba(255, 100, 100, 0.3);
  font-size: 16px;
  line-height: 1;
}
.dep-action-btn-delete:hover {
  background: rgba(255, 100, 100, 0.1);
}
.census-deps-edit-row {
  padding: 8px;
  background: var(--teal-soft);
  border-radius: var(--r-1);
  margin-top: 2px;
}
.census-dep-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.census-dep-form input[type="text"],
.census-dep-form input[type="date"],
.census-dep-form select {
  /* background-color, not shorthand — preserves global select chevron */
  background-color: var(--paper-well);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 6px 28px 6px 10px;
  border-radius: var(--r-1);
  font-family: var(--mono);
  font-size: 12px;
}
.census-dep-form input[name="full_name"] { min-width: 160px; }
.census-dep-form input[name="date_of_birth"] { min-width: 110px; }
.census-dep-form select { min-width: 100px; }
.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}
.census-deps-empty {
  padding: 12px 8px;
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}
.census-deps-add {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--teal-line);
}

/* Tier vs dep-mix mismatch suggestion. Surfaces in two places:
   - small ⚠ badge in the row's tier cell (passive)
   - inline banner inside the expanded detail with a one-click "Update
     to {suggested}" form (actionable). The broker can also resolve by
     editing the dependents below the banner — both paths satisfy. */
.census-cell-indicators {
  width: 60px;
  min-width: 60px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: visible;
}
.tier-mismatch-badge {
  color: var(--gold);
  font-size: 13px;
  cursor: help;
}
.census-stat-tier-callout {
  margin-left: auto;
  padding: 8px 14px;
  background: rgba(255, 187, 51, 0.1);
  border: 1px solid rgba(255, 187, 51, 0.4);
  border-radius: var(--r-3);
  font-size: 12px;
  color: var(--gold);
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
}
.tier-suggestion-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: rgba(255, 187, 51, 0.08);
  border-left: 3px solid #FFBB33;
  border-radius: var(--r-1);
}
.tier-suggestion-icon {
  font-size: 20px;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}
.tier-suggestion-body {
  flex: 1;
}
.tier-suggestion-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 4px;
}
.tier-suggestion-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 10px;
}
.tier-suggestion-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.tier-suggestion-keep {
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}

/* Inline error rendered above the Save button when the broker picks a
   tier that disagrees with the household. Save is disabled until they
   either change the tier or update the deps above. */
.form-error-inline {
  margin: 12px 0;
  padding: 10px 14px;
  background: rgba(255, 100, 100, 0.08);
  border: 1px solid rgba(255, 100, 100, 0.4);
  border-radius: var(--r-1);
  font-size: 13px;
  color: var(--red);
  line-height: 1.5;
}
.field-mismatch {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 1px rgba(255, 100, 100, 0.3);
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Per-row parser confidence badges */
.confidence-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  cursor: help;
}
.confidence-high {
  color: var(--teal-mid);
}
.confidence-medium {
  color: var(--gold);
}
.confidence-low {
  color: var(--red);
}

/* Header summary callout for review-needed counts */
.census-stat-confidence-callout {
  margin-left: 12px;
  padding: 8px 14px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  font-size: 12px;
  color: var(--secondary);
  font-family: 'IBM Plex Mono', monospace;
  display: flex;
  align-items: center;
  gap: 6px;
}

.census-row-detail {
  padding: 14px 18px 18px;
  background: var(--teal-soft);
  border-top: 1px solid var(--teal-soft);
}
.census-edit-form {
  margin: 0;
}
.census-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 14px;
  margin-bottom: 14px;
}
.census-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.census-edit-field span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
}
.census-edit-field input,
.census-edit-field select {
  /* background-color, not shorthand — preserves global select chevron */
  background-color: var(--paper-well);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 28px 8px 10px;
  border-radius: var(--r-1);
  font-size: 13px;
  font-family: inherit;
}
.census-edit-field input:focus,
.census-edit-field select:focus {
  outline: none;
  border-color: var(--teal-mid);
}
.census-conflict-note {
  font-size: 12px;
  color: var(--gold);
  background: rgba(255, 187, 51, 0.08);
  border: 1px solid rgba(255, 187, 51, 0.25);
  border-radius: var(--r-1);
  padding: 8px 12px;
  margin-bottom: 12px;
}
.census-edit-actions {
  display: flex;
  gap: 10px;
}

.census-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--meta);
}
.census-empty-hint {
  font-size: 12px;
  margin-top: 6px;
}

.census-add {
  padding: 14px 16px;
  background: transparent;
  border-top: 1px solid var(--line-2);
}
.census-add-form {
  margin-top: 14px;
}

.census-confirm-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.census-confirm-explainer {
  flex: 1;
  margin: 0;
  color: var(--secondary);
  font-size: 13px;
}
.census-confirmed-badge {
  flex: 1;
  font-size: 13px;
  color: var(--teal-mid);
  font-family: 'IBM Plex Mono', monospace;
}

/* Confirmed-state pill at the top of the census preview */
.census-confirmed-pill {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  border-radius: var(--r-1);
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--teal-mid);
  font-family: 'IBM Plex Mono', monospace;
}
.census-confirmed-pill-meta {
  font-size: 11px;
  color: var(--meta);
  font-family: inherit;
}

/* Stats: primary employee count + grouped age mini-stats + conflict callout */
.census-stat-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 24px;
  border-right: 1px solid var(--line);
}
.census-stat-num-large {
  font-size: 42px;
  line-height: 1;
}
.census-stat-group {
  display: flex;
  gap: 18px;
  padding-left: 24px;
}
.census-stat-mini {
  text-align: center;
}
/* Lives breakdown caption (28 employees · 31 dependents) under the
   main lives count. Carrier-relevant context that the broker can
   verify at a glance without crowding the headline number. */
.census-stat-breakdown {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 8px;
}
.census-stat-breakdown-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.census-stat-breakdown-num {
  font-size: 18px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  color: var(--teal-mid);
  line-height: 1;
}
.census-stat-breakdown-label {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
/* SG / LG segment pill — sits beside the age buckets to surface the
   regulatory market segment. SG is teal (the success state, since
   most MVP groups are SG and LG triggers a different submission flow). */
.census-stat-segment {
  display: flex;
  align-items: center;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.segment-pill {
  display: inline-block;
  padding: 6px 12px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-3);
  cursor: help;
}
.segment-pill-sg {
  color: var(--teal-mid);
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
}
.segment-pill-lg {
  color: var(--gold);
  background: rgba(255, 187, 51, 0.1);
  border: 1px solid rgba(255, 187, 51, 0.4);
}
.census-stat-conflicts-callout {
  margin-left: auto;
  padding: 8px 14px;
  background: rgba(255, 187, 51, 0.1);
  border: 1px solid rgba(255, 187, 51, 0.4);
  border-radius: var(--r-3);
  font-size: 12px;
  color: var(--gold);
  font-family: 'IBM Plex Mono', monospace;
}
.census-stat-conflicts-num {
  font-weight: 500;
  font-size: 14px;
}

/* Conflict detail list inside the row drill-in */
.census-conflict-note-title {
  font-weight: 500;
  margin-bottom: 6px;
}
.census-conflict-note-body {
  font-size: 12px;
  color: var(--secondary);
  margin: 0 0 10px;
}
.census-conflict-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
}
.census-conflict-list li {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 187, 51, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.census-conflict-list li:last-child { border-bottom: none; }
.census-conflict-field {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--meta);
  min-width: 80px;
}
.census-conflict-old code, .census-conflict-new code {
  background: var(--paper-well);
  padding: 1px 6px;
  border-radius: var(--r-1);
}
.census-conflict-old code { color: var(--teal-mid); }
.census-conflict-new code { color: var(--gold); }
.census-conflict-vs {
  color: var(--meta);
  font-size: 10px;
}

/* Conflict banner link to row */
.conflict-banner-link {
  color: inherit;
  text-decoration: underline;
}

/* Source status badge */
.source-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--r-1);
  margin-right: 4px;
}
.source-status-parsed {
  background: var(--teal-line);
  color: var(--teal-mid);
}
.source-status-pending {
  background: var(--card-hover);
  color: var(--meta);
}
.source-status-error {
  background: rgba(255, 100, 100, 0.18);
  color: var(--red);
}

/* Side panel — softer "ready to confirm" line, no warning glyph */
.package-needs-confirm-line {
  color: var(--teal-mid);
  font-style: italic;
}

/* Refine trampoline preview grid */
.refine-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.refine-preview-card {
  padding: 18px 20px;
  background: var(--paper-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
}
.refine-preview-icon {
  font-size: 24px;
  color: var(--teal-mid);
  margin-bottom: 8px;
}
.refine-preview-title {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--primary);
}
.refine-preview-card p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--secondary);
  margin: 0;
}
.wave-flash {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--r-1);
  font-size: 13px;
  line-height: 1.5;
}
.wave-flash-ok {
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  color: var(--teal-mid);
}
.wave-flash-warn {
  background: rgba(255, 187, 51, 0.08);
  border: 1px solid rgba(255, 187, 51, 0.35);
  color: var(--gold);
}
.field-error {
  font-size: 12px;
  color: var(--gold);
  margin-top: 6px;
}
.field-disabled-hint {
  font-size: 11px;
  color: var(--meta);
  margin-top: 8px;
  font-style: italic;
}
.universal-drop-pending {
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--meta);
  background: var(--paper-card);
  padding: 2px 8px;
  border-radius: var(--r-1);
}
.btn-mini {
  font-size: 11px;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--secondary);
  border-radius: var(--r-1);
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-mini:hover { color: var(--teal-mid); border-color: var(--teal-mid); }

/* ── Stage 4: Two-column layout ── */
.stage4-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 760px) {
  .stage4-layout { grid-template-columns: 1fr; }
}
.stage4-waves { min-width: 0; }

/* ── Stage 4: Wave cards ── */
.wave {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 18px 20px;
  margin-bottom: 16px;
  transition: all 0.2s;
}
.wave-locked {
  opacity: 0.55;
  filter: grayscale(0.5);
}
.wave-live {
  border-color: var(--teal-line);
}
.wave-done {
  border-color: var(--teal-mid);
  background: var(--teal-soft);
}
.wave-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.wave-header-toggle {
  cursor: pointer;
  user-select: none;
}
.wave-header-toggle:hover .wave-title {
  color: var(--teal-mid);
}
.wave-chevron {
  font-size: 14px;
  color: var(--ink-mute);
  flex-shrink: 0;
  width: 16px;
}
.wave-status-skipped {
  color: var(--ink-mute);
  font-style: italic;
}
.wave-skipped {
  opacity: 0.6;
}
.wave-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--line);
  color: var(--meta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 13px;
  font-family: 'IBM Plex Mono', monospace;
}
.wave-live .wave-num,
.wave-done .wave-num {
  background: var(--teal);
  color: var(--on-teal);
}
.wave-title {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--primary);
}
.wave-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.wave-status-live { color: var(--teal-mid); }
.wave-status-done { color: var(--teal-mid); }
.wave-status-locked { color: var(--meta); }

.wave-locked-hint {
  font-size: 12px;
  color: var(--meta);
  font-style: italic;
  margin: 8px 0 12px;
}

/* ── Wave items ── */
.wave-item {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.wave-item:last-child { margin-bottom: 0; }
.wave-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.wave-item-status {
  color: var(--meta);
  font-size: 12px;
}
.wave-item-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
}
.wave-item-required {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.wave-item-recommended { color: var(--meta); }
.wave-item-ready {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-mid);
  background: var(--teal-soft);
  padding: 2px 6px;
  border-radius: var(--r-1);
  margin-left: 4px;
}
.wave-item-used-for {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--teal-mid);
  letter-spacing: 0.04em;
}
.wave-item-desc {
  font-size: 12px;
  color: var(--meta);
  line-height: 1.5;
  margin: 4px 0 12px;
  padding-left: 20px;
}
.wave-item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-left: 20px;
}
.wave-drop-btn,
.wave-secondary-btn {
  font-size: 12px;
  padding: 6px 12px;
}

/* File upload form: hide the native file input, use the styled label as the button */
.wave-upload-form,
.universal-drop-form {
  display: inline;
}
.wave-upload-form input[type="file"],
.universal-drop-form input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.wave-upload-form label.wave-drop-btn,
.universal-drop-form label.universal-drop-cta {
  cursor: pointer;
  display: inline-block;
}
.universal-drop-cta { margin-top: 8px; }

/* File rows under each wave item */
.wave-file-list {
  margin: 8px 0 12px;
  background-color: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.wave-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.wave-file-row:last-child {
  border-bottom: 0;
}
.wave-file-icon { font-size: 14px; }
.wave-file-name {
  flex: 1;
  color: var(--primary);
  font-weight: 500;
}
.wave-file-meta {
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
}

/* ── Wave 1: "What we need" template panel ── */
.wave-template {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--teal-soft);
  border-left: 2px solid var(--teal);
  border-radius: var(--r-1);
}
.wave-template-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-mid);
  margin-bottom: 8px;
}
.wave-template-section {
  margin-bottom: 10px;
}
.wave-template-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 4px;
}
.wave-template-section ul {
  list-style: none;
  padding-left: 16px;
  margin: 0;
}
.wave-template-section ul li {
  font-size: 12px;
  color: var(--meta);
  padding: 1px 0;
  position: relative;
}
.wave-template-section ul li:before {
  content: "·";
  position: absolute;
  left: -10px;
  color: var(--teal-mid);
}
.wave-template-footer {
  font-size: 11px;
  color: var(--meta);
  font-style: italic;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* ── Manual entry grid (Phase 1: styled, not saving) ── */
.manual-entry {
  margin-top: 14px;
  padding: 14px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}
.manual-entry-header {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 10px;
}
.manual-grid {
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
}
.manual-grid-row {
  display: grid;
  grid-template-columns: 30px 1.4fr 1fr 0.7fr 0.7fr 1.1fr 1fr 70px;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.manual-grid-row:last-child { border-bottom: none; }
.manual-grid-header {
  background: var(--paper-card);
  font-size: 10px;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--meta);
  letter-spacing: 0.04em;
}
.manual-cell {
  padding: 6px 8px;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  min-width: 0;
}
.manual-cell:last-child { border-right: none; }
.manual-cell input,
.manual-cell select {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 12px;
  font-family: inherit;
  padding: 2px 0;
  outline: none;
}
.manual-cell input::placeholder { color: var(--meta); }
.manual-cell-num {
  background: var(--paper-card);
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  justify-content: center;
}
.manual-cell-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
}
.manual-row-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--meta);
  font-size: 10px;
  padding: 2px 5px;
  border-radius: var(--r-1);
  cursor: pointer;
  font-family: inherit;
}
.manual-row-btn:hover { color: var(--teal-mid); border-color: var(--teal-mid); }
.manual-entry-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.manual-entry-footer .btn { font-size: 12px; padding: 6px 12px; }
.manual-entry-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
}

/* ── Stage 4: Side panel ── */
.stage4-side-panel {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 16px;
  position: sticky;
  top: 16px;
}
.side-panel-header {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--meta);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.package-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.package-row:last-child { border-bottom: none; }
.package-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 4px;
}
.package-status {
  font-size: 11px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  margin-bottom: 6px;
}
.package-status-ready {
  color: var(--teal-mid);
  font-weight: 500;
}
.package-missing {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.package-missing li {
  font-size: 11px;
  color: var(--gold);
  padding: 1px 0;
}
.package-ready { background: var(--teal-soft); margin: 0 -16px; padding: 12px 16px; border-left: 2px solid var(--teal); }
.package-empty {
  font-size: 12px;
  color: var(--meta);
  font-style: italic;
  padding: 12px 0;
}
.btn-block { width: 100%; }
.btn-mini-link {
  background: transparent;
  border: none;
  color: var(--meta);
  font-size: 10px;
  padding: 4px 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}
.btn-mini-link:hover { color: var(--secondary); }
.side-panel-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ── Drop zone ── */
.drop-zone {
  border: 2px dashed var(--line);
  border-radius: var(--r-3);
  padding: 48px 24px;
  text-align: center;
  transition: all 0.18s;
  background: var(--paper-card);
}
.drop-zone:hover, .drop-zone.is-dragover { border-color: var(--teal-mid); background: var(--teal-soft); }
.drop-zone-icon { font-size: 36px; color: var(--meta); margin-bottom: 12px; }
.drop-zone-text { color: var(--secondary); margin-bottom: 6px; }
.drop-zone-meta { font-size: 12px; color: var(--meta); }

/* ── State chip picker ── */
.state-options {
  position: relative;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  margin-top: 6px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 5;
}
.state-option, .industry-result {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--secondary);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  cursor: pointer;
}
.state-option:hover, .industry-result:hover {
  background: var(--card-hover);
  color: var(--primary);
}
.industry-result { display: flex; justify-content: space-between; align-items: center; }
.industry-result-name { color: var(--primary); }
.industry-result-code { color: var(--meta); font-family: 'IBM Plex Mono', monospace; font-size: 11px; }

.state-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; margin-bottom: 6px; }
.state-chip {
  display: inline-flex;
  align-items: center;
  background: var(--paper-card);
  border: 1px solid var(--teal);
  border-radius: var(--r-3);
  padding: 4px 4px 4px 12px;
  font-size: 13px;
}
.state-chip-label { color: var(--primary); font-weight: 500; margin-right: 6px; }
.state-chip-input {
  width: 50px;
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 13px;
  text-align: center;
  padding: 2px 4px;
  outline: none;
}
.state-chip-remove {
  background: transparent;
  border: none;
  color: var(--meta);
  font-size: 18px;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}
.state-chip-remove:hover { color: var(--warm-gold); }

/* ── Roadmap step (What's Next page) ── */
.roadmap-step {
  display: flex;
  gap: 18px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 18px 22px;
  margin-bottom: 14px;
}
.roadmap-number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--on-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 16px;
}
.roadmap-content h4 { margin: 4px 0 6px; font-size: 15px; }
.roadmap-content p { font-size: 13px; color: var(--meta); margin: 0; line-height: 1.5; }

/* ── Factor explain (scoring drawer) ── */
/* Each factor is a recessed-violet inset on the AI ground — same
   --violet-well pattern as .rec-risk-explainer. */
.factor-explain {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
  padding: 10px 14px;
  background-color: var(--violet-well);
  border-radius: var(--r-1);
  margin-bottom: 10px;
}
.factor-label { font-weight: 500; color: var(--secondary); }
.factor-positive { color: var(--teal-mid); }
.factor-negative { color: var(--warm-gold); }

/* ── Headcount table ── */
.headcount-table { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.headcount-cell { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--r-1); padding: 8px 10px; }
.headcount-cell label { font-size: 11px; color: var(--meta); margin-bottom: 4px; }
.headcount-cell input { background: transparent; border: none; padding: 2px 0; font-size: 14px; color: var(--primary); }

/* ── Age step (counts-based with steppers) ── */
.age-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 6px;
}
@media (max-width: 600px) { .age-grid { grid-template-columns: 1fr; } }

.age-cell {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 12px 14px;
}
.age-cell label {
  font-size: 12px;
  color: var(--meta);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.age-cell-meta {
  font-size: 11px;
  color: var(--teal-mid);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.age-cell-readonly {
  background: var(--teal-soft);
  border-color: var(--teal-line);
}
.age-cell-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--primary);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stepper input {
  flex: 1;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 6px 4px;
  color: var(--primary);
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  -moz-appearance: textfield;
}

/* Suffixed stepper variant: "%" sign rendered inside the input area.
   Used on the dependent-load tier mix cells where the broker is
   editing percentages, not absolute counts. */
.stepper-suffixed .stepper-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
}
.stepper-suffixed .stepper-input-wrap input {
  flex: 1;
  padding-right: 18px;
}
.stepper-suffixed .stepper-suffix {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--meta);
  font-size: 13px;
  pointer-events: none;
  font-family: inherit;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: var(--paper-card);
  color: var(--secondary);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.stepper-btn:hover { background: var(--card-hover); color: var(--teal-mid); border-color: var(--teal-mid); }

/* ── Routing update banner (Layer B) ─────────────── */
.routing-update-banner {
  padding: 16px 20px;
  border-radius: var(--r-1);
  margin-bottom: 14px;
}
.routing-update-changed {
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
}
.routing-update-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--teal-mid);
  margin-bottom: 6px;
}
.routing-update-body {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.5;
}
.routing-update-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.routing-delta-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  border-radius: var(--r-3);
  background: var(--paper-card);
  border: 1px solid var(--line);
}
.routing-delta-up {
  border-color: var(--teal-line);
  color: var(--teal-mid);
}
.routing-delta-down {
  border-color: rgba(255, 187, 51, 0.4);
  color: var(--gold);
}
.routing-update-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.routing-update-dismiss {
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}
.routing-source-hint {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--ink-mute);
  background: var(--paper-card);
  border: 1px solid var(--card-hover);
  border-radius: var(--r-1);
  font-family: 'IBM Plex Mono', monospace;
}

/* ── Recommendation source banner ─────────────────── */
.rec-source-banner {
  padding: 16px 20px;
  border-radius: var(--r-1);
  margin-bottom: 20px;
}
.rec-source-census {
  background: var(--ai-bg);
  border: 1px solid var(--ai-border);
}
.rec-source-estimate {
  background: var(--ai-bg);
  border: 1px solid var(--ai-border);
}
.rec-source-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}
.rec-source-census .rec-source-title { color: var(--ai-text); }
.rec-source-estimate .rec-source-title { color: var(--ai-text); }
.rec-source-details {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  font-family: 'IBM Plex Mono', monospace;
}
.rec-source-links {
  margin-top: 10px;
  display: flex;
  gap: 18px;
}
.rec-source-links a {
  font-size: 12px;
  color: var(--teal-mid);
  text-decoration: none;
}
.rec-source-links a:hover {
  text-decoration: underline;
}
.rec-risk-explainer {
  /* Elevated card on the violet AI ground. Pure white surface with a
     hairline violet border reads as "raised highlight" against the
     surrounding violet wash, rather than the prior recessed-inset
     treatment (--violet-well 18% was darker than the outer 10% wash). */
  margin-top: 10px;
  padding: 12px 16px;
  background-color: var(--paper-card);
  border: 1px solid var(--ai-border);
  border-radius: var(--r-1);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}
.rec-risk-explainer strong {
  color: var(--teal-mid);
}

/* AI panel evidence-section scaffolding: hairline divider + eyebrow
   that introduce the expanded census/worksheet area inside the
   violet panel. */
.rec-source-divider {
  height: 1px;
  background-color: var(--line-2);
  margin: 16px -20px 14px;
}
.rec-source-evidence-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ai-text);
  margin-bottom: 8px;
}

/* Neutralize standalone-card chrome on partials when embedded in an
   AI panel. The partial keeps its own card surface for use on a
   normal page (gap-fill, etc.); inside the violet panel it sits
   directly on the ground. */
.in-ai-panel .census-table {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  margin-top: 0;
}
.in-ai-panel .census-table-header {
  background-color: transparent;
}

/* ── Welcome case identity (between value props + cards) ── */
.welcome-case-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.welcome-case-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-family: 'IBM Plex Mono', monospace;
}
.welcome-case-sep {
  width: 1px;
  height: 16px;
  background: var(--line);
  margin: 0 6px;
}
.welcome-case-value {
  font-size: 13px;
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
}
.welcome-case-email {
  cursor: pointer;
}
.welcome-case-email:hover {
  color: var(--teal-mid);
}
.welcome-copy-icon {
  font-size: 13px;
  color: var(--ink-mute);
  cursor: pointer;
  opacity: 0.5;
}
.welcome-copy-icon:hover {
  opacity: 1;
}

/* ── Welcome hero block ──────────────────────────── */
.welcome-hero-block {
  text-align: center;
  padding: 8px 0 28px;
}
.welcome-subtitle {
  text-align: left;
  font-size: 13px;
  color: var(--ink-mute);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.welcome-headline {
  font-size: 35px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  max-width: 800px;
  margin: 0 auto 14px;
}
.welcome-subheadline {
  font-size: 15px;
  color: var(--meta);
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 42px;
  text-align: center;
}

/* Welcome lifecycle preview: 4 phase cards with hover tooltips.
   Mirrors the in-app strip's phase structure but shows all phases at
   parity (broker has not started yet). Replaces the older 5-step
   process-dot pipeline. */
.welcome-lifecycle-wrap {
  margin: 12px auto 8px;
  max-width: 920px;
}
.welcome-lifecycle-label {
  display: block;
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--meta);
  margin-bottom: 6px;
  margin-left: 0;
}
.welcome-lifecycle {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}

.welcome-phase {
  flex: 1 1 0;
  min-width: 0;
  background-color: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  /* Raised card + persistent teal top-accent rail (brand identity).
     Active state intensifies the rail. */
  box-shadow: var(--shadow-card), inset 0 3px 0 var(--teal-mid);
  padding: 14px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 52px;
  cursor: help;
}
.welcome-phase:hover {
  border-color: var(--teal-mid);
  box-shadow: var(--shadow-card), inset 0 3px 0 var(--teal);
}

.welcome-phase-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.01em;
  text-align: center;
}

.welcome-phase-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--paper-card);
  border: 1px solid var(--teal-line);
  border-top: 2px solid var(--teal);
  border-radius: var(--r-2);
  padding: 12px 14px;
  font-size: 12px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--ink-soft);
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 100;
  box-shadow: var(--shadow-pop);
}
.welcome-phase:hover .welcome-phase-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.welcome-phase-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: var(--teal-mid);
  font-size: 14px;
  font-family: 'IBM Plex Mono', monospace;
  opacity: 0.5;
}

@media (max-width: 760px) {
  .welcome-lifecycle {
    flex-direction: column;
    gap: 12px;
  }
  .welcome-phase-arrow {
    width: 100%;
    height: 16px;
    transform: rotate(90deg);
  }
}

/* Value props: single condensed line */
.welcome-value-line {
  font-size: 12px;
  color: var(--meta);
  letter-spacing: 0.02em;
  text-align: center;
  margin-top: 12px;
  margin-bottom: 24px;
}

/* Email inline within the file card description */
.welcome-email-inline {
  cursor: pointer;
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  border-bottom: 1px dotted var(--line);
}
.welcome-email-inline:hover {
  color: var(--teal-mid);
  border-bottom-color: var(--teal-mid);
}
.welcome-copy-icon {
  display: inline;
  margin-left: 2px;
  font-size: 12px;
  color: var(--ink-mute);
  opacity: 0.5;
}
.welcome-copy-icon:hover {
  opacity: 1;
}

/* Case ID footer */
.welcome-case-id {
  text-align: center;
  margin-top: 18px;
  font-size: 11px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
}

/* ── Welcome dual-entry layout ───────────────────── */
.welcome-entry {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 36px 0 24px;
}
.welcome-entry-card {
  flex: 1;
  padding: 32px 28px;
  background: var(--paper-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: border-color 0.2s;
}
.welcome-entry-card:hover {
  border-color: var(--teal-line);
}
.welcome-entry-card-active {
  border-color: var(--teal) !important;
  background: var(--teal-soft) !important;
}
.welcome-entry-icon {
  font-size: 28px;
  color: var(--teal-mid);
}
.welcome-entry-card h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}
.welcome-entry-desc {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.6;
  max-width: 320px;
  flex: 1;
}
.welcome-entry-cta {
  padding: 12px 28px;
  font-size: 14px;
}
.welcome-entry-hint {
  font-size: 11px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
}
.welcome-entry-divider {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
  color: var(--ink-mute);
  font-style: italic;
}
.welcome-entry-card input[type="file"] {
  display: none;
}
.welcome-stages-toggle {
  text-align: center;
  margin: 24px 0;
}
.welcome-stages-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-mute);
  padding: 8px 18px;
  border-radius: var(--r-3);
  font-size: 13px;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
}
.welcome-stages-btn:hover {
  border-color: var(--teal-mid);
  color: var(--teal-mid);
}

/* ── Gap-fill screen ─────────────────────────────── */
.gap-fill-hero {
  margin-bottom: 24px;
}
.gap-fill-hero h2 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 8px;
}
.gap-fill-sub {
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.6;
}
.gap-fill-census-summary {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  border-radius: var(--r-2);
  margin-bottom: 16px;
}
/* Structured dashboard layout */
.gap-fill-census-dashboard {
  padding: 20px 24px;
  background-color: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.gap-fill-stats-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
}
.gap-fill-stats-section-pop { flex: 0 0 auto; min-width: 0; padding-right: 24px; }
.gap-fill-stats-section-age { flex: 0 0 auto; min-width: 0; padding-right: 24px; }
.gap-fill-stats-section-geo {
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.gap-fill-stats-header {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--meta);
  margin-bottom: 8px;
}
.gap-fill-stat-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
}
/* Geography grid: fixed-width cells with 2-letter state abbreviations */
.gap-fill-stat-grid-geo {
  display: grid;
  grid-template-columns: repeat(auto-fill, 52px);
  gap: 10px 4px;
}
.gap-fill-stat-geo {
  width: 52px;
  text-align: center;
  cursor: default;
}
.gap-fill-stat-geo .gap-fill-stat-num {
  font-size: 24px;
  font-weight: 500;
  color: var(--teal-mid);
  line-height: 1.1;
}
.gap-fill-stat-geo .gap-fill-stat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--meta);
  margin-top: 2px;
}
/* Section header for file rows and other labeled areas */
.gap-fill-section-header {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--meta);
  margin-bottom: 8px;
  margin-top: 24px;
}
/* Progress text below checklist header */
.gap-fill-progress {
  font-size: 12px;
  color: var(--meta);
  margin-top: 4px;
  margin-bottom: 12px;
}
/* Auto-fill badge (from file parsing) */
.from-file-badge {
  font-size: 10px;
  color: var(--ai-text);
  background: var(--ai-bg);
  padding: 2px 6px;
  border-radius: var(--r-1);
  margin-left: 8px;
  font-weight: 400;
}
/* Required label on checklist rows */
.gap-fill-required {
  font-size: 10px;
  color: var(--meta);
  margin-left: 8px;
  font-weight: 400;
}
/* Continue button in accordion sections */
.gap-fill-continue {
  display: block;
  margin-top: 16px;
  margin-left: auto;
  padding: 8px 20px;
  font-size: 13px;
  background: none;
  border: 1px solid var(--line);
  color: var(--secondary);
  border-radius: var(--r-1);
  cursor: pointer;
  font-family: inherit;
}
.gap-fill-continue:hover {
  border-color: var(--meta);
  color: var(--primary);
}
/* Disabled submit button */
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-disabled:hover {
  opacity: 0.5;
}
/* Incomplete sections modal */
.gap-fill-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gap-fill-modal-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 24px 28px;
  max-width: 420px;
  width: 90%;
}
.gap-fill-modal-card h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}
.gap-fill-modal-card ul {
  padding-left: 18px;
  margin: 8px 0 16px;
  color: var(--secondary);
  font-size: 14px;
}
.gap-fill-modal-card p {
  font-size: 13px;
  color: var(--meta);
  margin-bottom: 16px;
}
.gap-fill-stat {
  text-align: center;
}
.gap-fill-stat-num {
  font-size: 28px;
  font-weight: 500;
  color: var(--teal-mid);
  line-height: 1;
}
.gap-fill-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
}
.gap-fill-stat-divider {
  width: 1px;
  align-self: stretch;
  margin: 24px 12px 0;
  background: var(--line);
}
.gap-fill-states {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.gap-fill-state-chip {
  padding: 4px 10px;
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  border-radius: var(--r-3);
  color: var(--teal-mid);
}
.gap-fill-states-note {
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}
.gap-fill-census-link {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.gap-fill-census-hint {
  font-size: 12px;
  color: var(--ink-mute);
}
.gap-fill-section-title {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-hover);
}
.gap-fill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.gap-fill-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gap-fill-field span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-family: 'IBM Plex Mono', monospace;
}
.gap-fill-field input,
.gap-fill-field select {
  /* Use background-color, not the `background` shorthand: shorthand
     resets background-image/repeat/position and kills the global
     select chevron. */
  background-color: var(--paper-well);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--r-1);
  font-size: 14px;
  font-family: inherit;
}
.gap-fill-field input:focus,
.gap-fill-field select:focus {
  outline: none;
  border-color: var(--teal-mid);
}
.gap-fill-submit {
  text-align: center;
  padding-top: 16px;
}
.gap-fill-submit-hint {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-mute);
}

/* AI provenance hint: signals that a field value was auto-filled
   by a parser. Violet matches the intelligence-layer color used by
   the narrator panel. The .gap-fill-field span selector above is
   uppercase mono for labels, so this rule overrides those rules
   for inline provenance hints (which case-mixes and lowercases). */
.ai-provenance,
.gap-fill-field .ai-provenance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--ai, #6C63FF);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}

/* ── Gap-fill progressive checklist ──────────────── */
/* Container card: holds all six accordion item/body pairs as one
   §17 surface. Internal --line hairlines separate rows. */
.gap-fill-checklist {
  background-color: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 16px;
}
.gap-fill-checklist-item {
  cursor: pointer;
  user-select: none;
}
.gap-fill-checklist-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.15s;
}
.gap-fill-checklist-header:hover {
  background-color: var(--paper-well);
}
/* Last accordion item drops its bottom hairline so it abuts the
   container's own bottom edge cleanly. Uses :has() to find the item
   that has no following sibling item (bodies interleave). */
.gap-fill-checklist-item:not(:has(~ .gap-fill-checklist-item)) .gap-fill-checklist-header {
  border-bottom: 0;
}
.gap-fill-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  background-color: var(--paper-well);
  color: var(--ink-mute);
  font-family: 'IBM Plex Mono', monospace;
}
.gap-fill-check-done {
  background-color: var(--teal-soft);
  color: var(--teal-mid);
  border: 1px solid var(--teal-line);
}
.gap-fill-checklist-label {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}
.gap-fill-checklist-hint {
  font-size: 12px;
  color: var(--ink-mute);
}
.gap-fill-checklist-chevron {
  font-size: 14px;
  color: var(--ink-mute);
}
.gap-fill-checklist-body {
  padding: 12px 16px 20px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid var(--teal-line);
  margin-left: 30px;
}
/* Last body (when last accordion is open) drops the bottom hairline. */
.gap-fill-checklist-body:not(:has(~ .gap-fill-checklist-item)) {
  border-bottom: 0;
}

/* Thinking indicator (shimmer) */
.narrator-thinking {
  background: var(--ai-bg);
  border-left: 3px solid var(--ai);
  border-radius: var(--r-1);
  padding: 12px 16px;
  margin: 16px 0 8px;
  font-size: 13px;
  color: var(--meta);
  box-shadow: 0 1px 4px var(--ai-glow);
  animation: narrator-shimmer 2s ease-in-out infinite;
}
@keyframes narrator-shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ── Routing Narrator Panel ────────────────────────────── */

/* Tab on right edge */
.narrator-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  background: var(--ai);
  border: none;
  border-radius: var(--r-1) 0 0 var(--r-1);
  padding: 12px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
.narrator-tab:hover {
  background: #5B52E6;
}
.narrator-tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #F5F5F0;
}
.narrator-tab-badge {
  background: #F5F5F0;
  color: var(--ai);
  font-size: 10px;
  font-weight: 500;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Tab entrance: slide in from right with overshoot */
.narrator-tab-enter {
  animation: narrator-tab-enter 0.5s ease-out forwards;
}
@keyframes narrator-tab-enter {
  0% { transform: translateY(-50%) translateX(100%); }
  60% { transform: translateY(-50%) translateX(-8px); }
  100% { transform: translateY(-50%) translateX(0); }
}

/* Pulse animation for unseen events */
.narrator-tab-pulse {
  animation: narrator-pulse 3s ease-in-out infinite;
}
@keyframes narrator-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}
/* Thinking pulse dot for file parsing / routing computation */
.narrator-thinking-pulse {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ai, #6C63FF);
  animation: thinking-dot 1.2s ease-in-out infinite;
}
@keyframes thinking-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Badge pop when new events arrive */
.narrator-badge-pop {
  animation: narrator-badge-pop 0.3s ease-out;
}
@keyframes narrator-badge-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Unseen event glow when panel opens */
.narrator-event-glow {
  animation: narrator-event-glow 1s ease-out forwards;
}
@keyframes narrator-event-glow {
  0% { border-left-color: var(--ai-text); box-shadow: 0 0 8px var(--ai-glow); }
  100% { border-left-color: var(--ai); box-shadow: 0 1px 4px var(--ai-glow); }
}

/* Panel overlay */
.narrator-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.3);
}
.narrator-overlay-enter {
  transition: opacity 0.2s;
}
.narrator-overlay-leave {
  transition: opacity 0.15s;
}

/* Panel itself */
.narrator-panel {
  position: fixed;
  top: 0;
  right: -360px;
  width: 340px;
  height: 100vh;
  z-index: 1002;
  background: var(--paper-card);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: right 0.25s ease;
  overflow: hidden;
}
.narrator-panel-open {
  right: 0;
}

/* Header: one-agent identity chrome shared with the palette (the
   AI-agent pill reuses .cmd-brand-badge from ask_routive.css). */
.narrator-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.narrator-brandmark { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.narrator-header .narrator-close { margin-left: auto; }
.narrator-title {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ai-text);
}
.narrator-close {
  background: none;
  border: none;
  color: var(--meta);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.narrator-close:hover {
  color: var(--primary);
}

/* Body (scrollable event feed) */
.narrator-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.narrator-empty {
  color: var(--meta);
  font-size: 13px;
  text-align: center;
  padding: 32px 0;
}

/* Stage group */
.narrator-stage-group {
  margin-bottom: 16px;
}
.narrator-stage-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--meta);
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* Event card */
.narrator-event {
  background: var(--ai-bg);
  border-left: 3px solid var(--ai);
  border-radius: var(--r-1);
  padding: 10px 12px;
  margin-bottom: 8px;
  position: relative;
  box-shadow: 0 1px 4px var(--ai-glow);
}
.narrator-event-body {
  font-size: 13px;
  color: var(--secondary);
  line-height: 1.5;
}
.narrator-event-lead {
  color: var(--primary);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}
.narrator-event-detail {
  color: var(--secondary);
  font-weight: 400;
}
/* Score breakdown in per-model accordion */
.score-breakdown {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.score-breakdown-header {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--meta);
  margin-bottom: 8px;
}
.score-breakdown-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--secondary);
  padding: 2px 0;
}
.score-breakdown-label {
  font-family: 'IBM Plex Sans', sans-serif;
}
.score-breakdown-pts {
  font-family: 'IBM Plex Mono', monospace;
  min-width: 40px;
  text-align: right;
}
.score-breakdown-detail {
  font-size: 11px;
  color: var(--meta);
  padding-left: 8px;
  margin-bottom: 2px;
}
.score-breakdown-sub {
  font-size: 12px;
  color: var(--meta);
  padding-left: 16px;
  margin-bottom: 2px;
}
.score-breakdown-total {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}

.narrator-bullet {
  padding-left: 16px;
  text-indent: -12px;
  margin-bottom: 2px;
}
.narrator-event-time {
  font-size: 10px;
  color: var(--meta);
  text-align: right;
  margin-top: 6px;
}

/* Left border color overrides (default is violet via .narrator-event) */
.narrator-border-gold {
  border-left-color: var(--gold);
}
.narrator-border-red {
  border-left-color: var(--red);
}

/* Email-arrival toast: fixed notice narrator.js shows before the page
   moves itself (auto-reload / navigate on emailed intake). Violet: the
   AI agent acting, same layer as the event feed. */
.narrator-email-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  max-width: 440px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ai);
  border-radius: var(--r-1);
  box-shadow: 0 6px 24px rgba(108, 99, 255, 0.18);
  padding: 12px 16px;
  animation: narrator-toast-in 0.25s ease;
}
.narrator-email-toast-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ai);
}
.narrator-email-toast-meta {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--secondary);
}
@keyframes narrator-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Emailed-intake modal: shown when a client email finishes parsing.
   The broker chooses to open the case or stay put; the page never
   navigates itself. Centered card in the Ask Routive palette style. */
.narrator-email-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1005;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.narrator-email-modal {
  width: 480px;
  max-width: calc(100vw - 48px);
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ai);
  border-radius: var(--r-1);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  padding: 20px 22px;
  animation: narrator-modal-in 0.2s ease;
}
.narrator-email-modal-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ai);
}
.narrator-email-modal-body {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--secondary);
}
.narrator-email-modal-files {
  margin: 10px 0 0;
  padding: 10px 12px;
  list-style: none;
  background: rgba(108, 99, 255, 0.06);
  border-radius: var(--r-1);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--secondary);
  max-height: 180px;
  overflow-y: auto;
}
.narrator-email-modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.narrator-email-modal-stay,
.narrator-email-modal-go {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-1);
  cursor: pointer;
}
.narrator-email-modal-stay {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--secondary);
}
.narrator-email-modal-stay:hover { border-color: var(--secondary); }
.narrator-email-modal-go {
  background: var(--ai);
  border: 1px solid var(--ai);
  color: #fff;
}
.narrator-email-modal-go:hover { background: #5B52E6; }
@keyframes narrator-modal-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive: bottom sheet on narrow viewports */
@media (max-width: 768px) {
  .narrator-tab {
    top: auto;
    bottom: 16px;
    right: 16px;
    transform: none;
    writing-mode: horizontal-tb;
    flex-direction: row;
    border-radius: var(--r-1);
    border: none;
    padding: 8px 12px;
  }
  .narrator-tab-label {
    writing-mode: horizontal-tb;
    text-orientation: initial;
  }
  .narrator-panel {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 0;
    max-height: 60vh;
    border-left: none;
    border-top: 1px solid var(--line);
    border-radius: var(--r-3) var(--r-3) 0 0;
    transition: height 0.25s ease;
  }
  .narrator-panel-open {
    height: 60vh;
  }
}

/* ── Build 4: Welcome page restructure ───────────────────
   Hot Start (file upload) becomes the dominant primary path,
   shown as a full-width dashed-border dropzone with three drop-
   type cards inside (Census required, Bill helpful, Renewal
   helpful) and three alternative actions below an "or" divider
   (Email to case inbox, Request from client). Guided start
   demoted to a single text link below. Footer band shows case
   ID + inbox + security note. */

.dropzone-wrap {
  margin: 10px 0 16px;
}
.dropzone-eyebrow {
  display: block;
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--meta);
  margin-bottom: 6px;
}
.dropzone {
  background: var(--paper-card);
  border: 2px dashed var(--teal-line);
  border-radius: var(--r-3);
  padding: 36px 32px 18px;
  margin: 0 0 16px;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.dropzone-case-strip {
  position: absolute;
  top: 16px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--meta);
  text-align: left;
}
.dropzone-case-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropzone-case-inbox {
  cursor: pointer;
  transition: color 0.15s ease;
}
.dropzone-case-inbox:hover {
  color: var(--teal-mid);
}

/* Mobile: drop the absolute positioning on the case strip so it
   stops overlapping the dropzone icon. The strip becomes a normal
   header band that pushes the icon down naturally. */
@media (max-width: 640px) {
  .dropzone {
    padding: 24px 20px 18px;
  }
  .dropzone-case-strip {
    position: static;
    align-items: center;
    margin-bottom: 16px;
    width: 100%;
  }
  .dropzone-case-line {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.dropzone-security-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--meta);
  text-align: center;
}
.dropzone-active {
  background: var(--teal-soft);
  border-color: var(--teal-mid);
}
.dropzone-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.dropzone-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dropzone-headline {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 8px;
}
.dropzone-browse {
  color: var(--teal-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dropzone-browse:hover {
  filter: brightness(1.15);
}
.dropzone-sub {
  color: var(--secondary);
  font-size: 14px;
  margin: 0 0 32px;
}

.dropzone-doctypes-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--meta);
  margin-bottom: 10px;
  text-align: center;
}
.dropzone-doctypes-foot {
  font-size: 12px;
  color: var(--meta);
  margin: 8px 0 24px;
  text-align: center;
  font-style: italic;
}
.dropzone-doctype-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin-bottom: 0;
}
.doctype-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  font-size: 12px;
  color: var(--secondary);
  white-space: nowrap;
}
.doctype-pill-required {
  border-color: var(--teal-mid);
  color: var(--teal-mid);
}
.doctype-pill-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-mid);
  background: var(--teal-soft);
  padding: 1px 5px;
  border-radius: var(--r-1);
}
.doctype-card {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 14px 16px;
  text-align: left;
}
.doctype-card-required {
  border-color: var(--teal-mid);
  background: var(--teal-soft);
}
.doctype-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-mid);
  margin-bottom: 6px;
}
.doctype-card .doctype-tag {
  color: var(--meta);
}
.doctype-card-required .doctype-tag {
  color: var(--teal-mid);
}
.doctype-name {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.doctype-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--meta);
}

.dropzone-or {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--meta);
  margin: 0 0 16px;
}
.dropzone-alt-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.dropzone-alt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  color: var(--secondary);
  padding: 10px 16px;
  border-radius: var(--r-1);
  font-size: 13px;
  cursor: pointer;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dropzone-alt-btn:hover {
  background: var(--card-hover);
  color: var(--primary);
}
.dropzone-alt-btn-primary {
  border-color: var(--teal-mid);
  color: var(--teal-mid);
}
.dropzone-alt-btn-primary:hover {
  background: var(--teal-soft);
  color: var(--teal-mid);
}
.dropzone-alt-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--secondary);
  background: transparent;
  padding: 0;
}
.dropzone-alt-copied {
  color: var(--teal-mid);
}
.dropzone-uploading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
}

.welcome-guided-fallback {
  text-align: center;
  font-size: 14px;
  color: var(--secondary);
  margin: 12px 0 32px;
}
.welcome-guided-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.welcome-guided-link:hover {
  color: var(--teal-mid);
}

.welcome-footer-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--meta);
  flex-wrap: wrap;
  gap: 12px;
}
.welcome-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.welcome-footer-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--meta);
}
.welcome-footer-value {
  background: var(--paper-card);
  padding: 2px 8px;
  border-radius: var(--r-1);
  color: var(--secondary);
}
.welcome-footer-spacer {
  width: 16px;
}
.welcome-footer-inbox {
  color: var(--primary);
}
.welcome-footer-right {
  color: var(--meta);
}

/* Request-from-client modal */
.request-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.85);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  z-index: 1000;
  overflow-y: auto;
}
.request-modal {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 28px 32px;
  max-width: 580px;
  width: 100%;
  position: relative;
  z-index: 1001;
  box-shadow: var(--shadow-pop);
}
.request-modal-tag {
  display: inline-block;
  background: var(--violet-soft);
  color: var(--ai, #6C63FF);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--r-1);
  margin-bottom: 14px;
}
.request-modal-title {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 8px;
}
.request-modal-sub {
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 24px;
}
.request-modal-field {
  margin-bottom: 18px;
}
.request-modal-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
.request-modal-row > .request-modal-field {
  flex: 1;
  margin-bottom: 0;
}
.request-modal-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--meta);
  margin-bottom: 6px;
}
.request-modal-label-hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--meta);
  font-size: 11px;
  margin-left: 6px;
}
.request-modal-input,
.request-modal-textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: var(--primary);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}
.request-modal-input:focus,
.request-modal-textarea:focus {
  outline: none;
  border-color: var(--teal-mid);
}
.request-modal-textarea {
  resize: vertical;
  min-height: 70px;
}
.request-modal-doc {
  display: flex;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
}
.request-modal-doc input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--teal-mid);
  width: 16px;
  height: 16px;
}
.request-modal-doc-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}
.request-modal-doc-tag {
  display: inline-block;
  background: var(--teal-soft);
  color: var(--teal-mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--r-1);
  margin-left: 6px;
  vertical-align: 1px;
}
.request-modal-doc-meta {
  font-size: 12px;
  color: var(--meta);
}
.request-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 12px;
}
.request-modal-footer-note {
  font-size: 11px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
}
.request-modal-footer-actions {
  display: flex;
  gap: 8px;
}

/* Request-sent success card (replaces dropzone after a send) */
.request-sent-card {
  background: var(--violet-soft);
  border: 1px solid var(--violet-well);
  border-radius: var(--r-3);
  padding: 32px 36px;
  margin: 32px 0 16px;
}
.request-sent-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--violet-soft);
  color: var(--ai, #6C63FF);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.request-sent-title {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 8px;
}
.request-sent-sub {
  font-size: 13px;
  color: var(--secondary);
  margin: 0 0 16px;
  line-height: 1.6;
}
.request-sent-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  background: var(--paper-card);
  padding: 1px 6px;
  border-radius: var(--r-1);
  color: var(--primary);
}
.request-sent-actions {
  font-size: 13px;
}
.request-sent-action {
  color: var(--ai, #6C63FF);
  text-decoration: none;
  margin-right: 4px;
}
.request-sent-action:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.request-sent-sep {
  color: var(--meta);
  margin: 0 6px;
}

/* ── Parsing modal: real-time per-file reveal ──────────
   Opens on file drop. Phase 1 shows filename-detected types
   instantly. Phase 2 reveals server-parsed metadata staggered
   so the broker sees progress instead of staring at a 20s
   spinner. Continue button stays disabled until parsing
   completes; concluding banner surfaces 'X fields extracted,
   group profile ready'. Reusable on documents page later. */
.parsing-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.85);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  z-index: 1000;
  overflow-y: auto;
}
.parsing-modal {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 28px 32px;
  max-width: 640px;
  width: 100%;
  position: relative;
  z-index: 1001;
  box-shadow: var(--shadow-pop);
}
.parsing-modal-tag {
  display: inline-block;
  background: var(--violet-soft);
  color: var(--ai, #6C63FF);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--r-1);
  margin-bottom: 14px;
}
.parsing-modal-title {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 6px;
}
.parsing-modal-sub {
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px;
}
/* Honest count bar: the fill width tracks documents actually finished,
   not elapsed time. Teal = product chrome. */
.parsing-progress {
  margin: 0 0 16px;
}
.parsing-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.parsing-progress-label {
  color: var(--secondary);
  font-size: 12px;
}
.parsing-progress-pct {
  color: var(--teal);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.parsing-progress-track {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.parsing-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--teal);
  transition: width 0.35s ease;
}
.parsing-file-elapsed {
  color: var(--meta);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
  white-space: nowrap;
}
.parsing-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.parsing-file-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 12px 14px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.parsing-file-row-identifying {
  border-color: var(--ai-border);
}
.parsing-file-row-parsing {
  border-color: var(--teal-line);
}
.parsing-file-row-complete {
  border-color: var(--teal-line);
}
.parsing-file-row-error {
  border-color: rgba(231, 76, 60, 0.5);
}
.parsing-file-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.parsing-file-row-identifying .parsing-file-icon {
  background: var(--violet-soft);
  color: var(--ai, #6C63FF);
}
.parsing-file-row-parsing .parsing-file-icon {
  background: var(--teal-soft);
  color: var(--teal-mid);
}
.parsing-file-row-complete .parsing-file-icon {
  background: var(--teal-soft);
  color: var(--teal-mid);
}
.parsing-file-row-error .parsing-file-icon {
  background: rgba(231, 76, 60, 0.12);
  color: var(--red);
}
.parsing-file-row-review {
  border-color: rgba(216, 156, 42, 0.5);
}
.parsing-file-row-review .parsing-file-icon {
  background: rgba(216, 156, 42, 0.12);
  color: var(--gold);
}
.parsing-file-row-review .parsing-file-type-pill {
  background: rgba(216, 156, 42, 0.12);
  color: var(--gold);
}
.parsing-file-body {
  flex: 1;
  min-width: 0;
}
.parsing-file-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.parsing-file-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  word-break: break-all;
}
.parsing-file-type-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--violet-soft);
  color: var(--ai-text, #8B5CF6);
  padding: 2px 6px;
  border-radius: var(--r-1);
}
.parsing-file-row-identifying .parsing-file-type-pill {
  background: var(--violet-soft);
  color: var(--ai-text, #8B5CF6);
  opacity: 0.7;
}
.parsing-file-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(139, 146, 200, 0.85);
}
.parsing-file-status-text {
  color: var(--meta);
  font-style: italic;
}
.parsing-file-error {
  color: var(--red);
}
.parsing-file-review {
  color: var(--gold);
}
/* Per-artifact breakdown when one file carried several documents. Violet
   is the AI/classification layer; the count is neutral, confidence muted. */
.parsing-file-artifacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.parsing-artifact-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--violet);
  background: var(--violet-soft);
  padding: 2px 7px;
  border-radius: var(--r-1);
}
.parsing-artifact-count {
  color: var(--ink);
  background: var(--paper-card);
  padding: 0 4px;
  border-radius: var(--r-1);
}
.parsing-artifact-conf {
  color: var(--meta);
}
.parsing-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: parsing-spin 0.8s linear infinite;
}
@keyframes parsing-spin {
  to { transform: rotate(360deg); }
}

.parsing-summary-banner {
  background: transparent;
  border: none;
  padding: 14px 0 8px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  margin-bottom: 8px;
}
.parsing-summary-num {
  color: var(--ai-text, #8B5CF6);
  font-weight: 500;
  font-size: 13px;
}
.parsing-summary-label {
  color: rgba(139, 146, 200, 0.85);
  margin-left: 6px;
}
.parsing-summary-sep {
  color: var(--meta);
  margin: 0 8px;
}
.parsing-summary-text {
  color: rgba(139, 146, 200, 0.85);
}

.parsing-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.parsing-modal-footer .parsing-continue {
  margin-left: auto;
}
.parsing-continue:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ── Comparison surface wireframe ─────────────────────
   Static dev-only wireframe at /dev/ux-test/comparison-mockup. */

/* When the comparison surface is on the page, widen the whole
   app-shell (header + main) so the logo and avatar/admin chrome
   anchor to the left and right edges of the grid, not to a
   narrower 960px frame. :has() is supported in all current
   browsers and falls back gracefully on older ones (page just
   stays at 960px and the grid uses the breakout fallback). */
.app-shell:has(.cmp-wrap) {
  max-width: min(1280px, calc(100vw - 32px));
}

.cmp-wrap {
  width: 100%;
  margin: 4px 0 40px;
}

/* Page header */
.cmp-header { margin-bottom: 18px; }
.cmp-header-meta { display: flex; gap: 8px; margin-bottom: 12px; }
.cmp-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-1);
  background: var(--ai-bg);
  color: var(--ai-text);
  border: 1px solid var(--violet-well);
}
.cmp-tag-muted {
  background: var(--paper-card);
  color: var(--meta);
  border-color: var(--line);
}
.cmp-title { font-size: 28px; margin: 0 0 6px; font-weight: 500; }
.cmp-subtitle { color: var(--secondary); font-size: 14px; margin-bottom: 4px; }
.cmp-source-line {
  color: var(--meta);
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
}

/* Reference fixtures band */
.cmp-fixtures {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 22px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}
.cmp-fixtures-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--meta);
  margin-right: 4px;
}
.cmp-fixture-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--r-1);
  background: var(--paper-card);
  border: 1px solid var(--line);
  color: var(--secondary);
}
.cmp-fixture-pending {
  border-color: rgba(253, 224, 115, 0.35);
  color: var(--gold);
}

/* Grid layout
   200px row label | 1fr current | 1fr alt | 160px add-another */
.cmp-grid {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--paper-card);
}
.cmp-row,
.cmp-row-header {
  display: grid;
  /* Row label | N plan columns | Add column.
     Column count comes from --cmp-cols set inline on .cmp-wrap. */
  grid-template-columns:
    180px
    repeat(var(--cmp-cols, 2), minmax(150px, 1fr))
    130px;
  border-top: 1px solid var(--line);
}
.cmp-row:first-child,
.cmp-row-header:first-child { border-top: none; }

/* Row label column (left rail) */
.cmp-row-label {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--secondary);
  background: var(--paper-card);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmp-row-label-empty { background: transparent; }
.cmp-tier-count,
.cmp-life-meta {
  color: var(--meta);
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
}

/* Header row (Plan ID block) */
.cmp-row-header { background: var(--paper-card); }
.cmp-col-head {
  padding: 12px 12px 10px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cmp-col-head-current {
  background: var(--teal-soft);
  box-shadow: inset 3px 0 0 var(--teal);
}
.cmp-col-tag {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  margin-bottom: 2px;
}
.cmp-col-head-current .cmp-col-tag { color: var(--teal-mid); }
.cmp-col-carrier { font-size: 11px; color: var(--meta); }
.cmp-col-plan {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.3;
}
.cmp-col-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.cmp-badge {
  font-size: 9px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--r-1);
  background: var(--card-hover);
  color: var(--secondary);
  border: 1px solid var(--line);
  letter-spacing: 0.04em;
}
.cmp-badge-tier {
  background: rgba(253, 224, 115, 0.12);
  color: var(--gold);
  border-color: rgba(253, 224, 115, 0.3);
}
.cmp-badge-funding {
  background: var(--teal-soft);
  color: var(--teal-mid);
  border-color: var(--teal-line);
}
.cmp-col-meta {
  font-size: 10px;
  color: var(--meta);
  margin-top: 2px;
  line-height: 1.4;
}
.cmp-mono { font-family: 'IBM Plex Mono', monospace; font-size: 10px; }

/* Add-another column */
.cmp-col-add {
  padding: 12px 8px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.cmp-add-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 72px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--r-1);
  color: var(--meta);
  font-size: 11px;
  cursor: not-allowed;
  font-family: 'IBM Plex Sans', sans-serif;
  padding: 10px 6px;
  text-align: center;
  line-height: 1.3;
}
.cmp-add-plus { font-size: 18px; line-height: 1; color: var(--secondary); }
.cmp-cell-add {
  border-right: none;
  background: transparent;
}

/* Section header bands */
.cmp-section-head {
  grid-column: 1 / -1;
  padding: 10px 12px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--meta);
  font-weight: 500;
  background: var(--paper-card);
  border-top: 1px solid var(--line);
}

/* Body cells */
.cmp-cell {
  padding: 7px 12px;
  font-size: 12px;
  color: var(--primary);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  word-break: break-word;
}
.cmp-cell:last-child { border-right: none; }
.cmp-cell-summary {
  font-size: 12px;
  line-height: 1.5;
  color: var(--secondary);
  padding: 10px 12px;
}
.cmp-cell-oon {
  color: var(--meta);
  font-size: 11px;
}
.cmp-cell-premium { flex-direction: column; align-items: flex-start; gap: 2px; }
.cmp-premium-mo { font-size: 14px; font-weight: 500; color: var(--primary); }
.cmp-premium-yr { font-size: 11px; color: var(--meta); }

/* Delta cells */
.cmp-delta {
  font-size: 12px;
  font-weight: 500;
  font-family: 'IBM Plex Mono', monospace;
}
.cmp-delta-down { color: var(--teal-mid); }
.cmp-delta-up { color: #FFA75A; }
.cmp-delta-zero { color: var(--meta); font-family: 'IBM Plex Mono', monospace; }

/* Compliance footer */
.cmp-compliance {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  font-size: 11px;
  color: var(--meta);
  line-height: 1.55;
}
.cmp-compliance-line + .cmp-compliance-line { margin-top: 4px; }
.cmp-compliance-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-style: italic;
}

/* ── Sprint 1 wireframe additions: HSA badge + per-life details ── */

.cmp-badge-hsa {
  background: var(--violet-soft);
  color: var(--ai-text);
  border-color: var(--ai-border);
}

/* Per-life rates: collapsed-by-default <details> block */
.cmp-perlife {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--paper-card);
  overflow: hidden;
}
.cmp-perlife-summary {
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  user-select: none;
  outline: none;
}
.cmp-perlife-summary::-webkit-details-marker { display: none; }
.cmp-perlife-summary::marker { display: none; content: ''; }
.cmp-perlife-toggle {
  font-size: 13px;
  color: var(--teal-mid);
  font-weight: 500;
}
.cmp-perlife-toggle::before {
  content: '▸ ';
  font-size: 10px;
  margin-right: 4px;
  display: inline-block;
  transition: transform 0.15s;
}
.cmp-perlife[open] .cmp-perlife-toggle::before { transform: rotate(90deg); }
.cmp-perlife-meta {
  font-size: 12px;
  color: var(--meta);
  flex: 1;
  min-width: 200px;
}
.cmp-perlife[open] .cmp-perlife-summary { border-bottom: 1px solid var(--line); }

.cmp-grid-perlife {
  border: none;
  border-radius: 0;
  background: transparent;
}
.cmp-row-perlife-head { background: var(--paper-card); }
.cmp-col-perlife-head {
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
  border-right: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
}

/* Stack name + relationship-meta vertically inside the per-life row label */
.cmp-row-label > div + div.cmp-life-meta {
  margin-top: 2px;
  display: block;
}

/* ── Sprint 1 wireframe: P0 multi-axis match indicators ──────────
   Match score block, axis breakdown chips, network access pills,
   AV row, per-cell differs indicator. Surfaces what P0's
   find_similar_plans() output looks like in the comparison surface.
*/

/* Match score block */
.cmp-match {
  margin: 6px 0 8px;
  padding: 8px 10px;
  background: var(--violet-soft);
  border: 1px solid var(--violet-well);
  border-radius: var(--r-1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmp-match-score-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cmp-match-score {
  font-size: 18px;
  font-weight: 500;
  color: var(--ai-text);
  font-family: 'IBM Plex Mono', monospace;
}
.cmp-match-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--meta);
}
.cmp-match-pill {
  margin-left: auto;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: var(--r-1);
  font-weight: 500;
}
.cmp-match-confirmed {
  background: var(--teal-soft);
  color: var(--teal-mid);
  border: 1px solid var(--teal-line);
}
.cmp-match-verify {
  background: rgba(253, 224, 115, 0.12);
  color: var(--gold);
  border: 1px solid rgba(253, 224, 115, 0.3);
}
.cmp-match-axes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--secondary);
}
.cmp-match-axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0;
  background: var(--paper-card);
  border-radius: var(--r-1);
}
.cmp-match-axis b {
  color: var(--meta);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.05em;
}
.cmp-match-why {
  font-size: 10px;
  color: var(--meta);
  font-style: italic;
}

/* Network access pills */
.cmp-access-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  letter-spacing: 0.02em;
}
.cmp-access-broad {
  background: var(--teal-soft);
  color: var(--teal-mid);
  border-color: var(--teal-line);
}
.cmp-access-standard {
  background: var(--card-hover);
  color: var(--secondary);
  border-color: var(--line);
}
.cmp-access-narrow {
  background: rgba(255, 167, 90, 0.1);
  color: #FFA75A;
  border-color: rgba(255, 167, 90, 0.3);
}
.cmp-access-varies {
  background: var(--violet-soft);
  color: var(--ai-text);
  border-color: var(--violet-well);
}
.cmp-reach-state-only {
  background: var(--paper-card);
  color: var(--meta);
  border-color: var(--line);
}
.cmp-reach-multi-state {
  background: rgba(253, 224, 115, 0.1);
  color: var(--gold);
  border-color: rgba(253, 224, 115, 0.3);
}
.cmp-reach-nationwide {
  background: var(--teal-soft);
  color: var(--teal-mid);
  border-color: var(--teal-line);
}
.cmp-reach-varies {
  background: var(--violet-soft);
  color: var(--ai-text);
  border-color: var(--violet-well);
}

/* AV row formatting */
.cmp-av-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
}
.cmp-av-delta {
  margin-left: 6px;
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
}
.cmp-av-richer { color: var(--teal-mid); }
.cmp-av-thinner { color: #FFA75A; }

/* Per-cell differs indicator: subtle left-edge accent */
.cmp-cell-differs {
  box-shadow: inset 2px 0 0 var(--ai-border);
}

/* ── Sprint 1 wireframe: row-based match section + sticky current ──
   Match data lives as labeled rows in the body, not in the column
   header. Composite row is the default active sort. Library-shelf
   metaphor: current plan is sticky at the left edge; alternatives
   extend right; horizontal scroll for the full shelf.
*/

/* Force the grid to be wider than the viewport so the shelf scrolls.
   With 4 plans the grid is comfortable at ~1100px; bumping min-width
   to 1500px ensures the horizontal scroll is visible even before
   we add more alternatives. */
.cmp-grid {
  min-width: 1500px;
  position: relative;
}
.cmp-wrap {
  overflow-x: auto;
}

/* Sticky leftmost two cells (row label + current plan) so the
   anchor stays visible while the broker scrolls right through
   the shelf. The row label sits at left=0; the current cell sits
   at left=180px (immediately after the label). */
.cmp-row-label {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--paper-card);
}
.cmp-row > .cmp-cell:first-of-type,
.cmp-col-head:first-of-type,
.cmp-col-perlife-head:first-of-type {
  position: sticky;
  left: 180px;
  z-index: 2;
  background: var(--paper-card);
}
.cmp-row > .cmp-cell:first-of-type.cmp-cell-summary {
  background: var(--paper-card);
}
/* Section heads span the full grid width but should still scroll
   horizontally with the body, so they don't get sticky. */

/* Match section header gets a slightly stronger accent to mark it
   as the primary signal section. */
.cmp-section-head-match {
  color: var(--ai-text);
  background: var(--violet-soft);
  border-top: 1px solid var(--violet-soft);
  border-bottom: 1px solid var(--violet-soft);
}

/* Active sort row: subtle left-edge accent, slightly raised
   background to pull the eye. The composite row carries this
   class by default; clicking another row's label (P1) moves
   the marker. */
.cmp-row-active-sort .cmp-row-label,
.cmp-row-active-sort .cmp-cell {
  background: var(--teal-soft);
}
.cmp-row-active-sort .cmp-row-label {
  box-shadow: inset 3px 0 0 var(--teal);
}
.cmp-sort-marker {
  color: var(--teal-mid);
  font-size: 9px;
  margin-right: 4px;
  vertical-align: middle;
}

/* Axis hint: small monospace help text under the axis label */
.cmp-axis-hint {
  display: block;
  font-size: 10px;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 2px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
}

/* Match cells (per-column score values in match rows) */
.cmp-cell-match {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmp-match-score-inline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--ai-text);
}
.cmp-match-anchor {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
}

/* Tweak row-label so it can stack the axis label + axis hint */
.cmp-row > .cmp-row-label {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

/* ── Match section: accordion + AI-intelligence violet styling ──
   Composite row is clickable to toggle the four sub-axis rows.
   Sub-axis rows hidden until expanded. The AI violet color signals
   that the match data is Routive's intelligent comparison output,
   distinct from raw plan attributes. */

[x-cloak] { display: none !important; }

/* Composite row is clickable. Hover state and pointer cursor
   communicate affordance. */
.cmp-row-composite-toggle {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s;
}
.cmp-row-composite-toggle:hover .cmp-row-label,
.cmp-row-composite-toggle:hover .cmp-cell {
  background: var(--violet-soft);
}
.cmp-row-composite-toggle:hover .cmp-row-label {
  /* Preserve the active-sort left-edge accent on hover */
  box-shadow: inset 3px 0 0 var(--teal);
}

/* Disclosure caret: subtle violet, rotates 90deg when accordion
   is open. */
.cmp-disclosure {
  display: inline-block;
  font-size: 11px;
  color: var(--ai-text);
  margin-right: 2px;
  transition: transform 0.15s ease;
  width: 10px;
  text-align: center;
}
.cmp-disclosure-open {
  transform: rotate(90deg);
}

/* Axis rows (the four sub-scores under composite). Slight inset
   so they read as nested under the composite row. Violet wash
   on the row label to mark them as match-section sub-rows. */
.cmp-row-axis .cmp-row-label {
  background: var(--violet-soft);
  padding-left: 28px;  /* indent under disclosure caret */
}
.cmp-row-axis .cmp-cell {
  background: var(--violet-soft);
}
.cmp-row-axis .cmp-row-label,
.cmp-row-axis .cmp-cell {
  border-top: 1px solid var(--violet-soft);
}

/* Plan richness (AV) row sits below the accordion. Stronger
   violet treatment because absolute AV is a primary plan-comparison
   signal, not a sub-axis. Match section as a whole carries the
   AI violet identity. */
.cmp-row-av-absolute .cmp-row-label,
.cmp-row-av-absolute .cmp-cell {
  background: transparent;
}

/* Compress section-head-match background so the match section
   reads as a single colored band from header to AV row. */
.cmp-section-head-match {
  border-bottom: none;
}

/* ── Composite row affordance: no caret, action text + hover ────
   Drops the unicode caret. Composite row uses three signals to
   communicate clickability: cursor pointer, hover background
   lift (already in cmp-row-composite-toggle:hover), and a
   right-justified action label that switches between 'Show
   breakdown' and 'Hide breakdown'. */

/* Stack the action pill below the label text instead of beside it.
   Side-by-side fought for horizontal space and forced the row label
   to wrap onto three lines in the 180px rail. Stacking gives the
   label full width and keeps the pill compact below. */
.cmp-row-label-with-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}
.cmp-row-label-with-action .cmp-row-label-text {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmp-row-action {
  font-size: 9px;
  color: var(--ai-text);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--violet-well);
  border-radius: var(--r-1);
  background: var(--violet-soft);
  white-space: nowrap;
  flex-shrink: 0;
}
.cmp-row-composite-toggle:hover .cmp-row-action {
  background: var(--violet-soft);
  border-color: var(--ai-border);
}

/* Hide the old caret rule effects since we removed the element */
.cmp-row-composite-toggle .cmp-disclosure { display: none; }

/* ── Case management list view ─────────────────────────────
   Lifted from design hand-off (Case Management v2.html, May 2026).
*/

.case-list-page-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 22px; gap: 24px;
}
.case-list-page-header h1 {
  font-size: 26px; font-weight: 500; margin: 0; color: var(--primary);
}
.case-list-page-header-meta {
  font-size: 13px; color: var(--meta);
  font-family: 'IBM Plex Mono', monospace; margin-top: 6px;
}

.case-list-filter-bar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.case-list-pills {
  display: inline-flex;
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 3px; gap: 2px;
}
.case-list-pill {
  padding: 6px 12px; background: transparent; border: 0;
  color: var(--meta); font-family: inherit; font-size: 13px; font-weight: 500;
  border-radius: var(--r-1); cursor: pointer; transition: all 0.12s;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.case-list-pill:hover { color: var(--secondary); }
.case-list-pill.is-active {
  background: var(--teal-soft); color: var(--teal-mid);
}
.case-list-pill-count {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: inherit; opacity: 0.7;
}
.case-list-pill.is-active .case-list-pill-count { opacity: 0.9; }

.case-list-search { flex: 1; min-width: 220px; position: relative; }
.case-list-search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--meta); pointer-events: none;
}
.case-list-search input {
  width: 100%; background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 9px 12px 9px 34px;
  color: var(--primary); font-family: inherit; font-size: 14px;
  outline: none; transition: border-color 0.18s;
}
.case-list-search input::placeholder { color: var(--meta); }
.case-list-search input:focus { border-color: var(--teal-mid); }

.case-list-sort {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--meta); font-size: 13px;
}
.case-list-sort select {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 8px 32px 8px 12px;
  color: var(--primary); font-family: inherit; font-size: 13px;
  outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='%23f2f2f1' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.case-list-sort select:focus { border-color: var(--teal-mid); }

.case-list {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--r-2); overflow: hidden;
}

.case-list-row {
  position: relative; display: grid;
  grid-template-columns: 12px minmax(380px, 2.2fr) minmax(220px, 1.3fr) 64px 24px 16px;
  gap: 18px; align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background 0.12s;
}
.case-list-row:first-child { border-top: 0; }
.case-list-row:hover { background: var(--card-hover); }

/* Hover-revealed action buttons (archive, delete). Absolute-positioned
   to the row's right edge. Avatar and chevron fade out on hover so
   the actions occupy that space cleanly without overlapping the
   broker initials. */
.case-list-row-actions {
  position: absolute;
  right: 20px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s;
  z-index: 5;
}
.case-list-row:hover .case-list-row-actions {
  opacity: 1; pointer-events: auto;
}
.case-list-row .owner-avatar,
.case-list-row .case-list-row-chevron {
  transition: opacity 0.12s;
}
/* On hover, fade out the chevron so the actions can occupy the
   right edge cleanly. Avatar is hidden entirely in single-broker
   view (template-level conditional), so no avatar fade needed. */
.case-list-row:hover .case-list-row-chevron {
  opacity: 0;
}
.case-list-row-actions form {
  display: inline-flex; margin: 0; padding: 0;
}
.case-list-row-action {
  width: 28px; height: 28px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  color: var(--meta);
  border-radius: var(--r-1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.12s;
  padding: 0;
}
.case-list-row-action:hover {
  color: var(--teal-mid);
  border-color: var(--teal-mid);
  background: var(--teal-soft);
}
.case-list-row-action.case-list-row-action-danger:hover {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-bg);
}

.case-list-row-flag {
  width: 6px; height: 6px; border-radius: 50%; background: transparent;
}
.case-list-row.has-error .case-list-row-flag {
  background: var(--red); box-shadow: 0 0 0 3px rgba(214, 95, 95, 0.18);
}
.case-list-row.is-stale .case-list-row-flag {
  background: var(--stale-amber); box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.18);
}
.case-list-row-flag-wrap {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
}
.case-list-row-flag-wrap .tip {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 6px 10px;
  font-size: 11px; color: var(--secondary);
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.12s; z-index: 30;
  box-shadow: var(--shadow-pop);
}
.case-list-row-flag-wrap:hover .tip { opacity: 1; }

/* Inbox icon stacked in the flag column when a row has new mail */
.row-inbox {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: var(--teal-mid);
  position: relative;
}
.row-inbox svg { display: block; }
.row-inbox .tip {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 6px 10px;
  font-size: 11px; color: var(--secondary);
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.12s;
  z-index: 30; box-shadow: var(--shadow-pop);
}
.row-inbox:hover .tip { opacity: 1; }

.case-list-row-id { min-width: 0; }
.case-list-row-l1 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.case-list-row-name {
  font-size: 15px; font-weight: 500; color: var(--primary); line-height: 1.25;
}
.case-type-pill {
  display: inline-flex; align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-1);
  background: var(--card-hover); color: var(--meta);
}

.funding-badge {
  display: inline-flex; align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.funding-badge.is-active {
  background: var(--teal-soft);
  color: var(--teal-mid);
  border-color: var(--teal-line);
  font-weight: 500;
}
.funding-badge.is-muted {
  background: var(--paper-card);
  color: var(--meta);
  border-color: var(--line);
}

.carrier-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.carrier-chip {
  display: inline-flex; align-items: center;
  font-size: 11.5px; color: var(--secondary);
  background: var(--paper-card);
  border: 1px solid var(--line);
  padding: 2px 8px; border-radius: var(--r-1);
  white-space: nowrap;
}
.carrier-chip.is-pending { color: var(--meta); font-style: italic; }
.carrier-chip-more {
  color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

.case-list-row-l2 {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; color: var(--meta);
}
.case-list-row-l2 > * + *::before {
  content: "·"; margin-right: 14px; color: var(--meta);
}
.case-list-row-l2 > .l2-eff.is-soon::before,
.case-list-row-l2 > .l2-eff.is-overdue::before {
  content: ""; margin-right: 0;
}
.l2-id {
  color: var(--teal-mid); letter-spacing: 0.04em;
  white-space: nowrap;
}
.l2-eff { color: var(--secondary); white-space: nowrap; }
.l2-eff.is-soon {
  color: var(--gold);
  background: rgba(253, 224, 115, 0.10);
  padding: 1px 7px;
  border-radius: var(--r-1);
}
.l2-eff.is-overdue {
  color: var(--red);
  background: var(--red-bg);
  padding: 1px 7px;
  border-radius: var(--r-1);
}

.case-list-row-phase {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.case-list-row-phase-text {
  display: flex; flex-direction: column; gap: 1px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.case-list-row-phase-arc {
  color: var(--teal-mid); font-weight: 500; font-size: 10.5px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.case-list-row-phase-step {
  color: var(--secondary); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case-list-row.has-error .case-list-row-phase-arc { color: var(--red); }

.case-list-strip { display: flex; align-items: center; gap: 4px; }
.case-list-strip-seg {
  position: relative; width: 28px; height: 6px; border-radius: var(--r-1);
  background: transparent;
  border: 1px solid var(--line);
  cursor: default;
}
.case-list-strip-seg.is-done {
  background: var(--forest-bright); border-color: var(--forest-bright);
}
.case-list-strip-seg.is-current {
  /* Teal fill + 2px teal border carries the "current" signal.
     No violet glow — violet is reserved for AI attribution per §6. */
  background: var(--teal);
  border: 2px solid var(--teal);
}
.case-list-strip-seg.is-error {
  background: var(--red);
  border-color: var(--red);
}
.case-list-strip-seg .tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 8px 10px; min-width: 160px;
  box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none; transition: opacity 0.12s;
  z-index: 20; text-align: left;
}
.case-list-strip-seg:hover .tip { opacity: 1; }
.case-list-strip-seg .tip-arc {
  font-size: 12px; color: var(--primary); font-weight: 500; margin-bottom: 2px;
}
.case-list-strip-seg .tip-phases {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--meta); line-height: 1.45; white-space: normal;
}

.case-list-row-time {
  font-size: 12px; color: var(--meta);
  font-family: 'IBM Plex Mono', monospace;
  text-align: right; white-space: nowrap;
}

.owner-avatar {
  position: relative;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-mid, #229180), var(--forest, #1c3a2e));
  color: var(--primary);
  font-size: 10px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  border: 1px solid var(--line);
}
.owner-avatar .tip {
  position: absolute; right: 110%; top: 50%; transform: translateY(-50%);
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 6px 10px;
  font-size: 11px; color: var(--secondary);
  font-family: 'IBM Plex Mono', monospace; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 20;
  box-shadow: var(--shadow-pop);
}
.owner-avatar:hover .tip { opacity: 1; }

.case-list-row-chevron {
  color: var(--meta); transition: color 0.15s, transform 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.case-list-row:hover .case-list-row-chevron {
  color: var(--teal-mid); transform: translateX(2px);
}

.case-list-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 0; margin-top: 4px;
  color: var(--meta); font-size: 13px;
}
.case-list-pagination-center {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
}
.case-list-pagination-btn {
  background: transparent; border: 1px solid var(--line);
  color: var(--secondary); padding: 6px 14px; border-radius: var(--r-1);
  cursor: pointer; font-family: inherit; font-size: 13px;
  transition: all 0.12s; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.case-list-pagination-btn:hover {
  background: var(--card-hover); border-color: var(--teal-line);
  color: var(--primary);
}
.case-list-pagination-btn.is-disabled {
  opacity: 0.4; pointer-events: none;
}

/* Empty states */
.case-list-empty {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 56px 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.case-list-empty-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-mid); margin-bottom: 4px;
}
.case-list-empty h2 { font-size: 18px; font-weight: 500; color: var(--primary); margin: 0; }
.case-list-empty p { font-size: 14px; color: var(--meta); margin: 0; max-width: 360px; }
.case-list-empty-actions { margin-top: 8px; }
.case-list-empty-inline {
  padding: 48px 32px; text-align: center;
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--r-2);
}
.case-list-empty-inline h2 { font-size: 16px; font-weight: 500; margin: 0 0 6px; color: var(--primary); }
.case-list-empty-inline p { font-size: 13px; color: var(--meta); margin: 0 0 14px; }
.case-list-empty-line {
  padding: 28px 24px; text-align: left;
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--r-2);
  color: var(--meta); font-size: 14px; font-style: italic;
}

/* Inbox popover (header bell dropdown) */
.inbox-wrapper { position: relative; }
.inbox-btn { position: relative; }
.inbox-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--teal-mid); color: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; line-height: 16px;
  text-align: center; font-weight: 500;
  box-shadow: 0 0 0 2px var(--paper-card);
}
.inbox-item-list { max-height: 340px; overflow-y: auto; padding-top: 4px; }
.inbox-item-new { border-left: 2px solid var(--teal-mid); }
.inbox-item-addr {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  color: var(--teal-mid); margin-top: 3px; letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-popover {
  position: absolute; top: 44px; right: 0;
  width: 380px; background: var(--paper-card);
  border: 1px solid var(--line); border-radius: var(--r-2);
  box-shadow: var(--shadow-pop);
  z-index: 40; padding: 10px; display: none;
}
.inbox-popover.is-open { display: block; }
.inbox-popover-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--line);
}
.inbox-popover-title { font-size: 13px; color: var(--primary); font-weight: 500; }
.inbox-popover-meta {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--meta);
}
.inbox-item {
  display: block; text-decoration: none; color: inherit;
  padding: 10px 8px; border-radius: var(--r-1);
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.inbox-item + .inbox-item { margin-top: 2px; }
.inbox-item:hover { background: var(--card-hover); border-color: var(--teal-line); }
.inbox-item-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.inbox-item-from { font-size: 13px; color: var(--primary); font-weight: 500; }
.inbox-item-time { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--meta); }
.inbox-item-subj {
  font-size: 12px; color: var(--secondary); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.inbox-item-case {
  margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  color: var(--teal-mid); letter-spacing: 0.04em;
}
.inbox-popover-foot {
  border-top: 1px solid var(--line);
  margin-top: 6px; padding: 8px 4px 2px;
  text-align: center;
}
.inbox-popover-foot a {
  font-size: 12px; color: var(--teal-mid);
  font-family: 'IBM Plex Mono', monospace;
}

/* ── PEO directional range bar (soft-violet AI palette) ────────── */
.peo-range-bar {
  position: relative;
  height: 8px;
  margin-top: 6px;
  background: var(--ai-bg);
  border-radius: 4px;
  overflow: visible;
}
.peo-range-bar-fill {
  position: absolute;
  top: 0;
  left: var(--range-low-pct, 0%);
  right: calc(100% - var(--range-high-pct, 100%));
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--ai-text) 0%,
    var(--ai) 100%
  );
  border-radius: 4px;
  opacity: 0.85;
}
.peo-range-bar-point {
  position: absolute;
  top: -3px;
  left: var(--range-point-pct, 50%);
  transform: translateX(-50%);
  width: 2px;
  height: 14px;
  background: var(--ai);
  box-shadow: 0 0 6px var(--ai-glow);
}

/* ── Total Annual Investment row (teal-soft anchor) ────────────── */
.cmp-section-head-total {
  background: rgba(63, 207, 195, 0.10);
  color: var(--teal);
  border-top: 1px solid rgba(63, 207, 195, 0.25);
}
.cmp-row-total {
  background: rgba(63, 207, 195, 0.04);
  border-top: 1px solid rgba(63, 207, 195, 0.15);
}
.cmp-cell-total {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  font-size: 13px;
  color: var(--primary);
}
.cmp-cell-total strong {
  font-size: 14px;
  font-weight: 500;
}
.cmp-total-deltas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--meta);
}
.cmp-total-delta-down { color: var(--forest-bright); }
.cmp-total-delta-up { color: var(--red); }

/* ── Comparison readiness panel ────────────────────────────────── */
.readiness-panel {
  margin: 18px 0 6px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
.readiness-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.readiness-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.readiness-pill-dot { font-size: 10px; line-height: 1; }
.readiness-pill-ready {
  color: var(--forest-bright);
  background: rgba(10, 138, 102, 0.10);
  border: 1px solid rgba(10, 138, 102, 0.30);
}
.readiness-pill-directional {
  color: var(--warm-gold);
  background: var(--gold-tint);
  border: 1px solid rgba(255, 187, 51, 0.35);
}
.readiness-panel-note {
  flex: 1;
  font-size: 12px;
  color: var(--secondary);
  line-height: 1.5;
}
.readiness-unlock-toggle {
  background: transparent;
  border: 0;
  color: var(--teal);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
}
.readiness-unlock-toggle:hover { color: var(--teal-hover); }
.readiness-unlock-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}
.readiness-unlock-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.readiness-unlock-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--secondary);
}
.readiness-unlock-state {
  font-size: 12px;
  color: var(--meta);
  width: 18px;
  flex: 0 0 18px;
  padding-top: 1px;
}
.readiness-unlock-body { flex: 1; }
.readiness-unlock-label {
  font-weight: 500;
  color: var(--primary);
  font-size: 13px;
  margin-bottom: 2px;
}
.readiness-unlock-meta {
  font-size: 11px;
  color: var(--meta);
  margin-bottom: 3px;
}
.readiness-unlock-scope {
  font-size: 12px;
  color: var(--secondary);
  line-height: 1.5;
}

/* ── Household-link broker callout (gap-fill page) ─────────────── */
.household-link-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  margin: 18px 0 8px;
  background: var(--gold-tint);
  border: 1px solid rgba(255, 187, 51, 0.45);
  border-radius: 10px;
}
.household-link-callout-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--warm-gold);
  flex-shrink: 0;
  padding-top: 2px;
}
.household-link-callout-body { flex: 1; }
.household-link-callout-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--warm-gold);
  letter-spacing: 0.01em;
}
.household-link-callout-lede {
  margin: 4px 0 10px;
  font-size: 13px;
  color: var(--secondary);
  line-height: 1.5;
}
.household-link-callout-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.household-link-callout-item {
  font-size: 13px;
  color: var(--secondary);
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--warm-gold);
}
.household-link-callout-item strong { color: var(--primary); }
.household-link-callout-warn { border-left-color: var(--red); }
.household-link-callout-info { border-left-color: var(--gold); }

/* ── Household-tie confirmation toggle (employee edit form) ────── */
.census-household-confirm {
  margin: 12px 0 8px;
  padding: 10px 12px;
  background: var(--gold-tint);
  border-left: 3px solid var(--warm-gold);
  border-radius: 4px;
}
.census-household-confirm-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 12px;
  color: var(--secondary);
  line-height: 1.5;
}
.census-household-confirm-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.census-household-confirm-text strong {
  color: var(--primary);
  font-weight: 500;
}

/* ── Dependent-load: census-derived default treatment ──────────── */
/* Soft-violet AI palette signals the value came from inferred /
   parsed data, matching the comparison surface's range bar. */
.dep-mix-source-census {
  color: var(--ai-text);
  font-weight: 500;
}
.dep-mix-source-census .dep-mix-source-pct {
  color: var(--meta);
  font-weight: 400;
  margin-left: 4px;
}

/* ── Dep-load implied count caption (under each tier card) ────── */
.age-cell-implied {
  margin-top: 8px;
  font-size: 11px;
  color: var(--meta);
  letter-spacing: 0.01em;
}
.age-cell-implied span {
  color: var(--secondary);
  font-weight: 500;
}

/* ── Recommendation card: Current/Renewal baseline rows ─────────── */
.score-breakdown-row-baseline {
  border-top: 1px solid var(--divider);
  padding-top: 6px;
  margin-top: 4px;
}
.rec-delta {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
}
.rec-delta-down { color: var(--forest-bright); }
.rec-delta-up { color: var(--red); }
.rec-delta-flat { color: var(--meta); }

/* ── Recommendation card: divider between projection and baseline ── */
/* Spans both grid columns so the rule reaches edge-to-edge under the
   projection rows and above the baseline rows. */
.rec-pricing-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--divider);
  margin: 4px 0;
}


/* ═════════════════════════════════════════════════════════════
   Broker brandmark (Phase 0 of submission-flow rebuild)
   Renders the uploaded broker logo on client-facing surfaces
   (Client Workshop, Documents, Submission cover). Text-wordmark
   fallback when no logo is set.
   ═════════════════════════════════════════════════════════════ */
.broker-brandmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.broker-brandmark-img {
  display: block;
  max-width: 100%;
  object-fit: contain;
}
.broker-brandmark-text {
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.1;
}
.broker-brandmark-routive {
  font: 500 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 2px;
}
.broker-brandmark-co .broker-brandmark-routive { display: inline-block; }


/* ═════════════════════════════════════════════════════════════
   App header in Client Workshop mode (white-label co-brand)
   The broker brandmark replaces the Routive logo at the top of
   the page. "Powered by Routive" reduces Routive presence to a
   small caption. Avatar / gear / mail icons stay for broker
   controls.
   ═════════════════════════════════════════════════════════════ */
.app-header-cobrand-broker {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-right: 18px;
}
.app-header-cobrand-logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: 260px;
}
.app-header-cobrand-wordmark {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.app-header-cobrand-routive {
  font: 500 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.app-header-back {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-left: 4px;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.app-header-back:hover {
  border-color: var(--teal);
  color: var(--teal);
}


/* ─── Nav click-feedback (nav_loading.js) ───────────────────────
   Buttons / links with data-loading-text swap content for a spinner
   + status message on click. Slow internal navs (Plan Prep matching,
   submission packet rendering) use this so the broker sees progress
   instead of a frozen-looking button. */

@keyframes nav-loading-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.nav-loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: nav-loading-spin 0.7s linear infinite;
}

.nav-loading-text {
  vertical-align: middle;
}

a.is-loading,
button.is-loading {
  cursor: progress;
  opacity: 0.85;
}

/* ── Lifecycle strip v2: every phase + every step visible ──
   Renders 4 phase columns side by side. Each column lists its full
   step set inline with the current step highlighted, past + visited-
   future steps clickable, unreached steps grayed. See
   _lifecycle_strip.html for state derivation. */
.lifecycle-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
  padding: 4px 0;
}
.lifecycle-strip-grid .phase-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 14px 16px 12px;
  /* Persistent teal top-accent rail (matches the welcome journey
     cards and the broader card identity). Current phase intensifies. */
  box-shadow: var(--shadow-card), inset 0 3px 0 var(--line-2);
}
.lifecycle-strip-grid .phase-card-current {
  box-shadow: var(--shadow-card), inset 0 3px 0 var(--teal);
  border-color: var(--teal-line);
}
.lifecycle-strip-grid .phase-card-name {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.lifecycle-strip-grid .phase-card-current .phase-card-name {
  color: var(--ink);
}

.lifecycle-strip-grid .phase-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lifecycle-strip-grid .phase-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lifecycle-strip-grid .phase-step-marker {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  font-size: 12px;
}
.lifecycle-strip-grid .phase-step-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lifecycle-strip-grid .phase-step-link {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.lifecycle-strip-grid .phase-step-link:hover .phase-step-name {
  text-decoration: underline;
  text-decoration-color: var(--teal-mid);
  text-underline-offset: 3px;
}
.lifecycle-strip-grid .phase-step-static {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  cursor: default;
  color: inherit;
}

/* State colors — one row per step state. */
.lifecycle-strip-grid .phase-step-current .phase-step-marker { color: var(--teal); }
.lifecycle-strip-grid .phase-step-current .phase-step-name {
  color: var(--ink);
  font-weight: 500;
}

.lifecycle-strip-grid .phase-step-past .phase-step-marker { color: var(--teal-mid); }
.lifecycle-strip-grid .phase-step-past .phase-step-name { color: var(--ink-soft); }

.lifecycle-strip-grid .phase-step-visited-future .phase-step-marker { color: var(--ink-mute); }
.lifecycle-strip-grid .phase-step-visited-future .phase-step-name { color: var(--ink-soft); }

.lifecycle-strip-grid .phase-step-unreached .phase-step-marker { color: var(--line); }
.lifecycle-strip-grid .phase-step-unreached .phase-step-name { color: var(--ink-mute); }
.lifecycle-strip-grid .phase-step-unreached {
  cursor: default;
  opacity: 0.55;
}

@media (max-width: 760px) {
  .lifecycle-strip-grid {
    grid-template-columns: 1fr;
  }
}

/* AV-visibility toggle (admin "Show AV (dev)"). Lives in brand.css
   because that is the one stylesheet base.html loads on every page
   (comparison, plan prep, workshop). Default shows AV. When the broker
   flips the toggle off (data-show-av="off" on <html>), hide the
   plan-richness AV value, the AV-similarity axis, and the "Plan richness"
   sort option so AV disappears everywhere it surfaces when the plan shape
   makes the computed value untrustworthy. */
html[data-show-av="off"] .cmp-row-av-absolute,
html[data-show-av="off"] .cmp-row-axis[data-sort-axis="av"],
html[data-show-av="off"] .av-sort-opt {
  display: none;
}

/* ── Keep/Grow book linkage (KEEP_GROW_BUILD_PLAN.md) ──────────────
   The intake Step 0 live-match block and the case-header linkage chip.
   Neutral/outline treatments: teal only on the interactive affordances
   (link actions), never on the state chips themselves. */
.book-match-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--paper-well); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.book-match-ask {
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--paper-card);
  padding: 10px 12px; font-size: 13px; color: var(--ink-soft);
}
.book-match-q { margin-right: 10px; color: var(--ink); }
.book-match-opt {
  display: inline-flex; align-items: center;
  font-size: 12px; padding: 3px 10px; margin-right: 6px;
  border-radius: var(--r-pill); cursor: pointer;
  background: var(--paper-card); color: var(--teal-mid);
  border: 1px solid var(--teal-line);
}
.book-match-opt:hover { background: var(--teal-soft); }
.book-match-note { font-size: 12px; color: var(--meta); margin-top: 6px; }
.book-match-undo {
  background: none; border: none; padding: 0; margin-left: 8px;
  font-size: 12px; color: var(--teal-mid); cursor: pointer;
  text-decoration: underline;
}

/* Case-header linkage chip: "Client · <name>" vs "Prospect · Link to
   book", fixable from any screen. */
.book-link-chip-wrap { position: relative; display: inline-flex; }
.book-link-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--paper-well); color: var(--ink-soft);
  border: 1px solid var(--line); cursor: pointer;
}
.book-link-chip summary { list-style: none; cursor: pointer; }
.book-link-chip summary::-webkit-details-marker { display: none; }
.book-link-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 240px; padding: 10px 12px;
  background: var(--paper-pop); border: 1px solid var(--line-2);
  border-radius: var(--r-1); box-shadow: 0 8px 24px rgba(0,0,0,.14);
  font-size: 12px; color: var(--ink-soft); text-transform: none;
  letter-spacing: normal; font-family: inherit;
}
.book-link-pop .book-match-opt { margin-top: 6px; }
.book-link-pop form { margin: 0; }

/* Place-time Add-to-book offer card (Keep/Grow step 4). Inline card,
   never a modal. Hidden in print: the proposal is client-ready. */
.book-promotion-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: var(--paper-card); border: 1px solid var(--line);
  border-left: 3px solid var(--teal); border-radius: var(--r-2);
  padding: 14px 18px; margin-bottom: 18px;
}
.book-promotion-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px;
}
.book-promotion-title { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.book-promotion-sub { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; }
.book-promotion-actions { display: inline-flex; align-items: center; gap: 12px; }
.book-promotion-actions form { margin: 0; }
.book-promotion-dismiss {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12.5px; color: var(--ink-mute); text-decoration: underline;
}
@media print { .book-promotion-card { display: none; } }

/* ── SBC download affordance (comparison spines) ──────────────────
   Quiet underlined text link on the column spine, under the network
   meta line. Teal = interactive layer; the empty state teaches at
   --ink-mute and is never a dead link. Shared partial: _sbc_link.html.
   Screen-only: print/export surfaces omit the include entirely. */
.sbc-link {
  display: inline-block; margin-top: 3px;
  font-family: var(--mono); font-size: 11px;
  color: var(--teal); text-decoration: underline;
  text-underline-offset: 2px;
}
.sbc-link:hover { color: var(--teal-deep); }
.sbc-link-empty {
  margin-top: 3px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute);
}
@media print { .sbc-link, .sbc-link-empty, .cmp-row-sbc, .cmp-row-appointment { display: none; } }

/* ── Appointment status row (comparison grids) ────────────────────
   Replaces the spine's Get-appointment button (2026-07-22 ruling).
   Plain statuses read quiet; the not-appointed CTA is a gold
   underlined text link (attention layer), never a button. */
.cmp-appt-ok {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft);
}
.cmp-appt-none {
  font-family: var(--mono); font-size: 11px;
  color: var(--gold); text-decoration: underline;
  text-underline-offset: 2px;
}
@media print { .cmp-appt-ok, .cmp-appt-none { display: none; } }