:root {
  color-scheme: dark;
  --bg: #1c140d;
  --ink: #f2e9dc;
  --muted: #b7a891;
  --panel: rgba(37, 28, 19, 0.92);
  --panel-border: rgba(var(--hairline-rgb), 0.14);
  --accent: #e2793f;
  --accent-soft: #4a2c1a;
  --teal: #4fa8ad;
  --teal-soft: rgba(var(--teal-rgb), 0.18);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --btn-gradient: linear-gradient(135deg, #c9691f, #8a3c14);
  --btn-gradient-hover: linear-gradient(135deg, #db7726, #a4491a);
  --btn-text: #fbf1e4;
  --btn-glow: 0 10px 26px rgba(201, 105, 31, 0.4);
  --btn-glow-hover: 0 14px 32px rgba(201, 105, 31, 0.5);
  --severity-critical: #e25067;
  --severity-high: #e2793f;
  --severity-medium: #d9b23c;
  --severity-low: #4fa8ad;
  --gain: #5bbf8f;
  /* Surface-inset RGB triplets (used as rgba(var(--x), alpha) for card/panel/code insets),
     variable-ized so a per-demo theme can swap the whole surface palette, not just accents.
     Warm defaults here; the theme scopes below re-point them. */
  --inset-rgb: 15, 11, 7;
  --inset-deep-rgb: 10, 8, 5;
  --hairline-rgb: 242, 233, 220;
  /* Accent RGB triplets for tint fills/borders/glows (used as rgba(var(--x), alpha) on
     accent-tinted components -- the LLM-value callout, the walkthrough "with the LLM" pane,
     the "LLM ·" badge). Variable-ized so a per-demo theme swaps the tint, not just the text
     (which already rides var(--accent)). Warm/teal defaults here; theme scopes re-point them. */
  --accent-rgb: 226, 121, 63;
  --teal-rgb: 79, 168, 173;
}

/* Per-demo accent theming (D12, invariant 16). The default `:root` above is the showcase's
   orange/teal; a `gallery-card--<domain>` scope recolors one gallery card, and a
   `body.theme-<domain>` scope recolors that demo's whole interior flow -- both by re-pointing
   the same accent variables, so `.finding-tag` (--teal), `.result-chip` (--teal-soft),
   `.card-cta`/`h2` (--accent), scenario-nav links, and the Model Console button all shift in
   one block. Only language-intelligence is themed in this plan; later demos adopt the same
   mechanism. Blue #5a8dd4 is AA-verified as text on the dark panel/bg (>=4.94:1) and the
   button gradient darkens so --btn-text (#fbf1e4) clears AA on both gradient ends (invariant
   15 -- re-run the contrast math if any shade changes). */
.gallery-card--language-intelligence {
  --teal: #5a8dd4;
  --teal-soft: rgba(90, 141, 212, 0.18);
  --accent: #5a8dd4;
  border-color: rgba(90, 141, 212, 0.38);
}
/* Interior LI pages get the FULL cool/blue palette swap from mockup view-2..5, not just an
   accent recolor: the background, panels, ink, muted text, and button chrome all shift blue
   (the home/gallery stays neutral with only the LI card tinted). Every pair clears WCAG AA
   (invariant 15): ink #eef1f5 on bg 15.98:1, muted #98a5ba 7.26:1, accent #5a8dd4 4.98:1 on
   panel, --btn-text on both gradient ends >=4.5:1. The `background` is set on `body` directly
   (not a variable), so it is overridden here too -- `body.theme-*` outspecifies the base
   `body` rule. */
body.theme-language-intelligence {
  --bg: #12161f;
  --ink: #eef1f5;
  --muted: #98a5ba;
  --panel: rgba(23, 29, 41, 0.92);
  --panel-border: rgba(238, 241, 245, 0.14);
  --accent: #5a8dd4;
  --accent-soft: #1f3350;
  --teal: #5a8dd4;
  --teal-soft: rgba(90, 141, 212, 0.18);
  --btn-gradient: linear-gradient(135deg, #3f6bb0, #22406e);
  --btn-gradient-hover: linear-gradient(135deg, #456fac, #2d5288);
  --btn-text: #eef1f5;
  --btn-glow: 0 10px 26px rgba(63, 107, 176, 0.35);
  --btn-glow-hover: 0 14px 32px rgba(63, 107, 176, 0.5);
  /* Blue-slate surface insets (mockup rgba(10,13,19,...) / rgba(8,10,15,...)) so cards,
     code blocks, the Model Console log, and tooltips read blue, not warm-over-blue.
     --hairline is the cool-white the mockup uses for borders/washes (vs the default cream). */
  --inset-rgb: 10, 13, 19;
  --inset-deep-rgb: 8, 10, 15;
  --hairline-rgb: 238, 241, 245;
  /* Accent-tint fills/borders/glows go blue too (mockup rgba(90,141,212,...)) -- both accent
     and teal map to the one blue, matching the mockup where --teal == --accent == #5a8dd4. */
  --accent-rgb: 90, 141, 212;
  --teal-rgb: 90, 141, 212;
  background:
    radial-gradient(circle at top left, rgba(90, 141, 212, 0.16), transparent 28%),
    radial-gradient(circle at bottom right, rgba(91, 191, 143, 0.1), transparent 30%),
    linear-gradient(180deg, #171d29 0%, var(--bg) 100%);
}
/* The two hardcoded warm gradients that aren't a single rgba() (so they can't ride the
   --inset vars): the hero panel and the .accent callout. Re-point them to the mockup's
   blue-slate gradients under the LI theme scope only. */
body.theme-language-intelligence .hero {
  background: linear-gradient(135deg, rgba(30, 37, 51, 0.95), rgba(23, 29, 41, 0.92));
}
body.theme-language-intelligence .accent {
  background: linear-gradient(180deg, rgba(26, 33, 47, 0.95), rgba(20, 25, 36, 0.9));
}
/* AA fix: .gen-badge.is-llm paints --accent on a 10% --accent tint at 0.7rem (normal-text
   rules apply). The blue scores 4.41:1 on that tint over a panel -- under the 4.5 threshold,
   where the default orange clears it at 4.93. Lift the badge text one step to #6b98d8
   (5.06:1) rather than dropping the tint, so the badge still reads as the accent blue.
   Guarded by tests/test_web_demo.py::test_language_theme_meets_wcag_aa_contrast. */
body.theme-language-intelligence .gen-badge.is-llm {
  color: #6b98d8;
}

/* Computer-vision: emerald #3ecf8e on #0f1a17 (CV plan D5). Green doubles as the domain's
   own vocabulary -- a detection bounding box is drawn in roughly this color in every CV
   tool a client has seen. Every pair carries more headroom than the blue did (its tightest
   was 4.93:1): ink 15.69:1 on bg, muted 7.93:1, accent 8.16:1 on panel, badge text 6.73:1
   on its own tint -- so unlike the blue, this theme needs NO `.gen-badge.is-llm` override.
   Verified by tests/test_web_demo.py::test_computer_vision_theme_meets_wcag_aa_contrast;
   re-run the math if any shade changes (invariant 9). */
.gallery-card--computer-vision {
  --teal: #3ecf8e;
  --teal-soft: rgba(62, 207, 142, 0.18);
  --accent: #3ecf8e;
  border-color: rgba(62, 207, 142, 0.38);
}
/* The severity ramp is deliberately NOT re-pointed here (D6, invariant 7): critical red /
   high orange / medium gold is the showcase-wide semantic vocabulary every demo shares,
   and the hub's "$859.93/day leaking" chip reads as high-severity, not as theme residue. */
body.theme-computer-vision {
  --bg: #0f1a17;
  --ink: #e9f3ee;
  --muted: #98b3a9;
  --panel: rgba(20, 36, 32, 0.92);
  --panel-border: rgba(233, 243, 238, 0.14);
  --accent: #3ecf8e;
  --accent-soft: #16362a;
  --teal: #3ecf8e;
  --teal-soft: rgba(62, 207, 142, 0.18);
  --btn-gradient: linear-gradient(135deg, #268058, #154630);
  --btn-gradient-hover: linear-gradient(135deg, #2d9668, #1b5a3d);
  --btn-text: #f2fbf6;
  --btn-glow: 0 10px 26px rgba(38, 128, 88, 0.35);
  --btn-glow-hover: 0 14px 32px rgba(38, 128, 88, 0.5);
  --gain: #3ecf8e;
  --inset-rgb: 8, 14, 12;
  --inset-deep-rgb: 6, 11, 9;
  --hairline-rgb: 233, 243, 238;
  --accent-rgb: 62, 207, 142;
  --teal-rgb: 62, 207, 142;
  background:
    radial-gradient(circle at top left, rgba(62, 207, 142, 0.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(62, 207, 142, 0.1), transparent 30%),
    linear-gradient(180deg, #0c1613 0%, var(--bg) 100%);
}
body.theme-computer-vision .hero {
  background: linear-gradient(135deg, rgba(24, 42, 37, 0.95), rgba(15, 26, 23, 0.92));
}
body.theme-computer-vision .accent {
  background: linear-gradient(180deg, rgba(22, 38, 33, 0.95), rgba(17, 29, 25, 0.9));
}

/* Knowledge-intelligence: violet #a78bfa on #131020 (KB retrofit plan D5). Maximally
   distinct from the blue/emerald/orange siblings and clear of the severity band. Every
   pair clears WCAG AA: ink 15.91:1 on bg, muted 7.18:1, accent 6.87:1 on bg / 6.55:1 on
   panel, badge text 5.64:1 on its own 10% tint -- so like emerald (and unlike blue) this
   theme needs NO `.gen-badge.is-llm` override. Verified by
   tests/test_web_demo.py::test_knowledge_theme_meets_wcag_aa_contrast; re-run the math if
   any shade changes. The severity ramp is deliberately NOT re-pointed (D5): critical red /
   high orange / medium gold stays the showcase-wide semantic vocabulary. */
.gallery-card--knowledge-intelligence {
  --teal: #a78bfa;
  --teal-soft: rgba(167, 139, 250, 0.18);
  --accent: #a78bfa;
  border-color: rgba(167, 139, 250, 0.38);
}
body.theme-knowledge-intelligence {
  --bg: #131020;
  --ink: #eeebf7;
  --muted: #a49bc4;
  --panel: rgba(25, 21, 39, 0.92);
  --panel-border: rgba(238, 235, 247, 0.14);
  --accent: #a78bfa;
  --accent-soft: #2a2150;
  --teal: #a78bfa;
  --teal-soft: rgba(167, 139, 250, 0.18);
  --btn-gradient: linear-gradient(135deg, #6d4fd0, #4a2f96);
  --btn-gradient-hover: linear-gradient(135deg, #7a5cdb, #5638a8);
  --btn-text: #f6f2ff;
  --btn-glow: 0 10px 26px rgba(109, 79, 208, 0.35);
  --btn-glow-hover: 0 14px 32px rgba(109, 79, 208, 0.5);
  --inset-rgb: 12, 9, 20;
  --inset-deep-rgb: 10, 8, 18;
  --hairline-rgb: 238, 235, 247;
  --accent-rgb: 167, 139, 250;
  --teal-rgb: 167, 139, 250;
  background:
    radial-gradient(circle at top left, rgba(167, 139, 250, 0.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(91, 191, 143, 0.08), transparent 30%),
    linear-gradient(180deg, #1a1529 0%, var(--bg) 100%);
}
body.theme-knowledge-intelligence .hero {
  background: linear-gradient(135deg, rgba(35, 28, 56, 0.95), rgba(25, 21, 39, 0.92));
}
body.theme-knowledge-intelligence .accent {
  background: linear-gradient(180deg, rgba(30, 24, 48, 0.95), rgba(22, 18, 36, 0.9));
}

/* Workflow-automation: cyan #38cfe6 on #0d1a1f (JML rethink plan D11). Cyan is the clean
   lane left between the blue/emerald/violet/orange siblings -- amber neighbors
   --severity-medium and rose neighbors critical-red, so neither was available. Shades were
   fixed during the signed-off Chunk-5 mockup
   (docs/superpowers/specs/2026-07-21-workflow-automation-mockup.html) with the real WCAG
   math run over every text/surface pair: the WORST pair is muted on the 18% accent tint at
   4.89:1, ink reaches 15.75:1 on bg, accent 9.48:1 on bg / 8.09:1 on panel, and the badge
   clears 6.52:1 on its own 10% tint -- so like emerald and violet (and unlike blue) this
   theme needs NO `.gen-badge.is-llm` override. Verified by
   tests/test_web_demo.py::test_workflow_theme_meets_wcag_aa_contrast; re-run the math if
   any shade changes. The severity ramp is deliberately NOT re-pointed (invariant 10):
   critical red / high orange / medium gold stays the showcase-wide semantic vocabulary. */
.gallery-card--workflow-automation {
  --teal: #38cfe6;
  --teal-soft: rgba(56, 207, 230, 0.18);
  --accent: #38cfe6;
  border-color: rgba(56, 207, 230, 0.38);
}
body.theme-workflow-automation {
  --bg: #0d1a1f;
  --ink: #e6f4f8;
  --muted: #99b9c4;
  --panel: rgba(21, 42, 49, 0.92);
  --panel-border: rgba(230, 244, 248, 0.14);
  --accent: #38cfe6;
  --accent-soft: #0f3a44;
  --teal: #38cfe6;
  --teal-soft: rgba(56, 207, 230, 0.18);
  --btn-gradient: linear-gradient(135deg, #1c7f92, #115260);
  --btn-gradient-hover: linear-gradient(135deg, #2494aa, #166577);
  --btn-text: #eefbff;
  --btn-glow: 0 10px 26px rgba(28, 127, 146, 0.35);
  --btn-glow-hover: 0 14px 32px rgba(28, 127, 146, 0.5);
  --inset-rgb: 8, 21, 26;
  --inset-deep-rgb: 6, 17, 21;
  --hairline-rgb: 230, 244, 248;
  --accent-rgb: 56, 207, 230;
  --teal-rgb: 56, 207, 230;
  background:
    radial-gradient(circle at top left, rgba(56, 207, 230, 0.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(91, 191, 143, 0.08), transparent 30%),
    linear-gradient(180deg, #112229 0%, var(--bg) 100%);
}
body.theme-workflow-automation .hero {
  background: linear-gradient(135deg, rgba(28, 56, 65, 0.95), rgba(21, 42, 49, 0.92));
}
body.theme-workflow-automation .accent {
  background: linear-gradient(180deg, rgba(24, 47, 55, 0.95), rgba(18, 35, 41, 0.9));
}

/* Expert-amplification: ledger bronze #d6a373 on warm dark #1a1410 (Vercelli plan D12).
   D12 asked for amber and named the risk: amber neighbours --severity-medium gold. The
   distinguishability check it required was run in CIELAB, and it settled the question --
   every amber worth using measures dE 8-13 from #d9b23c (under ~20 is confusable at chart
   swatch size), so the lane genuinely cannot separate. D12's own in-family fallback,
   bronze/copper, is what shipped: #d6a373 measures dE 30.1 from the nearest severity
   colour (--severity-high) and 45+ from the rest, while keeping the warm ledger register
   the scenario wants.

   WCAG AA over every text/surface pair: the WORST pair is muted on the 18% accent tint at
   5.25:1, ink reaches 13.6:1 on bg, accent 8.12:1 on bg / 7.17:1 on panel, and the badge
   clears 5.99:1 on its own 10% tint -- so like emerald, violet and cyan (and unlike blue)
   this theme needs NO `.gen-badge.is-llm` override. Verified by
   tests/test_web_demo.py::test_expert_theme_meets_wcag_aa_contrast_and_severity_distance,
   which re-runs BOTH the contrast math and the delta-E separation, so re-tuning a shade
   cannot pass on a stale claim. The severity ramp is deliberately NOT re-pointed
   (invariant 11): critical red / high orange / medium gold stays the showcase-wide
   semantic vocabulary. */
.gallery-card--expert-amplification {
  --teal: #d6a373;
  --teal-soft: rgba(214, 163, 115, 0.18);
  --accent: #d6a373;
  border-color: rgba(214, 163, 115, 0.38);
}
body.theme-expert-amplification {
  --bg: #1a1410;
  --ink: #f4ece3;
  --muted: #c2ad98;
  --panel: rgba(42, 32, 24, 0.92);
  --panel-border: rgba(244, 236, 227, 0.14);
  --accent: #d6a373;
  --accent-soft: #3d2c1c;
  --teal: #d6a373;
  --teal-soft: rgba(214, 163, 115, 0.18);
  --btn-gradient: linear-gradient(135deg, #8a5d33, #5a3a1e);
  --btn-gradient-hover: linear-gradient(135deg, #a06e3f, #6d4726);
  --btn-text: #fdf6ee;
  --btn-glow: 0 10px 26px rgba(138, 93, 51, 0.35);
  --btn-glow-hover: 0 14px 32px rgba(138, 93, 51, 0.5);
  --inset-rgb: 20, 14, 9;
  --inset-deep-rgb: 16, 11, 7;
  --hairline-rgb: 244, 236, 227;
  --accent-rgb: 214, 163, 115;
  --teal-rgb: 214, 163, 115;
  background:
    radial-gradient(circle at top left, rgba(214, 163, 115, 0.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(91, 191, 143, 0.08), transparent 30%),
    linear-gradient(180deg, #241b14 0%, var(--bg) 100%);
}
body.theme-expert-amplification .hero {
  background: linear-gradient(135deg, rgba(56, 42, 31, 0.95), rgba(42, 32, 24, 0.92));
}
body.theme-expert-amplification .accent {
  background: linear-gradient(180deg, rgba(48, 36, 27, 0.95), rgba(36, 27, 20, 0.9));
}

/* --- Personalized-experiences: the rose theme (signed-off mockup, 2026-07-23) ----------
   D12 named the risk: rose neighbours --severity-critical red (#e25067). The CIELAB check
   ran before a line of CSS was written: accent #f472b6 measures dE76 32.1 from critical
   (high 64.3, medium 92.9, low 82.2, gain 101.6), past the ~20 confusability line the
   expert amber/bronze check established; the nearest other theme accent is KB violet at
   45.9. Fuchsia candidates (#e879f9, #f0abfc) were REJECTED at dE 26-27 from KB violet.
   WCAG AA over every text/surface pair: the WORST pair is accent on its own 18% tint at
   5.32:1; ink reaches 15.91:1 on bg / 14.67:1 on panel, accent 7.06:1 on bg / 6.50:1 on
   panel, muted 8.74:1 on bg, and the badge clears 6.13:1 on its own 10% tint -- so like
   emerald, violet, cyan and bronze this theme needs NO `.gen-badge.is-llm` override.
   Verified by tests/test_web_demo.py::
   test_personalized_theme_meets_wcag_aa_contrast_and_severity_distance, which re-runs
   BOTH the contrast math and the delta-E separation, so re-tuning a shade cannot pass on
   a stale claim. The severity ramp is deliberately NOT re-pointed (invariant 12):
   critical red / high orange / medium gold stays the showcase-wide semantic vocabulary. */
.gallery-card--personalized-experiences {
  --teal: #f472b6;
  --teal-soft: rgba(244, 114, 182, 0.18);
  --accent: #f472b6;
  border-color: rgba(244, 114, 182, 0.38);
}
body.theme-personalized-experiences {
  --bg: #1a0f16;
  --ink: #f7e9f1;
  --muted: #c9a8bd;
  --panel: rgba(38, 22, 33, 0.92);
  --panel-border: rgba(247, 233, 241, 0.14);
  --accent: #f472b6;
  --accent-soft: #4a1030;
  --teal: #f472b6;
  --teal-soft: rgba(244, 114, 182, 0.18);
  --btn-gradient: linear-gradient(135deg, #a8306c, #6d1c46);
  --btn-gradient-hover: linear-gradient(135deg, #c23a80, #852257);
  --btn-text: #fff0f7;
  --btn-glow: 0 10px 26px rgba(168, 48, 108, 0.35);
  --btn-glow-hover: 0 14px 32px rgba(168, 48, 108, 0.5);
  --inset-rgb: 8, 21, 26;
  --inset-deep-rgb: 6, 17, 21;
  --hairline-rgb: 247, 233, 241;
  --accent-rgb: 244, 114, 182;
  --teal-rgb: 244, 114, 182;
  background:
    radial-gradient(circle at top left, rgba(244, 114, 182, 0.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(91, 191, 143, 0.08), transparent 30%),
    linear-gradient(180deg, #241320 0%, var(--bg) 100%);
}
body.theme-personalized-experiences .hero {
  background: linear-gradient(135deg, rgba(28, 56, 65, 0.95), rgba(38, 22, 33, 0.92));
}
body.theme-personalized-experiences .accent {
  background: linear-gradient(180deg, rgba(10, 26, 32, 0.95), rgba(8, 21, 26, 0.9));
}
/* The mockup rails is-good tiles in the gain green, not the accent -- scoped so the
   showcase-wide default (--teal) moves nowhere else. */
body.theme-personalized-experiences .stat-card.is-good { border-left-color: var(--gain); }
/* The mockup's Executive Brief runs full width (the workflow precedent), the good-toned
   stat tiles rail gain green, and the tile grid reads three across (mockup, view 3). */
body.theme-personalized-experiences .portfolio-brief-panel { grid-column: 1 / -1; }
body.theme-personalized-experiences .portfolio-stat-card.stat-good { border-left-color: var(--gain); }
body.theme-personalized-experiences .portfolio-stat-grid { grid-template-columns: repeat(3, 1fr); }

/* --- Agent-orchestration: the signal-chartreuse theme (signed-off mockup, 2026-07-23) ---
   D13 asked for a hue no other demo had taken and that no severity colour could be mistaken
   for at swatch size. Chartreuse #a8d84a on a cool near-black #0f1410 was chosen by
   measurement, the expert amber->bronze precedent.

   WCAG AA over every text/surface pair: the WORST pair in the whole palette is muted on the
   18% accent tint at 5.30:1; ink reaches 16.57:1 on bg / 14.82:1 on panel, accent 11.16:1
   on bg / 9.98:1 on panel, and the badge clears 8.07:1 on its own 10% tint -- so like
   emerald, violet, cyan, bronze and rose this theme needs NO `.gen-badge.is-llm` override.

   CIELAB delta-E in BOTH directions: vs the severity ramp the nearest is --severity-medium
   gold at 38.9 (gain 48.2, low 75.8, high 76.2, critical 107.3); vs every taken demo accent
   the nearest is cv emerald at 44.7 (bronze 58.5, cyan 85.2, blue 113.8, rose 120.3, violet
   135.4). Both clear the ~20 confusability line by a wider margin than any theme so far.
   REJECTED, measured: steel #93a9c4 (~24.6 from BOTH the default teal and --severity-low --
   the nearest neighbour in two directions at once) and periwinkle #9aa8f0 (15.2 from
   language blue, a fail).

   NOTE the button treatment INVERTS here: dark text on a bright chartreuse fill. Light text
   on a chartreuse-family button measures 3.85:1 and fails AA, and forcing it would have
   meant a dim, muddy button; dark-on-bright measures 10.66 / 7.84 on the two gradient stops.
   Verified by tests/test_web_demo.py::
   test_orchestration_theme_meets_wcag_aa_contrast_and_severity_distance, which re-runs BOTH
   the contrast math and the delta-E separation, so re-tuning a shade cannot pass on a stale
   claim. The severity ramp is deliberately NOT re-pointed (invariant 14): critical red /
   high orange / medium gold stays the showcase-wide semantic vocabulary. */
.gallery-card--agent-orchestration {
  --teal: #a8d84a;
  --teal-soft: rgba(168, 216, 74, 0.18);
  --accent: #a8d84a;
  border-color: rgba(168, 216, 74, 0.38);
}
body.theme-agent-orchestration {
  --bg: #0f1410;
  --ink: #eef4e3;
  --muted: #a9ba98;
  --panel: rgba(26, 33, 25, 0.92);
  --panel-border: rgba(238, 244, 227, 0.14);
  --accent: #a8d84a;
  --accent-soft: #25330f;
  --teal: #a8d84a;
  --teal-soft: rgba(168, 216, 74, 0.18);
  --btn-gradient: linear-gradient(135deg, #a8d84a, #8bbb33);
  --btn-gradient-hover: linear-gradient(135deg, #b9e35f, #9ccb3e);
  --btn-text: #131a0b;
  --btn-glow: 0 10px 26px rgba(139, 187, 51, 0.32);
  --btn-glow-hover: 0 14px 32px rgba(139, 187, 51, 0.48);
  --inset-rgb: 10, 16, 11;
  --inset-deep-rgb: 7, 12, 8;
  --hairline-rgb: 238, 244, 227;
  --accent-rgb: 168, 216, 74;
  --teal-rgb: 168, 216, 74;
  background:
    radial-gradient(circle at top left, rgba(168, 216, 74, 0.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(79, 168, 173, 0.07), transparent 30%),
    linear-gradient(180deg, #161c15 0%, var(--bg) 100%);
}
body.theme-agent-orchestration .hero {
  background: linear-gradient(135deg, rgba(30, 44, 28, 0.95), rgba(26, 33, 25, 0.92));
}
body.theme-agent-orchestration .accent {
  background: linear-gradient(180deg, rgba(22, 32, 21, 0.95), rgba(16, 24, 16, 0.9));
}
/* The mockup rails the two dollar tiles in gain green and the two risk tiles in
   --severity-high, scoped so the showcase-wide defaults move nowhere else. These are the
   PRODUCTION tone class names (`stat-good` / `stat-warn`), not the mockup's own `.is-good`
   -- a rule written against the mockup's names would be a silent no-op, which is the exact
   class-contract trap tests/test_web_demo.py guards. */
body.theme-agent-orchestration .portfolio-stat-card.stat-good { border-left-color: var(--gain); }
body.theme-agent-orchestration .portfolio-stat-card.stat-warn { border-left-color: var(--severity-high); }
/* Six tiles, three across (mockup, view 2). */
body.theme-agent-orchestration .portfolio-stat-grid { grid-template-columns: repeat(3, 1fr); }
/* Mockup panel ORDER, which is load-bearing: tiles -> containment matrix -> the run queue
   and the residual-risk ledger side by side -> the brief last. The generic template emits
   the brief high (it is half-width and early for every other domain), so this theme alone
   pushes it to the end with `order` rather than forking the shared template. */
body.theme-agent-orchestration .portfolio-brief-panel { grid-column: 1 / -1; order: 2; }
body.theme-agent-orchestration .portfolio-contracts-panel { grid-column: span 6; }
body.theme-agent-orchestration .ao-residual-panel { grid-column: span 6; }
@media (max-width: 900px) {
  body.theme-agent-orchestration .portfolio-stat-grid { grid-template-columns: 1fr; }
  body.theme-agent-orchestration .portfolio-contracts-panel,
  body.theme-agent-orchestration .ao-residual-panel { grid-column: 1 / -1; }
}

/* decision-intelligence isn't a themed domain (no body.theme-* interior), but its gallery
   card's eyebrow rode the default --teal while its "Open demo" CTA rides --accent, so the
   two read as mismatched colors on one card. Pin the eyebrow to the same accent already
   used for the CTA -- no new color introduced, so no separate AA re-check is needed. */
.gallery-card--decision-intelligence {
  --teal: var(--accent);
}

* { box-sizing: border-box; }

/* Keep wrapped copy from stranding a short fragment on its own last line (widows/runts).
   Static strings are also worded to avoid them; this covers data-driven text the copy
   can't control (coach paragraphs, deal names, live numbers). */
p, li { text-wrap: pretty; }
.tl-dwell { text-wrap: balance; }

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.16), transparent 28%),
    radial-gradient(circle at bottom right, rgba(var(--teal-rgb), 0.12), transparent 30%),
    linear-gradient(180deg, #241b12 0%, var(--bg) 100%);
}

.page-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 56px;
}

.hero {
  padding: 28px 30px 34px;
  background: linear-gradient(135deg, rgba(48, 37, 25, 0.95), rgba(37, 28, 19, 0.92));
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  border-radius: 28px;
  overflow: visible;
}

.hero-top {
  position: relative;
}

.hero-content {
  width: 100%;
  min-width: 0;
}

.home-link {
  position: absolute;
  right: 4px;
  top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 20px;
  border: 1px solid var(--panel-border);
  background: rgba(var(--inset-deep-rgb), 0.9);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.home-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.home-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.home-icon {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
}

.eyebrow {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  font-size: 0.76rem;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.95;
  text-wrap: balance;
}

.hero-copy {
  width: 100%;
  max-width: none;
  margin: 16px 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-top: 18px;
}

.control-field {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.model-field {
  min-width: 240px;
}

.control-input {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(var(--inset-rgb), 0.55);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 120ms ease;
}

.control-input:hover {
  border-color: rgba(var(--teal-rgb), 0.5);
}

.control-input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

select.control-input {
  padding-right: 34px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.rerun-button,
.upload-button {
  border: 1px solid rgba(255, 214, 173, 0.25);
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--btn-gradient);
  color: var(--btn-text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--btn-glow);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, opacity 120ms ease;
}

.rerun-button:hover:not(:disabled),
.upload-button:hover {
  background: var(--btn-gradient-hover);
  box-shadow: var(--btn-glow-hover);
  transform: translateY(-1px);
}

.rerun-button:active:not(:disabled),
.upload-button:active {
  transform: translateY(0);
}

.rerun-button:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.rerun-button.rerun-button--locked {
  background: rgba(var(--hairline-rgb), 0.12);
  border-color: var(--panel-border);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.rerun-status {
  font-size: 0.9rem;
  color: var(--muted);
}

.upload-panel {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(var(--hairline-rgb), 0.14);
  background: rgba(var(--inset-rgb), 0.55);
}

.upload-panel h3 {
  margin: 0;
  font-size: 1rem;
}

.upload-panel p {
  margin: 8px 0 0;
  line-height: 1.5;
  color: var(--muted);
  font-size: 0.9rem;
}

.upload-controls {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.upload-input-label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.upload-input {
  max-width: 100%;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(var(--inset-rgb), 0.55);
  color: var(--ink);
}

.upload-status {
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--teal);
}

.meta-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.88rem;
}

.grid-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(12, 1fr);
  margin-top: 22px;
}

/* Full-width utility inside a 12-col grid-layout (the mockup's own `.full`): a panel that
   spans every column. The scenario pages that predate this use per-panel grid-column
   classes; the workflow scenario uses this shared utility. */
.full { grid-column: 1 / -1; }
.half { grid-column: span 6; }

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 24px;
  min-width: 0;
}

.narrative-panel { grid-column: 1 / -1; }
.spotlight { grid-column: span 6; }
.metrics-panel { grid-column: span 4; }
.findings-panel { grid-column: span 8; }
.fields-panel { grid-column: 1 / -1; }
/* Explicit placement, like every other panel: a .panel with no grid-column rule renders
   as a one-twelfth-wide sliver and nothing complains at runtime (invariant 6). */
.action-panel { grid-column: 1 / -1; }
.llm-panel { grid-column: 1 / -1; }
.methodology-panel { grid-column: 1 / -1; }
.fulltext-panel { grid-column: 1 / -1; }
.timeline-panel { grid-column: 1 / -1; }

.hidden {
  display: none !important;
}

.accent {
  background: linear-gradient(180deg, rgba(42, 32, 22, 0.95), rgba(30, 22, 15, 0.9));
}

.panel-heading h2 {
  margin: 0;
  font-size: 1.45rem;
}

.panel-heading p {
  margin: 8px 0 18px;
  color: var(--muted);
  line-height: 1.5;
}

.code-block {
  margin: 0;
  padding: 16px;
  min-height: 180px;
  max-width: 100%;
  border-radius: 18px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  background: rgba(var(--inset-deep-rgb), 0.92);
  color: #f8f2e8;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.55;
}

.interactive-input {
  width: 100%;
  resize: vertical;
  border: 0;
  outline: none;
  box-sizing: border-box;
}

.metric-cards,
.stack-list,
.timeline,
.narrative-cards {
  display: grid;
  gap: 12px;
}

.narrative-cards {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.timeline {
  grid-template-columns: repeat(2, 1fr);
}

.metric-card,
.finding-card,
.field-card,
.timeline-item,
.narrative-card {
  border-radius: 18px;
  padding: 16px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
  min-width: 0;
}

.finding-card.severity-critical { border-left: 4px solid var(--severity-critical); }
.finding-card.severity-high { border-left: 4px solid var(--severity-high); }
.finding-card.severity-medium { border-left: 4px solid var(--severity-medium); }
.finding-card.severity-low { border-left: 4px solid var(--severity-low); }

/* The intake verdict is not a severity, but it carries the same urgency ranking, so it
   reuses the severity accent rather than inventing a second colour language. */
.verdict-card.severity-critical { border-left: 4px solid var(--severity-critical); }
.verdict-card.severity-medium { border-left: 4px solid var(--severity-medium); }
.verdict-card.severity-low { border-left: 4px solid var(--severity-low); }

.field-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.field-value {
  display: block;
  margin-top: 8px;
  font-size: 1.15rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* A field that read nothing is still shown -- a missing PO number is a fact about the
   scan -- but it must not read as a confident extraction. */
.field-card--missing {
  border-style: dashed;
}

.field-card--missing .field-value {
  color: var(--muted);
  font-style: italic;
}

.finding-why strong {
  color: var(--ink);
}

.score-card {
  background: linear-gradient(180deg, rgba(var(--teal-rgb), 0.14), rgba(var(--inset-rgb), 0.85));
}

.score-value {
  display: block;
  margin-top: 10px;
  font-size: 2.3rem;
  line-height: 1;
}

.score-meaning {
  margin: 10px 0 0;
  line-height: 1.45;
  color: var(--muted);
  font-size: 0.9rem;
}

.score-bar {
  margin-top: 14px;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--hairline-rgb), 0.14);
  overflow: hidden;
}

.score-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--accent));
}

.score-formula {
  margin-top: 14px;
  display: grid;
  gap: 6px;
}

.score-formula-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
}

.score-formula-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--ink);
}

.narrative-card {
  background: linear-gradient(180deg, rgba(28, 34, 34, 0.9), rgba(var(--inset-rgb), 0.88));
}

.methodology-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.methodology-requirement {
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.86rem;
  color: var(--ink);
  background: rgba(var(--teal-rgb), 0.14);
  border: 1px solid rgba(var(--teal-rgb), 0.3);
}

.methodology-sections {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.methodology-section {
  border-radius: 18px;
  padding: 16px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
  min-width: 0;
}

.methodology-section h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: var(--teal);
}

.methodology-section p {
  margin: 0;
  line-height: 1.55;
  font-size: 0.92rem;
  color: var(--ink);
}

.metric-label,
.finding-tag,
.timeline-stage,
.narrative-step {
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
}

.metric-value {
  display: block;
  margin-top: 10px;
  font-size: 2rem;
}

.narrative-card h3 {
  margin: 12px 0 0;
  font-size: 1.05rem;
}

.finding-card p,
.timeline-item p,
.narrative-card p {
  margin: 10px 0 0;
  line-height: 1.55;
  color: var(--muted);
  white-space: pre-line;
}

.result-inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Gallery cards (home grid + CV hub sub-cards) stack their metric chips one per row —
   wrapping lets short chips share a line while a long one still floats alone, which reads
   as an inconsistent rhythm across 8 cards of differing chip-text length. Scoped to
   `.gallery-card` only: drill-down chip rows (severity tags, field-confidence pairs)
   still wrap inline, where that's the correct layout. */
.gallery-card .result-inline-list {
  flex-direction: column;
  align-items: flex-start;
}

.result-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--ink);
  font-size: 0.86rem;
}

.gallery-shell {
  padding-bottom: 70px;
}

.gallery-hero {
  margin-bottom: 22px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.gallery-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 22px;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.gallery-card .card-cta {
  margin-top: auto;
  padding-top: 12px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.92rem;
}

.gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.gallery-card h2 {
  margin: 12px 0 8px;
  font-size: 1.4rem;
}

.gallery-card p {
  margin: 0 0 14px;
  line-height: 1.55;
  color: var(--muted);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: left;
}

.footer-copy {
  display: flex;
  align-items: center;
  gap: 6px;
}

.copyright-logo {
  color: var(--teal);
  font-size: 1.05em;
  font-weight: bold;
}

.footer-notice {
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
}

/* --- Single-contract drill-down page --- */
.back-link {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--teal);
  text-decoration: none;
  font-size: 0.9rem;
}

.back-link:hover {
  text-decoration: underline;
}

.meta-pill-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

/* auto-fit, so the contract page's single score card still spans the panel while the
   document page's score + verdict pair sits side by side. */
.risk-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.severity-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.severity-card {
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  border-left: 4px solid rgba(var(--hairline-rgb), 0.14);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.severity-card.severity-critical { border-left-color: var(--severity-critical); }
.severity-card.severity-high { border-left-color: var(--severity-high); }
.severity-card.severity-medium { border-left-color: var(--severity-medium); }
.severity-card.severity-low { border-left-color: var(--severity-low); }

.severity-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.severity-card--active {
  box-shadow: 0 0 0 2px var(--teal);
}

.severity-card--empty {
  opacity: 0.55;
  cursor: default;
}

.severity-card--empty:hover {
  transform: none;
  box-shadow: none;
}

.findings-filter {
  margin-bottom: 14px;
  min-height: 0;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--ink);
  font-size: 0.86rem;
}

.filter-clear {
  border: 0;
  background: rgba(var(--hairline-rgb), 0.16);
  color: var(--ink);
  border-radius: 999px;
  width: 20px;
  height: 20px;
  line-height: 1;
  cursor: pointer;
  font-size: 1rem;
}

.collapsible-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.toggle-button {
  flex-shrink: 0;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 8px 16px;
  background: rgba(var(--inset-rgb), 0.55);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.toggle-button:hover {
  border-color: rgba(var(--teal-rgb), 0.5);
}

.portfolio-stats-panel { grid-column: 1 / -1; }
.portfolio-progress-panel { grid-column: 1 / -1; }
.portfolio-chart-panel { grid-column: span 6; }
.portfolio-brief-panel { grid-column: span 6; }
.portfolio-contracts-panel { grid-column: 1 / -1; }
.kb-opportunities-panel { grid-column: 1 / -1; }
.kb-oracle-panel { grid-column: 1 / -1; }
/* KB document detail (mockup view 4): the model's one paragraph beside the fact table. */
.kb-summary-panel { grid-column: span 7; }
.kb-facts-panel { grid-column: span 5; }
.decision-funnel-panel { grid-column: 1 / -1; }
.decision-actions-panel { grid-column: 1 / -1; }
.renegotiation-panel { grid-column: 1 / -1; }
.reconciliation-panel { grid-column: 1 / -1; }
/* The optional second bar-chart panel (workflow's "JML Board"): half width, so it sits
   beside the rule chart exactly as the signed-off mockup's view 3 pairs them. */
.board-panel { grid-column: span 6; }

/* --- Workflow automation: the Reconciliation Audit panel (signed-off mockup, view 3).
   Six stat tiles land on two clean rows of three rather than the default 4-across
   ragged 4+2, so the tile grid is re-columned inside this theme only. --- */
body.theme-workflow-automation .portfolio-stat-grid { grid-template-columns: repeat(3, 1fr); }
/* This dashboard's reading order is vertical, not the default brief-beside-chart split:
   the brief and the reconciliation audit each take a full row, and the two bar-chart
   panels then pair up beneath them (mockup view 3). Scoped to the theme so no other
   domain's layout moves. */
body.theme-workflow-automation .portfolio-brief-panel { grid-column: 1 / -1; }

.recon-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.recon-list { display: grid; gap: 10px; }

.recon-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 118px 120px;
  gap: 14px;
  align-items: center;
  border-radius: 16px;
  padding: 13px 16px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
}
.recon-row.severity-critical { border-left: 4px solid var(--severity-critical); }
.recon-row.severity-high { border-left: 4px solid var(--severity-high); }
.recon-row.severity-medium { border-left: 4px solid var(--severity-medium); }
.recon-row.severity-low { border-left: 4px solid var(--severity-low); }

.recon-who { min-width: 0; }
.recon-system {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
}
.recon-acct {
  display: block;
  margin-top: 3px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.8rem;
  color: var(--ink);
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.recon-what { min-width: 0; }
.recon-what h4 { margin: 0 0 4px; font-size: 0.98rem; }
.recon-why { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.recon-ehr-chip { display: inline-block; margin-top: 8px; }

.recon-age {
  font-size: 0.86rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.recon-age strong { display: block; font-size: 1.1rem; color: var(--ink); }

.recon-cost { text-align: right; font-variant-numeric: tabular-nums; }
.recon-money { display: block; font-size: 1.02rem; color: var(--teal); }
.recon-nocost { display: block; font-size: 0.82rem; color: var(--muted); }

.recon-basis {
  margin: 16px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
  font-style: italic;
}

/* --- The ranked work-list layout for a collection dashboard's item panel (`spec.queue`,
   signed-off mockup view 3's Exception Queue). Generic: any domain whose item list is a
   Monday-morning agenda rather than a value ranking can opt in. --- */
.queue-list { display: grid; gap: 12px; }

.queue-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border-radius: 16px;
  padding: 15px 18px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease;
}
a.queue-row { cursor: pointer; }
a.queue-row:hover { border-color: var(--accent); }
.queue-row.severity-critical { border-left: 4px solid var(--severity-critical); }
.queue-row.severity-high { border-left: 4px solid var(--severity-high); }
.queue-row.severity-medium { border-left: 4px solid var(--severity-medium); }
.queue-row.severity-low { border-left: 4px solid var(--severity-low); }

.queue-rank {
  font-size: 1.5rem;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.queue-body { min-width: 0; }
.queue-body h3 { margin: 0 0 4px; font-size: 1.05rem; }
.queue-sub { margin: 0; font-size: 0.86rem; color: var(--muted); }
.queue-meta { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.queue-meta:empty { margin-top: 0; }
/* The signed-off mockup sets its queue chips uppercase. Scoped here rather than on the
   shared `.chip` so the decision-intelligence deal detail's chips are untouched. */
.queue-meta .chip { text-transform: uppercase; letter-spacing: 0.05em; }

.queue-verdict { text-align: right; min-width: 150px; }
.queue-verdict .vlabel {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.queue-verdict .vval { display: block; margin-top: 4px; font-size: 0.94rem; color: var(--ink); }
.queue-link { display: block; margin-top: 6px; font-size: 0.86rem; color: var(--accent); }

@media (max-width: 900px) {
  .recon-summary { grid-template-columns: 1fr 1fr; }
  .recon-row { grid-template-columns: 1fr; gap: 8px; }
  .recon-age, .recon-cost { text-align: left; }
  body.theme-workflow-automation .portfolio-stat-grid { grid-template-columns: 1fr 1fr; }
  .queue-row { grid-template-columns: 32px minmax(0, 1fr); }
  .queue-verdict { grid-column: 1 / -1; text-align: left; }
}

/* --- Workflow automation: the event drill-down (signed-off mockup, view 4) -------------
   The money shot is `.detail-split`: the email exactly as it arrived on the left, the
   structured request the extraction layer read out of it on the right. Everything else on
   the page hangs off that comparison -- the rules that fired on the reading, the playbook
   the reading resolved, and the coach's case file over the whole bundle. --- */
.wf-email-panel { grid-column: 1 / -1; }
.wf-rules-panel { grid-column: span 6; }
.wf-playbook-panel { grid-column: span 6; }
.wf-coach-panel { grid-column: 1 / -1; }

.verdict-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-radius: 18px;
  padding: 16px 20px;
  margin-top: 16px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
}
/* An escalated event takes the severity of the worst rule that escalated it, so the banner
   reads the same colour language as the chips inside the page. */
.verdict-banner.severity-critical { background: rgba(226, 80, 103, 0.1); border-color: rgba(226, 80, 103, 0.45); }
.verdict-banner.severity-high { background: rgba(226, 121, 63, 0.1); border-color: rgba(226, 121, 63, 0.45); }
.verdict-banner.severity-medium { background: rgba(217, 178, 60, 0.1); border-color: rgba(217, 178, 60, 0.45); }
.vb-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.vb-value { display: block; margin-top: 4px; font-size: 1.35rem; }
.vb-why { margin: 0; max-width: 620px; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }

.detail-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.email-quote {
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 12px;
  background: rgba(var(--inset-deep-rgb), 0.75);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
  border-left: 3px solid var(--accent);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  white-space: pre-wrap;
  color: var(--ink);
  min-width: 0;
  overflow-x: auto;
}

.field-table { display: grid; gap: 8px; margin-top: 14px; }
.field-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.field-key { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.field-val {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.5;
  word-break: break-word;
}

.rule-list { display: grid; gap: 12px; }
.rule-card {
  border-radius: 16px;
  padding: 15px 17px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
}
.rule-card.severity-critical { border-left: 4px solid var(--severity-critical); }
.rule-card.severity-high { border-left: 4px solid var(--severity-high); }
.rule-card.severity-medium { border-left: 4px solid var(--severity-medium); }
.rule-card.severity-low { border-left: 4px solid var(--severity-low); }
.rule-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rule-head h4 { margin: 0; font-size: 1rem; }
.rule-ev { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink); }
.rule-why { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.rule-fix { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.rule-fix strong { color: var(--accent); }

.playbook { display: grid; gap: 6px; }
.pb-step {
  display: grid;
  grid-template-columns: 30px 92px minmax(0, 1fr) 62px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(var(--inset-rgb), 0.45);
  border: 1px solid rgba(var(--hairline-rgb), 0.08);
}
.pb-step.is-blocked { border-color: rgba(226, 121, 63, 0.4); background: rgba(226, 121, 63, 0.07); }
.pb-n { font-size: 0.82rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.pb-sys { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.pb-act { font-size: 0.9rem; }
.pb-min { font-size: 0.82rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.pb-total {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--hairline-rgb), 0.12);
  font-size: 0.92rem;
}
.pb-total strong { font-variant-numeric: tabular-nums; }

/* The case file reads upright here (signed-off mockup, view 4). `.coach` is italic
   showcase-wide because in language/decision it is a quoted advisor voice set against
   surrounding chrome; this page's coach IS the page's body copy, and four italic
   paragraphs at full panel width is a wall. Scoped to the theme so nothing else moves. */
body.theme-workflow-automation .coach p,
body.theme-workflow-automation .coach li { font-style: normal; }

/* Same reasoning for the referral memo: it is this page's body copy, not a quoted aside
   set against surrounding chrome, and several italic paragraphs at full panel width is a
   wall. Scoped to the theme so nothing else moves. */
body.theme-expert-amplification .coach p,
body.theme-expert-amplification .coach li { font-style: normal; }

/* Same again for the member-voice note ("Why You're Seeing This"): it is the page's own
   body copy in the member's second person, not a quoted aside. Scoped to the theme. */
body.theme-personalized-experiences .coach p,
body.theme-personalized-experiences .coach li { font-style: normal; }

/* --- Expert amplification: the case drill-down and the consistency panel ---------------
   The money shot is the same `.detail-split` comparison the JML page uses, for the same
   reason: the broker's email exactly as it arrived on the left, the structured case facts
   the extraction layer read out of it on the right. Below it, the factor trace -- judgment
   made inspectable, which is this demo's whole product. --- */
.ea-submission-panel { grid-column: 1 / -1; }
.ea-trace-panel { grid-column: span 7; }
.ea-ruling-panel { grid-column: span 5; }
.ea-memo-panel { grid-column: 1 / -1; }
.ea-consistency-panel { grid-column: 1 / -1; }

/* One factor-trace step. `kind` colours the rail, not the length of anything -- there is
   no bar here to mis-scale. A `residue` step is deliberately quieter than the rest: it is
   the one row that decides nothing. */
.trace-list { display: grid; gap: 8px; }
.trace-step {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 116px;
  gap: 12px;
  align-items: baseline;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(var(--inset-rgb), 0.45);
  border: 1px solid rgba(var(--hairline-rgb), 0.08);
  border-left: 3px solid rgba(var(--hairline-rgb), 0.18);
}
.trace-step.kind-appetite { border-left-color: var(--severity-critical); }
.trace-step.kind-capacity { border-left-color: var(--severity-high); }
.trace-step.kind-loss_history { border-left-color: var(--severity-high); }
.trace-step.kind-terms { border-left-color: var(--severity-medium); }
.trace-step.kind-information { border-left-color: var(--severity-medium); }
.trace-step.kind-residue { border-left-color: var(--accent); background: rgba(var(--accent-rgb), 0.07); }
.trace-kind { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.trace-body { min-width: 0; }
.trace-label { display: block; font-size: 0.94rem; }
.trace-reading { display: block; margin-top: 4px; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.trace-effect { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; text-align: right; color: var(--muted); }
.trace-effect.is-decline { color: var(--severity-critical); }
.trace-effect.is-terms { color: var(--severity-medium); }
.trace-effect.is-review { color: var(--accent); }

/* The three-way ruling comparison: what the junior called, what the expert ruled, what the
   captured standard predicted. */
.ruling-compare { display: grid; gap: 10px; }
.ruling-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(var(--inset-rgb), 0.45);
  border: 1px solid rgba(var(--hairline-rgb), 0.08);
}
.ruling-row.is-expert { border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.08); }
.ruling-who { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ruling-what { font-size: 0.96rem; }
.ruling-terms { display: block; margin-top: 4px; font-size: 0.84rem; color: var(--muted); }
.ruling-agree { margin: 12px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }

/* The consistency panel (D6b). Framed as a workload effect throughout -- the copy, the
   quiet accent rail, and the deliberate absence of any severity colour are all the same
   decision: this measures the expert without accusing her. */
.drift-list { display: grid; gap: 14px; }
.drift-pair {
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
  border-left: 3px solid var(--accent);
}
.drift-shared { margin: 0; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.drift-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.drift-side { min-width: 0; }
.drift-when { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.drift-who { display: block; margin-top: 3px; font-size: 0.94rem; }
.drift-terms { margin: 8px 0 0; padding-left: 18px; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.drift-note { margin: 12px 0 0; font-size: 0.88rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 900px) {
  .detail-split { grid-template-columns: 1fr; }
  .wf-rules-panel, .wf-playbook-panel { grid-column: 1 / -1; }
  .ea-trace-panel, .ea-ruling-panel { grid-column: 1 / -1; }
  .pb-step { grid-template-columns: 24px 76px minmax(0, 1fr) 52px; gap: 8px; }
  .trace-step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .trace-effect { text-align: left; }
  .drift-sides { grid-template-columns: 1fr; }
}

/* --- Personalized experiences: the Pilot Readout's own blocks (signed-off mockup) ------
   Three panels exist in no other demo: the A/B scoreboard (paired bars per segment, both
   arms on a common 0-20% scale -- bar length IS the printed rate), the fairness parity
   panel (mean slate value per segment against the four-fifths line), and the failure
   ledger (the seeded failures, rendered as first-class rows). Bar tracks and fills are
   display:block deliberately -- as inline spans they collapse and every bar renders
   invisible while the track still shows (mockup gotcha 6). --- */
.pe-ab-panel { grid-column: 1 / -1; }
.pe-parity-panel { grid-column: 1 / -1; }
.pe-ledger-panel { grid-column: span 6; }
.pe-record-panel, .pe-explain-panel, .pe-fairness-panel { grid-column: 1 / -1; }
.ab-grid { display: grid; gap: 14px; }
.ab-row { display: grid; grid-template-columns: 190px 1fr 132px; gap: 14px; align-items: center; }
.ab-name { font-size: 0.9rem; color: var(--muted); }
.ab-name b { color: var(--ink); font-weight: 600; }
.ab-bars { display: grid; gap: 5px; }
.ab-bar { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center; }
.ab-bar span { font-size: 0.74rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.ab-track { display: block; position: relative; height: 15px; border-radius: 4px;
  background: rgba(var(--hairline-rgb), 0.11); overflow: hidden; }
.ab-fill { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
.ab-fill.is-control { background: #9c8592; }
.ab-fill.is-treatment { background: var(--accent); }
.ab-delta { text-align: right; font-size: 0.95rem; font-weight: 600; white-space: nowrap; }
.ab-delta em { display: block; font-style: normal; font-weight: 400; font-size: 0.76rem;
  color: var(--muted); margin-top: 3px; }
.ab-none { grid-column: 2 / 3; font-size: 0.84rem; color: var(--muted); font-style: italic; margin: 0; }
.ab-delta.is-up { color: var(--gain); }
.ab-delta.is-down { color: var(--severity-critical); }
.ab-row.is-inverted { background: rgba(226, 80, 103, 0.08); border-left: 3px solid var(--severity-critical);
  padding: 10px 12px 10px 11px; border-radius: 8px; margin-left: -14px; }

.parity-list { display: grid; gap: 12px; }
.parity-row { display: grid; grid-template-columns: 205px 1fr 118px; gap: 14px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid rgba(var(--hairline-rgb), 0.07); }
.parity-row:last-child { border-bottom: 0; }
.parity-row.is-flagged { background: rgba(var(--accent-rgb), 0.09); border-left: 3px solid var(--accent);
  padding-left: 11px; margin-left: -14px; border-radius: 8px; }
.parity-name { font-size: 0.9rem; color: var(--muted); }
.parity-name b { color: var(--ink); font-weight: 600; }
/* The bar can only show slate VALUE. A segment flagged for category concentration clears
   the threshold line, so without this chip the row reads as a contradiction. */
.parity-why { display: inline-block; margin-top: 4px; font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); }
.parity-track { display: block; position: relative; height: 15px; border-radius: 4px;
  background: rgba(var(--hairline-rgb), 0.11); }
.parity-fill { display: block; height: 100%; border-radius: 4px; background: #9c8592; }
.parity-fill.is-flagged { background: var(--accent); }
.parity-threshold { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--severity-medium); }
.parity-val { text-align: right; font-size: 0.9rem; color: var(--muted); }
.parity-val b { color: var(--ink); display: block; font-size: 1.02rem; }
.finding { border: 1px solid rgba(var(--accent-rgb), 0.32); background: rgba(var(--accent-rgb), 0.07);
  border-radius: 10px; padding: 14px 16px; margin-top: 14px; }
.finding h4 { margin: 0 0 6px; font-size: 1rem; color: var(--ink); }
.finding p { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.finding .fix { color: var(--ink); font-size: 0.9rem; margin: 0; }
.finding .fix b { color: var(--accent); font-weight: 600; }

.slate-card { border: 1px solid var(--panel-border); border-radius: 10px; padding: 13px 15px;
  margin-bottom: 12px; background: rgba(26, 15, 22, 0.55); }
.slate-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.slate-head h4 { margin: 0; font-size: 1.02rem; }
.slate-score { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.slate-trace { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 6px; }
.slate-trace li { color: var(--muted); font-size: 0.87rem; line-height: 1.5; padding-left: 12px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.35); }
.slate-trace li b { color: var(--ink); font-weight: 600; }
.slate-card.slate-taken { border-color: rgba(91, 191, 143, 0.45); }
.taken-flag { color: var(--gain); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }

.ledger-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid rgba(var(--hairline-rgb), 0.07); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-who { font-size: 0.9rem; color: var(--ink); font-weight: 600; }
.ledger-who span { display: block; color: var(--muted); font-weight: 400; font-size: 0.78rem;
  letter-spacing: 0.05em; text-transform: uppercase; margin-top: 3px; }
.ledger-what { color: var(--muted); font-size: 0.89rem; line-height: 1.55; }
.ledger-what b { color: var(--ink); font-weight: 600; }
.ledger-loss { color: var(--severity-critical); font-weight: 600; }

/* --- agent-orchestration: the containment matrix, the telemetry strip and the residual-risk
   ledger (the Containment Board's two new blocks, plan D14). Every class here is prefixed
   `ao-` so none of it can collide with the generic dashboard's own .chip/.timeline/.legend
   rules, which mean different things elsewhere in this stylesheet. --- */
.ao-containment-panel { grid-column: 1 / -1; }
.ao-because { margin: 0 0 20px; padding: 18px 20px; border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.1); border-left: 3px solid var(--accent);
  font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.ao-because b { color: var(--accent); font-weight: 600; }
.ao-legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 16px; font-size: 0.8rem;
  color: var(--muted); }
.ao-legend span { display: inline-flex; align-items: center; gap: 7px; }
/* The provenance split rides --severity-low / --severity-medium rather than the accent:
   these are two classes of the SAME quantity, and the theme accent already means "this
   demo" everywhere else on the page. */
.ao-swatch-genuine { background: var(--severity-low); }
.ao-swatch-injected { background: var(--severity-medium); }
.ao-matrix-wrap { overflow-x: auto; }
.ao-matrix { width: 100%; border-collapse: collapse; }
.ao-matrix th { text-align: left; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted); padding: 0 12px 10px 0; font-weight: normal; }
.ao-matrix td { padding: 14px 12px 14px 0; border-top: 1px solid var(--panel-border);
  vertical-align: top; }
.ao-matrix tr.is-human td { background: rgba(var(--accent-rgb), 0.06); }
.ao-layer-id { font-size: 1.05rem; color: var(--accent); white-space: nowrap; }
.ao-layer-name { font-size: 1.02rem; color: var(--ink); }
.ao-layer-catches { margin: 6px 0 0; font-size: 0.86rem; color: var(--muted); line-height: 1.5;
  max-width: 46ch; }
.ao-layer-count { font-size: 1.6rem; text-align: right; white-space: nowrap; color: var(--ink); }
/* Showcase-wide chart rule: bar length equals the printed value. The track is scaled to the
   largest row's count, and the two solid segments are that row's genuine/injected split --
   no gradients on a data mark. */
.ao-bar-track { width: 220px; max-width: 100%; height: 12px; border-radius: 999px;
  background: rgba(var(--inset-deep-rgb), 0.75); overflow: hidden; display: flex; }
.ao-bar-genuine { background: var(--severity-low); }
.ao-bar-injected { background: var(--severity-medium); }
.ao-chips { margin: 8px 0 0; display: flex; gap: 7px; flex-wrap: wrap; }
.ao-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem;
  letter-spacing: 0.04em; }
.ao-chip-genuine { background: rgba(79, 168, 173, 0.2); color: #9fe0e4; }
.ao-chip-injected { background: rgba(217, 178, 60, 0.18); color: #e8cf83; }
.ao-chip-penetrated { background: rgba(226, 121, 63, 0.18); color: #f0a778; }
.ao-telemetry-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin-top: 20px; }
.ao-telemetry-cell { padding: 12px 14px; border-radius: 14px;
  background: rgba(var(--inset-deep-rgb), 0.75); }
.ao-telemetry-label { margin: 0; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted); }
.ao-telemetry-value { margin: 8px 0 0; font-size: 1.2rem; line-height: 1.05; color: var(--ink); }
.ao-telemetry-note { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.45; }

.ao-residual-list { display: grid; }
.ao-residual-row { padding: 14px 0; border-top: 1px solid var(--panel-border); display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: start; }
.ao-residual-row:first-child { border-top: none; }
.ao-residual-title { margin: 0; font-size: 1.02rem; color: var(--ink); }
.ao-residual-meta { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.ao-residual-meta b { color: var(--ink); font-weight: 600; }
.ao-residual-side { text-align: right; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

/* --- agent-orchestration: the DAG trace timeline and packet readout on the run drill-down
   (the second new block, D14). `ao-tl-` rather than the stylesheet's existing `.timeline`,
   which is a different component on the single-run pages. --- */
.ao-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ao-timeline::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px;
  width: 2px; background: var(--panel-border); }
.ao-tl-step { position: relative; padding: 0 0 20px 46px; }
.ao-tl-dot { position: absolute; left: 8px; top: 4px; width: 16px; height: 16px;
  border-radius: 50%; background: rgba(var(--inset-deep-rgb), 0.75); border: 2px solid var(--accent); }
.ao-tl-step.is-recovered .ao-tl-dot { border-color: var(--severity-medium); }
.ao-tl-step.is-failed .ao-tl-dot { border-color: var(--severity-critical); }
.ao-tl-step.is-skipped .ao-tl-dot { border-color: var(--muted); background: transparent; }
.ao-tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.ao-tl-name { font-size: 1.05rem; color: var(--ink); }
.ao-tl-status { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); }
.ao-tl-desc { margin: 6px 0 0; font-size: 0.88rem; color: var(--muted); line-height: 1.5;
  max-width: 68ch; }
.ao-tl-desc b { color: var(--ink); font-weight: 600; }
.ao-tl-metrics { margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.8rem;
  color: var(--muted); font-family: "Consolas", "Menlo", monospace; }
.ao-tl-event { margin-top: 10px; padding: 12px 14px; border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.1); border-left: 3px solid var(--accent);
  font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.ao-tl-event b { color: var(--accent); font-weight: 600; }
.ao-tl-event i { color: var(--ink); font-style: italic; }

.ao-kv { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 8px 18px;
  font-size: 0.92rem; margin: 0 0 18px; }
.ao-kv dt { color: var(--muted); }
.ao-kv dd { margin: 0; color: var(--ink); }
.ao-answer { padding: 14px 0; border-top: 1px solid var(--panel-border); }
.ao-answer:first-of-type { border-top: none; }
.ao-answer h4 { margin: 0 0 6px; font-size: 0.98rem; font-weight: normal; color: var(--ink); }
.ao-answer p { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.ao-cites { margin: 8px 0 0; font-size: 0.8rem; color: var(--muted);
  font-family: "Consolas", "Menlo", monospace; }
.ao-answer-warn { margin: 8px 0 0; font-size: 0.85rem; color: var(--severity-medium); line-height: 1.5; }
.ao-answer-gap { color: var(--severity-high); }
.ao-factor-row { display: grid; grid-template-columns: minmax(0, 190px) 120px minmax(0, 1fr);
  gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--panel-border); align-items: center;
  font-size: 0.9rem; color: var(--muted); }
.ao-factor-row:first-of-type { border-top: none; }
.ao-factor-row b { color: var(--ink); font-weight: 600; }
.ao-factor-bar { height: 10px; border-radius: 999px;
  background: rgba(var(--inset-deep-rgb), 0.75); overflow: hidden; }
.ao-factor-bar span { display: block; height: 100%; background: var(--severity-low); }
.ao-factor-bar.is-knockout span { background: var(--severity-critical); }
.ao-score-line { margin: 14px 0 0; font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.ao-score-line b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .ao-telemetry-strip { grid-template-columns: repeat(2, 1fr); }
  .ao-factor-row { grid-template-columns: minmax(0, 1fr); }
  .ao-kv { grid-template-columns: minmax(0, 1fr); }
}

/* The deep dive's theme-check swatches. Scoped under .swatch-row so the funnel legend's
   own 14px .swatch squares are untouched. */
.swatch-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.swatch-row .swatch { display: flex; align-items: center; gap: 8px; font-size: 0.84rem;
  color: var(--muted); width: auto; height: auto; border: 0; border-radius: 0; background: none; }
.swatch-row .swatch i { width: 26px; height: 26px; border-radius: 7px; display: block; }

.note-strip { margin-top: 22px; border-radius: 16px; padding: 16px 20px;
  background: rgba(var(--inset-rgb), 0.5); border: 1px dashed rgba(var(--hairline-rgb), 0.2); }
.note-strip p { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
.note-strip p + p { margin-top: 8px; }
.note-strip strong { color: var(--ink); }

.kind-chip { background: var(--teal-soft); border-color: rgba(var(--accent-rgb), 0.4); }

@media (max-width: 900px) {
  .half { grid-column: 1 / -1; }
  .ab-row, .parity-row { grid-template-columns: 1fr; gap: 8px; }
  .ab-row.is-inverted, .parity-row.is-flagged { margin-left: 0; }
  .ab-delta, .parity-val { text-align: left; }
  .ab-none { grid-column: auto; }
  .ledger-row { grid-template-columns: 1fr; gap: 6px; }
  .pe-ledger-panel { grid-column: 1 / -1; }
}

/* Decision-intelligence dashboard layout (signed-off mockup, view 3): the Executive
   Brief holds the tall left half while the funnel sits top-right with the dollar-
   itemized risk-gap chart directly below it. Scoped by the body class the collection
   JS adds when a spec declares `layout: "decision"`. */
.layout-decision .portfolio-brief-panel { grid-row: span 2; }
.layout-decision .decision-funnel-panel { grid-column: span 6; }
.layout-decision .portfolio-chart-panel { grid-column: span 6; }

/* --- Decision intelligence: the leaky funnel (per-stage kept-vs-at-risk bars) --- */
.funnel { display: grid; gap: 10px; margin-top: 4px; }
.funnel-row { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 12px; }
.funnel-stage { font-size: 0.9rem; text-align: right; }
.funnel-stage small { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 2px; }
/* `center` (not `stretch`) is what gives the funnel its taper: each bar's width is set
   inline by JS in proportion to the widest stage, and centering it under a fixed-width
   row lines every stage up on a common center axis instead of all left-justifying like a
   stack of unrelated progress bars. */
.funnel-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.funnel-bar {
  height: 32px;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  min-width: 24px;
}
.funnel-kept { background: linear-gradient(90deg, var(--teal), #3c8488); }
.funnel-risk {
  background: repeating-linear-gradient(
    45deg,
    rgba(226, 80, 103, 0.9),
    rgba(226, 80, 103, 0.9) 5px,
    rgba(226, 80, 103, 0.5) 5px,
    rgba(226, 80, 103, 0.5) 10px
  );
}
.funnel-amt { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.funnel-amt .k { color: var(--teal); }
.funnel-amt .r { color: var(--severity-critical); }
.funnel-legend { display: flex; gap: 18px; margin-top: 14px; font-size: 0.8rem; color: var(--muted); flex-wrap: wrap; }
.funnel-legend span { display: inline-flex; align-items: center; gap: 7px; }
.swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--panel-border); }
.swatch.keep { background: linear-gradient(90deg, var(--teal), #3c8488); }
.swatch.risk {
  background: repeating-linear-gradient(
    45deg,
    rgba(226, 80, 103, 0.9),
    rgba(226, 80, 103, 0.9) 4px,
    rgba(226, 80, 103, 0.5) 4px,
    rgba(226, 80, 103, 0.5) 8px
  );
}

/* --- Decision intelligence: the ranked "Monday-Morning Actions" panel (the climax) --- */
.actions-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.action-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}
/* Only the background shifts on hover -- `border-color` is a shorthand that would also
   flip the severity-colored left border (set by .action-row.severity-*) to this color. */
.action-row:hover { background: rgba(0, 0, 0, 0.26); }
.action-row.severity-critical { border-left-color: var(--severity-critical); }
.action-row.severity-high { border-left-color: var(--severity-high); }
.action-row.severity-medium { border-left-color: var(--severity-medium); }
.action-row.severity-low { border-left-color: var(--severity-low); }
.action-rank { font-size: 1.5rem; font-weight: 700; color: var(--muted); text-align: center; }
.action-body h3 { margin: 0 0 6px; font-size: 0.98rem; }
.action-do { margin: 0; line-height: 1.5; font-size: 0.92rem; }
.action-do .verb { color: var(--accent); font-weight: 600; }
.action-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.chip {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}
.chip.severity-critical { color: var(--severity-critical); border-color: var(--severity-critical); }
.chip.severity-high { color: var(--severity-high); border-color: var(--severity-high); }
.chip.severity-medium { color: var(--severity-medium); border-color: var(--severity-medium); }
.chip.severity-low { color: var(--severity-low); border-color: var(--severity-low); }
.ev-badge { text-align: right; min-width: 120px; display: flex; flex-direction: column; }
.ev-value { font-size: 1.35rem; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.ev-label { font-size: 0.72rem; color: var(--muted); }

/* --- Decision intelligence: deal-detail drill-down (signed-off mockup, view 4) --- */
.deal-timeline-panel { grid-column: 1 / -1; }
.deal-coach-panel { grid-column: span 7; }
.deal-play-panel { grid-column: span 5; }
/* language-intelligence contract-detail drill-down: findings full-width, then Recommended
   Play, then the Contract Coach — all three full-width and stacked. The Coach renders long
   structured markdown (headings, numbered asks, redline blocks), which a 7-column column
   squeezes into an unreadable ribbon; the Play's ev-math row likewise reads better across
   the full grid. Shared detail chrome below (detail-head/coach/ev-math) is reused by the
   deal detail, which keeps its own 7/5 split above. */
.contract-findings-panel { grid-column: 1 / -1; }
.contract-coach-panel { grid-column: 1 / -1; }
.contract-play-panel { grid-column: 1 / -1; }
.contract-findings-panel .result-list { display: grid; gap: 10px; margin-top: 4px; }
.finding-row { border-radius: 14px; padding: 14px 16px; background: rgba(var(--inset-rgb), 0.5); border: 1px solid rgba(var(--hairline-rgb), 0.1); }
.finding-row.severity-critical { border-left: 4px solid var(--severity-critical); }
.finding-row.severity-high { border-left: 4px solid var(--severity-high); }
.finding-row.severity-medium { border-left: 4px solid var(--severity-medium); }
.finding-row.severity-low { border-left: 4px solid var(--severity-low); }
.finding-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.finding-head h4 { margin: 0; font-size: 0.98rem; }
.finding-excerpt { margin: 8px 0 0; font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; color: var(--muted); background: rgba(var(--inset-rgb), 0.55); border-radius: 8px; padding: 8px 10px; }
.finding-why { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.5; }
.finding-ask { margin: 6px 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--accent); }
/* The single-contract live-run beat (docs/DEMO_LIVE_BEATS.md): a compact model picker +
   Run button sitting above the coach panel it regenerates. Deliberately smaller than
   `.model-console` -- this re-runs one contract in seconds, not a 30-contract batch. */
.coach-console {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--hairline-rgb), 0.14);
}
/* Cap the picker instead of letting it grow: a select is sized by the length of the
   model names it holds, not by the panel it sits in, and flex-grow stretched it edge
   to edge once the coach panel went full-width. The cap is sized to the longest name
   in MODEL_RECOMMENDATIONS (mistralai/ministral-3-14b-reasoning, ~271px of text plus
   padding and the arrow) -- tighten it further and that option truncates. */
.coach-console .control-field { min-width: 180px; flex: 0 1 360px; max-width: 360px; }
.coach-console .rerun-status { flex-basis: 100%; }
/* On the image drill-downs the console sits BELOW the image it re-runs, so the divider
   belongs above it rather than under it. */
.vision-console {
  margin-top: 18px;
  margin-bottom: 0;
  padding-top: 18px;
  padding-bottom: 0;
  border-top: 1px solid rgba(var(--hairline-rgb), 0.14);
  border-bottom: none;
}
.coach { border-left: 3px solid var(--panel-border); padding: 4px 0 4px 16px; }
/* The coach answer is long-form structured markdown, so its blocks need real vertical
   rhythm. Italic stays the model-voice signal on prose only -- headings and quoted
   redline wording drop it, since bold-italic and italic monospace both read as mush.
   The measure is capped even though the panel is full-width: unbounded 150-character
   lines are the other way this answer becomes unreadable. */
.coach p, .coach li { line-height: 1.7; font-size: 0.98rem; font-style: italic; max-width: 100ch; }
.coach p { margin: 0 0 0.85em; }
.coach p:last-child { margin-bottom: 0; }
.coach-h {
  margin: 1.4em 0 0.5em;
  font-size: 0.82rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
}
.coach-h:first-child { margin-top: 0; }
ol.coach-list, ul.coach-list { margin: 0 0 0.85em; padding-left: 1.3em; display: grid; gap: 0.5em; }
.coach-list li { padding-left: 0.2em; }
.coach-list li::marker { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.coach-code {
  margin: 0 0 0.9em;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(var(--inset-rgb), 0.6);
  border: 1px solid rgba(var(--hairline-rgb), 0.12);
  font-size: 0.85rem;
  font-style: normal;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: auto;
}
.coach code { font-style: normal; font-size: 0.9em; }
/* Emphasis inside already-italic prose has to flip upright to be visible at all --
   the coach uses it for labels like *Redlined Text:*, which must read as a label. */
.coach em { font-style: normal; }
.coach-empty { color: var(--muted); }
.coach-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.coach-tag--model { color: var(--accent); }
.collapsible { margin-top: 10px; }
.collapsible summary { cursor: pointer; color: var(--teal); font-size: 0.9rem; padding: 6px 0; }
.collapsible-body { margin-top: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; color: var(--muted); white-space: pre-wrap; line-height: 1.6; max-height: 260px; overflow-y: auto; background: rgba(var(--inset-rgb), 0.5); border-radius: 10px; padding: 12px; }
.detail-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.detail-head h1 { margin: 0; }
.detail-amount { font-size: 1.6rem; color: var(--accent); font-variant-numeric: tabular-nums; }
/* Horizontal stage strip: one node per stage entry, dwell time under each, flags on the
   nodes that overran the norm or moved backward. */
.timeline-strip { display: flex; align-items: stretch; margin-top: 8px; overflow-x: auto; padding-bottom: 8px; }
.tl-node {
  flex: 1 1 0; min-width: 132px; position: relative; padding: 14px 12px; border-radius: 14px;
  background: rgba(var(--inset-rgb), 0.5); border: 1px solid rgba(var(--hairline-rgb), 0.1); margin-right: 26px;
}
.tl-node:last-child { margin-right: 0; }
.tl-node::after { content: "\2192"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.tl-node:last-child::after { content: ""; }
.tl-node.is-flag { border-color: rgba(217, 178, 60, 0.5); }
.tl-node.is-regress { border-color: rgba(226, 80, 103, 0.5); }
/* A stage the deal hasn't reached yet -- rendered dimmed/dashed so the timeline always
   shows all five process stages (matching the funnel), not just the ones with history. */
.tl-node.is-future { opacity: 0.45; border-style: dashed; }
.tl-stage { font-weight: 600; font-size: 0.98rem; }
.tl-date { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--muted); }
.tl-dwell { display: block; margin-top: 8px; font-size: 0.82rem; }
.tl-dwell.warn { color: var(--severity-medium); }
.tl-dwell.bad { color: var(--severity-critical); }
/* Deal Coach: quoted, italicized blockquote with an accent rule -- the one place the
   model's own voice appears, styled to read as a quote, not a form field. */
.coach-source-tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.coach-source-tag.model { color: var(--accent); }
.coach-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.deal-coach-quote { border-left: 3px solid var(--panel-border); padding: 4px 0 4px 16px; }
.deal-coach-quote.is-model { border-left-color: var(--accent); }
.deal-coach-quote p { margin: 0; line-height: 1.6; font-size: 0.98rem; font-style: italic; }
/* Recommended Play: the verb line, its plain-language translation, and the three EV
   cells with the formula written out underneath (assumptions named, never hidden). */
.playbook-line { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.5; }
.playbook-line .verb { color: var(--accent); font-weight: 600; }
.play-plain { margin: 0 0 14px; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
/* The three cells hold short money/factor values, so they are capped rather than
   stretched -- at full panel width the 1fr columns turned three small numbers into
   three enormous empty slabs. The cap is inert on the narrower deal-detail panel. */
.ev-math { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-top: 4px; max-width: 620px; }
.ev-cell { border-radius: 14px; padding: 14px; background: rgba(var(--inset-rgb), 0.5); border: 1px solid rgba(var(--hairline-rgb), 0.1); text-align: center; }
.ev-cell.is-result { border-color: rgba(91, 191, 143, 0.5); background: rgba(91, 191, 143, 0.1); }
.ev-cell .big { display: block; font-size: 1.4rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ev-cell.is-result .big { color: var(--gain); }
.ev-formula { margin: 14px 0 0; font-size: 0.86rem; color: var(--muted); font-family: ui-monospace, Consolas, monospace; }

/* --- Decision intelligence: scenario / walkthrough page (Act I + Model Console) --- */
.scenario-setup-panel { grid-column: 1 / -1; }
.scenario-walk-panel { grid-column: 1 / -1; }
.scenario-nav { display: flex; align-items: center; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.scenario-nav-link { color: var(--teal); text-decoration: none; font-size: 0.9rem; }
.scenario-nav-link:hover { text-decoration: underline; }

/* --- Bottom flow-nav pager: back/continue at the foot of every demo-flow page, so a
   viewer never scrolls back to the top to move on. Reusable house pattern; the generic
   dashboard renders it from its spec's optional `flow_nav`, the bespoke pages inline it. --- */
.flow-nav { display: flex; justify-content: space-between; align-items: stretch; gap: 14px; margin-top: 26px; }
.flow-nav-link {
  display: flex; flex-direction: column; gap: 4px; max-width: 48%;
  padding: 14px 20px; border-radius: 16px;
  background: rgba(var(--inset-rgb), 0.5); border: 1px solid var(--panel-border);
  color: var(--ink); text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}
.flow-nav-link:hover { border-color: rgba(var(--teal-rgb), 0.5); transform: translateY(-1px); }
.flow-nav-prev { align-items: flex-start; }
.flow-nav-next { align-items: flex-end; text-align: right; margin-left: auto; }
.flow-nav-dir { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); }
.flow-nav-label { font-size: 1rem; font-weight: 600; line-height: 1.3; }

.model-console {
  margin-top: 24px;
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  background: rgba(var(--inset-rgb), 0.55);
  padding: 18px;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 12px 20px;
  align-items: start;
}
.console-title { margin: 0; grid-column: 1 / -1; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal); }
.console-controls { display: grid; gap: 12px; min-width: 0; }
.model-console .control-field { position: relative; }
.tip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(340px, 92vw);
  z-index: 30;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--teal-rgb), 0.45);
  background: rgba(var(--inset-deep-rgb), 0.97);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.tip.tip-visible { display: block; }
.console-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rerun-status.is-running { color: var(--severity-medium); }
.rerun-status.is-done { color: var(--teal); }
/* Hidden until a run actually starts. At rest an empty track reads as a stray scrollbar
   under the controls; it should only appear when it is reporting something. */
.run-progress { display: none; width: 100%; height: 10px; border-radius: 999px; background: rgba(var(--hairline-rgb), 0.14); overflow: hidden; }
.run-progress.is-active { display: block; }
.run-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--accent)); transition: width 0.25s ease; }
.run-log {
  height: 100%;
  min-height: 210px;
  max-height: 260px;
  overflow-y: auto;
  background: rgba(var(--inset-deep-rgb), 0.92);
  border: 1px solid rgba(var(--hairline-rgb), 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.55;
  color: #d8cdbb;
}
.run-log .log-think { color: var(--muted); font-style: italic; }
.run-log .log-ok { color: var(--teal); }
.run-log .log-warn { color: var(--severity-medium); }

.scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.scenario-card { border-radius: 16px; padding: 18px; background: rgba(var(--inset-rgb), 0.5); border: 1px solid rgba(var(--hairline-rgb), 0.1); }
.scenario-card .col-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); }
.scenario-card h3 { margin: 4px 0 0; font-size: 1.1rem; }
.scenario-card p { margin: 10px 0 0; line-height: 1.55; font-size: 0.95rem; color: var(--muted); }
.scenario-card ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
/* Same colour and size as `.scenario-card p` above: without the explicit `color` these
   bullets inherit the brighter default ink and read as bold next to the problem card. */
.scenario-card li { position: relative; padding-left: 22px; line-height: 1.55; font-size: 0.95rem; color: var(--muted); }
.scenario-card li::before { content: "\2022"; position: absolute; left: 6px; color: var(--accent); }

.value-thesis {
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
  border-radius: 18px;
  padding: 20px 22px;
  margin-top: 16px;
}
.value-thesis .col-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.value-thesis p { margin: 8px 0 0; line-height: 1.65; font-size: 1.02rem; }

.walk { display: grid; gap: 0; margin-top: 4px; }
.walk-step { display: grid; grid-template-columns: 46px minmax(0, 7fr) minmax(0, 5fr); gap: 0 20px; padding: 22px 0; }
.walk-step + .walk-step { border-top: 1px solid rgba(var(--hairline-rgb), 0.08); }
.walk-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.walk-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  background: rgba(var(--inset-rgb), 0.6);
  border: 1px solid var(--panel-border);
  color: var(--muted);
}
.walk-step.is-llm .walk-num { border-color: rgba(var(--accent-rgb), 0.65); color: var(--accent); box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.25); }
.walk-line { flex: 1; width: 1px; background: rgba(var(--hairline-rgb), 0.12); }
.walk-step:last-child .walk-line { background: transparent; }
.walk-output { min-width: 0; }
.walk-output h3 { margin: 0 0 10px; font-size: 1.15rem; }
.walk-note { min-width: 0; }
.gen-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  background: rgba(var(--inset-rgb), 0.5);
}
.gen-badge.is-llm { border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
.gen-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.walk-note p { margin: 10px 0 0; line-height: 1.6; font-size: 0.94rem; color: var(--muted); }
.walk-note p strong { color: var(--ink); }
.walk-tagline { margin: 12px 0 0; font-size: 1.08rem; font-weight: 700; line-height: 1.35; color: var(--ink); text-wrap: balance; }

.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba-pane { border-radius: 14px; padding: 14px; background: rgba(var(--inset-rgb), 0.5); border: 1px solid rgba(var(--hairline-rgb), 0.1); min-width: 0; }
.ba-pane.is-after { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.06); }
.ba-tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.ba-pane.is-after .ba-tag { color: var(--accent); }
.ba-pane p { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.55; }
.ba-pane .quiet { color: var(--muted); }
/* The retrieval-hit readout inside a worked-example pane (KB mockup view 2/step 4):
   monospace snippet lines with the cited doc IDs picked out in the accent. */
.ba-pane .hit { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.8rem; line-height: 1.6; }
.ba-pane .hit .doc-id { color: var(--accent); }

.mini-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-card { border-radius: 16px; padding: 12px 14px; background: rgba(var(--inset-rgb), 0.5); border: 1px solid rgba(var(--hairline-rgb), 0.1); min-width: 0; }
.stat-card.is-alert { border-left: 4px solid var(--severity-critical); }
.stat-card.is-good { border-left: 4px solid var(--teal); }
.stat-value { display: block; margin-top: 6px; font-size: 1.45rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-note { display: block; margin-top: 4px; font-size: 0.76rem; color: var(--muted); }
.risk-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.action-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
}
.action-card.severity-critical { border-left: 4px solid var(--severity-critical); }
.action-card h4 { margin: 0 0 4px; font-size: 0.98rem; }
.fallback-note { margin-top: 18px; font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.fallback-note a { color: var(--teal); }

/* --- Decision intelligence: technical deep dive (Act III) --- */
.deepdive-model-panel { grid-column: 1 / -1; }
.deepdive-ladder-panel { grid-column: 1 / -1; }
.deepdive-env-panel { grid-column: span 6; }
.deepdive-choose-panel { grid-column: span 6; }
/* KB deep dive's One Corpus, Three Ingestion Branches panel (mockup view 5). */
.deepdive-ingest-panel { grid-column: 1 / -1; }
.model-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.model-pick-card { border-radius: 16px; padding: 18px; background: rgba(var(--inset-rgb), 0.5); border: 1px solid rgba(var(--hairline-rgb), 0.1); }
.model-pick-card .col-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); }
.model-pick-card h3 { margin: 4px 0 0; font-size: 1.05rem; }
.model-pick-card h3 code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.9em; color: var(--accent); }
.model-pick-card p { margin: 10px 0 0; line-height: 1.55; font-size: 0.92rem; color: var(--muted); }
.model-pick-card ul { margin: 10px 0 0; padding: 0 0 0 2px; list-style: none; display: grid; gap: 8px; }
.model-pick-card li { position: relative; padding-left: 22px; line-height: 1.45; font-size: 0.9rem; }
.model-pick-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }

.ladder-wrap { overflow-x: auto; }
.ladder { width: 100%; border-collapse: collapse; min-width: 780px; font-size: 0.9rem; }
.ladder th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  border-bottom: 1px solid var(--panel-border);
  font-weight: 400;
}
.ladder td { padding: 12px; border-bottom: 1px solid rgba(var(--hairline-rgb), 0.07); vertical-align: top; font-variant-numeric: tabular-nums; }
.ladder td:first-child { font-weight: 600; }
.ladder .tier-tag { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 400; margin-top: 3px; }
.ladder tr.is-pick { background: rgba(var(--teal-rgb), 0.08); }
.ladder tr.is-pick td:first-child { border-left: 3px solid var(--teal); }
.ladder tr.ladder-row--muted td { color: var(--muted); font-style: italic; }
.ladder .good { color: var(--teal); }
.ladder .warn { color: var(--severity-medium); }
.ladder .bad { color: var(--severity-critical); }
.sample-note { margin: 12px 0 0; font-size: 0.82rem; color: var(--severity-medium); }

.env-steps { display: grid; gap: 12px; counter-reset: env; }
.env-step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.env-num {
  counter-increment: env;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(var(--inset-rgb), 0.6);
  border: 1px solid var(--panel-border);
  color: var(--teal);
  font-size: 0.92rem;
}
.env-num::before { content: counter(env); }
.env-step h4 { margin: 2px 0 4px; font-size: 0.98rem; }
.env-step p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }

/* Compact 4-across stat tiles: 8 tiles land on exactly two rows. */
.portfolio-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.portfolio-stat-card {
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
  min-width: 0;
}

.portfolio-stat-value {
  display: block;
  margin-top: 6px;
  font-size: 1.5rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.portfolio-stat-note { display: block; margin-top: 4px; font-size: 0.76rem; color: var(--muted); }
.portfolio-stat-card.stat-good { border-left: 4px solid var(--teal); }
.portfolio-stat-card.stat-alert { border-left: 4px solid var(--severity-critical); }
.portfolio-stat-card.stat-warn { border-left: 4px solid var(--severity-medium); }

.rerun-status--running { color: var(--severity-medium); }
.rerun-status--done { color: var(--teal); }
.rerun-status--error { color: var(--severity-critical); }

.exec-brief {
  display: grid;
  gap: 16px;
}

.exec-headline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.exec-headline h3 {
  margin: 0;
  font-size: 1.15rem;
}

.exec-posture {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--panel-border);
  color: var(--ink);
}

.exec-posture.posture-elevated {
  background: rgba(226, 80, 103, 0.16);
  border-color: rgba(226, 80, 103, 0.5);
}

.exec-posture.posture-moderate {
  background: rgba(217, 178, 60, 0.16);
  border-color: rgba(217, 178, 60, 0.5);
}

.exec-posture.posture-contained {
  background: rgba(var(--teal-rgb), 0.16);
  border-color: rgba(var(--teal-rgb), 0.5);
}

/* Workflow-automation's "Action needed" pill (signed-off mockup, view 3). Same gold as
   `posture-moderate` -- the tone name is the mockup's, and a posture with no rule renders
   as a bare word where the pill should be. */
.exec-posture.posture-guarded {
  background: rgba(217, 178, 60, 0.16);
  border-color: rgba(217, 178, 60, 0.5);
}

.exec-summary {
  margin: 0;
  line-height: 1.6;
  font-size: 1rem;
  color: var(--ink);
}

.exec-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exec-theme {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--ink);
  font-size: 0.85rem;
}

.exec-theme strong {
  color: var(--teal);
}

.exec-block h3 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
}

.exec-block p {
  margin: 0;
  line-height: 1.55;
  color: var(--ink);
}

.exec-priorities {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
}

.exec-priorities li {
  line-height: 1.5;
}

.exec-priority-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.exec-priority-score {
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(226, 80, 103, 0.16);
  border: 1px solid rgba(226, 80, 103, 0.4);
  color: var(--ink);
}

.exec-priority-detail {
  display: block;
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--muted);
  text-wrap: pretty;
}

.exec-action {
  border-top: 1px solid var(--panel-border);
  padding-top: 14px;
}

.exec-narrative p {
  color: var(--muted);
  font-style: italic;
}

/* The brief's optional foot-of-panel basis line: what an assumption-based figure rests on,
   and what the page deliberately refuses to price. Same treatment as `.recon-basis` so the
   two honesty lines on one dashboard read as the same kind of statement. */
.exec-basis {
  margin: 4px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
  font-style: italic;
}

.portfolio-chart {
  display: grid;
  gap: 10px;
}

.portfolio-chart-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 10px;
}

.portfolio-chart-label {
  font-size: 0.86rem;
  color: var(--ink);
}

.portfolio-chart-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(var(--hairline-rgb), 0.1);
  overflow: hidden;
}

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

.portfolio-chart-count {
  font-size: 0.86rem;
  color: var(--muted);
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.portfolio-chart-fill.severity-critical { background: var(--severity-critical); }
.portfolio-chart-fill.severity-high { background: var(--severity-high); }
.portfolio-chart-fill.severity-medium { background: var(--severity-medium); }
.portfolio-chart-fill.severity-low { background: var(--severity-low); }

/* Solid per-category chart fills (D12, user ruling at the KB mockup review): no gradient
   fills on data marks; bar length must match the printed value; and no data mark in a
   theme's own accent family (a violet bar sinks into the violet ground -- hence the blue).
   Standalone single-class modifiers so any dashboard's chart JS can emit them alongside
   `.portfolio-chart-fill` without fighting the severity-class rules above. */
.chart-fill--critical { background: var(--severity-critical); }
.chart-fill--high { background: var(--severity-high); }
.chart-fill--medium { background: var(--severity-medium); }
.chart-fill--low { background: var(--severity-low); }
.chart-fill--gain { background: var(--gain); }
.chart-fill--blue { background: #5a8dd4; }

.portfolio-chart-severity-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  color: var(--ink);
}

.portfolio-chart-severity-tag.severity-critical { background: rgba(226, 80, 103, 0.16); border-color: rgba(226, 80, 103, 0.4); }
.portfolio-chart-severity-tag.severity-high { background: rgba(var(--accent-rgb), 0.16); border-color: rgba(var(--accent-rgb), 0.4); }
.portfolio-chart-severity-tag.severity-medium { background: rgba(217, 178, 60, 0.16); border-color: rgba(217, 178, 60, 0.4); }
.portfolio-chart-severity-tag.severity-low { background: var(--teal-soft); border-color: rgba(var(--teal-rgb), 0.4); }

.portfolio-chart-subheading {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--panel-border);
}

.portfolio-chart-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.portfolio-pie-layout {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.portfolio-pie-svg {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}

.portfolio-pie-arc {
  transition: opacity 120ms ease;
}

.portfolio-pie-arc:hover {
  opacity: 0.82;
}

.portfolio-pie-total-value {
  fill: var(--ink);
  font-size: 1.6rem;
  font-family: Georgia, "Times New Roman", serif;
}

.portfolio-pie-total-label {
  fill: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portfolio-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}

.portfolio-pie-legend-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
}

.portfolio-pie-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.portfolio-pie-legend-label {
  font-size: 0.86rem;
  color: var(--ink);
}

.portfolio-pie-legend-value {
  font-size: 0.86rem;
  color: var(--muted);
  text-align: right;
}

.portfolio-contract-list {
  display: grid;
  gap: 10px;
}

.portfolio-contract-card {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 14px;
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
  text-decoration: none;
  color: var(--ink);
}

.portfolio-contract-card.severity-critical { border-left: 4px solid var(--severity-critical); }
.portfolio-contract-card.severity-high { border-left: 4px solid var(--severity-high); }
.portfolio-contract-card.severity-medium { border-left: 4px solid var(--severity-medium); }
.portfolio-contract-card.severity-low { border-left: 4px solid var(--severity-low); }
.portfolio-contract-card.severity-none { border-left: 4px solid rgba(var(--hairline-rgb), 0.14); }

.portfolio-contract-title {
  font-weight: 600;
  /* Item titles are corpus data, so their wrapping can't be fixed by rewording -- a long
     document title strands a two-word last line in the table cell. `pretty` is the one
     value that specifically avoids a short final line (the base `p, li` rule doesn't
     reach these spans). Same for the brief's generated detail lines below. */
  text-wrap: pretty;
}

.portfolio-contract-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
}

.portfolio-contract-value,
.portfolio-contract-findings {
  font-size: 0.9rem;
  color: var(--muted);
}

.portfolio-contract-link {
  font-size: 0.86rem;
  color: var(--teal);
  white-space: nowrap;
}

.portfolio-progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--hairline-rgb), 0.14);
  overflow: hidden;
  margin-top: 6px;
}

.portfolio-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--accent));
  transition: width 0.2s ease;
}

.portfolio-progress-list {
  margin-top: 14px;
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.portfolio-progress-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.86rem;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(var(--inset-rgb), 0.5);
}

.portfolio-progress-item .status-icon {
  color: var(--teal);
}

/* Opportunity Register (knowledge-intelligence) -- Business Opportunities panel. */
/* Extracted Facts table (KB document detail, mockup view 4). A conflict row is marked
   with the shared critical severity color and cites the canonical document. */
.fact-grid {
  display: grid;
  gap: 10px;
}

.fact-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.6fr;
  gap: 12px;
  align-items: center;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
}

.fact-row.is-conflict { border-left: 4px solid var(--severity-critical); }

.fact-name { font-size: 0.9rem; }

.fact-value {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.fact-note {
  font-size: 0.82rem;
  color: var(--muted);
}

.fact-note .doc-id { color: var(--accent); }

@media (max-width: 900px) {
  .fact-row { grid-template-columns: 1fr; }
}

.kb-opportunity-list {
  display: grid;
  gap: 14px;
}

.kb-opportunity-card {
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
}

/* D13: the one navigation an opportunity card offers -- through to its cluster's anchor
   document. Rendered only when a real href resolved, so the affordance never dangles. */
.kb-opportunity-anchor {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.kb-opportunity-anchor:hover {
  text-decoration: underline;
}

.kb-opportunity-card.severity-critical { border-left: 4px solid var(--severity-critical); }
.kb-opportunity-card.severity-high { border-left: 4px solid var(--severity-high); }
.kb-opportunity-card.severity-medium { border-left: 4px solid var(--severity-medium); }
.kb-opportunity-card.severity-low { border-left: 4px solid var(--severity-low); }

.kb-opportunity-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kb-opportunity-conclusion {
  margin-top: 10px;
  font-size: 1.05rem;
  font-weight: 600;
}

.kb-opportunity-value {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.kb-opportunity-value strong {
  font-size: 1.2rem;
  color: var(--teal);
}

.kb-opportunity-basis {
  font-size: 0.8rem;
  color: var(--muted);
}

.kb-opportunity-move {
  margin-top: 8px;
  font-size: 0.9rem;
}

.kb-provenance-chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kb-provenance-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--hairline-rgb), 0.08);
  border: 1px solid rgba(var(--hairline-rgb), 0.14);
  font-size: 0.78rem;
  color: var(--ink);
  text-decoration: none;
}

a.kb-provenance-chip:hover {
  border-color: var(--teal);
}

.kb-evidence-list {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--muted);
  display: grid;
  gap: 4px;
}

.kb-inference-chip {
  font-size: 0.74rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--hairline-rgb), 0.14);
}

.kb-inference-chip--model {
  color: var(--teal);
  border-color: var(--teal);
}

.kb-inference-chip--deterministic {
  color: var(--muted);
}

/* The Oracle (knowledge-intelligence) -- Ask the Knowledge Base panel. */
.kb-oracle-form {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.kb-oracle-input {
  flex: 1;
}

.kb-oracle-suggested {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kb-oracle-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(var(--hairline-rgb), 0.08);
  border: 1px solid rgba(var(--hairline-rgb), 0.14);
  color: var(--ink);
  font-size: 0.82rem;
  cursor: pointer;
}

.kb-oracle-chip:hover {
  border-color: var(--teal);
}

.kb-oracle-answer {
  margin-top: 18px;
}

.kb-oracle-verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.kb-oracle-conflict-note {
  font-size: 0.85rem;
  color: var(--severity-high);
}

.kb-oracle-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.kb-oracle-pane {
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
}

.kb-oracle-pane--model {
  border-color: rgba(var(--teal-rgb), 0.35);
}

.kb-oracle-pane-sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.kb-oracle-pane-body {
  white-space: pre-wrap;
}

.kb-oracle-model-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--muted);
}

.kb-oracle-doc-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kb-oracle-doc-link:hover {
  filter: brightness(1.2);
}

.kb-oracle-citations {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.kb-citation-card {
  display: block;
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(var(--inset-rgb), 0.5);
  border: 1px solid rgba(var(--hairline-rgb), 0.1);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.85rem;
}

.kb-citation-card:hover {
  border-color: var(--teal);
}

.kb-citation-card p {
  margin: 4px 0 0;
  color: var(--muted);
}

@media (max-width: 900px) {
  .kb-oracle-panes {
    grid-template-columns: 1fr;
  }

  .portfolio-chart-panel,
  .portfolio-brief-panel {
    grid-column: 1 / -1;
  }

  .portfolio-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-contract-card {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .spotlight,
  .metrics-panel,
  .findings-panel,
  .llm-panel,
  .timeline-panel,
  .narrative-panel {
    grid-column: 1 / -1;
  }

  .timeline {
    grid-template-columns: 1fr;
  }

  .page-shell {
    width: min(100% - 20px, 1180px);
    padding-top: 18px;
  }

  .hero,
  .panel {
    border-radius: 20px;
    padding: 20px;
  }

  .home-link {
    right: 6px;
    top: 6px;
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  .home-icon {
    width: 46px;
    height: 46px;
  }
}

/* --- Computer-vision image drill-downs ------------------------------------------- */

.image-panel { grid-column: 1 / -1; }
.item-image-panel { grid-column: span 7; }
.item-decision-panel { grid-column: span 5; }
.item-findings-panel { grid-column: 1 / -1; }

.doc-image {
  display: block;
  max-width: 100%;
  max-height: 640px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.35);
}

.item-stat-list { margin-top: 16px; }

/* --- Computer-vision hub: model ladder -------------------------------------------- */

.model-ladder-panel { grid-column: 1 / -1; margin-top: 28px; }

.model-ladder {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ladder-row {
  display: grid;
  grid-template-columns: 250px 1fr 90px;
  gap: 16px;
  align-items: center;
}

.ladder-row--muted { opacity: 0.5; }

.ladder-model {
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ladder-note {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.ladder-bar {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: rgba(var(--hairline-rgb), 0.1);
  overflow: hidden;
}

.ladder-bar-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--teal), var(--accent));
}

.ladder-score {
  text-align: right;
  font-weight: 700;
}

@media (max-width: 720px) {
  .ladder-row {
    grid-template-columns: 1fr 70px;
  }

  .ladder-row .ladder-bar { display: none; }

  .item-image-panel,
  .item-decision-panel { grid-column: 1 / -1; }

  .flow-nav-link { max-width: none; }
}

/* ---- workflow-automation scenario page (plan §6.3) — the classes the JML scenario/
   walkthrough, live beat, and n8n panel emit that were not already shared with the CV/KB
   scenario chrome. All colour tokens are vars, so they re-point under the cyan theme. ---- */
.field-val .flag { color: var(--accent); }

.rebuttal {
  border: 1px solid var(--panel-border);
  background: rgba(8, 21, 26, 0.55);
  border-radius: 18px; padding: 20px 22px; margin-top: 16px;
}
.rebuttal .col-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--severity-medium); }
.rebuttal h3 { margin: 6px 0 0; font-size: 1.12rem; }
.rebuttal p { margin: 10px 0 0; line-height: 1.62; color: var(--muted); }
.rebuttal p strong { color: var(--ink); }

.stat-card.is-warn { border-left: 4px solid var(--severity-medium); }
.run-log .log-crit { color: var(--severity-critical); }

.beat-box { display: grid; gap: 12px; }
.beat-input {
  width: 100%; min-height: 122px; resize: vertical;
  border: 1px solid var(--panel-border); border-radius: 14px; padding: 13px 15px;
  background: rgba(6, 17, 21, 0.7); color: var(--ink);
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.86rem; line-height: 1.6;
}
.beat-input::placeholder { color: var(--muted); }
.beat-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.beat-note { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.55; }
/* agent-orchestration's Break-the-desk presets: hostile-RFP starters the room can fire at
   the live beat. Neutral chrome so no theme has to restyle them. */
.preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
.preset { padding: 7px 13px; border-radius: 999px; font-size: 0.82rem; cursor: pointer;
  background: rgba(var(--inset-deep-rgb), 0.75); border: 1px solid var(--panel-border);
  color: var(--ink); font-family: inherit; }
.preset:hover { border-color: var(--accent); }
.beat-verdict { margin: 4px 0 0; font-size: 1.05rem; color: var(--ink); }
.beat-verdict b { color: var(--accent); }
.beat-reading { margin: 8px 0 0; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.beat-reading.is-model { color: var(--accent); }
.beat-reading.is-fallback { color: var(--severity-medium); }

.n8n-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.n8n-flow { display: grid; gap: 8px; }
.n8n-node {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 11px 14px; border-radius: 12px;
  background: rgba(8, 21, 26, 0.5); border: 1px solid var(--panel-border);
}
.n8n-kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.n8n-what { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.82rem; color: var(--muted); }
.n8n-side { display: grid; gap: 12px; }
.probe {
  border-radius: 14px; padding: 14px 16px;
  background: rgba(217, 178, 60, 0.08); border: 1px solid rgba(217, 178, 60, 0.4);
}
.probe.is-live { background: rgba(91, 191, 143, 0.08); border-color: rgba(91, 191, 143, 0.45); }
.probe .plabel { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--severity-medium); }
.probe.is-live .plabel { color: var(--gain); }
.probe p { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.ghost-button {
  display: inline-block; border: 1px solid var(--panel-border); border-radius: 999px;
  padding: 9px 15px; font-size: 0.88rem; color: var(--muted); background: rgba(8, 21, 26, 0.5);
  font-family: inherit; text-align: center; text-decoration: none;
}
.ghost-button.is-live { color: var(--btn-text); background: var(--btn-gradient); border-color: rgba(190, 235, 245, 0.25); cursor: pointer; box-shadow: var(--btn-glow); }

/* workflow-automation deep dive (mockup view 5): the seven-stage architecture, the
   deterministic/model split table, the honest-empty-state ladder, and the boundary note.
   Neutral, theme-driven colors -- --accent picks up each demo's own hue. */
.arch { display: grid; gap: 10px; }
.arch-stage {
  display: grid; grid-template-columns: 34px 210px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 11px 14px; border-radius: 14px;
  background: rgba(8, 21, 26, 0.5); border: 1px solid var(--panel-border);
}
.arch-stage.is-llm { border-color: rgba(56, 207, 230, 0.45); background: rgba(56, 207, 230, 0.07); }
.arch-n { text-align: center; font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.arch-name { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.85rem; }
.arch-stage.is-llm .arch-name { color: var(--accent); }
.arch-what { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }

.split-table { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.split-col { border-radius: 16px; padding: 16px 18px; background: rgba(8, 21, 26, 0.5); border: 1px solid var(--panel-border); }
.split-col.is-llm { border-color: rgba(56, 207, 230, 0.4); background: rgba(56, 207, 230, 0.06); }
.split-col h3 { margin: 0 0 4px; font-size: 1.02rem; }
.split-col .sub { margin: 0 0 12px; font-size: 0.82rem; color: var(--muted); }
.split-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.split-col li { position: relative; padding-left: 20px; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.split-col li::before { content: "\2022"; position: absolute; left: 5px; color: var(--accent); }

.basis-line { margin: 14px 0 0; font-size: 0.82rem; line-height: 1.55; color: var(--muted); font-style: italic; }

.empty-state {
  border-radius: 16px; padding: 18px 20px; margin-top: 4px;
  background: rgba(217, 178, 60, 0.08); border: 1px solid rgba(217, 178, 60, 0.4);
}
.empty-state p { margin: 8px 0 0; line-height: 1.6; color: var(--muted); font-size: 0.92rem; }
.empty-state p:first-child { margin-top: 0; color: var(--ink); }
.ladder tr.is-default td { background: rgba(56, 207, 230, 0.07); }
.ladder tr.is-default td:first-child { border-left: 3px solid var(--accent); }
.footnotes { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.footnotes li { font-size: 0.84rem; line-height: 1.55; color: var(--muted); padding-left: 20px; position: relative; }
.footnotes li::before { content: "\2020"; position: absolute; left: 4px; color: var(--muted); }

@media (max-width: 900px) {
  .n8n-grid { grid-template-columns: 1fr; }
  .split-table { grid-template-columns: 1fr; }
  .arch-stage { grid-template-columns: 28px minmax(0, 1fr); }
  .arch-what { grid-column: 1 / -1; }
}


/* ---------- Koubit main-site footer (appended by scripts/import-showcase.py) ---------- */
.fk-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 40px;
  padding: 40px 16px;
  background: #0a2130;
  color: rgba(255, 255, 255, 0.56);
  font-family: 'Nunito Sans', 'Nunito', -apple-system, sans-serif;
  font-size: 0.9rem;
}
.fk-footer .container {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.fk-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.fk-footer a:hover { color: #2dd4d0; }