/* =============================================================================
   LiteLedger Design System — Dark (default) + Light variants (opt-in via data-theme)
   Loaded by index.html (the Vue SPA) only.
   landing.html and teaser.html carry their own self-contained styles — the
   light-mode opt-in lives in the authenticated SPA, not marketing pages.

   Themes:
     (none)              — Dark, LiteLedger amber  (default)
     [data-theme=light]  — Light, LiteLedger cream + amber
     [data-theme=litellm] — Light, LiteLLM-flavored slate + blue (mimics the
                            native LiteLLM proxy admin UI). Reuses the cream-light
                            override selectors for any rule whose value is just a
                            standard Tailwind tint.
   ============================================================================= */

/* ── Design tokens (dark — default) ────────────────────────────────────────── */
:root {
  --workspace-wide-max: 160rem;
  --workspace-reading-measure: 72ch;
  --bg:           #0a0908;
  --surface:      #141210;
  --surface2:     #1c1915;
  --border:       rgba(240,235,224,0.10);
  --border-strong:rgba(240,235,224,0.18);
  --text:         #f0ebe0;
  --text-muted:   #8a8278;
  --text-dim:     #4d4840;
  --amber:        #d4901a;
  --amber-light:  #f0b84a;
  /* Brand mark gold — always the original LiteLedger gold across all themes,
     even when the per-theme accent (--amber / --amber-light) is overloaded
     to a different hue (e.g. blue under the LiteLLM themes). Defined once at
     :root with no per-theme overrides so the wordmark stays on-brand. */
  --brand-amber: #d4901a;
  --brand-amber-light: #f0b84a;
  --green:        #52a876;
  --red:          #c94040;
  --orange:       #c4703a;
  /* Categorical "channel" palette — muted, warm-dark-harmonized hues for
     CATEGORY IDENTITY (not status), so a series colour never reads as
     "healthy / error / warning" the way the semantic trio above does. Same
     hues as the inference-activity reactor's --rx-* set; promoted to :root so
     other multi-category surfaces (Reports → Friction) can reuse them. See
     docs/design/design-system.md → Data visualization. Defined once at :root
     with no per-theme overrides — they read acceptably on cream too. */
  --ch-gold:  #cf9b3f;
  --ch-blue:  #5b8fc0;
  --ch-teal:  #3f9e8b;
  --ch-rose:  #c47f72;
  --ch-sand:  #a8906a;
  --ch-slate: #85838f;
  /* Nav + stroke helpers — surface that fills the sticky nav chrome. */
  --nav-bg:       #141210;
  --nav-bg-scrolled: rgba(10,9,8,0.92);
  --nav-border:   rgba(240,235,224,0.08);
  --stroke-soft:  rgba(255,255,255,0.04);
  --stroke-med:   rgba(255,255,255,0.08);
  --stroke-hard:  rgba(255,255,255,0.14);
  /* Chart overlay tokens — translucent wash that mutes data underneath, plus
     a dashed boundary line color. Wash approximates the chart surface so an
     overlay reads as "less prominent" rather than "differently colored". */
  --chart-wash:     rgba(20,18,16,0.62);
  --chart-boundary: rgba(138,130,120,0.55);
  --chart-grid:     rgba(255,255,255,0.06);
  /* Meter tokens — the recessed groove behind a progress/coverage bar, and the
     NEUTRAL (non-semantic) bar fill used when a bar carries no status meaning.
     These must flip per theme: they were hardcoded to cream rgba across the SPA,
     which is cream-on-cream (i.e. invisible) under the two light themes — the
     Ask readiness ledger's "Customers analyzed" bar vanished entirely. Not
     interchangeable with --border/--surface2: a track sits INSIDE a --surface2
     panel, so it must read against that surface rather than match it. */
  --meter-track:   rgba(240,235,224,0.08);
  --meter-neutral: rgba(240,235,224,0.30);
  /* Inline chip/pill wash (mono badges, call-type tags) — same flip rationale. */
  --chip-bg:       rgba(255,255,255,0.06);
  /* Ask highlights — the persistent mark a saved passage wears inside the
     conversation (fill) plus its hover/edge ring. Deliberately NEUTRAL, not
     amber: the transient jump flash is amber, and a permanent mark that looked
     like it would read as "something just happened here" forever. */
  --ask-highlight:      rgba(240,235,224,0.15);
  --ask-highlight-ring: rgba(240,235,224,0.34);
  /* Boot shell (visible before Vue mounts — must match theme) */
  --boot-bg:      #0a0908;
  --boot-text:    #f0ebe0;
  --boot-muted:   #8a8278;
  --boot-ring:    rgba(240,235,224,0.14);
}

/* ── Design tokens (light — opt-in) ────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:           #fbf8f1;
  --surface:      #ffffff;
  --surface2:     #f4efe3;
  --border:       rgba(30,25,20,0.10);
  --border-strong:rgba(30,25,20,0.22);
  --text:         #1c1915;
  --text-muted:   #6b6258;
  --text-dim:     #a89e90;
  --amber:        #a8700e;
  --amber-light:  #c68a1a;
  --green:        #2d7a52;
  --red:          #a83030;
  --orange:       #a85a28;
  --nav-bg:       #ffffff;
  --nav-bg-scrolled: rgba(255,253,247,0.92);
  --nav-border:   rgba(30,25,20,0.08);
  --stroke-soft:  rgba(30,25,20,0.04);
  --stroke-med:   rgba(30,25,20,0.08);
  --stroke-hard:  rgba(30,25,20,0.14);
  --chart-wash:     rgba(251,248,241,0.66);
  --chart-boundary: rgba(107,98,88,0.55);
  --chart-grid:     rgba(30,25,20,0.09);
  --meter-track:   rgba(30,25,20,0.10);
  --meter-neutral: rgba(30,25,20,0.32);
  --chip-bg:       rgba(30,25,20,0.06);
  --ask-highlight:      rgba(30,25,20,0.11);
  --ask-highlight-ring: rgba(30,25,20,0.30);
  --boot-bg:      #fbf8f1;
  --boot-text:    #1c1915;
  --boot-muted:   #6b6258;
  --boot-ring:    rgba(30,25,20,0.14);
}

/* ── Design tokens (litellm — opt-in) ──────────────────────────────────────
   Cool slate body, white surfaces, blue brand accent. Mimics the look of the
   native LiteLLM proxy admin UI (Next.js + Tremor). --amber is intentionally
   overloaded onto blue-600 here so every existing `var(--amber)` consumer
   (filled buttons, links, focus rings, the spinner, gradient text) becomes
   blue without a token-rename refactor. */
html[data-theme="litellm"] {
  --bg:           #f8fafc;   /* slate-50 */
  --surface:      #ffffff;
  --surface2:     #f1f5f9;   /* slate-100 — table-row tint */
  --border:       rgba(15,23,42,0.10);
  --border-strong:rgba(15,23,42,0.18);
  --text:         #0f172a;   /* slate-900 */
  --text-muted:   #475569;   /* slate-600 */
  --text-dim:     #94a3b8;   /* slate-400 */
  --amber:        #2563eb;   /* blue-600 — accent, overloaded for minimum diff */
  --amber-light:  #3b82f6;   /* blue-500 */
  --green:        #059669;
  --red:          #dc2626;
  --orange:       #ea580c;
  --nav-bg:       #ffffff;
  --nav-bg-scrolled: rgba(255,255,255,0.92);
  --nav-border:   rgba(15,23,42,0.08);
  --stroke-soft:  rgba(15,23,42,0.04);
  --stroke-med:   rgba(15,23,42,0.08);
  --stroke-hard:  rgba(15,23,42,0.14);
  --chart-wash:     rgba(241,245,249,0.66);
  --chart-boundary: rgba(71,85,105,0.55);
  --chart-grid:     rgba(15,23,42,0.09);
  --meter-track:   rgba(15,23,42,0.10);
  --meter-neutral: rgba(15,23,42,0.32);
  --chip-bg:       rgba(15,23,42,0.06);
  --ask-highlight:      rgba(15,23,42,0.11);
  --ask-highlight-ring: rgba(15,23,42,0.30);
  --boot-bg:      #ffffff;
  --boot-text:    #0f172a;
  --boot-muted:   #475569;
  --boot-ring:    rgba(15,23,42,0.14);
}

/* ── Design tokens (litellm-dark — opt-in) ────────────────────────────────
   Dark variant of the LiteLLM theme: cool slate body, blue accent. Uses a
   slightly lighter blue (blue-500) than the light variant (blue-600) for
   legibility on dark surfaces. Same typography overrides apply via the
   `[data-theme^="litellm"]` shared selector below. */
html[data-theme="litellm-dark"] {
  --bg:           #0b1020;   /* very dark slate-blue */
  --surface:      #111827;   /* gray-900 */
  --surface2:     #1e293b;   /* slate-800 */
  --border:       rgba(148,163,184,0.12);
  --border-strong:rgba(148,163,184,0.22);
  --text:         #e2e8f0;   /* slate-200 */
  --text-muted:   #94a3b8;   /* slate-400 */
  --text-dim:     #64748b;   /* slate-500 */
  --amber:        #3b82f6;   /* blue-500 — accent */
  --amber-light:  #60a5fa;   /* blue-400 */
  --green:        #10b981;
  --red:          #ef4444;
  --orange:       #f97316;
  --nav-bg:       #111827;
  --nav-bg-scrolled: rgba(11,16,32,0.92);
  --nav-border:   rgba(148,163,184,0.10);
  --stroke-soft:  rgba(255,255,255,0.04);
  --stroke-med:   rgba(255,255,255,0.08);
  --stroke-hard:  rgba(255,255,255,0.14);
  --chart-wash:     rgba(17,24,39,0.62);
  --chart-boundary: rgba(148,163,184,0.55);
  --chart-grid:     rgba(255,255,255,0.06);
  --meter-track:   rgba(148,163,184,0.14);
  --meter-neutral: rgba(148,163,184,0.42);
  --chip-bg:       rgba(255,255,255,0.06);
  --ask-highlight:      rgba(148,163,184,0.18);
  --ask-highlight-ring: rgba(148,163,184,0.42);
  --boot-bg:      #0b1020;
  --boot-text:    #e2e8f0;
  --boot-muted:   #94a3b8;
  --boot-ring:    rgba(148,163,184,0.18);
}

/* ── Design tokens (High Contrast — opt-in accessibility OVERLAY) ───────────
   High Contrast is NOT a third theme — it's an ORTHOGONAL toggle layered over
   the chosen base mode via a separate `data-contrast="on"` attribute. So the
   four reachable combinations are:

       data-contrast absent  + (no theme | theme=light)  → DarkLedger | LightLedger
       data-contrast="on"    + (no theme)                → DarkLedger High Contrast
       data-contrast="on"    + theme=light               → LightLedger High Contrast

   Keeping `data-theme` set to the base mode means the base mode's token block
   and (for light) its full set of light-tint Tailwind remaps still apply; the
   contrast layer only RESTATES the tokens it needs to crank and adds a focused
   strengthening override block (see "High Contrast — strengthen…" below).

   Both variants are accessibility-first while keeping the editorial spirit:
     • WCAG AA+ everywhere — every token clears 4.5:1 against its --bg, incl.
       --text-dim (the base themes' dim labels fail AA at ~2:1 / ~2.2:1).
     • Colour-blind-safe status trio. The default green↔red pair collapses
       under deuteranopia / protanopia; here "healthy" shifts to a CYAN-leaning
       green and the trio is spread by LIGHTNESS too (a CVD fallback cue), so
       all three stay distinct under simulated deutan/protan vision (verified).
     • Stronger borders/strokes (component boundaries are an a11y feature).
   --brand-amber stays the original gold (wordmark), as in every theme. */

/* Dark High Contrast — base mode = dark (no data-theme attribute). */
html[data-contrast="on"]:not([data-theme]) {
  --bg:           #0a0806;
  --surface:      #17120d;
  --surface2:     #241c14;
  --border:       rgba(255,255,255,0.32);
  --border-strong:rgba(255,255,255,0.58);
  --text:         #ffffff;
  --text-muted:   #d9d3c7;
  --text-dim:     #aaa498;
  --amber:        #ffb02e;
  --amber-light:  #ffd166;
  --green:        #3cf0c0;   /* healthy — cyan-leaning green, CVD-safe vs red */
  --red:          #ff5b5b;   /* critical */
  --orange:       #ff9e2c;   /* warning / at-risk */
  --nav-bg:       #17120d;
  --nav-bg-scrolled: rgba(10,8,6,0.95);
  --nav-border:   rgba(255,255,255,0.18);
  --stroke-soft:  rgba(255,255,255,0.10);
  --stroke-med:   rgba(255,255,255,0.18);
  --stroke-hard:  rgba(255,255,255,0.30);
  --chart-wash:     rgba(10,8,6,0.66);
  --chart-boundary: rgba(217,211,199,0.60);
  --chart-grid:     rgba(255,255,255,0.22);
  --meter-track:   rgba(255,255,255,0.24);
  --meter-neutral: rgba(255,255,255,0.62);
  --chip-bg:       rgba(255,255,255,0.12);
  --ask-highlight:      rgba(255,255,255,0.28);
  --ask-highlight-ring: rgba(255,255,255,0.66);
  --boot-bg:      #0a0806;
  --boot-text:    #ffffff;
  --boot-muted:   #d9d3c7;
  --boot-ring:    rgba(255,255,255,0.30);
}

/* Light High Contrast — base mode = light (data-theme="light" stays set, so the
   light-tint remaps below still apply; this just cranks the tokens). On a light
   body the status hues must be DARK to clear AA, so they are spread by lightness
   (green lightest → red darkest) to hold apart under CVD. */
html[data-theme="light"][data-contrast="on"] {
  --bg:           #ffffff;
  --surface:      #faf8f3;
  --surface2:     #efeae0;
  --border:       rgba(0,0,0,0.42);
  --border-strong:rgba(0,0,0,0.68);
  --text:         #000000;
  --text-muted:   #2e2a24;
  --text-dim:     #514b42;
  --amber:        #8f5600;
  --amber-light:  #a35400;
  --green:        #0f8163;   /* healthy — teal-leaning, CVD-safe vs red */
  --red:          #9e1410;   /* critical — darkest of the trio */
  --orange:       #b45c00;   /* warning / at-risk */
  --nav-bg:       #ffffff;
  --nav-bg-scrolled: rgba(255,255,255,0.95);
  --nav-border:   rgba(0,0,0,0.16);
  --stroke-soft:  rgba(0,0,0,0.10);
  --stroke-med:   rgba(0,0,0,0.20);
  --stroke-hard:  rgba(0,0,0,0.34);
  --chart-wash:     rgba(255,255,255,0.70);
  --chart-boundary: rgba(60,55,48,0.60);
  --chart-grid:     rgba(0,0,0,0.24);
  --meter-track:   rgba(0,0,0,0.26);
  --meter-neutral: rgba(0,0,0,0.62);
  --chip-bg:       rgba(0,0,0,0.10);
  --ask-highlight:      rgba(0,0,0,0.18);
  --ask-highlight-ring: rgba(0,0,0,0.58);
  --boot-bg:      #ffffff;
  --boot-text:    #000000;
  --boot-muted:   #2e2a24;
  --boot-ring:    rgba(0,0,0,0.30);
}

/* ── Global ───────────────────────────────────────────────────────────────── */
html { color-scheme: dark; }
html[data-theme="light"],
html[data-theme="litellm"] { color-scheme: light; }
html[data-theme="litellm-dark"] { color-scheme: dark; }
/* High Contrast inherits its base mode's color-scheme: dark HC has no data-theme
   (covered by the html default above); light HC keeps data-theme="light" (covered
   by the light rule above) — so no contrast-specific color-scheme rule is needed. */
body { background-color: var(--bg); color: var(--text); font-family: var(--font-ui); }

/* Fraunces serif — for headings and the brand name */
.serif { font-family: var(--font-display); }

/* Metric values — the quantity in a stat tile or summary strip. Fira Sans 500
   with tabular figures: Fraunces has no tabular digits, so a number set in it
   can neither line up with its neighbours nor hold its width as it updates.
   Size and colour come from the context. */
.ll-metric-value { font-family: var(--font-ui); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── Surfaces (Tailwind utility remaps) ─────────────────────────────────── */
.bg-white     { background-color: var(--surface)  !important; }
.bg-gray-50   { background-color: var(--surface2) !important; }
.bg-gray-50\/80 { background-color: var(--surface2) !important; }
.bg-gray-100  { background-color: var(--bg)       !important; }
.bg-gray-200  { background-color: var(--surface2) !important; }

/* Tailwind state-variants for bg-gray-50. Without these, disabled form
   controls render with Tailwind's default near-white (#f9fafb) against the
   dark body — most visible on <input type="time"> where Safari's native
   disabled rendering doesn't respect `color-scheme: dark` on its own. */
.disabled\:bg-gray-50:disabled { background-color: var(--surface2) !important; }
.focus\:bg-gray-50:focus { background-color: var(--surface2) !important; }

/* Native form controls that carry their own rendering layer (time, date,
   datetime-local) need an explicit dark surface — `color-scheme: dark` on
   <html> covers most browsers but Safari still paints a light chip for the
   disabled state of these inputs. */
input[type="time"],
input[type="date"],
input[type="datetime-local"] {
  background-color: var(--surface2);
  color: var(--text);
  color-scheme: dark;
}
input[type="time"]:disabled,
input[type="date"]:disabled,
input[type="datetime-local"]:disabled {
  background-color: var(--surface2) !important;
  color: var(--text-muted) !important;
  opacity: 1;  /* let the parent opacity-50 carry the "disabled" cue, not a white box */
}

/* ── Reports view — sidebar spine hover (token-based, theme-agnostic) ─────── */
.reports-nav button:hover { background: var(--surface2); color: var(--text); }
/* Drill-through chips/rows (cohort aggregate → contributing customers) */
.drill-chip { cursor: pointer; transition: filter .12s ease; }
.drill-chip:hover { filter: brightness(1.3); }

/* ── Shadows ──────────────────────────────────────────────────────────────── */
.shadow    { box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) !important; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; }
.shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; }

/* ── Borders ──────────────────────────────────────────────────────────────── */
.border              { border-color: rgba(255,255,255,0.12) !important; }
.border-gray-200     { border-color: rgba(255,255,255,0.12) !important; }
.border-gray-300     { border-color: rgba(255,255,255,0.17) !important; }
.border-t            { border-top-color:    rgba(255,255,255,0.10) !important; }
.border-b            { border-bottom-color: rgba(255,255,255,0.10) !important; }
.border-l            { border-left-color:   rgba(255,255,255,0.10) !important; }
/* Color-specific rules after directional ones — wins when both classes are present (e.g. border-b border-gray-50 on table rows) */
.border-gray-50      { border-color: rgba(255,255,255,0.04) !important; }
.border-gray-100     { border-color: rgba(255,255,255,0.06) !important; }
.divide-gray-50  > * + * { border-color: rgba(255,255,255,0.04) !important; }

/* ── Text (gray scale remapped to dark-legible values) ───────────────────── */
.text-gray-900 { color: #f1f5f9 !important; }
.text-gray-800 { color: #e2e8f0 !important; }
.text-gray-700 { color: #cbd5e1 !important; }
.text-gray-600 { color: #94a3b8 !important; }
.text-gray-500 { color: #94a3b8 !important; }
.text-gray-400 { color: #94a3b8 !important; }
.text-gray-300 { color: #7a8fa6 !important; }
.text-gray-200 { color: rgba(255,255,255,0.10) !important; }

/* ── Slate text ───────────────────────────────────────────────────────────── */
.text-slate-900 { color: #f8fafc !important; }
.text-slate-800 { color: #e2e8f0 !important; }
.text-slate-700 { color: #cbd5e1 !important; }
.text-slate-600 { color: #94a3b8 !important; }
.text-slate-500 { color: #94a3b8 !important; }
.text-slate-400 { color: #94a3b8 !important; }

/* ── Accent text — indigo remapped to amber ───────────────────────────────── */
.text-indigo-700   { color: var(--amber)       !important; }
.text-indigo-600   { color: var(--amber)       !important; }
.text-indigo-500   { color: var(--amber)       !important; }
.text-indigo-400   { color: var(--amber-light) !important; }
.text-emerald-700  { color: #34d399 !important; }
.text-emerald-600  { color: #34d399 !important; }
.text-amber-800    { color: #fbbf24 !important; }
.text-amber-700    { color: #fbbf24 !important; }
.text-amber-600    { color: #fbbf24 !important; }
.text-orange-700   { color: #fb923c !important; }
.text-orange-600   { color: #fb923c !important; }
.text-red-700      { color: #f87171 !important; }
.text-red-600      { color: #f87171 !important; }
.text-blue-700     { color: #60a5fa !important; }
.text-blue-600     { color: #60a5fa !important; }
.text-violet-700   { color: #a78bfa !important; }
.text-teal-700     { color: #2dd4bf !important; }

/* ── Status badge backgrounds ─────────────────────────────────────────────── */
.bg-emerald-50  { background-color: rgba(4,120,87,0.15)   !important; }
.bg-emerald-100 { background-color: rgba(4,120,87,0.22)   !important; }
.bg-red-50      { background-color: rgba(127,29,29,0.20)  !important; }
.bg-red-100     { background-color: rgba(127,29,29,0.28)  !important; }
.bg-amber-50    { background-color: rgba(120,53,15,0.15)  !important; }
.bg-amber-100   { background-color: rgba(120,53,15,0.28)  !important; }
.bg-orange-50   { background-color: rgba(124,45,18,0.15)  !important; }
.bg-orange-100  { background-color: rgba(124,45,18,0.28)  !important; }
.bg-blue-50     { background-color: rgba(30,58,138,0.18)  !important; }
.bg-blue-100    { background-color: rgba(30,58,138,0.28)  !important; }
.bg-indigo-50     { background-color: rgba(212,144,26,0.10) !important; }
.bg-indigo-100    { background-color: rgba(212,144,26,0.18) !important; }
.bg-indigo-50\/20 { background-color: rgba(212,144,26,0.06) !important; }
.bg-indigo-50\/40 { background-color: rgba(212,144,26,0.14) !important; }
.bg-violet-50     { background-color: rgba(212,144,26,0.08) !important; }
.bg-violet-100    { background-color: rgba(212,144,26,0.14) !important; }

/* ── Accent backgrounds — filled indigo buttons → amber ───────────────────── */
.bg-indigo-600                  { background-color: var(--amber)  !important; }
.bg-indigo-500                  { background-color: #e8a020       !important; }
.hover\:bg-indigo-700:hover     { background-color: #b37818       !important; }
.hover\:bg-indigo-600:hover     { background-color: var(--amber)  !important; }
.hover\:bg-indigo-500:hover     { background-color: #e8a020       !important; }
.focus\:ring-indigo-300:focus   { --tw-ring-color: rgba(212,144,26,0.4) !important; }
.border-indigo-300              { border-color: rgba(212,144,26,0.45) !important; }
.border-indigo-500              { border-color: var(--amber)      !important; }
.border-indigo-900              { border-color: rgba(212,144,26,0.2) !important; }
.bg-teal-50     { background-color: rgba(19,78,74,0.18)   !important; }
.bg-teal-100    { background-color: rgba(19,78,74,0.28)   !important; }
.bg-slate-100   { background-color: rgba(51,65,85,0.40)   !important; }

/* ── Accent panel + border overrides (Tailwind light-theme defaults would
   render these as bright pastels on the dark body — every new section that
   uses a helper panel, status pill, or tinted border goes through here).

   Rule: for any `bg-<color>-50`, `bg-<color>-100`, `bg-<color>-200`, or
   `border-<color>-{100,200,300}` utility that we use in index.html, add an
   override below.  `scripts/check_theme.py` enforces this — CI fails if an
   unmapped light-tint utility appears in index.html.                       */

/* Slate — neutral helpers, session-token panel, inference mode hint, etc. */
.bg-slate-50       { background-color: rgba(51,65,85,0.18) !important; }
.bg-slate-50\/40   { background-color: rgba(51,65,85,0.08) !important; }
.bg-slate-50\/50   { background-color: rgba(51,65,85,0.10) !important; }
.bg-slate-50\/80   { background-color: rgba(51,65,85,0.22) !important; }
.bg-slate-200      { background-color: rgba(51,65,85,0.45) !important; }
.hover\:bg-slate-50:hover    { background-color: rgba(51,65,85,0.18) !important; }
.hover\:bg-slate-100:hover   { background-color: rgba(51,65,85,0.30) !important; }
.border-slate-100  { border-color: rgba(148,163,184,0.18) !important; }
.border-slate-200  { border-color: rgba(148,163,184,0.22) !important; }
.border-slate-300  { border-color: rgba(148,163,184,0.32) !important; }

/* Emerald — success states */
.bg-emerald-200    { background-color: rgba(4,120,87,0.35) !important; }
.border-emerald-100 { border-color: rgba(4,120,87,0.28) !important; }
.border-emerald-200 { border-color: rgba(4,120,87,0.40) !important; }
.border-emerald-300 { border-color: rgba(4,120,87,0.55) !important; }
.hover\:bg-emerald-50:hover  { background-color: rgba(4,120,87,0.20) !important; }

/* Amber — warnings */
.border-amber-100  { border-color: rgba(120,53,15,0.32) !important; }
.border-amber-200  { border-color: rgba(120,53,15,0.45) !important; }
.border-amber-300  { border-color: rgba(180,83,9,0.50) !important; }
.hover\:bg-amber-50:hover   { background-color: rgba(120,53,15,0.20) !important; }

/* Red — errors */
.bg-red-200        { background-color: rgba(127,29,29,0.35) !important; }
.border-red-100    { border-color: rgba(127,29,29,0.30) !important; }
.border-red-200    { border-color: rgba(127,29,29,0.42) !important; }
.border-red-300    { border-color: rgba(127,29,29,0.58) !important; }
.hover\:bg-red-50:hover     { background-color: rgba(127,29,29,0.22) !important; }

/* Blue */
.bg-blue-200       { background-color: rgba(30,58,138,0.38) !important; }
.border-blue-200   { border-color: rgba(30,58,138,0.42) !important; }
.border-blue-300   { border-color: rgba(30,58,138,0.55) !important; }

/* Indigo — remapped to amber (brand accent) */
.border-indigo-50  { border-color: rgba(212,144,26,0.14) !important; }
.border-indigo-100 { border-color: rgba(212,144,26,0.24) !important; }
.border-indigo-200 { border-color: rgba(212,144,26,0.38) !important; }
.bg-indigo-200     { background-color: rgba(212,144,26,0.26) !important; }

/* Violet / purple — remapped to amber (brand accent) so badges sit in-palette */
.bg-violet-200     { background-color: rgba(212,144,26,0.20) !important; }
.border-violet-100 { border-color: rgba(212,144,26,0.22) !important; }
.border-violet-200 { border-color: rgba(212,144,26,0.35) !important; }

/* Orange */

/* Teal */

/* Sky */
.bg-sky-50         { background-color: rgba(12,74,110,0.18) !important; }
.bg-sky-50\/60     { background-color: rgba(12,74,110,0.12) !important; }
.bg-sky-100        { background-color: rgba(12,74,110,0.28) !important; }
.border-sky-100    { border-color: rgba(14,116,144,0.28) !important; }

/* ── Hover states ─────────────────────────────────────────────────────────── */
.hover\:bg-gray-50:hover  { background-color: var(--surface2) !important; }
.hover\:bg-gray-100:hover { background-color: var(--surface2) !important; }

/* ── Form inputs ──────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea {
  background-color: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
/* Placeholder was a hardcoded blue-gray (#8ba4ba) left over from the slate era:
   off-palette on the warm dark theme and low-contrast on the light one. The
   muted token matches its lightness on dark and flips correctly on light. */
input::placeholder,
textarea::placeholder { color: var(--text-muted) !important; }
select option          { background: #1e293b; color: #e2e8f0; }

/* ── Shared animations ────────────────────────────────────────────────────── */
@keyframes pulse-dot  { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes float-slow { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
.pulse-dot   { animation: pulse-dot  2s ease-in-out infinite; }
.float       { animation: float      5s ease-in-out infinite; }

.spinner-amber {
  display: inline-block;
  border-radius: 50%;
  border: 2px solid rgba(212,144,26,0.18);
  border-top-color: var(--amber);
  animation: spinner-rotate 0.7s linear infinite;
  flex-shrink: 0;
}
html[data-theme="litellm"]      .spinner-amber { border-color: rgba(37,99,235,0.18); border-top-color: var(--amber); }
html[data-theme="litellm-dark"] .spinner-amber { border-color: rgba(59,130,246,0.20); border-top-color: var(--amber); }
.spinner-amber-sm { width: 11px; height: 11px; border-width: 1.5px; }
.spinner-amber-md { width: 16px; height: 16px; border-width: 2px; }

/* ── Dashboard loading state ─────────────────────────────────────────────────
   Stat-card values render as shimmer placeholder bars (.shimmer-bar) and chart
   cards run the undulating mock chart with a "Loading…" label overlay until
   each fetch resolves. Designed so values never pop in over $0.00 / 0 / —. */

/* "Loading…" label overlaid on chart cards while their fetch is in flight.
   Sits above the undulating mock canvas so the user has both motion + text. */
.chart-loading-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-dim);
  pointer-events: none;
  animation: chartLoadingPulse 1.8s ease-in-out infinite;
}
@keyframes chartLoadingPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}

/* Shimmer placeholder for stat-card values. Replaces the real number while
   data is in flight, so the user sees an obvious loading bar instead of
   $0.00 / 0 / — popping over to a real value. */
.shimmer-bar {
  display: inline-block;
  vertical-align: middle;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(240,235,224,0.04) 0%,
    rgba(240,235,224,0.16) 50%,
    rgba(240,235,224,0.04) 100%
  );
  background-size: 220% 100%;
  animation: shimmerSlide 1.6s ease-in-out infinite;
}
/* Light themes: the cream gradient above is cream-on-cream — the skeleton bars
   vanished and a loading tile read as a permanently empty one. Same weights,
   dark ink. High Contrast inherits its base mode and is cranked alongside. */
html[data-theme="light"]   .shimmer-bar,
html[data-theme="litellm"] .shimmer-bar {
  background: linear-gradient(
    90deg,
    rgba(30,25,20,0.05) 0%,
    rgba(30,25,20,0.18) 50%,
    rgba(30,25,20,0.05) 100%
  );
  background-size: 220% 100%;
}
html[data-theme="light"][data-contrast="on"] .shimmer-bar {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.30) 50%,
    rgba(0,0,0,0.10) 100%
  );
  background-size: 220% 100%;
}
@keyframes shimmerSlide {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* ── Dashboard tile expand button ──────────────────────────────────────────── */
.tile-hoverable { position: relative; }
.tile-expand-btn {
  position: absolute; top: 8px; right: 8px; opacity: 0;
  transition: opacity 0.15s;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 7px; cursor: pointer; color: var(--text-muted);
  font-size: 12px; line-height: 1.4;
}
.tile-hoverable:hover .tile-expand-btn { opacity: 1; }

/* ── Dashboard tile expansion panel ──────────────────────────────────────── */
.tile-expand-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px 20px;
  margin-top: 8px; margin-bottom: 20px;
}
.tile-expand-close {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px;
}
.tile-expand-close:hover { color: var(--text); }

/* ── SortableJS drag states ───────────────────────────────────────────────── */
.tile-drag-ghost  { opacity: 0.3; background: var(--surface2) !important; }
.tile-drag-chosen { box-shadow: 0 0 0 2px var(--amber); border-radius: 8px; }
.tile-drag-item   { box-shadow: 0 8px 24px rgba(0,0,0,0.5); transform: scale(1.03); z-index: 10; }
[data-tile-id]    { user-select: none; }

/* ── Shared component: mock-badge ─────────────────────────────────────────── */

/* ── Provenance badge: report produced client-side in Claude Code ──────────── */
/* Shown on a report card when _meta.source === 'claude_code_client'. Custom
   class (not a Tailwind tint) so it carries its own dark/light colors and is
   outside check_theme.py's utility-tint gate. Brand-amber to read as a distinct,
   in-palette provenance marker rather than a status pill. */
.cc-source-badge {
  background-color: rgba(212,144,26,0.14);
  color: #e8a020;
  border: 1px solid rgba(212,144,26,0.32);
}
html[data-theme="light"]   .cc-source-badge,
html[data-theme="litellm"] .cc-source-badge {
  background-color: #fdf6e7;
  color: #b3760f;
  border-color: #f0d9a8;
}

/* ── Gradient text (accent) ──────────────────────────────────────────────── */

/* =============================================================================
   High Contrast (DARK) — strengthen the base-dark Tailwind remaps for a11y
   (data-contrast="on" with no data-theme). The dark base inherits the unscoped
   remaps above; those bake in low-opacity strokes and a single mid-grey
   (#94a3b8) for most muted text. That's fine for the default look but too dim
   for high contrast. These overrides raise every hardcoded grey/border/status
   hue to a WCAG-AA+ value and retune the status hues to the CVD-safe set.
   Token-driven rules (var(--…)) already flip via the root block above and are
   not restated. The matching LIGHT High Contrast strengthening block lives just
   below, after the dark one. */

/* Neutral text greys — lift to high-contrast warm-neutrals (all ≥10:1 on --bg) */
html[data-contrast="on"]:not([data-theme]) .text-gray-900,
html[data-contrast="on"]:not([data-theme]) .text-slate-900 { color: #ffffff !important; }
html[data-contrast="on"]:not([data-theme]) .text-gray-800,
html[data-contrast="on"]:not([data-theme]) .text-slate-800 { color: #f2efe9 !important; }
html[data-contrast="on"]:not([data-theme]) .text-gray-700,
html[data-contrast="on"]:not([data-theme]) .text-slate-700 { color: #e4dfd5 !important; }
html[data-contrast="on"]:not([data-theme]) .text-gray-600,
html[data-contrast="on"]:not([data-theme]) .text-gray-500,
html[data-contrast="on"]:not([data-theme]) .text-gray-400,
html[data-contrast="on"]:not([data-theme]) .text-gray-300,
html[data-contrast="on"]:not([data-theme]) .text-slate-600,
html[data-contrast="on"]:not([data-theme]) .text-slate-500,
html[data-contrast="on"]:not([data-theme]) .text-slate-400 { color: #c7c1b5 !important; }

/* Borders — base dark tops out at 0.17 opacity; contrast needs visible edges */
html[data-contrast="on"]:not([data-theme]) .border,
html[data-contrast="on"]:not([data-theme]) .border-gray-200 { border-color: rgba(255,255,255,0.32) !important; }
html[data-contrast="on"]:not([data-theme]) .border-gray-300 { border-color: rgba(255,255,255,0.48) !important; }
html[data-contrast="on"]:not([data-theme]) .border-t        { border-top-color:    rgba(255,255,255,0.26) !important; }
html[data-contrast="on"]:not([data-theme]) .border-b        { border-bottom-color: rgba(255,255,255,0.26) !important; }
html[data-contrast="on"]:not([data-theme]) .border-l        { border-left-color:   rgba(255,255,255,0.26) !important; }
html[data-contrast="on"]:not([data-theme]) .border-gray-100 { border-color: rgba(255,255,255,0.18) !important; }
html[data-contrast="on"]:not([data-theme]) .border-gray-50  { border-color: rgba(255,255,255,0.12) !important; }
html[data-contrast="on"]:not([data-theme]) .divide-gray-50  > * + * { border-color: rgba(255,255,255,0.12) !important; }

/* Card edge ring — make the 1px hairline in .shadow legible */
html[data-contrast="on"]:not([data-theme]) .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.14) !important; }

/* Status text — CVD-safe + brighter. Greens cyan-lean so they hold apart from
   red under deutan/protan; reds/oranges stay separated by lightness too. */
html[data-contrast="on"]:not([data-theme]) .text-emerald-600,
html[data-contrast="on"]:not([data-theme]) .text-emerald-700,
html[data-contrast="on"]:not([data-theme]) .text-teal-700  { color: #3cf0c0 !important; }
html[data-contrast="on"]:not([data-theme]) .text-red-600,
html[data-contrast="on"]:not([data-theme]) .text-red-700    { color: #ff7d7d !important; }
html[data-contrast="on"]:not([data-theme]) .text-orange-600,
html[data-contrast="on"]:not([data-theme]) .text-orange-700 { color: #ffb04a !important; }
html[data-contrast="on"]:not([data-theme]) .text-amber-600,
html[data-contrast="on"]:not([data-theme]) .text-amber-700  { color: #ffce5c !important; }
html[data-contrast="on"]:not([data-theme]) .text-blue-600,
html[data-contrast="on"]:not([data-theme]) .text-blue-700   { color: #7bb0ff !important; }

/* Accent focus ring + form chrome — brighter so keyboard focus is unmistakable */
html[data-contrast="on"]:not([data-theme]) .focus\:ring-indigo-300:focus { --tw-ring-color: rgba(255,176,46,0.65) !important; }
html[data-contrast="on"]:not([data-theme]) input::placeholder,
html[data-contrast="on"]:not([data-theme]) textarea::placeholder { color: #b3ada1 !important; }
html[data-contrast="on"]:not([data-theme]) input[type="text"],
html[data-contrast="on"]:not([data-theme]) input[type="email"],
html[data-contrast="on"]:not([data-theme]) input[type="password"],
html[data-contrast="on"]:not([data-theme]) input[type="url"],
html[data-contrast="on"]:not([data-theme]) input[type="number"],
html[data-contrast="on"]:not([data-theme]) input[type="search"],
html[data-contrast="on"]:not([data-theme]) select,
html[data-contrast="on"]:not([data-theme]) textarea { border-color: rgba(255,255,255,0.34) !important; }

/* =============================================================================
   High Contrast (LIGHT) — crank the light-theme Tailwind remaps for a11y
   (data-theme="light" + data-contrast="on"). The light base (further below)
   already remaps every tint to a legible light-mode value; these rules push the
   neutrals to near-black, darken borders, and swap the status hues to the
   CVD-safe DARK set so the green↔red pair survives deutan/protan vision. Each
   selector is more specific than the light base (two attrs + the class), so it
   wins; token-driven rules flip via the light-HC root block above.
   ============================================================================= */

/* Neutral text greys — push to near-black (muted band ≥9:1 on white) */
html[data-theme="light"][data-contrast="on"] .text-gray-900,
html[data-theme="light"][data-contrast="on"] .text-slate-900 { color: #000000 !important; }
html[data-theme="light"][data-contrast="on"] .text-gray-800,
html[data-theme="light"][data-contrast="on"] .text-slate-800 { color: #14110d !important; }
html[data-theme="light"][data-contrast="on"] .text-gray-700,
html[data-theme="light"][data-contrast="on"] .text-slate-700 { color: #221e18 !important; }
html[data-theme="light"][data-contrast="on"] .text-gray-600,
html[data-theme="light"][data-contrast="on"] .text-gray-500,
html[data-theme="light"][data-contrast="on"] .text-gray-400,
html[data-theme="light"][data-contrast="on"] .text-gray-300,
html[data-theme="light"][data-contrast="on"] .text-slate-600,
html[data-theme="light"][data-contrast="on"] .text-slate-500,
html[data-theme="light"][data-contrast="on"] .text-slate-400 { color: #3a352e !important; }

/* Borders — light base tops out at 0.17 alpha; contrast needs visible edges */
html[data-theme="light"][data-contrast="on"] .border,
html[data-theme="light"][data-contrast="on"] .border-gray-200 { border-color: rgba(0,0,0,0.42) !important; }
html[data-theme="light"][data-contrast="on"] .border-gray-300 { border-color: rgba(0,0,0,0.58) !important; }
html[data-theme="light"][data-contrast="on"] .border-t        { border-top-color:    rgba(0,0,0,0.34) !important; }
html[data-theme="light"][data-contrast="on"] .border-b        { border-bottom-color: rgba(0,0,0,0.34) !important; }
html[data-theme="light"][data-contrast="on"] .border-l        { border-left-color:   rgba(0,0,0,0.34) !important; }
html[data-theme="light"][data-contrast="on"] .border-gray-100 { border-color: rgba(0,0,0,0.22) !important; }
html[data-theme="light"][data-contrast="on"] .border-gray-50  { border-color: rgba(0,0,0,0.14) !important; }
html[data-theme="light"][data-contrast="on"] .divide-gray-50  > * + * { border-color: rgba(0,0,0,0.14) !important; }

/* Card edge ring — make the 1px hairline in .shadow legible on white */
html[data-theme="light"][data-contrast="on"] .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.16) !important; }

/* Status text — CVD-safe DARK set (teal-green / dark-orange / darkest-red),
   spread by lightness so the trio holds apart under deutan/protan on white. */
html[data-theme="light"][data-contrast="on"] .text-emerald-600,
html[data-theme="light"][data-contrast="on"] .text-emerald-700,
html[data-theme="light"][data-contrast="on"] .text-teal-700  { color: #0f8163 !important; }
html[data-theme="light"][data-contrast="on"] .text-red-600,
html[data-theme="light"][data-contrast="on"] .text-red-700    { color: #9e1410 !important; }
html[data-theme="light"][data-contrast="on"] .text-orange-600,
html[data-theme="light"][data-contrast="on"] .text-orange-700 { color: #b45c00 !important; }
html[data-theme="light"][data-contrast="on"] .text-amber-600,
html[data-theme="light"][data-contrast="on"] .text-amber-700  { color: #8a5a00 !important; }
html[data-theme="light"][data-contrast="on"] .text-blue-600,
html[data-theme="light"][data-contrast="on"] .text-blue-700   { color: #1d4ed8 !important; }

/* Accent focus ring + form chrome — darker so keyboard focus is unmistakable */
html[data-theme="light"][data-contrast="on"] .focus\:ring-indigo-300:focus { --tw-ring-color: rgba(143,86,0,0.70) !important; }
html[data-theme="light"][data-contrast="on"] input::placeholder,
html[data-theme="light"][data-contrast="on"] textarea::placeholder { color: #514b42 !important; }
html[data-theme="light"][data-contrast="on"] input[type="text"],
html[data-theme="light"][data-contrast="on"] input[type="email"],
html[data-theme="light"][data-contrast="on"] input[type="password"],
html[data-theme="light"][data-contrast="on"] input[type="url"],
html[data-theme="light"][data-contrast="on"] input[type="number"],
html[data-theme="light"][data-contrast="on"] input[type="search"],
html[data-theme="light"][data-contrast="on"] select,
html[data-theme="light"][data-contrast="on"] textarea { border-color: rgba(0,0,0,0.45) !important; }

/* =============================================================================
   Light-mode overrides — SPA only ([data-theme="light"] | [data-theme="litellm"])
   Mirrors every hardcoded-for-dark rule above with a legible light-mode value.
   Token-based rules (var(--bg|--surface|--text|...)) flip automatically via the
   per-theme root blocks above, so this section only restates the rules that
   baked in rgba(255,255,255,*) or dark hex values.

   Selector strategy: rules whose value is identical across the two light themes
   (standard Tailwind tints like #ecfdf5) are written as a *shared* selector list
   (`html[data-theme="light"], html[data-theme="litellm"]`). Rules whose value
   *diverges* (cream-amber for `light`, slate-blue for `litellm`) are repeated
   per-theme below the shared block.
   ============================================================================= */

html[data-theme="light"] .shadow    { box-shadow: 0 1px 3px rgba(20,16,10,0.08), 0 0 0 1px rgba(20,16,10,0.04) !important; }
html[data-theme="light"] .shadow-sm { box-shadow: 0 1px 2px rgba(20,16,10,0.06) !important; }
html[data-theme="light"] .shadow-lg { box-shadow: 0 8px 24px rgba(20,16,10,0.12) !important; }

html[data-theme="litellm"] .shadow    { box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 0 0 1px rgba(15,23,42,0.04) !important; }
html[data-theme="litellm"] .shadow-sm { box-shadow: 0 1px 2px rgba(15,23,42,0.05) !important; }
html[data-theme="litellm"] .shadow-lg { box-shadow: 0 8px 24px rgba(15,23,42,0.10) !important; }

/* Borders — invert the neutral stroke colors */
html[data-theme="light"] .border              { border-color: rgba(30,25,20,0.12) !important; }
html[data-theme="light"] .border-gray-200     { border-color: rgba(30,25,20,0.12) !important; }
html[data-theme="light"] .border-gray-300     { border-color: rgba(30,25,20,0.17) !important; }
html[data-theme="light"] .border-t            { border-top-color:    rgba(30,25,20,0.10) !important; }
html[data-theme="light"] .border-b            { border-bottom-color: rgba(30,25,20,0.10) !important; }
html[data-theme="light"] .border-l            { border-left-color:   rgba(30,25,20,0.10) !important; }
html[data-theme="light"] .border-gray-50      { border-color: rgba(30,25,20,0.04) !important; }
html[data-theme="light"] .border-gray-100     { border-color: rgba(30,25,20,0.06) !important; }
html[data-theme="light"] .divide-gray-50  > * + * { border-color: rgba(30,25,20,0.04) !important; }

html[data-theme="litellm"] .border              { border-color: rgba(15,23,42,0.10) !important; }
html[data-theme="litellm"] .border-gray-200     { border-color: rgba(15,23,42,0.10) !important; }
html[data-theme="litellm"] .border-gray-300     { border-color: rgba(15,23,42,0.16) !important; }
html[data-theme="litellm"] .border-t            { border-top-color:    rgba(15,23,42,0.08) !important; }
html[data-theme="litellm"] .border-b            { border-bottom-color: rgba(15,23,42,0.08) !important; }
html[data-theme="litellm"] .border-l            { border-left-color:   rgba(15,23,42,0.08) !important; }
html[data-theme="litellm"] .border-gray-50      { border-color: rgba(15,23,42,0.04) !important; }
html[data-theme="litellm"] .border-gray-100     { border-color: rgba(15,23,42,0.06) !important; }
html[data-theme="litellm"] .divide-gray-50  > * + * { border-color: rgba(15,23,42,0.04) !important; }

/* Text grays — restored to actual Tailwind-like values for a light body
   (shared: both light themes use the same neutral gray scale) */
html[data-theme="light"]   .text-gray-900,
html[data-theme="litellm"] .text-gray-900 { color: #111827 !important; }
html[data-theme="light"]   .text-gray-800,
html[data-theme="litellm"] .text-gray-800 { color: #1f2937 !important; }
html[data-theme="light"]   .text-gray-700,
html[data-theme="litellm"] .text-gray-700 { color: #374151 !important; }
html[data-theme="light"]   .text-gray-600,
html[data-theme="litellm"] .text-gray-600 { color: #4b5563 !important; }
html[data-theme="light"]   .text-gray-500,
html[data-theme="litellm"] .text-gray-500 { color: #6b7280 !important; }
html[data-theme="light"]   .text-gray-400,
html[data-theme="litellm"] .text-gray-400 { color: #9ca3af !important; }
html[data-theme="light"]   .text-gray-300,
html[data-theme="litellm"] .text-gray-300 { color: #d1d5db !important; }
html[data-theme="light"]   .text-gray-200 { color: rgba(30,25,20,0.10) !important; }
html[data-theme="litellm"] .text-gray-200 { color: rgba(15,23,42,0.10) !important; }

html[data-theme="light"]   .text-slate-900,
html[data-theme="litellm"] .text-slate-900 { color: #0f172a !important; }
html[data-theme="light"]   .text-slate-800,
html[data-theme="litellm"] .text-slate-800 { color: #1e293b !important; }
html[data-theme="light"]   .text-slate-700,
html[data-theme="litellm"] .text-slate-700 { color: #334155 !important; }
html[data-theme="light"]   .text-slate-600,
html[data-theme="litellm"] .text-slate-600 { color: #475569 !important; }
html[data-theme="light"]   .text-slate-500,
html[data-theme="litellm"] .text-slate-500 { color: #64748b !important; }
html[data-theme="light"]   .text-slate-400,
html[data-theme="litellm"] .text-slate-400 { color: #94a3b8 !important; }

/* Accent text — indigo remapped to the brand accent (--amber, which is amber for
   `light` and blue for `litellm` thanks to the token overload). Other named
   colors keep their canonical Tailwind values — shared across both themes. */
html[data-theme="light"]   .text-indigo-700,
html[data-theme="litellm"] .text-indigo-700 { color: var(--amber)       !important; }
html[data-theme="light"]   .text-indigo-600,
html[data-theme="litellm"] .text-indigo-600 { color: var(--amber)       !important; }
html[data-theme="light"]   .text-indigo-500,
html[data-theme="litellm"] .text-indigo-500 { color: var(--amber)       !important; }
html[data-theme="light"]   .text-indigo-400,
html[data-theme="litellm"] .text-indigo-400 { color: var(--amber-light) !important; }
html[data-theme="light"]   .text-emerald-700,
html[data-theme="litellm"] .text-emerald-700 { color: #047857 !important; }
html[data-theme="light"]   .text-emerald-600,
html[data-theme="litellm"] .text-emerald-600 { color: #059669 !important; }
html[data-theme="light"]   .text-amber-800,
html[data-theme="litellm"] .text-amber-800 { color: #92400e !important; }
html[data-theme="light"]   .text-amber-700,
html[data-theme="litellm"] .text-amber-700 { color: #b45309 !important; }
html[data-theme="light"]   .text-amber-600,
html[data-theme="litellm"] .text-amber-600 { color: #d97706 !important; }
html[data-theme="light"]   .text-orange-700,
html[data-theme="litellm"] .text-orange-700 { color: #c2410c !important; }
html[data-theme="light"]   .text-orange-600,
html[data-theme="litellm"] .text-orange-600 { color: #ea580c !important; }
html[data-theme="light"]   .text-red-700,
html[data-theme="litellm"] .text-red-700 { color: #b91c1c !important; }
html[data-theme="light"]   .text-red-600,
html[data-theme="litellm"] .text-red-600 { color: #dc2626 !important; }
html[data-theme="light"]   .text-blue-700,
html[data-theme="litellm"] .text-blue-700 { color: #1d4ed8 !important; }
html[data-theme="light"]   .text-blue-600,
html[data-theme="litellm"] .text-blue-600 { color: #2563eb !important; }
html[data-theme="light"]   .text-violet-700,
html[data-theme="litellm"] .text-violet-700 { color: #6d28d9 !important; }
html[data-theme="light"]   .text-teal-700,
html[data-theme="litellm"] .text-teal-700 { color: #0f766e !important; }

/* Status backgrounds — Tailwind-like light tints (shared across both light themes) */
html[data-theme="light"]   .bg-emerald-50,
html[data-theme="litellm"] .bg-emerald-50  { background-color: #ecfdf5 !important; }
html[data-theme="light"]   .bg-emerald-100,
html[data-theme="litellm"] .bg-emerald-100 { background-color: #d1fae5 !important; }
html[data-theme="light"]   .bg-emerald-200,
html[data-theme="litellm"] .bg-emerald-200 { background-color: #a7f3d0 !important; }
html[data-theme="light"]   .bg-red-50,
html[data-theme="litellm"] .bg-red-50      { background-color: #fef2f2 !important; }
html[data-theme="light"]   .bg-red-100,
html[data-theme="litellm"] .bg-red-100     { background-color: #fee2e2 !important; }
html[data-theme="light"]   .bg-red-200,
html[data-theme="litellm"] .bg-red-200     { background-color: #fecaca !important; }
html[data-theme="light"]   .bg-amber-50,
html[data-theme="litellm"] .bg-amber-50    { background-color: #fffbeb !important; }
html[data-theme="light"]   .bg-amber-100,
html[data-theme="litellm"] .bg-amber-100   { background-color: #fef3c7 !important; }
html[data-theme="light"]   .bg-orange-50,
html[data-theme="litellm"] .bg-orange-50   { background-color: #fff7ed !important; }
html[data-theme="light"]   .bg-orange-100,
html[data-theme="litellm"] .bg-orange-100  { background-color: #ffedd5 !important; }
html[data-theme="light"]   .bg-blue-50,
html[data-theme="litellm"] .bg-blue-50     { background-color: #eff6ff !important; }
html[data-theme="light"]   .bg-blue-100,
html[data-theme="litellm"] .bg-blue-100    { background-color: #dbeafe !important; }
html[data-theme="light"]   .bg-blue-200,
html[data-theme="litellm"] .bg-blue-200    { background-color: #bfdbfe !important; }
html[data-theme="light"]   .bg-teal-50,
html[data-theme="litellm"] .bg-teal-50     { background-color: #f0fdfa !important; }
html[data-theme="light"]   .bg-teal-100,
html[data-theme="litellm"] .bg-teal-100    { background-color: #ccfbf1 !important; }
html[data-theme="light"]   .bg-sky-50,
html[data-theme="litellm"] .bg-sky-50      { background-color: #f0f9ff !important; }
html[data-theme="light"]   .bg-sky-100,
html[data-theme="litellm"] .bg-sky-100     { background-color: #e0f2fe !important; }
html[data-theme="light"]   .bg-slate-100,
html[data-theme="litellm"] .bg-slate-100   { background-color: #f1f5f9 !important; }
html[data-theme="light"]   .bg-slate-50,
html[data-theme="litellm"] .bg-slate-50    { background-color: #f8fafc !important; }
html[data-theme="light"]   .bg-slate-50\/40,
html[data-theme="litellm"] .bg-slate-50\/40 { background-color: rgba(248,250,252,0.4) !important; }
html[data-theme="light"]   .bg-slate-50\/50,
html[data-theme="litellm"] .bg-slate-50\/50 { background-color: rgba(248,250,252,0.5) !important; }
html[data-theme="light"]   .bg-slate-50\/80,
html[data-theme="litellm"] .bg-slate-50\/80 { background-color: rgba(248,250,252,0.8) !important; }
html[data-theme="light"]   .bg-slate-200,
html[data-theme="litellm"] .bg-slate-200   { background-color: #e2e8f0 !important; }
html[data-theme="light"]   .hover\:bg-slate-50:hover,
html[data-theme="litellm"] .hover\:bg-slate-50:hover  { background-color: #f8fafc !important; }
html[data-theme="light"]   .hover\:bg-slate-100:hover,
html[data-theme="litellm"] .hover\:bg-slate-100:hover { background-color: #f1f5f9 !important; }

/* Indigo / violet / purple tints — remapped to the brand accent (cream-amber
   for `light`, slate-blue for `litellm`). Repeated per-theme because the rgba
   anchors differ. */
html[data-theme="light"] .bg-indigo-50     { background-color: #fdf6e7 !important; }
html[data-theme="light"] .bg-indigo-100    { background-color: #f9ead1 !important; }
html[data-theme="light"] .bg-indigo-50\/20 { background-color: rgba(253,246,231,0.5) !important; }
html[data-theme="light"] .bg-indigo-50\/40 { background-color: rgba(253,246,231,0.8) !important; }
html[data-theme="light"] .bg-indigo-200    { background-color: #f3dcb2 !important; }
html[data-theme="light"] .bg-violet-50     { background-color: #fdf6e7 !important; }
html[data-theme="light"] .bg-violet-100    { background-color: #f9ead1 !important; }
html[data-theme="light"] .bg-violet-200    { background-color: #f3dcb2 !important; }

html[data-theme="litellm"] .bg-indigo-50     { background-color: #eff6ff !important; }
html[data-theme="litellm"] .bg-indigo-100    { background-color: #dbeafe !important; }
html[data-theme="litellm"] .bg-indigo-50\/20 { background-color: rgba(239,246,255,0.5) !important; }
html[data-theme="litellm"] .bg-indigo-50\/40 { background-color: rgba(239,246,255,0.8) !important; }
html[data-theme="litellm"] .bg-indigo-200    { background-color: #bfdbfe !important; }
html[data-theme="litellm"] .bg-violet-50     { background-color: #eff6ff !important; }
html[data-theme="litellm"] .bg-violet-100    { background-color: #dbeafe !important; }
html[data-theme="litellm"] .bg-violet-200    { background-color: #bfdbfe !important; }

/* Accent borders — neutral/status borders shared across both light themes;
   indigo/violet/purple borders diverge (amber rgba vs. blue rgba). */
html[data-theme="light"]   .border-slate-100,
html[data-theme="litellm"] .border-slate-100  { border-color: #e2e8f0 !important; }
html[data-theme="light"]   .border-slate-200,
html[data-theme="litellm"] .border-slate-200  { border-color: #cbd5e1 !important; }
html[data-theme="light"]   .border-slate-300,
html[data-theme="litellm"] .border-slate-300  { border-color: #94a3b8 !important; }
html[data-theme="light"]   .border-emerald-100,
html[data-theme="litellm"] .border-emerald-100 { border-color: #a7f3d0 !important; }
html[data-theme="light"]   .border-emerald-200,
html[data-theme="litellm"] .border-emerald-200 { border-color: #6ee7b7 !important; }
html[data-theme="light"]   .border-emerald-300,
html[data-theme="litellm"] .border-emerald-300 { border-color: #34d399 !important; }
html[data-theme="light"]   .hover\:bg-emerald-50:hover,
html[data-theme="litellm"] .hover\:bg-emerald-50:hover { background-color: #ecfdf5 !important; }
html[data-theme="light"]   .border-amber-100,
html[data-theme="litellm"] .border-amber-100 { border-color: #fde68a !important; }
html[data-theme="light"]   .border-amber-200,
html[data-theme="litellm"] .border-amber-200 { border-color: #fcd34d !important; }
html[data-theme="light"]   .border-amber-300,
html[data-theme="litellm"] .border-amber-300 { border-color: #fbbf24 !important; }
html[data-theme="light"]   .hover\:bg-amber-50:hover,
html[data-theme="litellm"] .hover\:bg-amber-50:hover { background-color: #fffbeb !important; }
html[data-theme="light"]   .border-red-100,
html[data-theme="litellm"] .border-red-100 { border-color: #fecaca !important; }
html[data-theme="light"]   .border-red-200,
html[data-theme="litellm"] .border-red-200 { border-color: #fca5a5 !important; }
html[data-theme="light"]   .border-red-300,
html[data-theme="litellm"] .border-red-300 { border-color: #f87171 !important; }
html[data-theme="light"]   .hover\:bg-red-50:hover,
html[data-theme="litellm"] .hover\:bg-red-50:hover { background-color: #fef2f2 !important; }
html[data-theme="light"]   .border-blue-200,
html[data-theme="litellm"] .border-blue-200 { border-color: #93c5fd !important; }
html[data-theme="light"]   .border-blue-300,
html[data-theme="litellm"] .border-blue-300 { border-color: #60a5fa !important; }

/* Indigo / violet / purple borders — accent-anchored, per-theme */
html[data-theme="light"] .border-indigo-50  { border-color: rgba(168,112,14,0.18) !important; }
html[data-theme="light"] .border-indigo-100 { border-color: rgba(168,112,14,0.28) !important; }
html[data-theme="light"] .border-indigo-200 { border-color: rgba(168,112,14,0.42) !important; }
html[data-theme="light"] .border-indigo-300 { border-color: rgba(168,112,14,0.55) !important; }
html[data-theme="light"] .border-indigo-500 { border-color: var(--amber) !important; }
html[data-theme="light"] .border-indigo-900 { border-color: rgba(168,112,14,0.25) !important; }
html[data-theme="light"] .border-violet-100 { border-color: rgba(168,112,14,0.24) !important; }
html[data-theme="light"] .border-violet-200 { border-color: rgba(168,112,14,0.38) !important; }

html[data-theme="litellm"] .border-indigo-50  { border-color: rgba(37,99,235,0.16) !important; }
html[data-theme="litellm"] .border-indigo-100 { border-color: rgba(37,99,235,0.26) !important; }
html[data-theme="litellm"] .border-indigo-200 { border-color: rgba(37,99,235,0.40) !important; }
html[data-theme="litellm"] .border-indigo-300 { border-color: rgba(37,99,235,0.55) !important; }
html[data-theme="litellm"] .border-indigo-500 { border-color: var(--amber) !important; }
html[data-theme="litellm"] .border-indigo-900 { border-color: rgba(37,99,235,0.25) !important; }
html[data-theme="litellm"] .border-violet-100 { border-color: rgba(37,99,235,0.24) !important; }
html[data-theme="litellm"] .border-violet-200 { border-color: rgba(37,99,235,0.38) !important; }

/* Filled accent buttons (indigo remap) — per-theme: amber for `light`, blue for `litellm` */
html[data-theme="light"] .bg-indigo-600                  { background-color: var(--amber)  !important; }
html[data-theme="light"] .bg-indigo-500                  { background-color: #c18110       !important; }
html[data-theme="light"] .hover\:bg-indigo-700:hover     { background-color: #8a5a0a       !important; }
html[data-theme="light"] .hover\:bg-indigo-600:hover     { background-color: var(--amber)  !important; }
html[data-theme="light"] .hover\:bg-indigo-500:hover     { background-color: #c18110       !important; }
html[data-theme="light"] .focus\:ring-indigo-300:focus   { --tw-ring-color: rgba(168,112,14,0.4) !important; }

html[data-theme="litellm"] .bg-indigo-600                  { background-color: var(--amber)  !important; }
html[data-theme="litellm"] .bg-indigo-500                  { background-color: #3b82f6       !important; }
html[data-theme="litellm"] .hover\:bg-indigo-700:hover     { background-color: #1d4ed8       !important; }
html[data-theme="litellm"] .hover\:bg-indigo-600:hover     { background-color: var(--amber)  !important; }
html[data-theme="litellm"] .hover\:bg-indigo-500:hover     { background-color: #3b82f6       !important; }
html[data-theme="litellm"] .focus\:ring-indigo-300:focus   { --tw-ring-color: rgba(37,99,235,0.4) !important; }

/* Hover neutrals — both light themes route through --surface2 */
html[data-theme="light"]   .hover\:bg-gray-50:hover,
html[data-theme="litellm"] .hover\:bg-gray-50:hover  { background-color: var(--surface2) !important; }
html[data-theme="light"]   .hover\:bg-gray-100:hover,
html[data-theme="litellm"] .hover\:bg-gray-100:hover { background-color: var(--surface2) !important; }

/* Sticky nav — desktop nav links & user menu trigger were styled for dark nav.
   Re-tune only inside <nav> so body content with the same utilities isn't
   affected. Shared across both light themes — the slate hover/bg values land in
   the same Tailwind-default visual range under either palette. */
html[data-theme="light"]   nav .text-slate-300,
html[data-theme="litellm"] nav .text-slate-300   { color: #475569 !important; }
html[data-theme="light"]   nav .text-slate-400,
html[data-theme="litellm"] nav .text-slate-400   { color: #64748b !important; }
html[data-theme="light"]   nav .text-slate-500,
html[data-theme="litellm"] nav .text-slate-500   { color: #64748b !important; }
html[data-theme="light"]   nav .text-amber-400,
html[data-theme="litellm"] nav .text-amber-400   { color: var(--amber) !important; }
html[data-theme="light"]   nav .hover\:bg-slate-700:hover,
html[data-theme="litellm"] nav .hover\:bg-slate-700:hover { background-color: #f1f5f9 !important; }
html[data-theme="light"]   nav .hover\:bg-slate-600:hover,
html[data-theme="litellm"] nav .hover\:bg-slate-600:hover { background-color: #e2e8f0 !important; }
html[data-theme="light"]   nav .bg-slate-700,
html[data-theme="litellm"] nav .bg-slate-700              { background-color: #e2e8f0 !important; }
html[data-theme="light"]   nav .bg-slate-600,
html[data-theme="litellm"] nav .bg-slate-600              { background-color: #cbd5e1 !important; }
html[data-theme="light"]   nav .text-amber-300,
html[data-theme="litellm"] nav .text-amber-300            { color: var(--amber) !important; }
html[data-theme="light"]   nav .hover\:text-white:hover,
html[data-theme="litellm"] nav .hover\:text-white:hover   { color: #0f172a !important; }

/* Favorites now live in the nav ★ popover (markup in index.html), which reuses
   the already-theme-mapped nav-popover classes (bg-white / text-gray-* /
   hover:bg-gray-50 / border-gray-100). The old .favbar / .favtoggle chip-bar
   rules were removed with that bar. */

/* Form inputs — border value differs (cream warm vs. slate cool) */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  border-color: rgba(30,25,20,0.14) !important;
}
html[data-theme="litellm"] input[type="text"],
html[data-theme="litellm"] input[type="email"],
html[data-theme="litellm"] input[type="password"],
html[data-theme="litellm"] input[type="url"],
html[data-theme="litellm"] input[type="number"],
html[data-theme="litellm"] input[type="search"],
html[data-theme="litellm"] select,
html[data-theme="litellm"] textarea {
  border-color: rgba(15,23,42,0.12) !important;
}
html[data-theme="light"]   input::placeholder,
html[data-theme="light"]   textarea::placeholder,
html[data-theme="litellm"] input::placeholder,
html[data-theme="litellm"] textarea::placeholder { color: #9ca3af !important; }
html[data-theme="light"]   select option { background: #ffffff; color: #1c1915; }
html[data-theme="litellm"] select option { background: #ffffff; color: #0f172a; }

/* Native date/time inputs — adopt the light color scheme (shared) */
html[data-theme="light"]   input[type="time"],
html[data-theme="light"]   input[type="date"],
html[data-theme="light"]   input[type="datetime-local"],
html[data-theme="litellm"] input[type="time"],
html[data-theme="litellm"] input[type="date"],
html[data-theme="litellm"] input[type="datetime-local"] {
  background-color: var(--surface);
  color: var(--text);
  color-scheme: light;
}
html[data-theme="light"]   input[type="time"]:disabled,
html[data-theme="light"]   input[type="date"]:disabled,
html[data-theme="light"]   input[type="datetime-local"]:disabled,
html[data-theme="litellm"] input[type="time"]:disabled,
html[data-theme="litellm"] input[type="date"]:disabled,
html[data-theme="litellm"] input[type="datetime-local"]:disabled {
  background-color: var(--surface2) !important;
  color: var(--text-muted) !important;
}

/* expanded-content and sse-output blocks — hardcoded dark in the main index.html
   <style>; override to keep prose legible in light mode. */
html[data-theme="light"]   .expanded-content { background: #f5f1e5 !important; color: var(--text-muted) !important; }
html[data-theme="litellm"] .expanded-content { background: #f8fafc !important; color: var(--text-muted) !important; }
html[data-theme="light"]   .sse-output,
html[data-theme="litellm"] .sse-output       { background: var(--surface) !important; color: #047857 !important; border-color: var(--border) !important; }
html[data-theme="light"]   .log-row:hover,
html[data-theme="litellm"] .log-row:hover    { background-color: var(--surface2) !important; }

/* Ask prose — code chips/blockquotes use accent rgba; per-theme so the hue
   matches the brand accent (amber rgba for `light`, blue rgba for `litellm`). */
html[data-theme="light"] .ask-prose code {
  background: rgba(168,112,14,0.10);
  border-color: rgba(168,112,14,0.24);
  color: var(--amber);
}
html[data-theme="light"] .ask-prose blockquote { border-left-color: rgba(168,112,14,0.35); }

html[data-theme="litellm"] .ask-prose code {
  background: rgba(37,99,235,0.08);
  border-color: rgba(37,99,235,0.22);
  color: var(--amber);
}
html[data-theme="litellm"] .ask-prose blockquote { border-left-color: rgba(37,99,235,0.35); }

/* Customers table sticky cells on churn-risk rows. The base rules in index.html's
   <style> block precompute opaque "dark body + red tint" colors (#26191a /
   #321e1e) so the frozen checkbox + customer-name cells preserve the row tint
   when scrolled. Under light themes those values render as dark bands over the
   light body — repaint with light-blended equivalents. */
html[data-theme="light"]   .customers-tbody .customers-churn-row td.col-sticky,
html[data-theme="light"]   tr.customers-churn-row td.col-sticky          { background-color: #f6e6df !important; }
html[data-theme="light"]   .customers-tbody:hover .customers-churn-row td.col-sticky { background-color: #ebccc2 !important; }
html[data-theme="litellm"] .customers-tbody .customers-churn-row td.col-sticky,
html[data-theme="litellm"] tr.customers-churn-row td.col-sticky          { background-color: #faecec !important; }
html[data-theme="litellm"] .customers-tbody:hover .customers-churn-row td.col-sticky { background-color: #e9d1d4 !important; }

/* ── LiteLLM-dark accent overrides ─────────────────────────────────────────
   The default dark theme bakes amber rgba(212,144,26,…) into many indigo /
   violet / purple / accent rules. Under litellm-dark the accent is blue, so
   re-paint those sites with blue-rgba(59,130,246,…). Surface/border/text
   rules from the default-dark section pass through unchanged — they use
   white-rgba which reads correctly on cool slate too. */
html[data-theme="litellm-dark"] .bg-indigo-500              { background-color: #2563eb !important; }
html[data-theme="litellm-dark"] .hover\:bg-indigo-700:hover { background-color: #1d4ed8 !important; }
html[data-theme="litellm-dark"] .hover\:bg-indigo-500:hover { background-color: #2563eb !important; }
html[data-theme="litellm-dark"] .focus\:ring-indigo-300:focus { --tw-ring-color: rgba(59,130,246,0.4) !important; }

html[data-theme="litellm-dark"] .bg-indigo-50     { background-color: rgba(59,130,246,0.10) !important; }
html[data-theme="litellm-dark"] .bg-indigo-100    { background-color: rgba(59,130,246,0.18) !important; }
html[data-theme="litellm-dark"] .bg-indigo-50\/20 { background-color: rgba(59,130,246,0.06) !important; }
html[data-theme="litellm-dark"] .bg-indigo-50\/40 { background-color: rgba(59,130,246,0.14) !important; }
html[data-theme="litellm-dark"] .bg-indigo-200    { background-color: rgba(59,130,246,0.26) !important; }
html[data-theme="litellm-dark"] .bg-violet-50     { background-color: rgba(59,130,246,0.08) !important; }
html[data-theme="litellm-dark"] .bg-violet-100    { background-color: rgba(59,130,246,0.14) !important; }
html[data-theme="litellm-dark"] .bg-violet-200    { background-color: rgba(59,130,246,0.22) !important; }

html[data-theme="litellm-dark"] .border-indigo-50  { border-color: rgba(59,130,246,0.16) !important; }
html[data-theme="litellm-dark"] .border-indigo-100 { border-color: rgba(59,130,246,0.26) !important; }
html[data-theme="litellm-dark"] .border-indigo-200 { border-color: rgba(59,130,246,0.40) !important; }
html[data-theme="litellm-dark"] .border-indigo-300 { border-color: rgba(59,130,246,0.55) !important; }
html[data-theme="litellm-dark"] .border-indigo-500 { border-color: var(--amber) !important; }
html[data-theme="litellm-dark"] .border-indigo-900 { border-color: rgba(59,130,246,0.25) !important; }
html[data-theme="litellm-dark"] .border-violet-100 { border-color: rgba(59,130,246,0.24) !important; }
html[data-theme="litellm-dark"] .border-violet-200 { border-color: rgba(59,130,246,0.38) !important; }

/* Ask-prose accent rgba (default-dark uses amber) → blue under litellm-dark */
html[data-theme="litellm-dark"] .ask-prose code {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.22);
  color: var(--amber-light);
}
html[data-theme="litellm-dark"] .ask-prose blockquote { border-left-color: rgba(59,130,246,0.35); }
html[data-theme="litellm-dark"] .ask-prose .ask-customer-link:hover code {
  background: rgba(59,130,246,0.22);
  border-color: rgba(59,130,246,0.45);
  color: var(--amber);
}
html[data-theme="litellm-dark"] .ask-suggestion-btn:not(.ask-starter-card):hover {
  background: rgba(59,130,246,0.12) !important;
  border-color: rgba(59,130,246,0.35) !important;
}

/* =============================================================================
   Landing-page component library (dark-only)
   Classes used exclusively by landing.html.
   ============================================================================= */

/* ── Hero glow ────────────────────────────────────────────────────────────── */
.hero-glow { background: radial-gradient(ellipse 100% 60% at 50% -5%, rgba(99,102,241,0.20) 0%, transparent 65%); }

/* ── Nav ──────────────────────────────────────────────────────────────────── */

/* ── Card base ────────────────────────────────────────────────────────────── */

/* ── Mock UI chrome ───────────────────────────────────────────────────────── */

/* ── Health track ─────────────────────────────────────────────────────────── */

/* ── Row tints ────────────────────────────────────────────────────────────── */

/* ── Sections ─────────────────────────────────────────────────────────────── */

/* ── Comparison cards ─────────────────────────────────────────────────────── */

/* ── Pipeline stages ──────────────────────────────────────────────────────── */

/* ── Pipeline flow indicator ──────────────────────────────────────────────── */

/* ── Featured cards ───────────────────────────────────────────────────────── */

/* ── Security diagram ─────────────────────────────────────────────────────── */

/* ── Pricing toggle ───────────────────────────────────────────────────────── */

/* =============================================================================
   Sync process-map grid (Data Sync settings section), LIVE: each phase card carries a status + progress.
   All values resolve from theme variables, so light themes inherit correctly
   and check_theme.py never sees a hard-coded light tint to flag.
   ============================================================================= */

/* Overall ETA / elapsed header bar */
.sf-overall       { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sf-overall-label { font-size:11px; color:var(--text-dim); }
.sf-overall-val   { font-size:12px; color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.sf-overall-track { height:6px; background:var(--surface2); border-radius:4px; overflow:hidden; flex:1 1 120px; min-width:120px; }
.sf-overall-fill  { height:100%; background:var(--amber); border-radius:4px; transition:width .3s ease; }
.sf-stall         { font-size:11px; color:var(--amber); font-weight:600; }

/* Sync task timeline. States come from the saved run, never console wording. */
.sync-task-panel { color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.sync-task-overview { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 24px; border-bottom:1px solid var(--border); }
.sync-task-eyebrow { margin:0 0 5px; color:var(--text-dim); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; }
.sync-task-overview h3 { margin:0; color:var(--text); font-size:20px; line-height:1.35; font-weight:600; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.sync-task-warning-badge { font-size:10px; font-weight:600; color:var(--amber); background:rgba(212,144,26,.12); padding:3px 7px; border-radius:4px; }
.sync-task-run-meta { margin:7px 0 0; color:var(--text-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.sync-task-connection { display:flex; gap:7px; align-items:center; color:var(--text-muted); font-size:11px; line-height:1.5; padding-top:5px; }
.sync-task-connection.is-stale { color:var(--amber); }
.sync-task-heartbeat-dot { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:var(--text-dim); }
.sync-task-heartbeat-dot.is-live { background:var(--green); }
.sync-task-notice, .sync-task-empty, .sync-task-backlog { padding:12px 24px; margin:0; color:var(--text-muted); font-size:12px; line-height:1.6; }
.sync-task-notice { background:rgba(212,144,26,.07); color:var(--amber); }
.sync-task-current { padding:16px 24px; background:var(--surface2); border-bottom:1px solid var(--border); }
.sync-task-current-heading { margin-bottom:8px; font-size:10px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.sync-task-current-item { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; font-size:12px; line-height:1.65; }
.sync-task-current-item + .sync-task-current-item { margin-top:10px; }
.sync-task-current-item strong { font-weight:600; color:var(--text); }
.sync-task-current-item > span { color:var(--text-muted); }
.sync-task-current-item .sync-task-last-progress { flex-basis:100%; }
.sync-task-group { border-bottom:1px solid var(--border); padding:17px 24px 18px; }
.sync-task-group:last-child { border-bottom:0; }
.sync-task-group-heading { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sync-task-group-heading h4 { font-size:13px; font-weight:600; flex:1; min-width:0; margin:0; }
.sync-task-expand { border:0; padding:2px 0; background:transparent; color:var(--text-muted); font-size:10px; text-decoration:underline; text-underline-offset:3px; flex-shrink:0; }
.sync-task-expand:hover { color:var(--text); }
.sync-task-expand[aria-disabled="true"] { color:var(--text-dim); text-decoration:none; cursor:default; }
.sync-task-expand:focus-visible { outline:2px solid var(--amber); outline-offset:4px; border-radius:2px; }
.sync-task-group-summary { margin:0 0 8px 33px; color:var(--text-dim); font-size:10px; line-height:1.6; font-variant-numeric:tabular-nums; }
.sync-task-group-number { display:flex; justify-content:center; align-items:center; width:23px; height:23px; flex:0 0 23px; border:1px solid var(--border-strong); border-radius:50%; color:var(--text-muted); font-size:10px; font-variant-numeric:tabular-nums; }
.sync-task-group[data-state="completed"] .sync-task-group-number { border-color:var(--green); color:var(--green); }
.sync-task-group[data-state="running"] .sync-task-group-number { border-color:var(--amber); color:var(--amber); }
.sync-task-group[data-state="warning"] .sync-task-group-number { border-color:var(--amber); color:var(--amber); }
.sync-task-list { list-style:none; padding:0 0 0 33px; margin:0; }
.sync-task-row { padding:7px 0; min-width:0; }
.sync-task-row.is-child { padding-left:calc(var(--task-depth) * 14px); }
.sync-task-row-heading { display:flex; align-items:baseline; gap:9px; line-height:1.5; font-size:12px; }
.sync-task-mark { width:12px; flex:0 0 12px; text-align:center; color:var(--text-dim); font-size:12px; }
.sync-task-label { flex:1; min-width:0; overflow-wrap:anywhere; color:var(--text-muted); }
.sync-task-state { color:var(--text-dim); font-size:10px; line-height:1.5; white-space:nowrap; }
.sync-task-state[data-state="running"] { color:var(--amber); font-weight:600; }
.sync-task-state[data-state="warning"] { color:var(--amber); }
.sync-task-state[data-state="completed"] { color:var(--green); }
.sync-task-state[data-state="failed"], .sync-task-state[data-state="interrupted"] { color:#d4677f; }
.sync-task-row[data-state="completed"] > .sync-task-row-heading > .sync-task-mark { color:var(--green); }
.sync-task-row[data-state="running"] > .sync-task-row-heading > .sync-task-mark { color:var(--amber); }
.sync-task-row[data-state="running"] > .sync-task-row-heading > .sync-task-label { color:var(--text); font-weight:600; }
.sync-task-row[data-state="failed"] > .sync-task-row-heading > .sync-task-mark,
.sync-task-row[data-state="interrupted"] > .sync-task-row-heading > .sync-task-mark { color:#d4677f; }
.sync-task-duration { color:var(--text-dim); font-size:10px; min-width:42px; text-align:right; font-variant-numeric:tabular-nums; }
.sync-task-detail, .sync-task-last-progress, .sync-task-error, .sync-task-explicit-wait { margin:4px 0 0 21px; color:var(--text-muted); font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.sync-task-last-progress { color:var(--text-dim); font-variant-numeric:tabular-nums; }
.sync-task-current-item .sync-task-last-progress { margin:0; }
.sync-task-error { color:#d4677f; }
.sync-task-row.is-advisory .sync-task-state[data-state="failed"],
.sync-task-row.is-advisory .sync-task-error,
.sync-task-row.is-advisory[data-state="failed"] > .sync-task-row-heading > .sync-task-mark { color:var(--amber); }
.sync-task-explicit-wait { color:var(--amber); }
.sync-task-counter { margin:7px 0 0 21px; font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.sync-task-counter-track { max-width:420px; height:4px; background:var(--border); border-radius:2px; margin-top:6px; overflow:hidden; }
.sync-task-counter-track > span { display:block; height:100%; background:var(--amber); border-radius:inherit; }
.sync-task-row[data-state="completed"] .sync-task-counter-track > span { background:var(--green); }
.sync-task-saving { display:block; color:var(--text-dim); margin-top:4px; }
.sync-task-backlog { border-top:1px solid var(--border); }
@media(max-width:640px) {
  .sync-task-overview { display:block; padding:18px 16px; }
  .sync-task-overview h3 { font-size:18px; }
  .sync-task-connection { padding-top:10px; }
  .sync-task-current, .sync-task-group { padding:15px 16px; }
  .sync-task-notice, .sync-task-empty, .sync-task-backlog { padding:12px 16px; }
  .sync-task-list { padding-left:0; }
  .sync-task-row.is-child { padding-left:calc(var(--task-depth) * 9px); }
  .sync-task-row-heading { gap:7px; }
  .sync-task-duration { min-width:32px; }
}

/* The preparation grid — every phase visible top-down; reflows on mobile.
   min(100%, 280px) clamps the track floor to the container width so the 280px
   minimum can never force horizontal overflow on the narrowest phones. */
.sf-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:12px; }

.sf-card { background:var(--surface); border:1px solid var(--border); border-left-width:3px; border-left-color:var(--border-strong); border-radius:10px; padding:13px 15px; display:flex; flex-direction:column; gap:8px; transition:border-color .2s, box-shadow .2s, opacity .2s; }
.sf-card-head { display:flex; align-items:center; gap:9px; }
.sf-num   { width:22px; height:22px; border-radius:6px; background:var(--surface2); border:1px solid var(--border); color:var(--text-muted); font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.sf-title { font-size:13px; font-weight:600; color:var(--text); flex:1; min-width:0; }
.sf-desc  { font-size:11px; color:var(--text-muted); line-height:1.5; }

/* Status accents on the card's left rail + dimming for not-yet-run phases */
.sf-pending { opacity:.72; }
.sf-active  { border-left-color:var(--amber); box-shadow:0 0 0 1px rgba(212,144,26,0.16); }
.sf-done    { border-left-color:var(--green); }
.sf-error   { border-left-color:#d4677f; background:rgba(212,103,127,0.06); }
/* A step that was deliberately not run — the data preparation map's fourth
   outcome ("already being rebuilt in the background"). Distinct from pending:
   pending means "not yet", skipped means "not this time, and here is why". */
.sf-skipped { border-left-color:var(--text-dim); opacity:.85; }

/* Status badge */
.sf-badge { font-size:9.5px; font-weight:600; padding:1px 7px; border-radius:5px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.sf-badge-pending { background:var(--surface2); color:var(--text-dim); }
.sf-badge-active  { background:rgba(212,144,26,0.18); color:var(--amber-light); }
.sf-badge-done    { background:rgba(82,168,118,0.18);  color:var(--green); }
.sf-badge-error   { background:rgba(212,103,127,0.18); color:#e08aa0; }
.sf-badge-skipped { background:var(--surface2); color:var(--text-muted); }

/* Live progress bar */
.sf-prog       { display:flex; align-items:center; gap:8px; }
.sf-prog-track { height:6px; background:var(--surface2); border-radius:4px; overflow:hidden; flex:1; }
.sf-prog-fill  { height:100%; background:var(--amber); border-radius:4px; transition:width .3s ease; }
.sf-done .sf-prog-fill { background:var(--green); }
/* Pulse animation shown while the bar is frozen waiting for an upstream response */
.sf-prog-fill.is-waiting { animation:sf-wait-pulse 1.8s ease-in-out infinite; }
@keyframes sf-wait-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.sf-progress-label { font-size:10px; color:var(--text-dim); }
.sf-prog-fill.is-indeterminate { animation:sf-progress-slide 1.6s ease-in-out infinite alternate; transition:none; }
@keyframes sf-progress-slide { from { transform:translateX(0); } to { transform:translateX(230%); } }
@media (prefers-reduced-motion:reduce) {
  .sf-prog-fill.is-indeterminate, .sf-prog-fill.is-waiting { animation:none; }
}
.sf-prog-pct   { font-size:10px; color:var(--text-dim); font-variant-numeric:tabular-nums; flex-shrink:0; }

/* Latest live detail line (the raw sub-step text) */
.sf-detail { font-family:var(--font-ui); font-size:10.5px; color:var(--text-muted); white-space:pre-wrap; word-break:break-word; line-height:1.5; }

/* Sub-step mini-list */
.sf-subs { display:flex; flex-direction:column; gap:3px; margin:0; padding:0; list-style:none; }
.sf-sub  { display:flex; gap:6px; align-items:baseline; font-size:10.5px; color:var(--text-dim); }
.sf-sub.is-active { color:var(--amber-light); }
.sf-sub-tag   { font-family:var(--font-ui); font-size:9px; color:var(--text-dim); background:var(--surface2); border-radius:3px; padding:0 4px; flex-shrink:0; }
.sf-sub.is-active .sf-sub-tag { background:rgba(212,144,26,0.18); color:var(--amber-light); }
.sf-sub-label { min-width:0; }

/* Timing footer */
.sf-time     { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:10px; color:var(--text-dim); margin-top:auto; padding-top:6px; border-top:1px solid var(--border); }
.sf-time-exp { color:var(--text-muted); }
.sf-time-over { color:#e08aa0; }
/* .sf-cite (source-file citation) removed — the phase cards describe the work,
   not the code that performs it. */

/* =============================================================================
   Ask view
   ============================================================================= */

/* Thinking-state ambient background — the brand grid (logo-grid-field.svg)
   expanded full-bleed across the chat, heavily blurred to a hint of tiles and
   held at a low opacity. Fades in only while a response is in flight (askLoading),
   the ambient twin of the animated avatar mark. z-index:0 sits it above the chat's
   --bg fill but below the message content (.ask-thinking-field's parent is isolated
   and the scroll area is raised to z-index:1). */
.ask-thinking-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.ask-thinking-field.is-active { opacity: 1; }
.ask-thinking-field img {
  position: absolute;
  top: -12%; left: -12%;
  width: 124%; height: 124%;       /* overscan so the blur never shows a hard edge */
  max-width: none;                 /* Tailwind preflight's img{max-width:100%} would
                                       otherwise clamp this back to 100%, leaving the
                                       right edge uncovered (a hard dark stripe) */
  object-fit: cover;
  filter: blur(38px) saturate(1.04);
  /* soft elliptical vignette so the field dissolves toward the chat's edges */
  -webkit-mask-image: radial-gradient(ellipse 86% 78% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 86% 78% at 50% 40%, #000 30%, transparent 100%);
  /* the real subtlety lever — on top of the SVG cells' already-low alphas; breathes slowly */
  animation: askFieldBreath 11s ease-in-out infinite;
}
@keyframes askFieldBreath {
  0%, 100% { opacity: 0.07; }
  50%      { opacity: 0.115; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-thinking-field { transition: none; }
  .ask-thinking-field img { animation: none; opacity: 0.085; }
}


/* ── Ask chat shell (2026-09-05 redesign) ─────────────────────────────────
   Conventions borrowed from the mainstream chat products, because that is
   what members arrive trained on: "New chat" is the FIRST item of the
   sidebar (and an icon in the collapsed rail / phone top bar); the composer's
   leading control is "+" = add to THIS message; a slim in-flow thread header
   names the open conversation; and the empty state centres the composer with
   the greeting so a fresh thread looks unlike an open one.
   Regression: scripts/check_ask_shell.py. */
.ask-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px; line-height: 0;
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; transition: background .15s, color .15s;
}
.ask-icon-btn:hover { background: var(--surface2); color: var(--text); }
/* Header row: panel toggle + New chat, one row (the label row above it is
   gone — the list names itself). */
.ask-sidebar-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px 2px 8px; }
/* The sidebar's primary action, as a FILLED amber tint: the search field
   right below it is an outlined box of the same width, and two outlined
   boxes stacked read as the same kind of thing. */
.ask-new-conv-btn {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
  background: color-mix(in srgb, var(--amber) 13%, var(--surface));
  color: var(--text);
  font-size: 12px; font-weight: 500; text-align: left; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ask-new-conv-btn svg { color: color-mix(in srgb, var(--amber) 70%, var(--text)); }
.ask-new-conv-btn:hover {
  background: color-mix(in srgb, var(--amber) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--amber) 55%, transparent);
}
/* Filters row: a segmented choice (whose chats) and a toggle chip
   (Highlighted) — two shapes for two kinds of control. */
.ask-sidebar-filters { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; }
.ask-segmented {
  flex: 1 1 auto; min-width: 0; max-width: 240px;
  display: flex; padding: 2px; gap: 2px; border-radius: 7px;
  background: var(--bg); border: 1px solid var(--border);
}
.ask-segmented-btn {
  flex: 1 1 0; min-width: 0;
  border: none; background: transparent; cursor: pointer;
  padding: 3px 8px; border-radius: 5px; min-height: 26px;
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .15s, color .15s;
}
.ask-segmented-btn:hover { color: var(--text); }
.ask-segmented-btn[aria-pressed="true"] {
  background: var(--surface2); color: var(--text);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.ask-filter-chip {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px; min-height: 28px; cursor: pointer;
  border: 1px dashed var(--border-strong); background: transparent;
  font-size: 12px; color: var(--text-muted);
  transition: background .15s, color .15s, border-color .15s;
}
.ask-filter-chip.is-icon { padding: 0; width: 32px; border-radius: 7px; }
.ask-filter-chip:hover { color: var(--text); border-color: var(--text-dim); }
.ask-filter-chip[aria-pressed="true"] {
  border-style: solid; color: var(--text);
  border-color: color-mix(in srgb, var(--amber) 50%, transparent);
  background: color-mix(in srgb, var(--amber) 13%, transparent);
}
.ask-filter-chip[aria-pressed="true"] svg { color: color-mix(in srgb, var(--amber) 70%, var(--text)); }
/* Date-group headings: smaller, bolder and dimmer than the titles under
   them, so the list reads as groups rather than one run of same-weight
   lines. Sentence case stays (b69d47de). */
.ask-history-heading {
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  color: color-mix(in srgb, var(--text) 58%, var(--bg));
  padding-top: 18px; padding-bottom: 4px;
}
.ask-sidebar-nav-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 10px; border-radius: 5px; border: none; background: transparent;
  font-size: 12px; color: var(--text-muted); text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.ask-sidebar-nav-row:hover { background: var(--surface2); color: var(--text); }
.ask-sidebar-nav-count {
  font-size: 10px; font-variant-numeric: tabular-nums; color: var(--text-dim);
  background: var(--surface2); border-radius: 99px; padding: 1px 7px;
}
/* Collapsed sidebar rail — same surface + border as the panel it stands in for. */
.ask-rail {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 44px; height: 100%; padding: 8px 0;
  background: var(--surface); border-right: 1px solid var(--border);
}
.ask-rail-new { color: var(--amber); }
.ask-rail-new:hover { background: rgba(212,144,26,0.12); color: var(--amber); }

/* Thread header — slim, borderless, in flow. It WRAPS: the title block
   asks for 220px before it shares a row with the actions, so when the chat
   column is too narrow for both (the answer panel open at a laptop width
   leaves ~210px) the actions drop to a second row, right-aligned, and wrap
   among themselves if they must. Until 2026-11-07 the title block's basis was
   0 and the actions never shrank, so in that state the "started by" chip was
   drawn over the first action. */
.ask-thread-header {
  position: relative; z-index: 12;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  min-height: 46px; padding: 7px 12px 7px 14px;
}
.ask-thread-header .ask-thread-identity { flex: 1 1 220px; }
.ask-thread-header .ask-thread-actions {
  flex-shrink: 1; min-width: 0; max-width: 100%;
  flex-wrap: wrap; justify-content: flex-end; margin-left: auto;
}
.ask-thread-title {
  max-width: 100%; background: transparent; border: none; border-radius: 5px;
  padding: 4px 7px; font-size: 13px; font-weight: 500; color: var(--text);
  text-align: left; cursor: default;
}
.ask-thread-title.is-own { cursor: text; }
.ask-thread-title.is-own:hover { background: var(--surface2); }
.ask-thread-title-input {
  width: min(100%, 420px); padding: 4px 7px; border-radius: 5px; font-size: 13px; font-weight: 500;
  background: var(--bg); border: 1px solid var(--amber); color: var(--text); outline: none;
}
.ask-thread-title-new { font-size: 13px; font-weight: 500; color: var(--text-dim); padding: 4px 7px; }
/* The title gives way first (the chip does not shrink); the chip is only
   capped at the title block's width, where its name truncates. */
.ask-thread-owner { display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 20px; max-width: 100%; overflow: hidden; font-size: 11px; color: var(--text-dim); }
.ask-thread-owner .ask-avatar { flex: none; }
.ask-thread-owner-name { max-width: 180px; min-width: 0; }
/* Phones: the header also carries the drawer toggle and a new-chat icon,
   so the starter keeps the avatar and drops the name (the note above the
   composer still spells it out). */
@media (max-width: 899px) { .ask-thread-owner-name { display: none; } }
.ask-header-more, .ask-header-icon { padding: 5px 7px; justify-content: center; }

/* Composer "+" — same ghost square as its siblings; the menu it opens is
   the shared .ask-ctx-menu, whose items may carry a second `hint` line. */
.ask-composer-add:hover:not(:disabled) { color: var(--text); }
.ask-ctx-menu button .ask-ctx-hint { display: block; font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }

/* Above the composer, only inside a teammate's thread: the fact and the exit. */
.ask-foreign-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 4px 7px; font-size: 11px; color: var(--text-muted);
}
.ask-foreign-note .ask-avatar.sm { width: 16px; height: 16px; font-size: 7px; }
.ask-foreign-note-link {
  background: transparent; border: none; padding: 0; cursor: pointer;
  font-size: 11px; font-weight: 500; color: var(--amber);
}
.ask-foreign-note-link:hover { text-decoration: underline; }

/* Composer bar (bottom-anchored in an open thread). */
.ask-composer-bar {
  position: relative; z-index: 10;
  border-top: 1px solid var(--border); background: var(--surface);
  padding-top: 10px; padding-bottom: 12px;
}
/* Starter cards sit under the centred composer in the empty state: a 2×2
   grid of equal cards (one column on a phone), each led by its topic. The
   tone tints only the topic line and the hover edge; the question stays in
   body ink. Every tone is a theme token, so High Contrast remaps it too. */
.ask-starter-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ask-starter-card {
  --tone: var(--text-dim);
  --tone-ink: var(--text-muted);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 10px 13px 11px; border-radius: 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color .15s, background .15s;
}
.ask-starter-card[data-tone="red"]    { --tone: var(--red);    --tone-ink: color-mix(in srgb, var(--red) 62%, var(--text)); }
.ask-starter-card[data-tone="orange"] { --tone: var(--orange); --tone-ink: color-mix(in srgb, var(--orange) 62%, var(--text)); }
.ask-starter-card[data-tone="green"]  { --tone: var(--green);  --tone-ink: color-mix(in srgb, var(--green) 62%, var(--text)); }
.ask-starter-card[data-tone="amber"]  { --tone: var(--amber);  --tone-ink: color-mix(in srgb, var(--amber) 62%, var(--text)); }
.ask-starter-card:hover {
  border-color: color-mix(in srgb, var(--tone) 55%, var(--border));
  background: color-mix(in srgb, var(--tone) 6%, var(--surface));
}
.ask-starter-topic {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--tone-ink);
}
.ask-starter-q { font-size: 13.5px; line-height: 1.45; color: var(--text); }
@media (max-width: 599px) {
  .ask-starter-chips { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ask-starter-card { padding: 9px 12px 10px; gap: 3px; }
}

/* Empty state: [header] [greeting ↓] [composer + chips] [spacer] — the
   scroll area pushes its content to its bottom edge with margin-top:auto (safe
   under overflow, unlike justify-content:flex-end); the spacer takes a slightly
   smaller share so the group sits just above centre. The bar drops its border
   and surface tint so it reads as a prompt, not a dock. Once the first message
   lands, is-empty clears and the composer is back at the bottom with its border.

   The scroll area is sized from its CONTENT (flex-basis auto, overriding the
   inline 0%), which is what makes the spacer free height rather than reserved
   height. With both on a 0 basis the two split the column by grow factor alone,
   so the scroll area got 54% of it whether its content fitted or not: opening
   the readiness detail put a scrollbar on the greeting while ~40% of the column
   below the starter chips stayed empty. On an auto basis the spacer only ever
   takes what is left over — and it can absorb none of an overflow, since
   negative free space is shared out by shrink factor x basis and its basis is
   0, which is why its shrink factor below is inert. */
.ask-chat.is-empty .ask-scroll { display: flex; flex-direction: column; flex: 1 1 auto !important; }
.ask-chat.is-empty .ask-empty { margin-top: auto; width: 100%; padding-bottom: 6px; }
.ask-chat.is-empty .ask-composer-bar { border-top: none; background: transparent; padding-top: 0; }
.ask-empty-spacer { flex: 0.85 1 0%; min-height: 0; }

/* Follow-up suggestion chips (the starter cards style their own hover). */
.ask-suggestion-btn:not(.ask-starter-card):hover { background: rgba(212,144,26,0.12) !important; border-color: rgba(212,144,26,0.35) !important; color: var(--text) !important; }

/* Textarea focus ring */
.ask-input:focus { border-color: var(--amber) !important; outline: none; }

/* Rendered markdown prose — ask view answers */
.ask-prose { font-size: 13px; color: var(--text); line-height: 1.7; }
.ask-prose p  { margin-bottom: 10px; color: var(--text-muted); }
.ask-prose p:last-child { margin-bottom: 0; }
.ask-prose strong { color: var(--text); font-weight: 500; }
.ask-prose em { color: var(--text-muted); font-style: italic; }
.ask-prose h1, .ask-prose h2, .ask-prose h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text);
  margin: 16px 0 6px;
  line-height: 1.2;
}
.ask-prose h1 { font-size: 1.1rem; }
.ask-prose h2 { font-size: 1rem; }
.ask-prose h3 { font-size: 0.95rem; }
.ask-prose ul, .ask-prose ol { padding-left: 18px; margin-bottom: 10px; }
.ask-prose li { color: var(--text-muted); margin-bottom: 4px; }
.ask-prose li strong { color: var(--text); }
.ask-prose code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(212,144,26,0.10);
  border: 1px solid rgba(212,144,26,0.20);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--amber-light);
}
.ask-prose pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  overflow-x: auto;
}
.ask-prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.ask-prose a { color: var(--amber); text-decoration: none; }
.ask-prose a:hover { color: var(--amber-light); }
.ask-prose .ask-customer-link { cursor: pointer; }
.ask-prose .ask-customer-link code { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ask-prose .ask-customer-link:hover code {
  background: rgba(212,144,26,0.22);
  border-color: rgba(212,144,26,0.45);
  color: var(--amber);
}
.ask-prose hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.ask-prose blockquote {
  border-left: 2px solid rgba(212,144,26,0.35);
  padding-left: 12px;
  margin: 0 0 10px;
  color: var(--text-dim);
  font-style: italic;
}
.ask-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 12px;
  display: block;
  overflow-x: auto;
}
.ask-prose th {
  background: var(--surface);
  padding: 6px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.ask-prose td {
  padding: 6px 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  vertical-align: top;
  line-height: 1.5;
}
.ask-prose tr:hover td { background: var(--surface); }

/* ── Ask page shell ──────────────────────────────────────────────────────
   A self-contained, fixed-height app pane: exactly the viewport minus the
   52px nav, with overflow:hidden so NOTHING here scrolls the document. The
   only scroller inside is the messages list (flex:1; min-height:0; overflow).
   This is what keeps the sidebar, header band and input bar fixed in place
   instead of the whole interface scrolling up with the page. dvh tracks the
   dynamic mobile-Safari viewport; the vh line is the fallback. Direct flex
   children (sidebar / resize handle / chat column / side panel) stretch to
   full height automatically, so they no longer need position:sticky. */
.ask-view {
  display: flex;
  /* Fixed-height shell: fills the viewport below the sticky header. The height
     is the real header height (--app-header-h, published by measureAppHeader)
     so the document itself never scrolls — without it a hardcoded 52px missed
     the nav's 1px bottom border and the page grew a stray full-height window
     scrollbar beside the chat scroller. 53px fallback = resting nav incl. border. */
  height: calc(100vh  - var(--app-header-h, 53px));
  height: calc(100dvh - var(--app-header-h, 53px));
  overflow: hidden;
}

/* Drag-to-resize handle between the sidebar and chat */
.ask-resize-handle {
  width: 5px;
  cursor: col-resize;
  background: transparent;
  height: 100%;
  z-index: 11;
  transition: background .15s;
}
.ask-resize-handle:hover, .ask-resize-handle:active { background: rgba(212,144,26,0.30); }

/* Sidebar conversation hover actions (rename / delete) */
.ask-conv-action:hover { color: var(--text) !important; background: var(--surface2) !important; }

/* Conversation row preview text runs the full row width by default (no
   reserved gutter). The pin/rename/delete icons only fade in on hover, so
   the title/preview text fades out under that same hover to avoid the two
   overlapping instead of permanently losing width to icons that are usually
   invisible. */
.group:hover .ask-conv-textwrap {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent 100%);
}

/* Message action bar (copy answer) */
.ask-msg-action {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-dim);
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  padding: 3px 7px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ask-msg-action:hover { background: var(--surface2); color: var(--text); border-color: var(--border); }

/* ── Ask composer — one bordered shell: [new chat] [textarea] [undo?|stop|send]
   Exact-line geometry: the textarea rests at exactly ONE 20px line
   (6px pad + 20px + 6px = 32px, border-box) and grows in whole-line steps to
   the max-height below — the same 240 ceiling askAutoGrow clamps to; keep the
   two in sync. Buttons are 32px squares matching the resting text row and
   pinned (align-items:flex-end) to the bottom edge, so they track the last
   text line as the box grows. Focus is drawn on the shell (:focus-within),
   never on the borderless textarea inside it. */
.ask-composer {
  display: flex; align-items: flex-end; gap: 4px;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.ask-composer:focus-within { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(212,144,26,0.22); }
.ask-composer-ta {
  flex: 1; min-width: 0;
  resize: none; border: none !important; outline: none;
  /* !important: the global `textarea { background-color … !important }` form
     rule above would otherwise paint an opaque box inside the shell */
  background-color: transparent !important;
  color: var(--text); font-family: var(--font-ui); font-weight: 300;
  font-size: 13px; line-height: 20px; padding: 6px 8px;
  min-height: 32px; max-height: 240px; overflow-y: auto;
}
.ask-composer-ta:disabled { opacity: .5; }
.ask-composer-ta::placeholder { color: var(--text-dim) !important; }
/* Effort sits between the textarea and the trailing buttons, so its focus
   ring is drawn INSIDE the select (negative offset) on a 28px box centred in
   the 32px row: an outset ring touched Send and the divider. The shell
   already turns amber on :focus-within, so the select's own cue is a fill
   plus a thin inset ring rather than a second heavy outline. */
.ask-effort-control {
  display: inline-flex; align-items: center; flex-shrink: 0;
  height: 32px; padding: 0 2px 0 10px; margin: 0 4px 0 2px; gap: 4px;
  border-left: 1px solid var(--border);
}
.ask-effort-caption { color: var(--text-dim); font-size: 11px; }
.ask-effort-select {
  width: 92px; height: 28px; padding: 0 4px 0 8px; border: none;
  border-radius: 6px; background-color: transparent !important;
  font: 500 12px var(--font-ui); cursor: pointer;
  transition: background-color .12s;
}
.ask-effort-select:hover:not(:disabled) { background-color: var(--surface2) !important; }
.ask-effort-select:focus { outline: none; }
.ask-effort-select:focus-visible {
  background-color: var(--surface2) !important;
  outline: 1.5px solid var(--amber); outline-offset: -1.5px;
}
.ask-effort-select:disabled { opacity: .55; cursor: default; }
.ask-effort-select option { background: var(--surface); color: var(--text); }
@media (max-width: 599px) {
  .ask-effort-caption { display: none; }
  .ask-effort-control { padding-left: 4px; margin-left: 0; }
}
.ask-composer-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px;
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; transition: background .15s, color .15s;
}
.ask-composer-btn:hover:not(:disabled) { background: var(--surface2); color: var(--amber); }
.ask-composer-btn:disabled { opacity: .4; cursor: default; }
.ask-composer-stop:hover:not(:disabled) { background: rgba(201,64,64,0.10); color: #e08a8a; }
.ask-composer-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--amber); border: none; color: var(--bg);
  cursor: pointer; transition: filter .15s, opacity .15s;
}
.ask-composer-send:hover:not(:disabled) { filter: brightness(1.12); }
.ask-composer-send:disabled { opacity: .35; cursor: default; }

/* ── Attached images ───────────────────────────────────────────────────────
   The strip is a SIBLING above .ask-composer, not a child: the composer is a
   single flex row and its first control has to stay the "+" (check_ask_shell).
   The two are made to read as one box here instead — shared border, shared
   surface, and the composer's top corners squared off while the strip is
   present. The adjacency selector is what carries that, so the markup needs
   no class binding (and the gate's literal `<div class="ask-composer">` stays
   matchable). */
.ask-attach-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 8px 4px;
  background: var(--bg);
  border: 1px solid var(--border-strong); border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.ask-attach-strip + .ask-composer { border-radius: 0 0 10px 10px; }
.ask-attach-chip {
  position: relative; width: 60px; height: 60px; border-radius: 8px;
  overflow: hidden; background: var(--surface2);
  border: 1px solid var(--border);
}
.ask-attach-chip.is-error { border-color: var(--orange); }
.ask-attach-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ask-attach-chip.is-uploading .ask-attach-thumb { opacity: .45; }
/* One overlay slot, two states: the spinner while it uploads, a bare "!" if
   it failed. The reason itself is one line under the composer — a tooltip is
   not where a blocked Send explains itself. */
.ask-attach-state {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); font-size: 15px; font-weight: 600;
  background: rgba(0,0,0,0.25);
}
.ask-attach-remove {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Scrim-level chrome over an arbitrary photo: fixed dark-on-light, not
     themed, because the thing behind it is the user's own image. */
  background: rgba(0,0,0,0.62); color: #fff; border: none;
  font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.ask-attach-remove:hover { background: rgba(0,0,0,0.85); }
/* Drop target: the whole composer column, outlined only while a drag is over
   it. pointer-events stay untouched — the highlight is a box-shadow, so it
   never intercepts the drop it is advertising. */
.is-dragover .ask-composer,
.is-dragover .ask-attach-strip { border-color: var(--amber); }
.is-dragover .ask-composer { box-shadow: 0 0 0 1px rgba(212,144,26,0.22); }

/* Thumbnails inside a sent message. The aspect ratio is inlined from the
   stored pixel size, so the row holds its height before the bytes arrive. */
.ask-msg-images {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.ask-msg-image {
  display: block; padding: 0; border: 1px solid rgba(212,144,26,0.28);
  border-radius: 6px; overflow: hidden; cursor: zoom-in;
  background: var(--surface2);
  max-width: 132px; max-height: 132px;
}
.ask-msg-images.is-single .ask-msg-image { max-width: 260px; max-height: 220px; }
.ask-msg-image > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ask-msg-image:hover { border-color: var(--amber); }

/* Attachment lightbox. Same scrim conventions as the images wall's
   (.images-lightbox): fixed light chrome over a dark scrim, because what is
   behind it is a photograph and not the app's surface. */
.ask-lightbox {
  position: fixed; inset: 0; z-index: 2000;  /* the images-wall lightbox tier */
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,0.82); cursor: zoom-out;
}
.ask-lightbox-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 6px; cursor: default;
}
/* A disc, not a bare glyph: the thing behind this is the reader's own
   picture, and a transparent ✕ lands on a white corner as often as a dark
   one. Same reasoning as .ask-attach-remove. */
.ask-lightbox-close {
  position: absolute; top: 12px; right: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); border: none; cursor: pointer;
  color: rgba(255,255,255,0.86); font-size: 15px; line-height: 1; padding: 0;
}
.ask-lightbox-close:hover { background: rgba(0,0,0,0.8); color: #fff; }

/* Workspace freshness stays inside the source-status disclosure. */
.ask-sync-disclosure > summary { color: var(--text-dim); font-size: 12px; }
.ask-sync-details {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface2); padding: 9px 11px;
}
.ask-sync-notice {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  color: var(--text-muted); font-size: 12px; line-height: 1.6;
}
.ask-analysis-completion {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  color: var(--text-muted); font-size: 13px; line-height: 1.6;
}
.ask-sync-notice a, .ask-analysis-completion a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ask-sync-notice a:focus-visible, .ask-analysis-completion a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* Evidence recovery: explicit controls, including on narrow screens. */
.ask-evidence-card { overflow-wrap: anywhere; }
.ask-evidence-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; max-width: 100%; padding: 9px 13px;
  border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1.4;
  text-align: center; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.ask-evidence-action:hover:not(:disabled) { background: var(--surface2); }
.ask-evidence-action-primary { background: var(--amber); border-color: var(--amber); color: var(--bg); }
.ask-evidence-action-primary:hover:not(:disabled) { background: var(--amber-light); border-color: var(--amber-light); }
/* The second choice is not a rival CTA — it settles for the evidence already
   loaded. Framed like the primary it invited a comparison that does not exist,
   and the reader who cannot tell which is safer presses neither. Keeps the
   base metrics (border width, min-height) so the two sit on one baseline. */
/* No frame means no side padding to hold: when the row wraps onto a second
   line on a phone, the label lines up with the card's own left edge and the
   primary above it, instead of sitting 13px inside both. The row's gap-x-5
   supplies the separation the padding used to. */
.ask-evidence-action-quiet {
  background: transparent; border-color: transparent; color: var(--text-muted);
  padding-left: 0; padding-right: 0;
}
.ask-evidence-action-quiet:hover:not(:disabled) {
  background: transparent; color: var(--text);
  text-decoration: underline; text-underline-offset: 3px;
}
/* "Always run these automatically" — the preference, offered where the reader
   is answering the question it would have answered for them. Deliberately not
   a third button in the row above: it is not a third way to answer THIS
   question, so it must not be weighed against the two that are. Sized like the
   Details disclosure below it, which is the other control on this card that
   changes what you see rather than what happens. */
.ask-evidence-auto-opt {
  display: inline-block; margin-top: 9px; padding: 0;
  border: 0; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 12px; line-height: 1.6;
  text-align: left; cursor: pointer;
}
.ask-evidence-auto-opt:hover:not(:disabled) {
  color: var(--text); text-decoration: underline; text-underline-offset: 3px;
}
.ask-evidence-auto-opt:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; }
.ask-evidence-auto-opt:disabled { opacity: .5; cursor: default; }
.ask-evidence-action:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.ask-evidence-action:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  .ask-evidence-action { min-height: 44px; }
}

/* Jump-to-latest pill (floats above the composer) */
.ask-jump-pill {
  position: absolute; top: -42px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-muted);
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.25); z-index: 12;
  transition: background .15s, color .15s;
}
.ask-jump-pill:hover { background: var(--surface2); color: var(--amber); }

/* Code blocks: per-block copy button + syntax highlight tokens */
.ask-prose pre.ask-code { position: relative; }
.ask-prose pre.ask-code .ask-code-copy,
.ask-user-code .ask-code-copy {
  position: absolute; top: 6px; right: 6px;
  font-size: 10px; font-family: var(--font-ui);
  color: var(--text-dim); background: var(--surface2);
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px;
  cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.ask-prose pre.ask-code:hover .ask-code-copy,
.ask-user-code:hover .ask-code-copy { opacity: 1; }
.ask-prose pre.ask-code .ask-code-copy:hover,
.ask-user-code .ask-code-copy:hover { color: var(--text); background: var(--surface); }
.ask-prose pre.ask-code .ask-code-copy.copied,
.ask-user-code .ask-code-copy.copied { color: var(--green); border-color: rgba(82,168,118,0.4); opacity: 1; }
.ask-prose pre code .hl-keyword { color: var(--amber-light); }

/* A person's own message (askUserParts): their text verbatim, their fenced
   blocks as code. The bubble stays prose-width until it carries a block —
   code that re-wraps at 480px is code nobody can read, so a block takes the
   column and scrolls sideways instead. */
.ask-user-text { white-space: pre-wrap; }
.ask-user-code-wrap + .ask-user-text,
.ask-user-text + .ask-user-code-wrap { margin-top: 9px; }
.ask-user-code-wrap + .ask-user-code-wrap { margin-top: 7px; }
.ask-user-inline-code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: rgba(212,144,26,0.10);
  border: 1px solid rgba(212,144,26,0.20);
  border-radius: 3px; padding: 0 4px;
}
.ask-user-code {
  position: relative; margin: 0;
  padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  overflow-x: auto; overflow-y: hidden;
  font-size: 12px; line-height: 1.55; text-align: left;
}
.ask-user-code code {
  font-family: var(--font-mono);
  background: none; border: none; padding: 0;
  white-space: pre; overflow-wrap: normal; color: var(--text-muted);
}
.ask-user-code .hl-keyword { color: var(--amber-light); }
/* Collapsed (over _ASK_CLAMP_LINES lines): a paste is often a whole file, and
   the question under it has to stay on screen. The ceiling cuts a line in
   half on purpose — the button is then not the only sign there is more. */
.ask-user-code.is-clamped { max-height: 24em; }
.ask-code-more {
  display: block; margin-top: 4px; padding: 2px 0;
  font-size: 11px; color: var(--text-muted);
  background: none; border: none; cursor: pointer;
}
.ask-code-more:hover { color: var(--amber); }
/* Under the composer: what Enter does here, or how much is over the limit. */
.ask-composer-hint {
  padding: 5px 10px 0;
  font-size: 11px; line-height: 1.5; color: var(--text-dim);
}
.ask-composer-hint.is-blocking { color: var(--orange); }

/* ── Ask Tier 2 ──────────────────────────────────────────────────────────── */
/* Header actions (share / export) on the active conversation */
.ask-header-action {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 9px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ask-header-action:hover { background: var(--surface2); color: var(--text); border-color: var(--border-strong); }


/* Multi-user thread avatars (Slack-style colored initials + photo overlay) */
.ask-avatar {
  position: relative; display: inline-block; width: 26px; height: 26px;
  border-radius: 9999px; overflow: hidden; flex-shrink: 0; vertical-align: middle;
}
.ask-avatar.sm { width: 20px; height: 20px; }
.ask-avatar-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff; letter-spacing: 0.02em; line-height: 1;
}
.ask-avatar.sm .ask-avatar-fallback { font-size: 8.5px; }
.ask-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ask-author-label { font-size: 10px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; letter-spacing: 0.02em; }
/* Overlapping facepile of thread participants */
.ask-facepile { display: inline-flex; align-items: center; padding-right: 2px; }
.ask-facepile .ask-avatar { margin-left: -7px; border: 2px solid var(--bg); box-sizing: content-box; }
.ask-facepile .ask-avatar:first-child { margin-left: 0; }
.ask-facepile-more { font-size: 10px; font-weight: 600; color: var(--text-dim); margin-left: 4px; }

/* Slash-command / @mention composer menu */
.ask-suggest-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32); padding: 4px; z-index: 30;
}
.ask-suggest-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  text-align: left; background: transparent; border: none; border-radius: 5px;
  padding: 7px 10px; cursor: pointer; transition: background .1s;
}
.ask-suggest-item:hover, .ask-suggest-item.active { background: rgba(212,144,26,0.12); }
.ask-suggest-cmd   { font-family: var(--font-mono); font-size: 12px; color: var(--amber-light); font-weight: 500; flex-shrink: 0; }
.ask-suggest-label { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-suggest-empty { font-size: 11.5px; color: var(--text-dim); padding: 8px 10px; }

/* ── Ask Tier 3 ──────────────────────────────────────────────────────────── */
/* Canvas side panel — a full-height flex child of .ask-view (stretches to the
   pane height); position:relative is the containing block for .ask-panel-resize. */
.ask-side-panel {
  position: relative; height: 100%;
  background: var(--surface); border-left: 1px solid var(--border); z-index: 11;
}
.ask-panel-resize { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; cursor: col-resize; background: transparent; z-index: 2; transition: background .15s; }
.ask-panel-resize:hover, .ask-panel-resize:active { background: rgba(212,144,26,0.30); }

/* Right-click context menu */
.ask-ctx-menu {
  position: fixed; z-index: 60; min-width: 172px; max-width: 300px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.34); padding: 4px; display: flex; flex-direction: column;
}
.ask-ctx-menu button { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; text-align: left; font-size: 12px; color: var(--text-muted); background: transparent; border: none; border-radius: 5px; padding: 7px 10px; cursor: pointer; }
.ask-ctx-menu .ask-ctx-label { flex: 1 1 auto; }
.ask-ctx-menu button .ask-ctx-hint { flex-basis: 100%; }
/* The composer character that opens the same picker, set right like a menu
   shortcut. */
.ask-ctx-kbd {
  font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  min-width: 18px; padding: 0 4px; text-align: center;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text-muted);
}
.ask-ctx-divider { height: 1px; margin: 4px 6px; background: var(--border); }
.ask-ctx-menu button:hover { background: var(--surface2); color: var(--text); }
.ask-ctx-menu button.danger { color: #e08a8a; }
.ask-ctx-menu button.danger:hover { background: rgba(201,64,64,0.12); }

/* Text-selection toolbar */
.ask-sel-toolbar {
  position: fixed; z-index: 60; transform: translateX(-50%); display: flex; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.34); padding: 3px;
}
.ask-sel-toolbar button { font-size: 11px; color: var(--text-muted); background: transparent; border: none; border-radius: 5px; padding: 5px 9px; cursor: pointer; white-space: nowrap; }
.ask-sel-toolbar button:hover { background: var(--surface2); color: var(--text); }
.ask-sel-toolbar button.ask-sel-saved { color: var(--green); }
.ask-sel-toolbar button.ask-sel-error { color: #e08a8a; }

/* Notebook — bookmarked Ask excerpts overlay */
.ask-notebook-overlay {
  position: fixed; inset: 0; z-index: 61; background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.ask-notebook-panel {
  width: 420px; max-width: 92vw; height: 100%;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
}
/* The rail is an INDEX of links, not a reading space — one line per highlight,
   grouped under its conversation. Rendering whole markdown bodies in 420px was
   the original design and showed about two at a time. */
.ask-notebook-group { padding: 10px 0 4px; border-bottom: 1px solid var(--border); }
.ask-notebook-group:last-child { border-bottom: none; }
.ask-notebook-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 4px;
}
.ask-notebook-link {
  display: block; width: 100%; text-align: left; font-size: 11.5px; line-height: 1.5;
  color: var(--text-muted); background: transparent; border: none; border-radius: 5px;
  padding: 5px 7px; cursor: pointer; transition: background .12s, color .12s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ask-notebook-link:hover { background: var(--surface2); color: var(--text); }

/* Per-conversation table of contents — an anchored dropdown off the header
   count button (NOT a side rail: the Ask shell's height arithmetic is the
   riskiest thing on the page and a dropdown touches none of it). */
.ask-toc-menu {
  position: absolute; top: calc(100% + 4px); right: 0; width: 320px; max-width: 78vw;
  max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3); padding: 4px; z-index: 20;
}
.ask-toc-menu .ask-notebook-link { font-size: 12px; }
.ask-toc-empty { font-size: 11px; color: var(--text-dim); padding: 8px 9px; line-height: 1.5; }
/* Card variant: the per-thread dropdown shows each highlight's FULL passage
   (this is the "takeaways of this conversation" view — a few rows, whole
   point is reading them), so it needs more room than the link list did. */
.ask-toc-cards { width: 420px; max-width: 86vw; max-height: 440px; padding: 6px; }
.ask-toc-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; margin: 0 0 6px; cursor: pointer;
  transition: border-color .12s;
}
.ask-toc-card:last-child { margin-bottom: 0; }
.ask-toc-card:hover { border-color: var(--ask-highlight-ring); }
.ask-toc-card-title { font-size: 11px; font-weight: 600; color: var(--text); }
.ask-toc-card-meta  { margin-top: 6px; font-size: 10px; color: var(--text-dim); }
/* Compact .ask-prose variant — same rendering pipeline as the live thread,
   sized down for a 420px card (the retired notebook rail's old treatment,
   revived for the one surface where reading the body is the point). */
.ask-toc-card-prose { font-size: 11.5px; line-height: 1.5; }
.ask-toc-card-prose p { margin-bottom: 6px; }
.ask-toc-card-prose p:last-child { margin-bottom: 0; }
.ask-toc-card-prose pre { padding: 6px 8px; margin-bottom: 6px; overflow-x: auto; }
.ask-toc-card-prose table { font-size: 10.5px; margin-bottom: 6px; }
.ask-toc-card-prose h1, .ask-toc-card-prose h2, .ask-toc-card-prose h3 { margin: 8px 0 4px; font-size: 0.88rem; }

/* In-thread highlight mark. Wraps text nodes only (never restructures
   elements), so a range spanning blocks yields several <mark>s sharing one
   data-hl-id. Neutral wash + a marker-style underline reads as "annotated",
   distinct from the amber jump flash below, which is transient. */
.ask-hl {
  background: var(--ask-highlight); color: inherit;
  border-bottom: 1px solid var(--ask-highlight-ring);
  border-radius: 2px; padding: 0 1px; cursor: pointer;
  transition: background .12s;
}
.ask-hl:hover { background: var(--ask-highlight-ring); }

/* Bookmark-jump target flash — briefly highlights the message a notebook
   excerpt was saved from after "Jump to conversation" scrolls it into view. */
.ask-msg-highlight { animation: ask-msg-flash 1.8s ease-out; border-radius: 8px; }
@keyframes ask-msg-flash {
  0%   { background: rgba(212,144,26,0.16); }
  100% { background: transparent; }
}

/* Customer hover preview card */
.ask-hover-card {
  position: fixed; z-index: 55; width: 236px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.34); padding: 11px 13px;
}
.ask-hover-grid { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.ask-hover-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11px; }
.ask-hover-k { color: var(--text-dim); flex-shrink: 0; }
.ask-hover-v { color: var(--text-muted); text-align: right; }

/* Command palette */
.ask-palette-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.45); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.ask-palette { width: 560px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 18px 50px rgba(0,0,0,0.5); overflow: hidden; }
.ask-palette-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border); padding: 14px 16px; font-size: 14px; color: var(--text); outline: none; font-family: var(--font-ui); }
.ask-palette-results { max-height: 50vh; overflow-y: auto; padding: 6px; }
.ask-palette-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 6px; padding: 9px 11px; cursor: pointer; }
.ask-palette-item:hover, .ask-palette-item.active { background: rgba(212,144,26,0.12); }
.ask-palette-kind { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); background: var(--surface2); border-radius: 4px; padding: 2px 6px; flex-shrink: 0; width: 64px; text-align: center; }
.ask-palette-label { font-size: 13px; color: var(--text); }

/* =============================================================================
   Vitals — dense stat table
   ============================================================================
   Replaces the old card-per-metric grid (each tile's height depended on
   whether it happened to carry an extra sub-line — median, a fast/typical/
   slow tag, a date range — so tiles in the same row and across adjacent
   groups landed at different heights and the section read as disorganized).
   Every metric is now one fixed-height row: label left, value + population
   bar right. Sub-lines that used to render as visible text (median, orphan
   count, latency tag) move into the row's title tooltip instead, so every
   row is exactly the same shape regardless of how much context it carries.
   ============================================================================= */

.vital-table {
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.vital-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.vital-row + .vital-row {
  border-top: 1px solid var(--border);
}

.vital-row-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vital-row-value {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  white-space: nowrap;
}

.vital-row-unit {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 2px;
}

.vital-row-bar {
  flex: 0 0 60px;
  width: 60px;
}
.vital-row-bar .vital-range { margin-top: 0; padding: 0; }

/* ── Vitals bento grid ─────────────────────────────────────────────────────
   The Vitals section is a UNIT GRID, iOS-home-screen style. Every widget
   occupies an integer W×H block of grid cells; widgets snap to whole units,
   clamp to their own per-widget min/max footprint (declared in BENTO_WIDGETS
   in index.html), and are packed top-left first-fit by the JS packer
   (packBento) so there is NEVER an overlap, a stranded void, or a broken
   half-size layout. Each widget renders a different level of detail at each
   footprint (see the per-widget templates), so no reachable size is broken.

   CSS only draws the cells — the packer owns placement (grid-column /
   grid-row are bound inline from bentoStyle()). Enter "Arrange" mode
   (bento-editing) to drag a widget onto another to reorder it, or drag a
   corner / edge handle to resize it through its allowed range. Column count
   is responsive (4 wide ≥1024px, 2 ≥640px, 1 below); on a narrower viewport
   each widget's width is clamped to the available columns and its detail tier
   follows the clamped size, so the grid degrades without ever breaking. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(var(--bento-cols, 4), minmax(0, 1fr));
  grid-auto-rows: var(--bento-row, 140px);
  gap: var(--bento-gap, 14px);
  position: relative;
}
.bento-widget {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
  transition: box-shadow 0.15s ease, opacity 0.12s ease;
}
.bento-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  overflow: hidden;
}
.bento-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex: 0 0 auto;
  min-width: 0;
}
.bento-title {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bento-content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Chart widgets: the canvas fills whatever cell the widget currently spans.
   position:absolute breaks the canvas→parent size feedback loop so Chart.js
   (responsive + maintainAspectRatio:false) reads a stable box to fit. */
.bento-canvas-wrap { flex: 1 1 auto; min-height: 0; min-width: 0; position: relative; }
.bento-canvas-wrap > canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/* Compact stat table — drops the population range bar when the tile is only
   one unit wide, so the label + value reclaim that width. */
.vital-table--compact .vital-row-bar { display: none; }
/* Inside a bento widget the widget frame already draws the border/background,
   so the stat table sheds its own box and keeps only the row separators. */
.bento-widget .vital-table { border: none; background: transparent; border-radius: 0; }
.bento-widget .vital-table .vital-row { padding-left: 0; padding-right: 0; }

/* ── Arrange (edit) mode ── */
.bento-grid.bento-editing .bento-widget { cursor: grab; }
.bento-grid.bento-editing .bento-widget.bento-dragging {
  z-index: 40;
  opacity: 0.95;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38), inset 0 0 0 1px var(--amber);
}
.bento-grid.bento-editing .bento-widget.bento-resizing {
  z-index: 40;
  box-shadow: inset 0 0 0 1px var(--amber);
}
/* Full-widget drag cover — captures the reposition drag so it never fights
   the chart/table interactions underneath. Faint diagonal hatch marks the
   widget as "grabbable" while arranging. */
.bento-drag-cover {
  position: absolute;
  inset: 0;
  z-index: 20;
  cursor: grab;
  touch-action: none;
  background: repeating-linear-gradient(-45deg, transparent, transparent 7px, rgba(212, 144, 26, 0.05) 7px, rgba(212, 144, 26, 0.05) 8px);
}
.bento-drag-cover:active { cursor: grabbing; }

/* Resize handles — SE corner (both dims), E edge (width only), S edge (height
   only). Sit above the drag cover so a corner grab resizes instead of moves. */
.bento-rz { position: absolute; z-index: 30; touch-action: none; }
.bento-rz-e  { top: 14%; bottom: 14%; right: 0; width: 14px; cursor: ew-resize; }
.bento-rz-s  { left: 14%; right: 14%; bottom: 0; height: 14px; cursor: ns-resize; }
.bento-rz-se { right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; }
.bento-rz-se::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
  border-bottom-right-radius: 3px;
  opacity: 0.85;
}
.bento-rz-e::after, .bento-rz-s::after {
  content: "";
  position: absolute;
  background: var(--amber);
  opacity: 0.5;
  border-radius: 999px;
}
.bento-rz-e::after { top: 50%; right: 3px; width: 3px; height: 22px; transform: translateY(-50%); }
.bento-rz-s::after { left: 50%; bottom: 3px; height: 3px; width: 22px; transform: translateX(-50%); }

/* =============================================================================
   Vitals — Population range indicator
   ============================================================================
   Thin horizontal bar showing where this customer falls within the
   workspace population. Bar spans p10→p90; the marker dot sits at the
   customer's position. The bar uses two-segment linear interpolation so
   its center is always the p50 median — that lets a center notch act as a
   "typical customer" anchor without any extra geometry. Directional
   gradients tint the bar so the user instantly sees whether being to the
   left or right is favorable.
   ============================================================================= */

.vital-range {
  margin-top: 5px;
  padding: 0 4px;
  position: relative;
}

.vital-range-bar {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: var(--surface2);
  box-shadow: inset 0 0 0 1px var(--border);
  /* Clickable: opens the full percentile card (see PopRangeBar). The bar
     itself is only 3px tall, so the hit area is padded out vertically with a
     transparent ::after rather than by growing the visible track. */
  cursor: pointer;
}
.vital-range-bar::after {
  content: "";
  position: absolute;
  inset: -7px 0;
}
.vital-range-bar:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--border), 0 0 0 2px rgba(212,144,26,0.45);
}

/* Median anchor — vertical tick centered on the bar so the user sees the
   "typical customer" at a glance. */
.vital-range-bar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--text-dim);
  opacity: 0.55;
  transform: translateX(-50%);
}

/* Directional gradients. Use very low alpha so the bar stays subtle. */
/* Light-theme tweak — gradients on white surface need more chroma to read */

/* Marker dot — sits at customer's position along the bar. The outer ring
   uses a box-shadow in the tile background color so the dot stays legible
   even when overlapping the median tick or sitting against a gradient. */
.vital-range-marker {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text);
  box-shadow:
    0 0 0 2px var(--surface),
    0 1px 2px rgba(0,0,0,0.18);
  transform: translate(-50%, -50%);
  transition: background 0.18s ease, box-shadow 0.18s ease;
  z-index: 1;
}
.vital-range-marker.tone-good    { background: var(--green); }
.vital-range-marker.tone-warn    { background: var(--amber); }
.vital-range-marker.tone-bad     { background: var(--red); }
.vital-range-marker.tone-neutral { background: var(--text-muted); }

.vital-range:hover .vital-range-marker {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px rgba(212,144,26,0.18),
    0 1px 3px rgba(0,0,0,0.28);
}

/* Edge chevron — drawn when the customer's value falls outside p10/p90.
   The marker still clamps to the bar's edge so its position remains
   physically interpretable; the chevron tells you the actual value is
   further out. */
.vital-range-edge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  line-height: 1;
  color: var(--text-muted);
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.vital-range-edge.edge-left  { left: -8px; }
.vital-range-edge.edge-right { right: -8px; }

/* Section-level legend explaining the bars — shown once near the top of
   the vitals block so the cue is learnable without cluttering each tile. */
.vital-range-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.01em;
}
.vital-range-legend .legend-bar {
  position: relative;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: var(--surface2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.vital-range-legend .legend-bar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--text-dim);
  opacity: 0.55;
  transform: translateX(-50%);
}
.vital-range-legend .legend-dot {
  position: absolute;
  top: 50%;
  left: 70%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--surface);
  transform: translate(-50%, -50%);
}

/* Account-menu appearance strip. Native radios provide one tab stop and
   arrow-key selection; contrast remains a separate toggle. */
.user-theme-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.user-theme-label { margin-right: auto; color: var(--text-muted); font-size: 12px; }
.user-theme-modes {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.user-theme-choice {
  position: relative;
  display: block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.user-theme-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.user-theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 5px;
}
.user-theme-icon svg { width: 18px; height: 18px; }
.user-theme-choice:hover .user-theme-icon { background: var(--surface2); color: var(--text); }
.user-theme-choice input:checked + .user-theme-icon,
.user-theme-choice[aria-pressed="true"] .user-theme-icon {
  border-color: var(--amber);
  background: var(--surface2);
  color: var(--amber);
}
.user-theme-choice input:focus-visible + .user-theme-icon,
.user-theme-choice:focus-visible .user-theme-icon {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.user-theme-contrast:focus-visible { outline: none; }
.user-theme-divider { width: 1px; height: 20px; flex-shrink: 0; background: var(--border-strong); }
.user-theme-tip {
  position: absolute;
  z-index: 1;
  top: calc(100% + 8px);
  left: 0;
  width: max-content;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface2);
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  visibility: hidden;
}
.user-theme-choice:last-child .user-theme-tip { left: auto; right: 0; }
.user-theme-choice:hover .user-theme-tip,
.user-theme-choice:focus-within .user-theme-tip { visibility: visible; }

/* ── Tooltip (hover / keyboard-focus reveal) ──────────────────────────────────
   Theme-token styled hover/focus tooltip. The trigger carries `.ll-tip`
   (give it tabindex="0" for keyboard access) plus mouseenter/focus handlers
   that open ONE shared card teleported to <body> (`.ll-tip-float`).

   Why teleport instead of an absolutely-positioned child: these triggers live
   at the very top of `.customers-view`, which has `overflow:hidden` and butts
   right against the sticky `#app-header` (z-50). A child popover opening upward
   was clipped by that overflow box AND painted under the header. Rendering the
   card at <body> level escapes every ancestor's overflow/stacking context, and
   the open-direction flip (see openTierTip in index.html) drops it BELOW the
   trigger whenever there isn't room to clear the header above — so it can never
   collide with the nav again. Mirrors the driverPopover / stage-picker pattern.
   `.ll-tip` itself needs no positioning now — it's just a hover/focus hook. */
.ll-tip-float {
  /* position / top / left / transform / width are set inline by openTierTip;
     this rule is the visual surface only. */
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  text-align: left;
  pointer-events: none;   /* read-only; closes on the trigger's mouseleave */
}
/* Lighter drop shadow on the light surfaces (mirrors .shadow-lg). */
html[data-theme="light"]  .ll-tip-float,
html[data-theme="litellm"] .ll-tip-float {
  box-shadow: 0 8px 24px rgba(20,16,10,0.16), 0 1px 2px rgba(20,16,10,0.08);
}

/* =============================================================================
   Inference Activity monitor (Operations -> AI Usage)
   Self-contained, scoped under .rx-reactor. Built imperatively + driven by a
   single requestAnimationFrame loop (web/static/activity-monitor.js); no
   Tailwind utilities so check_theme.py and the Tailwind rebuild are unaffected.
   Wears the modernized control-center scale: 13px controls, 12px metadata,
   Fira Sans figures in neutral ink, a flat tile group closed by a rule, and
   one framed panel each for the chart and the request stream. Provider hues
   are the fixed channel palette (design-system.md -> Data visualization); the
   only status colour is the error tile's red, and only while it is non-zero.
   ============================================================================= */
.rx-reactor{
  color:var(--text);
}
.rx-reactor *{box-sizing:border-box;}
.rx-reactor :is(button,[tabindex]):focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

/* toolbar — the window control, the stream state and Pause. One filter row
   above everything it scopes: tiles, chart, and (through Vue) the request log. */
.rx-toolbar{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-bottom:12px;}
.rx-stream{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;color:var(--text-muted);}
.rx-stream .dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);flex:none;}
.rx-stream[data-state="on"] .dot{background:var(--amber);animation:pulse-dot 2s ease-in-out infinite;}
/* Segmented control — separate 34px buttons with the dashboard's selected state. */
.rx-seg{display:inline-flex;flex-wrap:wrap;gap:4px;}
.rx-seg button,.rx-btn{appearance:none;min-height:34px;padding:0 12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-muted);font:inherit;font-size:13px;line-height:1;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.rx-seg button:hover,.rx-btn:hover{color:var(--text);border-color:var(--border-strong);}
.rx-seg button[aria-pressed="true"]{color:var(--text);background:var(--surface2);box-shadow:inset 0 -2px var(--amber);}
.rx-btn[aria-pressed="true"]{color:var(--text);background:var(--surface2);}
.rx-btn:disabled{opacity:.5;cursor:default;}
.rx-seg-sm button{min-height:30px;padding:0 10px;font-size:12px;}

/* provider chips — the chart's legend and its filter in one row. A pressed
   chip is in the chart; an unpressed one is struck through and its swatch
   goes neutral, so the hidden state reads without colour. */
.rx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.rx-chips[hidden]{display:none;}
.rx-chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px 0 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;line-height:1;cursor:pointer;transition:border-color .15s,background .15s;}
.rx-chip:hover{border-color:var(--border-strong);}
.rx-key{display:inline-block;width:14px;height:3px;border-radius:2px;flex:none;}
.rx-chip-name{font-weight:500;}
.rx-chip-role{font-size:12px;color:var(--text-muted);}
.rx-chip-role[hidden]{display:none;}
.rx-chip-val{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;padding-left:8px;border-left:1px solid var(--border);}
.rx-chip[aria-pressed="false"]{color:var(--text-muted);background:transparent;}
.rx-chip[aria-pressed="false"] .rx-key{background:var(--text-dim) !important;}
.rx-chip[aria-pressed="false"] .rx-chip-name{text-decoration:line-through;text-decoration-color:var(--text-dim);}

/* stat tiles — a flat group: label · rate · trend + window total · sparkline.
   No per-tile colour: quantities are neutral ink, the sparkline is the
   single-series accent, and only the error tile turns red when non-zero. */
.rx-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 20px;margin-bottom:20px;}
.rx-tile{position:relative;min-width:0;padding:10px 0 12px;border-bottom:1px solid var(--border);cursor:default;}
.rx-tlabel{font-size:13px;line-height:1.5;color:var(--text-muted);}
.rx-tval{margin-top:4px;font-size:26px;font-weight:500;line-height:1.1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rx-tval .u{font-size:13px;font-weight:400;color:var(--text-muted);margin-left:2px;}
.rx-tile.is-bad .rx-tval{color:color-mix(in srgb,var(--red) 65%,var(--text));}
.rx-tsub{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:6px;font-size:12px;line-height:1.5;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.rx-tdelta{flex:none;color:var(--text-dim);}
.rx-tdelta:empty{display:none;}
.rx-tiles.is-hist .rx-tdelta{display:none;}
.rx-tiles.is-hist .rx-spark{display:none;}
.rx-tdelta.is-bad{color:color-mix(in srgb,var(--red) 65%,var(--text));}
.rx-tcum{min-width:0;overflow-wrap:anywhere;}
.rx-spark{display:block;width:100%;height:18px;margin-top:8px;}

/* chart panel — the monitor's one framed panel, full width. The list of calls
   is the request log under the card (Vue), not a second panel beside this. */
.rx-panel{border:1px solid var(--border);border-radius:8px;background:var(--surface);display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.rx-phead{display:flex;align-items:flex-start;gap:8px 12px;flex-wrap:wrap;padding:14px 16px 10px;}
.rx-ptitle{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 12rem;}
.rx-phead h4{margin:0;font-size:15px;font-weight:500;line-height:1.5;color:var(--text);}
.rx-caption{font-size:12px;line-height:1.5;color:var(--text-muted);}
.rx-phead .rx-seg{margin-left:auto;}
.rx-scopewrap{position:relative;padding:4px 8px 8px;}
.rx-scopewrap canvas{display:block;width:100%;height:300px;}

@media (max-width:1100px){
  .rx-tiles{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:640px){
  .rx-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;}
  .rx-tval{font-size:23px;}
  .rx-scopewrap canvas{height:240px;}
  /* The window control takes its own row; the stream state and Pause share
     the next one. */
  .rx-toolbar [data-windows]{flex-basis:100%;}
  .rx-toolbar .rx-stream{margin-left:0;flex:1 1 auto;}
  .rx-phead .rx-seg{margin-left:0;flex-basis:100%;}
}
@media (prefers-reduced-motion:reduce){
  .rx-stream[data-state="on"] .dot{animation:none;}
}

/* Gauge tooltip — a deeper per-widget breakdown on hover, styled after the
   Sentiment Pulse chart's point tooltip (.pulse-tip). Appended to <body> (not
   under .rx-reactor), so it's scoped on its own here and uses the global theme
   tokens rather than the .rx-reactor-local --rx-* custom properties. */
.rx-tip{
  position:fixed;z-index:95;pointer-events:none;top:0;left:0;
  width:max-content;max-width:min(300px,84vw);
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:11px;padding:11px 13px 12px;
  box-shadow:0 12px 34px rgba(0,0,0,0.46),0 2px 9px rgba(0,0,0,0.32);
  font-family:var(--font-ui);
  opacity:0;transition:opacity .12s ease;
}
html[data-theme="light"] .rx-tip,
html[data-theme^="litellm"] .rx-tip{ box-shadow:0 12px 34px rgba(15,23,42,0.18),0 2px 9px rgba(15,23,42,0.12); }
/* Image-preview modifier: same floating card (position/shadow/fade), but sized
   for a picture instead of a text breakdown. */
.rx-tip.is-image{ max-width:none;padding:6px; }
/* Chart-crosshair modifier: the head is a time label, not a metric name. */
.rx-tip.is-chart .rx-tip-label{ text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--text-muted); }
.rx-tip.is-image img{ display:block;max-width:min(340px,42vw);max-height:min(340px,42vh);border-radius:7px; }
.rx-tip-head{display:flex;align-items:center;gap:8px;}
.rx-tip-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
.rx-tip-label{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.rx-tip-val{margin-left:auto;font-family:var(--font-mono);
  font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.rx-tip-val small{font-size:10px;font-weight:500;color:var(--text-muted);margin-left:3px;}
.rx-tip-meta{margin-top:4px;font-size:10.5px;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.2px;}
.rx-tip-note{margin-top:6px;font-size:11px;color:var(--text-muted);line-height:1.5;}
.rx-tip-sec{margin-top:9px;}
.rx-tip-sec-label{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--text-dim);margin-bottom:6px;}
.rx-tip-rows{display:flex;flex-direction:column;gap:5px;}
.rx-tip-row{display:flex;align-items:center;gap:7px;font-size:11.5px;}
.rx-tip-pdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.rx-tip-pname{color:var(--text-muted);}
.rx-tip-pval{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;text-align:right;}
.rx-tip-pval small{color:var(--text-dim);font-weight:400;margin-left:4px;}
.rx-tip-foot{margin-top:10px;padding-top:8px;border-top:1px solid var(--border);font-size:10.5px;color:var(--text-dim);}
.rx-tip-foot b{color:var(--text-muted);font-variant-numeric:tabular-nums;}

/* Analysis controls stay compact while a saved report is being read. */
.customer-analysis-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-width:0; }
.customer-analysis-meta { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-left:auto; min-width:0; }
.analysis-launcher { position:relative; max-width:100%; }
.analysis-launcher-trigger { display:inline-flex; align-items:center; gap:10px; min-height:36px; padding:7px 12px; border:1px solid var(--border-strong); border-radius:7px; background:var(--surface); color:var(--text); font-size:13px; font-weight:500; cursor:pointer; }
.analysis-launcher-trigger:hover, .analysis-launcher-trigger[aria-expanded="true"] { border-color:var(--amber); }
.analysis-launcher-panel { position:absolute; top:calc(100% + 8px); left:0; z-index:45; width:340px; max-width:calc(100vw - 48px); padding:16px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--text); box-shadow:0 12px 32px rgba(0,0,0,.18); }
.analysis-launcher-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:14px; }
.analysis-launcher-close { display:grid; place-items:center; width:28px; height:28px; border-radius:5px; color:var(--text-muted); font-size:20px; cursor:pointer; }
.analysis-launcher-close:hover { background:var(--surface2); color:var(--text); }
.analysis-launcher button:focus-visible, .analysis-range-picker :is(select,input,summary):focus-visible, .analysis-run-button:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.analysis-range-picker { width:100%; min-width:0; }
.analysis-range-description { color:var(--text-muted); line-height:1.5; margin-top:8px; }
.analysis-range-dates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.analysis-range-dates label, .analysis-range-dates input { width:100%; min-width:0; }
.analysis-range-options { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); color:var(--text-muted); line-height:1.5; }
.analysis-range-options summary { cursor:pointer; }
.analysis-range-options label { color:var(--text); margin-top:10px; }
.analysis-range-options input { accent-color:var(--amber); }
.analysis-run-button { display:block; width:100%; margin-top:16px; border:1px solid var(--text); border-radius:6px; padding:9px 12px; background:var(--text); color:var(--surface); font-size:13px; font-weight:600; cursor:pointer; }
.analysis-run-button:hover:not(:disabled) { opacity:.9; }
.analysis-run-button:disabled { opacity:.4; cursor:default; }
.analysis-empty-form { width:340px; max-width:100%; }
@media (max-width:640px) {
  .customer-analysis-meta { margin-left:0; justify-content:flex-start; flex-basis:100%; }
  .analysis-launcher { width:100%; }
  .analysis-launcher-panel { position:static; width:100%; max-width:100%; margin-top:8px; box-shadow:none; }
}

/* ── Analysis Register ──────────────────────────────────────────────────────
   The customer's report history, reframed as a posted ledger in a right
   slide-over drawer (replaces the clipped "Report archive" dropdown). A left
   rail runs the column; each analysis is a node posted on it. The one node
   driving the dashboard glows amber — the logo's lit signal cell. Built on the
   design tokens so it inherits every theme (dark / light / litellm). One
   accent, spent only on state: live / selected / pinned. — added 2026-06-29 */
.areg-trigger{display:inline-flex;align-items:center;gap:9px;background:transparent;
  border:1px solid var(--border-strong);border-radius:7px;padding:7px 12px;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--text-muted);transition:border-color .15s,color .15s;}
.areg-trigger:hover{border-color:var(--amber);color:var(--text);}
.areg-trigger b{color:var(--text);font-weight:500;}
.areg-trigger-rail{display:flex;flex-direction:column;gap:2px;align-items:center;}
.areg-trigger-rail i{width:5px;height:5px;border-radius:50%;background:var(--text-dim);display:block;}
.areg-trigger-rail i.lit{background:var(--amber);}
.areg-trigger-cnt{color:var(--text-dim);font-size:11px;border-left:1px solid var(--border);padding-left:9px;font-variant-numeric:tabular-nums;}

.areg-scrim{position:fixed;inset:0;background:rgba(5,4,3,.62);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:70;animation:aregFade .26s ease;}
.areg-drawer{position:fixed;top:0;right:0;height:100vh;width:min(460px,100vw);
  background:var(--surface);border-left:1px solid var(--border-strong);
  box-shadow:-24px 0 60px rgba(0,0,0,.5);z-index:71;
  display:flex;flex-direction:column;animation:aregSlideIn .3s cubic-bezier(.22,.61,.36,1);}
@keyframes aregFade{from{opacity:0}to{opacity:1}}
@keyframes aregSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}

.areg-head{padding:22px 24px 18px;border-bottom:1px solid var(--border);position:relative;}
.areg-eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:7px;}
.areg-title{font-weight:600;font-size:22px;letter-spacing:-.01em;line-height:1.15;color:var(--text);word-break:break-all;}
.areg-summary{margin-top:9px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--text-muted);font-size:12px;font-variant-numeric:tabular-nums;}
.areg-summary .sep{color:var(--text-dim);}
.areg-livepip{display:inline-flex;align-items:center;gap:6px;color:var(--amber-light);font-size:11px;}
.areg-livepip i{width:6px;height:6px;border-radius:50%;background:var(--amber);display:block;animation:pulse-dot 2s ease-in-out infinite;}
.areg-close{position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:7px;border:1px solid transparent;
  background:transparent;color:var(--text-dim);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s,background .15s;}
.areg-close:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface2);}

.areg-viewstrip{margin:14px 24px 0;display:flex;align-items:center;gap:10px;
  background:rgba(212,144,26,.07);border:1px solid rgba(212,144,26,.32);border-radius:8px;padding:9px 12px;font-size:12px;}
.areg-viewstrip .lbl{color:var(--amber-light);white-space:nowrap;}
.areg-viewstrip .ref{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.areg-viewstrip button{margin-left:auto;background:transparent;border:none;color:var(--amber);font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap;}
.areg-viewstrip button:hover{text-decoration:underline;}

.areg-register{flex:1;overflow-y:auto;padding:8px 24px 4px;}
.areg-loading{font-size:12px;color:var(--text-dim);padding:16px 2px;}
.areg-lens{margin-top:18px;}
.areg-band{display:flex;align-items:baseline;gap:10px;padding:0 2px 9px;}
.areg-lensname{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);font-weight:600;white-space:nowrap;}
.areg-lensmeta{font-size:10.5px;color:var(--text-dim);white-space:nowrap;font-variant-numeric:tabular-nums;}
.areg-rule{flex:1;height:1px;background:var(--border);}

.areg-entries{position:relative;padding-left:26px;}
.areg-entries::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--border);}
.areg-entry{position:relative;border:1px solid transparent;border-radius:9px;padding:11px 12px 11px 13px;margin-bottom:4px;cursor:pointer;transition:background .14s,border-color .14s;}
.areg-entry:hover{background:var(--surface2);}
.areg-entry.live{background:var(--surface2);border-color:var(--border);}
.areg-entry.selected{border-color:rgba(212,144,26,.5);background:var(--surface2);}

.areg-node{position:absolute;left:-22px;top:16px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:1.5px solid var(--text-dim);}
.areg-entry.live .areg-node{background:var(--amber);border-color:var(--amber);animation:pulse-dot 2.4s ease-in-out infinite;}
.areg-entry.pinned .areg-node{background:var(--surface);border-color:var(--amber);}
.areg-entry.pinned .areg-node::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--amber-light);}

.areg-entry-top{display:flex;align-items:center;gap:9px;}
/* The coverage stamp (what data the report is ABOUT — a date range or "Full
   history") is the entry's identity and the one thing that reliably differs
   between reports in different lenses, so it carries the entry's heading
   weight. Sans, not serif: it is a date range, and Fraunces is kept for page
   titles (design-system.md -> Fonts). min-width:0 lets it actually ellipsis
   inside the flex row instead of pushing the action buttons off. */
.areg-stamp{font-family:var(--font-ui);font-weight:600;font-size:14px;color:var(--text);letter-spacing:.01em;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.areg-entry.live .areg-stamp{color:var(--amber-light);}
.areg-livetag{font-size:9px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--amber);
  background:rgba(212,144,26,.12);border:1px solid rgba(212,144,26,.3);border-radius:4px;padding:2px 6px;flex-shrink:0;}
.areg-currenttag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--text-dim);
  border:1px solid var(--border);border-radius:4px;padding:2px 6px;flex-shrink:0;}
.areg-pinstar{color:var(--amber-light);font-size:12px;line-height:1;flex-shrink:0;}

.areg-actions{margin-left:auto;display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .14s;flex-shrink:0;}
.areg-entry:hover .areg-actions,.areg-entry.selected .areg-actions{opacity:1;}
.areg-act{width:26px;height:26px;border-radius:6px;border:1px solid transparent;background:transparent;cursor:pointer;
  color:var(--text-dim);display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;font-family:inherit;transition:color .12s,background .12s,border-color .12s;}
.areg-act:hover{background:var(--bg);border-color:var(--border-strong);color:var(--text);}
.areg-act.pin:hover{color:var(--amber-light);}
.areg-act.on{color:var(--amber-light);}
.areg-act.del:hover{color:var(--red);border-color:rgba(201,64,64,.4);}

.areg-entry-meta{display:flex;align-items:center;gap:7px;margin-top:6px;flex-wrap:wrap;font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.areg-entry-meta .m{display:inline-flex;align-items:center;gap:4px;}
.areg-entry-meta .sep{opacity:.5;}
.areg-entry-meta .est{color:var(--amber-light);margin-left:1px;}
.areg-prov{display:inline-flex;align-items:center;gap:4px;color:var(--text-muted);font-size:10.5px;border:1px solid var(--border);border-radius:4px;padding:1px 7px;letter-spacing:.02em;}
.areg-prov .gl{color:var(--text-dim);}
/* Deliberately the quietest chip in the row — see the markup comment above
   its usage in index.html: it's a shared build number, not a report identity. */
.areg-pipever{opacity:.75;}

.areg-foot{border-top:1px solid var(--border);padding:13px 24px;display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:11px;flex-wrap:wrap;}
.areg-foot .k{display:inline-flex;align-items:center;gap:6px;}
.areg-foot .k .star{color:var(--amber-light);}
.areg-foot .k .lit{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block;}
.areg-foot .dot{opacity:.4;}

@media (max-width:520px){ .areg-drawer{width:100vw;border-left:none;} }
@media (prefers-reduced-motion:reduce){
  .areg-scrim,.areg-drawer{animation:none;}
  .areg-livepip i,.areg-entry.live .areg-node{animation:none;}
}

/* ── Activity popover (top-bar LED dropdown) ─────────────────────────────
   Coordinated with the Analysis Register (.areg-*): same stage-receipt
   metaphor — a left rail down the panel, each task/notification a node
   posted on it. Live work is the lit amber cell (the logo motif); finished
   and queued work is quiet. Monochrome + one accent; all design tokens. */
.act-pop{width:21rem;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.5);overflow:hidden;
  display:flex;flex-direction:column;max-height:30rem;
  animation:actPop .18s cubic-bezier(.22,.61,.36,1);}
@keyframes actPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.act-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px 11px;border-bottom:1px solid var(--border);flex-shrink:0;}
.act-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:600;}
.act-livepip{width:6px;height:6px;border-radius:50%;background:var(--amber);display:inline-block;
  animation:pulse-dot 2s ease-in-out infinite;}
.act-clear{background:transparent;border:none;cursor:pointer;font-family:inherit;
  font-size:10.5px;letter-spacing:.04em;color:var(--text-dim);transition:color .14s;}
.act-clear:hover{color:var(--red);}

.act-body{overflow-y:auto;padding:4px 0 8px;}
.act-sec{padding:10px 16px 2px;}
.act-seclabel{font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-dim);font-weight:600;margin-bottom:6px;}

.act-rail{position:relative;padding-left:22px;}
.act-rail::before{content:"";position:absolute;left:9px;top:7px;bottom:7px;width:1px;background:var(--border);}
.act-item{position:relative;display:block;border:1px solid transparent;border-radius:8px;
  padding:8px 9px;margin-bottom:2px;text-decoration:none;transition:background .14s,border-color .14s;}
a.act-item{cursor:pointer;}
.act-item:hover{background:var(--surface2);}
/* A row that lights up under the cursor is claiming to be clickable. Most are
   (every one that names live work opens the surface that owns it, every settled
   one opens what it recorded); the exceptions are the "still checking" lines and
   a workspace row whose destination this user's tier cannot reach, and those
   must not make the claim. */
.act-item.act-item-static{cursor:default;}
.act-item.act-item-static:hover{background:transparent;}
.act-node{position:absolute;left:-18px;top:11px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--text-dim);}
.act-node.live{background:var(--amber);border-color:var(--amber);animation:pulse-dot 2.2s ease-in-out infinite;}
.act-node.fail{background:var(--red);border-color:var(--red);}
.act-node.unread{background:var(--amber);border-color:var(--amber);}
.act-node.read{background:transparent;border-color:var(--text-dim);}

.act-item-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.act-name{font-size:12.5px;color:var(--text);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.act-name.mono{font-family:var(--font-ui);color:var(--amber-light);font-weight:500;}
.act-time{font-size:10px;color:var(--text-dim);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums;}
.act-sub{font-size:11px;color:var(--text-dim);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.act-sub.alias{color:var(--text-muted);}
/* Two short lines instead of one truncated one. A customer alias is meant to
   ellipsize (the rest is guessable); a step name is not — "Separate questions
   from automated c…" costs the reader the fact they came for, inside a 21rem
   popover where nothing longer than ~47 characters fits on one line.
   The Recent rows are the same rule applied to settled work: their titles are
   authored sentences ("Primer distillation finished with errors") and so are
   most of their bodies ("Data sync did not finish successfully — open
   Operations → Data Pipeline."), and an ellipsis eats the half that says what
   to do about it. Only the analysis rows carry an alias, and only those keep
   the one-line `.alias` treatment.
   The clamp is a backstop, not the mechanism: every authored string here is
   under 120 characters (3 lines), so it can only ever bite on the one body
   built from a value this client doesn't control — the cohort notifier's
   server-supplied `d.error`. Four lines is deliberately a full line clear of
   the longest message we write, so it never truncates our own copy; a row
   that does hit it still clicks through to the surface holding the detail. */
.act-sub.wrap{white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
/* Same treatment for the title of a settled row. `.act-name` alone ellipsizes,
   which is right for the in-progress rows (a customer alias, `.mono`) and wrong
   for a notification title, which is an authored sentence. The budget here is
   what the timestamp leaves: the longest title, "Primer distillation finished
   with errors" (40 chars), clears "5h ago" and does NOT clear "365d ago" — and
   the feed is explicitly not age-bounded (smoke_activity_feed asserts it), so
   the wide stamp is reachable and the title truncated with it. The baseline
   alignment on `.act-item-top` keeps the time on the first line as the title
   wraps beneath it. */
.act-name.wrap{white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.act-tag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  flex-shrink:0;white-space:nowrap;}
.act-tag.run{color:var(--amber);}
.act-tag.queued{color:var(--text-dim);}
.act-tag.fail{color:var(--red);}

.act-bar{margin-top:7px;display:flex;align-items:center;gap:8px;}
.act-bar-track{flex:1;height:3px;border-radius:3px;background:var(--surface2);overflow:hidden;}
.act-bar-fill{height:100%;background:var(--amber);border-radius:3px;transition:width .3s;}
.act-bar-fill.indet{animation:pulse-dot 1.4s ease-in-out infinite;}
.act-pct{font-size:10px;color:var(--text-dim);font-variant-numeric:tabular-nums;flex-shrink:0;}

.act-divider{height:1px;background:var(--border);margin:8px 16px 0;}
.act-empty{padding:18px 16px;text-align:center;color:var(--text-dim);font-size:12px;}

@media (prefers-reduced-motion:reduce){
  .act-pop{animation:none;}
  .act-livepip,.act-node.live,.act-bar-fill.indet{animation:none;}
}

/* Phones: the activity LED sits mid-header, so the 21rem popover anchored to
   its right edge (right-0) would spill off the left edge. Below the phone
   breakpoint, detach it from the button and pin it to the viewport with side
   margins so it always stays fully on-screen. design.css loads after Tailwind,
   so these override .absolute / .right-0 / .top-full at equal specificity. */
@media (max-width:639px){
  .act-pop{
    position:fixed;
    top:calc(var(--app-header-h,53px) + 6px);
    left:8px; right:8px;
    width:auto; max-width:none;
    margin-top:0;
    max-height:calc(100dvh - var(--app-header-h,53px) - 76px);
  }
}

/* ── Host monitor (top-bar CPU/RAM read-out + sparkline popover) ──────────
   The third member of the header's monitoring family (.act-pop, .rx-*): the
   same --surface card, hairline border, amber eyebrow, mono numerals and
   stage-receipt quietness. It replaced a hand-rolled slate/amber palette that
   existed only in hex, so the card read as a dark chip floating on the cream
   body and the read-out's muted slate all but vanished on LightLedger.

   Every colour here is a token, which is what makes all six theme blocks
   (DarkLedger, LightLedger, litellm, litellm-dark, plus both High Contrast
   overlays) correct from one definition. Status hue rides ONE custom property,
   --sm-hue, set by an .ok/.warn/.crit class on the wrapper: the numeral, the
   sparkline stroke and its wash then agree by construction rather than by
   three parallel ternaries that can drift apart. Severity reads --amber /
   --red, so a theme that re-pitches those (High Contrast raises both for
   contrast; litellm swaps the accent to blue) carries the monitor with it.

   The wash is fill-opacity on the same hue rather than a second alpha colour,
   so there is nothing to keep in sync — and CSS beats the SVG presentation
   attribute, letting the High Contrast overlays deepen it below. */
/* position:relative lives here, not on a Tailwind `.relative` utility in the
   markup: the card is absolutely positioned against this button, so the class
   that draws the card should also own the containing block it needs. As a
   utility it was one file away, and losing it silently reparents the card to
   the viewport — it renders far below the fold instead of not at all. */
.sysmon{position:relative;cursor:pointer;background:transparent;border:none;
  padding:0;margin:0;font:inherit;color:inherit;}
.sysmon:focus{outline:none;}
.sysmon:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px;}
.sysmon-readout{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:2px;font-family:var(--font-mono);
  font-size:10px;line-height:1;font-variant-numeric:tabular-nums;}
.sysmon-stat{--sm-hue:var(--text-muted);color:var(--sm-hue);display:inline-flex;gap:4px;align-items:baseline;}
.sysmon-stat.warn{--sm-hue:var(--amber);}
.sysmon-stat.crit{--sm-hue:var(--red);}
.sysmon-stat.idle{--sm-hue:var(--text-dim);}
/* The metric name is scaffolding, the number is the reading — so the name
   stays neutral even when the number goes amber or red. Otherwise a warning
   paints three characters of label at the same weight as the value it
   qualifies, and the eye can't find which of the two rows moved. */
.sysmon-k{color:var(--text-dim);letter-spacing:.06em;}
.sysmon-tot{color:var(--text-dim);}

.sysmon-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:200;
  width:14.5rem;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.5);overflow:hidden;
  pointer-events:none;   /* read-only; closes on the trigger's mouseleave */
  animation:actPop .18s cubic-bezier(.22,.61,.36,1);}
/* Lighter drop shadow on the light surfaces (mirrors .shadow-lg / .ll-tip-float). */
html[data-theme="light"]   .sysmon-pop,
html[data-theme="litellm"] .sysmon-pop{box-shadow:0 18px 48px rgba(20,16,10,.16),0 1px 2px rgba(20,16,10,.08);}

.sysmon-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px 8px;border-bottom:1px solid var(--border);}
/* Same amber eyebrow as .act-eyebrow / .led-eyebrow, stepped down for a 14.5rem card. */
.sysmon-eyebrow{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);font-weight:600;}
.sysmon-window{font-size:9.5px;letter-spacing:.04em;color:var(--text-dim);
  font-variant-numeric:tabular-nums;}

.sysmon-metric{--sm-hue:var(--text-muted);padding:9px 12px 10px;}
.sysmon-metric + .sysmon-metric{border-top:1px solid var(--border);}
.sysmon-metric.warn{--sm-hue:var(--amber);}
.sysmon-metric.crit{--sm-hue:var(--red);}
.sysmon-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px;}
.sysmon-label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-dim);font-weight:600;}
.sysmon-num{font-size:11px;color:var(--sm-hue);font-variant-numeric:tabular-nums;
  font-family:var(--font-mono);}
.sysmon-unit{color:var(--text-dim);}

.sysmon-spark{display:block;overflow:visible;}
/* The 50%-of-capacity reference. --chart-grid is the same gridline token the
   Settings → Server Health canvases use, so the live sparkline and the durable
   chart it links to read at one weight. Paint order in the markup is wash →
   baseline → trace: drawn first, the reference vanished under the area fill on
   exactly the cards where a hot host put the trace above it. */
.sysmon-base{stroke:var(--chart-grid);stroke-width:1;vector-effect:non-scaling-stroke;}
/* Stroke weight and wash alpha are the documented chart treatment from
   design-system.md → Chart stroke & fill treatment: flat 1.6px ink, no glow,
   area fill at ~0.13. non-scaling-stroke because preserveAspectRatio="none"
   stretches the 180-unit viewBox across the card, which would otherwise thin
   the trace horizontally and thicken it vertically. The sanctioned
   "emphasized endpoint" dot is deliberately left off: the latest value is
   already printed as the numeral directly above, so the dot would be a second
   mark for a fact the card states in words. */
.sysmon-wash{fill:var(--sm-hue);fill-opacity:var(--sm-wash,.13);stroke:none;}
.sysmon-line{fill:none;stroke:var(--sm-hue);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
/* High Contrast: a 1.5px hairline over an 11% wash is the first thing to fall
   below the overlay's contrast floor, so thicken the trace and deepen the wash
   rather than leaving the sparkline as the one element the overlay misses. */
html[data-contrast="on"] .sysmon-pop{--sm-wash:.2;}
html[data-contrast="on"] .sysmon-line{stroke-width:2;}

@media (prefers-reduced-motion:reduce){ .sysmon-pop{animation:none;} }

/* ── Shared editorial section eyebrow ────────────────────────────────────
   The activity / monitoring family — Activity popover, host monitor,
   Inference activity, Sync log — wears the same amber eyebrow, marking
   them as one system. */
.led-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:600;}

/* Provider-route chip in the request log — monochrome, per the dense-table
   discipline (one accent only; the provider a call rode is not actionable,
   so it stays grayscale rather than five saturated tints). */
.rx-via{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  border:1px solid var(--border);color:var(--text-muted);font-size:10px;font-weight:600;letter-spacing:.05em;}

/* ── Image Gallery header — mobile responsive ────────────────────────────
   On narrow screens the description text and button row share one flex row,
   squishing both. Stack them vertically instead so each gets full width. */
@media (max-width:639px){
  .gallery-hdr { flex-direction:column; align-items:flex-start; gap:8px; }
  .gallery-hdr-actions { flex-wrap:wrap; }
}

/* ── Logs page — search-history histogram ────────────────────────────────
   Per-bar hover feedback for the expandable search-term timeline. The bar
   fill is var(--amber) (single series, the one accent); hover brightens the
   mark rather than repainting it so identity never shifts. */
.log-hist-slot{cursor:default;}
.log-hist-slot:hover > div{filter:brightness(1.2);}

/* Shared campaign context below time-series canvases. */
.campaign-chart-context { margin: 6px 0 12px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.campaign-chart-context summary { cursor: pointer; color: var(--text-muted); padding: 4px 0; }
.campaign-chart-context summary::marker { color: var(--ch-rose); }
.campaign-chart-context[open] { max-height: 260px; overflow-y: auto; }
.campaign-chart-context label { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.campaign-chart-context p { color: var(--text-dim); margin: 6px 0; }
.campaign-chart-context a { display: block; padding: 5px 0; color: var(--text); text-decoration: underline; overflow-wrap: anywhere; }
/* The number under the chart is the number in the lane above it: same chip, same
   tint. --ch-rose is one hex in every theme block, so its channels are safe here. */
.campaign-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-right: 3px; border-radius: 3px; box-sizing: border-box;
  border: 1px solid rgba(196,127,114,0.85); background: rgba(196,127,114,0.18); color: var(--text);
  font-size: 11px; font-weight: 600; line-height: 14px; text-align: center; vertical-align: 1px; text-decoration: none; }
.campaign-tip { position: fixed; left: 0; top: 0; z-index: 1000; max-width: 320px; padding: 8px 10px; border-radius: 6px;
  background: var(--surface2); border: 1px solid var(--border-strong); box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  color: var(--text); font-size: 12px; line-height: 1.45; pointer-events: none; }
.campaign-tip strong { display: block; font-weight: 600; margin-bottom: 2px; overflow-wrap: anywhere; }
.campaign-tip div { color: var(--text-muted); }
.campaign-tip .campaign-tip-obj { color: var(--text); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.campaign-tip .campaign-tip-hint { color: var(--text-dim); margin-top: 4px; font-size: 11px; }
.campaign-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 0; }
.campaign-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.campaign-fields input, .campaign-fields select, .campaign-fields textarea, .primer-kind-select { background: var(--surface2); border: 1px solid var(--border-strong); border-radius: 6px; padding: 7px 9px; color: var(--text); font: inherit; width: 100%; }
.campaign-fields .campaign-wide { grid-column: 1 / -1; }
.campaign-fields .campaign-check { flex-direction: row; align-items: center; }
.campaign-fields .campaign-check input { width: auto; }
.campaign-date-note { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* Primer — product sources, campaign context, and release notes. */
.primer-page { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; container: primer / inline-size; }
.primer-page > * { grid-column: 1 / -1; min-width: 0; }
.primer-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.primer-type { --primer-accent: var(--brand-amber); display: flex; align-items: center; gap: 14px; padding: 18px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); cursor: pointer; }
.primer-type-campaign { --primer-accent: var(--ch-rose); }
.primer-type:hover, .primer-type.is-selected { border-color: var(--primer-accent); background: color-mix(in srgb, var(--primer-accent) 6%, var(--surface)); }
.primer-type-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 9px; color: var(--primer-accent); background: color-mix(in srgb, var(--primer-accent) 10%, var(--surface)); }
.primer-type-icon svg { width: 23px; height: 23px; }
.primer-type strong { display: block; font-size: 14px; font-weight: 600; }
.primer-type small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.primer-count { display: inline-block; padding: 1px 6px; margin-left: 5px; border-radius: 4px; background: var(--surface2); color: var(--text-muted); font-size: 11px; font-weight: 500; vertical-align: middle; }
.primer-add-campaign { padding: 9px 16px; background: var(--brand-amber); border: 1px solid var(--brand-amber); border-radius: 8px; color: var(--bg); font-size: 13px; font-weight: 600; cursor: pointer; }
.primer-add-release { padding: 9px 16px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.primer-library-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 28px 0 16px; }
.primer-library-toolbar h2 { color: var(--text); font-size: 17px; font-weight: 600; }
.primer-library-toolbar p { margin-top: 5px; font-size: 12px; color: var(--text-dim); }
.primer-search { flex: 0 1 290px; }
.primer-search input { width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 12px; color: var(--text); font-size: 12px; }
.primer-filter-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; color: var(--text-dim); font-size: 12px; }
.primer-filter-note button { color: var(--brand-amber); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; background: none; border: none; }
.primer-no-results { padding: 30px 20px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--text-muted); font-size: 13px; text-align: center; }
.primer-source-list { display: grid; gap: 12px; }
.primer-source { --primer-accent: var(--brand-amber); min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; scroll-margin-top: 100px; }
.primer-source-campaign { --primer-accent: var(--ch-rose); border-left: 3px solid var(--primer-accent); }
.primer-source.is-open { border-color: var(--primer-accent); }
.primer-source.is-drag-target { outline: 2px solid var(--brand-amber); outline-offset: 2px; }
.primer-source.is-disabled .primer-source-body { opacity: .65; }
.primer-source-body { display: flex; min-width: 0; }
.primer-campaign-window { flex: 0 0 178px; display: flex; flex-direction: column; gap: 7px; padding: 20px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--ch-rose) 5%, var(--surface)); }
.primer-eyebrow { color: var(--text-dim); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; line-height: 1.5; }
.primer-campaign-window > time { color: var(--text); font-size: 17px; font-weight: 500; line-height: 1.5; margin-top: 8px; font-variant-numeric: tabular-nums; }
.primer-window-end { font-size: 12px; color: var(--text-muted); }
.primer-window-zone { font-size: 10px; color: var(--text-dim); overflow-wrap: anywhere; margin-top: 3px; }
.primer-source-content { flex: 1; min-width: 0; padding: 18px 20px; }
.primer-source-labels { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.primer-source-campaign .primer-source-labels > .primer-eyebrow { color: var(--ch-rose); }
.primer-status { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; color: var(--text-muted); background: var(--surface2); font-size: 10px; font-weight: 500; border: 1px solid var(--border); }
.primer-status-ran { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.primer-status-planned { color: var(--brand-amber); border-style: dashed; border-color: var(--brand-amber); }
.primer-source-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; background: none; border: none; padding: 0; text-align: left; font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.primer-source-title:hover { color: var(--primer-accent); }
.primer-source-title > span { flex-shrink: 0; color: var(--text-dim); font-size: 18px; font-weight: 400; }
.primer-source-description { margin-top: 6px; color: var(--text-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.primer-campaign-facts { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr); gap: 12px 24px; margin-top: 16px; }
.primer-campaign-facts dt { color: var(--text-dim); font-size: 11px; margin-bottom: 3px; }
.primer-campaign-facts dd { color: var(--text-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.primer-campaign-facts .primer-objective { grid-column: 1 / -1; }
.primer-document-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--text-dim); font-size: 11px; }
.primer-source-warning { color: var(--brand-amber); font-size: 11px; margin-top: 8px; }
.primer-source-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; border-top: 1px solid var(--border); }
.primer-source-usage, .primer-source-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.primer-source-usage button { display: inline-flex; gap: 5px; align-items: center; min-height: 28px; padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; background: none; color: var(--text-dim); font-size: 10px; cursor: pointer; }
.primer-source-usage button.is-on { color: var(--text-muted); }
.primer-source-usage button.is-on span { color: var(--green); }
.primer-source-usage button:disabled { cursor: default; }
.primer-chart-eligibility { font-size: 10px; color: var(--text-dim); margin-left: 4px; }
.primer-updated { font-size: 10px; color: var(--text-dim); margin-right: 5px; }
.primer-source-actions button { min-width: 28px; min-height: 28px; background: none; border: 1px solid transparent; border-radius: 4px; color: var(--text-muted); font-size: 15px; cursor: pointer; }
.primer-source-actions button:hover { background: var(--surface2); border-color: var(--border); }
.primer-source-actions button:disabled { opacity: .3; cursor: default; }
.primer-drag-handle { color: var(--text-dim); cursor: grab; padding: 4px; }
.primer-source-detail { padding: 18px 20px; background: var(--surface2); border-top: 1px solid var(--border); }
.primer-detail-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.primer-form-heading { padding-top: 8px; font-size: 16px; font-weight: 500; color: var(--text); }
.primer-field-label { display: block; font-size: 12px; color: var(--text-muted); }
.primer-campaign-form-intro { display: flex; flex-direction: column; gap: 4px; }
.primer-campaign-form-intro strong { font-size: 13px; color: var(--ch-rose); font-weight: 500; }
.primer-campaign-form-intro span { color: var(--text-dim); font-size: 12px; }
.campaign-fields { padding: 16px; border: 1px solid var(--border); border-left: 3px solid var(--ch-rose); border-radius: 8px; background: color-mix(in srgb, var(--ch-rose) 4%, var(--surface)); gap: 14px; }
.campaign-fields.primer-release-fields { border-left-color: var(--brand-amber); background: color-mix(in srgb, var(--brand-amber) 4%, var(--surface)); }
.primer-release-fields .primer-campaign-form-intro strong { color: var(--brand-amber); }
.campaign-date-note { line-height: 1.6; }
.primer-page button:focus-visible, .primer-page input:focus-visible, .primer-page select:focus-visible, .primer-page textarea:focus-visible { outline: 2px solid var(--brand-amber); outline-offset: 3px; }
@media (max-width: 640px) {
  .primer-types { grid-template-columns: 1fr; gap: 8px; }
  .primer-type { padding: 13px 14px; }
  .primer-search { flex-basis: 100%; }
  .primer-source-body { flex-direction: column; }
  .primer-campaign-window { flex: auto; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 16px; border-right: none; border-bottom: 1px solid var(--border); }
  .primer-campaign-window .primer-eyebrow { grid-column: 1 / -1; }
  .primer-campaign-window > time { font-size: 15px; margin: 0; }
  .primer-window-end { align-self: center; }
  .primer-window-zone { grid-column: 1 / -1; margin: 0; }
  .primer-source-content, .primer-source-detail { padding: 16px; }
  .primer-campaign-facts { gap: 12px; }
  .primer-source-footer { padding: 10px 12px; }
  .primer-source-actions { width: 100%; }
  .primer-updated { margin-right: auto; }
  .primer-source-actions button, .primer-source-usage button { min-height: 32px; }
  .campaign-fields { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .primer-page .flex { flex-wrap: wrap; }
}

/* Primer settings remain a local draft until the workspace admin saves. */
.primer-savebar { position: sticky; top: calc(var(--app-header-h, 56px) + 8px); z-index: 20; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--brand-amber); border-radius: 10px; background: var(--surface); box-shadow: 0 5px 18px var(--stroke-med); }
.primer-savebar-copy { flex: 1; min-width: 0; }
.primer-savebar strong { color: var(--text); font-size: 14px; font-weight: 600; }
.primer-savebar p { font-size: 12px; line-height: 1.6; color: var(--text-muted); margin-top: 4px; }
.primer-savebar .primer-save-impact { color: var(--text-dim); }
.primer-settings-hint { font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.primer-savebar-actions, .primer-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.primer-savebar-actions button, .primer-confirm-actions button { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface2); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 500; }
.primer-savebar button.primer-save-primary, .primer-confirm-actions button.primer-save-primary { background: var(--brand-amber); color: var(--bg); border-color: var(--brand-amber); }
.primer-savebar button:disabled, .primer-confirm-actions button:disabled { opacity: .5; cursor: default; }
.primer-savebar.is-saved { position: static; border-color: var(--border); box-shadow: none; }
.primer-savebar .primer-save-error, .primer-confirm-dialog .primer-save-error { color: var(--red); }
/* Digest gap — above the document list, because the control that closes it
   sits below one. Deliberately quieter than .primer-savebar: that one blocks
   navigation, this one is a standing condition the admin may leave open. */
.primer-digest-gap { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); }
.primer-digest-gap-copy { flex: 1; min-width: 0; }
.primer-digest-gap strong { display: block; color: var(--text); font-size: 13.5px; font-weight: 600; }
.primer-digest-gap p { font-size: 12px; line-height: 1.6; color: var(--text-muted); margin-top: 4px; }
.primer-digest-gap button { flex-shrink: 0; padding: 9px 14px; border: none; border-radius: 8px; background: var(--brand-amber); color: var(--bg); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.primer-digest-gap button:disabled { opacity: .5; cursor: default; }
/* An AI assistant's import over MCP, named where the documents are, with Undo. */
/* Undo sits level with the summary line, not the middle of a long title list. */
.primer-import-note { display: flex; align-items: flex-start; gap: 16px; padding: 12px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.primer-import-copy { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.primer-import-copy strong { color: var(--text); font-weight: 600; }
/* The imported titles are a list: one per line across the whole row, a long
   title wrapping under its own bullet. Not columns: a column narrows every
   title, and the last one wraps in a third of the row beside empty space. */
.primer-import-titles { margin-top: 4px; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.primer-import-titles li { position: relative; padding-left: 12px; }
.primer-import-titles li::before { content: '•'; position: absolute; left: 0; }
.primer-import-more { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--text-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.primer-import-undo { flex-shrink: 0; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: none; color: var(--text); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.primer-import-undo:disabled { opacity: .5; cursor: default; }
.primer-import-result { font-size: 12.5px; color: var(--text-muted); }
.primer-assistant-hint { font-size: 12px; line-height: 1.55; color: var(--text-dim); }
.primer-assistant-hint a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.primer-auto-distill { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); line-height: 1.55; cursor: pointer; }
.primer-auto-distill input { margin-top: 2px; flex-shrink: 0; accent-color: var(--brand-amber); }
.primer-auto-distill span small { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 2px; }
.primer-confirm-dialog { width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); margin: auto; }
.primer-confirm-dialog::backdrop { background: rgba(0,0,0,.55); }
.primer-confirm-dialog h2 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.primer-confirm-dialog p { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin-top: 10px; }
.primer-confirm-actions { margin-top: 20px; justify-content: flex-end; }
.primer-confirm-actions button:focus-visible { outline: 2px solid var(--brand-amber); outline-offset: 3px; }
/* Change history: every change to what analyses read, and what was decided
   about existing reports. Same card language as the import note above it. */
.primer-history { padding: 12px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.primer-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.primer-history-head h2 { font-size: 13px; font-weight: 600; color: var(--text); }
.primer-history-head p, .primer-history-meta { font-size: 12px; line-height: 1.55; color: var(--text-dim); margin-top: 2px; }
.primer-history-head button, .primer-history-row button { flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: none; color: var(--text); font-size: 12px; font-weight: 500; cursor: pointer; }
.primer-history-list { margin-top: 10px; border-top: 1px solid var(--border); }
.primer-history-list li { padding: 9px 0; border-bottom: 1px solid var(--border); }
.primer-history-list li:last-child { border-bottom: 0; }
.primer-history-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.primer-history-copy { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.primer-history-copy strong { color: var(--text); font-weight: 600; }
.primer-history-waiting { color: var(--brand-amber); }
.primer-impact-dialog { width: min(640px, calc(100vw - 32px)); }
.primer-impact-changes { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.primer-impact-changes li { position: relative; padding-left: 12px; overflow-wrap: anywhere; }
.primer-impact-changes li::before { content: '•'; position: absolute; left: 0; }
.primer-impact-changes strong { color: var(--text); font-weight: 600; }
.primer-impact-review { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); }
.primer-impact-review p:first-child { margin-top: 0; }
.primer-impact-diff { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.primer-impact-diff summary { cursor: pointer; }
.primer-impact-diff-body { margin-top: 6px; max-height: 260px; overflow: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.primer-diff-add { color: var(--green); }
.primer-diff-del { color: var(--red); }
.primer-diff-hunk { color: var(--text-dim); }
@media (max-width: 640px) {
  .primer-history { padding: 12px; }
  .primer-history-row { flex-direction: column; gap: 8px; }
  .primer-savebar { align-items: stretch; flex-direction: column; gap: 12px; padding: 12px; }
  .primer-digest-gap { align-items: stretch; flex-direction: column; gap: 12px; padding: 12px; }
  .primer-import-note { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px; }
  .primer-savebar-actions { justify-content: flex-end; }
  .primer-confirm-dialog { padding: 20px; }
}

/* Customer detail: report first, then inspectable operational depth. */
.customer-detail { --amber-text: var(--amber); }
html[data-theme="light"] .customer-detail { --amber-text: var(--text); }
.customer-detail [id^="customer-"] { scroll-margin-top: 88px; }
.customer-section-nav { display:flex; flex-wrap:wrap; gap:8px 24px; padding:12px 0 20px; border-bottom:1px solid var(--border); }
.customer-section-nav a { color:var(--text-muted); font-size:13px; text-decoration:none; padding:4px 0; }
.customer-section-nav a:hover { color:var(--text); text-decoration:underline; text-underline-offset:5px; }
.customer-section-nav a:focus-visible { outline:2px solid var(--amber); outline-offset:4px; }
.customer-section-heading { font-family:var(--font-ui); font-size:18px; font-weight:500; color:var(--text); padding-top:16px; }

/* Customer workspace — first application adoption of the homepage's quieter
   hierarchy. Keep the list's scroll island, row windowing, frozen columns,
   short-screen geometry, and the Vitals grid owned by their existing rules. */
.customer-workspace {
  --text-muted: color-mix(in srgb, var(--text) 76%, var(--bg));
  --text-dim: color-mix(in srgb, var(--text) 65%, var(--bg));
  --ui-control-radius: 6px;
  --ui-reading-size: 15px;
  --ui-control-size: 13px;
}
.ll-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.customers-view.customer-workspace { gap: 14px; }
.customers-page-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; flex-shrink: 0; }
.customers-page-heading p { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.customer-workspace .customers-coverage { gap: 0; flex-shrink: 0; }
.customer-workspace .customers-tier-card {
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; padding: 8px 16px; box-shadow: none;
}
.customer-workspace .customers-tier-card + .customers-tier-card { border-left: 1px solid var(--border); }
.customer-workspace .customers-tier-card:hover { background: var(--surface); }
.customer-workspace .customers-tier-card--active { background: var(--surface); border-bottom-color: var(--amber); }
.customer-workspace .customers-saved-views { gap: 4px; margin: 0; flex-shrink: 0; }
.customer-workspace .customers-saved-views > span { display: none; }
.customer-workspace .customers-saved-views > button {
  border: 0; border-radius: var(--ui-control-radius); background: transparent;
  padding: 7px 12px; font-size: var(--ui-control-size); color: var(--text-muted);
}
.customer-workspace .customers-saved-views > button[aria-pressed="true"] {
  background: var(--surface2); color: var(--text); box-shadow: inset 0 -2px var(--amber);
}
.customer-workspace .customers-saved-views > button > span { font-size: 12px; }
/* Personal saved views remain in the list chrome in focus mode and on phones. */
.customer-view-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; flex-shrink: 0; }
.customer-view-controls > .customer-saved-view-bar { flex: 1 1 300px; }
.customer-saved-view-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; flex-shrink: 0; color: var(--text); font-size: 13px; line-height: 18px; }
.customer-saved-view-bar > label { color: var(--text-muted); }
.customer-saved-view-bar select { flex: 1 1 160px; min-width: 0; max-width: 280px; width: 180px; }
.customer-saved-view-bar :is(select,button) { min-height: 30px; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); background: var(--surface); font: inherit; }
.customer-saved-view-bar button { cursor: pointer; }
.customer-saved-view-bar :is(select,button):disabled { opacity: .6; cursor: default; }
.customer-saved-view-bar :is(select,button):focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.customer-saved-view-state { color: var(--text); font-weight: 500; }
.customer-saved-view-notice { color: var(--text-muted); overflow-wrap: anywhere; }
.customer-saved-view-error { flex-basis: 100%; color: color-mix(in srgb, var(--red) 70%, var(--text)); overflow-wrap: anywhere; }
.customer-saved-view-dialog .customer-saved-view-default { display: flex; align-items: center; gap: 10px; }
.customer-saved-view-default input { width: 18px; height: 18px; accent-color: var(--amber); }
@media (max-width: 640px) {
  .customer-saved-view-bar :is(select,button) { min-height: 36px; }
  .customer-saved-view-bar select { max-width: none; }
}
@media (max-height: 520px) and (min-width: 641px) {
  .customer-saved-view-bar { gap: 4px 6px; font-size: 12px; }
  .customer-saved-view-bar :is(select,button) { min-height: 26px; padding: 3px 8px; }
  .customer-saved-view-bar select { max-width: 220px; }
}
.customers-result-count { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.customers-result-count strong { font-weight: 500; color: var(--text); }
.customers-result-count > span { margin-left: 4px; color: var(--text-dim); }
.customer-workspace .customers-toolbar-row { gap: 12px; padding: 12px 16px; }
.customer-workspace .customers-search { max-width: 360px; }
.customer-workspace .customers-search input { font-size: 14px; min-height: 36px; border-radius: var(--ui-control-radius); }
.customer-workspace .customers-toolbar-row button { font-size: var(--ui-control-size); min-height: 32px; }
.customer-workspace .customers-toolbar-menu { line-height: 1.5; }
.customer-workspace .customers-toolbar-menu select { min-height: 32px; font-size: 13px; }
.customer-workspace .customers-toolbar-menu label > span { font-size: 11px; }
/* Filters menu: sentence-case 12px headings and labels in readable ink (the
   10px uppercase gray-400 labels measured 2.54:1 on the light surface), one
   amber accent for a chosen pill like every other set filter, and each status
   pill's dot in its row badge's colour. Tokens only, so every theme block
   applies. Specificity beats the toolbar-row button rule above. */
.customer-workspace .customers-filters-menu .customers-filter-heading {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px;
  margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text);
}
.customer-workspace .customers-filters-menu .customers-filter-hint { font-weight: 400; color: var(--text-muted); }
/* 1.35 line-height and a 30px select: the sections stay short enough to sit
   two to a column at 1024x600 (check_customers_toolbar_menus.cjs). */
.customer-workspace .customers-filters-menu .customers-filter-label { font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.customer-workspace .customers-filters-menu select { min-height: 30px; }
.customer-workspace .customers-filters-menu .customers-filter-toggle { font-size: 13px; color: var(--text); }
.customer-workspace .customers-filters-menu .customers-filter-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 9999px; background: transparent;
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
  transition: border-color .12s, background-color .12s, color .12s;
}
.customer-workspace .customers-filters-menu .customers-filter-pill:hover { border-color: var(--border-strong); color: var(--text); }
.customer-workspace .customers-filters-menu .customers-filter-pill[aria-pressed="true"] {
  border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--text);
}
/* Nothing to show right now, but still a live control: quieter ink that keeps
   AA contrast (opacity would blend it below 4.5:1) and a faded dot. */
.customer-workspace .customers-filters-menu .customers-filter-pill--none { color: var(--text-dim); }
.customer-workspace .customers-filters-menu .customers-filter-pill--none .customers-filter-pill-dot { opacity: .4; }
.customers-filter-pill-dot { width: 6px; height: 6px; border-radius: 9999px; flex: 0 0 auto; }
.customer-workspace .customers-filters-menu .customers-filter-pill-count { color: var(--text-dim); }
.customer-workspace .customers-filters-menu .customers-filter-pill[aria-pressed="true"] .customers-filter-pill-count { color: var(--text-muted); }
.customer-workspace .customers-filters-menu .customers-filter-reset {
  min-height: 30px; font-size: 13px; color: var(--text-muted); background: transparent;
}
.customer-workspace .customers-filters-menu .customers-filter-reset:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.customers-view .customers-table-card thead th,
.customers-view .customers-table-card thead th button {
  font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--text-muted);
}
.customers-view .customers-table-card thead th { border-bottom-color: var(--border); }
.customers-view .customers-table-card tbody { font-size: 13px; }
.customers-view .col-sticky-customer a { font-size: 14px; }
.customers-view .col-sticky-customer a > span:first-child { color: var(--text) !important; font-family: var(--font-ui); }
.customer-workspace .ll-tier { font-size: 11px; letter-spacing: .02em; }
.customer-workspace .ll-tier--minimal { opacity: 1; }
.customer-workspace .ll-churn { font-size: 11px; letter-spacing: .02em; }
.customer-workspace .ll-status { font-size: 12px; }
.customers-empty-state { padding: 36px 24px; border-top: 1px solid var(--border); }
.customers-empty-state p:first-child { color: var(--text); font-size: 17px; }
.customers-empty-state p + p { margin-top: 8px; font-size: 14px; }
.customer-workspace :is(a, button, input, select, [role="button"]):focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px;
}
.customers-hide-btn:focus-visible, .customers-tbody:focus-within .customers-hide-btn { visibility: visible; opacity: 1; }

/* Report sections use open space for grouping; individual charts and editable
   widgets retain their own boundaries. Narrative panels share a reading scale. */
.customer-detail.customer-workspace {
  padding: 28px clamp(16px, 2.8vw, 40px);
  /* This selector outranks .view-pad; retain its fixed-tab-bar clearance. */
  padding-bottom: max(28px, calc(var(--app-tabbar-h, 0px) + env(safe-area-inset-bottom) + 0.5rem));
}
/* Wide desktop is opt-in so dense list/table views retain their own sizing.
   Keep this threshold in sync with Tailwind's `wide` screen. A separate content
   query lets an open Notes rail fall back to stacking without viewport JS. */
.customer-content { display: flex; flex-direction: column; gap: 20px; container: customer-content / inline-size; }
.customer-summary-grid, .customer-analysis-column, .customer-insights-layout { display: contents; }
@media (min-width: 1921px) {
  .workspace-wide { width: 100%; max-width: var(--workspace-wide-max); margin-inline: auto; }
  .customer-content :is(.co-description, .co-narrative, .co-action-title, .co-rationale, .co-quality p, .cra-summary, .cra-goal, .cra-secondary-goal, .cra-message) {
    max-width: var(--workspace-reading-measure);
  }
  .customer-content .customer-insight-panel :is(p, li, .text-xs, .text-sm) { max-width: var(--workspace-reading-measure); overflow-wrap: anywhere; }
  @container customer-content (min-width: 112rem) {
    .customer-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
    .customer-summary-grid > * { min-width: 0; }
    .customer-summary-grid > :only-child { grid-column: 1 / -1; }
    .customer-analysis-column { display: flex; flex-direction: column; gap: 20px; }
    .customer-summary-grid > .customer-recent-activity { padding: 24px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); }
    .customer-insights-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 24px; align-items: start; }
    .customer-insights-layout > .customer-insight-grid { display: contents; }
    .customer-detail .customer-insights-layout .customer-insight-panel { grid-column: auto; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
    .customer-insights-layout .customer-wins > .grid { grid-template-columns: minmax(0, 1fr); }
    .customer-insights-layout .customer-wins > .grid > * { grid-column: auto; }
  }
}
.customer-identity { padding-bottom: 8px; }
.customer-identity > a:first-child { flex-basis: 100%; margin-bottom: 8px; width: fit-content; }
/* Name over sub-line, as one flex item — the block (not the <h1>) takes the
   slack, so the chips and actions still sit at the right edge. The sub-line
   says what the name IS, which account it belongs to and how many key aliases
   that account holds; it is never a second printing of the webID, which the
   <h1> already resolves to. */
/* baseline, not center: it seats the favourite star on the title's own baseline
   with no magic offset, and leaves the sub-line aligned under the NAME rather
   than under the star. */
.customer-identity-block { flex: 1; min-width: 160px; display: flex; align-items: baseline; gap: 8px; }
.customer-identity-text { flex: 1; min-width: 0; }
.customer-identity-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* min-width:0 lets `overflow-wrap: anywhere` on .ll-page-title actually fire:
   a flex item's default min-width:auto would push a long name past the viewport. */
.customer-identity-name .ll-page-title { min-width: 0; }
/* Inline flow, deliberately not a flex row: flex gaps are not text, so an
   assertion (or a screen reader) on a flex sub-line reads "webID·Account 42"
   with the spaces missing. The separators here are real characters. */
.customer-identity-sub {
  margin-top: 2px; font-size: 12px; line-height: 1.6;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* margin, not gap: the focus ring is drawn outside the input's border box and
   would otherwise sit on top of the "·" separator while you type. */
.customer-identity-sub input { vertical-align: baseline; margin: 0 3px; }
.customer-identity-edit { display: inline-flex; align-items: center; color: var(--text-dim); transition: color .12s; }
.customer-identity-edit:hover, .customer-identity-edit:focus-visible { color: var(--amber-light); }
.customer-detail .customer-section { padding: 28px 0; border-top: 1px solid var(--border); }
.customer-section-title, .customer-detail .customer-section-heading {
  font-family: var(--font-ui);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.4;
  font-weight: 500; color: var(--text); margin: 0;
}
.customer-detail .customer-section-heading { border-top: 1px solid var(--border); padding-top: 28px; }
.customer-subsection-title { font-size: 16px; font-weight: 500; color: var(--text); margin: 0 0 16px; }
.customer-detail .customer-insight-grid { gap: 24px 40px; }
.customer-insight-panel { padding: 4px 0 16px; min-width: 0; }
.customer-insight-panel li { max-width: 78ch; }
.customer-insight-panel .text-sm { font-size: var(--ui-reading-size); line-height: 1.65; }
.customer-insight-panel .text-xs { font-size: 13px; line-height: 1.6; }
.customer-detail .customer-wins { padding: 24px 0 12px; border-top: 1px solid var(--border); }
.customer-detail .customer-conversation-section { box-shadow: none; border-radius: 10px; }
.customer-conversation-section > .flex:first-child { flex-wrap: wrap; gap: 10px 16px; padding: 18px 20px; }
.customer-detail .customer-section-nav { gap: 4px 24px; padding: 16px 0 8px; border-bottom: 0; }
.customer-detail .customer-section-nav a { font-size: 14px; padding: 6px 0; }
.customer-detail [id^="customer-"] { scroll-margin-top: calc(var(--app-header-h, 56px) + 20px); }
@media (max-width: 640px) {
  .customers-view.customer-workspace { gap: 8px; }
  .customers-page-heading { padding: 0 12px; }
  .customers-page-heading p { display: none; }
  .customers-page-heading .ll-page-title { font-size: clamp(1.25rem, 5vw, 1.5rem); }
  .customer-workspace .customers-toolbar-row { gap: 8px; }
  .customers-view .customers-result-count { display: none; }
  .customer-workspace .customers-toolbar-row button { min-height: 36px; }
  .customer-workspace .customers-filters-menu :is(.customers-filter-pill, .customers-filter-reset) { min-height: 36px; }
  .customer-workspace .customers-card { gap: 8px; padding: 16px 12px; }
  .customer-workspace .customers-identity-link { font-size: 15px; font-family: var(--font-ui); color: var(--text) !important; }
  .customer-workspace .customers-card-meta { font-size: 12px; gap: 4px 12px; }
  .customer-workspace .customers-card-signals { font-size: 14px; }
  .customer-workspace .customers-card-foot button { min-width: 32px; min-height: 32px; }
  .customer-workspace .customers-saved-views > button { min-height: 40px; }
  .customer-workspace .customers-tier-card { padding: 10px; }
  .customer-detail.customer-workspace {
    padding: 20px 16px;
    padding-bottom: max(20px, calc(var(--app-tabbar-h, 0px) + env(safe-area-inset-bottom) + 0.5rem));
  }
  .customer-detail .customer-section { padding: 24px 0; }
  .customer-detail .customer-section-nav { gap: 2px 20px; }
  .customer-detail .customer-insight-grid { gap: 16px; }
  .customer-conversation-section > .flex:first-child { padding: 16px 12px; }
}
/* A short window needs its height for data, including phones in landscape. */
@media (max-height: 520px) {
  .customers-page-heading { display: none; }
  .customer-workspace .customers-toolbar-row { padding-top: 4px; padding-bottom: 4px; gap: 6px; }
  .customer-workspace .customers-toolbar-row button { min-height: 26px; }
  .customer-workspace .customers-filters-menu :is(.customers-filter-pill, .customers-filter-reset) { min-height: 26px; }
  .customer-workspace .customers-search input { min-height: 28px; }
}
.customer-detail .bento-title { font-size: 13px; }
.customer-detail .vital-row { font-size: 12px; text-transform: none; letter-spacing: 0; }
.customer-detail .customer-section > .flex button { min-height: 28px; }
html[data-contrast="on"] .customer-workspace { --text-muted: inherit; --text-dim: inherit; }
.customers-mobile-count { display: none; color: var(--text-muted); font-size: 12px; margin-left: auto; }
@media (max-width: 640px) { .customers-mobile-count { display: block; } }
/* Status text keeps its hue while meeting normal-text contrast on the local
   surfaces; the original saturated status tokens still own chart fills. */
.customer-workspace :is(.ll-churn--crit, .ll-health--bad, .ll-status--fail) {
  color: color-mix(in srgb, var(--red) 65%, var(--text));
}
.customer-workspace .ll-churn--high { color: color-mix(in srgb, var(--amber) 70%, var(--text)); }

/* Dashboard: scoped to the curated and Custom canvases. Chart geometry and
   saved widget layouts remain owned by the existing dashboard code. */
.dashboard-workspace {
  --text-muted: color-mix(in srgb, var(--text) 76%, var(--bg));
  --text-dim: color-mix(in srgb, var(--text) 65%, var(--bg));
}
html[data-contrast="on"] .dashboard-workspace { --text-muted: inherit; --text-dim: inherit; }
.dashboard-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; margin-bottom: 20px; }
.dashboard-heading p { margin-top: 8px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard-actions button, .dashboard-catalog button { min-height: 36px; padding: 7px 12px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); background: var(--surface); }
.dashboard-actions button[aria-pressed="true"] { color: var(--text); border-color: var(--amber); background: var(--surface2); }
.dashboard-pages { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 3px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.dashboard-pages button { flex-shrink: 0; padding: 10px 12px; border-radius: 4px 4px 0 0; color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.dashboard-pages button[aria-pressed="true"] { color: var(--text); background: var(--surface); box-shadow: inset 0 -2px var(--amber); }
.dashboard-workspace :is(button, a, input, [tabindex]):focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.dashboard-scope { font-size: 12px; line-height: 1.6; color: var(--text-dim); margin-bottom: 24px; }
.dashboard-section-heading { flex-wrap: wrap; margin-top: 24px; margin-bottom: 12px; }
.dashboard-section-heading h2 { font-size: 15px; font-weight: 500; color: var(--text); }
.dashboard-section-heading > div { display: none; }
.dashboard-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 24px; margin-bottom: 24px; }
.dashboard-metric-group { min-width: 0; }
.dashboard-metric-group > .dashboard-section-heading { margin-top: 0; align-items: baseline; }
.dashboard-workspace .dashboard-metrics { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px; }
.dashboard-workspace .dashboard-metric { padding: 12px 8px; border-width: 0 0 1px !important; border-radius: 0; background: transparent !important; min-width: 0; }
.dashboard-metric > .ll-metric-value { font-size: 26px; }
.dashboard-metric > .text-xs { font-size: 13px; line-height: 1.5; }
.dashboard-workspace .tile-expand-btn { opacity: 1; min-width: 28px; min-height: 28px; color: var(--text-muted); }
.dashboard-workspace .dashboard-panel, .dashboard-activity { border-radius: 8px; padding: 24px; }
.dashboard-chart-title { font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--text) !important; }
.dashboard-activity > h2 { margin-bottom: 16px; }
.dashboard-chart-controls { gap: 10px; }
.dashboard-chart-controls button { min-height: 34px; font-size: 13px; color: var(--text-muted); background: var(--surface); border-color: var(--border); }
.dashboard-panel > .flex.items-center { flex-wrap: wrap; }
.dashboard-panel > .text-xs { font-size: 14px; line-height: 1.6; }
.dashboard-catalog { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: min(440px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-left: 1px solid var(--border); color: var(--text); background: var(--surface); }
.dashboard-catalog::backdrop { background: rgba(0,0,0,.45); }
.dashboard-catalog-content { height: 100%; display: flex; flex-direction: column; }
.dashboard-catalog h2 { font-size: 18px; font-weight: 500; }
.dashboard-catalog .text-xs { font-size: 13px; line-height: 1.5; }
.dashboard-catalog-item { outline-offset: -3px !important; }
.dashboard-catalog-item[aria-checked="false"] { opacity: 1 !important; }
.dashboard-catalog input { min-height: 40px; }
@media (max-width: 640px) {
  .dashboard-heading { margin-bottom: 16px; }
  .dashboard-actions button, .dashboard-pages button { min-height: 40px; }
  .dashboard-workspace .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dashboard-workspace .dashboard-metric { padding: 12px 8px; }
  .dashboard-metric > .ll-metric-value { font-size: 23px; }
  .dashboard-workspace .dashboard-panel, .dashboard-activity { padding: 16px; }
  .dashboard-chart-controls > div:first-child { flex-basis: 100%; }
  .dashboard-chart-controls > div:first-child button { flex: 1; }
  .dashboard-chart-controls > div:nth-child(2) { display: none; }
}
.dashboard-workspace .grid > div { min-width: 0; }
.dashboard-workspace canvas { max-width: 100%; }
@media (min-width: 1100px) {
  .dashboard-metric-group > .dashboard-section-heading { min-height: 52px; align-content: start; }
}
/* Quantities use neutral ink; status and selection retain selective color. */
html .dashboard-workspace :is(.text-amber-400, .text-amber-500) { color: color-mix(in srgb, var(--amber) 55%, var(--text)) !important; }
html .dashboard-workspace :is(.text-red-400, .text-red-500) { color: color-mix(in srgb, var(--red) 65%, var(--text)) !important; }
html .dashboard-workspace :is(.text-emerald-400, .text-emerald-500, .text-emerald-600) { color: color-mix(in srgb, var(--green) 55%, var(--text)) !important; }
.dashboard-workspace .dashboard-metric:not([data-tile-id="success_rate"]):not([data-tile-id="repeat_request_rate"]) > .ll-metric-value { color: var(--text) !important; }
.dashboard-chart-controls button[aria-pressed="true"] { color: var(--text); background: var(--surface2); box-shadow: inset 0 -2px var(--amber); }

/* Reports: local navigation, readable narratives, and inspectable audit rows. */
.reports-workspace { --text-muted:color-mix(in srgb,var(--text) 76%,var(--bg)); --text-dim:color-mix(in srgb,var(--text) 65%,var(--bg)); max-width:1600px; margin-inline:auto; }
.reports-heading p { font-size:14px; color:var(--text-muted); margin-top:6px; }
.reports-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:32px; align-items:start; }
.reports-workspace .reports-nav { position:sticky; top:calc(var(--app-header-h,60px) + 16px); min-width:0; }
.reports-nav nav { display:block; }
.reports-workspace .reports-nav-group { font-size:12px!important; text-transform:none; letter-spacing:0; padding:12px 12px 6px; }
.reports-workspace .reports-nav button { width:100%; font-size:13px; min-height:40px; border-radius:4px; }
.reports-workspace .reports-nav button span:not(.flex-1) { font-size:11px!important; }
.reports-section-heading { padding-bottom:6px; }
.reports-section-heading h2 { font-size:24px; line-height:1.25; font-weight:600; color:var(--text); }
.reports-section-heading p { font-size:14px; line-height:1.6; color:var(--text-muted); max-width:76ch; margin-top:8px; }
.reports-section-heading .reports-scope { font-size:13px; }
.reports-content { overflow-wrap:anywhere; }
.reports-content .text-xs { font-size:13px; line-height:1.55; }
.reports-content [class~="text-[10px]"], .reports-content [class~="text-[11px]"] { font-size:12px; line-height:1.5; }
.reports-workspace .reports-subheading { font-size:15px; text-transform:none; letter-spacing:0; color:var(--text)!important; line-height:1.4; }
.reports-content button, .reports-content select, .reports-content input:not([type=checkbox]) { min-height:34px; }
.reports-content input:not([type=checkbox]), .reports-content select { max-width:100%; }
.reports-workspace :is(button,a,input,select,[role=button]):focus-visible { outline:2px solid var(--text); outline-offset:3px; }
.reports-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.reports-workspace .reports-metrics > div { min-width:0!important; border:0!important; border-bottom:1px solid var(--border)!important; border-radius:0; background:transparent!important; text-align:left; padding:12px 0 18px; }
.reports-metrics .ll-metric-value { font-size:27px; }
.reports-metrics .uppercase { text-transform:none; letter-spacing:0; }
/* Flex, not an auto-fit grid: a chip breakdown squeezed into one 165px track
   stacks a chip per line and stretches every tile in its row, and a grid item
   spanning 1 / -1 keeps the empty auto-fit tracks alive, so the tiles stop
   filling the row. Tiles share a row; the chip breakdown gets one to itself. */
.reports-audit-metrics { display:flex; flex-wrap:wrap; }
.reports-audit-metrics > div { flex:1 1 165px; }
.reports-audit-metrics > .reports-metric-chips { flex-basis:100%; }
.reports-segments { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.reports-workspace .reports-reading { max-width:960px; border:0!important; background:transparent!important; }
.reports-reading > div { padding:24px 0; border-color:var(--border); }
.reports-reading > .areg-entry-meta { padding:12px 0; background:transparent!important; font-size:12px; }
.reports-reading :is(p,.leading-snug,.leading-relaxed) { line-height:1.7; }
.reports-reading .serif { font-size:25px; line-height:1.4; max-width:44ch; }
.reports-reading .text-sm { font-size:15px; max-width:76ch; }
.reports-reading .flex { flex-wrap:wrap; }
.reports-reading ol > .flex { flex-wrap:nowrap; }
.reports-notes { max-width:1040px; }
.reports-notes > div { padding:16px 0; }
.reports-note { padding:20px 0; border-bottom:1px solid var(--border); }
.reports-note-body { font-size:15px!important; line-height:1.7!important; max-width:76ch; }
.reports-notes select { min-width:0; }
.reports-audit-toolbar { border-block:1px solid var(--border); padding:14px 0; gap:10px; }
.reports-audit-toolbar input[type=text] { flex:1 1 240px; min-width:0!important; }
.reports-audit-row { display:grid; grid-template-columns:34px minmax(140px,1.5fr) minmax(90px,.7fr) minmax(100px,1fr) minmax(80px,.6fr); gap:14px; padding:16px 12px; }
.reports-audit-row > div { width:auto!important; min-width:0!important; }
.reports-audit-row > .reports-audit-counts { grid-column:2 / -1; grid-row:3; }
.reports-audit-row > .reports-audit-model { grid-column:2 / -1; grid-row:4; }
.reports-row-toggle { width:32px!important; height:34px; text-align:center; }
.reports-content .intake-row[role=button] { flex-wrap:wrap; min-height:40px; }
.reports-content .intake-row[role=button] > .truncate { min-width:100px!important; }
.reports-content .expanded-content { font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
.reports-content .grid > div { min-width:0; }
.reports-content canvas { max-width:100%; }
@media (max-width:767px) {
 .reports-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
 .reports-workspace .reports-nav { position:static; }
 .reports-nav nav { display:flex; overflow-x:auto; padding-bottom:8px; border-bottom:1px solid var(--border); }
 .reports-workspace .reports-nav button { width:auto; min-height:42px; }
 .reports-workspace .reports-nav-group { display:none; }
 .reports-section-heading h2 { font-size:22px; }
 .reports-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 .reports-audit-row { grid-template-columns:32px minmax(0,1fr) minmax(75px,.6fr); gap:12px; }
 .reports-audit-row > .flex-1 { grid-column:2 / -1; grid-row:2; }
 .reports-audit-row > .text-right { grid-column:2 / -1; text-align:left; }
 .reports-content .flex.items-center.justify-between { flex-wrap:wrap; gap:8px; }
 .reports-content button, .reports-content select, .reports-content input:not([type=checkbox]) { min-height:40px; }
 .reports-notes .ml-auto { margin-left:0; }
}
html[data-contrast=on] .reports-workspace { --text-muted:var(--text); --text-dim:var(--text); }

.reports-table-scroll { overflow-x:auto; max-width:100%; }
.reports-table-scroll table { min-width:780px; }
.reports-workspace { --reports-accent:color-mix(in srgb,var(--amber) 55%,var(--text)); --reports-danger:color-mix(in srgb,var(--red) 55%,var(--text)); }
html .reports-workspace .reports-accent { color:var(--reports-accent)!important; }
html .reports-workspace :is(.text-red-400,.text-red-500,.text-red-600) { color:var(--reports-danger)!important; }
html .reports-workspace :is(.text-amber-400,.text-amber-500,.text-amber-600) { color:var(--reports-accent)!important; }
html .reports-workspace :is(.text-emerald-500,.text-emerald-600,.text-emerald-700) { color:color-mix(in srgb,var(--green) 55%,var(--text))!important; }
.reports-workspace .reports-generate { background:var(--surface2)!important; color:var(--text)!important; border:1px solid var(--reports-accent); }
.reports-workspace .reports-generate:disabled { opacity:.6; }
.reports-workspace .reports-note-avatar { color:var(--text)!important; background:var(--surface2)!important; }
.reports-workspace .reports-nav .tabular-nums { color:var(--text)!important; background:var(--surface2)!important; }

html .reports-workspace button.reports-accent[aria-pressed="false"] { color:var(--text-muted)!important; }
html .reports-workspace button.reports-accent[aria-pressed="true"] { border-color:var(--reports-accent)!important; }

/* Ask reading workspace — scoped refinements; shell sizing and run state remain owned above. */
.ask-view {
  --text-muted: color-mix(in srgb, var(--text) 82%, var(--bg));
  --text-dim: color-mix(in srgb, var(--text) 70%, var(--bg));
}
.ask-view .ask-sidebar-head { padding-top: 12px; padding-bottom: 6px; }
.ask-view .ask-new-conv-btn { min-height: 38px; font-size: 13px; }
.ask-view .ask-sidebar-nav-row { min-height: 38px; font-size: 13px; }
.ask-view .ask-search-input { min-height: 36px; font-size: 13px !important; }
.ask-view .ask-segmented-btn { min-height: 28px; font-size: 13px; }
.ask-view .ask-filter-chip { min-height: 32px; font-size: 13px; }
.ask-view .ask-conversation-row[aria-current="true"] { color: var(--text) !important; background: var(--surface2) !important; }
.ask-view .ask-conversation-row { padding: 10px !important; font-size: 13px !important; }
.ask-view .ask-history-heading { padding-top: 20px; }
.ask-view .ask-thread-header { min-height: 56px; padding: 8px 20px; }
.ask-view .ask-thread-title, .ask-view .ask-thread-title-new { font-size: 15px; }
.ask-view .ask-thread-owner, .ask-view .ask-header-action { font-size: 12px; }
.ask-view .ask-header-action { background: transparent; border-color: transparent; min-height: 34px; }
.ask-view .ask-header-action:hover { background: var(--surface2); border-color: var(--border); }
.ask-view .ask-width-toggle[aria-pressed="true"] { background: var(--surface2); border-color: var(--border-strong); color: var(--text); }
.ask-view .ask-scroll { padding: 28px 32px; scroll-padding: 24px; }
/* One column for the transcript, follow-ups, and composer. Full width uses
   the available chat pane, so sidebars and answer panels keep their space. */
.ask-view .ask-chat { --ask-content-width: 760px; --ask-answer-gutter: 36px; }
.ask-view .ask-chat.is-full-width { --ask-content-width: 100%; }
.ask-view .ask-scroll > :is([id^="ask-msg-"], .ask-followups, .ask-live-answer),
.ask-view .ask-composer-inner { width: 100%; max-width: var(--ask-content-width); margin-inline: auto; }
.ask-view .ask-followups { padding-inline-start: var(--ask-answer-gutter); }
.ask-view .ask-followups .ask-suggestion-btn { max-width: 100%; white-space: normal; text-align: start; overflow-wrap: anywhere; }
.ask-view .ask-user-bubble { font-size: 15px !important; background: var(--surface2) !important; border-color: var(--border) !important; border-radius: 12px !important; overflow-wrap: anywhere; }
/* A message carrying a fenced block takes the reading column: at 480px a
   snippet is a column of two-word lines. Every wrapper between the row and
   the bubble is shrink-to-fit — that is what makes a short question hug its
   own text — so the width has to be handed down the whole chain. The bubble
   then takes what is left beside the timestamp with FLEX, never width:100%:
   a long unwrappable line resolves that against its own max-content and
   overflows to the left, under the sidebar, because the row is justify-end.
   min-width:0 is what lets the block scroll instead of widening its parents,
   and !important beats the inline max-width the bubble is born with, the same
   way the rule above beats its colours. */
.ask-view .ask-user-message.has-code > div,
.ask-view .ask-user-message.has-code .ask-user-bubble-col,
.ask-view .ask-user-message.has-code .ask-user-bubble-row { width: 100%; }
.ask-view .ask-user-message.has-code .ask-user-bubble { flex: 1 1 auto; max-width: 100% !important; min-width: 0; }
.ask-view .ask-user-message > div { min-width: 0; max-width: 100% !important; }
.ask-view .ask-user-message .flex.items-end { min-width: 0; }
.ask-view .ask-user-code { font-size: 13px; padding: 12px 14px; }
.ask-view .ask-user-code.is-clamped { max-height: 22em; }
.ask-view .ask-user-code .ask-code-copy { opacity: 1; min-height: 30px; }
.ask-view .ask-user-code .hl-keyword { color: color-mix(in srgb, var(--amber) 55%, var(--text)); }
html .ask-view .ask-user-code code { background: transparent; color: var(--text); }
.ask-view .ask-code-more { font-size: 12px; min-height: 30px; }
.ask-view .ask-prose { font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.ask-view .ask-prose :is(p,ul,ol,pre,table,blockquote) { margin-bottom: 18px; }
.ask-view .ask-prose li { margin-bottom: 7px; }
.ask-view .ask-prose :is(h1,h2,h3) { font-family: var(--font-ui); font-weight: 500; line-height: 1.4; margin: 28px 0 12px; letter-spacing: -.01em; }
.ask-view .ask-prose h1 { font-size: 23px; }
.ask-view .ask-prose h2 { font-size: 21px; }
.ask-view .ask-prose h3 { font-size: 18px; }
.ask-view .ask-prose > :first-child { margin-top: 0; }
.ask-view .ask-prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.ask-view .ask-prose a:hover { text-decoration-thickness: 2px; }
.ask-view .ask-prose code { font-family: var(--font-mono); font-size: .85em; color: var(--text); }
.ask-view .ask-prose pre { max-width: 100%; padding: 16px; }
.ask-view .ask-prose pre code { font-size: 13px; white-space: pre; overflow-wrap: normal; }
.ask-view .ask-prose pre.ask-code .ask-code-copy { opacity: 1; min-height: 30px; }
.ask-view .ask-prose table { max-width: 100%; font-size: 14px; }
.ask-view .ask-prose th { font-size: 13px; text-transform: none; letter-spacing: 0; }
.ask-view .ask-prose :is(th,td) { padding: 10px 12px; border-inline: none; }
.ask-view .ask-tool-disclosure { text-align: left; cursor: pointer; }
.ask-view .ask-msg-action { min-height: 32px; font-size: 12px; }
.ask-view .ask-composer-bar { padding: 14px 32px 18px; border-top-color: transparent; background: var(--bg); }
.ask-view .ask-composer { padding: 10px; border-radius: 14px; background: var(--surface); }
/* The Ask view restyles the composer shell (bigger radius, --surface rather
   than --bg), so the attachment strip has to be restated here or it would
   sit on a differently coloured, differently rounded box. Same specificity
   as the rule above and later in the file, which is what makes the joined
   corners actually win. */
.ask-view .ask-attach-strip { padding: 10px 10px 6px; border-radius: 14px 14px 0 0;
                              background: var(--surface); }
.ask-view .ask-attach-strip + .ask-composer { border-radius: 0 0 14px 14px; }
.ask-view .ask-composer-ta { font-size: 16px; font-weight: 400; }
.ask-view .ask-foreign-note { font-size: 12px; line-height: 1.5; padding-bottom: 10px; }
.ask-view .ask-foreign-note .truncate { white-space: normal; }
.ask-view .ask-foreign-note-link { font-size: 12px; color: var(--text); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.ask-view .ask-greeting { font-size: 28px !important; font-weight: 400 !important; }
.ask-view .ask-empty > img { width: 40px; height: 40px; margin-bottom: 16px !important; }
.ask-view .ask-header-icon { min-width: 34px; }
.ask-view :is(button,a,input,table,pre):focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.ask-view .ask-msg-action:focus-visible { opacity: 1; }
@media (max-width: 899px) {
  .ask-view .ask-thread-header { flex-wrap: wrap; gap: 4px 8px; padding: 6px 12px; }
  .ask-view .ask-thread-actions { order: 2; width: 100%; justify-content: flex-end; }
  /* Phones already give the actions their own row; the title block keeps a
     zero basis so the drawer toggle, title and new-chat icon share row one
     down to 320px. */
  .ask-view .ask-thread-header .ask-thread-identity { flex-basis: 0%; }
  .ask-view .ask-chat { --ask-answer-gutter: 28px; }
  .ask-view .ask-scroll { padding: 20px 16px; }
  .ask-view .ask-answer-message { gap: 8px; }
  .ask-view .ask-answer-message > img { width: 20px; height: 20px; }
  .ask-view .ask-composer-bar { padding: 10px 16px 12px; }
  .ask-view .ask-icon-btn { width: 36px; height: 36px; }
  .ask-view .ask-msg-action, .ask-view .ask-header-action { min-height: 36px; }
  .ask-view .ask-greeting { font-size: 25px !important; }
  .ask-view .ask-user-message .ask-msg-action { opacity: 1; }
  .ask-view .ask-side-panel { position: absolute; inset: 0; width: 100% !important; z-index: 30; }
}
/* The empty state sheds decoration before it sheds function: the mark goes
   first, and only past that does anything scroll. The threshold is where the
   worst case stops fitting — four two-line starter cards under the composer,
   with the demo banner up top — measured by check_ask_empty_fit.cjs, which
   fails if it drifts. (There is no standfirst to shed since 2026-11-07.) */
@media (max-height: 760px) {
  .ask-view .ask-empty > img { display: none; }
}
/* Phones: the app header already carries the mark two rows up. */
@media (max-width: 899px) {
  .ask-view .ask-empty > img { display: none; }
}
@media (max-height: 600px) {
  .ask-view .ask-empty-spacer { flex: 0; }
  .ask-view .ask-chat.is-empty .ask-scroll { flex: 0 1 auto !important; padding-block: 8px; }
  .ask-view .ask-chat.is-empty .ask-composer-bar { overflow-y: auto; flex-shrink: 1; }
}
.ask-view { position: relative; }
html[data-contrast="on"] .ask-view { --text-muted: var(--text); --text-dim: var(--text); }
.ask-view .ask-composer-ta::placeholder { color: var(--text-dim) !important; opacity: 1; }
.ask-view .ask-prose pre code .hl-keyword { color: color-mix(in srgb, var(--amber) 55%, var(--text)); }
html .ask-view .ask-prose code { color: var(--text); }
html .ask-view .ask-prose pre code { background: transparent; }
.ask-view .ask-avatar-fallback { background: rgba(0,0,0,.25); }
.ask-view .ask-author-label, .ask-view .ask-toc-card-meta { font-size: 12px; }
.ask-view .ask-notebook-link, .ask-view .ask-notebook-group-head { font-size: 13px; }
.ask-view .ask-notebook-link { padding-block: 9px; }
.ask-view .ask-notebook-panel .ask-input { min-height: 36px; font-size: 14px !important; }
.ask-view .ask-toc-card-title { font-size: 13px; }
.ask-view .ask-toc-card-prose { font-size: 14px; }
.ask-view .ask-toc-card-prose p { margin-bottom: 8px; }
@media (max-width: 899px) {
  .ask-view .ask-thread-actions > .relative { position: static; }
  .ask-view .ask-toc-menu { right: 12px; max-width: calc(100vw - 24px); max-height: min(440px, 40dvh); }
}
.ask-view .ask-live-answer { width: 100%; max-width: 760px !important; margin-inline: auto; gap: 12px; }
.ask-view .ask-live-answer > img { width: 24px; height: 24px; }
.ask-view .ask-answer-preview { margin: 14px 0; padding: 16px 18px 2px; border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 8px; background: var(--surface); }
.ask-view .ask-preview-heading { font-size: 13px; font-weight: 500; color: var(--text); }
.ask-view .ask-preview-note { margin: 4px 0 16px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.ask-view .ask-answer-progress { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--text); }
.ask-view .ask-progress-elapsed { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.ask-view .ask-long-wait { margin: 12px 0 0; max-width: 54ch; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
/* Live AI spend line: the words carry the state; the dot only echoes it
   (filled + pulsing while a model call runs, hollow during a local read). */
.ask-view .ask-usage-live { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ask-view .ask-usage-dot { width: 8px; height: 8px; flex: none; margin-right: 2px; border-radius: 50%; border: 1.5px solid var(--text-dim); }
.ask-view .ask-usage-live[data-ai="on"] { color: var(--text); }
.ask-view .ask-usage-live[data-ai="on"] .ask-usage-dot { border-color: var(--amber); background: var(--amber); animation: ask-usage-pulse 1.6s ease-in-out infinite; }
/* The leading " · " is real text (copy and screen readers get it); a flex
   item drops the leading space from layout, and the gap spaces it instead. */
.ask-view .ask-usage-spend { color: var(--text-dim); }
@keyframes ask-usage-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ask-view .ask-usage-live[data-ai="on"] .ask-usage-dot { animation: none; } }

.ask-view .ask-prose :is(th,td) { min-width: 140px; }
.ask-view .ask-prose pre.ask-code { padding-top: 42px; }
@media (max-width: 899px) {
  .ask-view .ask-live-answer { gap: 8px; }
  .ask-view .ask-live-answer > img { width: 20px; height: 20px; }
}

/* Logs: filters, request previews, and readable evidence (2026-09-12). */
.logs-workspace { --text-muted:color-mix(in srgb,var(--text) 82%,var(--bg)); --text-dim:color-mix(in srgb,var(--text) 70%,var(--bg)); }
.logs-page-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.logs-page-heading p { margin-top:6px; font-size:14px; color:var(--text-muted); }
.logs-workspace .logs-archive-link { font-size:13px; flex-shrink:0; }
.logs-workspace .logs-filter-card { padding:16px 0 20px; margin-bottom:20px; border-bottom:1px solid var(--border); }
.logs-workspace .logs-filter-card label { font-size:12px; color:var(--text-muted); }
.logs-workspace .logs-filter-card input,
.logs-workspace .logs-filter-card select,
.logs-workspace .logs-filter-card button { min-height:36px; font-size:13px; }
.logs-workspace .logs-filter-card input[type="text"] { font-size:16px; }
.logs-workspace .logs-search-submit { background:var(--text) !important; color:var(--bg) !important; }
.logs-workspace .logs-table-card,
.logs-workspace .logs-hist-card { box-shadow:none !important; border:1px solid var(--border); border-radius:8px !important; }
.logs-workspace .logs-table-card thead th { font-size:12px; text-transform:none; letter-spacing:0; font-weight:500; }
.logs-workspace tr.log-row > td { padding-top:4px; padding-bottom:4px; }
.logs-workspace .log-row.is-expanded { background:var(--surface2); }
.logs-workspace .logs-col-user a { color:var(--text) !important; text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:3px; }
.logs-workspace .logs-col-msg { font-size:14px !important; color:var(--text) !important; }
.logs-workspace .logs-col-exp { padding-left:0 !important; padding-right:0 !important; }
.logs-workspace .logs-expand { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font-size:20px; border-radius:4px; color:var(--text-muted); }
.logs-workspace .logs-expand:hover { background:var(--surface2); color:var(--text); }
.logs-workspace :is(button,input,select,a):focus-visible { outline:2px solid var(--text); outline-offset:2px; }
.logs-workspace .log-row button:focus-visible { opacity:1; }
.logs-workspace .logs-detail { padding:20px 24px; display:flex; flex-direction:column; gap:16px; background:var(--surface); border-top:1px solid var(--border); min-width:0; }
.logs-workspace .logs-detail-identity { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; font-size:12px; color:var(--text-muted); overflow-wrap:anywhere; }
.logs-workspace .logs-detail-identity strong { font-size:15px; font-weight:500; color:var(--text); }
.logs-workspace .logs-detail-tags { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--text-muted); font-size:12px; overflow-wrap:anywhere; }
.logs-workspace .logs-prompt-label { font-size:14px; font-weight:500; margin-bottom:8px; }
.logs-workspace .logs-content-notice { display:flex; flex-direction:column; gap:8px; padding:12px 16px; border:1px solid var(--border); border-left:3px solid var(--amber); border-radius:6px; background:var(--surface2); color:var(--text-muted); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.logs-workspace .logs-content-notice h3 { margin:0; color:var(--text); font-size:14px; font-weight:500; }
.logs-workspace .logs-content-notice p { margin:0; }
.logs-workspace .logs-content-fields { display:flex; flex-direction:column; gap:4px; margin:0; }
.logs-workspace .logs-content-fields > div { display:flex; flex-wrap:wrap; gap:0 12px; }
.logs-workspace .logs-content-fields dt { color:var(--text); font-weight:500; }
.logs-workspace .logs-content-fields dd { margin:0; }
.logs-workspace .logs-content-audit a { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.logs-workspace .logs-content-audit a:hover { text-decoration-thickness:2px; }
html .logs-workspace .expanded-content { background:var(--bg) !important; color:var(--text) !important; padding:16px !important; font-family:var(--font-mono); font-size:14px; line-height:1.7; max-height:480px; overflow:auto; overflow-wrap:anywhere; }
.logs-workspace .log-detail-toggle { display:flex; width:100%; min-height:36px; padding:8px 0; font-family:inherit; font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; text-align:left; color:var(--text) !important; }
.logs-workspace .logs-request-meta { font-size:13px; line-height:1.7; padding-top:12px; border-top:1px solid var(--border); overflow-wrap:anywhere; }
.logs-workspace .logs-request-meta > div { min-width:0; }
.logs-workspace .logs-pagination { font-size:13px; background:transparent !important; }
html[data-theme="highcontrast"] .logs-workspace { --text-muted:var(--text); --text-dim:var(--text); }
@media(max-width:899px) {
  .logs-workspace .logs-filter-search { flex-basis:100%; }
  .logs-workspace .logs-detail { padding:16px; }
  .logs-workspace .logs-filter-card .logs-filter-adv { max-width:100%; }
}
@media(max-width:640px) {
  .logs-page-heading { align-items:flex-start; margin-bottom:12px; gap:12px; }
  .logs-page-heading p { max-width:220px; font-size:13px; }
  .logs-workspace .logs-archive-link { font-size:12px; margin-top:8px; }
  .logs-workspace .logs-table-card tr.log-row { padding:6px 12px; gap:4px 8px; }
  .logs-workspace .logs-table-card tr.log-row > td.logs-col-msg { line-height:1.5; height:42px; }
  .logs-workspace .logs-detail-identity strong { flex-basis:100%; }
  .logs-workspace .logs-detail-tags { padding-bottom:8px; border-bottom:1px solid var(--border); }
  .logs-workspace .logs-request-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-height:520px) {
  .logs-page-heading { margin-bottom:4px; }
  .logs-page-heading p { display:none; }
  .logs-workspace .logs-filter-card { padding:8px 0 !important; margin-bottom:8px !important; }
  html .logs-workspace .expanded-content { max-height:240px; }
}
@media(min-width:641px) and (max-width:1199px) {
  .logs-workspace .logs-table-card :is(.logs-col-webid,.logs-col-tokens,.logs-col-cls,.logs-col-trunc) { width:0 !important; max-width:0 !important; padding-left:0 !important; padding-right:0 !important; overflow:hidden !important; white-space:nowrap !important; }
  .logs-workspace .logs-table-card thead th,
  .logs-workspace .logs-table-card tbody tr.log-row > td { padding-left:8px; padding-right:8px; }
  .logs-workspace .logs-table-card tbody tr.log-row > td { font-size:12px; }
}
/* A customer alias may be much longer than the trigger; keep its menu in view. */
.logs-workspace .logs-filter-adv .relative > .absolute { min-width:100% !important; max-width:min(360px,calc(100vw - 48px)); }
html .logs-workspace :is(.text-gray-400,.text-gray-500,.text-gray-600),
html .logs-workspace .logs-table-card thead th { color:var(--text-muted) !important; }
html .logs-workspace .logs-col-trunc.text-amber-600,
html .logs-workspace .logs-prompt-label > span { color:color-mix(in srgb,var(--amber) 55%,var(--text)) !important; }
.logs-workspace .log-detail-toggle .ld-chev { color:var(--text-muted); }
.logs-workspace .log-detail-toggle.is-open .ld-chev { color:var(--text-muted); }
.logs-workspace .logs-table-card { overflow-x:auto; }
@media(min-width:641px) and (max-height:520px) {
  .logs-workspace .logs-filter-search { flex-basis:200px; }
}
html .logs-workspace .logs-col-msg { color:var(--text) !important; }
html .logs-workspace input::placeholder { color:var(--text-muted); opacity:1; }

/* Universal settings search uses the same theme tokens as the control areas. */
.settings-search { margin-bottom: 24px; max-width: 55rem; min-width: 0; }
.settings-search > label { display: block; margin-bottom: 8px; color: var(--text); font-size: 13px; font-weight: 600; }
.settings-search-field { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); }
.settings-search-field:focus-within { outline: 2px solid var(--brand-amber); outline-offset: 2px; }
.settings-search-field > svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--text-muted); }
.control-workspace .settings-search-field input { flex: 1; min-width: 0; width: 100%; min-height: 44px; padding: 10px 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--text); font-size: 16px; }
.control-workspace .settings-search-field input:focus-visible { outline: none; }
.settings-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.settings-search-field input::placeholder { color: var(--text-muted); opacity: 1; }
.settings-search-field > button { flex-shrink: 0; min-height: 44px; color: var(--text-muted); font-size: 13px; }
.settings-search-field > button:focus-visible { outline: 2px solid var(--brand-amber); outline-offset: 2px; }
.settings-search-results { margin-top: 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); overflow: hidden; }
.settings-search-status { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.settings-search-results ul { max-height: 24rem; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0; }
.settings-search-results li + li { border-top: 1px solid var(--border); }
.settings-search-results a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; color: var(--text-muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.settings-search-results a:hover, .settings-search-results a:focus-visible { background: var(--surface-hover, var(--surface)); outline: 2px solid var(--brand-amber); outline-offset: -2px; }
.settings-search-results a strong { color: var(--text); font-size: 14px; font-weight: 600; }
.settings-search-results .settings-search-result-path { color: var(--text-dim); font-size: 11px; }
.settings-search-empty { padding: 14px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.control-workspace [id^="setting-"] { scroll-margin-block-start: 10rem; }
.control-workspace .settings-search-destination { outline: 2px solid var(--brand-amber); outline-offset: 6px; border-radius: 3px; }

/* Settings modernization: shared navigation, with forms scoped to Settings.
   Operations/Platform/Help keep their existing content until their own review. */
.control-workspace { --border-strong: #827869; --text-dim: #b3aa9c; --text-muted: #c0b7a9; padding-top: 32px; }
html[data-theme="light"] .control-workspace, html[data-theme="litellm"] .control-workspace { --border-strong: #948575; --text-dim: #655c50; --text-muted: #574f45; }
html[data-contrast="on"] .control-workspace { --text-dim: var(--text); --text-muted: var(--text); }
.control-workspace .control-heading { margin-bottom: 24px; }
.control-workspace .control-heading p { font-size: 14px; line-height: 1.6; }
.control-workspace .control-area-tabs { display: flex; flex-wrap: wrap; gap: 8px 24px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.control-workspace .control-area-tab { flex: 0 1 auto; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 0 12px; background: transparent; font-size: 14px; font-weight: 500; }
.control-workspace .control-area-tab.is-active { border-bottom-color: var(--brand-amber); background: transparent; }
.control-workspace .control-area-tab-desc { font-size: 12px; }
.control-workspace .control-layout { gap: 32px; }
/* One frame for every section of the four areas. The title, the area tabs,
   the rail and the content column start in the same place on every section at
   every window width, so choosing a section never moves the navigation. The
   frame fills the window up to 120rem and centres beyond it: the widest
   content here, the AI Usage request log, needs about 1,650px of column to
   show production values whole, and nothing needs more. Inside the frame,
   width follows the content. Forms, overviews and short lists keep the 55rem
   column they were built in (the old 72rem frame's content width, so none of
   them reflows). A section whose tables need more is marked `wide` in
   SETTINGS_NAV_GROUPS and takes the whole column. There is no per-section
   frame and no width toggle: both moved the rail when the section changed.
   Record: docs/design/control-center-layout.md. */
.control-workspace { max-width: 120rem; }
.control-workspace .settings-content { max-width: 55rem; }
.control-workspace .settings-content.is-wide { max-width: none; }
/* A section switch keeps the scroll position, and the rail scrolls with the
   page. Leaving a tall section for a short one while scrolled used to pull
   the page up to the short one's end, moving the rail under the pointer.
   With the rail-and-content row at least a window tall, every section can
   hold any scroll position up to the row's own top, the range in which the
   whole rail is still on screen. */
@media (min-width: 768px) {
  .control-workspace .control-layout { min-height: 100vh; }
}
/* Running text (paragraphs and list items) keeps the 72ch measure Operations
   panels already used, in every section and at every column width. :where()
   holds it at element specificity, so text with its own measure keeps it; the
   document reader sets its own 76ch on the pane. `pretty` keeps a single word
   off the last line; the longhand leaves text-wrap-mode (nowrap) alone. */
:where(.control-workspace .settings-sections) :is(p, li) { max-width: 72ch; text-wrap-style: pretty; }
:where(.control-workspace .doc-prose) :is(p, li) { max-width: none; }
/* Primer is built from full-width cards and rows rather than form fields, and
   its copy fills the row it sits in, up to that row's own controls: the 72ch
   measure left banners, notes and panel intros wrapping in the left third of
   their card. Raw document text keeps its own column (.primer-raw). */
:where(.control-workspace .primer-page) :is(p, li) { max-width: none; }
.primer-panel-intro { flex: 1 1 24rem; min-width: 0; }
.control-workspace .settings-nav { box-shadow: none; }
.control-workspace .control-section-link { gap: 4px; padding: 10px 12px; border-radius: 6px; white-space: normal; }
.control-workspace .control-section-link > span:first-child { font-size: 14px; }
.control-workspace .control-section-link > span:last-child { font-size: 12px; line-height: 1.45; }
.control-workspace .control-section-link[aria-current="page"] { box-shadow: inset 2px 0 var(--brand-amber); }
.control-workspace .control-nav-close { display: block; margin: 12px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); }
.control-workspace :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--brand-amber); outline-offset: 3px; }
/* Settings overview: saved values lead; section links are secondary actions. */
.settings-snapshot { container-type: inline-size; }
.settings-snapshot-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.settings-snapshot-heading h2 { color: var(--text); font-family: var(--font-ui); font-size: 24px; font-weight: 600; line-height: 1.25; }
.settings-snapshot-heading p { margin-top: 8px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.settings-snapshot-refresh { flex-shrink: 0; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); font-size: 12px; }
.settings-snapshot-refresh:hover { background: var(--surface); }
.settings-snapshot-refresh:disabled { opacity: .6; cursor: wait; }
.settings-snapshot-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.settings-snapshot-section-head h3 { color: var(--text); font-size: 16px; font-weight: 500; }
.settings-snapshot-section-head p, .settings-snapshot-section-head > span { margin-top: 4px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.settings-snapshot-section-head a { color: var(--text); font-size: 12px; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.settings-snapshot-section-head a:hover { text-decoration-color: var(--brand-amber); }
.settings-snapshot-ai { padding: 20px; border: 1px solid var(--border-strong); border-top: 2px solid var(--brand-amber); border-radius: 8px; background: var(--surface); }
.settings-snapshot-routes { display: grid; margin-top: 20px; gap: 16px; }
.settings-snapshot-route { display: flex; flex-direction: column; min-width: 0; padding-top: 16px; border-top: 1px solid var(--border); }
.settings-snapshot-route h4 { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.settings-snapshot-route strong { margin-top: 6px; color: var(--text); font-size: 20px; font-weight: 500; line-height: 1.3; }
.settings-snapshot-model { margin-top: 8px; color: var(--text-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.settings-snapshot-source { margin-top: auto; padding-top: 12px; color: var(--text-dim); font-size: 11px; }
.settings-snapshot-group-head { margin-top: 28px; margin-bottom: 12px; }
.settings-snapshot-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.settings-snapshot-card { min-width: 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: 8px; }
.settings-snapshot-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.settings-snapshot-card h4 { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); font-size: 14px; font-weight: 500; }
.settings-snapshot-card h4 svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-dim); }
.settings-snapshot-card h4 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.settings-snapshot-card h4 a span { margin-left: 3px; color: var(--text-dim); }
.settings-snapshot-badge { flex-shrink: 0; padding: 2px 6px; border-radius: 4px; background: var(--surface); color: var(--text-muted); font-size: 11px; }
.settings-snapshot-badge.needs-attention { color: var(--text); background: color-mix(in srgb,var(--brand-amber) 18%,transparent); }
.settings-snapshot-card dl { display: grid; gap: 9px; }
.settings-snapshot-card dl > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 12px; align-items: baseline; }
.settings-snapshot dt { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.settings-snapshot dd { margin: 0; color: var(--text); font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.settings-snapshot-card dd { text-align: right; }
.settings-snapshot-note { margin-top: 14px; color: var(--text-dim); font-size: 11px; line-height: 1.6; }
.settings-snapshot-pending { min-height: 82px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.settings-snapshot-pending button { margin-top: 8px; color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.settings-snapshot-preferences { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-strong); }
.settings-snapshot-preferences dl { display: grid; gap: 16px; margin-top: 20px; }
.settings-snapshot-preferences dd { margin-top: 4px; }
.settings-snapshot-attention { margin-bottom: 24px; padding: 14px 18px; border-left: 3px solid var(--brand-amber); background: color-mix(in srgb,var(--brand-amber) 7%,transparent); }
.settings-snapshot-attention h3 { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; font-weight: 500; }
.settings-snapshot-attention h3 span { font-size: 11px; color: var(--text-muted); }
.settings-snapshot-attention a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 10px; color: var(--text); font-size: 12px; line-height: 1.6; }
.settings-snapshot-attention a:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
@container (min-width: 640px) {
  .settings-snapshot-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-snapshot-card:only-child { grid-column: 1 / -1; }
  .settings-snapshot-routes, .settings-snapshot-preferences dl { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .settings-snapshot-route { border-top: 0; padding-top: 0; }
  .settings-snapshot-route + .settings-snapshot-route { border-left: 1px solid var(--border); padding-left: 16px; }
}
@container (max-width: 480px) {
  .settings-snapshot-card dl > .settings-snapshot-url { grid-template-columns: minmax(0,1fr); gap: 3px; }
  .settings-snapshot-url dd { text-align: left; }
}
@container (max-width: 360px) {
  .settings-snapshot-heading { flex-wrap: wrap; gap: 12px; }
  .settings-snapshot-heading h2 { font-size: 22px; }
  .settings-snapshot-ai, .settings-snapshot-card { padding: 16px; }
}

/* The overview list is defined once, in index.html's own style block — this
   block used to re-flatten a card definition from there and the two drifted
   apart (padding against arrow placement). Nothing to override here. */
.control-workspace[data-control-area="settings"] .control-panel { box-shadow: none !important; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent !important; padding: 24px 0; margin-bottom: 16px; }
.control-workspace[data-control-area="settings"] .control-panel h2 { text-transform: none; letter-spacing: normal; font-size: 20px; font-weight: 500; line-height: 1.4; color: var(--text) !important; }
.control-workspace[data-control-area="settings"] .control-panel p { line-height: 1.7; }
.control-workspace[data-control-area="settings"] .control-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) { max-width: 100%; min-width: 0; font-size: 14px; }
html .control-workspace :is(.text-gray-400,.text-gray-500,.text-gray-600,.text-slate-400,.text-slate-500) { color: var(--text-muted) !important; }
.control-load-state { padding: 20px 0; line-height: 1.7; color: var(--text); }
.control-load-state button { margin-top: 12px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 6px; }
.control-workspace .primer-title { font-family: var(--font-display); font-size: 32px; font-weight: 400; color: var(--text); line-height: 1.2; }
.control-workspace .primer-types { display: flex; flex-wrap: wrap; gap: 8px; }
.control-workspace .primer-type { padding: 10px 12px; gap: 8px; border-radius: 6px; background: transparent; }
.control-workspace .primer-type.is-selected { background: var(--surface); }
.control-workspace .primer-type-icon { width: 24px; height: 24px; background: none; }
.control-workspace .primer-type small { display: none; }
.control-workspace .primer-count { font-size: 12px; }
.primer-add-sources { border-block: 1px solid var(--border); }
.primer-add-sources > summary { padding: 14px 0; cursor: pointer; font-size: 15px; color: var(--text); }
.primer-add-sources > summary span { font-size: 13px; color: var(--text-muted); margin-left: 12px; }
.control-workspace .primer-add-sources > div { padding: 16px 0 !important; border-radius: 0 !important; background: transparent !important; }
.control-workspace .primer-library-toolbar { margin: 0 0 12px; gap: 12px 24px; }
.control-workspace .primer-library-toolbar > div { flex: 1 1 24rem; min-width: 0; }
.control-workspace .primer-library-toolbar h2 { font-size: 20px; font-weight: 500; }
.control-workspace .primer-library-toolbar p { font-size: 13px; }
.control-workspace .primer-search { flex: 1 1 20rem; min-width: 0; }
.control-workspace .primer-search input { font-size: 14px; }
.control-workspace .primer-source-list { gap: 0; }
.control-workspace .primer-source { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.control-workspace .primer-source.is-open { background: var(--surface); }
.control-workspace .primer-source.is-disabled .primer-source-body { opacity: 1; }
.control-workspace .primer-source-content { padding: 12px 16px; }
.control-workspace .primer-source-labels { gap: 6px 9px; margin-bottom: 2px; }
.control-workspace .primer-source-title { font-size: 16px; line-height: 1.5; }
.control-workspace :is(.primer-source-description,.primer-campaign-facts dd,.primer-read-usage) { font-size: 14px; line-height: 1.5; }
.control-workspace .primer-source-description { max-width: none; margin-top: 2px; }
.control-workspace .primer-document-meta { margin-top: 4px; gap: 4px 12px; }
.control-workspace .primer-campaign-window { flex-basis: 154px; padding: 12px; gap: 4px; }
.control-workspace .primer-campaign-facts { margin-top: 8px; gap: 6px 16px; }
.control-workspace :is(.primer-document-meta,.primer-eyebrow,.primer-updated,.primer-status,.primer-campaign-facts dt,.primer-chart-eligibility,.primer-window-zone) { font-size: 12px; }
.control-workspace .primer-source-footer { min-width: 0; border-top: 0; padding: 0 16px 12px; }
.control-workspace .primer-source-usage button { min-height: 36px; font-size: 12px; }
.control-workspace .primer-source-actions button { min-width: 36px; min-height: 36px; }
.control-workspace .primer-source-detail { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--border); padding: 24px; }
/* Use the library's available width, including beside the settings rail or Ask
   drawer. Small panes keep controls below the source; wide panes align them in
   a compact second column. Expanded source text still spans the whole row. */
@container primer (min-width: 960px) {
  .control-workspace .primer-types { grid-column: 1; align-self: center; }
  .control-workspace .primer-add-sources:not([open]) { grid-column: 2; align-self: center; border: 0; }
  .control-workspace .primer-add-sources:not([open]) > summary { padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 6px; }
  .control-workspace .primer-add-sources:not([open]) > summary span { display: none; }
  .control-workspace .primer-search { flex: 0 1 24rem; }
  .control-workspace .primer-source { display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
  .control-workspace .primer-source-footer { flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; padding: 12px 16px 12px 0; }
  .control-workspace .primer-source-usage, .control-workspace .primer-source-actions { justify-content: flex-end; }
  .control-workspace .primer-chart-eligibility { flex-basis: 100%; text-align: right; }
}
/* Raw text — a stored document, an earlier version, a file under review, the
   compiled capsule, retrieved evidence — keeps its own line breaks, so every
   pane is set the same way, like a raw-file view: monospace, where 1ch is one
   character, in a 100ch column that holds the 80–90 column hard wraps Primer
   documents use. A proportional 76ch measure broke link- and code-heavy lines
   one word early ("linked" / "below.") and misaligned ASCII diagrams. Longer
   lines (tables, unwrapped PDF text) wrap. A boxed pane is content-box, so the
   box ends where the column does instead of framing a 200-character line. */
.primer-raw { max-width: 100ch; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: var(--text); }
.primer-raw-box { box-sizing: content-box; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; }
.primer-document-text { max-height: 65vh; }
.control-workspace .primer-field-label { font-size: 14px; }
.control-workspace .primer-detail-toolbar :is(button,a) { min-height: 36px; display: inline-flex; align-items: center; }
.control-workspace label:has(> input[type=file]):focus-within { outline: 2px solid var(--brand-amber); outline-offset: 3px; }
@media (min-width: 768px) {
  .control-workspace .settings-nav { background: transparent !important; border: 0 !important; overflow: visible; position: static; }
}
@media (max-width: 767px) {
  .control-workspace .control-layout { gap: 20px; }
  .control-workspace .settings-nav-trigger { min-height: 56px; }
  .control-workspace .settings-nav-trigger .text-xs { font-size: 14px; }
  .control-workspace .control-area-tabs { gap: 8px 16px; margin-bottom: 24px; }
  .control-workspace .control-area-tab-desc { display: none; }
  .control-workspace .control-panel :is(.flex,.grid) { min-width: 0; }
  .control-workspace[data-control-area="settings"] .control-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea), .control-workspace .primer-page :is(input:not([type=checkbox]),select,textarea) { font-size: 16px !important; }
  .primer-add-sources > summary span { display: block; margin: 4px 0 0; }
  .control-workspace .primer-types { gap: 6px; }
  .control-workspace .primer-type { padding: 8px; }
  .control-workspace .primer-type strong { font-size: 13px; }
  .control-workspace .primer-type-icon { display: none; }
  .control-workspace .primer-source-content { padding: 12px 4px; }
  .control-workspace .primer-campaign-window { flex-basis: auto; }
  .control-workspace .primer-source-footer { padding-inline: 4px; }
  .control-workspace .primer-source-detail { padding: 20px 12px; }
  .control-workspace .primer-savebar { position: static; }
}
html.ll-installed-app .control-workspace .primer-savebar { top: 0; }

/* Keep all header actions reachable on the narrowest control-center viewport. */
@media (max-width: 360px) {
  body:has(.control-workspace,.mcp-workspace,.image-workspace) #app-header > nav { padding-inline: 8px; gap: 4px; }
  body:has(.control-workspace,.mcp-workspace,.image-workspace) #app-header > nav > .ml-auto { gap: 4px; }
  body:has(.control-workspace,.mcp-workspace,.image-workspace) #app-header > nav > a { margin-right: 0; gap: 4px; }
}
/* Active navigation uses ink as well as the amber selection edge in light mode. */
.control-workspace .control-section-link[aria-current="page"] > span { color: var(--text) !important; }

/* Control-center hierarchy: a quiet navigation rail beside one raised content
   surface, in every theme. Keep the same frame and section widths throughout
   all four areas; nested forms and Primer rows retain their own semantic
   grouping. The surface is --surface2 in both themes, so the cards, open rows
   and selections inside it keep the --surface contrast they were drawn with.
   Light used to leave the column open, which put every section flush against
   the column edge. */
.control-workspace {
  --control-content-bg: var(--surface2);
  --control-divider: var(--border);
}
:is(html:not([data-theme]), html[data-theme="litellm-dark"]) .control-workspace {
  --control-divider: color-mix(in srgb, var(--text) 18%, transparent);
  --control-selection-bg: color-mix(in srgb, var(--brand-amber) 16%, var(--surface));
}
html[data-contrast="on"]:not([data-theme]) .control-workspace {
  --control-divider: var(--border);
}
.control-workspace .settings-content {
  padding: 24px;
  background: var(--control-content-bg);
  border: 1px solid var(--control-divider);
  border-radius: 12px;
}
:is(html:not([data-theme]), html[data-theme="litellm-dark"]) .control-workspace .control-area-tabs {
  border-bottom-color: var(--control-divider);
}
:is(html:not([data-theme]), html[data-theme="litellm-dark"]) .control-workspace .control-section-link[aria-current="page"] {
  background: var(--control-selection-bg) !important;
  box-shadow: inset 3px 0 var(--brand-amber);
}
:is(html:not([data-theme]), html[data-theme="litellm-dark"]) .control-workspace .control-section-link[aria-current="page"] > span:first-child {
  color: var(--brand-amber-light) !important;
}
/* The outer surface already establishes the top edge. Keep separators only
   between form sections, and preserve the space below their headings. The
   `html` prefix outranks the per-area .control-panel rules, which set both. */
html .control-workspace .control-panel:first-child {
  border-top: 0;
  padding-top: 0;
}
html .control-workspace .control-panel:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
/* Sections lie flat on the surface, with no side padding. Their markup still
   carries Tailwind's `shadow`, and High Contrast's card ring on it (two
   attributes and the class) outranked the per-area `box-shadow: none`, so
   every section drew a dark frame with its text touching the sides. */
html .control-workspace .settings-sections .control-panel {
  box-shadow: none !important;
}
@media (min-width: 768px) {
  :is(html:not([data-theme]), html[data-theme="litellm-dark"]) .control-workspace .settings-nav {
    position: relative;
    top: 0;
  }
  /* Place the rule in the existing gutter without narrowing the menu labels. */
  :is(html:not([data-theme]), html[data-theme="litellm-dark"]) .control-workspace .settings-nav::after {
    content: "";
    position: absolute;
    inset: 0 -16px 0 auto;
    width: 1px;
    background: var(--control-divider);
  }
}
@media (max-width: 767px) {
  .control-workspace .settings-content {
    padding: 16px 12px;
    border-radius: 10px;
  }
  :is(html:not([data-theme]), html[data-theme="litellm-dark"]) .control-workspace .settings-nav-trigger {
    border-color: var(--control-divider);
  }
}

/* Operations, Platform and Help: opt-in panels preserve specialized monitors. */
.control-workspace:not([data-control-area="settings"]) .control-panel {
  box-shadow: none !important; border: 0; border-top: 1px solid var(--border);
  border-radius: 0; background: transparent !important; padding: 24px 0; margin-bottom: 20px;
}
.control-workspace:not([data-control-area="settings"]) .control-panel :is(h2,h3),
.control-workspace .admin-section-header h2 {
  font-size: 20px !important; font-weight: 500; text-transform: none;
  letter-spacing: normal; line-height: 1.4; color: var(--text) !important;
}
.control-workspace:not([data-control-area="settings"]) .control-panel p,
.control-workspace .admin-section-header p { font-size: 14px !important; line-height: 1.7 !important; max-width: 72ch; }
.control-workspace .admin-section-header { flex-wrap: wrap; gap: 16px; margin-bottom: 24px !important; }
.control-workspace .admin-section-header > div { min-width: 0; }
.control-workspace .admin-section-header > div:last-child { flex-wrap: wrap; }
.control-workspace:not([data-control-area="settings"]) .control-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) { max-width: 100%; min-width: 0; font-size: 14px; }
.control-workspace:not([data-control-area="settings"]) .settings-sections :is(button,summary) { min-height: 32px; }
.control-workspace:not([data-control-area="settings"]) .settings-sections table { font-size: 13px !important; }
.control-workspace:not([data-control-area="settings"]) .settings-sections :is(th,td) { font-size: 12px !important; line-height: 1.6; }
.control-workspace:not([data-control-area="settings"]) .settings-sections th { text-transform: none !important; letter-spacing: normal !important; }
.control-workspace .control-row-link { text-align: left; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.control-workspace .control-error { padding: 12px 16px; border: 1px solid var(--red); border-radius: 6px; font-size: 14px; color: var(--text); margin-bottom: 16px; }
.control-workspace [data-section="audit"] .admin-audit-table { min-width: 820px; }
/* ── AI Usage — the Vue-owned parts around the monitor: request log + model
   rates. Scoped to the section so the generic Operations panel rules above
   still set the 20px titles and 14px prose; these only add the table, the
   inspection panel and the small controls at the modernized scale. ── */
.control-workspace [data-section="activity"] .usage-head{margin-bottom:20px;}
.control-workspace [data-section="activity"] .usage-head p{margin-top:6px;}
.control-workspace [data-section="activity"] .usage-log{margin-top:28px;padding-top:20px;border-top:1px solid var(--border);}
.control-workspace [data-section="activity"] .usage-log-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:12px;}
.control-workspace [data-section="activity"] .usage-log-head > div{min-width:0;}
.control-workspace [data-section="activity"] .control-panel h3.usage-subtitle{font-size:15px !important;font-weight:500;line-height:1.5;margin:0;}
.control-workspace [data-section="activity"] .control-panel p.usage-log-meta{font-size:13px !important;line-height:1.5 !important;margin-top:2px;color:var(--text-muted);}
.control-workspace [data-section="activity"] .usage-log-actions{display:flex;flex-wrap:wrap;gap:8px;}
.control-workspace [data-section="activity"] .usage-btn{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-muted);font-size:13px;line-height:1;text-decoration:none;cursor:pointer;transition:color .15s,border-color .15s;}
.control-workspace [data-section="activity"] .usage-btn:hover{color:var(--text);border-color:var(--border-strong);}
.control-workspace [data-section="activity"] .usage-btn:disabled{opacity:.5;cursor:default;}
.control-workspace [data-section="activity"] .control-panel p.usage-note{font-size:13px !important;line-height:1.6 !important;color:var(--text-muted);margin:0 0 12px;}
.control-workspace [data-section="activity"] .usage-empty{padding:20px 0;font-size:13px;color:var(--text-muted);}
/* The log scrolls inside its frame; on a tall screen it shows more rows. It is
   also the size container its identifier columns are measured against. */
.control-workspace [data-section="activity"] .usage-table-wrap{border:1px solid var(--border);border-radius:8px;overflow:auto;max-height:max(32rem,70vh);container-type:inline-size;}
/* Columns. Times, figures and status have fixed widths sized to their
   content, 630px together. The five identifier columns share the rest in
   proportion to what their longest production values need. Measured
   2026-09-23 in Fira Sans 12px: a 22-character workflow 179px, the longest
   source (an outside script's name) 179px, a 27-character email 215px, a
   24-character key 165px, the longest model with its route tag 239px. So in
   the frame's full 1,648px column every value shows whole, and in a narrower
   one all five give way together instead of the short ones keeping room the
   long ones need. The model takes what is left. Below the min-width
   (identifiers 80px each) the table scrolls sideways inside its frame. cqi is
   1% of the wrap's width; a browser without it keeps equal shares. */
.control-workspace [data-section="activity"] .usage-table{min-width:1030px;}
.control-workspace [data-section="activity"] .usage-col-time{width:150px;}   /* "Streaming · 12 min 40 s" */
.control-workspace [data-section="activity"] .usage-col-num{width:72px;}     /* 1,234,567 */
.control-workspace [data-section="activity"] .usage-col-cost{width:104px;}   /* the "rate needed" tag */
.control-workspace [data-section="activity"] .usage-col-ms{width:72px;}
.control-workspace [data-section="activity"] .usage-col-icon{width:44px;}
.control-workspace [data-section="activity"] .usage-col-flow{width:max(80px,calc((100cqi - 630px) * .18));}
.control-workspace [data-section="activity"] .usage-col-src{width:max(80px,calc((100cqi - 630px) * .18));}
.control-workspace [data-section="activity"] .usage-col-who{width:max(80px,calc((100cqi - 630px) * .22));}
.control-workspace [data-section="activity"] .usage-col-key{width:max(80px,calc((100cqi - 630px) * .17));}
/* One row height for running and completed rows (a completed row's height is
   its 32px inspect button plus padding), so a call that finishes does not
   make the rows under it jump. */
.control-workspace [data-section="activity"] .usage-table tbody :is(.usage-row,.usage-row-live) > td{height:49px;}
/* A running call, pinned above the completed rows until its finished row
   lands. Amber and a breathing dot, the product's "working" signal. Nothing
   to inspect yet, so no pointer or hover. */
.control-workspace [data-section="activity"] .usage-row-live td{background:color-mix(in srgb,var(--amber) 6%,transparent);}
.control-workspace [data-section="activity"] .usage-table td.usage-live{color:var(--amber);font-weight:500;}
.control-workspace [data-section="activity"] .usage-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);vertical-align:middle;animation:usage-live-breathe 1.4s ease-in-out infinite;}
@keyframes usage-live-breathe{0%,100%{opacity:.45;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){.control-workspace [data-section="activity"] .usage-live-dot{animation:none;}}
.control-workspace [data-section="activity"] .usage-table thead th{position:sticky;top:0;z-index:1;background:var(--surface2);color:var(--text-muted);font-weight:500;text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.control-workspace [data-section="activity"] .usage-table :is(th,td).num{text-align:right;font-variant-numeric:tabular-nums;}
.control-workspace [data-section="activity"] .usage-table :is(th,td).ctr{text-align:center;}
.control-workspace [data-section="activity"] .usage-table td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
.control-workspace [data-section="activity"] .usage-table tbody tr:last-child > td{border-bottom:0;}
.control-workspace [data-section="activity"] .usage-table td.is-dim{color:var(--text-muted);}
.control-workspace [data-section="activity"] .usage-row{cursor:pointer;}
.control-workspace [data-section="activity"] .usage-row:hover td{background:var(--surface2);}
.control-workspace [data-section="activity"] .usage-row.is-open td{background:var(--surface2);border-bottom-color:transparent;}
.control-workspace [data-section="activity"] .usage-pdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;position:relative;top:-1px;}
.control-workspace [data-section="activity"] .usage-ok{color:color-mix(in srgb,var(--green) 55%,var(--text));}
.control-workspace [data-section="activity"] .usage-err{color:color-mix(in srgb,var(--red) 65%,var(--text));font-weight:600;}
/* A pill that must ellipsize inside a narrow cell: text-overflow has no effect
   on the inline-flex .usage-tag (its text is an anonymous flex item), so a long
   source clipped mid-letter. */
.control-workspace [data-section="activity"] .usage-tag.is-src{display:inline-block;vertical-align:middle;}
.control-workspace [data-section="activity"] .usage-cancel{color:color-mix(in srgb,var(--amber) 60%,var(--text));font-weight:600;}
.control-workspace [data-section="activity"] .usage-expand{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:28px;border-radius:4px;color:var(--text-muted);font-size:14px;}
.control-workspace [data-section="activity"] .usage-expand:hover{background:var(--surface);color:var(--text);}
.control-workspace [data-section="activity"] .usage-tag{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid var(--border-strong);color:var(--text-muted);font-size:12px;line-height:1.5;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.control-workspace [data-section="activity"] .usage-tag.is-bad{border-color:color-mix(in srgb,var(--red) 55%,transparent);color:color-mix(in srgb,var(--red) 65%,var(--text));}
.control-workspace [data-section="activity"] .usage-detail-row > td{padding:0;background:var(--surface);}
.control-workspace [data-section="activity"] .usage-detail{display:flex;flex-direction:column;gap:14px;padding:16px 20px 20px;border-bottom:1px solid var(--border);}
.control-workspace [data-section="activity"] .usage-detail-badges{display:flex;flex-wrap:wrap;gap:6px 8px;}
.control-workspace [data-section="activity"] .usage-detail-hint{font-size:12px;color:var(--text-muted);}
.control-workspace [data-section="activity"] .usage-detail-label{font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px;}
.control-workspace [data-section="activity"] .usage-detail-label.is-bad{color:color-mix(in srgb,var(--red) 65%,var(--text));}
html .control-workspace [data-section="activity"] .usage-detail-body{padding:12px 14px !important;border:1px solid var(--border);border-radius:6px;font-size:13px;line-height:1.65;max-height:360px;overflow:auto;overflow-wrap:anywhere;white-space:pre-wrap;}
.control-workspace [data-section="activity"] .usage-detail-error{padding:10px 12px;border:1px solid color-mix(in srgb,var(--red) 40%,transparent);border-radius:6px;font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;}
.control-workspace [data-section="activity"] .usage-detail-foot{display:flex;align-items:flex-start;gap:12px 20px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--border);}
.control-workspace [data-section="activity"] .usage-detail-meta{flex:1 1 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 20px;margin:0;font-size:13px;line-height:1.5;}
.control-workspace [data-section="activity"] .usage-detail-meta dt{color:var(--text-muted);font-size:12px;}
.control-workspace [data-section="activity"] .usage-detail-meta dd{margin:0;color:var(--text);overflow-wrap:anywhere;}
.control-workspace [data-section="activity"] .usage-rates{margin-top:4px;overflow-x:auto;}
.control-workspace [data-section="activity"] .usage-rates table{min-width:720px;}
.control-workspace [data-section="activity"] .usage-rates th{color:var(--text-muted);font-weight:500;text-align:left;padding:6px 10px 8px 0;border-bottom:1px solid var(--border);}
.control-workspace [data-section="activity"] .usage-rates td{padding:8px 10px 8px 0;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
.control-workspace [data-section="activity"] .usage-rates tbody tr:last-child > td{border-bottom:0;}
.control-workspace [data-section="activity"] .usage-rates :is(th,td).num{text-align:right;font-variant-numeric:tabular-nums;padding-right:16px;}
.control-workspace [data-section="activity"] .usage-rates td.is-dim{color:var(--text-muted);}
@media (max-width:767px){
  .control-workspace [data-section="activity"] .usage-table-wrap{max-height:none;}
  .control-workspace [data-section="activity"] .usage-detail{padding:14px 12px 16px;}
  .control-workspace [data-section="activity"] .usage-log-head{align-items:flex-start;}
}
.control-workspace [data-section="backups"] table { min-width: 640px; }
.control-workspace [data-section="backups"] div:has(> table) { overflow-x: auto !important; }
.control-workspace .admin-docs-layout { gap: 32px; }
.control-workspace .admin-docs-sidebar { border: 0; border-radius: 0; }
.control-workspace .admin-docs-sidebar button { font-size: 14px; white-space: normal; padding: 10px 12px; }
.control-workspace .admin-docs-sidebar button[aria-current="page"] { box-shadow: inset 2px 0 var(--brand-amber); }
.control-workspace .admin-docs-sidebar > div { background: transparent !important; font-size: 12px; padding-top: 20px; }
.control-workspace .admin-docs-layout > .flex-1 { border: 0; }
.control-workspace .doc-prose { font-size: 16px; line-height: 1.8; max-width: 76ch; margin-inline: auto; color: var(--text); }
.control-workspace .doc-prose :is(h1,h2,h3,h4,strong,td) { color: var(--text); }
.control-workspace .doc-prose h1 { font-family: var(--font-display); font-size: 32px; font-weight: 400; }
.control-workspace .doc-prose h2 { font-size: 24px; font-weight: 500; margin-top: 32px; }
.control-workspace .doc-prose h3 { font-size: 19px; }
.control-workspace .doc-prose :is(code,pre,th,blockquote) { color: var(--text-muted); background: var(--surface2); border-color: var(--border); }
.control-workspace .doc-prose pre code { color: var(--text); font-size: 14px; }
.mcp-workspace { padding-top: 32px; padding-bottom: 48px; }
.mcp-workspace h1 { font-size: 36px !important; font-weight: 400 !important; }
.mcp-workspace > div:has(h2) { border: 0 !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; padding: 28px 0 !important; background: transparent !important; }
.mcp-workspace h2 { font-size: 24px !important; font-weight: 600 !important; }
.mcp-workspace p { font-size: 15px !important; line-height: 1.75 !important; }
.mcp-workspace :is(pre,code) { overflow-wrap: anywhere; }
.mcp-workspace :is(a,button,summary):focus-visible { outline: 2px solid var(--brand-amber); outline-offset: 3px; }
@media (max-width: 767px) {
  .control-workspace .admin-docs-layout { gap: 24px; }
  .control-workspace:not([data-control-area="settings"]) .control-panel { padding-block: 20px; }
  .control-workspace:not([data-control-area="settings"]) .settings-sections :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) { font-size: 16px !important; }
  .control-workspace .admin-section-header { align-items: flex-start !important; }
  .mcp-workspace h1 { font-size: 30px !important; }
}

@media (max-width: 767px) {
  .control-workspace [data-section="backups"] table { min-width: 0; }
}
@media (max-width: 767px) {
  .control-workspace [data-section="backups"] .admin-stack-table tbody tr { grid-template-columns: minmax(0,1fr) !important; }
  .control-workspace [data-section="backups"] td[data-label] { display: flex; flex-wrap: wrap; gap: 4px 16px; text-align: left !important; }
  .control-workspace [data-section="backups"] td[data-label]::before { content: attr(data-label); min-width: 72px; color: var(--text-muted); }
}
/* A column flex item must also be width-constrained for long Markdown code. */
.control-workspace .admin-docs-layout > .flex-1 { width: 100%; max-width: 100%; }

/* Completion review: secondary archive and current workflow reading guides. */
.image-workspace .gallery-hdr { align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.image-workspace .gallery-hdr > div:first-child { flex: 1 1 360px; min-width: 0; }
.image-workspace .gallery-hdr h1 { overflow-wrap: anywhere; }
.image-workspace .gallery-hdr p { font-size: 15px; line-height: 1.65; color: var(--text-muted) !important; }
.image-workspace .gallery-hdr p.text-xs { font-size: 13px; }
.image-workspace .gallery-hdr-actions { flex-wrap: wrap; gap: 8px; }
.image-workspace .gallery-hdr-actions button { min-height: 36px; font-size: 13px; }
.image-workspace .images-card-img-wrap { display: block; border: 0; padding: 0; cursor: pointer; text-align: left; }
.image-workspace .images-card-alias { font-size: 13px; }
.image-workspace .images-card-time { font-size: 12px; color: var(--text-muted); }
.image-workspace .images-card-prompt { font-size: 14px; line-height: 1.5; }
.image-workspace .images-lightbox-label { font-size: 13px; width: 64px; color: var(--text-muted); }
.image-workspace .images-lightbox-val { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.image-workspace .images-lightbox-info { min-width: 0; max-width: 52ch; }
.image-workspace .images-lightbox-inner { max-width: min(1600px, calc(100vw - 64px)); }
.image-workspace :is(button,a):focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.image-workspace .images-card-img-wrap:focus-visible { outline-offset: -4px; }
.workflow-guide { max-width: 76ch; padding: 16px 24px 32px; }
.workflow-steps { padding-left: 24px; }
.workflow-steps li { padding: 8px 0 16px 12px; border-bottom: 1px solid var(--border); }
.workflow-steps li::marker { color: var(--text-muted); }
.workflow-steps h3 { margin-top: 8px; }
.workflow-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.workflow-guide :is(a,button):focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (max-width: 640px) {
  .image-workspace .gallery-hdr > div:first-child { flex-basis: auto; }
  .image-workspace .images-lightbox-inner { padding: 12px; }
  .workflow-guide { padding: 12px 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .image-workspace :is(.images-card,.images-card-img,.images-lightbox-inner) { transition: none; }
}

.image-workspace .gallery-hdr > div > span { color: var(--text-muted) !important; }
.image-workspace > .text-center { color: var(--text-muted) !important; }
.image-workspace > .text-center p { opacity: 1; line-height: 1.7; }
.control-workspace .workflow-guide > h2 { font-family: var(--font-display); font-size: 30px; font-weight: 400; border: 0; margin-top: 12px; line-height: 1.25; }
.workflow-guide { overflow-wrap: anywhere; }
/* Link text must meet reading contrast; retain amber in the underline/focus. */
.control-workspace .workflow-guide :is(a,button),
.image-workspace .images-card-alias,
.image-workspace .images-lightbox a { color: var(--text) !important; }
.control-workspace .workflow-guide a,
.image-workspace .images-card-alias,
.image-workspace .images-lightbox a { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }


/* Secondary task dialogs: native modality with the shared reading scale. */
dialog.ll-task-dialog { width: min(480px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); overflow: auto; box-shadow: 0 16px 64px rgba(0,0,0,.2); font-size: 15px; line-height: 1.6; }
.ll-task-dialog::backdrop { background: rgba(0,0,0,.45); }
.ll-task-dialog-heading { display: flex; gap: 16px; align-items: start; justify-content: space-between; padding: 24px 24px 8px; }
.ll-task-dialog-heading h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 4vw, 28px); line-height: 1.25; margin: 0; }
.ll-task-dialog-body { display: flex; flex-direction: column; gap: 12px; border: 0; min-width: 0; padding: 16px 24px; margin: 0; }
.ll-task-dialog p { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.ll-task-dialog input:not([type=radio]):not([type=checkbox]) { width: 100%; min-width: 0; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg); color: var(--text); padding: 10px 12px; font: inherit; }
.ll-task-dialog button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.ll-task-dialog-heading button { padding: 2px 10px; font-size: 24px; line-height: 1; }
.ll-task-dialog :is(button,input):focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.ll-task-dialog button:disabled { opacity: .55; cursor: default; }
.ll-task-dialog-footer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 16px 24px 24px; }
.ll-task-dialog button.ll-dialog-primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.ll-task-dialog button.ll-dialog-danger { border-color: var(--red); color: color-mix(in srgb, var(--red) 80%, var(--text)); }
.ll-dialog-choices { min-width: 0; border: 0; padding: 0; margin: 8px 0; }
.ll-dialog-choices legend { margin-bottom: 8px; }
.ll-dialog-choices label { display: flex; align-items: start; gap: 12px; border-top: 1px solid var(--border); padding: 14px 0; cursor: pointer; }
.ll-dialog-choices input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 4px; accent-color: var(--amber); }
.ll-dialog-choices span { min-width: 0; overflow-wrap: anywhere; }
.ll-dialog-choices small { display: block; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.ll-task-dialog .ll-dialog-error { color: color-mix(in srgb, var(--red) 80%, var(--text)); padding: 0 24px; }
.ll-task-dialog-body .ll-dialog-error { padding: 0; }
.ask-delete-feedback { gap: 12px; font-size: 13px !important; padding: 10px 12px !important; }
.ask-delete-feedback button { min-height: 36px; color: var(--text) !important; text-decoration: underline; text-underline-offset: 3px; }
@media(max-width: 420px) { .ll-task-dialog-heading { padding: 20px 16px 8px; } .ll-task-dialog-body { padding: 12px 16px; } .ll-task-dialog-footer { padding: 12px 16px 20px; } }

/* Customer identity and known key inventory: shared by list, search, and detail. */
.customer-key-trigger { color: var(--text-muted); font-size: 11px; cursor: pointer; white-space: nowrap; }
.customer-key-disclosure { flex-shrink: 0; font-weight: normal; }
.customer-key-popover { position: fixed; inset: auto; margin: 0; max-height: 200px; overflow: auto; z-index: 30; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 12px; box-shadow: 0 4px 16px #0002; max-width: min(420px, 85vw); white-space: normal; }
.customer-key-popover > span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.customer-key-popover code { display: block; font-size: 11px; overflow-wrap: anywhere; margin: 5px 0; }
/* The customer page's popover: the list's box, plus each alias's captured-usage
   dates and the inventory's caveat, so it is allowed more height. Its trigger
   ends the identity sub-line, so it takes that line's size, adds no padding
   that would make the line taller, and hovers like the line's other controls.
   It is the page's only way into the inventory (a list column has many), so
   its underline uses the stronger border. */
.customer-key-popover.customer-key-inventory { max-height: min(360px, calc(100vh - 24px)); font-size: 12px; line-height: 1.5; }
.customer-key-inventory p { margin: 0; color: var(--text-muted); }
.customer-key-inventory ul { list-style: none; padding: 0; margin: 10px 0 0; }
.customer-key-inventory li { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 8px 0; border-top: 1px solid var(--border); }
.customer-key-inventory li:last-child { padding-bottom: 0; }
.customer-key-inventory code { margin: 0; font-size: 12px; }
.customer-key-inventory li span { color: var(--text-muted); }
.customer-identity-sub .customer-key-trigger { font-size: inherit; padding: 0; border-bottom-color: var(--border-strong); transition: color .12s; }
.customer-identity-sub .customer-key-trigger:hover { color: var(--amber-light); }
.customer-chart-keys { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 11px; margin-bottom: 4px; }
.customer-chart-keys > span, .customer-chart-key-help { color: var(--text-muted); font-size: 11px; }
.customer-chart-key-help { margin-bottom: 6px; }

.customer-key-trigger { border-bottom: 1px dotted var(--border); padding: 2px 0; }
/* The customers table's Aliases column renders the count alone, so its dotted
   underline would be one digit — ~7px of tap target. Widen the box there only;
   the mobile card keeps the spelled-out "2 key aliases" and needs no padding. */
.customer-key-trigger--count { display: inline-block; min-width: 22px; padding: 2px 5px; }
/* Nearly every customer has exactly one alias (99.4% on prod, 2026-09-19), so
   the column's entire signal is the few that have more. Ink is the one
   encoding that carries it — no badge, no color category. */
.customer-key-trigger--multi { color: var(--text); font-weight: 500; }

/* =============================================================================
   Reported answers — the Ask chat's call button
   =============================================================================
   Replaces the retired 👍/👎 (2026-09-05). The control is a flag, not a
   thumbs-down, and the distinction is the whole design: a thumbs-down collects
   a verdict on quality, a flag collects a description of a defect, and only one
   of those is actionable. See docs/plans/ask-message-reports.md §2.

   Styling rules that matter:
   - The trigger is an ordinary .ask-msg-action. It is NOT red, NOT always
     visible and does NOT pulse. A call button that draws attention to itself
     gets pressed by people who are merely browsing.
   - The marker below the answer is the reporter's receipt (§5.2) and is the
     one part that stays visible without hover — a report whose status never
     shows is a call button nobody answers, which is how the thumbs died.
   ============================================================================= */

.ask-report-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 16px 16px;
  overflow-y: auto;
}
.ask-report-dialog {
  width: 520px; max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
  overflow: hidden;
}
.ask-report-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.ask-report-title { font-size: 14px; font-weight: 600; color: var(--text); }
.ask-report-sub   { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.ask-report-body  { padding: 13px 16px; }

/* The closed `kind` vocabulary. Radio semantics, chip appearance. */
.ask-report-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-report-kind {
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; transition: all .12s;
  font-family: inherit;
}
.ask-report-kind:hover { color: var(--text); border-color: var(--border-strong); }
.ask-report-kind[aria-pressed="true"] {
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  border-color: color-mix(in srgb, var(--amber) 55%, var(--border));
  color: var(--text); font-weight: 600;
}
.ask-report-kind-desc {
  font-size: 12px; color: var(--text-dim); line-height: 1.55; margin-top: 7px; min-height: 19px;
}
.ask-report-note {
  width: 100%; margin-top: 11px; min-height: 84px; resize: vertical;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 9px 11px; font-size: 13px; line-height: 1.55;
  font-family: var(--font-ui); outline: none;
}
.ask-report-note:focus { border-color: var(--border-strong); }
.ask-report-capture {
  font-size: 11px; color: var(--text-dim); line-height: 1.55; margin-top: 9px;
  border-top: 1px solid var(--border); padding-top: 9px;
}
.ask-report-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 11px 16px; border-top: 1px solid var(--border); background: var(--surface2);
}
.ask-report-btn {
  font-size: 13px; padding: 6px 14px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  font-family: inherit;
}
.ask-report-btn:hover { color: var(--text); }
.ask-report-btn-primary {
  background: color-mix(in srgb, var(--amber) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--amber) 60%, var(--border));
  color: var(--text); font-weight: 600;
}
.ask-report-btn-primary:disabled { opacity: .45; cursor: default; }

/* The reporter's receipt, under the answer they flagged. */
.ask-report-marker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; line-height: 1.5; margin-top: 7px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted);
}
.ask-report-marker-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-dim);
}
.ask-report-marker[data-status="new"] .ask-report-marker-dot,
.ask-report-marker[data-status="investigating"] .ask-report-marker-dot {
  background: var(--amber);
}
.ask-report-marker[data-status="fixed"] .ask-report-marker-dot { background: #4ade80; }

/* Triage queue (Operations → Reported Answers). */
.ask-triage-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.ask-triage-row:hover { background: var(--surface2); }
.ask-triage-row[aria-selected="true"] { background: color-mix(in srgb, var(--amber) 10%, transparent); }
.ask-triage-kind {
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
  background: var(--chip-bg); color: var(--text-muted); width: 76px; text-align: center;
}
.ask-triage-status {
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid var(--border); color: var(--text-muted);
}
.ask-triage-detail {
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); padding: 13px 15px;
}
.ask-triage-pre {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 11px; font-size: 11.5px; line-height: 1.6;
  font-family: var(--font-ui);
  white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow-y: auto; color: var(--text-muted);
}

/* Truncation audit: evidence coverage before volume, with field-level inspection. */
.truncation-audit { display:grid; gap:24px; font-size:14px; line-height:1.6; color:var(--text); }
.truncation-audit p { color:var(--text-muted); }
.truncation-intro { max-width:84ch; }
.truncation-audit a { color:color-mix(in srgb,var(--amber) 60%,var(--text)); text-decoration:underline; text-underline-offset:3px; }
.truncation-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.truncation-controls label { display:flex; flex:1 1 140px; flex-direction:column; gap:5px; font-size:12px; color:var(--text-muted); min-width:0; }
.truncation-audit input,.truncation-audit select,.truncation-audit button { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:5px; padding:6px 10px; }
.truncation-audit button:disabled { opacity:.6; }
.truncation-audit button[aria-pressed=true] { border-color:var(--amber); }
.truncation-audit :is(button,a,summary,input,select):focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.truncation-audit .truncation-scope,.truncation-footnote { font-size:12px; color:var(--text-dim); }
.truncation-hero { display:grid; grid-template-columns:2fr 1fr; gap:32px; padding:26px; border:1px solid var(--border); border-left:3px solid var(--amber); background:var(--surface); border-radius:6px; }
.truncation-eyebrow { display:block; font-size:13px; color:var(--text-muted); }
.truncation-hero strong { display:block; font-size:48px; font-weight:500; line-height:1.35; font-variant-numeric:tabular-nums; }
.truncation-hero a { display:inline-block; margin-top:10px; font-size:13px; }
.truncation-coverage { border-left:1px solid var(--border); padding-left:28px; }
.truncation-coverage strong { font-size:30px; margin:8px 0; }
.truncation-coverage p { font-size:13px; }
.truncation-metrics,.truncation-triage { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.truncation-metrics > div { padding-bottom:18px; border-bottom:1px solid var(--border); }
.truncation-metrics strong,.truncation-triage strong { display:block; font-size:26px; font-weight:500; font-variant-numeric:tabular-nums; }
.truncation-metrics span,.truncation-metrics small { display:block; }
.truncation-metrics small { color:var(--text-dim); font-size:12px; margin-top:7px; }
.truncation-panel { min-width:0; border-top:1px solid var(--border); padding-top:22px; }
.truncation-panel h3 { font-size:17px; font-weight:500; margin-bottom:5px; }
.truncation-panel > p { font-size:13px; margin-bottom:16px; max-width:95ch; }
.truncation-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.truncation-panel-head button { margin-left:6px; }
.truncation-audit .truncation-trend { height:145px; display:flex; gap:3px; border-bottom:1px solid var(--border); align-items:stretch; }
.truncation-audit .truncation-trend button { flex:1; min-width:0; min-height:0; padding:0; border:0; border-radius:2px 2px 0 0; background:var(--surface2); display:flex; align-items:end; overflow:hidden; }
.truncation-trend button span { display:block; width:100%; background:color-mix(in srgb,var(--amber) 70%,var(--text)); }
.truncation-audit .truncation-trend .truncation-day-unknown { background:repeating-linear-gradient(135deg,transparent 0 4px,var(--border) 4px 5px); }
.truncation-audit .truncation-trend button[aria-pressed=true] { box-shadow:inset 0 0 0 2px var(--text); }
.truncation-trend-axis { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--text-dim); margin-top:7px; }
.truncation-day-detail { min-height:42px; padding-top:12px; }
.truncation-table { width:100%; text-align:left; font-size:13px; font-variant-numeric:tabular-nums; }
.truncation-table th,.truncation-table td { padding:12px 14px; border-bottom:1px solid var(--border); }
.truncation-table thead th { font-weight:400; color:var(--text-muted); white-space:nowrap; }
.truncation-table tbody th { font-weight:400; min-width:145px; max-width:320px; }
.truncation-table td { white-space:nowrap; }
.truncation-boundaries tbody th { min-width:230px; max-width:600px; }
.truncation-boundaries th p { font-size:12px; margin-top:5px; }
.truncation-triage { margin:18px 0; }
.truncation-triage > div { border-left:2px solid var(--border); padding-left:16px; }
.truncation-triage > div:first-child { border-color:var(--amber); }
.truncation-triage h4 { font-size:14px; font-weight:500; margin:6px 0; }
.truncation-triage p { font-size:13px; }
.truncation-notice,.truncation-state { padding:16px; border:1px solid var(--border); border-radius:5px; background:var(--surface); }
.truncation-example { border-bottom:1px solid var(--border); }
.truncation-audit summary { cursor:pointer; padding:12px 0; font-weight:500; }
.truncation-example summary span { margin-right:16px; font-size:13px; }
.truncation-example summary span+span { color:var(--text-muted); font-weight:400; }
.truncation-evidence-body { padding:0 12px 18px; font-size:13px; }
.truncation-evidence-body button { margin-top:12px; }
.truncation-evidence-body pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:300px; overflow:auto; padding:16px; background:var(--surface2); font-size:12px; }
.truncation-method { border-top:1px solid var(--border); padding-top:6px; }
.truncation-method ol { list-style:decimal; padding-left:24px; color:var(--text-muted); }
.truncation-method li { margin:10px 0; }
.truncation-method p { margin-top:16px; font-size:13px; }
@media(max-width:700px) {
 .truncation-hero { grid-template-columns:1fr; gap:20px; padding:20px; }
 .truncation-coverage { border-left:0; border-top:1px solid var(--border); padding:16px 0 0; }
 .truncation-metrics,.truncation-triage { grid-template-columns:1fr; gap:18px; }
 .truncation-audit .truncation-trend { gap:2px; }
 .truncation-controls label { flex-basis:calc(50% - 12px); }
}

/* Purpose-specific control overviews: one priority panel, then paired summaries.
   Container queries use the content width after the navigation rail. */
.control-snapshot { container-type: inline-size; }
.control-snapshot-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.control-snapshot-heading h2 { color:var(--text); font-family:var(--font-ui); font-size:24px; font-weight:600; line-height:1.25; }
.control-snapshot-heading p { margin-top:8px; color:var(--text-muted); font-size:14px; line-height:1.6; }
.control-snapshot-refresh, .control-snapshot-endpoint button { flex-shrink:0; padding:8px 12px; border:1px solid var(--border-strong); border-radius:6px; color:var(--text); font-size:12px; }
.control-snapshot-refresh:hover, .control-snapshot-endpoint button:hover { background:var(--surface); }
.control-snapshot-refresh:disabled { opacity:.6; cursor:wait; }
.control-snapshot-context { margin-bottom:12px; color:var(--text-dim); font-size:11px; line-height:1.6; }
.control-snapshot-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.control-snapshot-card { min-width:0; display:flex; flex-direction:column; padding:20px; border:1px solid var(--border); border-radius:8px; }
.control-snapshot-card.is-featured, .control-snapshot-connect { border:1px solid var(--border-strong); border-top:2px solid var(--brand-amber); background:var(--surface); }
.control-snapshot-card > header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.control-snapshot-card h3 { color:var(--text); font-size:15px; font-weight:500; }
.control-snapshot-badge { padding:3px 7px; border-radius:4px; color:var(--text-muted); background:var(--surface2); font-size:11px; }
.control-snapshot-card.needs-attention .control-snapshot-badge { color:var(--text); background:color-mix(in srgb,var(--brand-amber) 18%,transparent); }
.control-snapshot-card dl { display:grid; gap:10px; }
.control-snapshot-card dl > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:baseline; gap:12px; }
.control-snapshot-card dt { color:var(--text-muted); font-size:12px; line-height:1.6; }
.control-snapshot-card dd { margin:0; text-align:right; color:var(--text); font-size:13px; line-height:1.6; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.control-snapshot-card dl > .is-wide { grid-template-columns:minmax(0,1fr); gap:3px; }
.control-snapshot-card .is-wide dd { text-align:left; }
.control-snapshot-description { color:var(--text-muted); font-size:14px; line-height:1.7; margin-bottom:12px; }
.control-snapshot-note { margin-top:14px; color:var(--text-dim); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.control-snapshot-action { margin-top:auto; padding-top:18px; color:var(--text); font-size:12px; line-height:1.6; }
.control-snapshot-action span { margin-left:6px; color:var(--brand-amber); }
.control-snapshot-action:hover, .control-snapshot-connect > a:hover { text-decoration:underline; text-underline-offset:4px; }
.control-snapshot-pending { min-height:80px; color:var(--text-muted); font-size:13px; line-height:1.7; }
.control-snapshot-pending button { display:block; margin-top:8px; color:var(--text); text-decoration:underline; text-underline-offset:4px; }
.control-snapshot-connect { padding:24px; margin-bottom:20px; border-radius:8px; }
.control-snapshot-eyebrow { color:var(--text-dim); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.control-snapshot-connect h3 { color:var(--text); font-size:22px; font-weight:500; line-height:1.4; }
.control-snapshot-connect p { color:var(--text-muted); font-size:13px; line-height:1.7; margin-top:12px; max-width:65ch; }
.control-snapshot-connect label { display:block; margin-top:20px; color:var(--text-muted); font-size:12px; }
.control-snapshot-endpoint { display:flex; gap:8px; margin-top:6px; }
.control-snapshot-endpoint input { width:100%; min-width:0; padding:10px 12px; border:1px solid var(--border-strong); border-radius:6px; background:var(--bg); color:var(--text); font-family:var(--font-mono); font-size:12px; }
.control-snapshot-connect > a { display:inline-block; margin-top:20px; color:var(--text); font-size:13px; }
@container (min-width:640px) {
  .control-snapshot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .control-snapshot-card.is-featured { grid-column:1 / -1; }
  .control-snapshot-card .control-snapshot-metrics { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:20px; }
  .control-snapshot-card .control-snapshot-metrics > div { display:block; }
  .control-snapshot-metrics dd { margin-top:6px; text-align:left; font-size:24px; line-height:1.35; }
}
@media (max-width:767px) {
  .control-snapshot-heading { flex-wrap:wrap; gap:12px; }
  .control-snapshot-heading h2 { font-size:22px; }
  .control-snapshot-card, .control-snapshot-connect { padding:16px; }
}
@container (max-width:380px) {
  .control-snapshot-endpoint { flex-wrap:wrap; }
}

/* Customer spending: filters stay local to the ranking panel. */
.customer-ranking { min-width: 0; }
.customer-ranking-heading, .customer-ranking-controls, .customer-ranking-date-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.customer-ranking-heading { align-items: center; justify-content: space-between; margin-bottom: 16px; }
.customer-ranking-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; color: var(--text-muted); }
.customer-ranking-field input, .customer-ranking-field select, .customer-ranking-shortcut, .customer-ranking-segments > summary { min-height: 36px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface2); color: var(--text); font-size: 13px; max-width: 100%; }
.customer-ranking-field input, .customer-ranking-field select { width: 100%; min-width: 0; }
.customer-ranking-reset, .customer-ranking-segment-options button, .customer-ranking-message button { color: var(--text-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.customer-ranking-shortcut[aria-pressed="true"] { box-shadow: inset 0 -2px var(--amber); border-color: var(--amber); }
.customer-ranking-segments { position: relative; min-width: 0; max-width: 100%; }
.customer-ranking-segments > summary { cursor: pointer; overflow-wrap: anywhere; }
.customer-ranking-segment-options { position: absolute; top: 100%; left: 0; z-index: 10; display: grid; gap: 10px; width: 230px; max-width: 70vw; margin-top: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: 0 6px 20px #0003; }
.customer-ranking-segment-options label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.customer-ranking-segment-options input { accent-color: var(--amber); }
.customer-ranking-segment-options span, .customer-ranking-more p { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.customer-ranking-date-fields { margin-top: 12px; }
.customer-ranking-date-fields > label { flex: 1 1 160px; }
.customer-ranking-more, .customer-ranking-data { margin-top: 14px; }
.customer-ranking-more > summary, .customer-ranking-data > summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.customer-ranking-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 8px; }
.customer-ranking-search { grid-column: 1 / -1; }
.customer-ranking-scope { margin: 14px 0 10px; color: var(--text-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.customer-ranking-message { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; min-height: 260px; color: var(--text-muted); font-size: 13px; text-align: center; }
.customer-ranking-message[role="alert"] { color: var(--text); }
.customer-ranking-table-scroll { overflow-x: auto; margin-top: 10px; }
.customer-ranking-data table { width: 100%; font-size: 12px; color: var(--text); border-collapse: collapse; }
.customer-ranking-data th, .customer-ranking-data td { padding: 9px 6px; text-align: right; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; }
.customer-ranking-data th:first-child, .customer-ranking-data td:first-child { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.customer-ranking-data a { text-decoration: underline; text-underline-offset: 3px; }
.customer-ranking :is(input, select, button, summary, a):focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (max-width: 480px) {
  .customer-ranking-controls > .customer-ranking-field { flex-basis: 100%; }
  .customer-ranking-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .customer-ranking-segment-options { max-width: 65vw; }
}