/* =========================================================================
   PSP Workbench — Visual refresh (light theme).
   Network Solver inspired: clean light surfaces, navy headers, restrained
   accent use, refined typography and component hierarchy.
   ========================================================================= */

/* ---------- Tokens --------------------------------------------------------- */
:root {
  /* Surfaces
     ────────────────────────────────────────────────────────────────────
     Background is a slightly warm neutral (paper-grey) instead of the
     previous cool blue-grey. The brand is cool blue; pairing it with a
     warm-neutral bg creates the considered "professional but human"
     feel used by editorial financial tools (Bloomberg Terminal's bone
     paper, FT's salmon, broker terminals' parchment). Panels stay
     white so they read as clean focused surfaces lifted off the page. */
  --bg: #f5f4f1;
  --surface: #f5f4f1;
  --panel: #ffffff;
  --panel-soft: #faf9f6;
  --panel-elevated: #ffffff;
  /* very faint backdrop, e.g. table-row hovers / skeleton tracks */
  --surface-subtle: #f4f6f9;

  /* Text */
  --ink: #0f1a2e;
  --ink-soft: #1d2a3e;
  --muted: #5b6b7a;
  --muted-strong: #3d4b5c;

  /* Lines */
  --line: #e3e8ef;
  --line-strong: #cfd6e0;
  --line-soft: #eef1f5;

  /* Brand & accent palette
     ────────────────────────────────────────────────────────────────────
     The brand is a steel-blue family derived from a single hue
     (215° H · 65% S) so the shades read as one color with depth, not
     six unrelated swatches. Teal/green was retired because it carries
     a "go / proceed" semantic that misread as approval inside an
     analyst tool.

     CONTRAST AUDIT (WCAG AA = 4.5:1 normal text, 3:1 large/ui):
       brand        #2563a8  ✓ 6.6:1 on white  (AA normal, AAA large)
       brand-strong #1a4a85  ✓ 9.8:1 on white  (AAA normal)
       brand-dark   #143965  ✓ 12.7:1 on white (AAA normal)
       brand-soft   #e8eff8  background only; ink #0f1a2e gives 14.4:1
       navy         #0e2a47  ✓ 14.6:1 on white (AAA normal)
     White text on brand: 6.6:1 ✓; on brand-strong: 9.8:1 ✓.

     `--teal-*` aliases preserve back-compat for the ~250 downstream
     rules; new CSS should use `--brand-*` and the aliases will be
     removed in a follow-up. */
  --brand: #2563a8;
  --brand-strong: #1a4a85;
  --brand-dark: #143965;
  --brand-soft: #e8eff8;
  --brand-bg: #f1f5fa;
  --brand-border: #b8cee5;

  /* Aliases — DO NOT use in new CSS. Kept so the rename doesn't ripple
     through 250+ existing rules in this file in one pass; they will be
     removed once those rules are migrated. */
  --teal: var(--brand);
  --teal-strong: var(--brand-strong);
  --teal-soft: var(--brand-soft);
  --teal-bg: var(--brand-bg);
  --teal-border: var(--brand-border);
  --teal-dark: var(--brand-dark);

  --navy: #0e2a47;
  --navy-soft: #16365a;
  --navy-tint: #eaf0f7;
  --accent: #c3423a;          /* Network Solver red, used sparingly */
  --accent-soft: #fdecea;
  --accent-strong: #9b2f29;

  /* Semantic — each family has soft (subtle bg / area highlight), tint
     (saturated pastel for pill bg), regular (line / icon), strong
     (high-contrast text on -tint). The -strong + -tint pair is the
     standard pill pattern (e.g. RETURNS / soft / GROWTH pills). */
  --green: #1f7a55;
  --green-soft: #e3f3eb;
  --green-tint: #a7f3d0;
  --green-strong: #166534;
  --amber: #a96b14;
  --amber-soft: #fdf1da;
  --amber-tint: #fef3c7;
  --amber-strong: #92400e;
  --red: #b04341;
  --red-soft: #fce6e5;
  --red-tint: #fee2e2;
  --red-strong: #991b1b;
  --blue: #2c6391;
  --blue-soft: #e2ecf4;
  --blue-strong: #1e3a8a;
  --gold-soft: #fff4de;

  /* Phase ramp — Gantt-style development-stage swatches sliding from
     a lighter teal-blue at preclinical down to a deep navy at
     registration. Used by .phase-bar.* and .stage-* surfaces. */
  --phase-1: #2f93ab;
  --phase-2: #207f93;
  --phase-3: #155f7b;
  --phase-early: #43a4b8;
  --phase-deep: #0d4566;
  --phase-registration: #082f4a;

  /* Variant family — purple accent for forked / pinned objects. */
  --variant: #7c3aed;
  --variant-soft: #ede9fe;
  --variant-strong: #5b21b6;

  /* Text on dark navy surfaces — decision-hero subheadline, metric
     labels, hero KPI captions. ~10:1 contrast on --navy. */
  --text-on-dark: #c5d6f0;

  /* Info — sky-blue accent for "tell me more" affordances (e.g. the
     .product-info expand button). Distinct from --brand so an info
     glyph doesn't read as a primary CTA. */
  --info: #0ea5e9;
  --info-soft: #e0f2fe;
  --info-strong: #075985;

  /* Indigo — secondary-action accent for export / share buttons that
     should not read as the primary CTA. */
  --indigo-soft: #eef2ff;
  --indigo-border: #c7d2fe;
  --indigo-strong: #818cf8;

  /* Decision-hero card accents — left-border swatches that flag what
     a card is showing. Warm amber for "risk note", warm red for
     "untested assumption". Tuned for the navy decision-hero surface. */
  --dh-risk: #fcd34d;
  --dh-assumption: #f87171;

  /* One-off markers — each used in exactly one rule, but named so the
     stylesheet has no raw hex left. */
  --avatar-default: #24292f;   /* signed-out avatar bg */
  --override-marker: #ffd082;  /* phase-bar has-override · dot */

  /* Stage-curve "sell" line — teal stroke + marker fill paired with
     the brand-blue "hold/buy" curve on the development-cost overlay. */
  --curve-sell: #0f766e;

  /* Type scale */
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;

  /* Spacing & radii */
  /* Spacing scale — 8px base with a 4px half-step. See
     docs/layout_doctrine.md §1. New/edited CSS uses these tokens for
     spacing, never raw px. --space-4 (16) is the default gap between
     panels and grid cells; --space-5 (24) is default panel padding. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Line-height scale — paired with the typography roles in
     docs/layout_doctrine.md §7. Display/Section use --leading-tight;
     Body/Subsection use --leading-normal; Field/Helper read more openly
     at --leading-relaxed. */
  --leading-tight: 1.2;
  --leading-normal: 1.35;
  --leading-relaxed: 1.45;

  /* Shadows — Network Solver style: subtle, single layer */
  --shadow-xs: 0 1px 2px rgba(15, 26, 46, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 26, 46, 0.06), 0 1px 2px rgba(15, 26, 46, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 26, 46, 0.08);
  --shadow-lg: 0 12px 30px rgba(15, 26, 46, 0.12);
  --shadow-rail: 0 2px 6px rgba(15, 26, 46, 0.18);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(31, 138, 131, 0.22);
  --ring-accent: 0 0 0 3px rgba(195, 66, 58, 0.22);

  color-scheme: light;
  font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Base elements -------------------------------------------------- */
button,
select,
textarea,
input {
  font: inherit;
  color: inherit;
}

button,
select,
input {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--r-sm);
  min-height: 34px;
  padding: 0 12px;
  transition: border-color 140ms ease, background-color 140ms ease,
    box-shadow 140ms ease, color 140ms ease, transform 80ms ease;
}

input,
select,
textarea {
  font-size: var(--fs-base);
}

button {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: 0.01em;
}

button:hover,
select:hover {
  border-color: var(--ink-soft);
  background: var(--panel-soft);
}

button:active {
  transform: translateY(1px);
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--teal);
}

button.primary {
  border-color: var(--teal);
  background: var(--teal);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

button.primary:hover {
  background: var(--teal-strong);
  border-color: var(--teal-strong);
}

button.accent {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

button.accent:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

button.ghost {
  border-color: transparent;
  background: transparent;
}

button.ghost:hover {
  background: var(--panel-soft);
  border-color: var(--line);
}

button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

button.busy {
  cursor: progress;
  opacity: 0.7;
}

a {
  color: var(--teal-strong);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-weight: 700;
}

h1 {
  font-size: var(--fs-2xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--fs-lg);
  line-height: var(--leading-tight);
}

h3 {
  font-size: var(--fs-md);
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
}

p {
  margin: 0;
  line-height: var(--leading-relaxed);
  color: var(--ink);
}

/* Body text default — readable prose color rather than the deep ink
   used for headings. Components that need a lighter tone use --muted
   explicitly. */
body {
  color: var(--ink);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* Inline SVG icons inside buttons */
button .icon,
.icon-button .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ---------- App shell (top-tab IA) ---------------------------------------- */
.app-shell {
  display: grid;
  /* All rows auto so each child sizes to its content; `align-content:
     start` anchors them to the top of the grid container instead of
     distributing extra space between rows (the default when
     `min-height: 100vh` exceeds total content height). The previous
     `minmax(0, 1fr)` row stretched whichever element landed in it
     and created a large blank above or below the case-bar when its
     active tab-view lived in an orphan sibling of <main>
     (Assumptions, Export, Analyst). Short pages now show body
     background below the content; tall pages scroll normally. */
  grid-template-rows: repeat(4, auto);
  align-content: start;
  min-height: 100vh;
}

.app-bar {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  /* Vertical breathing room above the nav so the workspace pills don't
     feel jammed against the viewport edge. Horizontal padding matches
     the case-bar so brand, nav, and meta sit on a shared content gutter. */
  padding: var(--space-3) 24px;
  min-height: 68px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 30;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-brand .brand-mark {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.app-brand .brand-text {
  display: grid;
  gap: 1px;
}

.app-brand strong {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
}

.app-brand small {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Workspaces are the primary top-nav organized around the seven-question
   decision spine. Each workspace exposes one or more existing tab views
   as its sub-sections. */
.app-workspaces {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  /* Real spacing between workspace pills so PRODUCT / PORTFOLIO / CAPITAL /
     DECIDE / ASSUMPTIONS / EXPORT / PLOTS / HELP read as distinct tabs,
     not as a single solid bar of text. 2px was indistinguishable from
     no gap. */
  gap: var(--space-2);
  min-height: 60px;
  /* Don't squeeze the meta cluster — workspaces shrink first when the bar
     is tight, but their links still need to stay on one line each. */
  min-width: 0;
}
.app-workspaces a {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 3px solid transparent;
  color: var(--muted-strong);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  /* Each link is its own atom — never break a single word across lines
     (caused PLOTS ↗ to wrap with the arrow on row two). */
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.app-workspaces a:hover {
  color: var(--ink);
  background: var(--panel-soft);
}
.app-workspaces a.active {
  color: var(--teal-strong);
  border-bottom-color: var(--teal);
}

/* Sub-nav within the active workspace. Visually lighter than the
   workspace nav so the hierarchy is obvious at a glance. Tab links
   for sections of other workspaces have `hidden` set by the router. */
.app-tabs {
  display: flex;
  align-items: stretch;
  /* Sub-nav tabs likewise need real breathing room — 2px was visually
     indistinguishable from no gap and made the sub-nav read as one bar
     of run-together words. */
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-3);
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
}
.app-tabs a {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.app-tabs a[hidden] { display: none; }
.app-tabs a:hover {
  color: var(--ink);
  background: var(--panel);
}
.app-tabs a.active {
  color: var(--teal-strong);
  border-bottom-color: var(--teal);
  background: var(--panel);
}

.app-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  /* When the bar is tight, meta is allowed to shrink and to wrap its
     internal chips — but each chip stays a single nowrap atom (set on
     its own rule). The workspaces nav is the priority surface; the
     meta cluster yields first. */
  min-width: 0;
}

/* Tight-bar responsive treatment.
   ≤1600px (now includes the 1600px Playwright viewport): trim
   workspace padding + collapse the verbose meta chip labels to
   icons-only so workspaces and meta both fit without the nav
   wrapping or overlapping. The breakpoint moved from 1440 to 1600
   when the Capital workspace landed (added enough nav-content that
   the right-anchored meta cluster started intercepting end-of-nav
   clicks at the 1600px test viewport). */
@media (max-width: 1600px) {
  .app-workspaces { gap: var(--space-1); }
  /* Four workspaces (Product, Portfolio, Capital, Strategy) at 1600px:
     padding tightened to 8px per side to keep the meta cluster from
     overlapping the trailing #help-toggle. */
  .app-workspaces a { padding: 0 8px; }
  .app-meta { gap: 8px; }
  /* Collapse What's New to its icon — the "What's new" label is verbose
     and the icon already communicates the affordance. */
  .whats-new-btn span { display: none; }
  .whats-new-btn { padding: 4px; }
  /* Version chip: hide the "v" prefix, keep the SHA which is the
     actually-distinguishing part. */
  .version-chip small { display: none; }
  /* Portfolio toggle: drop the "Portfolios" label, keep the folder icon. */
  .project-toggle-label { display: none; }
  .project-toggle-btn { padding: 6px 8px; }
  /* Scenario picker: keep both label + name but tighten padding. */
  .scenario-button { padding: 4px 10px; }
  .scenario-button strong { max-width: 110px; }
}

/* ≤1340px: at standard 13-15" laptop widths (1280, 1366) the workspaces
   nav and the meta cluster compete for the middle column. Hide the
   non-essential meta chips (What's new, version) so the nav fits without
   any of the workspaces wrapping or sitting behind a chip. The Settings
   gear and Sign-in chip stay — both are too important to hide. */
@media (max-width: 1340px) {
  .whats-new-btn,
  .version-chip { display: none; }
  .app-workspaces a { padding: 0 8px; font-size: 11px; }
}

/* ≤1024px: workspace nav scrolls horizontally inside its grid cell
   rather than overflowing. Better than mystery-wrap or hidden links.
   (The min-width gate also shows here; this rule is the fallback if
   the user clicks "Use it anyway".) */
@media (max-width: 1024px) {
  .app-workspaces {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  /* Firefox */
  }
  .app-workspaces::-webkit-scrollbar { display: none; }
  .app-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .app-brand .brand-text { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Viewport gate. Below 1024px, the dense analyst views don't compress
   well; show a friendly explainer instead of half-rendering. The user
   can dismiss to continue anyway (the JS sets body.viewport-gate-off).
   At ≥1024px the gate stays display:none — no flash on supported
   screens.
   ──────────────────────────────────────────────────────────────────── */
.viewport-gate { display: none; }
@media (max-width: 1023px) {
  body:not(.viewport-gate-off) .viewport-gate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--bg);
  }
  body:not(.viewport-gate-off) .app-shell { display: none; }
}
.viewport-gate-card {
  max-width: 440px;
  width: 100%;
  padding: var(--space-6);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md, 0 4px 20px rgba(15, 26, 46, 0.08));
  text-align: center;
}
.viewport-gate-art {
  width: 80px;
  height: 64px;
  margin: 0 auto var(--space-3);
  display: block;
}
.viewport-gate-card h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
}
.viewport-gate-card p {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: var(--leading-relaxed);
}
.viewport-gate-detail {
  font-size: var(--fs-sm);
  color: var(--muted-strong);
}
.viewport-gate-detail strong { color: var(--ink); }
.viewport-gate-dismiss {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--muted-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.viewport-gate-dismiss:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
}

.portfolio-start-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* No horizontal margin: align this panel's width to the sibling panels
     below it, which fill the .workspace padding box. Bottom margin gives
     it the standard inter-panel rhythm (--space-4). See
     docs/layout_doctrine.md §2. */
  margin: 0 0 var(--space-4);
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.portfolio-start-panel h2 {
  margin: 3px 0 var(--space-1);
  font-size: 20px;
}

.portfolio-start-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.portfolio-start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.portfolio-start-panel.is-selected {
  display: none;
}

/* ---- Scenario picker (named state snapshots) ---- */
.scenario-picker {
  position: relative;
  display: inline-block;
}

.scenario-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  min-height: 34px;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.scenario-button:hover {
  border-color: var(--ink-soft);
  background: var(--panel-soft);
}

.scenario-button small {
  font-size: 10px;
  color: inherit;
  opacity: 0.85;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}

.scenario-button strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: inherit;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-button.is-empty strong {
  color: inherit;
  font-weight: 700;
}

.scenario-popover {
  position: absolute;
  z-index: 40;
  display: grid;
  min-width: 280px;
  max-width: 360px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.scenario-list {
  list-style: none;
  padding: 6px;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
}

.scenario-list .scenario-empty {
  padding: 12px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-style: italic;
  text-align: center;
}

.scenario-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px 28px;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-sm);
}

.scenario-item.active {
  background: var(--teal-bg);
}

.scenario-pick {
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--ink);
}

.scenario-pick:hover {
  background: var(--panel-soft);
}

.scenario-item.active .scenario-pick {
  color: var(--teal-strong);
}

.scenario-pick strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
}

.scenario-pick small {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.scenario-rename,
.scenario-delete {
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
}

.scenario-rename:hover { background: var(--panel-soft); color: var(--ink); }
.scenario-delete:hover { background: var(--accent-soft); color: var(--accent); }

.scenario-compare {
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px;
}

.scenario-compare:hover {
  background: var(--teal-bg);
  color: var(--teal-strong);
}

.scenario-item {
  grid-template-columns: minmax(0, 1fr) 28px 28px 28px;
}

/* Compare overlay */
.scenario-compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(15, 26, 46, 0.55);
  backdrop-filter: blur(2px);
}

.scenario-compare-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1100px, 100%);
  max-height: 92vh;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cmp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.cmp-title h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-top: 4px;
}

.cmp-left, .cmp-right {
  padding: 2px 10px;
  border-radius: var(--r-sm);
  background: var(--teal-bg);
  color: var(--teal-strong);
}

.cmp-arrow {
  color: var(--muted);
  font-size: 18px;
}

.cmp-close {
  font-size: 18px;
}

.cmp-body {
  overflow-y: auto;
  padding: 20px;
  display: grid;
  gap: 24px;
}

.cmp-section {
  display: grid;
  gap: 10px;
}

.cmp-warn {
  margin: 0;
  padding: 10px 14px;
  background: var(--amber-soft);
  color: var(--amber-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.cmp-table th {
  background: var(--panel-soft);
  color: var(--muted-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.cmp-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.cmp-table tbody tr:hover {
  background: var(--panel-soft);
}

.cmp-table .cmp-num { text-align: right; white-space: nowrap; }
.cmp-table .cmp-metric-label { font-weight: 600; color: var(--ink); }

.cmp-delta {
  font-weight: 700;
}

.cmp-delta.cmp-good { color: var(--green); }
.cmp-delta.cmp-bad { color: var(--accent-strong); }
.cmp-delta.cmp-neutral { color: var(--muted); }

.cmp-asset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cmp-asset-grid h3 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

.cmp-asset-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.cmp-asset {
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.cmp-asset.pos { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.cmp-asset.neg { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.cmp-asset.shared { border-color: var(--teal); background: var(--teal-bg); color: var(--teal-strong); }

.cmp-asset-empty {
  padding: 6px 10px;
  color: var(--muted);
  font-style: italic;
  font-size: var(--fs-sm);
}

.scenario-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel-soft);
}

.scenario-actions button {
  font-size: var(--fs-sm);
  min-height: 32px;
}

/* Recent runs subsection */
.scenario-history {
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  background: var(--panel);
}

.scenario-history-head small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}

.scenario-history-list {
  display: grid;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.scenario-history-empty {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-style: italic;
  padding: 4px 0;
}

.scenario-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--panel-soft);
  font-size: var(--fs-sm);
}

.scenario-history-row:hover {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: var(--space-1) 7px;
}

.scenario-history-meta strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  display: block;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.scenario-history-meta small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.scenario-history-stats {
  display: grid;
  gap: 1px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--muted-strong);
  font-weight: 600;
}

/* Sync footer */
.scenario-sync-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel-soft);
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.sync-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

.sync-dot.ok { background: var(--green); }
.sync-dot.bad { background: var(--accent); }
.sync-dot.pending { background: var(--amber); animation: sync-pulse 1.2s ease-in-out infinite; }

@keyframes sync-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

.status-dot.ok { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.status-dot.bad { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Pinned-benchmark chip in the app bar */
.pinned-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--teal);
  border-radius: var(--r-pill);
  background: var(--teal-bg);
  color: var(--teal-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  min-height: 34px;
}

.pinned-chip[hidden] { display: none; }

.pinned-chip-label {
  display: grid;
  gap: 0;
  line-height: 1.1;
  text-align: left;
}

.pinned-chip-label small {
  display: block;
  color: var(--teal-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pinned-chip-label strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinned-chip .icon-button {
  width: 26px;
  height: 26px;
  min-height: 26px;
  font-size: 14px;
  color: var(--teal-strong);
}

.pinned-chip .icon-button:hover {
  background: rgba(31, 138, 131, 0.12);
  color: var(--teal-strong);
  border-color: transparent;
}

/* ── N2 Context rail — Firm › Client › Portfolio › Product ────────────────
   Sits between .app-tabs and .case-bar. Renders the four-node breadcrumb
   from NavContext. Team node is omitted (D1). Product node is read-only and
   distinct from the <h1 id="case-title"> below (D3). Role-gated via
   [data-role] set by nav_rail.js. */
.nav-rail {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  padding: var(--space-1) var(--space-3);
  min-height: var(--space-5);
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.nav-rail-node {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18ch;
}

/* Static (non-interactive) label node — firm for member/account_admin,
   all nodes for guest, product always. */
.nav-rail-node--static {
  cursor: default;
  color: var(--muted);
}

/* Selector node — active for member/account_admin on client+portfolio,
   super_admin on firm. Disabled until N3 wires the dropdown. */
button.nav-rail-node--selector {
  background: none;
  border: none;
  cursor: not-allowed;
  padding: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18ch;
}
button.nav-rail-node--selector:not([disabled]) {
  cursor: pointer;
}
button.nav-rail-node--selector:not([disabled]):hover {
  color: var(--brand);
}

.nav-rail-node-caret {
  font-size: var(--fs-xs);
  color: var(--muted);
  flex-shrink: 0;
}

.nav-rail-sep {
  flex-shrink: 0;
  color: var(--line-strong);
  font-size: var(--fs-sm);
  padding: 0 var(--space-1);
  user-select: none;
}

/* Product node is always the rightmost leaf — slightly stronger ink
   to signal "you are here", no caret. */
.nav-rail-node--product {
  color: var(--ink-soft);
  font-weight: 600;
}

/* Guest role — all nodes static, muted colour. The rail is still
   rendered so guests see their context path clearly. */
.nav-rail[data-role="guest"] .nav-rail-node {
  color: var(--muted);
}
.nav-rail[data-role="guest"] .nav-rail-node--product {
  color: var(--muted-strong);
}

/* ── N3 Context rail — listbox dropdown ──────────────────────────────── */

/* Dropdown listbox: floats below the selector button, anchored to the
   nav-rail container (position:relative below).  Uses token spacing
   and the brand palette — no raw px or hex outside the :root block. */
.nav-rail {
  position: relative;
}

.nav-rail-listbox {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown, 200);
  min-width: 14rem;
  max-width: 28rem;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 var(--space-1) var(--space-3) rgba(0, 0, 0, 0.12);
}

.nav-rail-listbox-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-rail-listbox-item:hover,
.nav-rail-listbox-item:focus {
  background: var(--panel-soft);
  color: var(--brand);
  outline: none;
}

/* ── End N3 Context rail ──────────────────────────────────────────────── */

/* ── N5 Context rail — super_admin operator firm selector ────────────────
   Visual distinction for the operator firm-switch (design §10 dual-role UX).
   Applied by nav_rail.js when a super_admin has selected a foreign firm
   context.  Uses token spacing and the brand/amber palette — no raw px or
   hex outside the :root block. */

/* Operator-mode rail: amber left-border signals "acting within a firm". */
.nav-rail--operator-mode {
  border-left: var(--space-1) solid var(--amber, #a96b14);
  background: var(--amber-soft, #fdf1da);
}

/* Operator firm selector button: amber ink + bolder weight to signal
   the operator is currently scoped to a chosen firm. */
button.nav-rail-node--firm--operator {
  color: var(--amber-dark, #92400e);
  font-weight: 600;
}
button.nav-rail-node--firm--operator:hover {
  color: var(--amber, #a96b14);
}

/* Operator firm listbox: slightly wider to accommodate full firm names. */
.nav-rail-listbox--operator {
  min-width: 20rem;
}

/* ── End N5 Context rail ──────────────────────────────────────────────── */

/* Case bar — thin identity strip for the active case. Shows only
   "what am I working on?" — title + badges + an overflow menu.
   Case-CREATION (Auto-populate, Template+Load, Import) lives on the
   Setup tab; RUN (Validate, scenario name, Run) lives in the
   docked .run-dock (at the bottom of the Product workspace frame).
   The bar collapses to a single ~38px row. */
.case-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 28px;
  min-height: 38px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.case-bar-title {
  min-width: 0;
  flex: 1 1 auto;
}

.case-bar-title .case-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.case-bar-title .case-title-row #case-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.005em;
}
#override-badge,
#provenance-badge {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Case-bar run breadcrumb: surfaces last run metadata so users
   don't have to remember when they last ran. Hidden until
   run_history.js detects at least one completed run. */
.case-bar-runinfo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--muted);
  flex-wrap: wrap;
}
.case-bar-runinfo[hidden] { display: none; }
.case-bar-runinfo-label {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.case-bar-runinfo-sep {
  color: var(--line-strong);
}
.case-bar-runinfo strong {
  color: var(--ink);
  font-weight: 600;
}
.case-bar-runinfo #case-bar-runinfo-when {
  font-variant-numeric: tabular-nums;
}
/* No-runs state — shown on Product with an active portfolio
   before the user has logged a run. Same layout as the populated
   state but muted: the scenario slot drops the strong --ink color
   and italicises the "Run a case to populate" explainer. */
.case-bar-runinfo--no-runs strong {
  color: var(--muted);
  font-weight: 400;
  font-style: italic;
}

/* Run-dock estimate — shows the avg of the last 5 run durations on
   the active case next to the Run button. Mid-grey, mono digits. */
.run-dock-estimate {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: 0 var(--space-1);
}
.run-dock-estimate[hidden] { display: none; }

.case-bar-actions {
  flex-wrap: nowrap;
  display: flex;
  align-items: center;
}

/* Overflow menu — Save / Share / advanced-toggle. Low-frequency actions
   that don't need a permanent button on every Product workspace tab. */
.case-overflow-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.case-overflow-toggle:hover,
.case-overflow-toggle[aria-expanded="true"] {
  background: var(--surface-subtle);
  color: var(--ink);
  border-color: var(--line);
}
.case-overflow-menu {
  position: absolute;
  right: 28px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-md);
  z-index: 20;
}
.case-overflow-menu[hidden] {
  display: none;
}
.case-overflow-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
.case-overflow-menu button:hover {
  background: var(--surface-subtle);
}
.case-overflow-menu button .icon {
  width: 14px;
  height: 14px;
}

/* Run dock. Sticky-bottom strip docked to the workspace content frame —
   part of the page, not floating chrome. Layout doctrine §19 bans
   fixed-position floating chrome on desk analyst surfaces; yesterday's
   .run-fab implementation also overlapped the Ask-the-Analyst dock at
   the same screen corner. The docked variant keeps Run separated from
   identity (which is the doctrine-correct split) while staying part of
   the workspace frame.

   Visibility: opt in only on Product workspace tabs (the case-modeling
   workspace) with a portfolio loaded. Hidden everywhere else — same
   concept-mixing rule as the case-bar. */
.run-dock {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 5;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) calc(-1 * 28px) calc(-1 * var(--space-5));
  padding: var(--space-2) 28px;
  background: var(--panel-soft);
  border-top: 1px solid var(--line);
}
.run-dock .scenario-name-input {
  min-width: 220px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--panel);
  color: var(--ink);
}
.run-dock .scenario-name-input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
}
.run-dock #validate-case,
.run-dock #run-case {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-1);
  cursor: pointer;
}
/* Run is the positive primary action — brand color, not --accent (which
   in this theme resolves to a red used for negative directional
   outcomes per layout doctrine §17 color semantics). */
.run-dock #run-case.primary {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
}
.run-dock #run-case.primary:hover {
  background: var(--brand-strong, var(--brand));
}
.run-dock #validate-case {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}
.run-dock #validate-case:hover {
  border-color: var(--line-strong);
}
.run-dock #run-progress[hidden] {
  display: none;
}
.run-dock #run-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
body[data-portfolio-state="active"][data-active-workspace="product"] .run-dock {
  display: flex;
}

body[data-portfolio-state="empty"] .case-bar {
  display: none;
}

/* The Assumptions, Export, and Analyst tab-views are rendered as
   body-level siblings of <div class="app-shell">, not inside <main>.
   When one of those tabs is active, <main> is empty but app-shell's
   `min-height: 100vh` forces it to fill the viewport — pushing the
   actual tab content below the fold and leaving a large blank
   between the case-bar and the page content. Drop the min-height
   so app-shell shrinks to its real content (header + sub-nav +
   case-bar) and the orphan tab-view renders immediately below it. */
body[data-active-tab="assumptions"] .app-shell,
body[data-active-tab="library"] .app-shell,
body[data-active-tab="export"] .app-shell,
body[data-active-tab="analyst"] .app-shell,
body[data-active-tab="research"] .app-shell,
body[data-active-tab="calibration"] .app-shell,
body[data-active-tab="versions"] .app-shell,
body[data-active-tab="allocation"] .app-shell,
body[data-active-tab="acquisitions"] .app-shell,
body[data-active-tab="strategy-policy"] .app-shell,
body[data-active-tab="strategy-targets"] .app-shell,
body[data-active-tab="strategy-trajectory"] .app-shell,
body[data-active-tab="strategy-dissent"] .app-shell,
body[data-active-tab="billing"] .app-shell,
body[data-active-tab="sharing-inbox"] .app-shell {
  min-height: 0;
}
/* On those same tabs <main> holds only the (now hidden) product/
   portfolio tab-views, yet still occupied ~122px from its own
   22px top + 100px bottom padding — pure dead space between the case
   bar and the orphan tab-view that follows app-shell. Collapse it.
   (The "Ask the Analyst" dock is a body-level <aside>, unaffected.) */
body[data-active-tab="assumptions"] main.workspace,
body[data-active-tab="library"] main.workspace,
body[data-active-tab="catalogs"] main.workspace,
body[data-active-tab="export"] main.workspace,
body[data-active-tab="analyst"] main.workspace,
body[data-active-tab="research"] main.workspace,
body[data-active-tab="calibration"] main.workspace,
body[data-active-tab="versions"] main.workspace,
body[data-active-tab="allocation"] main.workspace,
body[data-active-tab="acquisitions"] main.workspace,
body[data-active-tab="strategy-policy"] main.workspace,
body[data-active-tab="strategy-targets"] main.workspace,
body[data-active-tab="strategy-trajectory"] main.workspace,
body[data-active-tab="strategy-dissent"] main.workspace,
body[data-active-tab="billing"] main.workspace,
body[data-active-tab="sharing-inbox"] main.workspace {
  display: none;
}

/* ============ Concept-mixing invariant (case-context visibility) ============
   The case-bar (case title, Auto-populate, Load/Import/Save/Validate/
   Share/scenario name/Run) is case-CREATION + case-EXECUTION UI. It
   ONLY makes sense on surfaces where the user is editing or running
   a single modeled case — that's the Product workspace (Setup,
   Spotlight, Pipeline, Products, Sponsors, P&L, Monte Carlo). On
   every other surface — universe-level (Capital, Strategy), portfolio-
   level (Portfolio dashboard / Optimization / Versions), outcome
   (Decide → Recommendation / Q&A / Research / Calibration), and org-
   level (Library) — showing "Single Oncology Asset Forecast" with
   the Run cluster on top is concept-mixing: a case-level header
   above content that has nothing to do with one case.

   Rule: hide case-context UI by default; whitelist the Product
   workspace and the three "case-context tool" tabs (Assumptions
   audit, Analyst Q&A, Export) where the title block is still useful
   but the case-creation controls are not.

   Tested in tests/browser/test_workbench_core.py
   ::test_concept_mixing_invariant_universe_tabs. New tabs added later
   default to hidden — they must opt IN to the case-bar, not out. */
.case-bar,
#scenario-picker {
  display: none;
}
/* Opt-in: Product workspace is the case-modeling workspace. Show the
   case-bar (now a thin identity strip) and the scenario picker there
   (subject to the empty-portfolio rule above which already hides the
   bar when no portfolio is loaded — higher specificity via the doubled
   body[attr] selector on the case-bar variant). */
body[data-portfolio-state="active"][data-active-workspace="product"] .case-bar {
  display: flex;
}
body[data-active-workspace="product"] #scenario-picker {
  display: inline-flex;
}
/* The three case-context tool tabs reveal the title block (so the
   user sees which case they're operating on) but keep the case-
   creation cluster hidden — they have their own primary actions
   (Apply + Re-run / ask a question / Download Decision Pack). */
body[data-portfolio-state="active"][data-active-tab="assumptions"] .case-bar,
body[data-portfolio-state="active"][data-active-tab="analyst"] .case-bar,
body[data-portfolio-state="active"][data-active-tab="export"] .case-bar {
  display: flex;
  justify-content: flex-start;
}
body[data-active-tab="assumptions"] .case-bar-actions,
body[data-active-tab="analyst"] .case-bar-actions,
body[data-active-tab="export"] .case-bar-actions {
  display: none;
}
/* The pinned benchmark chip is a separate concept — it's a sticky
   comparison anchor, not case-creation UI — so we let it show on
   any surface where comparing to a pinned scenario makes sense
   (Product modeling, Portfolio outputs, Decide outcomes). It's
   already permanently hidden when nothing is pinned. */

/* Concept-mixing invariant — universe-level tabs (firm-wide capital
   allocation, the M&A target screen, the board-level strategy tabs)
   are NOT bound to a single modeled case. They run against the curated
   universe or against the portfolio-level state, not a Setup-built
   case. Showing "Single Oncology Asset Forecast" with Auto-populate /
   Load / Save / Validate / Run on top of an M&A screen mixes a
   case-level concept ("the asset I'm modeling") with a universe-level
   one ("which companies are mispriced"). Hide the case-bar (and the
   scenario picker / pinned chip — also case-context) on these tabs.
   Tested in tests/browser/test_workbench_core.py
   ::test_concept_mixing_invariant. */
body[data-active-tab="allocation"] .case-bar,
body[data-active-tab="allocation"] #scenario-picker,
body[data-active-tab="allocation"] #pinned-chip,
body[data-active-tab="acquisitions"] .case-bar,
body[data-active-tab="acquisitions"] #scenario-picker,
body[data-active-tab="acquisitions"] #pinned-chip,
body[data-active-tab="strategy-policy"] .case-bar,
body[data-active-tab="strategy-policy"] #scenario-picker,
body[data-active-tab="strategy-policy"] #pinned-chip,
body[data-active-tab="strategy-targets"] .case-bar,
body[data-active-tab="strategy-targets"] #scenario-picker,
body[data-active-tab="strategy-targets"] #pinned-chip,
body[data-active-tab="strategy-trajectory"] .case-bar,
body[data-active-tab="strategy-trajectory"] #scenario-picker,
body[data-active-tab="strategy-trajectory"] #pinned-chip,
body[data-active-tab="strategy-dissent"] .case-bar,
body[data-active-tab="strategy-dissent"] #scenario-picker,
body[data-active-tab="strategy-dissent"] #pinned-chip {
  display: none;
}

/* Collapsible panels — layout doctrine §4 detail band.
   A `.panel.panel-collapsible` shows just its header by default and
   expands on click (or Enter / Space when the header has focus). The
   panel_collapse.js helper wires the toggle declaratively. State
   persists per-panel via localStorage. */
.panel.panel-collapsible > .panel-header.panel-header--collapsible {
  user-select: none;
}
.panel.panel-collapsible > .panel-header.panel-header--collapsible:hover {
  background: var(--surface-subtle);
}
.panel-collapse-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-1);
  transition: transform 120ms ease;
}
.panel-collapse-toggle:hover {
  color: var(--ink);
}
.panel-collapse-toggle:focus-visible,
.panel.panel-collapsible > .panel-header:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.panel.panel-collapsible[data-collapsed="true"] .panel-collapse-toggle {
  transform: rotate(-90deg);
}
.panel.panel-collapsible[data-collapsed="false"] .panel-collapse-toggle {
  transform: rotate(0);
}
.panel.panel-collapsible[data-collapsed="true"] > .panel-header {
  border-bottom: 0;
}
.panel-body[hidden] {
  display: none;
}

/* Tab view container */
.tab-view {
  display: block;
}

.tab-view[hidden] {
  display: none;
}

/* Kept for compatibility with anywhere `.shell` is still referenced */
.shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- Sidebar rail (kept for now, polished) -------------------------- */
.rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--panel);
  color: var(--ink);
  border-right: 1px solid var(--line);
  padding: 22px 14px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-strong) 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
}

.brand strong,
.brand small {
  display: block;
  line-height: 1.2;
}

.brand strong {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
}

.brand small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.nav-list {
  display: grid;
  gap: 2px;
}

.nav-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-sm);
  color: var(--muted-strong);
  font-weight: 600;
  font-size: var(--fs-base);
  padding: 9px 11px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.nav-list a:hover {
  background: var(--panel-soft);
  color: var(--ink);
}

.nav-list a.active {
  background: var(--teal-bg);
  color: var(--teal-strong);
}

.nav-list a.active::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--teal);
  margin-right: 2px;
}

.status-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
}

.dot {
  display: inline-grid;
  width: 8px;
  height: 8px;
  min-height: 8px;
  place-items: center;
  border-radius: 50%;
  background: var(--amber);
  color: transparent;
  font-size: 0;
  padding: 0;
}

.dot.ok {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.dot.bad {
  background: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}

/* ---------- Workspace ------------------------------------------------------ */
.workspace {
  min-width: 0;
  padding: 22px 28px 100px;
}

/* ---------- Optimization workspace ---------------------------------------- */
.opt-workspace {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.opt-controls {
  align-self: start;
  position: sticky;
  top: 76px;
  display: grid;
  gap: 0;
}

.opt-section {
  border-top: 1px solid var(--line-soft);
  padding: 14px 16px;
}

.opt-section:first-of-type {
  border-top: 0;
}

.opt-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.opt-field {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.opt-field > span:first-child {
  color: var(--muted);
}

.opt-field select,
.opt-field input {
  font-size: var(--fs-base);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  min-height: 34px;
  color: var(--ink);
}

.opt-constraint-list,
.opt-scope-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.opt-constraint-list li,
.opt-user-constraint-list li,
.opt-scope-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.opt-user-constraint-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.opt-user-constraint-list li.opt-empty {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  font-style: italic;
}

.opt-user-constraint-list .constraint-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opt-user-constraint-list .constraint-remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
}

.opt-user-constraint-list .constraint-remove:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.opt-add-btn {
  font-size: var(--fs-sm);
  padding: 4px 10px;
  min-height: 26px;
  color: var(--teal-strong);
  font-weight: 700;
}

.opt-add-btn:hover {
  background: var(--teal-bg);
  color: var(--teal-strong);
  border-color: var(--teal-bg);
}

/* Add-constraint popover */
.opt-add-popover {
  position: absolute;
  z-index: 40;
  display: grid;
  gap: 10px;
  min-width: 260px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

.opt-add-popover label {
  display: grid;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.opt-add-popover select,
.opt-add-popover input {
  font-size: var(--fs-base);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  min-height: 32px;
}

.opt-add-popover .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.opt-add-popover .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Combinatorial-constraint popover sections */
.opt-add-popover .count-row.row,
.opt-add-popover .requires-row.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.opt-add-popover .requires-row.row {
  grid-template-columns: 1fr auto 1fr;
}

.opt-add-popover .assets-row,
.opt-add-popover .requires-any-row {
  display: grid;
  gap: 4px;
}

/* HTML's hidden attribute must beat the display: grid above. */
.opt-add-popover [hidden] {
  display: none !important;
}

.opt-add-popover .cm-check-list {
  display: grid;
  gap: 2px;
  max-height: 140px;
  overflow-y: auto;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-soft);
}

.opt-add-popover .cm-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  padding: 3px 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.opt-add-popover .cm-check:hover {
  background: var(--panel);
}

.opt-add-popover .cm-check input {
  margin: 0;
  width: 14px;
  height: 14px;
  min-height: 14px;
  padding: 0;
  accent-color: var(--teal);
  border: 0;
}

/* Pareto + scrubber: infeasible candidates */
.opt-pareto .pt.infeasible {
  fill: var(--line-strong);
  stroke: var(--muted);
  fill-opacity: 0.35;
}

.opt-scrubber .tick.infeasible {
  stroke: var(--line-strong);
  opacity: 0.45;
}

.opt-detail-body .infeasible-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  color: var(--accent-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.opt-detail-body .infeasible-banner strong {
  color: var(--accent-strong);
}

.opt-constraint-list li.opt-empty {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  font-style: italic;
}

/* Auto-detected deal-mutex constraint — distinct hue so it reads as
   "case-derived" rather than user-supplied. */
.opt-constraint-list li.case-derived-deal {
  background: var(--teal-bg);
  border-color: var(--teal);
  color: var(--teal-strong);
}

.opt-scope-on { color: var(--teal); font-weight: 800; }
.opt-scope-off { color: var(--line-strong); font-weight: 800; }
.opt-scope-list em {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.opt-notes small,
.opt-engine-note {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
  margin-top: 6px;
}

#opt-engine-pill {
  font-family: var(--font-mono);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

#opt-engine-pill.nsga2 {
  background: var(--teal-bg);
  color: var(--teal-strong);
}

#opt-engine-pill.greedy {
  background: var(--gold-soft);
  color: var(--amber-strong);
}

.opt-canvas {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.opt-chart {
  display: grid;
}

.opt-axis-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.opt-axis-controls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.opt-axis-controls select {
  min-height: 30px;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Pareto scatter */
.opt-pareto {
  position: relative;
  padding: 18px 22px 22px;
  min-height: 320px;
  background: var(--panel);
}

.opt-pareto svg {
  display: block;
  width: 100%;
  height: 320px;
  overflow: visible;
}

.opt-pareto .axis-line {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.opt-pareto .tick-line {
  stroke: var(--line-soft);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.opt-pareto .tick-label {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.opt-pareto .axis-title {
  fill: var(--muted-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.opt-pareto .pt {
  fill: var(--blue);
  fill-opacity: 0.55;
  stroke: var(--blue);
  stroke-width: 1;
  cursor: pointer;
  transition: fill 100ms ease, fill-opacity 100ms ease, r 100ms ease;
}

.opt-pareto .pt:hover {
  fill: var(--accent);
  fill-opacity: 0.85;
}

.opt-pareto .pt.pareto {
  fill: var(--teal);
  stroke: var(--teal-strong);
  fill-opacity: 0.85;
}

.opt-pareto .pt.selected {
  fill: var(--accent);
  stroke: var(--accent-strong);
  fill-opacity: 1;
}

.opt-pareto .pt.pinned {
  fill: var(--amber);
  stroke: var(--amber-strong);
  fill-opacity: 1;
}

.opt-pareto .pareto-line {
  stroke: var(--teal);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  fill: none;
}

/* Scrubber strip */
.opt-scrubber {
  padding: 14px 18px 18px;
}

.opt-scrubber svg {
  display: block;
  width: 100%;
  height: 76px;
}

.opt-scrubber .tick {
  stroke: var(--line-strong);
  stroke-width: 2;
  cursor: pointer;
}

.opt-scrubber .tick.pareto {
  stroke: var(--teal);
}

.opt-scrubber .tick.selected {
  stroke: var(--accent);
  stroke-width: 3;
}

.opt-scrubber .tick.pinned {
  stroke: var(--amber);
  stroke-width: 3;
}

.opt-scrubber .axis-line {
  stroke: var(--line);
  stroke-width: 1;
}

.opt-scrubber .axis-label {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
}

/* Selected-candidate detail panel */
.opt-detail-body {
  padding: 18px;
  display: grid;
  gap: 16px;
}

.opt-detail .opt-empty {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 28px 0;
  margin: 0;
}

.opt-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.opt-metric {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-soft);
}

.opt-metric small {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.opt-metric strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.opt-metric.is-good strong { color: var(--green); }
.opt-metric.is-bad strong { color: var(--accent-strong); }

/* Histogram (mini-distribution) */
.opt-histogram {
  display: grid;
  gap: 6px;
}

.opt-histogram svg {
  display: block;
  width: 100%;
  height: 110px;
}

.opt-histogram .bar {
  fill: var(--teal);
  fill-opacity: 0.65;
}

.opt-histogram .marker {
  stroke: var(--ink);
  stroke-width: 1.2;
}

.opt-histogram .marker.p50 { stroke: var(--accent); stroke-width: 2; }
.opt-histogram .zero-line { stroke: var(--accent); stroke-dasharray: 3 3; stroke-width: 1; }
.opt-histogram .marker-label {
  fill: var(--muted-strong);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
}

.opt-asset-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Decision audit trail */
.opt-audit {
  display: grid;
  gap: 8px;
}

.audit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.audit-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(0, 2fr);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-soft);
  font-size: var(--fs-sm);
}

.audit-row.included {
  border-left: 3px solid var(--teal);
  background: var(--teal-bg);
}

.audit-row.excluded {
  border-left: 3px solid var(--line-strong);
  opacity: 0.85;
}

.audit-row.excluded .audit-asset {
  color: var(--muted-strong);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}

.audit-asset {
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: flex-end;
}

.audit-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.audit-tag.high { background: var(--green-soft); color: var(--green); }
.audit-tag.low { background: var(--red-soft); color: var(--accent-strong); }
.audit-tag.neutral { background: var(--panel); color: var(--muted-strong); border: 1px solid var(--line); }

.opt-asset-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--teal-bg);
  color: var(--teal-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.opt-asset-pill .freq {
  color: var(--muted);
  font-weight: 500;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.opt-source-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.opt-source-pills .pill {
  background: var(--panel-soft);
  color: var(--muted-strong);
  border: 1px solid var(--line);
}

.opt-tooltip {
  position: absolute;
  z-index: 40;
  display: grid;
  gap: 2px;
  pointer-events: none;
  min-width: 160px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: #ffffff;
  font-size: var(--fs-xs);
  box-shadow: var(--shadow-lg);
}

.opt-tooltip strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #ffffff;
}

.opt-tooltip span {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-mono);
}

/* ---------- Top bar -------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.topbar > div:first-child {
  min-width: 0;
}

.topbar .case-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar h1 {
  font-size: 22px;
  font-weight: 700;
}

.title-edit {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  cursor: pointer;
}

.title-edit:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

.title-edit svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.actions .divider {
  width: 1px;
  height: 24px;
  background: var(--line);
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 12px 4px 4px;
  background: var(--panel);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  min-height: 34px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.user-chip:hover {
  border-color: var(--ink-soft);
  background: var(--panel-soft);
  color: var(--ink);
}

.user-chip.signed-out {
  color: var(--ink);
}

.user-chip .avatar {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.user-chip.signed-out .avatar {
  background: var(--avatar-default);
}

/* ---------- Workflow picker ----------------------------------------------- */
.workflow-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
/* Once a portfolio is loaded the workflow has already been chosen
   on the Start landing or in Setup → Start from. Showing 6 fat
   template cards on the Pipeline tab again duplicates the same
   picker (§9 — don't render the same concept twice). Collapse to
   a compact "Workflow · <active>" pill; switching workflows lives
   in Setup. */
body[data-portfolio-state="active"] .workflow-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
body[data-portfolio-state="active"] .workflow-picker::before {
  content: "Workflow";
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
body[data-portfolio-state="active"] .workflow-picker .workflow-choice:not(.active) {
  display: none;
}
body[data-portfolio-state="active"] .workflow-picker .workflow-choice.active {
  min-height: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: var(--brand-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
/* Quick switcher: when the picker is .is-expanded (toggled by
   workflow_quick_switch.js after the user clicks the active pill),
   re-show the full 6-template grid inline so the user can switch
   workflows without navigating to Setup → Start from. Esc / outside-
   click collapses back. */
body[data-portfolio-state="active"] .workflow-picker.is-expanded {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
}
body[data-portfolio-state="active"] .workflow-picker.is-expanded::before {
  display: none;
}
body[data-portfolio-state="active"] .workflow-picker.is-expanded .workflow-choice:not(.active),
body[data-portfolio-state="active"] .workflow-picker.is-expanded .workflow-choice.active {
  display: grid;
  min-height: 80px;
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
}
body[data-portfolio-state="active"] .workflow-picker.is-expanded .workflow-choice.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand-soft);
}
body[data-portfolio-state="active"] .workflow-picker.is-expanded .workflow-choice span {
  display: block;
}
body[data-portfolio-state="active"] .workflow-picker .workflow-choice.active span {
  display: none;
}

.workflow-choice {
  display: grid;
  align-content: start;
  justify-content: stretch;
  gap: 6px;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: 12px 14px;
  text-align: left;
  box-shadow: var(--shadow-xs);
  font-weight: 500;
}

.workflow-choice strong {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.workflow-choice span {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
}

.workflow-choice:hover {
  border-color: var(--ink-soft);
  background: var(--panel-soft);
}

.workflow-choice.active {
  border-color: var(--teal);
  background: var(--teal-bg);
  box-shadow: var(--shadow-sm);
}

.workflow-choice.active strong {
  color: var(--teal-strong);
}

/* ---------- Workflow strip ------------------------------------------------- */
.workflow-strip {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.workflow-head,
.workflow-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
}

.workflow-head {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 100px;
  padding: 14px 16px;
}

.workflow-head strong {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.3;
}

.mode-pill {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--teal-bg);
  color: var(--teal-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workflow-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.workflow-card {
  display: grid;
  gap: 6px;
  min-height: 100px;
  border-left: 3px solid var(--teal);
  padding: 12px 14px;
}

.workflow-card.blocked {
  border-left-color: var(--accent);
}

.workflow-card.ready {
  border-left-color: var(--green);
}

.workflow-card.needs_review,
.workflow-card.review_sources {
  border-left-color: var(--amber);
}

.workflow-card strong {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.25;
}

.workflow-card span {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* ---------- Panel system --------------------------------------------------- */
.panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
}

.panel-header,
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 16px;
  background: var(--panel);
}

.panel-lede {
  /* Density pass round 4: tighter vertical padding (was 10/6 → 6/4)
   * so the lede paragraph below a panel-head no longer adds 30px of
   * empty space before the chart content. */
  padding: 6px 16px 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted-strong);
  max-width: 72ch;
}

/* On the M&A target screen the lede explains the deal-team workflow
   (NPV vs all-in cost; internal screening only). A 72ch column made
   it read as a sidebar caption next to the controls; the section is
   the whole panel here, so let the lede fill panel width minus the
   16px gutter on each side. */
body[data-active-tab="acquisitions"] .panel-lede {
  max-width: none;
}

.panel-header h2,
.panel-head h2 {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.005em;
}

body[data-compact-portfolio="true"]:not(.show-advanced) .advanced-portfolio {
  display: none;
}

.layout-grid,
.data-grid {
  display: grid;
  gap: 16px;
}

/* Stacked-panel wrapper — sibling panels in a vertical stack with
   the doctrine §2 default inter-panel gap (--space-4). Used where
   side-by-side panels would force their tables into too-narrow
   columns (e.g. Asset Outcomes + Market Value Profile on the
   Dashboard before alignment fix). */
.panel-stack {
  display: grid;
  gap: var(--space-4);
}

.layout-grid {
  grid-template-columns: minmax(360px, 1.4fr) minmax(280px, 0.85fr);
}

.data-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

/* ---------- Pipeline / timeline panel ------------------------------------- */
.pipeline-panel {
  margin-bottom: 18px;
}

.portfolio-timeline-app {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.portfolio-app-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  padding: 0 18px;
  background: var(--panel);
}

.portfolio-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.portfolio-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--teal-bg);
  color: var(--teal-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.portfolio-brand strong {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.portfolio-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-height: 56px;
}

.portfolio-tabs a {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  color: var(--muted-strong);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}

.portfolio-tabs a:hover {
  color: var(--ink);
}

.portfolio-tabs a.active {
  border-bottom-color: var(--teal);
  color: var(--teal-strong);
}

.portfolio-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Filter chips bar (Gantt-style) — inspired by PharmaCo image 3 */
.timeline-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 12px 18px;
  background: var(--panel-soft);
}

.timeline-filterbar label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timeline-filterbar select,
.timeline-filterbar input[type="search"],
.timeline-filterbar .chip-filter {
  min-width: 160px;
  min-height: 32px;
  border-radius: var(--r-sm);
  font-weight: 500;
  font-size: var(--fs-base);
  text-transform: none;
  letter-spacing: 0;
}

.timeline-filterbar select,
.timeline-filterbar input[type="search"] {
  border-color: var(--line-strong);
  background: var(--panel);
}

/* ---- Chip filter widget ---- */
.chip-filter {
  position: relative;
  display: inline-block;
}

.chip-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 160px;
  min-height: 32px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  font-size: var(--fs-base);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.chip-filter-btn .chip-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-filter-btn .chip-caret {
  color: var(--muted);
  font-size: 10px;
  margin-left: 4px;
}

.chip-filter-btn:hover {
  border-color: var(--ink-soft);
  background: var(--panel-soft);
}

.chip-filter-btn.has-selection {
  border-color: var(--teal);
  background: var(--teal-bg);
  color: var(--teal-strong);
  font-weight: 600;
}

.chip-filter-btn.has-selection .chip-caret {
  color: var(--teal-strong);
}

.chip-filter-popover {
  position: absolute;
  z-index: 40;
  display: grid;
  gap: 0;
  min-width: 220px;
  max-width: 360px;
  max-height: 280px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.chip-popover-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel-soft);
}

.chip-popover-link {
  border: 0;
  background: transparent;
  color: var(--teal-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  min-height: 22px;
}

.chip-popover-link:hover {
  background: var(--teal-bg);
}

.chip-popover-list {
  overflow-y: auto;
  max-height: 232px;
  padding: 6px;
}

.chip-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
}

.chip-popover-item:hover {
  background: var(--panel-soft);
}

.chip-popover-item input {
  margin: 0;
  width: 14px;
  height: 14px;
  min-height: 14px;
  padding: 0;
  accent-color: var(--teal);
  border: 0;
}

.timeline-search input {
  width: 200px;
}

.timeline-zoom {
  margin-left: auto;
  min-width: 170px;
}

.timeline-zoom input {
  width: 170px;
  accent-color: var(--teal);
  border: 0;
  background: transparent;
  padding: 0;
}

.timeline-titlebar {
  align-items: center;
  background: var(--panel);
}

.timeline-titlebar .eyebrow {
  margin-bottom: 2px;
  font-size: 10px;
}

.timeline-titlebar small {
  max-width: 420px;
  text-align: right;
}

.timeline-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Summary KPI strip --------------------------------------------- */
.summary-graphs {
  display: grid;
  /* Density pass round 4: smaller min-width so 5+ tiles fit in
   * one row at the typical workbench viewport (~1440 wide). */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
}

.summary-card {
  display: grid;
  /* Density pass: tighter gap and padding; min-height removed so the
     card height is driven by content not a magic floor. */
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-soft);
  padding: 6px 10px;
  transition: border-color 120ms ease, background 120ms ease;
}

.summary-card:hover {
  border-color: var(--line-strong);
  background: var(--panel);
}

.summary-card strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.summary-card span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: var(--leading-tight);
}

.mini-track {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--line-soft);
}

.mini-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

/* ---------- Optimizer scope chips ----------------------------------------- */
.optimizer-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 18px;
  background: var(--panel);
}

.scope-head {
  display: grid;
  min-width: 150px;
  margin-right: 4px;
}

.scope-head small {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scope-head strong {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
}

.optimizer-scope label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--muted-strong);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0 12px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.optimizer-scope label:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}

.optimizer-scope input {
  width: 14px;
  height: 14px;
  min-height: 14px;
  accent-color: var(--teal);
  border: 0;
  padding: 0;
}

.optimizer-scope label:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal-bg);
  color: var(--teal-strong);
}

/* ---------- Pipeline timeline grid ---------------------------------------- */
.pipeline-timeline {
  overflow: auto;
  min-height: 280px;
  max-height: 660px;
  scrollbar-color: var(--line-strong) var(--panel-soft);
  scrollbar-width: thin;
  background: var(--panel);
}

.timeline-grid {
  width: max-content;
  min-width: 100%;
}

.timeline-header,
.timeline-row {
  display: grid;
  grid-template-columns: 250px 145px 128px repeat(var(--year-count), var(--year-width));
}

.timeline-header {
  position: sticky;
  top: 0;
  z-index: 4;
  border-bottom: 1px solid var(--line);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timeline-header > *,
.timeline-cell,
.project-cell {
  min-height: 48px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 14px;
}

.timeline-header > * {
  display: grid;
  align-content: center;
  background: var(--navy);
  border-right-color: rgba(255, 255, 255, 0.08);
  border-bottom: 0;
}

.year-heading {
  position: relative;
  padding-bottom: 14px !important;
  color: #ffffff;
}

.year-heading strong {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #ffffff;
}

.year-heading span {
  position: absolute;
  right: 8px;
  bottom: 3px;
  left: 8px;
  height: 6px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.32) 0,
      rgba(255, 255, 255, 0.32) 1px,
      transparent 1px,
      transparent 16.666%
    );
}

.project-heading,
.area-heading,
.npv-heading,
.project-cell,
.area-cell,
.npv-cell {
  position: sticky;
  z-index: 3;
}

.project-heading,
.project-cell {
  left: 0;
}

.area-heading,
.area-cell {
  left: 250px;
}

.npv-heading,
.npv-cell {
  left: 395px;
}

.project-heading,
.area-heading,
.npv-heading {
  z-index: 5;
}

.project-cell {
  border-top: 0;
  border-left: 0;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 700;
  overflow: hidden;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.project-cell:hover {
  background: var(--teal-bg);
  box-shadow: inset 3px 0 0 var(--teal);
}

.project-cell strong,
.project-cell span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-cell strong {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.project-cell span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 3px;
}

.timeline-cell {
  display: grid;
  align-items: center;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.npv-cell {
  justify-items: end;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.timeline-row.selected .project-cell,
.timeline-row.selected .timeline-cell {
  background: var(--teal-bg);
}

.timeline-lane {
  position: relative;
  min-height: 48px;
  border-bottom: 1px solid var(--line-soft);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(100% / var(--year-count) - 1px),
      rgba(207, 214, 224, 0.45) calc(100% / var(--year-count) - 1px),
      rgba(207, 214, 224, 0.45) calc(100% / var(--year-count))
    );
}

/* ---------- Phase bars (Gantt) -------------------------------------------- */
.phase-bar {
  position: absolute;
  top: 8px;
  display: grid;
  align-content: center;
  min-width: 86px;
  height: 32px;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: #ffffff;
  padding: 4px 28px 4px 10px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.18);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.uncertainty-ribbon {
  position: absolute;
  inset: auto 0 0 0;
  display: none;
  height: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.44) 0,
      rgba(255, 255, 255, 0.44) 5px,
      transparent 5px,
      transparent 10px
    );
}

.phase-bar strong,
.phase-bar .phase-meta > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phase-bar strong {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.phase-bar .phase-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.phase-bar .phase-meta > span {
  color: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
}

.phase-bar em {
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.phase-bar.uncertain {
  outline: 1px dashed rgba(255, 255, 255, 0.45);
  outline-offset: -3px;
}

.phase-bar.uncertain .uncertainty-ribbon {
  display: block;
}

.phase-bar.known {
  outline: 1px solid rgba(255, 255, 255, 0.2);
  outline-offset: -3px;
}

.phase-bar.timing-unlocked {
  background: linear-gradient(90deg, var(--teal-strong), var(--blue));
}

.phase-bar.past-phase {
  opacity: 0.65;
}

/* Phase stage colors — refined ramp matching PharmaCo Gantt feel */
.phase-bar.phase-1 { background: var(--phase-1); }
.phase-bar.phase-2 { background: var(--phase-2); }
.phase-bar.phase-3 { background: var(--phase-3); }
.phase-bar.stage-early       { background: var(--phase-early); }
.phase-bar.stage-enabling    { background: var(--phase-1); }
.phase-bar.stage-phase1      { background: var(--phase-2); }
.phase-bar.stage-phase2      { background: var(--phase-3); }
.phase-bar.stage-phase3      { background: var(--phase-deep); }
.phase-bar.stage-registration { background: var(--phase-registration); }
.phase-bar.stage-market      { background: linear-gradient(90deg, #2563a8, #2c6391); }

.phase-event {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.phase-event.event-launch {
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--amber-strong);
}

.phase-bar:hover {
  box-shadow: 0 6px 14px rgba(15, 26, 46, 0.22);
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Ghost baseline bar — sits behind overridden phase bars */
.phase-ghost {
  position: absolute;
  top: 8px;
  height: 32px;
  border: 1.5px dashed rgba(15, 26, 46, 0.35);
  border-radius: var(--r-sm);
  background: rgba(15, 26, 46, 0.04);
  pointer-events: none;
  z-index: 0;
}

.phase-ghost.phase-0 { border-color: rgba(47, 147, 171, 0.55); }
.phase-ghost.phase-1 { border-color: rgba(32, 127, 147, 0.55); }
.phase-ghost.phase-2 { border-color: rgba(21, 95, 123, 0.55); }
.phase-ghost.phase-3 { border-color: rgba(13, 69, 102, 0.55); }

/* Drag-to-reschedule affordances */
.phase-bar:not(.past-phase) {
  cursor: grab;
}

.phase-bar.is-dragging,
.phase-bar.is-resizing {
  cursor: grabbing;
  box-shadow: 0 8px 22px rgba(15, 26, 46, 0.28);
  filter: brightness(1.08);
  z-index: 5;
}

.phase-bar.is-resizing {
  cursor: ew-resize;
}

.phase-bar .phase-resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  border-right: 2px solid rgba(255, 255, 255, 0.35);
  border-top-right-radius: var(--r-sm);
  border-bottom-right-radius: var(--r-sm);
  opacity: 0;
  transition: opacity 120ms ease;
}

.phase-bar:hover .phase-resize {
  opacity: 1;
}

.phase-bar.has-override {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

.phase-bar.has-override::after {
  content: "·";
  position: absolute;
  top: 1px;
  left: 4px;
  color: var(--override-marker);
  font-size: 18px;
  line-height: 1;
}

/* Override banner above the timeline */
.override-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--amber-soft);
  border-bottom: 1px solid var(--amber);
  color: var(--amber-strong);
}

.override-banner[hidden] { display: none; }

.override-banner .override-dot {
  color: var(--amber);
  font-size: 18px;
  line-height: 1;
}

.override-banner .override-text {
  flex: 1 1 auto;
  display: grid;
  gap: 1px;
}

.override-banner .override-text strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--amber-strong);
}

.override-banner .override-text small {
  font-size: var(--fs-xs);
  color: var(--amber-strong);
  font-weight: 500;
}

#phase-override-reset {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--amber-strong);
  background: transparent;
  border: 1px solid var(--amber);
  min-height: 30px;
  padding: 0 12px;
}

#phase-override-reset:hover {
  background: #fff;
  border-color: var(--amber-strong);
  color: var(--amber-strong);
}

/* Projected Δ-eNPV chip embedded in the override banner */
.override-preview {
  display: inline-grid;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0;
  padding: 4px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--amber);
  background: #fff;
  min-height: 34px;
  font-variant-numeric: tabular-nums;
}

.override-preview[hidden] { display: none; }

.override-preview small {
  display: block;
  color: var(--amber-strong);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.override-preview strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
  color: var(--amber-strong);
}

.override-preview.good strong { color: var(--green); }
.override-preview.bad strong { color: var(--accent-strong); }
.override-preview.pending strong { color: var(--muted); font-style: italic; font-weight: 500; }
.override-preview.good { border-color: var(--green); }
.override-preview.bad { border-color: var(--accent); }

.timeline-empty {
  padding: 24px;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

/* ---------- Product model editor ------------------------------------------ */
.editor-panel {
  min-height: 540px;
}

#case-editor {
  width: 100%;
  height: calc(100% - 48px);
  min-height: 492px;
  resize: vertical;
  border: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  padding: 14px 16px;
  background: var(--panel-soft);
  color: var(--ink);
  font: 12px/1.5 var(--font-mono);
}

.product-model-page {
  display: grid;
  gap: 16px;
  max-height: 760px;
  overflow: auto;
  padding: 16px;
}

.product-edit-grid,
.product-kpis,
.stage-metrics {
  display: grid;
  gap: 10px;
}

.product-edit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Doctrine §8 — Product Model panel: every label that wraps a full
   distribution editor (shape selector + low/most-likely/high inputs
   + mini histogram) is tall content that can't share a row with a
   plain text input. Force those labels to span both grid columns so
   each distribution editor gets its own row and the mini histograms
   below them all start at the same left edge — the "axes line up"
   regimentation the user asked for. */
.product-edit-grid > label:has(.dist-editor-mount) {
  grid-column: 1 / -1;
}

.product-edit-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-edit-grid input[disabled] {
  cursor: default;
  opacity: 1;
  background: var(--panel-soft);
}

/* Distribution editor (window.DistEditor). Explicit-grid layout: every
   sub-block — value field, lock toggle, shape selector, params,
   distribution chart, prior + Apply, divergence flag — sits in its own
   row of a single-column grid. No flex space-between, no auto-wrap that
   can collapse into overlap; same visual rhythm at every column width.
   Spacing uses the P0 scale (docs/layout_doctrine.md §1). */
.dist-editor-body {
  display: grid;
  grid-auto-rows: min-content;
  gap: var(--space-2);
}

/* Row 1: the central value (Most likely / Mean) — full column. The lock
   toggle that used to sit beside it is now its own row below, so a narrow
   column can't push them into each other. */
.dist-editor-top {
  display: block;
}

.dist-editor-field {
  display: grid;
  gap: var(--space-1);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-strong);
}

.dist-editor-field input {
  font-weight: 500;
}

/* Single-value toggle — styled as a pill slider switch. Visually
   distinct from the form inputs around it so users can tell it's a
   mode-switch, not another data field. State preservation across
   toggles is handled in the JS (state._distSnapshot). */
.dist-editor-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-strong);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
/* Hide the native checkbox; the .dist-editor-lock-switch span is the
   visible thumb-and-track that takes its checked state from it. */
.dist-editor-lock-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.dist-editor-lock-switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 14px;
  background: var(--line-strong);
  border-radius: var(--r-pill);
  transition: background 160ms ease;
  flex-shrink: 0;
}
.dist-editor-lock-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: var(--panel);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.20);
  transition: transform 160ms ease;
}
.dist-editor-lock.is-on .dist-editor-lock-switch {
  background: var(--brand);
}
.dist-editor-lock.is-on .dist-editor-lock-thumb {
  transform: translateX(18px);
}
.dist-editor-lock-input:focus-visible + .dist-editor-lock-switch {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.dist-editor-lock-label {
  line-height: var(--leading-tight);
}

/* Single-value viz: the pole-spark SVG sits in the same envelope as
   the distribution sparks above so locked + unlocked modes share the
   same visual rhythm. Just lets the SVG breathe. */
.dist-editor-viz-point {
  justify-content: center;
}
.dist-editor-viz-point svg { max-width: 100%; }

/* Integer-constraint toggle — same pill-slider size + label rhythm as
   the single-value toggle so the two read as a matched pair.  Sits in
   its own row below the params block; only renders for continuous
   families (controlled in JS). */
.dist-editor-int {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-strong);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.dist-editor-int-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.dist-editor-int-switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 14px;
  background: var(--line-strong);
  border-radius: var(--r-pill);
  transition: background 160ms ease;
  flex-shrink: 0;
}
.dist-editor-int-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: var(--panel);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.20);
  transition: transform 160ms ease;
}
.dist-editor-int.is-on .dist-editor-int-switch {
  background: var(--brand);
}
.dist-editor-int.is-on .dist-editor-int-thumb {
  transform: translateX(18px);
}
.dist-editor-int.is-on .dist-editor-int-label {
  color: var(--brand-strong);
}
.dist-editor-int-input:focus-visible + .dist-editor-int-switch {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.dist-editor-int-label {
  line-height: var(--leading-tight);
}
/* Outcome-count hint shown next to the integer toggle when ON. Surfaces
   the integer slices the user will actually get — Triangular(1, 1.5, 2.3)
   with integer ON yields only 2 outcomes, which is worth flagging
   up-front. */
.dist-editor-int-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: var(--space-1);
}
.dist-editor-int.is-on .dist-editor-int-count {
  color: var(--brand-strong);
}
@media (prefers-reduced-motion: reduce) {
  .dist-editor-int-switch,
  .dist-editor-int-thumb { transition: none; }
}

/* Categorical params — a list of (value, weight, ×) rows + add button.
   The mini-table chrome from .dist-editor-params is dropped via the
   --categorical modifier so each row reads as a stand-alone editable
   line rather than cells of a single table. */
.dist-editor-params--categorical {
  grid-template-columns: 1fr !important;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border-color: var(--line);
}
.dist-editor-cat-header,
.dist-editor-cat-row {
  display: grid;
  grid-template-columns: 1fr minmax(0, 80px) 24px;
  gap: var(--space-2);
  align-items: center;
}
.dist-editor-cat-header {
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-1);
}
.dist-editor-cat-header span {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.dist-editor-cat-row + .dist-editor-cat-row {
  margin-top: var(--space-1);
}
.dist-editor-cat-row input {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--panel);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  width: 100%;
  min-width: 0;
}
.dist-editor-cat-row input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}
.dist-editor-cat-rm {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  border-radius: var(--r-xs);
  cursor: pointer;
}
.dist-editor-cat-rm:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.dist-editor-cat-add {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px dashed var(--brand-border);
  border-radius: var(--r-xs);
  color: var(--brand-strong);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}
.dist-editor-cat-add:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}
@media (prefers-reduced-motion: reduce) {
  .dist-editor-lock-switch,
  .dist-editor-lock-thumb { transition: none; }
}

/* Shape selector: explicit 2-column grid so the label has a guaranteed
   column and can't be overrun by the dropdown's left border (the old flex
   row produced a "Sh|ape" overlap effect under narrow widths). */
.dist-editor-family {
  display: grid;
  grid-template-columns: minmax(50px, max-content) 1fr;
  align-items: center;
  gap: var(--space-2);
}

.dist-editor-family-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-strong);
  white-space: nowrap;
}

.dist-editor-family select {
  width: 100%;
  min-width: 0;
  /* Ellipsis-truncate long family labels at narrow column widths so
     "Triangular — most-likely, flat sides" doesn't cut off mid-word
     and bleed into the dropdown caret. */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/* Tooltip on hover with the full label — the title attr is set in JS
   on every render so users at narrow widths can see the full text. */

/* Low / Most likely / High mini-table — visually contained per driver
   so the three drivers in a stage row read as three separate input
   groups, not one wide strip across the card. The inner grid stays
   3-col; the wrapper carries the panel chrome. */
.dist-editor-params {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: var(--space-2);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.dist-editor-params .dist-editor-field {
  margin: 0;
}
.dist-editor-params .dist-editor-field + .dist-editor-field {
  border-left: 1px solid var(--line);
}
.dist-editor-params .dist-editor-field span {
  display: block;
  padding: 0 var(--space-2) var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.dist-editor-params .dist-editor-field input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-xs);
}
.dist-editor-params .dist-editor-field input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  background: var(--panel);
}

.dist-editor-params .dist-editor-field:only-child {
  grid-column: 1 / -1;
}

.dist-editor-viz {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
.dist-editor-viz > svg { display: block; max-width: 100%; }

.dist-editor-prior {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--line);
}

/* Source row — single line with three slots:
     [chip]  default = <value>   [Use →]
   The default value used to be invisible until the user clicked the
   button; now it's right there in the row.  The Use button is sized
   small + outlined so it doesn't compete with the chip. */
.dist-editor-suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--muted-strong);
}
.dist-editor-prior-default {
  min-width: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Provenance line — the WHY (not enough trial data; no published
   default for this stage; …). Sits below the chip row in a muted
   secondary tone. */
.dist-editor-prior-label {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: var(--leading-relaxed);
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Source-quality chip: three subtle tiers so an industry default and a
   data-grounded fit never look the same, but all read as part of one
   chip family rather than a traffic-light pile. Uses brand-tone +
   neutrals only; no warm amber or green that would compete with the
   cool brand palette.
     q-documented (Industry default)        → muted neutral chip
     q-weak       (thin trial-data fit)     → brand-tinted outline chip
     q-medium / strong (firm data fit)      → solid brand chip */
.dist-editor-prior-quality {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1;
}
/* Small dot inside the chip — color-codes the tier at a glance without
   the chip itself shouting. */
.dist-editor-prior-quality::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
}

.dist-editor-prior-quality.q-documented {
  color: var(--muted-strong);
  background: var(--panel);
  border-color: var(--line-strong);
}

.dist-editor-prior-quality.q-weak {
  color: var(--brand-strong);
  background: var(--panel);
  border-color: var(--brand-border);
}

.dist-editor-prior-quality.q-medium,
.dist-editor-prior-quality.q-strong {
  color: var(--panel);
  background: var(--brand);
  border-color: var(--brand-strong);
}

/* Inline "Use" button — small, outlined, secondary. Lives in the chip
   row, so the user can re-anchor the driver to the default in one click
   without leaving their place. Sized so the row doesn't dominate. */
.dist-editor-apply {
  padding: 2px var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 1px solid var(--brand);
  background: var(--panel);
  color: var(--brand-strong);
  border-radius: var(--r-xs);
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.dist-editor-apply:hover {
  background: var(--brand);
  color: #ffffff;
}

/* Drift indicator: scannable across the three drivers when used inside
   the Setup stage card. Higher visual weight than the muted provenance
   line since this is the diagnostic that drives the next user action. */
.dist-editor-divergence {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.dist-editor-divergence.high { color: var(--accent-strong); }
.dist-editor-divergence.low { color: var(--brand-strong); }

.dist-editor-divergence.high { color: var(--amber); }
.dist-editor-divergence.low { color: var(--blue); }

/* Inline parameter validation — shown right where the user types, in the
   error color, mirroring the backend distribution validation rules. */
.dist-editor-warning {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--red, #b04341);
}

.model-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Doctrine §8 — multi-column cards align across siblings. The
   stage cards each hold 3 KPI cells; placing them as a 2-col grid
   leaves the 3rd cell dangling on a new row, so adjacent rows in
   the same card stack misalign. Use a 3-col grid so every card's
   KPI row sits on one shared baseline. */
.product-kpis,
.stage-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Value-of-Information callout (P2). The "chase this next" prompt at the
   top of the product editor — the active half of the anti-anchoring
   story, paired with the auto-populated values below it. */
.info-value-callout {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--teal-soft);
  border-left: 3px solid var(--teal);
  border-radius: var(--r-sm);
  background: var(--teal-bg);
}
.info-value-callout[hidden] { display: none; }
.ivc-head strong {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
}
.ivc-head small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--muted-strong);
}
.ivc-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.ivc-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px var(--space-2);
  font-size: var(--fs-sm);
}
.ivc-driver { font-weight: 700; color: var(--ink); }
.ivc-value {
  font-weight: 700;
  color: var(--teal-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ivc-next {
  grid-column: 1 / -1;
  color: var(--muted-strong);
  line-height: 1.4;
}

/* Precedent peak-sales sanity band (P2 hardening #4). A defensibility
   flag on implied peak sales, grounded in precedent revenue basis.
   Colors mirror the distribution editor's divergence semantics. */
.peak-sales-benchmark {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.peak-sales-benchmark[hidden] { display: none; }
.peak-sales-benchmark-row {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
}
.peak-sales-benchmark-row.high { color: var(--amber); }
.peak-sales-benchmark-row.low { color: var(--blue); }
.peak-sales-benchmark-row.within { color: var(--muted-strong); }
.peak-sales-benchmark-row em {
  font-weight: 500;
  color: var(--muted);
}
.psb-foot {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.model-kpi {
  display: grid;
  gap: 4px;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-soft);
  padding: 12px 14px;
}

.model-kpi strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.model-kpi span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-model-stages,
.product-model-uncertainty {
  display: grid;
  gap: 12px;
}

.stage-model-card,
.uncertainty-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: 12px 14px;
}

/* Development DAG view — read-only renderer that mounts under the
   Product Model page next to Special Conditions. Same card shell
   (border, panel surface, radius) so the rhythm is preserved. The
   SVG itself styles via currentColor + tokens so theme changes
   propagate. */
.dag-view-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: 12px 14px;
  color: var(--ink);
}
.dag-view-card:empty { display: none; }
.dag-view-head {
  display: grid;
  gap: 4px;
}
.dag-view-sub {
  color: var(--muted);
  line-height: 1.4;
}
.dag-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: 8px 0;
}
.dag-asset-card {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.dag-asset-card:first-of-type {
  border-top: none;
  padding-top: 0;
}
.dag-asset-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted-strong);
}
.dag-asset-indication {
  color: var(--muted);
}
.dag-asset-tag {
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: var(--r-pill, 999px);
  background: var(--line-soft);
  color: var(--muted);
}

/* Constrained-edit affordances on the DAG view: an "+ Stage" button
   on the asset header, and small rename/remove icons on the corner
   of each stage node. Same surface tokens as the existing card so the
   editing surface reads as a quiet extension, not a separate panel. */
.dag-edit-toolbar {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
}
.dag-edit-add {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--r-sm, 4px);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--muted-strong);
  cursor: pointer;
}
.dag-edit-add:hover {
  border-color: var(--accent, #c3423a);
  color: var(--accent, #c3423a);
}
.dag-node-edit-icon {
  font-size: 12px;
  fill: var(--muted);
  cursor: pointer;
  font-family: inherit;
  user-select: none;
}
.dag-node-edit-icon:hover,
.dag-node-edit-icon:focus {
  fill: var(--accent, #c3423a);
  outline: none;
}
.dag-graph-host {
  overflow-x: auto;
  width: 100%;
}
.dag-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 120px;
  color: var(--line-strong);
}
.dag-node {
  cursor: pointer;
  transition: filter 120ms ease;
}
.dag-node:hover, .dag-node:focus { outline: none; filter: brightness(0.96); }
.dag-node:focus .dag-node-rect {
  stroke: var(--accent, #c3423a);
  stroke-width: 2;
}
.dag-node-rect {
  fill: var(--panel);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.dag-node-stage .dag-node-rect { fill: var(--panel-soft); }
.dag-node-gate .dag-node-rect {
  fill: var(--panel);
  stroke-dasharray: 4 3;
}
.dag-node-fork .dag-node-rect,
.dag-node-join .dag-node-rect {
  fill: var(--panel-soft);
  stroke: var(--muted);
}
.dag-node-market .dag-node-rect {
  fill: color-mix(in srgb, var(--accent, #c3423a) 10%, var(--panel));
  stroke: var(--accent, #c3423a);
}
.dag-node-terminate .dag-node-rect {
  fill: var(--line-soft);
  stroke: var(--muted);
}
.dag-node-title {
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink);
  font-family: inherit;
}
.dag-node-metric {
  font-size: 10.5px;
  fill: var(--muted-strong);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.dag-edge {
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.dag-edge-failure {
  stroke: var(--muted);
  stroke-dasharray: 4 3;
}
.dag-edge-exceptional {
  stroke: var(--accent, #c3423a);
  stroke-width: 1.8;
}
.dag-edge-label {
  font-size: 9.5px;
  fill: var(--muted);
  font-family: inherit;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

/* Special Modeling Conditions — the post-launch lever editor.
   Lives next to the market uncertainty card. Uses the same card shell
   (border, panel surface, radius) so the page reads as one rhythm.
   Each lever gets a full DistEditor; the grid breathes to 2 columns
   above ~860px and stacks below. */
.special-conditions-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: 12px 14px;
}
.special-conditions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.special-conditions-sub {
  color: var(--muted);
  line-height: 1.4;
}
.special-conditions-empty {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0;
  padding: 10px 0;
}
.special-conditions-group {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.special-conditions-group:first-of-type {
  border-top: none;
  padding-top: 0;
}
.special-conditions-group-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.special-conditions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.special-condition {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--panel-soft);
  min-width: 0;
}
.special-condition-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.special-condition-title { color: var(--muted-strong); }
.special-condition-hint {
  color: var(--muted);
  line-height: 1.35;
}
.special-condition-remove {
  border: none;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm, 4px);
}
.special-condition-remove:hover {
  color: var(--err, #c43);
  background: var(--err-soft, var(--line-soft));
}
.special-conditions-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}
.special-conditions-picker {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--panel-soft);
  display: grid;
  gap: 10px;
}
.special-conditions-picker[hidden] { display: none; }
.special-conditions-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.special-conditions-picker-group-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-strong);
  margin-bottom: 4px;
}
.special-conditions-picker-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
}
.special-conditions-picker-list .link-button {
  display: grid;
  gap: 2px;
  text-align: left;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm, 4px);
  padding: 8px 10px;
  cursor: pointer;
  color: inherit;
}
.special-conditions-picker-list .link-button:hover {
  border-color: var(--line-strong);
  background: var(--panel-elevated, var(--panel));
}
.special-conditions-picker-list .link-button strong {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.special-conditions-picker-list .link-button span {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.stage-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.distribution-viz {
  display: grid;
  gap: 6px;
}

.distribution-caption {
  display: grid;
  gap: 2px;
}

.distribution-caption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.distribution-caption strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.25;
}

.distribution-track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
}

.distribution-range {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal-soft), var(--blue-soft));
}

.distribution-point {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--teal);
  transform: translateX(-50%);
}

.known-value .distribution-point {
  background: var(--green);
}

.empty-model {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: 500;
  padding: 14px 16px;
  text-align: center;
}

/* ---------- Pills / badges ------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: var(--r-pill);
  padding: 0 10px;
  background: var(--teal-bg);
  color: var(--teal-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pill.neutral {
  background: var(--line-soft);
  color: var(--muted-strong);
}

.pill.warn {
  background: var(--amber-soft);
  color: var(--amber-strong);
}

.pill.error {
  background: var(--red-soft);
  color: var(--accent-strong);
}

.pill.ok {
  background: var(--green-soft);
  color: var(--green);
}

/* ---------- Issue / risk / file lists ------------------------------------- */
.issue-list,
.risk-list,
.file-list,
.bar-stack {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.issue,
.risk,
.file-row {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  background: var(--panel-soft);
  font-size: var(--fs-base);
}

.issue {
  display: grid;
  gap: 4px;
}

.issue strong {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.issue span {
  color: var(--muted);
  line-height: 1.45;
}

.issue.error,
.risk.high {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.issue.warning,
.risk.medium {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.risk.low {
  border-left-color: var(--blue);
}

/* ---------- Metric grid (recommendation) ---------------------------------- */
/* Dashboard headline metric strip. Each <div> is treated as a metric tile
   (see .metric-tile in the component library block at the end of this
   file). Spacing on the §1 token scale; typography per the §7 roles
   (eyebrow / Display-leaning value). */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Density pass round 4: tighter inter-tile and outer gaps; the
     finding strip should read as a horizontal row of related cells,
     not a checkerboard with breathing room around each cell. */
  gap: var(--space-2);
  padding: var(--space-3);
}

.metric-grid div {
  display: grid;
  gap: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-2) var(--space-3);
  background: var(--panel-soft);
}

/* The headline cell (Recommended deal) spans both columns and uses the
   teal accent — subtle, on-token, no hard gradient. */
.metric-grid div:first-child {
  grid-column: 1 / -1;
  background: var(--teal-soft);
  border-color: var(--teal);
}

.metric-grid small {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: var(--leading-tight);
}

.metric-grid strong {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.metric-grid div:first-child strong {
  color: var(--teal-strong);
  overflow-wrap: normal;
  word-break: normal;
}
.metric-grid div:first-child small {
  color: var(--teal-strong);
  opacity: 0.85;
}

.number-cell,
.summary-card strong,
.metric-grid strong {
  white-space: nowrap;
}

/* ---------- Rich metric tooltips ------------------------------------------ */
.psp-feature {
  cursor: help;
}

#psp-tooltip-root {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 60;
}

.psp-tooltip {
  position: absolute;
  display: grid;
  gap: 10px;
  min-width: 280px;
  max-width: 320px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  color: var(--ink);
  pointer-events: none;
  animation: tt-fade-in 120ms ease-out;
}

@keyframes tt-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

.tt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}

.tt-key {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tt-val {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tt-interp {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.tt-interp.tone-good { background: var(--green-soft); color: var(--green); }
.tt-interp.tone-warn { background: var(--amber-soft); color: var(--amber-strong); }
.tt-interp.tone-bad { background: var(--accent-soft); color: var(--accent-strong); }
.tt-interp.tone-neutral { background: var(--panel-soft); color: var(--muted-strong); border: 1px solid var(--line); }

.tt-def {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--muted-strong);
}

.tt-section {
  display: grid;
  gap: 4px;
}

.tt-section-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tt-section-head em {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Histogram */
.tt-hist-svg { width: 100%; height: 56px; }
.tt-hist-bar { fill: var(--teal); fill-opacity: 0.55; }
.tt-hist-marker { stroke: var(--accent); stroke-width: 2; }
.tt-hist-axis {
  fill: var(--muted);
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Mini tornado */
.tt-torn-svg { width: 100%; height: auto; }
.tt-torn-bar.pos { fill: var(--teal); fill-opacity: 0.7; }
.tt-torn-bar.neg { fill: var(--accent); fill-opacity: 0.6; }
.tt-torn-center { stroke: var(--line-strong); stroke-width: 1; }
.tt-torn-label {
  fill: var(--ink-soft);
  font-size: 9px;
  font-weight: 600;
  font-family: var(--font-sans);
}
.tt-torn-value {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Gantt right-click context menu -------------------------------- */
.phase-context-menu {
  position: absolute;
  z-index: 60;
  display: grid;
  min-width: 280px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

.phase-cm-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}

.phase-cm-head small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
}

.phase-cm-head strong {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-top: 2px;
}

.phase-cm-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--ink);
}

.phase-cm-item:hover {
  background: var(--panel-soft);
}

.phase-cm-item.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.phase-cm-item.disabled:hover {
  background: transparent;
}

.phase-cm-item.active {
  background: var(--teal-bg);
}

.phase-cm-item.active:hover {
  background: var(--teal-soft);
}

.phase-cm-tick {
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.phase-cm-text strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
}

.phase-cm-text small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 2px;
}

/* ---------- Calibrate panel ----------------------------------------------- */
.calibrate-body {
  display: grid;
  gap: 18px;
  padding: 14px 18px 18px;
}

.cal-section {
  display: grid;
  gap: 8px;
}

.cal-section small.eyebrow {
  display: block;
}

.cal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.cal-table thead th {
  background: var(--panel-soft);
  color: var(--muted-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.cal-table .cal-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cal-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.cal-row.cal-good { background: var(--green-soft); }
.cal-row.cal-warn { background: var(--amber-soft); }
.cal-row.cal-bad  { background: var(--accent-soft); }

.cal-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cal-name strong {
  font-weight: 700;
  color: var(--ink);
}

.cal-verdict-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cal-verdict-pill.cal-good { background: var(--green); color: #ffffff; }
.cal-verdict-pill.cal-warn { background: var(--amber); color: #ffffff; }
.cal-verdict-pill.cal-bad  { background: var(--accent); color: #ffffff; }

.cal-headline {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.4;
  max-width: 480px;
}

.cal-sens-cell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: table-cell;
}

.cal-gap {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.cal-gap-source {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.cal-gap-none {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.cal-disclaimer {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--muted);
  background: var(--panel-soft);
  color: var(--muted-strong);
  font-size: var(--fs-xs);
  font-style: italic;
  line-height: 1.5;
}

/* ---------- Cash-flow timeline -------------------------------------------- */
.cash-flow-chart {
  padding: 16px 18px 18px;
}

.cash-flow-svg {
  display: block;
  width: 100%;
  height: 320px;
}

/* Density-graduated fan: tail bands faint, median band strong, so the
   eye reads where probability concentrates rather than a flat swath.
   Kept as nested fills (not a single envelope) — overlap deepens the
   colour toward the centre, reinforcing the gradient. */
.cf-cum-band {
  fill: var(--teal);
  stroke: none;
}
.cf-cum-band-90 { fill-opacity: 0.08; }   /* P05–P95, ~90% of outcomes */
.cf-cum-band-80 { fill-opacity: 0.12; }   /* P10–P90, ~80%             */
.cf-cum-band-50 { fill-opacity: 0.20; }   /* P25–P75, interquartile    */

/* Back-compat: any payload that still renders the old single envelope. */
.cf-cum-envelope {
  fill: var(--teal);
  fill-opacity: 0.14;
  stroke: none;
}

.cf-cum-mean {
  fill: none;
  stroke: var(--teal-strong);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Median (P50) trajectory — dashed to distinguish from the solid mean. */
.cf-cum-median {
  fill: none;
  stroke: var(--teal-strong);
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
  stroke-opacity: 0.7;
  stroke-linejoin: round;
}

.cf-pin-line {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-dasharray: 6 3;
  stroke-linejoin: round;
}

.cf-pin-legend {
  fill: var(--amber);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: var(--font-sans);
}

.cf-out-bar {
  fill: var(--accent);
  fill-opacity: 0.7;
}

.cf-out-whisker {
  stroke: var(--accent-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.cf-in-bar {
  fill: var(--green);
  fill-opacity: 0.65;
}

.cf-in-whisker {
  stroke: var(--green);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.cf-zero {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.cf-axis {
  stroke: var(--ink);
  stroke-width: 1;
}

.cf-grid {
  stroke: var(--line-soft);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.cf-axis-label {
  fill: var(--muted);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cf-axis-label-out {
  fill: var(--accent-strong);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cf-axis-label-in {
  fill: var(--green);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cf-section-title {
  fill: var(--teal-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cf-section-title-out {
  fill: var(--accent-strong);
}

.cf-section-title-flow {
  fill: var(--muted-strong);
}

.cf-breakeven-dot {
  fill: var(--green);
  stroke: #ffffff;
  stroke-width: 2;
}

.cf-breakeven-label {
  fill: var(--green);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cf-peak-dot {
  fill: var(--accent);
  stroke: #ffffff;
  stroke-width: 2;
}

.cf-peak-label {
  fill: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Tornado chart -------------------------------------------------- */
.tornado-chart {
  padding: 14px 18px 18px;
}

.tornado-svg {
  display: block;
  width: 100%;
  height: auto;
}

.tornado-center {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.tornado-bar.pos {
  fill: var(--teal);
  fill-opacity: 0.7;
}

.tornado-bar.neg {
  fill: var(--accent);
  fill-opacity: 0.65;
}

.tornado-bar:hover {
  fill-opacity: 1;
}

.tornado-label {
  fill: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
}

.tornado-value {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.tornado-axis {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Distribution / stat-bar primitive ----------------------------- */
.stat-bar {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(80px, 1fr) auto;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.stat-bar-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: var(--fs-base);
}

.stat-bar-value.pos { color: var(--ink); }
.stat-bar-value.neg { color: var(--accent-strong); }

.stat-bar-svg {
  width: 100%;
  height: 14px;
}

.stat-range { fill: var(--teal-soft); }
.stat-p50 { stroke: var(--teal-strong); stroke-width: 1.5; }
.stat-mean {
  fill: var(--accent);
  stroke: #ffffff;
  stroke-width: 1;
}
.stat-zero {
  stroke: var(--muted);
  stroke-dasharray: 2 2;
  stroke-width: 1;
}

.stat-range-label {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

/* In Recommendation KPI cards the stat-bar can stack vertically */
.metric-grid .stat-bar {
  grid-template-columns: minmax(0, auto) minmax(80px, 1fr);
  margin-top: 6px;
}
.metric-grid .stat-bar .stat-range-label {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.metric-grid .stat-bar-value {
  font-size: var(--fs-xl);
}

/* Asset-name cell with "in pin" affordance */
.asset-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.in-pin-pill {
  background: var(--teal-bg);
  color: var(--teal-strong);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
}

/* Pinned-portfolio row treatment */
tbody tr.in-pinned-portfolio {
  background: linear-gradient(90deg, var(--teal-bg) 0, transparent 60%);
}

tbody tr.in-pinned-portfolio:hover {
  background: linear-gradient(90deg, var(--teal-bg) 0, var(--panel-soft) 60%);
}

.timeline-row.in-pinned-portfolio .project-cell,
.timeline-row.in-pinned-portfolio .area-cell,
.timeline-row.in-pinned-portfolio .npv-cell,
.timeline-row.in-pinned-portfolio .timeline-cell {
  background: var(--teal-bg);
}

.timeline-row.in-pinned-portfolio .timeline-lane {
  background:
    repeating-linear-gradient(
      90deg,
      var(--teal-bg) 0,
      var(--teal-bg) calc(100% / var(--year-count) - 1px),
      rgba(31, 138, 131, 0.16) calc(100% / var(--year-count) - 1px),
      rgba(31, 138, 131, 0.16) calc(100% / var(--year-count))
    );
}

.project-cell .pin-flag {
  display: inline-block;
  margin-left: 6px;
  color: var(--teal);
  font-style: normal;
  font-size: 11px;
  vertical-align: middle;
}

/* ---- Must-include / must-exclude visible state -------------------------- */

/* Inline badge used in Gantt project cells and Asset Outcomes name cells. */
.constraint-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 6px 1px 4px;
  border-radius: var(--r-pill);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.constraint-flag svg {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
}

/* Inside narrow Asset Outcomes cells we hide the text label and rely on
   the icon — the row's left-border colour band carries the redundant cue. */
.asset-name-cell .constraint-flag span {
  display: none;
}

.asset-name-cell .constraint-flag {
  padding: 1px 4px;
  margin-left: 4px;
}

.constraint-flag.is-must-include {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid var(--green);
}

.constraint-flag.is-must-exclude {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent);
}

/* Project cell + table row treatments — left-edge colour band so the
   constraint state reads from a glance even when the badge is offscreen. */
.project-cell.is-must-include {
  box-shadow: inset 4px 0 0 var(--green);
}

.project-cell.is-must-include:hover {
  box-shadow: inset 4px 0 0 var(--green), 0 0 0 1px var(--green-soft) inset;
}

.project-cell.is-must-exclude {
  box-shadow: inset 4px 0 0 var(--accent);
  opacity: 0.75;
}

.project-cell.is-must-exclude:hover {
  box-shadow: inset 4px 0 0 var(--accent);
  opacity: 0.95;
}

tbody tr.is-must-include td:first-child {
  box-shadow: inset 4px 0 0 var(--green);
}

tbody tr.is-must-exclude td:first-child {
  box-shadow: inset 4px 0 0 var(--accent);
}

tbody tr.is-must-exclude {
  opacity: 0.75;
}

tbody tr.is-must-exclude:hover {
  opacity: 0.95;
}

/* ---------- Tables --------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-base);
}

thead tr {
  background: var(--navy);
}

th {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--navy);
  border-bottom: 0;
}

th,
td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

td {
  border-bottom: 1px solid var(--line-soft);
}

tbody tr {
  transition: background 100ms ease;
}

tbody tr:hover {
  background: var(--panel-soft);
}

tbody tr:last-child td {
  border-bottom: 0;
}

td:last-child {
  color: var(--muted-strong);
}

/* ---------- Bars (portfolio frontier) ------------------------------------- */
.bar {
  display: grid;
  gap: var(--space-1);
}

.bar-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--line-soft);
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

.file-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.file-row span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---------- Project drawer & sales modal ---------------------------------- */
.project-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(480px, 100vw);
  height: 100vh;
  border-left: 1px solid var(--line);
  background: var(--panel);
  box-shadow: -18px 0 38px rgba(15, 26, 46, 0.18);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.project-drawer.open {
  transform: translateX(0);
}

.drawer-header,
.drawer-actions,
.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}

.drawer-header h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.drawer-header small {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.drawer-actions,
.modal-actions {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
  background: var(--panel-soft);
}

.drawer-body {
  overflow: auto;
  padding: 18px;
}

.drawer-body label,
.sales-modal-body label {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.drawer-body input,
.sales-modal-body input {
  min-height: 38px;
  width: 100%;
  font-size: var(--fs-base);
  text-transform: none;
  letter-spacing: 0;
}

.drawer-section {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.stage-editor {
  display: grid;
  grid-template-columns: 1.2fr 0.65fr 0.65fr 0.9fr auto;
  gap: 8px;
  align-items: end;
  border-top: 1px solid var(--line-soft);
  padding: 12px 0;
}

.distribution-row {
  display: grid;
  grid-column: 1 / -2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.distribution-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-editor.focused {
  box-shadow: inset 4px 0 0 var(--teal);
  padding-left: 10px;
  background: var(--teal-bg);
  border-radius: var(--r-sm);
}

.stage-editor.empty-stage {
  display: block;
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: 500;
}

.icon-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  min-height: 32px;
  place-items: center;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  border-radius: var(--r-sm);
  color: var(--muted);
}

.icon-button:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(15, 26, 46, 0.55);
  backdrop-filter: blur(2px);
  padding: 24px;
}

.modal-backdrop[hidden] {
  display: none;
}

/* Open Portfolio picker */
.open-portfolio-modal {
  width: min(520px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

.open-portfolio-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 20px 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.open-portfolio-loading {
  color: var(--muted);
  font-size: 13px;
  padding: 8px 0;
}

.open-portfolio-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-soft, var(--panel-soft));
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.open-portfolio-item:hover,
.open-portfolio-item:focus-visible {
  border-color: var(--teal, #2563a8);
  background: var(--panel);
}

.open-portfolio-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #0f172a);
}

.open-portfolio-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal, #2563a8);
  background: rgba(37, 99, 168, 0.12);
}

.open-portfolio-desc {
  font-size: 12px;
  color: var(--muted, var(--muted));
}

.sales-modal {
  width: min(900px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

.sales-modal-body {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.modal-toggle-row {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  border-bottom: 1px solid var(--line-soft);
}

.toggle {
  position: relative;
  display: inline-flex !important;
  width: 48px;
  height: 26px;
  margin: 0 !important;
}

.toggle input {
  position: absolute;
  opacity: 0;
}

.toggle span {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background 140ms ease;
}

.toggle span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  content: "";
  transition: transform 140ms ease;
  box-shadow: var(--shadow-sm);
}

.toggle input:checked + span {
  background: var(--teal);
}

.toggle input:checked + span::after {
  transform: translateX(22px);
}

/* ---------- Floating AI affordance ---------------------------------------- */
.ai-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--teal), var(--teal-strong));
  color: #ffffff;
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: 0 10px 24px rgba(15, 26, 46, 0.18);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
  opacity: 0.7;
}

.ai-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 26, 46, 0.22);
  opacity: 1.0;
}

.ai-fab .ai-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1180px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .rail {
    position: sticky;
    top: 0;
    height: auto;
    z-index: 2;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    padding: 12px 14px;
    gap: 14px;
  }

  .brand {
    border-bottom: 0;
    padding: 0;
  }

  .nav-list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
  }

  .nav-list a.active::before {
    display: none;
  }

  .status-strip {
    margin-top: 0;
    margin-left: auto;
    border-top: 0;
  }

  .layout-grid,
  .data-grid,
  .workflow-strip {
    grid-template-columns: 1fr;
  }

  .workflow-picker,
  .workflow-cards,
  .summary-graphs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stage-editor,
  .sales-modal-body,
  .product-edit-grid,
  .product-kpis,
  .stage-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .workspace {
    padding: 16px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .actions {
    justify-content: stretch;
  }

  .actions > * {
    flex: 1 1 140px;
  }

  .metric-grid,
  .workflow-cards,
  .workflow-picker {
    grid-template-columns: 1fr;
  }

  .summary-graphs,
  .stage-editor,
  .sales-modal-body,
  .product-edit-grid,
  .product-kpis,
  .stage-metrics,
  .distribution-row {
    grid-template-columns: 1fr;
  }

  .ai-fab {
    right: 14px;
    bottom: 14px;
  }
}

/* ============================ Stage Valuation panel ====================== */

.stage-valuation-panel {
  margin-top: 24px;
}

.stage-valuation-panel .panel-lede {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 18px;
  max-width: 980px;
}

.stage-valuation-panel .panel-footnote {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  margin: 20px 0 0;
  max-width: 980px;
}

.stage-valuation-body {
  display: grid;
  gap: 16px;
}

.stage-valuation-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--brand-bg);
}

.stage-card-header {
  margin-bottom: 12px;
}

.stage-card-header h3 {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.stage-card-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}

.stage-card-table-wrap {
  overflow-x: auto;
}

.stage-card-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-valuation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.stage-valuation-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 6px 10px;
}

.stage-valuation-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 6px 10px;
  vertical-align: middle;
}

.stage-valuation-table tr:last-child td {
  border-bottom: none;
}

.stage-valuation-table .stage-gate-cell {
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

.stage-valuation-table .spread-prob {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.stage-curve-chart {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stage-curve-svg {
  width: 100%;
  height: auto;
  max-height: 160px;
}

.stage-curve-keep {
  stroke: var(--brand);
  stroke-width: 2;
}

.stage-curve-keep-marker {
  fill: var(--brand);
  stroke: #fff;
  stroke-width: 1;
}

.stage-curve-sell {
  stroke: var(--curve-sell);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.stage-curve-sell-marker {
  fill: var(--curve-sell);
  stroke: #fff;
  stroke-width: 1;
}

.stage-curve-spread-fill {
  fill: rgba(15, 118, 110, 0.10);
}

.stage-curve-zero {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.stage-curve-axis {
  fill: var(--muted);
  font-size: 10px;
}

.stage-curve-empty {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

.stage-curve-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted-strong);
  margin-top: 2px;
}

.stage-curve-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stage-curve-legend .legend-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

.stage-curve-legend .legend-swatch.keep {
  background: var(--brand);
}

.stage-curve-legend .legend-swatch.sell {
  background: repeating-linear-gradient(
    to right,
    var(--curve-sell) 0,
    var(--curve-sell) 3px,
    transparent 3px,
    transparent 6px
  );
  height: 3px;
}

.stage-curve-legend .legend-swatch.spread {
  background: rgba(15, 118, 110, 0.20);
  height: 8px;
  border-radius: 2px;
}

@media (max-width: 960px) {
  .stage-card-layout {
    grid-template-columns: 1fr;
  }
}

.stage-valuation-pills {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stage-valuation-controls {
  margin: -10px 0 16px;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.segmented .segment {
  background: #fff;
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-strong);
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: background 0.12s, color 0.12s;
}

.segmented .segment:last-child {
  border-right: none;
}

.segmented .segment:hover:not(:disabled) {
  background: var(--line-soft);
}

.segmented .segment.active {
  background: var(--brand);
  color: #fff;
}

.segmented .segment:disabled {
  color: var(--line-strong);
  cursor: not-allowed;
}

.stage-card-view-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--amber-tint);
  color: var(--amber-strong);
  border-radius: 10px;
  vertical-align: middle;
}

/* Myopic policy row */
.stage-policy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}

.stage-policy-label small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  margin-bottom: 6px;
}

.stage-policy-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.policy-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1) 10px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.15;
  min-width: 80px;
}

.policy-pill small {
  font-size: 10px;
  font-style: normal;
  color: inherit;
  opacity: 0.80;
  margin: 0;
}

.policy-pill strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.policy-pill.continue {
  background: var(--green-soft);
  color: var(--green-strong);
}

.policy-pill.sell {
  background: var(--brand-soft);
  color: var(--blue-strong);
}

.policy-pill.abandon {
  background: var(--red-tint);
  color: var(--red-strong);
}

.policy-arrow {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.stage-policy-metrics {
  display: flex;
  gap: 18px;
  align-items: flex-end;
}

.policy-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 110px;
}

.policy-metric small {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.policy-metric strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.policy-metric.policy-lift-pos strong {
  color: var(--green-strong);
}

.policy-metric.policy-lift-neg strong {
  color: var(--red-strong);
}

@media (max-width: 960px) {
  .stage-policy-row {
    grid-template-columns: 1fr;
  }
}

/* Optimizer policy trail in the candidate detail card */
.opt-policy-trail {
  margin: 18px 0;
  padding: 12px 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.opt-policy-trail .eyebrow {
  color: var(--muted-strong);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.opt-policy-trail .opt-policy-empty {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.5;
}

.opt-policy-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.opt-policy-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.2;
}

.opt-policy-pill small {
  font-size: 10px;
  opacity: 0.80;
  margin-bottom: 2px;
}

.opt-policy-pill strong {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.opt-policy-pill.continue {
  background: var(--green-soft);
  color: var(--green-strong);
}

.opt-policy-pill.sell {
  background: var(--brand-soft);
  color: var(--blue-strong);
}

.opt-policy-pill.abandon {
  background: var(--red-tint);
  color: var(--red-strong);
}

.opt-policy-note {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  line-height: 1.5;
  margin: 6px 0 0;
}

/* Bargaining panel */
.bargaining-panel {
  margin-top: 24px;
}

.bargaining-panel .panel-lede {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 18px;
  max-width: 1100px;
}

.bargaining-panel .panel-footnote {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  margin: 18px 0 0;
  max-width: 1100px;
}

.bargaining-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.bargaining-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink);
}

.bargaining-legend-item .legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.bargaining-legend-item small {
  color: var(--muted);
  font-size: 11px;
}

.bargaining-body {
  display: grid;
  gap: 16px;
}

.bargaining-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--brand-bg);
}

.bargaining-card-header h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--ink);
}

.bargaining-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.bargaining-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 6px 10px;
}

.bargaining-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 10px;
  vertical-align: middle;
}

.bargaining-table tr:last-child td {
  border-bottom: none;
}

.bargaining-gate-cell {
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

.bargaining-table .number-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bargaining-table .number-cell small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 1px;
}

.bargaining-table .number-cell small.pos {
  color: var(--green-strong);
}

.bargaining-table .number-cell small.neg {
  color: var(--red-strong);
}

.bargaining-bracket {
  width: 260px;
}

.bracket-svg {
  width: 100%;
  height: 32px;
  display: block;
}

.bracket-wta {
  stroke: var(--red-strong);
  stroke-width: 2;
}

.bracket-zero {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.bracket-surplus {
  fill: rgba(22, 101, 52, 0.12);
}

.structure-cell {
  vertical-align: middle;
  min-width: 220px;
}

.structure-cell .structure-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.structure-cell small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.nash-cell {
  vertical-align: middle;
  min-width: 220px;
}

.nash-sparkline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nash-sparkline-svg {
  width: 200px;
  height: 36px;
  display: block;
}

.nash-wta {
  stroke: var(--red-strong);
  stroke-width: 2;
}

.nash-wtp {
  stroke: var(--green-strong);
  stroke-width: 2;
}

.nash-span {
  fill: rgba(22, 101, 52, 0.12);
}

.nash-alpha {
  fill: var(--brand);
  stroke: #fff;
  stroke-width: 1;
}

.nash-alpha.alpha-0 {
  fill: var(--green-strong);  /* seller-takes-all */
}

.nash-alpha.alpha-100 {
  fill: var(--red-strong);  /* buyer-takes-all */
}

.nash-alpha.alpha-50 {
  fill: var(--brand);  /* Nash midpoint */
  stroke: #fff;
  stroke-width: 2;
}

.nash-caption {
  font-size: 11px;
  color: var(--muted-strong);
}

/* Portfolio Football Field — top-of-Dashboard lead panel */
.portfolio-football-panel {
  margin-top: 24px;
}

.portfolio-football-panel .panel-lede {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 18px;
  max-width: 1100px;
}

.portfolio-football-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pff-svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

.pff-row-label {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.pff-axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.pff-axis-label {
  fill: var(--muted);
  font-size: 11px;
}

.pff-zero {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.pff-dcf-line {
  stroke: var(--blue-strong);
  stroke-width: 2;
}

.pff-dcf-dot {
  fill: var(--blue-strong);
  stroke: #fff;
  stroke-width: 1.5;
}

.pff-pre-outer {
  fill: rgba(20, 83, 45, 0.18);
}

.pff-pre-inner {
  fill: rgba(20, 83, 45, 0.45);
}

.pff-tc-outer {
  fill: rgba(120, 53, 15, 0.18);
}

.pff-tc-inner {
  fill: rgba(120, 53, 15, 0.45);
}

.pff-median-tick {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.pff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
  color: var(--muted-strong);
}

.pff-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pff-legend-item .legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.pff-legend-item .legend-bar {
  display: inline-block;
  width: 18px;
  height: 6px;
  border-radius: 2px;
}

/* Asset Decision Briefs panel */
.asset-briefs-panel {
  margin-top: 24px;
}

.brief-export-btn {
  margin-left: auto;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  color: var(--blue-strong);
  border: 1px solid var(--indigo-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.brief-export-btn:hover:not(:disabled) {
  background: var(--indigo-soft);
  border-color: var(--indigo-strong);
}

.brief-export-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scenario-name input on the case action bar */
.scenario-name-input {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  min-width: 230px;
}

.scenario-name-input::placeholder {
  color: var(--muted);
  font-style: italic;
}

.scenario-name-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Scenario picker on the comparison panel */
.run-scenario-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--line-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 12px;
}

.run-scenario-picker label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--muted-strong);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.run-scenario-picker select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  min-width: 220px;
  text-transform: none;
  letter-spacing: 0;
}

.run-scenario-picker button {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto;
}

.run-scenario-picker button:hover {
  background: var(--brand-strong);
}

.asset-briefs-panel .panel-lede {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 18px;
  max-width: 980px;
}

.asset-briefs-body {
  display: grid;
  gap: 14px;
}

.asset-brief-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--brand-bg);
}

.asset-brief-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.asset-brief-header h3 {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}

.asset-brief-stage {
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
}

.asset-brief-narrative {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 14px;
}

.asset-brief-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.asset-brief-kpi {
  flex: 1 1 130px;
  min-width: 130px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
/* Tile variant with an inline extra (sparkline, mini-tornado) below
   the label + value. Widens the floor so the sparkline has room. */
.asset-brief-kpi--has-extra {
  flex-basis: 160px;
  min-width: 160px;
}
.asset-brief-kpi-extra {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Auction-surplus sparkline (Round-4 IC-tile pass). Renders inside the
   Auction-price KPI tile, showing the seller's WTA distribution (P05
   to P95 with an IQR core) and an auction-price marker positioned
   within that range. Tokens-only — re-tints under prefers-color-scheme:
   dark via the existing var() chain. */
.auc-surplus-svg {
  width: 100%;
  height: 20px;
  display: block;
}
.auc-wta-outer { fill: var(--brand-soft); }
.auc-wta-core  { fill: var(--brand-bg); }
.auc-wta-median { stroke: var(--ink-soft); stroke-width: 2; }
.auc-price-dot { fill: var(--brand); stroke: var(--bg); stroke-width: 1.5; }
.auc-surplus-caption {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}

/* Calibration breadcrumb — segmented horizontal bar showing the
   verdict mix of historical calibrations (match / close / directional
   / miss). Sits inside the Model-track-record KPI tile. */
.calib-wrap { display: flex; flex-direction: column; gap: 2px; }
.calib-strip {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--line-soft);
}
.calib-seg { display: block; height: 100%; }
.calib-seg--match { background: var(--green); }
.calib-seg--close { background: var(--brand); }
.calib-seg--directional { background: var(--amber); }
.calib-seg--rest { background: var(--line); }
.calib-caption {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}

/* Peak market share sparkline — a thin 0..100% horizontal axis with
   a low/high band and a point dot, rendered inside the peak-share
   KPI tile. Reuses the same brand-tinted band convention as the
   auction-surplus sparkline. */
.peak-share-svg {
  width: 100%;
  height: 20px;
  display: block;
}
.peak-share-axis { stroke: var(--line); stroke-width: 1; }
.peak-share-band { fill: var(--brand-soft); }
.peak-share-dot { fill: var(--brand); stroke: var(--bg); stroke-width: 1.5; }
.peak-share-caption {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}

/* Sensitivity mini-tornado: top per-asset drivers ranked by share
   of output variance. Label left, bar middle, % right. */
.sens-tornado-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.sens-tornado-row {
  display: grid;
  grid-template-columns: 1fr 80px 24px;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1.2;
}
.sens-tornado-label {
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sens-tornado-bar {
  height: 6px;
  background: var(--brand-soft);
  border-radius: 2px;
  display: block;
}
.sens-tornado-pct {
  color: var(--muted);
  text-align: right;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}

/* Coalition-lift sparkline: three markers (solo A, solo B, joint)
   with a synergy span between the top solo and the joint position. */
.coal-svg {
  width: 100%;
  height: 20px;
  display: block;
}
.coal-synergy-span { fill: var(--brand-soft); }
.coal-solo-dot { fill: var(--ink-soft); stroke: var(--bg); stroke-width: 1; }
.coal-solo-a   { fill: var(--ink-soft); }
.coal-solo-b   { fill: var(--muted); }
.coal-joint-dot { fill: var(--brand); stroke: var(--bg); stroke-width: 1.5; }
.coal-caption {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}

.asset-brief-kpi small {
  /* Density pass round 4: bumped label from 10px to 11px tracked, and
     raised value from 13px/600 to 16px/700. Same tight padding. */
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 2px;
  line-height: 1.2;
}

.asset-brief-kpi strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.asset-brief-kpi.kpi-pos strong {
  color: var(--green-strong);
}

.asset-brief-kpi.kpi-neg strong {
  color: var(--red-strong);
}

.asset-brief-kpi.kpi-pol-sell strong {
  color: var(--blue-strong);
}

.asset-brief-kpi.kpi-pol-abandon strong {
  color: var(--red-strong);
}

/* Three-lens football field */
.asset-brief-football-field {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}

.ff-header {
  margin-bottom: 8px;
}

.ff-header strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: 2px;
}

.ff-header small {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

.ff-svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

.ff-row-label {
  fill: var(--muted-strong);
  font-size: 11px;
  font-weight: 500;
}

.ff-value-label {
  fill: var(--ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ff-axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.ff-axis-label {
  fill: var(--muted);
  font-size: 10px;
}

.ff-zero {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.ff-dcf-line {
  stroke: var(--blue-strong);
  stroke-width: 2;
}

.ff-dcf-dot {
  fill: var(--blue-strong);
  stroke: #fff;
  stroke-width: 1.5;
}

.ff-bar-outer.ff-precedents {
  fill: rgba(20, 83, 45, 0.18);  /* light green */
}

.ff-bar-inner.ff-precedents {
  fill: rgba(20, 83, 45, 0.45);  /* darker green */
}

.ff-bar-outer.ff-trading {
  fill: rgba(120, 53, 15, 0.18);  /* light amber */
}

.ff-bar-inner.ff-trading {
  fill: rgba(120, 53, 15, 0.45);  /* darker amber */
}

/* DCF lens band — navy register matches the .ff-dcf-dot. Outer
   P05–P95 is faint; the interquartile core (P25–P75) is darker so
   the dense central mass is visually distinct from the long tail.
   The mean dot anchored inside reads as one outcome inside its own
   Monte Carlo distribution. */
.ff-bar-outer.ff-dcf-band {
  fill: rgba(30, 58, 138, 0.18);
}

.ff-bar-inner.ff-dcf-band-core {
  fill: rgba(30, 58, 138, 0.45);
}

.ff-median-tick {
  stroke: var(--ink);
  stroke-width: 2;
}

/* Run Comparison panel */
.run-comparison-panel {
  margin-top: 24px;
}

.run-comparison-panel .panel-lede {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.55;
  margin: 4px 0 18px;
  max-width: 980px;
}

.run-compare-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 14px;
}

.run-compare-side {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.run-compare-side small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.run-compare-side strong {
  font-size: 13px;
  color: var(--ink);
}

.run-compare-arrow {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  padding: 0 8px;
}

.run-compare-headline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.run-compare-tile {
  /* Density pass round 4: tighter padding/gap; was 10px 12px / 4px. */
  flex: 1 1 160px;
  min-width: 140px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.run-compare-tile small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  line-height: 1.2;
}

.run-compare-tile strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.run-compare-tile .delta-text {
  font-size: 11px;
  display: flex;
  gap: 4px;
  align-items: baseline;
  flex-wrap: wrap;
}

.run-compare-tile .delta-text small {
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.run-compare-tile.delta-pos {
  border-color: var(--green-tint);
  background: var(--green-soft);
}

.run-compare-tile.delta-pos .delta-text {
  color: var(--green-strong);
}

.run-compare-tile.delta-neg {
  border-color: var(--red-tint);
  background: var(--red-soft);
}

.run-compare-tile.delta-neg .delta-text {
  color: var(--red-strong);
}

.run-compare-tile.delta-zero .delta-text {
  color: var(--muted);
}

.run-compare-asset-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--brand-bg);
  margin-bottom: 10px;
}

.run-compare-asset-card h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink);
}

.run-compare-asset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.run-compare-cat-changes {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-strong);
  font-size: 12px;
  color: var(--muted-strong);
}

.run-compare-roster {
  padding: 10px 12px;
  background: var(--panel-soft);
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted-strong);
}

.run-compare-roster small {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

.roster-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 4px;
  font-size: 11px;
}

.roster-pill.added {
  background: var(--green-soft);
  color: var(--green-strong);
}

.roster-pill.removed {
  background: var(--red-tint);
  color: var(--red-strong);
}

/* Pass 12 — Quick Parameters panel (now: Run-time overrides on the
   Assumption audit page). Both selectors share the same layout. */
.quick-params-panel .panel-header,
.runtime-overrides-panel .panel-header {
  align-items: center;
  padding: 12px 16px;
}
.quick-params-panel .panel-header h2,
.runtime-overrides-panel .panel-header h2 {
  margin-right: auto;
}
.quick-params-panel .panel-lede,
.runtime-overrides-panel .panel-lede {
  padding: 0 16px;
  margin-top: 4px;
}

/* Run-time overrides — sub-grouped Tax / Discount rate / Deal structure */
.runtime-overrides-panel {
  margin-bottom: 18px;
}
.runtime-overrides-group {
  border-top: 1px solid var(--line-soft);
}
.runtime-overrides-group:first-of-type {
  border-top: none;
}
.ro-group-title {
  margin: 0;
  padding: 12px 16px 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-strong);
}
.quick-params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 10px;
  padding: 4px 16px 16px;
}
.qp-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 12px;
}
.qp-field > small:first-child {
  color: var(--ink);
  font-weight: 600;
}
.qp-field input,
.qp-field select {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}
.qp-field input::placeholder {
  color: var(--muted);
  font-style: italic;
}
.qp-field input:focus,
.qp-field select:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}
.qp-field .qp-hint {
  color: var(--muted);
  font-size: 11px;
}
#quick-params-reset {
  font-size: 12px;
  padding: 4px 10px;
}

/* Phase A.2 — Football-field provenance drawer */
.ff-provenance {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ff-provenance-block {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
/* Link-coverage signal in the provenance head: amber when fewer than
   half the applied comparables carry a verifiable source link. */
.ff-linked-ok { color: var(--green-strong); }
.ff-linked-low { color: var(--amber-strong); font-weight: 700; }

.ff-provenance-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: left;
}
.ff-provenance-toggle:hover {
  background: var(--line-soft);
}
.ff-provenance-toggle strong {
  color: var(--ink);
  margin-right: 8px;
}
.ff-caret {
  margin-left: 8px;
  transition: transform 0.15s ease;
}
.ff-provenance-toggle.open .ff-caret {
  transform: rotate(180deg);
}
.ff-provenance-detail {
  padding: 8px 12px 12px;
  background: #fff;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}
.ff-provenance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.ff-provenance-table th {
  text-align: left;
  font-weight: 600;
  padding: 4px 8px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.ff-provenance-table td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
}
.ff-provenance-table tr:last-child td {
  border-bottom: none;
}

/* Round-4 IC-ready provenance drawer: card-style render of each
   applied comparable, with a second "Filtered out" group for the
   indication-matched comps the stage filter rejected. Replaces the
   flat HTML table — each card surfaces the deal name, multiple,
   indication, deal type, source-link icons (↗ / 📄), confidence +
   refresh pills, and source_date in the same density as the round-4
   metric-tile pass. Reflows on narrow widths via auto-fit minmax grid. */
.ff-prov-group-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-strong, var(--muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 4px 0 6px;
}
.ff-prov-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.ff-prov-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  min-width: 0;
}
.ff-prov-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.ff-prov-card-name {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-prov-card-mult {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-strong, var(--brand));
  white-space: nowrap;
}
.ff-prov-card-meta {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.ff-prov-card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.ff-prov-card-date {
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
}
.ff-prov-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--line-soft);
  color: var(--ink-soft);
  text-transform: lowercase;
  border: 1px solid var(--line);
}
.ff-prov-pill--conf-high {
  background: var(--green-soft, #e3f3eb);
  color: var(--green-strong, #166534);
  border-color: var(--green-line, #a7f3d0);
}
.ff-prov-pill--conf-medium {
  background: var(--amber-soft, #fdf1da);
  color: var(--amber-strong, #92400e);
  border-color: var(--amber-line, #fef3c7);
}
.ff-prov-pill--conf-low {
  background: var(--red-soft, #fce6e5);
  color: var(--red-strong, #991b1b);
  border-color: var(--red-line, #fee2e2);
}
.ff-prov-filtered {
  margin-top: 6px;
  border-top: 1px dashed var(--line);
  padding-top: 6px;
}
.ff-prov-filtered-summary {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}
.ff-prov-filtered-summary::before {
  content: "▸ ";
  color: var(--muted);
}
.ff-prov-filtered[open] > .ff-prov-filtered-summary::before {
  content: "▾ ";
}
.ff-prov-filter-reason {
  font-size: 10px;
  font-style: italic;
  color: var(--muted);
  margin-top: 2px;
}

/* Round-7 per-comparable weight slider — sits inside each provenance
   card. Initial slider position = similarity-derived applicability;
   moving it unlocks the reason input + Save button. Visually subtle:
   thin track, brand-accented thumb, monospaced percentage readout. */
.ff-prov-weight {
  margin-top: var(--space-2);
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-2);
}
.ff-prov-weight-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ff-prov-weight-label { color: var(--muted); font-size: 10px; }
.ff-prov-weight-pct {
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ff-prov-weight-slider {
  width: 100%;
  accent-color: var(--brand);
  height: 18px;
  cursor: pointer;
}
.ff-prov-weight-reason {
  font-size: 11px;
  padding: 3px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
}
.ff-prov-weight-reason--error {
  border-color: var(--red);
  outline: 1px solid var(--red);
}
.ff-prov-weight-save {
  font-size: 11px;
  padding: 3px var(--space-3);
  border: 1px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-strong);
  cursor: pointer;
  align-self: flex-start;
}
.ff-prov-weight-save:hover { background: var(--brand-bg); }
.ff-prov-weight-save:disabled { opacity: 0.6; cursor: wait; }

/* Phase B — Named-acquirer table inside asset brief card */
.asset-brief-acquirers {
  margin-top: 14px;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.asset-brief-acquirers .acq-head {
  margin-bottom: 8px;
}
.asset-brief-acquirers .acq-head strong {
  font-size: 13px;
  color: var(--ink);
}
.asset-brief-acquirers .acq-head small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.acq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.acq-table th {
  text-align: left;
  font-weight: 600;
  padding: 6px 8px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.acq-table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: top;
}
.acq-table td.acq-wtp {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.acq-table td.acq-struct {
  color: var(--muted);
  font-size: 11px;
}
.acq-table tr:last-child td {
  border-bottom: none;
}
/* Verdict pill — same visual language as the Shapley chip but
   anchored on the over/undervalued framing. */
.acq-verdict {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  white-space: nowrap;
}
.acq-verdict-compelling { background: var(--green-soft); color: var(--green-strong); }
.acq-verdict-attractive { background: var(--green-soft); color: var(--green); }
.acq-verdict-fair       { background: var(--surface-subtle); color: var(--text-muted); }
.acq-verdict-expensive  { background: var(--red-soft); color: var(--red); }

/* Disclaimer line rendered above the M&A screen results, anchored
   on "internal screening output only" so the table can't be misread
   as a recommendation, fairness opinion, or investment advice. */
.acq-disclaimer {
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-subtle);
  border-left: 3px solid var(--line-strong);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Inline info icon (ⓘ) used on every column header to surface what
   the column means without forcing the user to guess. Underlined dot
   pattern so it reads as "more info" rather than chrome. */
.info-icon {
  display: inline-block;
  margin-left: 4px;
  color: var(--text-muted);
  font-size: 0.9em;
  cursor: help;
  font-weight: normal;
  vertical-align: middle;
}
.info-icon:hover {
  color: var(--accent);
}
/* The whole row is greyed out when the company has zero curated
   programs, so the eye doesn't bias toward the bottom of the
   ranking. The Coverage column ("0 programs" / "1 program") carries
   the real message that the bottom-up model is sparse here. */
.acq-table tr.acq-row-unmodeled td {
  opacity: 0.75;
}

/* Filter + sort affordances on the M&A target screen. The table
   was previously presented as a static read-only block, which made
   it look like there was no way to slice the universe. The toolbar
   above the table holds a free-text filter (ticker / name) and a
   couple of coverage toggles; column headers carry a sort indicator
   and click handler. */
.acq-toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin: var(--space-3) 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}
.acq-toolbar label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.acq-toolbar input[type="search"] {
  min-width: 220px;
  padding: 4px 8px;
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--panel);
  color: var(--ink);
}
.acq-toolbar .acq-toolbar-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.acq-table th.acq-sortable {
  cursor: pointer;
  user-select: none;
}
.acq-table th.acq-sortable:hover {
  background: var(--surface-subtle);
}
.acq-sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.8em;
  color: var(--text-muted);
  width: 8px;
  text-align: center;
}
.acq-table th.acq-sort-active .acq-sort-indicator {
  color: var(--ink);
}
.acq-empty-filter {
  padding: var(--space-3);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-style: italic;
}

/* Stress test scenario cards on the Portfolio Dashboard.
   One card per scenario (Downside Clinical/Commercial,
   High Competition, Capital Constrained, Upside Access/Execution).
   Each card shows the scenario's deal mean, P10–P90 range, and a
   verdict pill comparing to the baseline run. Cards lay out in a
   responsive grid so the surface stays scannable. */
.stress-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.stress-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-3);
}
.stress-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.stress-card-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
  line-height: 1.4;
}
.stress-card-figs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stress-card-figs div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
}
.stress-card-figs small {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  flex-shrink: 0;
}
.stress-card-figs strong, .stress-card-figs span {
  font-weight: 600;
  text-align: right;
}
.stress-verdict {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.stress-verdict-good    { background: var(--green-soft); color: var(--green); }
.stress-verdict-neutral { background: var(--surface-subtle); color: var(--text-muted); }
.stress-verdict-warn    { background: var(--gold-soft); color: var(--amber-strong); }
.stress-verdict-bad     { background: var(--red-soft); color: var(--red); }

/* Phase G — Quick Start bar */
.quick-start-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #eef2ff 0%, #f0fdf4 100%);
  border-bottom: 1px solid var(--line);
}
.quick-start-input {
  flex: 1;
  max-width: 420px;
  padding: 8px 12px;
  border: 2px solid var(--brand);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}
.quick-start-input:focus {
  outline: none;
  border-color: var(--brand-strong);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.quick-start-btn {
  white-space: nowrap;
}
.quick-start-hint {
  color: var(--muted);
  font-size: 11px;
}

/* Help nav link + panel (replaces floating AI fab) */
.help-nav-link {
  color: var(--muted-strong) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid transparent !important;
}
.help-nav-link:hover {
  color: var(--teal-strong) !important;
  background: var(--panel-soft) !important;
}
.help-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 90vw);
  z-index: 50;
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 32px rgba(15, 26, 46, 0.12);
  flex-direction: column;
  overflow: hidden;
}
.help-panel[hidden] { display: none; }
.help-panel:not([hidden]) { display: flex; }
.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.help-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.help-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.help-section {
  margin-bottom: 24px;
}
.help-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.help-section p, .help-section li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 6px 0;
}
.help-section ul {
  padding-left: 20px;
  margin: 8px 0;
}
.help-section dl {
  margin: 8px 0;
}
.help-section dt {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  margin-top: 12px;
}
.help-section dd {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0 0;
  line-height: 1.5;
}
.help-shortcuts {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.help-shortcuts td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
}
.help-shortcuts kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel-soft);
  font-family: monospace;
  font-size: 11px;
}

/* Validation modal + summary card */
.validation-summary-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.validation-categories {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.val-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.val-cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--amber-tint);
  color: var(--amber-strong);
  font-weight: 700;
  font-size: 12px;
}
.validation-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
/* Validation actions — semantic hierarchy:
   primary CTA   (Review one at a time)  → brand-filled, the recommended path
   secondary     (Cite industry defaults) → brand-outlined
   tertiary      (Skip)                   → muted ghost
   No green/amber traffic-light coding — those map onto run/severity
   states, not user actions, and conflicted with the brand palette. */
.val-action-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-strong);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.val-action-btn:hover {
  background: var(--panel-soft);
  border-color: var(--ink-soft);
  color: var(--ink);
}
.val-review-btn {
  background: var(--brand);
  border-color: var(--brand-strong);
  color: #ffffff;
}
.val-review-btn:hover {
  background: var(--brand-strong);
  border-color: var(--brand-dark);
  color: #ffffff;
}
.val-apply-btn {
  background: var(--panel);
  border-color: var(--brand);
  color: var(--brand-strong);
}
.val-apply-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand-strong);
}
.val-acknowledge-btn {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.val-acknowledge-btn:hover {
  background: var(--panel-soft);
  color: var(--muted-strong);
}
.validation-actions-help {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}
.issue.acknowledged {
  background: var(--green-soft);
  border-left: 3px solid var(--green);
}
.issue.acknowledged strong {
  color: var(--green-strong);
}
.issue.acknowledged span {
  color: var(--muted-strong);
}

/* Validation modal overlay */
.val-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
}
.val-modal {
  width: min(720px, 92vw);
  max-height: 85vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.val-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.val-modal-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.val-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
}
.val-modal-close:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}
.val-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.val-modal-intro {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-strong);
  margin: 0 0 16px;
  max-width: 60ch;
}
.val-category-section {
  margin-bottom: 20px;
}
.val-category-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.val-cat-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--amber-tint);
  color: var(--amber-strong);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 6px;
}
.val-cat-explain {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 10px;
}
.val-issue-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.val-issue-row {
  display: flex;
  gap: 12px;
  padding: var(--space-1) var(--space-2);
  font-size: 12px;
  border-radius: 4px;
}
.val-issue-row:nth-child(even) {
  background: var(--panel-soft);
}
.val-issue-path {
  min-width: 160px;
  font-weight: 600;
  color: var(--ink-soft);
}
.val-issue-msg {
  color: var(--muted);
  flex: 1;
}
.val-more {
  color: var(--muted);
  font-style: italic;
}
.val-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}
.val-modal-close-btn {
  margin-left: auto;
}

/* Validation issue tooltips */
.val-issue-row {
  position: relative;
  cursor: default;
}
.val-issue-row[title]:hover {
  background: var(--brand-soft);
}
.val-issue-tip {
  color: var(--muted);
  font-size: 14px;
  cursor: help;
  flex-shrink: 0;
  margin-left: 4px;
}
.val-issue-tip:hover {
  color: var(--brand);
}

/* ============ Home / Landing Page ============ */
.home-landing {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 16px 80px;
}
.home-hero {
  text-align: center;
  margin-bottom: 36px;
}
.home-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.home-subtitle {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.home-quick-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.home-search-input {
  width: 380px;
  max-width: 70vw;
  padding: 12px 16px;
  border: 2px solid var(--brand);
  border-radius: 10px;
  font-size: 15px;
  background: #fff;
}
.home-search-input:focus {
  outline: none;
  border-color: var(--brand-strong);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.home-search-btn {
  padding: 12px 20px;
  font-size: 15px;
}
.home-search-hint {
  width: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.home-section {
  margin-bottom: 28px;
}
.home-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.home-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .home-tiles { grid-template-columns: 1fr; }
}
.home-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms, box-shadow 120ms, transform 80ms;
  font: inherit;
  position: relative;
}
/* home_tile_usage.js bumps the most-clicked tile in each section to
   first and adds .home-tile--top. The marker tells the user why this
   tile is at the top without shouting. */
.home-tile.home-tile--top {
  border-left: 3px solid var(--brand);
  padding-left: 13px;
}
.home-tile.home-tile--top::after {
  content: "Frequently used";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0.7;
}
.home-tile:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.10);
  transform: translateY(-1px);
}
.home-tile-icon {
  font-size: 24px;
  line-height: 1;
}
.home-tile strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.home-tile span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.home-bottom-row {
  margin-top: 24px;
}
.home-recent h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.home-empty {
  font-size: 13px;
  color: var(--muted);
}

/* ============ Home results panels ============ */
.home-results-panel {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.home-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}
.home-results-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.home-panel-intro {
  padding: 12px 16px 4px;
  font-size: 13px;
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.5;
}
.scanner-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.scanner-sort {
  font-size: 12px;
  color: var(--muted);
}
.scanner-sort select {
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  font-size: 12px;
}
.scanner-count {
  font-size: 12px;
  color: var(--muted);
}
.scanner-table-wrap {
  overflow-x: auto;
}
.scanner-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.scanner-table th {
  text-align: left;
  font-weight: 600;
  padding: 8px 10px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  white-space: nowrap;
}
.scanner-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: top;
}
.scanner-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.scanner-table td code {
  font-size: 11px;
  color: var(--brand);
}
.scanner-title {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scanner-model-btn {
  padding: 3px 10px;
  border: 1px solid var(--brand);
  border-radius: 4px;
  background: transparent;
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.scanner-model-btn:hover {
  background: var(--brand);
  color: #fff;
}
.trial-design-form,
.endpoint-form,
.patent-form,
.launch-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 16px 14px;
  flex-wrap: wrap;
}
.trial-design-form label,
.endpoint-form label,
.patent-form label,
.launch-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.trial-design-form input,
.trial-design-form select,
.endpoint-form input,
.patent-form input,
.launch-form input {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 13px;
}

/* ============ Table sort + filter ============ */
.scanner-table th.sort-asc::after {
  content: " ▲";
  font-size: 9px;
  color: var(--brand);
}
.scanner-table th.sort-desc::after {
  content: " ▼";
  font-size: 9px;
  color: var(--brand);
}
.scanner-table th:hover {
  background: var(--line);
}
.table-filter-wrap {
  padding: 8px 10px;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
}
.table-filter-input {
  width: 100%;
  max-width: 320px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
}
.table-filter-input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}

/* =========================================================================
   AI Analyst — conversational interface
   ========================================================================= */

/* Two-pane Analyst: a case briefing on the left, the chat column on the
   right. The briefing makes the page useful (and full) before any
   question is typed, instead of a centered chat with dead gutters. */
.analyst-container {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  height: calc(100vh - 140px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}
.analyst-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
/* Briefing pane */
.analyst-briefing {
  overflow-y: auto;
  padding: 20px 4px 16px;
  border-right: 1px solid var(--line, var(--line));
}
.ab-head { margin-bottom: 16px; }
.ab-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, var(--muted));
}
.ab-case {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  margin-top: 3px;
  color: var(--ink, #0f172a);
}
.ab-trials {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted, var(--muted));
}
.ab-empty {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-strong, var(--muted-strong));
}
.ab-section { margin-bottom: 18px; }
.ab-heading {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-strong, var(--muted-strong));
}
.ab-rec {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal, #2563a8);
  background: rgba(14, 111, 105, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}
.ab-metrics { margin: 0; }
.ab-metric {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line-soft, var(--line-soft));
  font-size: 12.5px;
}
.ab-metric dt { color: var(--muted-strong, var(--muted-strong)); }
.ab-metric dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink, #0f172a);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ab-health {
  font-size: 12px;
  line-height: 1.5;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.ab-health-ok   { background: rgba(37, 99, 168, 0.10); color: var(--teal, #2563a8); }
.ab-health-soft { background: rgba(180, 83, 9, 0.10);   color: var(--amber-strong); }
.ab-health-warn { background: rgba(185, 28, 28, 0.10);  color: var(--red-strong); }
.ab-drivers { list-style: none; margin: 0; padding: 0; }
.ab-driver {
  display: grid;
  grid-template-columns: 1fr 60px 34px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}
.ab-driver-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink, #0f172a);
}
.ab-driver-bar {
  height: 6px;
  background: var(--line-soft, #eef2f6);
  border-radius: 3px;
  overflow: hidden;
}
.ab-driver-bar span {
  display: block;
  height: 100%;
  background: var(--teal, #2563a8);
  border-radius: 3px;
}
.ab-driver-val {
  text-align: right;
  color: var(--muted-strong, var(--muted-strong));
  font-variant-numeric: tabular-nums;
}

/* Recent conversations — analyst_history.js. Reuses .ab-section /
   .ab-heading from the briefing so the visual rhythm stays the same;
   adds card affordances for the per-conversation buttons. */
.ah-section { margin-top: var(--space-3); }
.ah-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.ah-head .ab-heading { margin: 0; }
.ah-new {
  font-size: var(--fs-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--r-sm);
}
.ah-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ah-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ah-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
}
.ah-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--leading-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ah-meta {
  display: flex;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ah-empty { margin: 0; }

/* Collapse to a single column on narrow viewports — briefing on top. */
@media (max-width: 860px) {
  .analyst-container {
    grid-template-columns: 1fr;
    height: auto;
  }
  .analyst-briefing {
    border-right: none;
    border-bottom: 1px solid var(--line, var(--line));
  }
}

.analyst-header {
  padding: var(--space-5) 0 var(--space-3);
  border-bottom: 1px solid var(--line);
}
.analyst-header h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--ink);
}
.analyst-subtitle {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}

/* ---------- Thread -------------------------------------------------------- */

.analyst-thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.analyst-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--space-6) 0;
}
.welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
  max-width: 720px;
  width: 100%;
}
.welcome-chip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-md);
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  line-height: var(--leading-relaxed);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.welcome-chip:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
}

/* ---------- Messages ------------------------------------------------------ */

.analyst-msg {
  display: flex;
  gap: 12px;
  max-width: 100%;
}
.analyst-msg-user {
  flex-direction: row-reverse;
}

.msg-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.analyst-msg-user .msg-avatar {
  background: var(--navy);
  color: #fff;
}
.analyst-msg-assistant .msg-avatar {
  background: var(--teal);
  color: #fff;
}

.msg-body {
  max-width: 720px;
  min-width: 0;
}
.msg-content {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-lg);
  font-size: var(--fs-md);
  line-height: var(--leading-relaxed);
  overflow-wrap: break-word;
}
.analyst-msg-user .msg-content {
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.analyst-msg-assistant .msg-content {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.analyst-msg-assistant .msg-content p {
  margin: 0 0 10px;
}
.analyst-msg-assistant .msg-content p:last-child {
  margin-bottom: 0;
}

/* ---------- Tool strip ---------------------------------------------------- */

.analyst-tool-strip {
  padding: 2px 56px;
}
.tool-strip-label {
  display: inline-block;
  background: var(--teal-soft);
  color: var(--teal-strong);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

/* ---------- Thinking animation -------------------------------------------- */

.thinking-dots {
  display: flex;
  gap: var(--space-1);
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}
.thinking-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  animation: thinking-bounce 1.4s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.16s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes thinking-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ---------- Artifacts ----------------------------------------------------- */

.msg-artifacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.artifact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--teal-soft);
  color: var(--teal-strong);
  border: 1px solid var(--teal);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.artifact-link:hover {
  background: var(--teal-bg);
}
.artifact-link svg {
  flex-shrink: 0;
}

/* ---------- Input bar ----------------------------------------------------- */

.analyst-input-bar {
  padding: 12px 0 16px;
  border-top: 1px solid var(--line);
}
.analyst-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.analyst-input-row textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  background: var(--panel);
  color: var(--ink);
  min-height: 42px;
  max-height: 200px;
  transition: border-color 0.15s;
}
.analyst-input-row textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(31, 138, 131, 0.12);
}
.analyst-send-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.analyst-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.analyst-disclaimer {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

/* ---------- Markdown inside messages -------------------------------------- */

.msg-content .md-h {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.msg-content h3.md-h { font-size: 15px; }
.msg-content h2.md-h { font-size: 16px; }
.msg-content code {
  background: var(--navy-tint);
  padding: 1px var(--space-1);
  border-radius: 4px;
  font-size: 12px;
}
.msg-content .md-code-block {
  background: var(--navy);
  color: var(--line);
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  margin: 10px 0;
}
.msg-content .md-code-block code {
  background: none;
  padding: 0;
  color: inherit;
}

.msg-content .md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 10px 0;
}
.msg-content .md-table th,
.msg-content .md-table td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
}
.msg-content .md-table th {
  background: var(--panel-soft);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-strong);
}
.msg-content .md-table td {
  color: var(--ink-soft);
}
.msg-content .md-ul,
.msg-content .md-ol {
  margin: 6px 0;
  padding-left: 20px;
}
.msg-content .md-li,
.msg-content .md-oli {
  margin: 3px 0;
  font-size: 13px;
}

/* ---------- Banner (API key missing, etc.) -------------------------------- */

.analyst-banner {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* ---------- Clear button -------------------------------------------------- */

.analyst-clear-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.analyst-clear-btn:hover {
  color: var(--red);
  border-color: var(--red);
}

/* =========================================================================
   Project sidebar
   ========================================================================= */

.project-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.project-toggle-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.project-toggle-label {
  white-space: nowrap;
}

.project-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100vh;
  background: var(--panel);
  border-right: 1px solid var(--line);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
  z-index: 200;
  flex-direction: column;
  overflow: hidden;
}
.project-sidebar[hidden] { display: none; }
.project-sidebar:not([hidden]) { display: flex; }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
  border-bottom: 1px solid var(--line);
}
.sidebar-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}

.sidebar-actions {
  padding: 12px 16px;
}
.sidebar-new-btn {
  width: 100%;
}

.project-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 16px;
}

.project-item {
  padding: 12px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  margin-bottom: 2px;
}
.project-item:hover {
  background: var(--panel-soft);
}
.project-item.active {
  background: var(--teal-soft);
  border-left: 3px solid var(--teal);
}
.project-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.project-item-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.sidebar-loading,
.sidebar-empty {
  padding: 20px 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.project-detail {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}
.sidebar-back {
  font-size: 12px;
  padding: 4px 0;
  margin-bottom: 8px;
}
.project-detail-name {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--ink);
}
.project-detail-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
}
.project-detail-section {
  margin-bottom: 16px;
}
.project-detail-section h5 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-strong);
}
.project-case-item {
  padding: 8px 10px;
  background: var(--panel-soft);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

/* =========================================================================
   Settings drawer
   ========================================================================= */

.settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  z-index: 200;
  flex-direction: column;
  overflow: hidden;
}
.settings-drawer[hidden] { display: none; }
.settings-drawer:not([hidden]) { display: flex; }
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.settings-header h2 { margin: 0; font-size: 16px; }
.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.settings-section { margin-bottom: 24px; }
.settings-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-strong);
  margin: 0 0 12px;
}

/* Data status */
.data-counts { display: flex; flex-direction: column; gap: 8px; }
.data-count-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--panel-soft);
  border-radius: 6px;
  font-size: 13px;
}
.data-count-row strong { color: var(--teal-strong); }
/* Catalog link coverage — amber when fewer than half the comparables
   carry a verifiable source URL (the citation chips' credibility
   ceiling). */
.data-link-coverage { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.data-count-row.coverage-low strong { color: var(--amber-strong); }
.data-sync-recent { margin-top: 8px; color: var(--muted); }
.data-status-empty { color: var(--muted); font-size: 13px; }

/* Notification prefs */
.notif-pref-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  cursor: pointer;
}
.notif-pref-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

/* Override badge */
.pill.amber { background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber); }
.pill.red { background: var(--red-soft); color: var(--red); border: 1px solid var(--red); }

/* Lesson items in sidebar */
.lesson-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 0;
  font-size: 12px;
}
.lesson-text {
  color: var(--ink-soft);
  line-height: 1.4;
}
.sidebar-action-btn {
  width: 100%;
  text-align: left;
  font-size: 12px;
  padding: 6px 0;
  color: var(--teal);
}

/* Memory stats in sidebar */
.project-memory-stats {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.muted { color: var(--muted); }

/* =========================================================================
   Distribution Fitting + Entity Graph
   ========================================================================= */

.dist-fit-panel,
.pert-validation-panel,
.entity-panel {
  margin-top: 16px;
}

.dist-fit-controls,
.entity-search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 0;
}
.dist-fit-controls select,
.dist-fit-controls input,
.entity-search-bar select,
.entity-search-bar input {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 13px;
  background: var(--panel);
}
.entity-search-bar input {
  flex: 1;
  min-width: 200px;
}

.dist-fit-results,
.pert-validation-results,
.entity-results {
  padding: 8px 0;
}

.dist-fit-note {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}
.dist-fit-note strong {
  color: var(--teal-strong);
}

.dist-fit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dist-fit-table th,
.dist-fit-table td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
}
.dist-fit-table th {
  background: var(--panel-soft);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-strong);
}
.dist-fit-winner td {
  background: var(--teal-soft);
  font-weight: 600;
}

.pert-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.entity-header {
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--ink);
}

.pill.green { background: var(--green-soft); color: var(--green); }

.version-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  color: var(--muted);
  background: var(--panel);
  font-family: 'SF Mono', Monaco, Consolas, monospace;
}
.version-chip small { font-size: 10px; opacity: 0.7; }
.version-chip strong { font-weight: 600; }
.version-chip.degraded {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}

/* ---------- Data freshness chip (C1) ------------------------------------- */
/* Non-interactive span shown in the app header. Text ≥ 4.5:1 contrast on   */
/* its background — green-strong (#166534) and amber-strong (#92400e) on     */
/* white/panel backgrounds comfortably exceed WCAG AA.                       */
.data-freshness-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--panel);
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  white-space: nowrap;
}
.freshness-dot {
  display: inline-block;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* is-current: green-strong (#166534) — contrast ≥ 7:1 on white */
.data-freshness-chip.is-current {
  border-color: var(--green);
  color: var(--green-strong);
  background: var(--green-soft);
}
/* is-stale: amber-strong (#92400e) — contrast ≥ 7:1 on white */
.data-freshness-chip.is-stale {
  border-color: var(--amber);
  color: var(--amber-strong);
  background: var(--amber-soft);
}

/* ---------- Stale-data run banner (C1) ----------------------------------- */
.data-stale-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--amber);
  border-radius: var(--r-xs);
  background: var(--amber-soft);
  color: var(--amber-strong);
  font-size: var(--fs-sm);
}
.data-stale-banner-text { flex: 1; }
.data-stale-banner-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--amber-strong);
  font-size: var(--fs-lg);
  line-height: 1;
  padding: 0 var(--space-1);
}

/* ---------- Import mapper modal (Slice 1) -------------------------------- */
.import-modal {
  width: min(1100px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.import-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.import-modal .modal-header h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.import-modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
}
.import-modal .modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel-soft, var(--panel));
}
.import-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm, 6px);
  background: var(--bg-soft, rgba(0,0,0,0.04));
  font-size: 13px;
}
.import-status.error {
  background: rgba(220, 38, 38, 0.08);
  color: var(--red-strong);
  border: 1px solid rgba(220, 38, 38, 0.3);
}
.import-status.ok {
  background: rgba(16, 185, 129, 0.08);
  color: var(--green-strong);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.import-sheet-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.import-sheet-bar label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.import-warnings {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm, 6px);
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: var(--amber-strong);
  font-size: 12px;
}
.import-warnings ul {
  margin: 6px 0 0 18px;
  padding: 0;
}
.import-mapping-table-wrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm, 6px);
  overflow-x: auto;
}
.import-mapping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.import-mapping-table thead th {
  text-align: left;
  background: var(--bg-soft, rgba(0,0,0,0.03));
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.import-mapping-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.import-mapping-table td.src {
  font-weight: 600;
}
.import-target-select {
  width: 100%;
  max-width: 320px;
  padding: 4px 6px;
}
.import-confidence {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
}
.import-confidence.high { background: rgba(16, 185, 129, 0.15); color: var(--green-strong); }
.import-confidence.medium { background: rgba(234, 179, 8, 0.15); color: var(--amber-strong); }
.import-confidence.low { background: rgba(220, 38, 38, 0.12); color: var(--red-strong); }
.import-reason {
  font-size: 12px;
  color: var(--muted);
  max-width: 320px;
}
.import-sample {
  font-size: 12px;
}
.import-sample-row {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 11px;
  margin-bottom: 2px;
}
.import-sample-row .raw { color: var(--muted); }
.import-sample-row .arrow { opacity: 0.5; margin: 0 4px; }
.import-sample-row .normalized { font-weight: 600; }
.import-validation-warn {
  padding: 8px 10px;
  background: rgba(234, 179, 8, 0.1);
  border-radius: var(--r-sm, 6px);
  color: var(--amber-strong);
}
.import-validation-ok {
  padding: 8px 10px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: var(--r-sm, 6px);
  color: var(--green-strong);
}

/* ==========================================================================
   Provenance Review
   ========================================================================== */

#provenance-badge { cursor: pointer; transition: opacity 0.15s; }
#provenance-badge:hover { opacity: 0.85; }

.provenance-modal {
  background: var(--panel);
  border-radius: 12px;
  width: min(720px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(15, 26, 46, 0.18);
}

.provenance-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.prov-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.prov-stat {
  padding: 12px;
  background: var(--panel-soft);
  border-radius: 8px;
  text-align: center;
}
.prov-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.prov-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 4px;
}
.prov-stat.critical { background: var(--red-soft); }
.prov-stat.critical .prov-stat-value { color: var(--red); }
.prov-stat.high { background: var(--amber-soft); }
.prov-stat.high .prov-stat-value { color: var(--amber); }

.prov-gate-warning {
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  color: var(--amber);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
}
.prov-gate-ok {
  background: var(--green-soft);
  border: 1px solid var(--green);
  color: var(--green);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
}

.prov-issue {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: var(--panel-soft);
  border-left: 3px solid var(--line);
}
.prov-issue.prov-critical { border-left-color: var(--red); background: var(--red-soft); }
.prov-issue.prov-high { border-left-color: var(--red); background: var(--red-soft); opacity: 0.92; }
.prov-issue.prov-medium { border-left-color: var(--amber); background: var(--amber-soft); }
.prov-issue.prov-low { border-left-color: var(--muted); }

.prov-issue-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.prov-issue-header strong { font-size: 13px; flex: 1; }
.prov-impact {
  font-size: 11px;
  color: var(--muted);
}
.prov-issue-msg {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.prov-issue-action {
  font-size: 12px;
  color: var(--muted-strong);
  font-style: italic;
}

.prov-empty {
  text-align: center;
  padding: 24px;
  color: var(--muted);
}

/* =========================================================================
   Outcome-first Home: tile "delivers" label
   ========================================================================= */

.home-tile-delivers {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  font-style: normal;
  color: var(--teal-strong);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-top: 1px solid var(--line-soft);
}
.home-tile {
  min-height: 160px;
}
.home-tile:hover .home-tile-delivers {
  color: var(--teal-strong);
}


/* =========================================================================
   Analyst dock — collapsed chat strip at the bottom of every page
   ========================================================================= */

.analyst-dock {
  position: fixed;
  bottom: 0;
  right: 20px;
  width: 380px;
  max-width: calc(100vw - 40px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 20px rgba(15, 26, 46, 0.08);
  z-index: 150;
  transition: height 200ms ease-out;
  overflow: hidden;
}
.analyst-dock[hidden] { display: none; }
.analyst-dock.collapsed {
  height: 44px;
}
.analyst-dock.expanded {
  height: 480px;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}

.analyst-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 14px;
  height: 44px;
  cursor: pointer;
  user-select: none;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.analyst-dock.collapsed .analyst-dock-header {
  border-bottom: none;
}
.analyst-dock-header strong {
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.analyst-dock-header strong::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}
.analyst-dock-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.analyst-dock-actions button {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.analyst-dock-actions button:hover {
  background: var(--panel-soft);
  color: var(--ink);
}

.analyst-dock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.analyst-dock.collapsed .analyst-dock-body { display: none; }

.analyst-dock-thread {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analyst-dock-input-row {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}
.analyst-dock-input-row textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--panel);
  min-height: 36px;
  max-height: 100px;
}
.analyst-dock-input-row textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(31, 138, 131, 0.12);
}
.analyst-dock-input-row button {
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
}

.analyst-dock-context {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 6px 14px;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
}

/* Hide dock on landing/outcome surfaces (Start landing and Decide >
   Recommendation): these are routing surfaces, not workflow tabs —
   the dock would feel redundant. Also hide when no portfolio loaded. */
body[data-active-tab="start"] .analyst-dock,
body[data-active-tab="home"] .analyst-dock,
body[data-portfolio-state="empty"] .analyst-dock {
  display: none;
}


/* Data Library — shows actual scale of platform's data */
.data-library {
  margin: 16px 0 32px;
  padding: 20px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.data-library-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--ink);
}
.data-library-header p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
}
.data-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.data-library-cell {
  padding: 12px 14px;
  background: var(--panel-soft);
  border-radius: 8px;
  border-left: 3px solid var(--teal);
}
.data-library-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.data-library-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 6px;
}
.data-library-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.data-library-loading, .data-library-empty {
  grid-column: 1 / -1;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Home scale strip — subtly tout data scale */
.home-scale-strip {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}
.home-scale-strip:empty { display: none; }
.home-scale-updated {
  color: var(--muted);
  font-style: italic;
}

/* What's New header button */
.whats-new-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.whats-new-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.whats-new-btn svg { flex-shrink: 0; }

/* What's New slide-out panel */
.whats-new-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  z-index: 70;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 28px rgba(15, 26, 46, 0.10);
  flex-direction: column;
  overflow: hidden;
}
.whats-new-panel[hidden] { display: none; }
.whats-new-panel:not([hidden]) { display: flex; }
.whats-new-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.whats-new-header h2 { margin: 0; font-size: 16px; color: var(--ink); }
.whats-new-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.whats-new-loading, .whats-new-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.wn-section {
  margin-bottom: 20px;
}
.wn-section h3 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-strong);
  font-weight: 700;
}
.wn-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wn-item {
  padding: 8px 10px;
  margin-bottom: 4px;
  background: var(--panel-soft);
  border-radius: 6px;
}
.wn-item-title {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.wn-item-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.wn-tag {
  display: inline-block;
  padding: 1px 6px;
  background: var(--teal-soft);
  color: var(--teal-strong);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 4px;
}
.wn-status-ok { background: var(--green-soft); color: var(--green); }
.wn-status-err { background: var(--red-soft); color: var(--red); }
.wn-status-muted { background: var(--panel); color: var(--muted); }
.wn-when {
  color: var(--muted);
  font-style: italic;
}
.wn-err {
  margin-top: 4px;
  color: var(--red);
  font-size: 11px;
  font-family: monospace;
  background: var(--red-soft);
  padding: 4px 6px;
  border-radius: 4px;
}

/* Hide-the-engine: power-user controls behind an Advanced toggle.
   Default state hides them so the optimization workspace presents a
   clean business view; analysts who need to inspect the solver can
   reveal them on demand. */
body[data-advanced="false"] .advanced-only {
  display: none !important;
}
.advanced-toggle-btn {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
body[data-advanced="true"] .advanced-toggle-btn {
  background: var(--teal-soft);
  color: var(--teal-strong);
  border-color: var(--teal);
}
/* Optimization panel header: title + pill + Advanced button — let them
   wrap rather than truncate when space is tight. */
.opt-controls .panel-header {
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 8px;
  align-items: center;
}
.opt-controls .panel-header h2 {
  margin-right: auto;
}

/* Run progress narrative — staged messages during a /run, instead of
   a generic spinner. The work being done becomes visible. */
.run-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--panel-soft);
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}
.run-progress[hidden] { display: none; }
.run-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  animation: run-progress-pulse 1.4s ease-in-out infinite;
}
.run-progress.complete .run-progress-dot {
  background: var(--green);
  animation: none;
}
.run-progress.error .run-progress-dot {
  background: var(--red);
  animation: none;
}
.run-progress.complete { color: var(--green); }
.run-progress.error { color: var(--red); }
@keyframes run-progress-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.0); }
}

/* Monte Carlo density curve, shown next to/below every stat bar that
   exposes P10/P50/P90. Point estimates alone hide the distribution. */
.metric-density {
  margin-top: 8px;
  padding: 4px 6px 2px;
  background: var(--panel-soft);
  border-radius: 6px;
  display: inline-block;
}
.metric-density .distviz-density {
  display: block;
  max-width: 100%;
}

/* Featured football field callout on Dashboard */
.football-callout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--amber-soft);
  color: var(--amber);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 8px;
}

/* =========================================================================
   Interactive analytical charts panel — appears after a /run completes.
   Wires the PlotRenderer / ECharts platform into the workbench results
   view so distribution + tornado + football field show as live
   interactive charts (hover, zoom, click ↗ to open full view).
   ========================================================================= */

.interactive-charts {
  margin: 20px 0 0;
  padding: 18px 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.interactive-charts[hidden] { display: none; }

.interactive-charts .ic-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.interactive-charts .ic-head h3 {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.interactive-charts .ic-sub {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.interactive-charts .ic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.interactive-charts .ic-card-wide { grid-column: 1 / -1; }

.interactive-charts .ic-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.interactive-charts .ic-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.interactive-charts .ic-card header strong {
  font-size: 13px;
  color: var(--ink);
}
.interactive-charts .ic-open {
  font-size: 14px;
  color: var(--teal-strong);
  text-decoration: none;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  line-height: 18px;
}
.interactive-charts .ic-open[hidden] { display: none; }
.interactive-charts .ic-open:hover {
  border-color: var(--teal);
  background: var(--panel);
}
.interactive-charts .ic-stage {
  min-height: 240px;
  position: relative;
}
.interactive-charts .ic-card-wide .ic-stage { min-height: 320px; }
.interactive-charts .ic-stage-inner {
  width: 100%;
  height: 100%;
  min-height: 240px;
}

/* Range-preset toggle row above distribution charts. Lets the
   analyst pick Auto / IQR / P10-P90 / P5-P95 / Full to override the
   adaptive default when they want a different view. */
.ic-range-toggle {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.ic-range-btn {
  font-size: 11px;
  padding: 2px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-soft);
  color: var(--ink-soft);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ic-range-btn:hover { border-color: var(--brand); }
.ic-range-btn--active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-strong);
  font-weight: 600;
}
/* Per-asset section inside the wide football-field card. When the
   case has more than one asset, each gets its own SVG football
   field stacked vertically with a small header. */
.interactive-charts .ic-football-asset + .ic-football-asset {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}
.interactive-charts .ic-football-asset-name {
  margin: 0 0 var(--space-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 880px) {
  .interactive-charts .ic-grid { grid-template-columns: 1fr; }
  .interactive-charts .ic-card-wide { grid-column: auto; }
}

/* =========================================================================
   Decision recommendation hero — top of Home view after a /run.
   "What should we do?" answered first; everything else is a drilldown.
   ========================================================================= */
.decision-hero {
  margin: 0 0 24px;
  padding: 24px 28px 22px;
  background: linear-gradient(135deg, #1a4a85 0%, #0f1a2e 100%);
  color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 26, 46, 0.15);
}
.decision-hero[hidden] { display: none; }
.dh-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--green-tint);
  margin-bottom: 8px;
}
/* C2 — eyebrow row pairs the FINDING label with the calibration
   trust signal at the top of the hero. The eyebrow keeps its own
   styling; the row owns the spacing below. */
.dh-eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.dh-eyebrow-row .dh-eyebrow { margin-bottom: 0; }

/* C2 — compact calibration track-record signal placed beside the
   Dashboard and Finding headlines (predicted P50 vs realized). The
   full breakdown lives on the Calibration tab; this is a read-only,
   non-interactive credibility chip. Base treatment is for the light
   panel header; the --on-dark variant flips colors for the hero. */
.calib-signal {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.calib-signal-label {
  color: var(--muted-strong);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.calib-signal-value {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calib-signal-value.stat-absent {
  color: var(--muted);
  font-weight: 500;
}
.calib-signal--on-dark .calib-signal-label { color: var(--green-tint); }
.calib-signal--on-dark .calib-signal-value { color: #ffffff; }
.calib-signal--on-dark .calib-signal-value.stat-absent {
  color: rgba(255, 255, 255, 0.72);
}
.dh-headline {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}
.dh-subheadline {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-on-dark);
  line-height: 1.45;
}
.dh-subheadline[hidden] { display: none; }
.dh-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 20px 0 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.dh-metric small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-tint);
  margin-bottom: 4px;
}
.dh-metric strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
.dh-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dh-card {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--green-tint);
}
.dh-card-risk { border-left-color: var(--dh-risk); }
.dh-card-assumption { border-left-color: var(--dh-assumption); }
.dh-card small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-on-dark);
  margin-bottom: 4px;
}
.dh-card div {
  font-size: 13px;
  line-height: 1.45;
  color: #ffffff;
}
.dh-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.dh-jump {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 120ms ease, border-color 120ms ease;
}
.dh-jump:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--green-tint);
}
@media (max-width: 720px) {
  .decision-hero { padding: 18px 18px 16px; }
  .dh-headline { font-size: 21px; }
  .dh-twocol { grid-template-columns: 1fr; }
}

/* =========================================================================
   Drilldown back banner — Phase 3 of the decision spine work.
   Appears at the top of any workspace the user reached via drillTo();
   one click returns them to where they came from.
   ========================================================================= */
.drilldown-back-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--amber-tint);
  border-bottom: 1px solid var(--amber-tint);
  font-size: 12px;
  color: var(--amber-strong);
}
.drilldown-back-banner[hidden] { display: none; }
.drilldown-arrow {
  font-size: 14px;
  font-weight: 700;
  color: var(--amber-strong);
}
.drilldown-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--amber-strong);
  font-family: inherit;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
}
.drilldown-back-btn:hover {
  background: rgba(0,0,0,0.05);
}
.drilldown-back-btn strong { font-weight: 700; }

/* Hero risk and assumption cards become drillable interactive elements
   in Phase 3. They keep the same look but pick up cursor + focus ring. */
.dh-card-clickable {
  cursor: pointer;
  transition: background 120ms ease, border-left-color 120ms ease;
}
.dh-card-clickable:hover {
  background: rgba(255, 255, 255, 0.14);
}
.dh-card-clickable:focus-visible {
  outline: 2px solid var(--green-tint);
  outline-offset: 2px;
}

/* =========================================================================
   Workspace overview card — used by Assumption Audit and IC Pack
   workspaces while their dedicated surfaces are being built out.
   Branded card with clear next-step actions so the workspace shows
   intent and reuses existing capability hooks rather than feeling empty.
   ========================================================================= */
.workspace-overview {
  display: flex;
  justify-content: center;
  padding: 60px 24px;
}
.workspace-overview-card {
  max-width: 720px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 36px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.workspace-overview-card h2 {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--ink);
}
.workspace-overview-card p {
  font-size: 14px;
  color: var(--muted-strong);
  line-height: 1.55;
  margin: 0 0 12px;
}
.workspace-overview-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* Role selector in Settings — Phase 4 of the decision spine work. */
.role-select {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  margin-bottom: 10px;
}
.role-preview {
  font-size: 12px;
  color: var(--muted-strong);
  padding: 10px 12px;
  background: var(--panel-soft);
  border-radius: 6px;
  border-left: 3px solid var(--teal);
  line-height: 1.5;
}
.role-preview strong {
  color: var(--ink);
  font-weight: 700;
}
.settings-help {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.5;
}

/* Hero metric tiles become drillable interactive elements in the spine
   polish work. They keep the same look but pick up cursor + focus ring
   matching the card-clickable pattern. */
.dh-metric-clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 120ms ease;
}
.dh-metric-clickable:hover {
  background: rgba(255, 255, 255, 0.08);
}
.dh-metric-clickable:focus-visible {
  outline: 2px solid var(--green-tint);
  outline-offset: 2px;
}

/* "What would change the answer?" — surrogate slider section of the
   Decision recommendation hero. Lives between the risk/assumption
   cards and the cross-role jump buttons. */
.dh-whatif {
  margin-top: 18px;
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border-left: 3px solid var(--green-tint);
}
.dh-whatif[hidden] { display: none; }
.dh-whatif-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.dh-whatif-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-on-dark);
}
.dh-whatif-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(252, 211, 77, 0.25);
  color: var(--amber-tint);
  letter-spacing: 0.10em;
}
.dh-whatif-driver {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
  word-break: break-word;
}
.dh-whatif-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dh-whatif-edge {
  font-size: 11px;
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}
.dh-whatif-hi { text-align: right; }
.dh-whatif-slider {
  flex: 1;
  appearance: none;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  outline: none;
}
.dh-whatif-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-tint);
  cursor: pointer;
  border: 2px solid #1a4a85;
}
.dh-whatif-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-tint);
  cursor: pointer;
  border: 2px solid #1a4a85;
}
.dh-whatif-slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(167, 243, 208, 0.35);
}
.dh-whatif-readout {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.dh-whatif-current small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--green-tint);
  letter-spacing: 0.06em;
}
.dh-whatif-current strong {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
.dh-whatif-delta {
  font-size: 12px;
  color: var(--text-on-dark);
  flex: 1;
  line-height: 1.5;
}
.dh-whatif-delta b { color: #ffffff; font-weight: 700; font-variant-numeric: tabular-nums; }
.dh-whatif-delta .up { color: var(--green-tint); font-weight: 700; }
.dh-whatif-delta .down { color: var(--red-tint); font-weight: 700; }
.dh-whatif-warning {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(252, 165, 165, 0.18);
  color: var(--red-tint);
  border-radius: 6px;
  font-size: 12px;
  border-left: 3px solid var(--red-tint);
}
.dh-whatif-warning[hidden] { display: none; }

/* =========================================================================
   Spotlight tab — Product workspace's single-asset focus + Compare.
   ========================================================================= */
.spotlight-empty {
  display: flex;
  justify-content: center;
  padding: 60px 24px;
}
.spotlight-empty[hidden] { display: none; }
.spotlight-empty-card {
  max-width: 720px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 36px;
}
.spotlight-empty-card h2 {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--ink);
}
.spotlight-empty-card p {
  font-size: 14px;
  color: var(--muted-strong);
  line-height: 1.55;
  margin: 0;
}

.spotlight-active {
  padding: 18px 24px 30px;
}
.spotlight-active[hidden] { display: none; }
.spotlight-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.spotlight-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.spotlight-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.spotlight-select {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  min-width: 220px;
}
.spotlight-compare-btn,
.spotlight-clear-btn {
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
}
.spotlight-compare-btn:hover { border-color: var(--teal); color: var(--teal-strong); }
.spotlight-clear-btn:hover { border-color: var(--red); color: var(--red); }
.spotlight-compare-btn[hidden], .spotlight-clear-btn[hidden] { display: none; }
.spotlight-compare-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.spotlight-compare-row[hidden] { display: none; }
.spotlight-compare-slots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.spotlight-slot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 4px 4px 10px;
  background: var(--teal-soft);
  color: var(--teal-strong);
  border-radius: 14px;
}
.spotlight-slot-name { font-weight: 600; }
.spotlight-slot button {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--teal-strong);
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.spotlight-slot button:hover { color: var(--red); }

.spotlight-headline {
  margin: 0 0 18px;
  padding: 16px 20px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.sh-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.sh-context {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.sh-metrics {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 18px;
  text-align: right;
}
.sh-metric small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted-strong);
}
.sh-metric strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-top: 2px;
}
/* Absent stat — muted, normal weight, with a tooltip reason. A bare
   "—" in a dense strip reads as breakage; "n/a" + why reads as a
   deliberate state. */
.sh-metric strong.stat-absent {
  color: var(--muted);
  font-weight: 500;
  cursor: help;
}

.spotlight-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.spotlight-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spotlight-card-wide { grid-column: 1 / -1; }
.spotlight-card header strong {
  font-size: 13px;
  color: var(--ink);
}
.spotlight-stage {
  min-height: 280px;
  position: relative;
}

@media (max-width: 820px) {
  .spotlight-headline { grid-template-columns: 1fr; }
  .sh-metrics { grid-template-columns: 1fr 1fr; text-align: left; }
  .spotlight-charts { grid-template-columns: 1fr; }
}

/* Branding section in the Settings drawer */
.brand-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.brand-color-input {
  appearance: none;
  width: 44px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  padding: 2px;
}
.brand-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.brand-color-input::-webkit-color-swatch { border: 0; border-radius: 4px; }
.brand-color-input::-moz-color-swatch { border: 0; border-radius: 4px; }
.brand-hex {
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", monospace;
  color: var(--ink-soft);
  background: var(--panel-soft);
  padding: 4px 8px;
  border-radius: 4px;
}
.brand-reset {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  cursor: pointer;
  color: var(--ink-soft);
}
.brand-reset:hover { border-color: var(--teal); color: var(--teal-strong); }

/* Asset color swatch in Spotlight comparison slots and the active row */
.spotlight-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  vertical-align: middle;
  cursor: pointer;
  margin-right: 6px;
  position: relative;
}
.spotlight-color-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* =========================================================================
   Assumption Audit page — real table for the Assumptions workspace.
   ========================================================================= */
.assumptions-page { padding: 20px 28px 40px; max-width: 1500px; margin: 0 auto; }
.assumptions-header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; margin-bottom: 18px; flex-wrap: wrap;
}
.assumptions-header h2 { margin: 0 0 4px; font-size: 22px; color: var(--ink); }
.assumptions-sub { margin: 0; color: var(--muted-strong); font-size: 13px; max-width: 720px; line-height: 1.5; }
.assumptions-empty-hint {
  font-size: 12px; color: var(--muted); padding: 8px 12px;
  background: var(--panel-soft); border-radius: 6px;
  border-left: 3px solid var(--line);
}

.assumptions-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.assumptions-summary[hidden] { display: none; }
.aa-stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px;
}
.aa-stat small {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted-strong); margin-bottom: 3px;
}
.aa-stat strong {
  font-size: 22px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.aa-stat.stat-pri strong { color: var(--red, var(--red-strong)); }
.aa-stat.stat-warn strong { color: var(--amber, var(--amber-strong)); }
.aa-stat.stat-ok strong { color: var(--teal, #2563a8); }

/* ---- Origin + distribution badges + confirm control ---- */
.aa-origin {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  white-space: nowrap;
}
.aa-origin-historical { background: rgba(37, 99, 168, 0.12); color: var(--teal, #2563a8); }
.aa-origin-sourced    { background: rgba(37, 99, 235, 0.12);  color: var(--brand-strong); }
.aa-origin-assumed    { background: rgba(180, 83, 9, 0.12);   color: var(--amber-strong); }
.aa-origin-unsourced  { background: rgba(185, 28, 28, 0.12);  color: var(--red-strong); }

.aa-dist-badge {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  background: var(--panel-soft, var(--line-soft));
  color: var(--muted-strong, var(--muted-strong));
  border: 1px solid var(--line, var(--line));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.aa-select {
  padding: 7px 10px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
  color: var(--ink, #0f172a);
  cursor: pointer;
}

.aa-confirm-cell { text-align: center; white-space: nowrap; }
.aa-confirm-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 6px;
  background: #fff;
  color: var(--muted-strong, var(--muted-strong));
  cursor: pointer;
  transition: all 0.12s ease;
}
.aa-confirm-btn:hover {
  border-color: var(--teal, #2563a8);
  color: var(--teal, #2563a8);
}
.aa-confirm-btn.is-confirmed {
  background: var(--teal, #2563a8);
  border-color: var(--teal, #2563a8);
  color: #fff;
}
/* Confirmed rows get a subtle green wash + a left marker so the
   reviewed set is scannable at a glance. */
.aa-row-confirmed { background: rgba(14, 111, 105, 0.035); }
.aa-row-confirmed.aa-row-modified { box-shadow: inset 3px 0 0 var(--teal, #2563a8); }

/* ---- Editable assumption row ---- */
/* The whole row becomes a click target for opening the editor modal.
   Hover gets a subtle highlight + pointer cursor; rows with a staged
   override get a teal left border + the "modified" pill in the
   value cell. The currently-editing row keeps a stronger highlight
   so the user can see where the modal's focus landed. */
.aa-row { cursor: pointer; transition: background 0.12s ease; }
.aa-row:hover { background: var(--panel-soft, #f4f7fb); }
.aa-row-modified { box-shadow: inset 3px 0 0 var(--teal, #2563a8); }
.aa-row-editing { background: rgba(14, 111, 105, 0.06); }

.aa-val-point { font-weight: 600; }
.aa-val-range {
  font-size: 11px;
  color: var(--muted-strong, var(--muted-strong));
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.aa-modified-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(14, 111, 105, 0.14);
  color: var(--teal, #2563a8);
  border-radius: 4px;
  vertical-align: middle;
}

/* Apply button — present only when overrides are staged. A flex
   rule elsewhere overrides the [hidden] UA default, so restore it
   explicitly at higher specificity. */
#assumptions-apply-btn {
  background: var(--teal, #2563a8);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
#assumptions-apply-btn[hidden] { display: none; }
#assumptions-apply-btn:hover { background: var(--teal-dark, #143965); }

/* ---- Editor modal ---- */
/* Modal centered via the existing .modal-backdrop. The dialog is
   wider than the sales modal because the editor wants a real two-
   pane layout (editor + future evidence pane). Scroll-locks the
   body underneath so background scroll doesn't disorient the user. */
body.aa-editor-open { overflow: hidden; }

.aa-editor-modal {
  background: #fff;
  border-radius: 12px;
  width: min(960px, 100% - 48px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(15, 26, 46, 0.25);
  overflow: hidden;
}

.aa-editor-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line, var(--line));
}

.aa-editor-modal-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink, #0f172a);
  word-break: break-all;
}

.aa-editor-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, var(--muted));
  font-size: 10px;
  font-weight: 600;
}

.aa-editor-modal-body {
  padding: 18px 22px 22px;
  overflow: auto;
}

.aa-editor-lede {
  display: block;
  color: var(--muted-strong, var(--muted-strong));
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 16px;
  max-width: 60ch;
}

.aa-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

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

.aa-editor-left label,
.aa-editor-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.aa-editor-left label > small,
.aa-editor-field > small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-strong, var(--muted-strong));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aa-editor-kind {
  padding: 7px 9px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}

.aa-editor-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.aa-editor-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.aa-editor-input-wrap input {
  width: 100%;
  padding: 7px 9px;
  padding-right: 26px;  /* room for the % suffix */
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 6px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.aa-editor-input-wrap input:focus {
  outline: none;
  border-color: var(--teal, #2563a8);
  box-shadow: 0 0 0 2px rgba(14, 111, 105, 0.18);
}

.aa-input-suffix {
  position: absolute;
  right: 8px;
  color: var(--muted, var(--muted));
  font-size: 13px;
  pointer-events: none;
}

.aa-sparkline-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-strong, var(--muted-strong));
  margin-bottom: 6px;
  margin-top: 4px;
}

.aa-sparkline {
  background: var(--panel-soft, var(--panel-soft));
  border: 1px solid var(--line, var(--line));
  border-radius: 6px;
  padding: 8px 10px 4px;
  margin-bottom: 16px;
}

.aa-spark-svg { display: block; width: 100%; height: auto; }
.aa-spark-axis { stroke: var(--line, #cbd5e1); stroke-width: 1; }
.aa-spark-path {
  fill: none;
  stroke: var(--teal, #2563a8);
  stroke-width: 1.8;
}
.aa-spark-tick {
  font-size: 9px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  fill: var(--muted, var(--muted));
}

.aa-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line, var(--line));
}

.aa-editor-actions button {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.aa-editor-revert {
  background: transparent;
  color: var(--muted-strong, var(--muted-strong));
  border: 1px solid var(--line, #cbd5e1);
}
.aa-editor-revert:disabled { opacity: 0.5; cursor: not-allowed; }

.aa-editor-cancel {
  background: #fff;
  color: var(--ink, #0f172a);
  border: 1px solid var(--line, #cbd5e1);
}

.aa-editor-save {
  background: var(--teal, #2563a8);
  color: #fff;
  border: 1px solid var(--teal, #2563a8);
}
.aa-editor-save:hover { background: var(--teal-dark, #143965); }

/* Right-pane evidence preview. Phase 2 swaps in the real
   historical-data viewer (filterable samples + fit stats). */
.aa-editor-right {
  background: var(--panel-soft, var(--panel-soft));
  border: 1px dashed var(--line, #cbd5e1);
  border-radius: 8px;
  padding: 16px;
}

.aa-evidence-pending strong {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--muted-strong, var(--muted-strong));
}

.aa-evidence-pending p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted, var(--muted));
}

.aa-evidence-loading {
  font-size: 12px;
  color: var(--muted, var(--muted));
  padding: 8px 0;
}

/* Dashboard headline: the Recommendation panel leads the page full-width
   with a subtle teal accent so the answer reads first, before the
   model/parameter controls and detailed result panels below it. */
.dashboard-recommendation {
  margin-bottom: var(--space-4);
  border-top: 3px solid var(--teal, #2563a8);
}
/* Metric-grid layout now lives on the #dashboard-metric-grid rule below
   together with the empty-state swap (after `.has-run` is set). */

/* Monte Carlo "Run simulation" intro card — same brand-soft panel
   pattern as the dashboard empty state so users recognize them as
   "this is what to do next" surfaces. */
.mc-run-panel .panel-header { gap: var(--space-3); }
.mc-run-hint {
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--brand-border);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--leading-relaxed);
}

/* Subtitle paragraph under any panel head (research studio, MC run,
   etc.) — same muted-secondary treatment used inline in many surfaces,
   now systematized. */
.panel-sub {
  /* Density pass round 4: tighter top margin (--space-1 → 0) and
   * tighter bottom margin (--space-3 → --space-2) so a panel-sub
   * paragraph under a panel-head no longer eats 28px of vertical
   * space between the title and the body content. */
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--leading-normal);
  max-width: 760px;
}

/* Empty state inside the Recommendation card. Before any run the metric
   tiles all show em-dashes, which reads as broken. The empty state
   takes their place: illustration, headline, body, hero CTA. After the
   first run, .has-run is set on the parent and we swap to the metric
   grid. The header Run button stays visible throughout so users can
   re-run without scrolling. */
.dashboard-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  margin: var(--space-3) 0 0;
  background: linear-gradient(180deg, var(--brand-bg) 0%, var(--panel) 100%);
  border-radius: var(--r-md);
}
.dashboard-empty-art {
  width: 96px;
  height: 64px;
  margin-bottom: var(--space-1);
}
.dashboard-empty-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.dashboard-empty-body {
  margin: 0;
  max-width: 460px;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: var(--leading-relaxed);
}
.dashboard-empty-cta {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-md);
  font-weight: 600;
}
/* Show/hide swap. Before any run: empty visible, grid hidden. After:
   grid visible, empty hidden. */
.dashboard-recommendation #dashboard-metric-grid { display: none; }
.dashboard-recommendation.has-run .dashboard-empty { display: none; }
.dashboard-recommendation.has-run #dashboard-metric-grid {
  /* Hero-then-grid hierarchy:
       row 1: Recommended deal — full-width hero, accented background
       row 2: Mean NPV + Probability of positive NPV — co-equal sub-heroes
       row 3: the other 4 metrics — small uniform tiles
     Achieved by spanning the first child across all columns, the next
     two across half each, and the rest in the residual auto-fit row.
     The child-order in the HTML is preserved (Recommended deal is
     :nth-child(1), Mean NPV :nth-child(2), Median :nth-child(3), etc.)
     so the visual hierarchy is purely CSS — no JS reorder.
     This re-weights the previous 7-equal-tiles layout that read every
     metric as equally important — they aren't. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.dashboard-recommendation.has-run #dashboard-metric-grid > div {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-soft);
}
.dashboard-recommendation.has-run #dashboard-metric-grid > div small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: var(--leading-tight);
}
.dashboard-recommendation.has-run #dashboard-metric-grid > div strong {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--leading-tight);
}
/* Hero: Recommended deal spans the full row, gets brand-tinted bg + a
   larger value. The deal name is the single most important answer in
   the whole UI; size it accordingly. */
.dashboard-recommendation.has-run #dashboard-metric-grid > div:nth-child(1) {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--brand-bg) 0%, var(--brand-soft) 100%);
  border-color: var(--brand-border);
  padding: var(--space-4) var(--space-5);
}
.dashboard-recommendation.has-run #dashboard-metric-grid > div:nth-child(1) strong {
  font-size: var(--fs-2xl);
  color: var(--brand-dark);
  letter-spacing: -0.01em;
}
/* Sub-hero: Mean NPV + Probability of positive NPV — second-tier
   answers. Half-width each. Slightly bigger value than the small
   tiles below. */
.dashboard-recommendation.has-run #dashboard-metric-grid > div:nth-child(2),
.dashboard-recommendation.has-run #dashboard-metric-grid > div:nth-child(5) {
  grid-column: span 2;
  background: var(--panel);
  border-color: var(--line-strong);
}
.dashboard-recommendation.has-run #dashboard-metric-grid > div:nth-child(2) strong,
.dashboard-recommendation.has-run #dashboard-metric-grid > div:nth-child(5) strong {
  font-size: var(--fs-xl);
}
/* Tertiary: the remaining tiles (Median, P10–P90, MC trials, Source
   issues) sit in a uniform row of small tiles. */

/* Subtle entrance: fade + slight rise when the metric grid materializes
   after a run completes. 240ms ease so it reads as confidence in the
   result, not flashy animation. */
.dashboard-recommendation.has-run #dashboard-metric-grid {
  animation: dashboard-fade-up 240ms ease-out;
}
@keyframes dashboard-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Hover lift on hero tile — reinforces it's the headline answer. */
.dashboard-recommendation.has-run #dashboard-metric-grid > div:nth-child(1) {
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.dashboard-recommendation.has-run #dashboard-metric-grid > div:nth-child(1):hover {
  box-shadow: 0 2px 12px rgba(20, 57, 101, 0.10);
  transform: translateY(-1px);
}

/* Honor reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .dashboard-recommendation.has-run #dashboard-metric-grid {
    animation: none;
  }
  .dashboard-recommendation.has-run #dashboard-metric-grid > div:nth-child(1) {
    transition: none;
  }
  .dashboard-recommendation.has-run #dashboard-metric-grid > div:nth-child(1):hover {
    transform: none;
  }
}
/* The Mean NPV tile carries a density curve (fixed 220px SVG); let it
   shrink to its tile in the denser grid rather than overflow. */
.dashboard-recommendation .metric-density svg {
  max-width: 100%;
  height: auto;
}
/* Headline insight: one synthesized sentence summarizing the call,
   the NPV economics, and how decision-grade the inputs are. */
.recommendation-insight {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line, var(--line));
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-strong, var(--muted-strong));
}
.recommendation-insight[hidden] { display: none; }

/* Negotiation outlook: the recommended deal is the owner's view, but a
   deal has two sides. Show the seller's walk-away (WTA), the likely
   clearing price, and the buyers' ceiling (WTP) side by side so the
   reader can see the counterparty's position. Sourced from the
   bargaining report's lead-asset bracket. */
.negotiation-summary {
  margin-top: var(--space-4);
  padding-top: 14px;
  border-top: 1px solid var(--line, var(--line));
}
.negotiation-summary[hidden] { display: none; }
.negotiation-head strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}
.negotiation-head small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, var(--muted));
}
.negotiation-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.negotiation-col {
  padding: 10px 12px;
  border: 1px solid var(--line, var(--line));
  border-radius: var(--r-sm, 8px);
  background: var(--panel-soft, var(--panel-soft));
}
.negotiation-col small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, var(--muted));
}
.negotiation-col strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}
.negotiation-col span {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-strong, var(--muted-strong));
}
.negotiation-col.seller { border-left: 3px solid var(--teal, #2563a8); }
.negotiation-col.buyer { border-left: 3px solid var(--variant); }
.negotiation-col.clearing { border-left: 3px solid var(--amber-strong); }
.negotiation-note {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.negotiation-note.warn { color: var(--amber-strong); font-weight: 600; }

/* ---- Export tab ---- */
/* Left-aligned page (matches Assumptions/Library), not a lone card
   floating in the middle of an empty viewport. */
.export-page { padding: 24px 28px 48px; max-width: 1100px; }
.export-header { margin-bottom: 20px; }
.export-header h2 { margin: 0; }
.export-sub {
  margin: 6px 0 0;
  color: var(--muted-strong, var(--muted-strong));
  font-size: 13px;
  line-height: 1.6;
  max-width: 72ch;
}
.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.export-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
}
.export-card--primary {
  border-color: var(--teal, #2563a8);
  box-shadow: 0 1px 4px rgba(37, 99, 168, 0.10);
}
.export-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.export-fmt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted, var(--muted));
  background: var(--panel-soft, var(--line-soft));
  border-radius: 4px;
  padding: 2px 6px;
}
.export-card p {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-strong, var(--muted-strong));
  flex: 1;
}
.export-card button {
  align-self: flex-start;
  padding: 9px 16px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid var(--line, #cbd5e1);
  background: #fff;
  cursor: pointer;
}
.export-card button.primary {
  background: var(--teal, #2563a8);
  color: #fff;
  border-color: var(--teal, #2563a8);
}

/* P&L "see also" panels — pointers to the canonical Assumption audit
   and Export tabs (the duplicated Source Review Queue and Export Pack
   sections were removed from P&L to keep it focused on cash flow). */
.pnl-seealso p {
  margin: 0;
  color: var(--muted-strong, var(--muted-strong));
  font-size: 13px;
  line-height: 1.6;
}
.pnl-seealso a {
  color: var(--teal, #2563a8);
  font-weight: 600;
  text-decoration: none;
}
.pnl-seealso a:hover { text-decoration: underline; }

/* ---- Library tab (org assumption library manager) ---- */
.library-page { padding: var(--space-5); }
.library-header { margin-bottom: var(--space-4); }
.library-header h2 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--leading-tight);
}
.library-sub {
  margin: var(--space-1) 0 0;
  color: var(--muted-strong);
  font-size: var(--fs-md);
  line-height: var(--leading-relaxed);
  max-width: 72ch;
}

.library-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}
.lib-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--muted-strong);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--leading-tight);
}
.lib-tab.active {
  color: var(--teal-strong);
  border-bottom-color: var(--teal);
}

.library-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.library-filter {
  flex: 1;
  min-width: 240px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
}
#library-create-pack-btn[hidden] { display: none; }

.library-table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.library-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.library-table th, .library-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.library-table th {
  background: var(--panel-soft);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.lib-status {
  display: inline-block;
  padding: 2px var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  white-space: nowrap;
  line-height: var(--leading-tight);
}
.lib-status-active   { background: var(--teal-soft); color: var(--teal-strong); }
.lib-status-pending  { background: var(--amber-soft); color: var(--amber); }
.lib-status-rejected { background: rgba(185, 28, 28, 0.12); color: var(--red-strong); }
.lib-status-retired  { background: var(--panel-soft); color: var(--muted-strong); }

.lib-actions { white-space: nowrap; }
.lib-actions button {
  padding: 4px var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  margin-right: var(--space-1);
  color: var(--ink);
}
.lib-actions button:hover { background: var(--panel-soft); }
.lib-actions button.primary {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.lib-actions button.primary:hover { background: var(--teal-strong); }
.lib-meta {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Selection checkboxes — minimal column width. */
.lib-select-col, .aa-select-col { width: 32px; }
.lib-select-cell, .aa-select-cell { text-align: center; }

/* Packs view */
.library-packs-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.library-packs-empty {
  color: var(--muted, var(--muted));
  font-size: 13px;
  padding: 12px 0;
}
.library-pack-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}
.lpc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lpc-head strong { font-size: 14px; }
.lpc-count { margin-left: auto; font-size: 11px; color: var(--muted, var(--muted)); }
.lpc-desc { font-size: 12px; color: var(--muted-strong, var(--muted-strong)); margin: 6px 0; }
.lpc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lib-tag {
  background: var(--panel-soft, var(--line-soft));
  color: var(--muted-strong, var(--muted-strong));
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}
.lpc-actions { margin-top: 10px; }
.lpc-actions button {
  padding: 4px 10px; font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: #fff; cursor: pointer;
}

/* Bulk-pull button mirrors the apply-btn behavior. */
#assumptions-bulk-pull-btn {
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  border: 1px solid var(--line, #cbd5e1);
  background: #fff;
  color: var(--muted-strong, var(--muted-strong));
  cursor: pointer;
}
#assumptions-bulk-pull-btn:hover:not(:disabled) {
  border-color: var(--teal, #2563a8);
  color: var(--teal, #2563a8);
}
#assumptions-bulk-pull-btn[hidden] { display: none; }

/* Org library panel (top of editor right pane). Lists curated
   entries with a Use button each, plus a Promote-current action. */
.aa-library-panel {
  background: #fff;
  border: 1px solid var(--line, var(--line));
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.aa-library-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.aa-library-head strong {
  font-size: 13px;
  color: var(--ink, #0f172a);
}
.aa-library-head small {
  font-size: 11px;
  color: var(--muted, var(--muted));
}
.aa-lib-promote {
  margin-left: auto;
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: var(--r-xs);
  background: #fff;
  color: var(--muted-strong, var(--muted-strong));
  cursor: pointer;
}
.aa-lib-promote:hover:not(:disabled) {
  border-color: var(--teal, #2563a8);
  color: var(--teal, #2563a8);
}
.aa-lib-promote:disabled { opacity: 0.7; cursor: default; }

.aa-library-empty {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, var(--muted));
}
.aa-library-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aa-library-item {
  border: 1px solid var(--line, var(--line-soft));
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel-soft, var(--panel-soft));
}
.aa-library-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aa-library-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #0f172a);
}
.aa-library-range {
  font-size: 11px;
  color: var(--muted-strong, var(--muted-strong));
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.aa-library-meta {
  font-size: 11px;
  color: var(--muted, var(--muted));
  margin-top: 4px;
}
.aa-lib-use {
  margin-left: auto;
  padding: 3px 10px;
  font-size: 11px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: var(--r-xs);
  background: #fff;
  color: var(--muted-strong, var(--muted-strong));
  cursor: pointer;
}
.aa-lib-use:hover {
  border-color: var(--teal, #2563a8);
  color: var(--teal, #2563a8);
}

/* @RISK-style historical fit panel: empirical histogram + fitted
   density overlay + candidate ranking. */
.aa-evidence-head strong {
  display: block;
  font-size: 13px;
  color: var(--ink, #0f172a);
  margin-bottom: 2px;
}
.aa-evidence-head small {
  display: block;
  font-size: 11px;
  color: var(--muted, var(--muted));
  margin-bottom: 8px;
}

.aa-fitplot {
  background: #fff;
  border: 1px solid var(--line, var(--line));
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 10px;
}
.aa-fitplot-svg { display: block; width: 100%; height: auto; }
.aa-fit-bar { fill: rgba(100, 116, 139, 0.45); }
.aa-fit-curve {
  fill: none;
  stroke: var(--teal, #2563a8);
  stroke-width: 2;
}

.aa-fit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.aa-fit-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, var(--muted));
  padding: 4px 6px;
  border-bottom: 1px solid var(--line, var(--line));
}
.aa-fit-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--line, var(--line-soft));
  font-variant-numeric: tabular-nums;
}
.aa-fit-best { background: rgba(14, 111, 105, 0.05); }
.aa-fit-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--teal, #2563a8);
  background: rgba(37, 99, 168, 0.12);
  padding: 1px var(--space-1);
  border-radius: 3px;
}
.aa-fit-aic { color: var(--muted-strong, var(--muted-strong)); }
.aa-fit-use {
  padding: 3px 10px;
  font-size: 11px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: var(--r-xs);
  background: #fff;
  cursor: pointer;
}
.aa-fit-use:hover { border-color: var(--teal, #2563a8); color: var(--teal, #2563a8); }

.assumptions-controls {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.assumptions-controls[hidden] { display: none; }
.assumptions-filter {
  flex: 1; min-width: 240px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; font-family: inherit; background: var(--panel);
}
.assumptions-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.ach-chip {
  font-size: 11px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: var(--muted-strong);
  cursor: pointer; font-family: inherit;
}
.ach-chip:hover { border-color: var(--teal); color: var(--teal-strong); }
.ach-chip.active {
  background: var(--teal); color: #fff; border-color: var(--teal-strong);
}
.assumptions-count { font-size: 12px; color: var(--muted); white-space: nowrap; }

.assumptions-table-wrap {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden;
  /* 11 columns can exceed the viewport on narrower screens — let the
     table scroll horizontally rather than crushing column content. */
  overflow-x: auto;
}
.assumptions-table-wrap[hidden] { display: none; }
.assumptions-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.assumptions-table th, .assumptions-table td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.assumptions-table th {
  background: var(--panel-soft); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-strong);
}
.assumptions-table th.sortable { cursor: pointer; user-select: none; }
.assumptions-table th.sortable:hover { color: var(--ink); }
.assumptions-table th.sort-asc::after { content: " ▲"; font-size: 9px; }
.assumptions-table th.sort-desc::after { content: " ▼"; font-size: 9px; }
.assumptions-table tbody tr:hover { background: var(--panel-soft); }
.aa-param code { font-size: 12px; color: var(--ink); }
.aa-reason { font-size: 11px; color: var(--muted); margin-top: 2px; }
.aa-cat, .aa-val, .aa-owner { color: var(--ink-soft); }
.aa-src { color: var(--ink-soft); max-width: 220px; word-break: break-word; }
.aa-meta { font-size: 10px; color: var(--muted); margin-top: 1px; }
.pri {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px; text-transform: uppercase;
}
.pri-1 { background: rgba(185, 28, 28, 0.15); color: var(--red-strong); }
.pri-2 { background: rgba(180, 83, 9, 0.15); color: var(--amber-strong); }
.pri-3 { background: rgba(21, 128, 61, 0.12); color: var(--green-strong); }
.pri-none { background: var(--panel-soft); color: var(--muted); }
.aa-chip {
  display: inline-block; font-size: 10px; padding: 2px 7px;
  border-radius: 10px; font-weight: 600; white-space: nowrap;
}
.chip-fresh { background: rgba(21, 128, 61, 0.15); color: var(--green-strong); }
.chip-warn { background: rgba(180, 83, 9, 0.15); color: var(--amber-strong); }
.chip-err { background: rgba(185, 28, 28, 0.15); color: var(--red-strong); }
.chip-muted { background: var(--panel-soft); color: var(--muted); }
.aa-empty { padding: 30px; text-align: center; color: var(--muted); font-style: italic; }

/* Category section header rows (Commercial / Clinical-Reg / Financial /
   Tax / Legal-Deal). A sticky-feeling band introducing each group. */
.aa-section-row td {
  background: var(--panel-soft);
  border-bottom: 2px solid var(--line);
  padding: 8px 12px;
}
.aa-section-row:hover td { background: var(--panel-soft); }
.aa-section-name {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink);
}
.aa-section-count {
  display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 1px 7px;
}

/* Home → import drop zone (Customer-ready 2/4). */
.portfolio-start-dropzone {
  margin-top: 16px;
  padding: 18px 22px;
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease,
              transform 120ms ease;
  color: var(--ink-soft);
}
.portfolio-start-dropzone:hover,
.portfolio-start-dropzone.dropzone-hover {
  border-color: var(--teal);
  background: var(--panel);
  color: var(--ink);
}
.portfolio-start-dropzone.dropzone-hover {
  transform: scale(1.01);
}
.portfolio-start-dropzone strong {
  display: block;
  font-size: 13px;
  color: inherit;
}
.portfolio-start-dropzone small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.5;
}
.portfolio-start-dropzone svg { flex-shrink: 0; color: var(--teal-strong); }
.portfolio-start-dropzone:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.portfolio-start-actions button .icon {
  width: 16px;
  height: 16px;
}

/* Driver picker on the what-if hero — replaces the static driver name. */
.dh-whatif-driver-row { margin-bottom: 12px; }
.dh-whatif-select {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  cursor: pointer;
}
.dh-whatif-select:hover { border-color: var(--green-tint); }
.dh-whatif-select:focus-visible {
  outline: 2px solid var(--green-tint);
  outline-offset: 2px;
}
.dh-whatif-select option { color: #0f1a2e; background: #ffffff; }

/* DistViz micro-visual primitives — used by various charts that
   embed the inline SVG range bar / ratio strip / sparkline. */
.distviz-rangebar, .distviz-ratiostrip, .distviz-spark {
  display: block;
  max-width: 100%;
  height: auto;
}


/* =========================================================================
   Consulting-grade Home — McKinsey / ZS visual register
   -------------------------------------------------------------------------
   Restrained palette, hairline rules, tabular numerics, numbered sections
   and tiles via CSS counters (no markup churn). Overrides the friendlier
   defaults defined above. Scoped to .home-landing so other tabs are
   untouched.
   ========================================================================= */

.home-landing { counter-reset: home-section-counter; padding-top: 24px; }

/* --- Hero: left-aligned, hairline-divided, less marketing voice --- */
.home-landing .home-hero {
  text-align: left;
  margin: 0 0 32px;
  padding: 4px 0 24px;
  border-bottom: 1px solid var(--line);
}
.home-landing .home-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.home-landing .home-subtitle {
  font-size: 13.5px;
  color: var(--muted-strong);
  margin: 0 0 18px;
  max-width: 72ch;
  margin-left: 0;
  margin-right: 0;
  line-height: 1.55;
}
.home-landing .home-quick-start { justify-content: flex-start; }
.home-landing .home-search-input {
  border: 1px solid var(--line-strong);
  border-radius: 4px;
}
.home-landing .home-search-input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(14, 42, 71, 0.10);
}
.home-landing .home-search-btn {
  border-radius: 4px;
  padding: 12px 18px;
}
.home-landing .home-search-hint {
  text-align: left;
  color: var(--muted);
  font-size: 11.5px;
}

/* --- Section header: numbered, top-ruled, tracked small caps --- */
.home-landing .home-section { counter-increment: home-section-counter; margin-bottom: 36px; }
.home-landing .home-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
  padding: 8px 0 0;
  border-top: 2px solid var(--ink);
  border-bottom: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.home-landing .home-section-title::before {
  content: counter(home-section-counter, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  color: var(--teal-strong);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* --- Tile grid: sharp corners, numbered prefix, no decorative emoji --- */
.home-landing .home-tiles { counter-reset: home-tile-counter; gap: 16px; }
.home-landing .home-tile {
  counter-increment: home-tile-counter;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 18px 16px;
  min-height: 0;
  transition: border-color 120ms;
  position: relative;
}
.home-landing .home-tile::before {
  content: counter(home-tile-counter, decimal-leading-zero);
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--teal-strong);
  letter-spacing: 0.10em;
  margin-bottom: 8px;
}
.home-landing .home-tile-icon { display: none; }   /* drop emoji */
.home-landing .home-tile:hover {
  border-color: var(--navy);
  box-shadow: none;
  transform: none;
}
.home-landing .home-tile strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.home-landing .home-tile span {
  font-size: 12.5px;
  color: var(--muted-strong);
  line-height: 1.5;
}
.home-landing .home-tile-delivers {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  font-style: normal;
}
.home-landing .home-tile:hover .home-tile-delivers { color: var(--ink-soft); }

/* --- Data library: present as an Exhibit, not a hero card --- */
.home-landing .data-library {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 22px 22px;
  background: var(--panel);
  margin: 0 0 32px;
}
.home-landing .data-library-header {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.home-landing .data-library-header h3 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 4px;
}
.home-landing .data-library-header h3::before {
  content: "Exhibit · ";
  color: var(--muted);
  letter-spacing: 0.14em;
}
.home-landing .data-library-header p {
  font-size: 12.5px;
  color: var(--muted-strong);
  margin: 0;
  line-height: 1.55;
}
.home-landing .data-library-cell {
  background: transparent;
  border-left: none;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  padding: 10px 0 0;
}
.home-landing .data-library-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.home-landing .data-library-label {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
  margin-top: 6px;
}
.home-landing .data-library-sub {
  font-size: 9.5px;
  letter-spacing: 0.10em;
  font-weight: 600;
  color: var(--muted);
}

/* --- Scale strip: tabular numerals, hairline separator above --- */
.home-landing .home-scale-strip {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-strong);
  border-top: 1px solid var(--line-soft);
  margin-top: 18px;
  padding-top: 12px;
  letter-spacing: 0.01em;
}

/* --- Portfolio Workspace card sits above .home-landing; flatten too --- */
.portfolio-start-panel {
  border-radius: 4px;
}
.portfolio-start-panel .eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--muted);
}
.portfolio-start-panel h2 {
  letter-spacing: -0.01em;
}

/* Brand is a link to the Start landing — keep it visually a brand. */
a.app-brand {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* The Start landing is its own surface; the workspace sub-nav is for the
   five workspaces, so hide it while on Start. The case bar and the
   "choose a portfolio" panel are also redundant here — the landing has
   its own new-product / new-portfolio actions. */
body[data-active-workspace="start"] .app-tabs,
body[data-active-workspace="start"] .case-bar,
body[data-active-workspace="start"] .portfolio-start-panel {
  display: none;
}

/* Once a portfolio is loaded, the "Choose a portfolio" panel is just
   cross-workspace noise on every Product/Portfolio sub-tab. The header
   case-bar already shows the active case; portfolio switching lives in
   the side drawer. Hide the start-panel when a portfolio is active. */
body[data-portfolio-state="active"] .portfolio-start-panel {
  display: none;
}

/* Capital and Strategy operate above the per-portfolio level (firm-wide
   capital allocation; board-level multi-year strategy). The "Choose a
   portfolio" panel is not relevant to either — those workspaces score
   the whole firm against the policy and target library, not a single
   portfolio. Hide it so the workspace's own content fills the page
   rather than sitting under an unrelated header. */
body[data-active-workspace="capital"] .portfolio-start-panel,
body[data-active-workspace="strategy"] .portfolio-start-panel {
  display: none;
}

/* ============================ Start page ============================== */
/* Landing / case browser: greeting + new-work actions, then lists of the
   user's saved products and portfolios, and a link into the library. */

.start-landing {
  max-width: 920px;
  margin: 0 auto;
  padding: 8px 0 48px;
}

.start-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.start-hero-text .eyebrow {
  margin: 0 0 6px;
}
.start-greeting {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.start-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-md);
  max-width: 680px;
  line-height: var(--leading-relaxed);
}
.start-sub-link {
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--teal-strong);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.start-sub-link:hover { text-decoration: underline; }
/* Layout doctrine §11 — distinct elements never abut. Cross-product
   entry-point buttons (+ New portfolio, Research an indication) get
   --space-3 between them; new-product creation moved out of the hero
   to the template-tile grid so the dropdown+button compound is no
   longer here. */
.start-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.start-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 22px 0 8px;
}
.start-search svg {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
}
.start-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md, 8px);
  background: var(--panel);
  font-size: var(--fs-md);
  color: var(--ink);
}
.start-search input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.start-section {
  margin-top: 26px;
}
.start-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.start-section-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.start-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.start-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 8px);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.start-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 1px 6px rgba(15, 26, 46, 0.06);
}
.start-card.is-active {
  border-color: var(--teal);
  background: var(--teal-bg);
}
.start-card-body {
  min-width: 0;
}
.start-card-title {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.start-card-meta {
  margin-top: 3px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.start-open,
.start-open-portfolio {
  flex: none;
}

.start-empty {
  grid-column: 1 / -1;
  padding: 18px;
  color: var(--muted);
  font-size: var(--fs-md);
  background: var(--panel-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md, 8px);
}

.start-library-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-md);
}

/* ============================ Product Setup =========================== */

.product-setup {
  /* Was 920px — too narrow for the R&D stages card (three driver columns
     overflowed the right edge). Bumped to 1320px so stage cards fit with
     the 48px column-gap that keeps adjacent Low/Mode/High inputs visually
     distinct across driver columns. Still narrower than the workspace box
     so text-led sections stay legible. */
  max-width: 1320px;
  margin: 0 auto;
  padding: 4px 0 48px;
}
.setup-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.setup-head h1 {
  margin: 4px 0 0;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.setup-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-md);
}

.setup-section {
  margin-top: 24px;
}
.setup-section > h2,
.setup-section-head h2 {
  margin: 0 0 12px;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.setup-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.setup-startfrom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.setup-startfrom-item label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-strong);
  margin-bottom: var(--space-1);
}
.setup-inline {
  display: flex;
  gap: 6px;
}
.setup-inline input,
.setup-inline select {
  flex: 1;
  min-width: 0;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.setup-grid label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-strong);
}

/* Setup identity card — compact case summary shown when a case is loaded.
   Displays above asset tabs as a breadcrumb/chip row so the analyst can
   confirm context at a glance without opening the full Product form.
   §3 anatomy: this is NOT a panel; it's a within-panel status bar. */
.setup-identity-card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
}
.setup-identity-name {
  font-weight: 600;
  color: var(--ink);
}
.setup-identity-field {
  color: var(--muted-strong);
}
.setup-identity-sep {
  color: var(--muted);
  user-select: none;
}

.setup-stages {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Stage card — refined. The card OWNS the row grid (8 explicit rows: an
   eyebrow row + the seven canonical dist-editor rows). Each driver column
   is a CSS subgrid that snaps onto those rows, so every element across the
   three columns sits on the same y baseline (Apply buttons aligned,
   params row aligned, divergence aligned). This is the §8 cross-column
   rule from docs/layout_doctrine.md — no more 8px Apply drift. */
.setup-stage-row {
  display: grid;
  grid-template-columns:
    minmax(200px, 0.8fr)          /* stage name (narrower than drivers) */
    repeat(3, minmax(240px, 1fr)) /* driver columns */
    auto;                         /* remove button */
  /* Nine rows: eyebrow title, then the eight canonical dist-editor rows
     (top / lock / family / params / viz / prior-text / prior-action /
     divergence). Apply has its own row so it aligns across columns. */
  grid-template-rows: repeat(9, auto);
  /* Generous column-gap (--space-7 = 48px) so the three driver columns
     read as distinct sections, not as one solid block. With Low/Mode/High
     inputs that stretch to the column edge, a smaller gap let the High
     cell of column N visually abut the Low cell of column N+1. row-gap
     stays modest so the vertical rhythm doesn't feel padded. */
  column-gap: var(--space-7);
  row-gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.setup-stage-row > .setup-stage-name {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  font-weight: 600;
  font-size: var(--fs-md);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  text-transform: none;
  letter-spacing: 0;
}
.setup-stage-row > .setup-stage-remove {
  grid-column: -2 / -1;
  grid-row: 1;
  align-self: start;
  /* Generous hit target — the previous default-button sizing put the
     close × right next to the drag/title region and made it easy to
     misclick when reaching for the stage name. */
  min-width: 32px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
}
.setup-stage-row > .setup-stage-remove:hover {
  color: var(--err);
  background: var(--err-soft, var(--panel-soft));
}

/* A driver column = subgrid spanning rows 1-8 of the stage card. The
   eyebrow goes in row 1; the editor's body occupies rows 2-8 via its own
   nested subgrid. */
.setup-stage-row > .stage-driver {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  gap: 0;
  min-width: 0;
}
.stage-driver > .stage-driver-title { grid-row: 1; align-self: end; }
.stage-driver > .dist-editor-mount {
  grid-row: 2 / -1;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
}
.setup-stage-row .dist-editor-body {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  gap: 0;
  min-width: 0;
}
/* Each of the eight canonical editor rows lives on a known grid row.
   Apply has its own row so it shares a baseline across columns; the
   divergence flag too. */
.setup-stage-row .dist-editor-top                { grid-row: 1; }
.setup-stage-row .dist-editor-lock               { grid-row: 2; align-self: center; }
.setup-stage-row .dist-editor-family             { grid-row: 3; }
.setup-stage-row .dist-editor-params             { grid-row: 4; }
.setup-stage-row .dist-editor-viz                { grid-row: 5; }
.setup-stage-row .dist-editor-prior              { grid-row: 6; align-self: start; }
.setup-stage-row .dist-editor-prior-actions      { grid-row: 7; align-self: start; }
.setup-stage-row .dist-editor-divergence         { grid-row: 8; align-self: start; }

@media (max-width: 1320px) {
  /* Below ~1320px the three driver columns don't fit comfortably side by
     side with the 48px column-gap. Drop subgrid; each driver becomes its
     own full-width stack. */
  .setup-stage-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    row-gap: var(--space-3);
  }
  .setup-stage-row > .setup-stage-name { grid-column: 1; grid-row: 1; align-self: stretch; }
  .setup-stage-row > .setup-stage-remove { grid-column: 2; grid-row: 1; }
  .setup-stage-row > .stage-driver {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-rows: none;
    gap: var(--space-2);
  }
  .stage-driver > .dist-editor-mount {
    grid-row: auto;
    grid-template-rows: none;
    display: block;
  }
  .setup-stage-row .dist-editor-body {
    grid-template-rows: none;
    gap: var(--space-2);
    display: grid;
  }
  .setup-stage-row .dist-editor-top,
  .setup-stage-row .dist-editor-lock,
  .setup-stage-row .dist-editor-family,
  .setup-stage-row .dist-editor-params,
  .setup-stage-row .dist-editor-viz,
  .setup-stage-row .dist-editor-prior,
  .setup-stage-row .dist-editor-divergence { grid-row: auto; }
}

.setup-asset-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.setup-asset-tab {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm, 6px);
  background: var(--panel);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.setup-asset-tab.active {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-strong);
  font-weight: 600;
}

/* ---- Setup asset-tab strip: filter row (shown above the 12-asset threshold) */
/* §A3: above ASSET_TAB_FILTER_THRESHOLD the flex-wrap strip adds a search
   input so the analyst can narrow tabs without a wall pushing the editor
   below the fold. The wrapper gains --many to signal the capped layout. */
.setup-asset-tabs-wrapper--many .setup-asset-tabs {
  /* ~2 tab rows; 80px is a sanctioned fixed dimension (token-discipline
     ALLOWED_PX) — keeps the strip from pushing the stage editor below the
     fold without introducing an off-scale raw px (layout doctrine §1). */
  max-height: 80px;
  overflow-y: auto;
  margin-bottom: var(--space-2);
}
.setup-asset-tab-filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.setup-asset-tab-filter {
  flex: 1;
  height: var(--control-h, 32px);
  padding: 0 var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm, 6px);
  background: var(--panel);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.setup-asset-tab-filter:focus {
  outline: var(--focus-ring);
  border-color: var(--brand);
}
.setup-asset-tab-filter-count {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
}

/* ---- Shared list-cap expander affordance (§A3 Program) ------------------
   Used by the Dashboard asset table, Products open-case cards, the Pipeline
   timeline rows, and the Optimization calibration asset table.
   One CSS block; §9 component-CSS-lives-in-one-block rule. */
.list-cap-expander-row td {
  padding: var(--space-2) 0;
}
/* Timeline and other non-table contexts: the wrapper is a plain div that
   spans the full grid width and provides the same vertical breathing room. */
.timeline-cap-expander-row {
  grid-column: 1 / -1;
  padding: var(--space-2) var(--space-4);
}
.list-cap-expander {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--brand);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.list-cap-expander:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.list-cap-expander:focus-visible {
  outline: var(--focus-ring);
}
/* Products grid variant: the expander sits below the card grid, full width */
.products-cap-expander-row {
  grid-column: 1 / -1;
  padding: var(--space-2) 0;
}

/* Multi-indication panel — setup_form.js indication section */
.setup-indications {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.setup-indication-row {
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--panel-soft, #fafafa);
}
.setup-indication-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.setup-indication-name {
  flex: 1;
  font-weight: 600;
  font-size: var(--fs-md);
}
.setup-indication-remove {
  color: var(--muted);
  line-height: 1;
  padding: 2px 6px;
}
.setup-indication-remove:hover {
  color: var(--err);
  background: var(--err-soft, var(--panel-soft));
}
.setup-indication-market {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.setup-indication-timing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light, #e4e7ec);
}
.setup-indication-market label,
.setup-indication-timing label {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-sm);
  color: var(--muted);
  gap: 4px;
}
.setup-indication-single-note,
.setup-indication-mutex-note {
  margin: 0;
  padding: 10px 14px;
  background: var(--panel-soft, #fafafa);
  border: 1px solid var(--border-light, #e4e7ec);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.setup-indication-mutex-note {
  border-color: var(--warn-border, #f0b429);
  background: var(--warn-soft, #fffbeb);
  color: var(--warn-ink, #92400e);
}

/* Per-indication territory sub-editor — setup_form.js territory section.
   Nested inside each .setup-indication-row; mirrors indication-row density. */
.setup-territories {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light, #e4e7ec);
}
.setup-territories-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.setup-territories-head .eyebrow {
  flex: none;
}
.setup-territory-count-badge {
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--surface-subtle, #f4f6f9);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1px var(--space-2);
}
.setup-add-territory {
  margin-left: auto;
  font-size: var(--fs-sm);
}
.setup-territory-empty-note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
}
.setup-territory-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.setup-territory-row {
  border: 1px solid var(--line-soft, #eef1f5);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--panel, #fff);
}
.setup-territory-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
}
.setup-territory-label {
  flex: 1;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.setup-territory-remove {
  color: var(--muted);
  line-height: 1;
  padding: 2px 6px;
}
.setup-territory-remove:hover {
  color: var(--err);
  background: var(--err-soft, var(--panel-soft));
}
.setup-territory-market {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.setup-territory-timing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft, #eef1f5);
}
.setup-territory-market label,
.setup-territory-timing label {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-sm);
  color: var(--muted);
  gap: 4px;
}
.setup-territory-share-hint-label input[type="number"] {
  width: 100%;
  max-width: 120px;
}

.setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ---- Products tab (P1 M2b–M2e product-object surface) ------------------- */
/* Products tab — converted to design tokens + component classes per the
   layout doctrine. Spacing on the §1 token scale; pills, badges and the
   card structure follow §9. */
.products-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0 var(--space-4);
}
.products-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--muted-strong);
}
.products-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.products-empty {
  font-size: var(--fs-md);
  color: var(--muted);
  padding: var(--space-6) var(--space-5);
  line-height: var(--leading-relaxed);
  /* Span the full .products-grid width — otherwise the empty state
     occupies one auto-fill column and rags against the left edge. */
  grid-column: 1 / -1;
}
.product-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-xs);
}
.product-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}
.product-card-head strong {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--leading-tight);
}
.product-card-meta {
  font-size: var(--fs-sm);
  color: var(--muted-strong);
  line-height: var(--leading-relaxed);
}
.product-badge {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  line-height: var(--leading-tight);
}
.product-badge-library { background: var(--blue-soft); color: var(--blue); }
.product-badge-client  { background: var(--panel-soft); color: var(--muted-strong); }
.product-badge-variant { background: var(--variant-soft); color: var(--variant-strong); }
.product-card-is-variant { border-left: 3px solid var(--variant); }
/* Signed-out view of the open case's assets — the Products tab shows
   the case's products as read-only cards instead of only the sign-in
   guide, so the tab earns its name as soon as a case is open. */
.product-badge-case { background: var(--brand-soft); color: var(--brand-strong); }
/* Registry identity on open-case cards: green linked NCT badge once a
   trial is attached; amber "pre-NCT" with an explanatory tooltip before. */
.product-badge-nct { background: var(--green-soft); color: var(--green-strong); text-decoration: none; }
.product-badge-prenct { background: var(--amber-soft); color: var(--amber-strong); cursor: help; }
.products-from-case { grid-column: 1 / -1; }
.products-from-case .products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.products-from-case-head {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-strong);
  margin: var(--space-3) 0 var(--space-2);
}
.product-card-from-case-hint { color: var(--muted); font-style: italic; }
.product-card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.product-card-actions button {
  padding: 4px var(--space-2);
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  cursor: pointer;
  color: var(--ink);
  transition: background 0.12s, border-color 0.12s;
}
.product-card-actions button:hover {
  background: var(--panel-soft);
  border-color: var(--line-strong);
}
.product-card-actions button:disabled { opacity: 0.55; cursor: default; }

/* ---- Products tab: info icon + rich summary hovercard ------------------ */
/* The rich popover must escape the card; the surrounding .panel clips with
   overflow:hidden, so opt this one panel out (its content needs no
   clipping) and let the popover overlay freely. */
.tab-view[data-tab="products"] .panel { overflow: visible; }
.product-card-head { position: relative; }
.product-info-wrap { position: relative; display: inline-flex; }
.product-info {
  width: 16px; height: 16px; line-height: 14px;
  padding: 0; border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-soft, var(--line-soft));
  color: var(--muted-strong, var(--muted-strong));
  font-size: 11px; font-style: italic; font-weight: 700;
  cursor: pointer; text-align: center;
}
.product-info:hover, .product-info:focus { background: var(--info-soft); color: var(--info-strong); outline: none; }
.product-info[aria-expanded="true"] { background: var(--info); color: #fff; border-color: var(--info); }

/* The rich SVG summary popover. Hover peeks; click pins (aria-expanded)
   so the charts stay put and the copy button is reachable. */
.product-card-pop {
  position: absolute;
  top: calc(100% + 8px); left: 0;
  z-index: 50;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  filter: drop-shadow(0 10px 28px rgba(15, 23, 42, 0.35));
}
.product-info-wrap:hover .product-card-pop,
.product-info:focus + .product-card-pop,
.product-info[aria-expanded="true"] + .product-card-pop {
  opacity: 1; visibility: visible; transform: translateY(0);
  /* Interactive while shown so the pointer can move into the card to
     reach Copy (classic hovercard); moving away drops :hover and hides. */
  pointer-events: auto;
}
.product-pop-svg { display: block; }
.product-pop-svg svg { display: block; border-radius: 12px; }
/* Icon-only copy button (universal two-square "documents" glyph). Sits on
   the light card surface; restyled from a labeled button. */
.product-pop-copy {
  position: absolute; bottom: 10px; right: 10px;
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft, #fafbfd);
  color: var(--muted-strong, var(--muted-strong));
  cursor: pointer;
}
.product-pop-copy:hover { background: var(--teal-soft, #e8eff8); color: var(--teal, #2563a8); }
.product-pop-copy:focus { outline: 2px solid var(--teal, #2563a8); outline-offset: 1px; }
.product-pop-toast {
  position: absolute; bottom: 16px; right: 48px;
  font-size: 10.5px; color: var(--teal, #2563a8);
}

/* ---- Theme A: VOI + Defensibility expander on the product card ---------- */
.product-card-insights {
  margin-top: 6px; padding-top: 8px;
  border-top: 1px dashed var(--line, #e3e8ef);
  display: flex; flex-direction: column; gap: 6px;
}
.product-card-insights-toggle {
  font-size: 11px; padding: 3px 8px;
  align-self: flex-start;
}
.product-card-insights-panel {
  font-size: 11px; color: var(--ink, #0f1a2e);
  background: var(--panel-soft, #fafbfd);
  border: 1px solid var(--line, #e3e8ef);
  border-radius: var(--r-xs);
  padding: 6px 8px;
}
.insights-section-title {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted-strong, var(--muted-strong));
  margin-bottom: 4px;
}
.insights-list { margin: 0; padding-left: 16px; }
.insights-list-flags { padding-left: 0; list-style: none; }
.insights-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 6px 10px; padding: 2px 0;
  border-bottom: 1px solid var(--line-soft, #eef1f5);
}
.insights-row:last-child { border-bottom: 0; }
.insights-row-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--ink, #0f1a2e); overflow-wrap: anywhere;
}
.insights-row-swing { font-size: 10.5px; color: var(--muted-strong, var(--muted-strong)); white-space: nowrap; }
.insights-citation {
  grid-column: 1 / -1;
  font-size: 9.5px; font-style: italic; color: var(--muted, #5b6b7a);
}
.insights-direction-high { background: linear-gradient(90deg, var(--amber-tint) 0 4px, transparent 4px); padding-left: 6px; }
.insights-direction-low { background: linear-gradient(90deg, var(--brand-soft) 0 4px, transparent 4px); padding-left: 6px; }
.insights-direction-match { background: linear-gradient(90deg, #d1fae5 0 4px, transparent 4px); padding-left: 6px; }
.insights-empty { font-size: 11px; color: var(--muted, #5b6b7a); padding: 4px 0; }
.insights-hint { font-size: 10px; color: var(--muted, #5b6b7a); margin: 4px 0 0; font-style: italic; }

/* ---- Portfolio product versions tab (P2.d pin/unpin UI) ----------------- */
.versions-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-1) 0 var(--space-4);
}
.versions-portfolio-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--muted-strong);
}
.versions-portfolio-pick select {
  font-size: var(--fs-md);
  padding: 4px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
}
.versions-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.versions-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.versions-empty {
  font-size: var(--fs-md);
  color: var(--muted);
  padding: var(--space-5) var(--space-1);
  line-height: var(--leading-relaxed);
}
.versions-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  box-shadow: var(--shadow-xs);
}
.versions-row-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.versions-row-head strong {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
}
.versions-row-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.versions-row-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.versions-row-actions select, .versions-row-actions button {
  font-size: var(--fs-sm);
}
.versions-row-actions select {
  padding: 3px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
}
.versions-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px var(--space-2);
  border-radius: var(--r-pill);
  white-space: nowrap;
  line-height: var(--leading-tight);
}
.versions-badge-pinned { background: var(--variant-soft); color: var(--variant-strong); }
.versions-badge-update { background: var(--amber-soft); color: var(--amber); }
.versions-pull { font-weight: 600; }
/* ---- Calibration scorecard (Theme C model-credibility surface) --------- */
.calibration-headline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin: var(--space-1) 0 var(--space-5);
}
.calibration-stat {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
}
.calibration-stat-value {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.calibration-stat-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: var(--space-1);
}
.calibration-featured-card {
  background: var(--teal-soft);
  border: 1px solid var(--teal);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  position: relative;
}
.calibration-featured-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-strong);
}
.calibration-featured-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--ink);
  margin-top: var(--space-1);
}
.calibration-featured-meta {
  font-size: var(--fs-sm);
  color: var(--muted-strong);
  margin: 2px 0 var(--space-3);
}
.calibration-featured-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: var(--fs-md);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.calibration-featured-numbers .lbl {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.calibration-featured-note {
  font-size: var(--fs-sm);
  color: var(--muted-strong);
  margin: var(--space-3) 0 0;
  font-style: italic;
  line-height: var(--leading-relaxed);
}
.calibration-table-wrap { overflow-x: auto; }
.calibration-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.calibration-table th, .calibration-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.calibration-table th {
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--panel-soft);
}
/* Sortable calibration columns. Mirrors the .targets-grid-sortable
   pattern (doctrine §12) so the two main analyst tables share one
   interaction vocabulary. */
.calibration-table th.calibration-sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.calibration-table th.calibration-sortable:hover,
.calibration-table th.calibration-sortable:focus-visible {
  background: var(--brand-soft);
  color: var(--brand-strong);
  outline: none;
}
.calibration-table th.calibration-sortable.is-sort-active {
  color: var(--ink);
}
.calibration-sort-indicator {
  font-size: 0.85em;
  color: var(--muted);
}
.calibration-table th.is-sort-active .calibration-sort-indicator {
  color: var(--ink);
}
/* Footnote under the calibration table — explains the active sort and
   why "biggest misses first" is the default, so the analyst doesn't
   have to infer it from the data. */
.calibration-table-footnote {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--muted);
  font-style: italic;
}
.calibration-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.calibration-verdict {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: var(--leading-tight);
}
.calibration-verdict-match { background: var(--teal-soft); color: var(--teal-strong); }
.calibration-verdict-close { background: var(--brand-soft); color: var(--blue-strong); }
.calibration-verdict-directional { background: var(--amber-tint); color: var(--amber-strong); }
.calibration-verdict-miss { background: var(--red-tint); color: var(--red-strong); }
.calibration-verdict-n\/a { background: var(--line-soft); color: var(--muted-strong); }

/* Ratio column: numeric value on top, a divergence-from-1.0× bar
   beneath. A center line marks the 1.0× pivot; a colored bar extends
   left (under-shot — red, model came in low) or right (over-shot —
   green, model came in high). The bar length is proportional to the
   distance from 1.0× capped at 0.5, so a 0.5× or 1.5× ratio fills its
   half. Pure CSS — the JS only writes `--ratio-delta-abs` (0..0.5)
   inline. Reads at a glance whether the misses skew systematically
   one direction (doctrine §17.2 — color paired with sign + position). */
.calibration-table td.num-ratio {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ratio-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.ratio-divergence {
  position: relative;
  display: block;
  margin-top: var(--space-1);
  height: var(--space-1);
  background: var(--line-soft);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.ratio-divergence::before {
  /* Center pivot line at 1.0×. A 1px hairline marker through the
     bar's vertical midline. */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--muted);
}
.ratio-divergence-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  /* `--ratio-delta-abs` is in [0, 0.5]; the absolute distance from 1.0×
     drives the half-bar's width as a fraction of the 50% half-track.
     Side + color come from the .is-under / .is-over modifier. */
  width: calc(min(0.5, max(0, var(--ratio-delta-abs, 0))) * 200%);
}
.ratio-divergence-fill.is-under {
  right: 50%;
  background: var(--red-soft);
  border-right: 1px solid var(--red);
}
.ratio-divergence-fill.is-over {
  left: 50%;
  background: var(--green-soft);
  border-left: 1px solid var(--green);
}

/* Featured-card numbers — the ratio block hosts the same divergence
   bar. Layout it as a stacked block so the bar can sit beneath the
   number without breaking the side-by-side row of stats. */
.calibration-featured-numbers > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.calibration-featured-numbers .ratio-block {
  min-width: var(--space-7);
}
.calibration-featured-numbers .ratio-block .ratio-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.calibration-empty { font-size: 13px; color: var(--muted, #5b6b7a); padding: 12px 0; }
/* ---- Sponsors browser (auto-pop for all pharma companies) -------------- */
.sponsors-search-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0 var(--space-4);
}
#sponsors-search-input {
  flex: 1 1 240px;
  max-width: 360px;
  font-size: var(--fs-md);
  padding: 6px var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
}
.sponsors-count {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-left: auto;
}
.sponsors-grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: var(--space-4);
  align-items: start;
}
.sponsors-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--space-1);
  background: var(--panel);
}
.sponsor-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px var(--space-3);
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  border-radius: var(--r-xs);
}
.sponsor-row:hover { background: var(--panel-soft); }
.sponsor-row-active { background: var(--teal-soft); }
.sponsor-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--leading-tight);
}
.sponsor-meta {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.sponsors-pipeline {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--space-3) var(--space-4);
}
.sponsors-pipeline-head {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}
.sponsors-action-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--space-1);
}
.sponsors-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.sponsors-empty {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: var(--space-3);
  line-height: var(--leading-relaxed);
}
.trial-list { list-style: none; margin: 0; padding: 0; }
.trial-row {
  border-bottom: 1px solid var(--line-soft);
  padding: 6px 0;
}
.trial-row label {
  font-size: var(--fs-md);
  cursor: pointer;
  line-height: var(--leading-relaxed);
}
.trial-row-meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 2px 0 0 22px;
}
.btn-primary {
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.btn-primary:hover { background: var(--teal-strong); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

/* ===================================================================
   Products — Table representation (ROADMAP §4.1). Cards vs Table view
   toggle + table styling on tokens, matching the rest of the system.
   =================================================================== */
.products-view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.products-view-toggle button {
  border: 0;
  background: var(--panel);
  color: var(--muted-strong);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 4px var(--space-3);
  cursor: pointer;
  line-height: var(--leading-tight);
}
.products-view-toggle button + button { border-left: 1px solid var(--line); }
.products-view-toggle button.active {
  background: var(--teal);
  color: #fff;
}
.products-table-wrap { overflow-x: auto; }
.products-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.products-table thead th {
  text-align: left;
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.products-table thead th:hover { color: var(--ink); }
.products-table thead th.sorted { color: var(--teal-strong); }
.products-table thead th.ta-right { text-align: right; }
.products-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.products-table tbody tr:hover { background: var(--panel-soft); }
.products-table .ta-left { text-align: left; }
.products-table .ta-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.products-table .product-badge { margin-left: 0; }
.products-table-norun {
  color: var(--muted);
  font-style: italic;
}
.products-table-stale {
  color: var(--amber);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
}

/* ===================================================================
   Investor lens — SOTP vs EV (ROADMAP §4.7)
   =================================================================== */
.sotp-lens-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-4);
}
.sotp-lens-inputs label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted-strong);
}
.sotp-lens-inputs input {
  padding: 6px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  background: var(--panel);
  color: var(--ink);
}
.sotp-lens-inputs input:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}
.sotp-empty {
  font-size: var(--fs-md);
  color: var(--muted);
}
.sotp-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sotp-figures small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.sotp-figures strong {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.sotp-gap-pos strong { color: var(--teal-strong); }
.sotp-gap-neg strong { color: var(--amber); }
.sotp-bar {
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  margin: var(--space-2) 0 var(--space-3);
  overflow: visible;
}
.sotp-bar-fill {
  height: 100%;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  background: var(--teal);
  opacity: 0.55;
}
.sotp-bar-mark {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 18px;
  background: var(--ink);
  transform: translateX(-1px);
}
.sotp-verdict {
  font-size: var(--fs-md);
  color: var(--ink);
  line-height: var(--leading-relaxed);
  margin: var(--space-1) 0;
}
.sotp-realization-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}

/* Wait/defer verdict (ROADMAP P5.1) — shown in the product-card insights. */
.wait-verdict {
  display: inline-block;
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: var(--leading-tight);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-sm);
  margin: var(--space-1) 0 var(--space-2);
}
.wait-figures li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.wait-figures li span:last-child { font-variant-numeric: tabular-nums; }

/* Real-options ladder (ROADMAP P5.2). */
.insights-best {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--teal);
  border-radius: var(--r-xs);
  padding: 1px var(--space-1);
  margin-left: var(--space-1);
}
.insights-freq {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ===================================================================
   Financing / runway lens (ROADMAP P5.4)
   =================================================================== */
.financing-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-4);
}
.financing-inputs label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted-strong);
}
.financing-inputs input {
  padding: 6px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  background: var(--panel);
  color: var(--ink);
}
.financing-inputs input:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}
.financing-empty, .financing-ok {
  font-size: var(--fs-md);
  color: var(--muted);
}
.financing-ok { color: var(--teal-strong); }
.financing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.financing-table th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: var(--space-2) var(--space-3);
}
.financing-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.financing-table .ta-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.financing-table .financing-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}
.financing-table .financing-infeasible { opacity: 0.55; }
.financing-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: var(--space-2);
  line-height: var(--leading-relaxed);
}

/* ===================================================================
   Capital-allocation ledger (ROADMAP P5.6)
   Density pass (Track 1): two-panel editing-page layout.
   Left panel: budget + candidate-use rows (editing surface).
   Right panel: persistent KPI strip + Fund/Pass list + Decision Intel.
   =================================================================== */

/* Two-panel workspace grid — mirrors the editing-page pattern from
   Setup (3-col start-from) and Trajectory (controls + KPI header).
   2fr / 3fr split keeps the input surface compact; the result panel
   is wide enough to show the Shapley / strategy-impact tables without
   overflow. Both panels fill the workspace content box (§2: no ad-hoc
   horizontal margin). Inter-panel gap uses the default --space-4 (§2). */
.capalloc-workspace {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-4);
  align-items: start;
}

/* KPI strip — headline band (§4). Same geometry as .traj-kpi-header
   so the visual weight reads identically across Strategy and Capital
   workspace editing pages. */
.capalloc-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-soft);
}
.capalloc-kpi-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 120px;
  min-width: 0;
}
.capalloc-kpi-value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.capalloc-kpi-value.stat-absent {
  color: var(--muted);
  font-weight: 400;
}
.capalloc-kpi-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.capalloc-controls {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
}
.capalloc-controls label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted-strong);
}
.capalloc-controls input {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  background: var(--panel);
  color: var(--ink);
}
.capalloc-empty {
  font-size: var(--fs-md);
  color: var(--muted);
  padding: var(--space-2) 0;
}
.capalloc-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr auto;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.capalloc-row input, .capalloc-row select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  background: var(--panel);
  color: var(--ink);
}
.capalloc-row .ca-capital, .capalloc-row .ca-value {
  font-variant-numeric: tabular-nums;
}
.capalloc-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}
.capalloc-summary small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.capalloc-summary strong {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ca-group-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: var(--space-3) 0 var(--space-1);
}
.ca-list { list-style: none; margin: 0; padding: 0; }
.ca-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-md);
}
.ca-list .ca-picked { background: var(--teal-soft); }
.ca-list .ca-dropped { opacity: 0.6; }
.ca-line-name em {
  color: var(--muted);
  font-style: normal;
  font-size: var(--fs-xs);
  margin-left: var(--space-1);
}
.ca-line-fig { font-variant-numeric: tabular-nums; }
.capalloc-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: var(--space-2);
  line-height: var(--leading-relaxed);
}

/* Phase 7 — downward target projection in Capital. The picker lets a
   user pick a funded use; the panel below reveals its contribution to
   each board target. Same look as the Strategy workspace's target
   table. */
.capalloc-strategy-section {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.capalloc-strategy-section h3 {
  font-size: var(--fs-base);
  margin: 0 0 var(--space-2);
}
.capalloc-strategy-picker {
  margin: var(--space-2) 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}
.capalloc-strategy-picker select {
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
}
/* Same look + spacing as .capalloc-strategy-section, mounted on the
   Product (Monte Carlo) and Portfolio (Dashboard) workspaces by
   strategy_workspace_widget.js. A normal `.panel` underneath keeps
   the surrounding spacing; the inner mount host gets a top margin
   so the board-target table doesn't crowd the sub-lede. */
.strategy-contribution-panel .panel-header {
  align-items: baseline;
}
.strategy-contribution-panel .panel-header button {
  margin-left: auto;
}
.strategy-contribution-panel #product-strategy-mount,
.strategy-contribution-panel #portfolio-strategy-mount {
  margin-top: var(--space-2);
}
.strategy-contribution-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}
.strategy-contribution-grid th,
.strategy-contribution-grid td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
.strategy-contribution-grid th {
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
}
.strategy-contribution-grid tr:last-child td { border-bottom: none; }
.strategy-contribution-grid td.phit-good { color: var(--green); font-weight: 600; }
.strategy-contribution-grid td.phit-bad  { color: var(--red);   font-weight: 600; }

/* Shapley productivity ranking grid (capital_allocation.js).
 * shapley-good is a positive Shapley (productive), shapley-bad is
 * negative (unproductive — looks productive alone but hurts the
 * slate), shapley-neutral is the redundant near-zero band. */
.shapley-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}
.shapley-grid th, .shapley-grid td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.shapley-grid tr:last-child td { border-bottom: none; }
.shapley-grid td.shapley-good    { color: var(--green); font-weight: 600; }
.shapley-grid td.shapley-bad     { color: var(--red);   font-weight: 600; }
.shapley-grid td.shapley-neutral { color: var(--text-muted); }
/* Inline status chip used both in the legend and in the table's
   "Reads as" column, so the user has a one-glance map between the
   colour bands and what they mean. */
.shapley-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: help;
}
.shapley-chip-good    { background: var(--green-soft); color: var(--green); }
.shapley-chip-bad     { background: var(--red-soft); color: var(--red);   }
.shapley-chip-neutral { background: var(--surface-subtle); color: var(--text-muted); }

/* Tabbed Decision Intelligence section in Capital → Allocation.
   Replaces the previous wall of stacked panels with a single section
   that surfaces one view at a time (Productivity ranking by default;
   per-decision impact behind a tab). Cuts the cognitive load on the
   tab without removing capability. */
.capalloc-decision-intel {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.capalloc-decision-intel-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-3);
}
.intel-tab {
  background: transparent;
  border: none;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.intel-tab:hover {
  color: var(--text);
}
.intel-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Shared empty / loading / error state for the strategy widgets.
   A single component rendered by PSPStrategyContribution.renderState
   so every surface (Capital, Product, Portfolio, Strategy) uses the
   same visual treatment. Icon + message + optional action button. */
.psp-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text);
}
.psp-state-icon {
  font-size: 1.5em;
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.psp-state-msg {
  flex: 1;
  line-height: 1.4;
}
.psp-state-action {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.psp-state-action:hover {
  background: var(--surface-hover);
}
.psp-state-loading .psp-state-icon { color: var(--text-muted); }
.psp-state-error   { border-color: var(--red);  background: var(--red-tint, #fff5f5); }
.psp-state-error   .psp-state-icon { color: var(--red); }
.psp-state-empty   .psp-state-icon { color: var(--text-muted); }

/* Family chip legend rendered above the strategy contribution table.
   The chips share the same `.target-family-{name}` classes the
   in-table cells use, so the legend and the table colours can't drift. */
.psp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: var(--space-2) 0;
  font-size: var(--fs-xs);
}
.psp-legend-title {
  color: var(--text-muted);
  margin-right: 2px;
}
.psp-legend .target-family {
  cursor: help;
}

/* ===================================================================
   Research studio (ROADMAP P4 — desk research + research artifacts)
   =================================================================== */
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-2);
}
.research-col h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--ink);
  line-height: var(--leading-normal);
}
.research-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted-strong);
}
.research-field input, .research-field select {
  padding: 6px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  background: var(--panel);
  color: var(--ink);
}
.research-field input:focus, .research-field select:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}
.research-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.research-result {
  margin-top: var(--space-3);
  font-size: var(--fs-md);
  line-height: var(--leading-relaxed);
}
.research-empty {
  color: var(--muted);
  font-size: var(--fs-sm);
}
.research-summary {
  background: var(--panel-soft);
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}
.research-result h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: var(--space-3) 0 var(--space-1);
}
.research-list { list-style: none; margin: 0; padding: 0; }
.research-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line-soft);
}
.research-src {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-style: normal;
}
.research-artifact-head {
  font-weight: 700;
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
  color: var(--teal-strong);
}
.research-section { margin: var(--space-2) 0; }
.research-section ul, .research-result > ul {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
}
.research-prov {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--muted);
  font-style: italic;
  line-height: var(--leading-relaxed);
}

/* ===================================================================
   First-run UX: onboarding banner, one-click template tiles,
   dashboard run button, instructive products empty-state.
   =================================================================== */
.start-onboarding {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--teal-soft);
  border: 1px solid var(--teal);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
/* The flex display above would otherwise override the [hidden] attribute,
   making the banner impossible to dismiss. Restore hidden semantics. */
.start-onboarding[hidden] { display: none; }
.start-onboarding-text {
  font-size: var(--fs-md);
  color: var(--ink);
  flex: 1;
  line-height: var(--leading-relaxed);
}
.start-onboarding-text em {
  font-style: normal;
  font-weight: 600;
  color: var(--teal-strong);
}

/* Onboarding tour — first-run guided walkthrough.
   Overlay = full-page dim. The highlighted anchor is brought forward
   with z-index (set inline by onboarding_tour.js) so it visually
   "punches through" the dim layer. Cheaper than a clip-path cutout
   that would have to be recomputed on every resize/scroll. */
.psp-tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9000;
}
.psp-tour-overlay.no-motion,
.psp-tour-overlay.no-motion .psp-tour-card {
  transition: none;
}
.psp-tour-anchor {
  box-shadow: 0 0 0 4px var(--brand-soft), 0 0 0 6px var(--brand);
  border-radius: var(--r-sm);
}
.psp-tour-card {
  position: absolute;
  width: 20rem;
  max-width: 20rem;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.psp-tour-card-centered {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.psp-tour-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.psp-tour-title {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink);
  line-height: var(--leading-tight);
}
.psp-tour-body {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}
.psp-tour-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-1);
}
/* Onboarding step-progress strip — checklist version of the legacy
   banner. Lives inside #start-onboarding and stays visible until the
   user dismisses it or completes all five steps. */
.psp-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--muted);
  flex: 1;
}
.psp-progress-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.psp-progress-step.is-done {
  color: var(--ink);
  font-weight: 600;
}
.psp-progress-mark {
  display: inline-flex;
  width: var(--space-3);
  justify-content: center;
  color: var(--teal-strong);
  font-weight: 700;
}
.psp-progress-mark.dim { color: var(--muted); }
.psp-progress-sep {
  color: var(--muted);
  opacity: 0.5;
}
.psp-progress-actions {
  display: inline-flex;
  gap: var(--space-2);
  margin-left: auto;
}

.start-templates-section { margin-top: var(--space-1); }
.start-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.start-template-tile {
  text-align: left;
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.start-template-tile:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
}
.start-template-tile:active { transform: translateY(1px); }
.start-template-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--leading-tight);
}
.start-template-blurb {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}

.dashboard-run-btn { margin-left: auto; }

.products-empty-guide {
  margin: var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}
.products-empty-guide button { align-self: flex-start; }
.products-empty-guide p {
  margin: 0;
  line-height: var(--leading-relaxed);
}
.products-empty-guide strong { color: var(--ink); }

/* Adaptive-convergence run toggle (Monte Carlo). */
.run-adaptive {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 12px; color: var(--muted-strong, var(--muted-strong)); cursor: pointer;
  white-space: nowrap;
}

/* ===================================================================
   Copula correlation editor (ROADMAP §4.2)
   =================================================================== */
.correlation-empty, .correlation-ok {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}
.correlation-ok { color: var(--teal-strong); }
.correlation-row {
  display: grid;
  grid-template-columns: 1fr 90px auto;
  gap: var(--space-2);
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}
.correlation-pair {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.correlation-coef {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: var(--panel);
  color: var(--ink);
}
.correlation-rationale {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}
.correlation-fit-panel {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--panel-soft);
}
.correlation-fit-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted-strong);
}
.correlation-fit-label textarea {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
}
.correlation-fit-list {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  font-size: var(--fs-md);
}
.correlation-fit-list li { padding: 3px 0; }

/* Export: protect toggle on the live-simulator card. */
.export-protect-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--muted-strong);
  margin: var(--space-1) 0 var(--space-3);
}

/* Dashboard-local run progress: a small live chip in the Recommendation
   panel header so a user who clicks "Run model" sees an evolving phase
   message right where they're waiting — the global run bar isn't shown
   on the dashboard. */
.dashboard-run-progress {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted-strong, var(--muted-strong));
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--panel-soft, var(--panel-soft));
  border: 1px solid var(--line);
}
.dashboard-run-progress[hidden] { display: none; }
.dashboard-run-progress .run-progress-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal, #2563a8);
  animation: dashboard-run-pulse 1.1s ease-in-out infinite;
}
@keyframes dashboard-run-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1.0; }
}
.dashboard-run-progress.complete .run-progress-dot { background: var(--green); animation: none; }
.dashboard-run-progress.error .run-progress-dot { background: var(--red-strong); animation: none; }

/* Correlation editor: a hint paragraph that explains *why* fit-from-data
   returned nothing actionable. */
.correlation-empty-hint {
  font-size: 12px;
  color: var(--muted-strong, var(--muted-strong));
  margin: 4px 0 0;
  line-height: 1.45;
}
.correlation-empty-hint strong { color: var(--ink, #0f1a2e); }

/* ============================================================================
   COMPONENT LIBRARY — merged from components.css on 2026-06-04.
   These rules used to live in a sibling components.css that loaded AFTER
   styles.css for equal-specificity priority. Folded in here so editors only
   ever touch one stylesheet. Order preserved — they remain after every
   feature rule above, so the same source-order precedence holds.
   ============================================================================ */
/* Component library — the named patterns the rest of the app composes
   from. Source of truth for the §9 vocabulary in docs/layout_doctrine.md.
   Re-use; don't invent parallel one-offs. */

/* ---------- Typography roles ----------------------------------------- */
/* Class implementations of the §7 type system. A surface picks from this
   small set rather than hand-tuning sizes. */

.t-display {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.t-section {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.t-subsection {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--leading-normal);
  color: var(--ink);
}
.t-body {
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: var(--leading-normal);
  color: var(--ink);
}
.t-field {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--leading-relaxed);
  color: var(--muted-strong);
}
.t-eyebrow,
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: var(--leading-relaxed);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.t-helper {
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--muted);
}

/* ---------- Field stack: label-above-input ----------------------------
   Vertical pair used by virtually every form control on the workbench. */

.field-stack {
  display: grid;
  gap: var(--space-1);
}
.field-stack > .field-stack-label,
.field-stack > label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted-strong);
  line-height: var(--leading-relaxed);
}
.field-stack > input,
.field-stack > select,
.field-stack > textarea {
  font: inherit;
  font-size: var(--fs-md);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  min-width: 0;
}
.field-stack > input:focus,
.field-stack > select:focus,
.field-stack > textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

/* ---------- Field row: label–control horizontal -----------------------
   For single-line controls where a short label sits left of a wider input
   (e.g. the "Shape" dropdown). Deterministic 2-column grid so the label
   can never be overrun by the control. */

.field-row {
  display: grid;
  grid-template-columns: minmax(48px, max-content) 1fr;
  align-items: center;
  gap: var(--space-2);
}
.field-row > .field-row-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted-strong);
  white-space: nowrap;
}
.field-row > select,
.field-row > input {
  font-size: var(--fs-sm);
  width: 100%;
  min-width: 0;
}

/* ---------- Pill (status / chip) --------------------------------------
   Small bounded shape for read-only status. Variants by data-tone. */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: var(--leading-tight);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--panel-soft);
  color: var(--muted-strong);
  white-space: nowrap;
}
.pill[data-tone="neutral"] { background: var(--panel-soft); color: var(--muted-strong); }
.pill[data-tone="warn"]    { background: var(--amber-soft); color: var(--amber); }
.pill[data-tone="info"]    { background: var(--blue-soft); color: var(--blue); }
.pill[data-tone="ok"]      { background: var(--teal-soft); color: var(--teal-strong); }

/* ---------- Metric tile (title + value + optional sub) ----------------
   The unit of the dashboard headline strip. */

.metric-tile {
  display: grid;
  gap: var(--space-1);
  /* Density pass round 4: tighter padding modelled on the Asset
     Decision Briefs reference tile (6-8px vertical). */
  padding: var(--space-2) var(--space-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-width: 0;
}
.metric-tile > .metric-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  line-height: var(--leading-tight);
}
.metric-tile > .metric-value {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}
.metric-tile > .metric-sub {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 400;
  line-height: var(--leading-tight);
}

/* =========================================================================
   Refine Matches drawer.
   Surfaces the embedding-matched trial list that went into an empirical
   prior, lets the analyst exclude false positives or add a specific NCT
   the SapBERT matcher missed.  Persists to case.assets[i].stages[j].prior_overrides.
   ========================================================================= */

.dist-editor-refine-link {
  display: inline;
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
  background: transparent;
  border: 0;
  color: var(--brand-strong);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.dist-editor-refine-link:hover {
  color: var(--brand);
  text-decoration: none;
}

.refine-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(520px, 100vw);
  background: var(--panel);
  border-left: 1px solid var(--line-strong);
  box-shadow: -8px 0 24px rgba(15, 26, 46, 0.10);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
}
.refine-drawer[hidden] { display: none; }

.refine-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--brand-bg);
}
.refine-drawer-title strong {
  display: block;
  font-size: var(--fs-md);
  color: var(--ink);
}
.refine-drawer-sub {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted-strong);
  line-height: var(--leading-tight);
}
.refine-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 0;
  background: transparent;
  color: var(--muted-strong);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.refine-drawer-close:hover {
  background: var(--panel);
  color: var(--ink);
}

.refine-drawer-search {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}
.refine-drawer-search input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.refine-drawer-search input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}
.refine-drawer-search-results {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.refine-search-row {
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  text-align: left;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.refine-search-row:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.refine-search-nct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-strong);
}
.refine-search-cond {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.refine-search-phase {
  color: var(--muted);
  text-align: right;
}

.refine-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) var(--space-4);
}
.refine-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-xs);
  border-bottom: 1px solid var(--line-soft);
}
.refine-row.is-added {
  background: var(--brand-soft);
}
.refine-row.is-excluded {
  opacity: 0.45;
}
.refine-row.is-excluded .refine-row-meta {
  text-decoration: line-through;
}
.refine-row input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}
.refine-row-top {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
}
.refine-row-nct {
  font-weight: 700;
  color: var(--brand-strong);
  font-variant-numeric: tabular-nums;
}
.refine-row-cos {
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.refine-row-tag {
  background: var(--brand);
  color: #fff;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.refine-row-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-weight: 700;
}
.refine-row-status.status-completed {
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.refine-row-status.status-terminated {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.refine-row-cond {
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: var(--leading-tight);
  margin-top: 2px;
}

.refine-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}
.refine-drawer-summary {
  font-size: var(--fs-sm);
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}
.refine-drawer-actions {
  display: flex;
  gap: var(--space-2);
}
.refine-drawer-reset,
.refine-drawer-apply {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.refine-drawer-reset {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted-strong);
}
.refine-drawer-reset:hover {
  border-color: var(--muted-strong);
  color: var(--ink);
}
.refine-drawer-apply {
  background: var(--brand);
  border: 1px solid var(--brand-strong);
  color: #fff;
}
.refine-drawer-apply:hover {
  background: var(--brand-strong);
}

/* NCT link inside the matched-trials list — visually identical to the
   plain row label, but signals it's clickable on hover/focus. */
.refine-row-nct-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.refine-row-nct-link:hover,
.refine-row-nct-link:focus {
  text-decoration: underline;
  color: var(--brand-strong, var(--ink));
  outline: none;
}

/* "NEW" pill — surfaces in the row strip when a comparable trial has
   updated since the analyst last reviewed this set. Used together
   with the .is-new row class and the top-of-drawer banner. */
.refine-row-new-pill {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  height: 18px;
  border-radius: var(--r-pill, 999px);
  background: var(--accent, #c3423a);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}
.refine-row.is-new {
  background: linear-gradient(
    to right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%
  );
}

/* Persisted rationale visible under an excluded row, so a reviewer can
   see why a trial was set aside without re-opening the prompt. */
.refine-row-reason {
  margin-top: 4px;
  padding: 6px 8px;
  font-size: var(--fs-xs);
  background: var(--panel-soft);
  border-left: 2px solid var(--line-strong);
  color: var(--muted-strong);
  border-radius: var(--r-sm, 4px);
}

/* New-matches banner — quiet by default, only renders when the
   /ctgov/new-matches endpoint returns at least one updated trial. */
.refine-drawer-new-banner {
  margin: var(--space-3) var(--space-5);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.refine-drawer-new-banner[hidden] { display: none; }
.refine-drawer-new-banner button {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  padding: 4px 10px;
  border-radius: var(--r-sm, 4px);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.refine-drawer-new-banner button.refine-banner-recalc {
  background: var(--brand);
  border-color: var(--brand-strong);
  color: #fff;
  font-weight: 600;
}

/* Trial detail popup — a modal layered above the Refine Matches drawer.
   The backdrop dims the page; the panel itself uses the same surface
   tokens as the drawer header so the visual language is consistent. */
.refine-trial-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 36, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: var(--space-4);
}
.refine-trial-modal {
  width: min(640px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(15, 23, 36, 0.18);
  overflow: hidden;
}
.refine-trial-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}
.refine-trial-modal-head strong {
  font-size: var(--fs-md, 14px);
  letter-spacing: 0.02em;
}
.refine-trial-modal-close {
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 6px;
}
.refine-trial-modal-close:hover { color: var(--ink); }
.refine-trial-modal-body {
  padding: var(--space-4);
  overflow-y: auto;
  display: grid;
  gap: var(--space-4);
}
.refine-trial-modal-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: 6px;
  margin: 0;
}
.refine-trial-modal-grid dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  align-self: baseline;
}
.refine-trial-modal-grid dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.refine-trial-modal-section h3 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 4px;
  font-weight: 600;
}
.refine-trial-modal-section p {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.refine-trial-modal-link a {
  color: var(--brand-strong, var(--accent-strong));
  font-weight: 600;
}
.refine-trial-modal-error {
  color: var(--muted);
  margin: 0;
}

/* Exclusion-reason mini form — reuses the modal shell so the rhythm
   matches the trial popup. */
.refine-reason-help {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.45;
}
.refine-reason-input {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm, 4px);
  background: var(--panel);
}
.refine-reason-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.refine-reason-cancel {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted-strong);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

/* =========================================================================
   Strategy workspace.

   Four sub-tabs (Policy, Targets, Trajectory, Dissent). Visual language
   inherits the existing panel + KPI-tile tokens; only the Strategy-
   specific pieces (target-family chips, score headline tiles, dissent
   severity cards) are defined here.
   ========================================================================= */

.targets-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.targets-grid th,
.targets-grid td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
/* Global thead tr rule paints the header navy; align with the rest of
   the workbench by switching to white text for legibility on that
   background. */
.targets-grid th {
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
}
.targets-grid tr:last-child td { border-bottom: none; }
/* Use the semantic green/amber/red tokens (defined in :root) so the
   workspace inherits the design-system contrast guarantees. */
.targets-grid td.phit-good   { color: var(--green); font-weight: 600; }
.targets-grid td.phit-mid    { color: var(--amber); font-weight: 600; }
.targets-grid td.phit-bad    { color: var(--red); font-weight: 600; }

/* Sortable column headers per layout doctrine §12. Display-mode rows
   carry .targets-grid-sortable on every th; one column at a time
   carries .is-sort-active. The trailing arrow glyph ▲ / ▼ / ↕
   indicates state. */
.targets-grid th.targets-grid-sortable {
  cursor: pointer;
  user-select: none;
}
.targets-grid th.targets-grid-sortable:hover {
  background: var(--surface-subtle);
}
.targets-grid-sort-indicator {
  display: inline-block;
  margin-left: var(--space-1);
  color: var(--text-muted);
  font-size: 0.85em;
}
.targets-grid th.is-sort-active .targets-grid-sort-indicator {
  color: var(--ink);
}

.target-family {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.target-family-growth         { background: var(--green-soft); color: var(--green); }
.target-family-profitability  { background: var(--amber-soft); color: var(--amber); }
.target-family-returns        { background: var(--blue-soft); color: var(--blue); }
.target-family-balance_sheet  { background: var(--brand-soft); color: var(--brand-strong); }
.target-family-risk           { background: var(--red-soft); color: var(--red); }
/* Hard? column reuses the .target-family pill geometry (doctrine §9 —
   re-use, don't reinvent) but with the constraint-strictness palette:
   hard = amber-tint + amber-strong (caveat / blocking), soft = line-soft
   + muted (non-blocking metadata). Keeps the pill row visually quiet
   when most constraints are soft, loud only when one is hard. */
.target-family-hard           { background: var(--amber-tint); color: var(--amber-strong); }
.target-family-soft           { background: var(--line-soft); color: var(--muted); }

/* Direction column: ↑ / ↓ / = chip. Color carries direction (green up,
   red down, neutral equality) and is paired with a glyph so a
   colorblind reader still gets the signal (doctrine §17.2). The chip
   uses the same compact geometry as .target-family so the table row
   reads as one pill row, not a mix of shapes. */
.direction-cell { text-align: left; }
.direction-chip {
  display: inline-block;
  min-width: var(--space-5);
  padding: 2px var(--space-2);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.direction-chip-up { background: var(--green-soft); color: var(--green-strong); }
.direction-chip-down { background: var(--red-soft); color: var(--red-strong); }
.direction-chip-eq { background: var(--line-soft); color: var(--muted-strong); }

/* Weight column: precise numeric value on top, a proportional bar
   beneath showing this row's weight as a fraction of the maximum in
   the rendered set. The bar gives a quick visual ranking without
   sacrificing the exact number (doctrine §16 — numeric type role).
   The bar's left edge aligns with the right-aligned number's column
   track via right-alignment on the cell, satisfying §8. */
.weight-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.weight-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.weight-bar {
  margin-top: var(--space-1);
  height: var(--space-1);
  background: var(--line-soft);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.weight-bar-fill {
  height: 100%;
  width: calc(var(--weight-frac, 0) * 100%);
  background: var(--brand);
  border-radius: var(--r-xs);
}
/* num-cell — right-aligned monospace number cell (doctrine §16). Used
   by the Threshold column so the decimal points stack vertically. */
.targets-grid td.num-cell {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Wave 3: trajectory read-only column headers in the Targets table.
   Right-aligned monospace like the data cells they head (§16). A muted
   top border separates them visually from the editable columns so the
   analyst can see at a glance which columns are run-artefacts vs. editable
   library fields (§11 — distinct concerns, visible breathing room). */
.targets-grid th.targets-grid-traj-header {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted-strong);
  font-style: italic;
  border-top: 2px solid var(--brand-soft);
}

/* Click-to-filter affordances for the Targets table — the family pill,
   direction chip, and weight cell all become interactive in display
   mode. The base pill / chip styles already carry the colour role per
   doctrine §17; these rules add the cursor + hover lift so they read
   as actionable. */
button.target-family.target-family-clickable {
  border: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: filter 0.12s, box-shadow 0.12s;
}
button.target-family.target-family-clickable:hover,
button.target-family.target-family-clickable:focus-visible {
  filter: brightness(0.95);
  box-shadow: 0 0 0 2px var(--brand-soft);
  outline: none;
}
.direction-chip-clickable {
  cursor: pointer;
  transition: filter 0.12s, box-shadow 0.12s;
}
.direction-chip-clickable:hover,
.direction-chip-clickable:focus-visible {
  filter: brightness(0.95);
  box-shadow: 0 0 0 2px var(--brand-soft);
  outline: none;
}
.direction-chip-clickable.is-active {
  box-shadow: 0 0 0 2px var(--brand);
}
.weight-cell-clickable {
  cursor: pointer;
}
.weight-cell-clickable:hover .weight-bar,
.weight-cell-clickable:focus-visible .weight-bar {
  background: var(--line);
}
.weight-cell-clickable:focus-visible {
  outline: 2px solid var(--brand-soft);
  outline-offset: -2px;
}

/* Active row-level filter banner — surfaces a non-default filter state
   so the user can always see (and clear) what's scoping the table. */
.strategy-targets-filter-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--brand-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--brand-strong);
}
.strategy-targets-filter-banner-label {
  flex: 1 1 auto;
}
.strategy-targets-filter-clear {
  border: 0;
  background: transparent;
  color: var(--brand-strong);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.strategy-targets-filter-clear:hover,
.strategy-targets-filter-clear:focus-visible {
  color: var(--brand);
  outline: none;
}

.strategy-score-headline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dissent-card {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--surface);
}
.dissent-card .dissent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}
.dissent-severity {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dissent-high          { border-left-color: var(--red); }
.dissent-high .dissent-severity   { background: var(--red-soft); color: var(--red); }
.dissent-medium        { border-left-color: var(--amber); }
.dissent-medium .dissent-severity { background: var(--amber-soft); color: var(--amber); }
.dissent-low           { border-left-color: var(--blue); }
.dissent-low .dissent-severity    { background: var(--blue-soft); color: var(--blue); }
.dissent-rationale {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--fs-sm);
}

/* Browser's user-agent rule for [hidden] is display:none, but a
   sweeping `button { display: inline-flex }` higher in the cascade
   wins on specificity. Force the attribute to honour its semantics
   for the Strategy panel-actions buttons so the +Add target / Load
   default library affordances stay hidden until edit mode. */
.tab-view[data-workspace="strategy"] .panel-actions button[hidden] {
  display: none;
}

/* Strategy form layout: a responsive two-column grid for label-input
   pairs so the Policy and Trajectory inputs read as a structured form
   rather than a horizontal soup. Each label stacks its caption above
   the input. */
#strategy-policy-form,
.tab-view[data-workspace="strategy"] .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  align-items: end;
}
@media (min-width: 1200px) {
  #strategy-policy-form,
  .tab-view[data-workspace="strategy"] .form-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
#strategy-policy-form label,
.tab-view[data-workspace="strategy"] .form-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
}
#strategy-policy-form label > span,
.tab-view[data-workspace="strategy"] .form-row label > span {
  color: var(--muted-strong);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#strategy-policy-form input,
.tab-view[data-workspace="strategy"] .form-row input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  background: var(--panel);
}
#strategy-policy-form input:focus,
.tab-view[data-workspace="strategy"] .form-row input:focus {
  outline: 2px solid var(--brand-soft);
  border-color: var(--brand);
}

/* KPI tiles used by the trajectory score headline — borrow the look of
   the existing tile pattern but scoped to the Strategy workspace so we
   don't accidentally collide with other usages of the .kpi-tile class. */
.strategy-score-headline .kpi-tile {
  flex: 1 1 180px;
  /* Density pass round 4: tighter padding (8px 12px → 6-8px). */
  padding: var(--space-2) var(--space-3);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: var(--leading-tight);
}

/* ===== Wave 3 — Trajectory persistent KPI header ===== */
.traj-kpi-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.traj-kpi-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 160px;
  min-width: 0;
}
.traj-kpi-value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.traj-kpi-value.stat-absent {
  color: var(--muted);
  font-weight: 400;
}
.traj-kpi-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Panel-lede in the Strategy workspace runs the full panel width
   minus the standard panel padding — none of the constraint that the
   default 72ch imposes. The descriptions sit above wide tables and
   should read as paragraphs spanning the full visual width rather
   than as a narrow column floating left. */
.tab-view[data-workspace="strategy"] .panel-lede {
  max-width: none;
}

/* Display-options checkbox rows in the Settings drawer. Keep them in
   line with the rest of the settings-section content rather than
   redefining the look. */
.settings-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  margin: 6px 0;
  cursor: pointer;
  color: var(--ink);
}
.settings-checkbox-row input { cursor: pointer; }

/* Targets toolbar — filter chips + search input. Sits above the table
   in both display and edit modes. */
.strategy-targets-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  /* Bottom padding lifts the table header off the chip row so the
     chips don't visually abut the navy header band. */
  padding: var(--space-3) var(--space-4);
}
.strategy-targets-filter-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--muted-strong);
}
.strategy-targets-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.strategy-targets-chip {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
  padding: 2px 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.strategy-targets-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.strategy-targets-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--panel);
}
.strategy-targets-search {
  flex: 0 1 280px;
  min-width: 180px;
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.6;
  background: var(--panel);
}
.strategy-targets-search:focus {
  outline: 2px solid var(--brand-soft);
  border-color: var(--brand);
}

/* Inline editor styling — applies in edit mode only. Inputs are flush
   with the cell so the table still reads as a table, not a stack of
   floating form fields. */
.strategy-target-input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  background: var(--panel);
}
.strategy-target-input:focus {
  outline: 1px solid var(--brand-soft);
  border-color: var(--brand);
}
.strategy-target-actions { text-align: right; }
.strategy-target-remove {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--red);
  padding: 3px 10px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}
.strategy-target-remove:hover {
  background: var(--red-soft);
  border-color: var(--red);
}

/* ============================ Audit-capture suppression ============================
   When tests/browser/test_workspace_audit.py runs, it sets
   data-audit-capture="1" on <body>. Full-page screenshots stitch the
   scrolled page together but sticky / floating elements leave their
   natural in-flow position once the viewport scrolls past, so they
   render as a phantom horizontal bar across whatever chart they cross.
   The dock isn't a real problem in live usage — only the audit sees
   it — so we suppress it just for the capture. */
body[data-audit-capture="1"] .run-dock,
body[data-audit-capture="1"] #run-fab,
body[data-audit-capture="1"] .analyst-dock,
body[data-audit-capture="1"] #analyst-dock {
  display: none !important;
}

/* Football-field tooltip — follows the cursor while hovering shapes
   on the per-asset valuation-lens chart. Positioned absolute inside
   the chart wrap; transform-translated so the math in JS matches the
   element's local coordinate space. pointer-events: none so the
   tooltip never blocks the hovered shape and never triggers its own
   hover events. */
.asset-brief-football-field { position: relative; }
.ff-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 5;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-sm);
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  max-width: 28ch;
  white-space: normal;
}
.ff-tooltip[hidden] { display: none; }
.ff-tooltip strong { color: var(--bg); font-weight: 600; }
.ff-tooltip-cite {
  display: block;
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  line-height: 1.4;
}

/* Inline citations strip under the football field — names the top
   3-5 comparables for each lens with year + multiple. The chip's
   title attribute carries source date + confidence for hover-detail.
   The lead label (lens name) gets a colored marker matching the
   row's bar color so the eye can pair name → bar quickly. */
.ff-cites {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ff-cites-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}
.ff-cites-lead {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ff-cites-lead--precedents { color: var(--green-strong, var(--ink)); }
.ff-cites-lead--trading    { color: var(--amber-strong, var(--ink)); }
.ff-cite-chip {
  display: inline-flex;
  align-items: baseline;
  padding: 1px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Round-4: chips become anchors when provenance.source_url is set,
     so reset the default underline/blue link styling — the chip's
     pill shape carries the link affordance, the hover-border shift
     reinforces interactivity. */
  text-decoration: none;
  color: var(--ink);
}
.ff-cite-chip:hover { border-color: var(--brand); }
a.ff-cite-chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.ff-cite-icon {
  display: inline-block;
  font-size: 12px;
  color: var(--brand);
  margin-left: 4px;
  text-decoration: none;
}
.ff-cite-icon--doc { color: var(--muted-strong); }
.ff-cite-icon:hover { color: var(--brand-strong, var(--brand)); }
.ff-cite-more { color: var(--muted); font-style: italic; }

/* Round-5 similarity model: applicability badge inside each cite
   chip. A small "88%" appended to the chip text, tinted by the
   tier the chip carries. Tooltip on the chip lists the per-axis
   breakdown so the analyst sees indication / stage / vintage
   match individually. */
.ff-cite-applicability {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ff-cite-chip--high {
  border-color: var(--green);
  background: var(--green-soft);
}
.ff-cite-chip--high .ff-cite-applicability { color: var(--green-strong); }
.ff-cite-chip--mid {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.ff-cite-chip--mid .ff-cite-applicability { color: var(--brand-strong); }
.ff-cite-chip--low {
  border-color: var(--amber);
  background: var(--amber-soft);
}
.ff-cite-chip--low .ff-cite-applicability { color: var(--amber-strong); }

/* Provenance-card applicability badge — same tier classes as the
   chip variant; pill-shaped, small, sits between the deal name and
   the multiple in the card header. */
.ff-prov-card-applicability {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .ff-tooltip {
    background: var(--panel-soft);
    color: var(--ink);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  }
  .ff-tooltip strong { color: var(--ink); }
}

/* =========================================================================
   Print stylesheet — punch-list item #13.
   When the user prints, they want the data, not the chrome. This block
   hides every fixed-position dock, the app-bar and tabs, side panels,
   and the case-bar overflow menu; forces collapsed panels open so their
   content makes it onto paper; flattens shadows; and ensures panels
   don't split across page breaks. All non-zero spacing comes from
   tokens — the only raw unit is the @page margin (1cm).
   ========================================================================= */
@media print {
  @page { margin: 1cm; }

  body {
    background: white !important;
    color: black !important;
  }

  /* Hide non-content chrome — bars, tabs, docks, side panels, the
     floating "Ask the Analyst" chip, and the case-bar's overflow
     (kebab) menu. The case title block itself stays visible so each
     printed page carries context. */
  .app-bar,
  .app-tabs,
  .case-bar-actions,
  #case-overflow,
  #case-overflow-toggle,
  .run-dock,
  #run-fab,
  .analyst-dock,
  #analyst-dock,
  #help-panel,
  #whats-new-panel,
  #project-sidebar,
  .panel-collapse-toggle {
    display: none !important;
  }

  /* Expand collapsed panels — when printing, the user wants the data
     even if the live UI had it folded away. */
  .panel.panel-collapsible[data-collapsed="true"] > .panel-body {
    display: block !important;
  }

  /* Flat panels — drop shadows that don't render on paper, and avoid
     splitting a panel across a page break. */
  .panel {
    box-shadow: none !important;
    break-inside: avoid;
  }

  /* Finding / decision hero — keep strong contrast and span full width
     on paper instead of the screen's gradient surface. */
  .decision-hero {
    background: black !important;
    color: white !important;
    width: 100% !important;
    margin: 0 0 var(--space-4) !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .decision-hero .dh-eyebrow,
  .decision-hero .dh-headline,
  .decision-hero .dh-card,
  .decision-hero .dh-card small,
  .decision-hero .dh-card div,
  .decision-hero .dh-jump {
    color: white !important;
  }
}

/* =========================================================================
   Dark mode foundation — punch-list item #14.
   This is a foundational override only: it remaps the semantic surface,
   ink, line, and *-soft tokens to a dark palette using the SAME token
   names as :root, so every downstream rule that already sources from
   tokens flips automatically.

   Tokens that are hue-anchored (--brand, --green, --red, --amber, --blue,
   --accent, and the strong variants) keep their original light-mode
   values — they're tuned for sufficient contrast on the dark surface
   palette below; fine-tuning per-component (e.g. shadow opacity, focus
   ring alpha, gradient stops in the decision hero) lives in follow-up
   PRs. The intent here is "boot dark mode without rewriting every
   rule"; polish comes after.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1419;
    --surface: #0e1419;
    --panel: #161d24;
    --panel-soft: #1c242c;
    --ink: #e8eef5;
    --ink-soft: #c5d0dc;
    --muted: #8b97a4;
    --muted-strong: #b0bdc8;
    --line: #2a3340;
    --line-strong: #3a4452;
    --line-soft: #1f2832;
    --brand-soft: #1a3149;
    --brand-bg: #122335;
    --surface-subtle: #1a2128;
    --green-soft: #0d3322;
    --amber-soft: #3e2b08;
    --red-soft: #3a1f1d;
    /* Semantic tints + strong-text overrides — light-mode tints are
       near-white pastels and strong-text values are dark hues; both
       collapse on dark surfaces. Flip them so .run-compare-tile delta
       pills (and any pill using the soft/tint/strong triple) keep
       readable contrast. */
    --green-tint: #1f5d3f;
    --red-tint: #6b2c2a;
    --amber-tint: #5a3f10;
    --green-strong: #a7f3d0;
    --red-strong: #fca5a5;
    --amber-strong: #fcd34d;
    /* Phase ramp dark-mode lift — deepest stages were invisible on bg. */
    --phase-early: #67c0d4;
    --phase-1: #4ea7bb;
    --phase-2: #3b8da3;
    --phase-3: #2f7387;
    --phase-deep: #2d5b6f;
    --phase-registration: #34495a;
    color-scheme: dark;
  }

  /* Component polish — round-3 punch-list #12. These selectors hard-code
     `background: #fff` further up the file (lines 7069-12000) so they
     don't inherit the --panel token flip the :root override does. Each
     entry is a card / tile / panel that reads as a bright white slab
     on the dark page until overridden. Form-input chrome (selects,
     text inputs) is intentionally left alone — native input contrast
     stays readable, and a light input bg against a dark page reads as
     "this is where you type" the same way it does in light mode. */
  .home-tile,
  .run-compare-tile,
  .asset-brief-kpi,
  .ff-provenance-detail,
  .help-panel,
  .val-modal,
  .home-results-panel,
  .aa-editor-modal,
  .aa-library-panel,
  .aa-fitplot {
    background: var(--panel);
    color: var(--ink);
  }
  .home-tile,
  .run-compare-tile,
  .asset-brief-kpi {
    border-color: var(--line);
  }

  /* Scenario-comparison delta tiles: the light-mode .delta-pos / -neg
     variants use pastel green / pastel red slabs that read as bright
     pastel rectangles on the dark surface. Flip to the existing
     --green-soft / --red-soft tokens, which the :root dark override
     already remapped to dark green / dark red tints. */
  .run-compare-tile.delta-pos {
    background: var(--green-soft);
    border-color: var(--green-soft);
  }
  .run-compare-tile.delta-neg {
    background: var(--red-soft);
    border-color: var(--red-soft);
  }

  /* Validation issue rows: the light-mode :hover state uses a pale
     blue that doesn't fit the dark surface. Reuse the brand soft tint
     already remapped for dark mode. */
  .val-issue-row[title]:hover {
    background: var(--brand-soft);
  }
}

/* ============================ Skeleton states (§14) ============================
   Replaces "centered hero + acres of empty space" pre-run empty states
   with a faded preview of the populated surface. The skeleton shows what
   shape the user will get back — a finding card, a metric strip, a table
   — so the empty state explains itself by example, not just by copy.

   Construction rules (doctrine §9 reuse, §14 component states):
     - Each shape reuses existing component vocabulary (.panel, .pill,
       .metric-tile, table) with a .skeleton modifier. No new shapes.
     - All skeleton elements use opacity 0.35 and pointer-events: none so
       they can never be focused, clicked, or interacted with.
     - The wrapper carries aria-hidden="true" in markup so screen readers
       skip the placeholders entirely.
     - Shimmer: a subtle background-position sweep, 1.6s ease-in-out
       infinite. Disabled under prefers-reduced-motion: reduce.
     - JS hides the wrapper (display: none via [hidden]) after the first
       successful render — the real content takes the slot.

   Token discipline: no raw px / hex. Sizes use em (typography-relative)
   and existing --space-* / --r-* tokens. */

.skeleton-wrap {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  pointer-events: none;
  opacity: 0.35;
}
.skeleton-wrap[hidden] { display: none; }

/* Shared shimmer base — a soft gradient that animates its background
   position across the shape. Both stops use existing line / surface
   tokens so no new palette is introduced. */
.skeleton-block {
  background:
    linear-gradient(
      90deg,
      var(--line-soft) 0%,
      var(--surface-subtle) 50%,
      var(--line-soft) 100%
    );
  background-size: 200% 100%;
  background-position: 100% 0;
  border-radius: var(--r-sm);
  animation: psp-skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes psp-skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

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

/* ---- Finding card preview --------------------------------------------- */
/* Mirrors the .dashboard-recommendation post-run layout: a header row
   with a ghost pill and title, then a few stat lines. Reuses the .panel
   envelope so the shape reads as a real panel ghost. */
.skeleton-finding {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.skeleton-finding-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.skeleton-pill {
  /* Ghost of a .pill — character-width sizing avoids raw px. */
  width: 6ch;
  height: 1.4em;
  border-radius: var(--r-pill);
}
.skeleton-title {
  flex: 1;
  height: 1.4em;
  max-width: 40%;
}
.skeleton-line {
  height: 1em;
  width: 100%;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }

/* ---- Metric strip preview --------------------------------------------- */
/* A row of ghost .metric-tile cells matching the post-run metric-grid. */
.skeleton-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10ch, 1fr));
  gap: var(--space-3);
}
.skeleton-metric-tile {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.skeleton-metric-tile .skeleton-line.label { width: 70%; height: 0.8em; }
.skeleton-metric-tile .skeleton-line.value { width: 60%; height: 1.6em; }

/* ---- Panel outline preview -------------------------------------------- */
/* Two or three ghost panels showing the supporting evidence that
   comes below the headline finding. */
.skeleton-panel-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
  gap: var(--space-4);
}
.skeleton-panel-outline {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  min-height: 8em;
}
.skeleton-panel-outline .skeleton-line.header {
  width: 50%;
  height: 1.2em;
}

/* ---- Table preview (acquisitions / trajectory) ------------------------ */
/* Ghost of a sortable table — header row + a few body rows. */
.skeleton-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.skeleton-table th,
.skeleton-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}
.skeleton-table tr:last-child td { border-bottom: 0; }
.skeleton-table .skeleton-line {
  height: 1em;
  width: 80%;
}
.skeleton-table .skeleton-line.numeric { width: 50%; margin-left: auto; }
.skeleton-table .col-numeric { text-align: right; }

/* ---- Spotlight asset-card preview ------------------------------------- */
/* A faded asset card + comparison slot outlines, mirroring the
   spotlight-active layout (headline metrics + chart card + compare row). */
.skeleton-spotlight {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.skeleton-spotlight-headline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10ch, 1fr));
  gap: var(--space-3);
}
.skeleton-spotlight-headline .skeleton-metric-tile {
  /* Tighter than the dashboard metric tile to match the slimmer
     spotlight headline strip. */
  padding: var(--space-2) var(--space-3);
}
.skeleton-compare-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.skeleton-compare-slot {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-subtle);
  border: 1px dashed var(--line-soft);
  border-radius: var(--r-sm);
  min-height: 6em;
}
.skeleton-chart {
  /* Ghost chart surface — em sizing keeps raw px out. */
  min-height: 10em;
  border-radius: var(--r-sm);
}

/* =========================================================================
   Round-4 density pass.
   Goal: information-packed workbench surfaces without becoming overwhelming.
   The reference is the Asset Decision Briefs panel — tight horizontal row
   of metric tiles + 1-line head + inline diagnostic paragraph. The rest
   of the workbench has been the opposite (large tile padding, multi-line
   panel heads with prose subs stacked on their own row, vertical stacks
   where horizontal rows would fit). This block:
     1. Provides .panel-head--inline so an `<h2>` + `<p class="panel-sub">`
        fits on one line (title left, sub muted right) instead of two
        80px-tall rows. Applied selectively in index.html.
     2. Provides .metric-grid--scroll so a strip of 5-8+ tiles becomes
        one horizontal row with overflow-x: auto rather than wrapping
        to 3 stacked rows on a typical viewport.
     3. Provides .panel-body--tight to drop the inter-block vertical gap
        inside a single panel from --space-5 to --space-3.
   ========================================================================= */

/* 1. Inline panel head — title + muted right-aligned subtitle on one
      line. The DOM change is to move the `<p class="panel-sub">` *inside*
      the panel head div; the .panel-sub default block-display + bottom
      margin would force a second line otherwise, so we override both. */
.panel-head--inline,
.panel-header--inline {
  flex-wrap: nowrap;
}
.panel-head--inline > .panel-sub,
.panel-header--inline > .panel-sub {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: var(--fs-sm);
  line-height: var(--leading-tight);
  color: var(--muted);
  /* Single-line truncation — the prose still lives in the title
     attribute (renderer can populate it) so power users can hover
     for the full sentence. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
}
/* On narrow viewports the inline sub would crowd the title; let it
   wrap to a second line with normal block layout below 720px. */
@media (max-width: 720px) {
  .panel-head--inline,
  .panel-header--inline {
    flex-wrap: wrap;
  }
  .panel-head--inline > .panel-sub,
  .panel-header--inline > .panel-sub {
    flex-basis: 100%;
    text-align: left;
    white-space: normal;
    overflow: visible;
  }
}

/* 2. Horizontal scroll row — for a strip of many metric tiles that
      would otherwise wrap to 3+ rows. Each tile gets a min-width so it
      doesn't compress. Uses a thin custom scrollbar styling rather
      than a fade overlay (no JS scroll-shadow component exists). */
.metric-grid--scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--space-2);
  padding: var(--space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.metric-grid--scroll > div {
  flex: 0 0 auto;
  min-width: 140px;
  /* Inherit the same per-tile padding as the wrapped variant so a
     surface can swap layout modes without typography drift. */
  padding: var(--space-2) var(--space-3);
}
.metric-grid--scroll::-webkit-scrollbar {
  height: 6px;
}
.metric-grid--scroll::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--r-sm);
}
.metric-grid--scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* 3. Tight panel body — drops inter-block vertical gap inside a single
      panel. Default panel-body uses --space-5; tight uses --space-3 so
      ~30% more content fits above the fold. Applied via a modifier
      class on a wrapping .panel-body element. */
.panel-body--tight {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.panel-body--tight > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* ----------------------------------------------------------------
   Catalog administration tab (Round 8) — minimal data-steward CRUD.
   Lives under the assumptions workspace, behind /catalogs/* API.
   Surfaces are deliberately spartan: a picker + tabs + table +
   modal form. No analyst-facing chrome.
   ---------------------------------------------------------------- */
.catalogs-admin {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}
.catalogs-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.catalogs-admin-sub {
  color: var(--color-muted);
  margin: var(--space-1) 0 0;
}
.catalogs-admin-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.catalogs-admin-label {
  font-size: var(--fs-12);
  color: var(--color-muted);
}
.catalogs-admin-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}
.catalogs-admin-tabs .cat-tab {
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
}
.catalogs-admin-tabs .cat-tab.active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}
.catalogs-admin-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.catalogs-admin-status {
  font-size: var(--fs-12);
  color: var(--color-muted);
}
.catalogs-admin-status.is-error {
  color: var(--color-red);
}
.catalogs-admin-table-wrap {
  overflow-x: auto;
}
.catalogs-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}
.catalogs-admin-table th,
.catalogs-admin-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
}
.catalogs-admin-table tr.is-deactivated td {
  opacity: 0.45;
  text-decoration: line-through;
}
.catalogs-admin-actions {
  display: flex;
  gap: var(--space-2);
  white-space: nowrap;
}

.catalog-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 46, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.catalog-modal[hidden] { display: none; }
.catalog-modal-card {
  background: var(--color-surface);
  border-radius: var(--radius-2);
  max-width: 560px;
  width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.catalog-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}
.catalog-modal-close {
  background: transparent;
  border: 0;
  font-size: var(--fs-20);
  cursor: pointer;
  color: var(--color-muted);
}
.catalog-modal-form {
  padding: var(--space-3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.catalog-form-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: var(--space-2);
}
.catalog-form-row label {
  font-size: var(--fs-12);
  color: var(--color-muted);
}
.catalog-form-row input {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-1);
  font-size: var(--fs-13);
}
.catalog-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-line);
}
.catalog-modal-error {
  padding: var(--space-2) var(--space-3);
  color: var(--color-red);
  font-size: var(--fs-12);
}

/* =========================================================================
   Registry attach (pre-NCT → NCT) — Setup's Product section. The
   pre-clinical framing line, the attach input, and the keep-mine /
   take-theirs enrichment diff panel.
   ========================================================================= */
.setup-registry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--panel-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.setup-registry-pre { color: var(--muted-strong); flex: 1 1 360px; }
.setup-registry-attached a { font-weight: 700; }
.setup-registry #setup-nct-input { width: 160px; }
.setup-enrich-panel {
  flex-basis: 100%;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-3);
}
.setup-enrich-head { margin-bottom: var(--space-2); }
.setup-enrich-hint, .setup-enrich-empty { color: var(--muted); margin: 0 0 var(--space-2); }
.setup-enrich-error { color: var(--red-strong); margin: 0; }
.setup-enrich-rows { display: grid; gap: var(--space-1); }
.setup-enrich-row {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--r-xs);
}
.setup-enrich-row:hover { background: var(--surface-subtle); }
.setup-enrich-current { color: var(--muted); text-decoration: line-through; }
.setup-enrich-row:has(input:not(:checked)) .setup-enrich-current {
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
}
.setup-enrich-row:has(input:not(:checked)) .setup-enrich-proposed {
  color: var(--muted);
}
.setup-enrich-arrow { color: var(--muted); }
.setup-enrich-proposed { font-weight: 700; color: var(--green-strong); }
.setup-enrich-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }
/* ═════════════════════════════════════════════════════════════════════
   Narrow-viewport responsive pass — 2026-06-09 mobile audit.
   First conservative pass: stop the concrete breakages found at
   1024×768 / 768×1024 / 390×844, no redesign. The <1024px viewport
   gate still shows first; these rules govern what the user sees after
   clicking "Use it anyway". Findings + before/after screenshots:
   docs/audit/2026-06-09-mobile-audit.md.
   ═══════════════════════════════════════════════════════════════════ */

/* ≤1024px — small laptop / tablet landscape.
   The sub-tab row gets the same scroll-not-overflow treatment the
   workspace nav already has (styles.css §app-bar ≤1024 block), and the
   28px workspace gutter steps down to --space-4. The run-dock's
   negative-margin bleed mirrors the gutter so it still spans the full
   workspace width. */
@media (max-width: 1024px) {
  .app-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  /* Firefox */
  }
  .app-tabs::-webkit-scrollbar { display: none; }
  .app-tabs a { white-space: nowrap; flex: 0 0 auto; }

  .workspace { padding-left: var(--space-4); padding-right: var(--space-4); }
  .case-bar { padding-left: var(--space-4); padding-right: var(--space-4); }
  .run-dock {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ≤768px — tablet portrait / phone. */
@media (max-width: 768px) {
  /* App bar. Audit finding #1: the meta cluster (folder + scenario +
     status + sign-in + settings) sits in an `auto` grid column with a
     min-content width of ~420, which forced the whole document to a
     scrollWidth of ~575 on the 390-wide phone — every sticky bar and the
     two-column form grids then laid out against that phantom width
     and clipped at the right edge. Restack the bar onto two grid rows
     instead: brand + workspace nav (in a minmax(0,1fr) track that
     clamps its intrinsic width — same device as the base ≤1024 rule)
     on row one, meta on its own full-width row below. */
  .app-bar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .app-brand { grid-column: 1; grid-row: 1; }
  .app-workspaces {
    grid-column: 2;
    grid-row: 1;
    min-height: var(--space-7);
  }
  .app-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Case bar: title + badges + overflow menu wrap instead of clipping. */
  .case-bar {
    flex-wrap: wrap;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  /* Form + card grids → single column. The auto-fit/auto-fill
     minmax(220-240px, 1fr) bases produce cramped 2-3 column layouts
     between ~480 and ~768 wide (Setup's "Product" grid squeezed its
     inputs to 258 wide and clipped the second column on the phone). */
  .setup-grid,
  .setup-startfrom-grid,
  .products-grid,
  .start-templates { grid-template-columns: 1fr; }

  /* Workspace gutter steps down once more so phone-width panels keep
     usable content width; run-dock bleed mirrors it. */
  .workspace { padding-left: var(--space-3); padding-right: var(--space-3); }
  .run-dock {
    margin-left: calc(-1 * var(--space-3));
    margin-right: calc(-1 * var(--space-3));
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  /* Keep the dock on one row: the scenario-name input shrinks instead
     of holding its 220px floor and pushing Run off-canvas. */
  .run-dock .scenario-name-input {
    min-width: 0;
    flex: 1 1 auto;
  }

  /* Analyst dock. At desktop widths the collapsed "Ask the Analyst"
     chip floats clear of the run-dock's buttons; below ~900 wide they
     collided (on the 768 tablet the chip covered the Run button). Hug
     the right edge a little tighter, and lift the dock above the
     sticky run-dock whenever the run-dock is shown (same body-state
     selector the run-dock itself uses). --space-7 + --space-2
     clears the one-row dock. */
  .analyst-dock {
    right: var(--space-2);
    max-width: calc(100vw - var(--space-4));
  }
  body[data-portfolio-state="active"][data-active-workspace="product"] .analyst-dock {
    bottom: calc(var(--space-7) + var(--space-2));
  }
}

/* =========================================================================
   Case review workflow — the case-bar state pill + action menu.
   ========================================================================= */
.review-badge { cursor: pointer; border: none; font: inherit; }
/* .pill's inline-flex would beat the UA [hidden] rule (same trap as
   .case-bar-runinfo above) — both badges toggle via the attribute. */
.review-badge[hidden],
#review-modified-badge[hidden] { display: none; }
.review-badge.review-approved {
  background: var(--green-soft);
  color: var(--green-strong);
}
.review-menu {
  position: fixed;
  z-index: 90;
  display: grid;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(15, 26, 46, 0.14);
  padding: var(--space-1);
}
.review-menu button {
  text-align: left;
  background: transparent;
  border: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.review-menu button:hover { background: var(--surface-subtle); }

/* ==========================================================================
   COLOR-REDUNDANCY ACCESSIBILITY PASS (append-only section)
   Added 2026-06-10. Non-color carriers for meaning that was previously
   encoded in hue alone, so colorblind users keep the tiers/lenses/stages.
   ========================================================================== */

/* --- Football field: per-lens outline patterns ---------------------------
   The DCF / Precedents / Trading-Comps rows already carry a textual lens
   label on the left; these stroke patterns make the bars themselves
   distinguishable without the green/amber/navy fills:
     - DCF rNPV band      → solid outline
     - Precedents lens    → dashed outline
     - Trading-comps lens → dotted outline
   Strokes are dark neutrals (not tier hues) — the *pattern* is the carrier. */
.ff-bar-outer.ff-dcf-band {
  stroke: rgba(15, 26, 46, 0.55);
  stroke-width: 1;
}
.ff-bar-outer.ff-precedents {
  stroke: rgba(15, 26, 46, 0.55);
  stroke-width: 1;
  stroke-dasharray: 5 3;
}
.ff-bar-outer.ff-trading {
  stroke: rgba(15, 26, 46, 0.55);
  stroke-width: 1;
  stroke-dasharray: 1.5 2.5;
}

/* --- Phase ramp Gantt: per-stage pattern overlays -------------------------
   Phase bars (app.js renderPipelineTimeline → phaseBar) differ by the
   --phase-* teal ramp only; every bar does carry its stage name as text,
   but at narrow zoom the label truncates. Layer a low-opacity white
   repeating-gradient pattern per development stage (distinct angle /
   rhythm per stage) over the existing background-color so stages stay
   distinguishable without hue. CSS-only: the stage classes
   (.stage-early … .stage-market and the positional .phase-1/2/3
   fallbacks) are already emitted by the renderer.
   `:not(.timing-unlocked)` keeps the optimizer's unlock gradient intact
   (that mode intentionally repaints all bars with one gradient).
   Positional fallbacks first, semantic stage classes after so the
   stage-* pattern wins when both classes are present (mirrors the
   color-rule precedence above). */
.phase-bar:not(.timing-unlocked).phase-1 {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.16) 0,
    rgba(255, 255, 255, 0.16) 3px,
    transparent 3px,
    transparent 11px
  );
}
.phase-bar:not(.timing-unlocked).phase-2 {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.16) 0,
    rgba(255, 255, 255, 0.16) 3px,
    transparent 3px,
    transparent 11px
  );
}
.phase-bar:not(.timing-unlocked).phase-3 {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.14) 0,
    rgba(255, 255, 255, 0.14) 2px,
    transparent 2px,
    transparent 9px
  );
}
/* stage-early / stage-enabling: solid — the baseline of the ramp. */
.phase-bar:not(.timing-unlocked).stage-early,
.phase-bar:not(.timing-unlocked).stage-enabling {
  background-image: none;
}
.phase-bar:not(.timing-unlocked).stage-phase1 {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.16) 0,
    rgba(255, 255, 255, 0.16) 3px,
    transparent 3px,
    transparent 11px
  );
}
.phase-bar:not(.timing-unlocked).stage-phase2 {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.16) 0,
    rgba(255, 255, 255, 0.16) 3px,
    transparent 3px,
    transparent 11px
  );
}
.phase-bar:not(.timing-unlocked).stage-phase3 {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.14) 0,
    rgba(255, 255, 255, 0.14) 2px,
    transparent 2px,
    transparent 9px
  );
}
.phase-bar:not(.timing-unlocked).stage-registration {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.14) 0,
    rgba(255, 255, 255, 0.14) 2px,
    transparent 2px,
    transparent 8px
  );
}
/* stage-market keeps its existing horizontal blue gradient as the lower
   layer; the cross-hatch pattern stacks above it. */
.phase-bar:not(.timing-unlocked).stage-market {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.12) 0,
      rgba(255, 255, 255, 0.12) 2px,
      transparent 2px,
      transparent 12px
    ),
    linear-gradient(90deg, #2563a8, #2c6391);
}

/* --- Citation-chip applicability tiers ------------------------------------
   No CSS change needed: the tier always co-renders a numeric percentage
   badge (.ff-cite-applicability / .ff-prov-card-applicability) and the
   hover title now leads with the tier name in words (asset_card_gallery.js).
   Documented here so the tier tint rules above (~line 16108) aren't
   mistaken for the sole carrier. */

/* --- Run-compare delta tiles -----------------------------------------------
   No CSS change needed: buildDeltaTile (run_comparison.js) always prefixes
   the delta string with an explicit ↑ / ↓ glyph (or "no change") and a
   "was <old>" anchor, so .delta-pos / .delta-neg green/red is redundant. */

/* ===========================================================================
   Prior-fitting surfacing (priors design §1–§3) — distribution editor chip,
   fit-plot popover, divergence percentile, Refine Matches live fit plot.
   APPEND-ONLY SECTION owned by the prior-fitting PR (claude/imp-priors).
   =========================================================================== */

/* Chip row grows a fourth slot for the fit-plot toggle:
     [chip]  <distribution claim>  [Use →] [Fit ▸] */
.dist-editor-suggestion {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

/* The distribution claim line — family · p50 (p10–p90) · n · KS. Same
   slot as the old "default = X" value, slightly quieter weight since it
   carries more tokens. */
.dist-editor-prior-claim {
  font-weight: 500;
}

.dist-editor-fit-toggle {
  border: 1px solid var(--line, #d4dae2);
  background: transparent;
  color: var(--muted-strong, #44505c);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs, 11px);
  line-height: 1.4;
  padding: 1px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.dist-editor-fit-toggle:hover {
  border-color: var(--brand, #2563a8);
  color: var(--brand-strong, #1a4a85);
}

.dist-editor-fitplot {
  margin-top: var(--space-2, 8px);
}
.dist-editor-fitplot .distviz-fitplot {
  display: block;
  width: 100%;
}

/* Scope honesty line — "fitted on 'hepatology' — full indication was
   below min-n". Sits between the chip row and the provenance line. */
.dist-editor-prior-scope {
  margin: 2px 0 0;
  font-size: var(--fs-xs, 11px);
  color: var(--amber, #9a6700);
  line-height: var(--leading-tight, 1.3);
}

/* Divergence percentile — quiet in the body of the prior, flagged at
   the tails (≤p10 / ≥p90). The high/low colors come from the existing
   .dist-editor-divergence rules; mid is deliberately muted. */
.dist-editor-divergence--pct.mid {
  color: var(--muted-strong, #5b6b7a);
  font-weight: 500;
}

/* Refine Matches drawer — live fit plot section. */
.refine-drawer-fitplot {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.refine-drawer-fitplot .distviz-fitplot {
  display: block;
  width: 100%;
}
.refine-fitplot-head {
  font-size: var(--fs-sm, 12px);
  font-weight: 600;
  color: var(--ink, #1f2933);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

/* Per-row honesty columns (§3.2): right-censoring + results-posted. */
.refine-row-censored {
  font-size: var(--fs-xs, 10px);
  color: var(--amber, #9a6700);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: 0 6px;
  white-space: nowrap;
}
.refine-row-results {
  font-size: var(--fs-xs, 10px);
  border-radius: var(--r-pill);
  padding: 0 6px;
  white-space: nowrap;
}
.refine-row-results.has-results { color: var(--brand-strong, #1a4a85); border: 1px solid currentColor; }
.refine-row-results.no-results { color: var(--accent-strong, #b4232a); border: 1px solid currentColor; }

/* End prior-fitting append-only section. */

/* ============================================================================
   Floor-pad honesty (adversarial-scan follow-up, 2026-06-10) — surfaces
   filler comps that entered the applied set only because the similarity
   model's min_applied floor padded past min_score. Same neutral tone as
   the rejected-card list so a reviewer reads "applied but flagged" rather
   than "rejected".
   ============================================================================ */
.ff-cite-chip--floor {
  border-style: dashed;
  background: var(--surface-subtle, var(--panel));
}
.ff-cite-floor-flag {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--r-pill);
  font-size: var(--fs-xxs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-strong, var(--muted));
  border: 1px solid currentColor;
}
/* End floor-pad honesty section. */

/* ===========================================================================
   Auto-applied fitted priors (2026-06-10) — quiet status pill that swaps in
   for the "Use" suggestion chip when the editor pre-applied a high-quality
   empirical fit to an untouched template default. The pill carries one
   sentence of provenance (family + sample count) and a Revert button so
   the analyst can undo cleanly. Secondary tone so it doesn't compete with
   the chart or the locked-distribution row above it.
   APPEND-ONLY SECTION — do not edit anything earlier in this file.
   =========================================================================== */
.dist-editor-autoapplied {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--muted-strong);
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xs);
  padding: 2px var(--space-2);
  line-height: var(--leading-tight);
}
.dist-editor-autoapplied-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dist-editor-autoapplied-revert {
  flex: none;
  padding: 1px var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-strong);
  background: transparent;
  border: 1px solid var(--brand-border);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.dist-editor-autoapplied-revert:hover {
  background: var(--brand);
  color: var(--panel);
}

/* ── Mixture distribution authoring ───────────────────────────────────────
   Visual authoring for the mixture family: each component row holds a
   nested child editor plus a weight input and a normalized-share readout.
   The component column grows to fill available space; the weight and share
   columns are fixed-narrow so the row grid is stable across component count.
   Reuses .dist-editor-cat-add / .dist-editor-cat-rm (same add/remove
   affordance as categorical) so no new button styles are introduced. */

.dist-editor-params--mixture {
  grid-template-columns: 1fr !important;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border-color: var(--line);
}

.dist-editor-mix-header,
.dist-editor-mix-row {
  display: grid;
  grid-template-columns: 1fr minmax(0, 80px) 40px 24px;
  gap: var(--space-2);
  align-items: start;
}

.dist-editor-mix-header {
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-1);
}

.dist-editor-mix-header span {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.dist-editor-mix-row + .dist-editor-mix-row {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

/* Component cell: the child DistEditor fills the column and clips at the
   parent's width. The nested .dist-editor-body already handles its own
   grid; we only need to prevent horizontal overflow. */
.dist-editor-mix-cell-comp {
  min-width: 0;
  overflow: hidden;
}

.dist-editor-mix-child {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: var(--space-2);
  background: var(--surface-subtle);
}

/* Weight input cell */
.dist-editor-mix-cell-wt input {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--panel);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.dist-editor-mix-cell-wt input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}

/* Normalized share readout — muted, right-aligned so decimal columns stack */
.dist-editor-mix-cell-share {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-top: var(--space-1);
}

/* Remove button cell — aligns with the top of the component card */
.dist-editor-mix-cell-rm {
  display: flex;
  align-items: flex-start;
  padding-top: var(--space-1);
}

/* Non-authorable (imported) component label */
.dist-editor-mix-readonly {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-style: italic;
  padding: var(--space-1) 0;
}

/* Inline weight-total validation warning */
.dist-editor-mix-warn {
  font-size: var(--fs-xs);
  color: var(--red);
  padding: var(--space-1) 0 var(--space-2);
}

/* ── Phase 0 a11y foundations ──────────────────────────────────────────── */

/* Visually-hidden utility: text present in the accessibility tree but
   invisible on screen. Use for sr-only descriptions, aria-describedby
   targets, and any text that carries meaning only for AT users.
   Follows the modern clip-path recipe (clip: rect() is deprecated). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Low-coverage warning tag appended to the `linked k/n` provenance head.
   Compact amber pill, text-redundant with the .ff-linked-low tint so the
   thin-sourcing signal survives without color perception. */
.ff-linked-warn {
  display: inline-block;
  font-size: var(--fs-xs, 10px);
  font-weight: 600;
  color: var(--amber, #b45309);
  background: var(--amber-soft, #fef3c7);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1.6;
}
/* ---------- Policy tab — live constraint pills (D2a) ---------------------- */
.policy-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  min-height: var(--space-4);
}
.policy-pills-empty {
  font-size: var(--fs-sm);
  color: var(--muted-strong);
  font-style: italic;
}
.policy-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.policy-pill-bound-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0 var(--space-1);
  border-radius: var(--r-xs);
  background: var(--amber-soft);
  color: var(--amber-strong);
  border: 1px solid var(--amber);
  margin-left: var(--space-1);
}

/* ---------- Export tab — run-provenance banner (D2b) ---------------------- */
.export-provenance-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--panel-soft);
  font-size: var(--fs-sm);
  color: var(--ink);
  min-height: var(--space-4);
}
.export-provenance-banner:empty {
  display: none;
}
.export-provenance-empty {
  color: var(--muted-strong);
  font-style: italic;
}
.export-provenance-run {
  flex: 1;
  color: var(--ink);
}
.export-provenance-stale-tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0 var(--space-1);
  border-radius: var(--r-xs);
  background: var(--amber-soft);
  color: var(--amber-strong);
  border: 1px solid var(--amber);
  white-space: nowrap;
}
/* ---------- Dissent tab — bear-case auto-population (D2c) ----------------- */
.dissent-bear-case {
  margin-bottom: var(--space-4);
}
.dissent-bear-case-empty {
  font-size: var(--fs-sm);
  color: var(--muted-strong);
  font-style: italic;
}
.dissent-bear-case-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dissent-bear-case-item {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}
.dissent-bear-case-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.dissent-bear-case-name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  flex: 1;
}
.dissent-bear-case-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dissent-bear-case-detail {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted-strong);
}
/* Severity colour cues (mirrors .dissent-* palette) */
.dissent-bear-case-high   { border-left-color: var(--red); }
.dissent-bear-case-badge-high   { background: var(--red-soft); color: var(--red); }
.dissent-bear-case-medium { border-left-color: var(--amber); }
.dissent-bear-case-badge-medium { background: var(--amber-soft); color: var(--amber); }
.dissent-bear-case-low    { border-left-color: var(--blue); }
.dissent-bear-case-badge-low    { background: var(--blue-soft); color: var(--blue); }
.dissent-bear-case-unknown { border-left-color: var(--line); }
.dissent-bear-case-badge-unknown { background: var(--panel-soft); color: var(--muted-strong); border: 1px solid var(--line); }
/* End auto-applied fitted priors append-only section. */

/* ===== Wave 2 — comparison-page density (Track 1) ===== */

/* --- Acquisitions: 3-stat header --- */
.acq-stat-header {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.acq-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.acq-stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.acq-stat-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* --- Assumption audit: 3-col tax grid override --- */
.quick-params-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* --- Calibration: accuracy mini-histogram --- */
.calibration-accuracy-histogram {
  margin-top: var(--space-3);
}
.calib-hist {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 48px;
  padding: 0;
}
.calib-hist-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.calib-hist-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 3px 3px 0 0;
  transition: height 0.2s ease;
}
.vb-match       { background: var(--green); }
.vb-close       { background: var(--brand); }
.vb-directional { background: var(--amber); }
.vb-miss        { background: var(--red); }
.calib-hist-count {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
}
.calib-hist-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
}

/* Featured case as inline banner (compact) */
.calibration-featured--inline .calibration-featured-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-subtle);
  border-radius: var(--r-md);
  margin-bottom: var(--space-4);
}
.calibration-featured--inline .calibration-featured-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.calibration-featured--inline .calibration-featured-title {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ink);
}
.calibration-featured--inline .calibration-featured-meta {
  color: var(--muted-strong);
  font-size: var(--fs-sm);
}
.calibration-featured--inline .calibration-featured-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: 0;
  font-size: var(--fs-sm);
}
.calibration-featured--inline .calibration-featured-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 0;
}

/* --- Library: inline distribution bounds in Value column --- */
.lib-dist-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lib-dist-point {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.lib-dist-bounds {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--muted-strong);
  white-space: nowrap;
}

/* Library: icon-only action buttons */
.lib-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.lib-icon-btn:hover {
  background: var(--surface-subtle);
  color: var(--ink);
  border-color: var(--line-strong);
}
.lib-icon-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.lib-approve.lib-icon-btn:hover { color: var(--green); border-color: var(--green); }
.lib-reject.lib-icon-btn:hover  { color: var(--red);   border-color: var(--red); }
.lib-retire.lib-icon-btn:hover  { color: var(--amber); border-color: var(--amber); }
.lib-actions { white-space: nowrap; }

/* End Wave 2 density append-only section. */

/* =========================================================================
   E1 — IC Memo card (Export tab).
   Reuses the existing risk-flag severity tokens (--red, --amber) and the
   panel/line/ink token set so dark-mode and theme changes are automatic.
   ========================================================================= */

/* The host export-card takes the full grid width so the memo has room. */
.export-card--ic-memo {
  grid-column: 1 / -1;
  padding: 0;
  border-color: var(--brand-border, var(--teal-border, #b6d0f0));
  background: var(--panel);
}

/* Empty state: shown before any run completes. */
.ic-memo-empty {
  margin: 0;
  padding: 20px 24px;
  font-size: 13px;
  color: var(--muted-strong);
  font-style: italic;
}

/* Inner wrapper with padding so the header row can bleed to the card edge. */
.ic-memo-inner {
  display: flex;
  flex-direction: column;
}

/* Header row: title + copy button on the same line. */
.ic-memo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 10px;
  border-bottom: 1px solid var(--line);
}
.ic-memo-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.ic-memo-copy {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.ic-memo-copy:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.ic-memo-copy:focus-visible {
  outline: 2px solid var(--brand-soft);
  outline-offset: 1px;
}

/* Section layout. */
.ic-memo-section {
  padding: 14px 24px 6px;
  border-bottom: 1px solid var(--line-soft, var(--line));
}
.ic-memo-section:last-child {
  border-bottom: none;
}
.ic-memo-section-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.ic-memo-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ic-memo-line {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 3px solid transparent;
}

/* Severity tones — same tokens as .prov-issue and .dissent-* rules */
.ic-memo-line--critical {
  border-left-color: var(--red);
  background: var(--red-soft);
  color: var(--red-strong);
}
.ic-memo-line--high {
  border-left-color: var(--red);
  background: var(--red-soft);
  opacity: 0.92;
}
.ic-memo-line--medium {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

/* End E1 IC Memo styles. */

/* ===== Wave 4 — sparse-page density (Track 1) ===== */

/* --- Versions: 3-stat summary header --- */
/* Matches .acq-stat-header pattern (Wave 2) — same visual weight,
   same tokens, stat strip sits between panel header and toolbar. */
.versions-stat-header {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.versions-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.versions-stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.versions-stat-value.stat-absent {
  color: var(--muted);
  font-weight: 400;
}
.versions-stat-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* --- Start: 2-stat summary strip beneath the hero greeting --- */
/* Low-density landing target (§5): strip carries the product/portfolio
   counts so the page floor is informative on every visit rather than
   purely prompting. Same stat-value/label idiom as .acq-stat / .versions-stat. */
.start-stat-strip {
  display: flex;
  gap: var(--space-6);
  margin: var(--space-4) 0 var(--space-5);
}
.start-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.start-stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.start-stat-value.stat-absent {
  color: var(--muted);
  font-weight: 400;
}
.start-stat-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
/* ===== Wave 4 — Export / Policy / Dissent / Research density pass ===== */

/* Shared page-stat strip — reused across all four deferred Wave-4 pages.
   Same geometry and token palette as .versions-stat-header / .acq-stat-header
   so the visual weight reads identically across the workbench. Named .pg-stat-*
   ("page stat") to avoid collision with the per-page prefixes already in use. */
.pg-stat-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.pg-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 120px;
  min-width: 0;
}
.pg-stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pg-stat-value.stat-absent {
  color: var(--muted);
  font-weight: 400;
}
.pg-stat-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Policy form: remove the inline style margin-top that was on the old
   form element now that the stat strip provides top separation. */
#strategy-policy-form {
  margin-top: var(--space-3);
}

/* End Wave 4 density append-only section. */

/* ============ Billing / usage console (Tranche 4 §6) ================
   Append-only block — do not edit existing rules above this line.
   Class prefix: .billing-* (matches billing.js module).
   All spacing via var(--space-*); all colour via tokens; no raw px
   except the border-radius (2px, in ALLOWED_PX) and border (1px). */

#billing-view-root {
  padding: var(--space-4) var(--space-5);
  max-width: 1100px;
}

.billing-loading,
.billing-error,
.billing-no-access {
  color: var(--muted);
  padding: var(--space-4);
  font-size: var(--fs-body);
}

.billing-error {
  color: var(--red, #b04341);
}

.billing-section {
  margin-bottom: var(--space-6);
}

.billing-section-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-3) 0;
}

/* Operator notice banner — distinct operator-console visual per design §10. */
.billing-operator-notice {
  background: var(--navy-soft, #e8eff8);
  border-left: 4px solid var(--brand, #2563a8);
  color: var(--ink-soft, #1d2a3e);
  font-weight: 600;
  font-size: var(--fs-body);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: 2px;
}

/* Plan block — firm ID + total line. */
.billing-plan-block {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--fs-body);
}

.billing-plan-label {
  color: var(--muted);
  font-weight: 500;
}

.billing-plan-value {
  color: var(--ink);
}

/* Shared table styles. */
.billing-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: var(--fs-body);
}

.billing-th {
  background: var(--surface-subtle, #f4f6f9);
  color: var(--muted-strong, #3d4b5c);
  font-weight: 600;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--lines, #e3e8ef);
}

.billing-td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--lines, #e3e8ef);
  color: var(--ink);
  vertical-align: middle;
}

.billing-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Overage highlight — red text for overages > 0. */
.billing-overage {
  color: var(--red, #b04341);
  font-weight: 600;
}

/* Total line. */
.billing-total {
  font-size: var(--fs-body);
  color: var(--ink);
  text-align: right;
  padding: var(--space-2) var(--space-3);
  border-top: 2px solid var(--lines, #e3e8ef);
  margin-bottom: var(--space-4);
}

/* All-firms table: clickable rows. */
.billing-firm-row {
  cursor: pointer;
}

.billing-firm-row:hover .billing-td {
  background: var(--surface-subtle, #f4f6f9);
}

.billing-firm-name {
  font-weight: 500;
}

.billing-firm-slug {
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-small);
}

.billing-firm-expanded-cell {
  padding: 0;
  background: var(--panel-soft, #faf9f6);
}

.billing-firm-expanded {
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--brand, #2563a8);
}

.billing-firms-total-row .billing-td {
  background: var(--surface-subtle, #f4f6f9);
  border-top: 2px solid var(--lines, #e3e8ef);
}

/* Pricing controls table. */
.billing-price-input {
  width: 100px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--lines, #e3e8ef);
  border-radius: 2px;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--panel);
}

/* Seat-allowance form. */
.billing-allowance-form {
  background: var(--surface-subtle, #f4f6f9);
  border: 1px solid var(--lines, #e3e8ef);
  border-radius: 2px;
  padding: var(--space-3);
  margin-top: var(--space-3);
}

.billing-allowance-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-2) 0;
}

.billing-allowance-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}

.billing-allowance-label {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-small);
  color: var(--muted);
  gap: var(--space-1);
}

.billing-allowance-seat-class,
.billing-allowance-free,
.billing-allowance-overage-price {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--lines, #e3e8ef);
  border-radius: 2px;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--panel);
}

/* Shared button style. */
.billing-btn {
  padding: var(--space-1) var(--space-3);
  background: var(--brand, #2563a8);
  color: var(--panel, #ffffff);
  border: none;
  border-radius: 2px;
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}

.billing-btn:hover {
  opacity: 0.88;
}

.billing-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Inline feedback messages. */
.billing-msg {
  margin-left: var(--space-2);
  font-size: var(--fs-small);
}

.billing-msg-ok {
  color: var(--green, #1f7a55);
}

.billing-msg-err {
  color: var(--red, #b04341);
}

/* End billing console block. */

/* ===== Sharing UI — §5b external deliverable shares + §5a support shares ===== */
/* Begin Sharing UI append-only block.
   Class prefix: sharing-
   Tokens: --space-*, --r-*, --fs-*, color variables only.
   No raw hex, no raw px outside the allowed set. */

/* Share dialog backdrop — same pattern as .modal-backdrop */
#sharing-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(14, 42, 71, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Share dialog box */
.sharing-dialog {
  background: var(--panel);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: 0 4px 24px rgba(14, 42, 71, 0.18);
  padding: var(--space-5);
  width: min(440px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sharing-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.sharing-dialog-header h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.sharing-attribution {
  font-size: var(--fs-sm);
  color: var(--muted);
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
  line-height: 1.5;
}

/* Form rows */
.sharing-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sharing-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sharing-field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

.sharing-field input[type="text"],
.sharing-field input[type="datetime-local"],
.sharing-field select {
  font-size: var(--fs-base);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
}

.sharing-field input[type="text"]:focus,
.sharing-field input[type="datetime-local"]:focus,
.sharing-field select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 0;
  border-color: var(--brand);
}

.sharing-field-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.sharing-field-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

.sharing-field-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: var(--space-1);
}

/* Disclosure default callout */
.sharing-disclosure-note {
  font-size: var(--fs-xs);
  color: var(--amber);
  margin-top: var(--space-1);
}

/* Error message */
.sharing-error {
  font-size: var(--fs-sm);
  color: var(--red-strong);
  background: var(--red-soft);
  border: 1px solid var(--red-tint);
  border-radius: var(--r-sm);
  padding: var(--space-2) var(--space-3);
}

/* Active shares list */
.sharing-active-section {
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-3);
}

.sharing-active-section h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-strong);
  margin: 0 0 var(--space-2);
}

.sharing-active-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sharing-active-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-subtle);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.sharing-active-who {
  flex: 1;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sharing-active-dl {
  font-size: var(--fs-xs);
}

/* Disclosure level pills */
.sharing-disc-pill {
  font-size: var(--fs-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--r-pill);
  font-weight: 600;
}

.sharing-disc-pill--redacted {
  background: var(--amber-soft);
  color: var(--amber-strong);
}

.sharing-disc-pill--full {
  background: var(--green-soft);
  color: var(--green-strong);
}

.sharing-revoke-btn {
  font-size: var(--fs-xs);
  color: var(--red);
  border: 1px solid var(--red-tint);
  border-radius: var(--r-sm);
  padding: var(--space-1) var(--space-2);
  background: var(--panel);
  cursor: pointer;
  flex-shrink: 0;
}

.sharing-revoke-btn:hover {
  background: var(--red-soft);
}

.sharing-revoke-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.sharing-list-empty,
.sharing-list-loading {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: var(--space-2) 0;
}

/* "Shared with me" panel */
.sharing-inbox-panel {
  padding: var(--space-5);
  max-width: 720px;
}

.sharing-inbox-panel h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

.sharing-with-me-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sharing-with-me-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}

.sharing-with-me-open {
  font-weight: 600;
  color: var(--brand);
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Shared project detail (read-only) */
.sharing-with-me-detail {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.sharing-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.sharing-detail-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.sharing-detail-readonly {
  font-size: var(--fs-xs);
}

.sharing-detail-desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

.sharing-detail-section {
  margin-top: var(--space-3);
}

.sharing-detail-section h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}

.sharing-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--ink);
}

.sharing-detail-back {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--brand);
}

.sharing-error-msg {
  font-size: var(--fs-sm);
  color: var(--red-strong);
  padding: var(--space-2) 0;
}

/* Form actions row */
.sharing-form-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-soft);
}

/* End Sharing UI append-only block. */