@charset "UTF-8";
/* WP-08 Industrial Dark theme. app.css and styles.css are byte-identical copies (compatibility).
 No light surfaces anywhere: root #0b0f19, panels #111827 / #1e293b, nested #0f172a, borders #334155.
 Path A = amber/crimson, Path B = emerald/cyan. Widths that depend on data are set via the CSSOM from app.js. */
:root {
 color-scheme: dark;
 --root: #0b0f19;
 --surface: #111827;
 --surface-2: #1e293b;
 --nested: #0f172a;
 --border: #334155;
 --border-soft: #1e293b;
 --text: #f8fafc;
 --text-2: #cbd5e1;
 --muted: #94a3b8;
 --amber: #f59e0b;
 --crimson: #ef4444;
 --emerald: #10b981;
 --cyan: #06b6d4;
 --violet: #a78bfa;
 --a-fill: #d97706;
 --b-fill: #059669;
 --ref-fill: #475569;
 --ref-fill-2: #64748b;
 --mono: "Cascadia Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
 font-family: Inter, "Segoe UI", system-ui, Arial, sans-serif;
 color: var(--text);
 background: var(--root);
}
* { box-sizing: border-box }
html { background: var(--root) }
body { margin: 0; background: var(--root); color: var(--text); min-height: 100vh }
button, input, select, textarea { font: inherit }
button { color: inherit; border: 0; background: none }
button, summary { cursor: pointer }
button:disabled { cursor: default; opacity: .45 }
button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
 outline: 2px solid var(--cyan); outline-offset: 3px
}
h1, h2, h3, h4, p { margin: 0 }
h2 { font-size: 20px; letter-spacing: -.3px }
h3 { font-size: 16px; letter-spacing: -.2px }
p { line-height: 1.65; color: var(--text-2) }
b, strong { color: var(--text) }
code, pre, kbd { font-family: var(--mono) }
code { font-size: .88em; color: #e2e8f0 }
pre { white-space: pre-wrap; overflow-wrap: anywhere }
a { color: #67e8f9 }
::selection { background: #0e7490; color: #fff }
input, select, textarea {
 width: 100%; min-width: 0; background: var(--nested); color: var(--text);
 border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px
}
select { font-size: 12px }
select option { background: var(--nested); color: var(--text) }
textarea { resize: vertical; line-height: 1.6 }
label { display: block; font-size: 11px; font-weight: 650; margin-bottom: 7px; color: var(--text-2) }
summary { line-height: 1.6 }
summary::marker { color: var(--muted) }
main { max-width: 1600px; margin: auto; padding: 0 40px 60px }
section[role=tabpanel] { min-width: 0 }
.hidden, [hidden] { display: none !important }
.btn.hidden, .pill.hidden { display: none !important }

/* ---------- primitives ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px }
.eyebrow { display: block; font-size: 10px; font-weight: 750; letter-spacing: 1.6px; line-height: 1.6; color: var(--muted) }
.hint { font-size: 11px; color: var(--muted); line-height: 1.6 }
.pill {
 display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; padding: 5px 9px;
 font-size: 10px; font-weight: 650; line-height: 1.4; background: var(--surface-2); color: var(--text-2);
 border: 1px solid var(--border); overflow-wrap: anywhere
}
.good, .compressed { color: #6ee7b7; background: #064e3b66; border-color: #065f46 }
.warn, .enriched { color: #fcd34d; background: #78350f55; border-color: #92400e }
.bad { color: #fca5a5; background: #7f1d1d55; border-color: #991b1b }
.a-text, .legacy-text { color: var(--amber) }
.b-text, .engine-text { color: var(--emerald) }
.cyan-text { color: var(--cyan) }
.enriched-text { color: #fcd34d }
.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px;
 border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-weight: 700;
 text-decoration: none; color: var(--text); background: var(--surface-2); transition: background .15s, border-color .15s
}
.btn:hover:not(:disabled) { border-color: #475569; background: #273449 }
.btn:active:not(:disabled) { transform: translateY(1px) }
.btn-primary { background: #0e7490; border-color: var(--cyan); color: #fff }
.btn-primary:hover:not(:disabled) { background: #0891b2 }
.btn-secondary { background: var(--nested) }
.btn-danger { background: #7f1d1d; border-color: var(--crimson); color: #fee2e2 }
.btn-danger:hover:not(:disabled) { background: #991b1b }
.badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 4px; font-size: 11px; font-weight: 750; border: 1px solid; font-variant-numeric: tabular-nums }
.badge-a { color: #fcd34d; border-color: #92400e; background: #78350f40 }
.badge-b { color: #6ee7b7; border-color: #065f46; background: #064e3b40 }
.badge-cyan { color: #67e8f9; border-color: #155e75; background: #164e6340 }

/* ---------- masthead / nav ---------- */
.masthead { padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--root); border-bottom: 1px solid var(--border-soft) }
.brand { display: flex; gap: 12px; align-items: center }
.brand-mark { font: 800 15px/1 var(--mono); letter-spacing: 1px; background: var(--nested); color: var(--cyan); border: 1px solid #155e75; border-radius: 6px; padding: 10px 11px }
.brand strong { font-size: 14px; letter-spacing: .3px }
.brand > div > span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px }
.masthead-status { display: flex; gap: 8px; flex-wrap: wrap }
.navigation { display: flex; justify-content: space-between; align-items: center; padding: 0 40px; background: var(--surface); border-bottom: 1px solid var(--border); gap: 12px; position: sticky; top: 0; z-index: 20 }
.navigation nav { display: flex; gap: 26px }
.tab-btn { padding: 15px 0 13px; border-bottom: 2px solid transparent; font-size: 12px; font-weight: 650; color: var(--muted); white-space: nowrap }
.tab-btn:hover { color: var(--text-2) }
.tab-btn span { font: 700 10px var(--mono); margin-right: 8px; color: #64748b }
.tab-btn.active { border-color: var(--cyan); color: var(--text) }
.tab-btn.active span { color: var(--cyan) }
.edition { font: 600 10px var(--mono); letter-spacing: 1px; color: #64748b }

/* ---------- section headers ---------- */
.section-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: end; padding: 26px 0 14px }
.section-intro .eyebrow { margin-bottom: 10px; color: var(--cyan) }
h1 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; letter-spacing: -1px; font-weight: 700 }
.section-intro > p { font-size: 13px }
.section-label { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 22px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--border-soft) }
.section-label h2 { font-size: 15px }
.section-label > span { font: 600 10px var(--mono); letter-spacing: 1px; color: var(--muted) }

/* ---------- Tab 1: scenarios / console ---------- */
.scenario-deck { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px }
.scenario-card { text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); display: flex; flex-direction: column; gap: 7px; transition: border-color .15s, background .15s }
.scenario-card:hover:not(:disabled) { border-color: #475569; background: #152033 }
.scenario-card[aria-pressed=true] { border-color: var(--cyan); background: #0f2533; box-shadow: inset 0 0 0 1px var(--cyan) }
.scenario-top { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); align-items: center }
.scenario-number { font: 800 10px var(--mono); padding: 4px 6px; background: var(--nested); border: 1px solid var(--border); border-radius: 3px; color: var(--text-2) }
.scenario-card[aria-pressed=true] .scenario-number { color: var(--cyan); border-color: #155e75 }
.scenario-title { font-size: 12px; font-weight: 650; line-height: 1.4; min-height: 34px; color: var(--text) }
.tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto }
.tag { font-size: 9px; font-weight: 650; padding: 3px 5px; border-radius: 3px; background: var(--nested); color: var(--muted); border: 1px solid var(--border-soft) }
.run-console { margin-top: 10px; padding: 12px 14px; display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 12px; align-items: start }
.run-console label { line-height: 18px } /* 18 px line + 7 px margin = the 25 px offset .run-actions mirrors */
.run-actions { display: flex; gap: 8px; align-self: start; margin-top: 25px; flex-wrap: wrap }
.field { min-width: 0 }
.field .hint { display: block; margin-top: 5px }
#prompt-editor { grid-column: 1 / -1; border-top: 1px solid var(--border-soft); padding-top: 8px; font-size: 11px; color: var(--muted) }
#prompt-editor textarea { margin: 12px 0 6px }
.result-provenance { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; font-size: 11px; color: var(--muted); flex-wrap: wrap }
.result-provenance #status { flex: 1; min-width: 200px }
.artifact-banner { margin-top: 14px; padding: 12px 16px; border: 1px solid; border-left-width: 3px; border-radius: 6px; font-size: 12px }

/* ---------- Tab 1: hero scoreboard ---------- */
.hero-delta { border-radius: 10px; background: var(--nested); border: 1px solid var(--border); padding: 22px 26px }
.hero-topline { display: flex; justify-content: space-between; align-items: center; gap: 18px }
.hero-topline .eyebrow { margin-bottom: 4px }
.hero-topline h2 { font-size: 18px }
.hero-topline .pill { font: 700 10px var(--mono); letter-spacing: .6px; color: #67e8f9; border-color: #155e75; background: #164e6333 }
.hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 16px }
.hero-metric { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px }
.hero-metric strong { font: 700 clamp(24px, 2.6vw, 38px)/1.1 var(--mono); letter-spacing: -1px; display: block; color: var(--emerald) }
.hero-metric:nth-child(2) strong { color: var(--cyan) }
.hero-metric:nth-child(3) strong { color: #fcd34d }
.hero-metric span { display: block; font-size: 11px; color: var(--text-2); margin-top: 6px }
.reference-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px }
.ref-label { font-size: 11px; color: var(--muted); margin-right: 4px }
.comparison-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border-top: 1px solid var(--border); padding-top: 18px }
.bar-heading { font-size: 11px; color: var(--text-2); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 8px }
.bar-heading em { font-style: normal; color: var(--muted); font-size: 10px }
.bar-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) 96px; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px }
.bar-line > b { font: 700 11px var(--mono); color: var(--amber) }
.bar-line.b > b { color: var(--emerald) }
.bar-line > span { font: 600 11px var(--mono); text-align: right; color: var(--text); font-variant-numeric: tabular-nums }
.bar-track { height: 12px; background: var(--surface-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--border-soft) }
.bar-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--amber), var(--crimson)); transition: width .25s linear }
.bar-line.b .bar-fill { background: linear-gradient(90deg, var(--emerald), var(--cyan)) }
.bar-fill.live { opacity: .8 }
.hero-note { font-size: 11px; color: var(--muted); margin-top: 16px }

/* ---------- Tab 1: path cards ---------- */
.paths, .document-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
#paths { scroll-margin-top: 12px }
.path-card { overflow: hidden; min-width: 0; border-top: 3px solid var(--amber) }
.path-b { border-top-color: var(--emerald) }
.path-header { padding: 16px 18px 12px; min-height: 96px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px }
.path-header > div { min-width: 0 }
.path-header .eyebrow { color: var(--amber); margin-bottom: 4px }
.path-b .path-header .eyebrow { color: var(--emerald) }
.path-header h3 { font-size: 15px }
.path-header p { font-size: 11px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.phase-pill { font: 700 10px var(--mono); white-space: nowrap }
.pipeline-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 18px 14px; list-style: none; margin: 0 }
.pipe-step { position: relative; background: var(--nested); border: 1px solid var(--border); border-radius: 6px; padding: 8px 9px; font-size: 10px; line-height: 1.4; color: var(--muted); min-width: 0 }
.pipe-step + .pipe-step::before { content: "→"; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); color: #475569; font-size: 10px }
.pipe-step b { display: block; font-size: 10.5px; color: var(--text-2); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* Two-line detail slot: both strips keep one height, so the HUDs below sit on the same row in both cards. */
.pipe-step small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 28px; font: 10px/14px var(--mono); color: var(--muted); overflow-wrap: anywhere }
.pipe-step.active { border-color: var(--amber); color: var(--text-2); background: #2a1d0a }
.path-b .pipe-step.active { border-color: var(--cyan); background: #0a2530 }
.pipe-step.active b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 6px; background: currentColor; animation: blink 1s steps(2, start) infinite; color: var(--amber); vertical-align: middle }
.path-b .pipe-step.active b::after { color: var(--cyan) }
.pipe-step.done { border-color: #065f46; color: var(--text-2) }
.pipe-step.done b { color: #6ee7b7 }
.path-card:not(.path-b) .pipe-step.done { border-color: #92400e }
.path-card:not(.path-b) .pipe-step.done b { color: #fcd34d }
.pipe-step.error { border-color: var(--crimson); background: #2a0f12 }
.pipe-step.error b { color: #fca5a5 }
@keyframes blink { to { visibility: hidden } }
.hud { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--nested) }
.hud-cell { padding: 12px 12px 11px; border-left: 1px solid var(--border-soft); min-width: 0 }
.hud-cell:first-child { border-left: 0 }
.hud-cell .k { font-size: 9.5px; color: var(--muted); line-height: 1.35; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hud-cell .v { font: 700 19px/1.2 var(--mono); margin-top: 4px; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
.hud-cell .s { font-size: 9.5px; color: var(--muted); margin-top: 3px; min-height: 13px }
.hud-cell.ticking .v { color: #fcd34d }
.path-b .hud-cell.ticking .v { color: #67e8f9 }
.hud-cell.locked .v { color: var(--text) }
.path-validity { font-size: 11px; margin: 0 18px; padding: 0 }
.path-validity:not(:empty) { margin: 12px 18px 0; padding: 8px 10px; border-radius: 5px; border: 1px solid var(--border); background: var(--nested); color: var(--text-2) }
.path-validity.bad { color: #fca5a5; border-color: #991b1b; background: #2a0f12 }
.reasoning { margin: 12px 18px 0; font-size: 11px; color: var(--muted); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap }
.reasoning b { font-family: var(--mono); color: var(--violet) }
.reasoning q { flex-basis: 100%; quotes: none; font: 10px/1.5 var(--mono); color: #a5b4fc; background: var(--nested); border: 1px dashed #3730a3; border-radius: 5px; padding: 6px 8px; max-height: 58px; overflow: hidden; white-space: pre-wrap }
.response-section { padding: 14px 18px 16px }
.response-section h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; color: var(--muted) }
.response-section .md { max-height: 430px; overflow: auto; font-size: 12px; background: var(--nested); border: 1px solid var(--border-soft); border-radius: 6px; padding: 12px 14px; min-height: 90px }
.technical-details { border-top: 1px solid var(--border); font-size: 11px }
.technical-details > summary { padding: 12px 18px; font-weight: 650; color: var(--text-2) }
.technical-details > summary:hover { color: var(--text) }
.technical-body { padding: 0 18px 18px }
.technical-body > p { color: var(--muted); margin: 6px 0 10px; font-size: 11px }
.technical-body h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 14px 0 6px }
.tech-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 }
.metric { background: var(--nested); border: 1px solid var(--border-soft); border-radius: 6px; padding: 8px 10px; min-width: 0 }
.metric .k { font-size: 9.5px; color: var(--muted); line-height: 1.4 }
.metric .v { font: 700 14px var(--mono); margin-top: 4px; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
.technical-body details { margin-top: 10px; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--nested); padding: 8px 10px }
.raw-json { max-height: 400px; overflow: auto; background: var(--root); color: #cbd5e1; border: 1px solid var(--border-soft); border-radius: 5px; padding: 10px; font-size: 10px; margin: 8px 0 0 }
.fact-table { width: 100%; border-collapse: collapse; font-size: 11px }
.fact-table th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2) }
.fact-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; color: var(--text-2) }
.fact-table tr:nth-child(even) td { background: #0f172a99 }
.fact-state { font: 700 10px var(--mono); white-space: nowrap }
.fs-covered { color: #6ee7b7 }
.fs-missed { color: #94a3b8 }
.fs-contradicted { color: #fca5a5 }
.fs-unscored { color: #64748b }
.fact-evidence { display: block; margin-top: 4px; color: #fca5a5; font: 10px var(--mono); quotes: "“" "”" }

/* ---------- Tab 2: router + trade-offs ---------- */
.router, .tradeoffs { overflow: hidden; border-color: #155e75; background: linear-gradient(180deg, #0f1d2b 0, var(--surface) 140px); margin-bottom: 20px }
.router-head, .tradeoffs-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--border) }
.router-head .eyebrow, .tradeoffs-head .eyebrow { color: var(--cyan); margin-bottom: 8px }
.router-head h2, .tradeoffs-head h2 { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.35; letter-spacing: -.3px }
.router-head p, .tradeoffs-head p { max-width: 72ch; font-size: 13px; color: var(--text-2); margin-top: 8px }
.router-flow { list-style: none; margin: 0; padding: 20px 22px; display: grid; grid-template-columns: .8fr 1.3fr 1.3fr .8fr; gap: 14px }
.rf-node { position: relative; background: var(--nested); border: 1px solid var(--border); border-radius: 8px; padding: 14px; min-width: 0 }
.rf-node + .rf-node::before { content: "→"; position: absolute; left: -12px; top: 18px; color: var(--cyan); font: 700 12px var(--mono) }
.rf-node h3 { font-size: 14px; margin: 8px 0 6px }
.rf-node p { font-size: 12px; color: var(--text-2); margin: 0 0 8px }
.rf-node ul { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.6; color: var(--text-2) }
.rf-terms { display: block; font-size: 10.5px; color: #67e8f9; overflow-wrap: anywhere }
.rf-out { display: block; margin-top: 10px; font: 600 10.5px var(--mono); color: var(--cyan) }
.rf-final { border-color: #065f46 }
.rf-metric { display: block; font: 800 22px var(--mono); color: var(--text); margin-top: 8px }
.rf-node small { font-size: 10.5px; color: var(--muted) }
.rf-note { margin: 0 22px 16px; font-size: 12px; color: var(--text-2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.rf-weights { margin: 0 22px 16px; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--nested); padding: 8px 12px; font-size: 12px }
.rf-weights summary { cursor: pointer; font-weight: 650; color: var(--text-2) }
.rf-weights-body { overflow-x: auto; margin-top: 8px }
.weights-table, .verdict-table { width: 100%; border-collapse: collapse; font-size: 12px }
.weights-table th, .verdict-table th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2) }
.weights-table td, .verdict-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; color: var(--text-2) }
.rf-example { margin: 0 22px 16px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--nested) }
.rf-example h3 { font-size: 14px; margin-bottom: 6px }
.rf-q { font-size: 12px; color: var(--text-2); font-style: italic; margin: 0 0 8px }
.page-strip { display: grid; grid-template-columns: repeat(17, 1fr); gap: 2px; margin: 10px 0 6px }
.page-strip i { height: 22px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border-soft) }
.page-strip .seen-a { background: var(--a-fill) }
.page-strip .clause { background: var(--surface-2); outline: 2px solid var(--b-fill); outline-offset: -2px }
.page-legend { display: flex; gap: 16px; flex-wrap: wrap; font: 10.5px var(--mono); color: var(--muted); margin-bottom: 12px }
.page-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px }
.lg-a::before { background: var(--a-fill) }
.lg-clause::before { border: 2px solid var(--b-fill) }
.rf-ex-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.rf-ex-cols > div { min-width: 0; padding: 12px; border: 1px solid var(--border-soft); border-radius: 6px }
.rf-ex-cols p { font-size: 12px; color: var(--text-2); margin: 6px 0 }
.rf-ex-cols blockquote { margin: 8px 0 4px; padding: 6px 10px; border-left: 3px solid var(--b-fill); background: var(--surface); font-size: 12px; color: var(--text) }
.rf-cite { font: 10px var(--mono); color: var(--muted) }
.funnel { display: grid; gap: 10px; padding: 16px 22px }
.funnel-row { display: grid; grid-template-columns: minmax(0, 260px) 1fr 140px; gap: 12px; align-items: center }
.funnel-label { font-size: 11.5px; color: var(--text-2) }
.funnel-val { font: 600 11px var(--mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums }
.funnel-track { height: 14px; background: var(--surface-2); border-radius: 0 4px 4px 0; overflow: hidden }
.funnel-fill { display: block; height: 100%; min-width: 4px; width: var(--w, 0); border-radius: 0 4px 4px 0 }
.fill-ref { background: var(--ref-fill) } .fill-ref2 { background: var(--ref-fill-2) } .fill-a { background: var(--a-fill) } .fill-b { background: var(--b-fill) }
.funnel-note { margin: 4px 0 0; font-size: 11px; color: var(--muted) }
.router-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--nested) }
.router-foot > span { font-size: 10.5px; color: var(--muted) }
.tradeoff-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 22px }
.tradeoff-card { border: 1px solid var(--border); border-top-width: 3px; border-radius: 8px; padding: 16px; background: var(--nested); min-width: 0 }
.tradeoff-card.card-a { border-top-color: var(--a-fill) } .tradeoff-card.card-b { border-top-color: var(--b-fill) }
.tradeoff-card h3 { font-size: 16px; margin: 4px 0 2px }
.tradeoff-card .tagline { font-size: 12px; color: var(--muted); margin: 0 0 10px }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--text-2) }
.pc-list li { position: relative; padding-left: 20px }
.pc-list li::before { position: absolute; left: 0; font-weight: 800 }
.pc-list .pro::before { content: "✔"; color: var(--b-fill) } .pc-list .con::before { content: "✖"; color: var(--a-fill) }
.tradeoff-provenance { margin: 0 22px 16px; font: 10.5px var(--mono); color: var(--muted) }
.verdict-block { padding: 16px 22px; border-top: 1px solid var(--border) }
.verdict-block h3 { font-size: 15px; margin-bottom: 10px }
.verdict-close { font-size: 12px; color: var(--text-2); margin: 10px 0 0; max-width: 72ch }
.calc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 16px 22px; border-top: 1px solid var(--border) }
.calc label, .calc .field-label { display: block; margin-bottom: 5px; font-size: 11px; color: var(--text-2) }
.calc input { min-height: 38px }
.calc .seg { display: flex; flex-direction: column; gap: 6px }
.calc .seg .btn[aria-pressed=true] { border-color: var(--cyan); background: #0f2533; box-shadow: inset 0 0 0 1px var(--cyan) }
.calc-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 22px 12px }
.calc-out .stat { background: var(--nested); border: 1px solid var(--border-soft); border-radius: 6px; padding: 12px 14px; min-width: 0 }
.calc-out .k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted) }
.calc-out .v { display: block; margin-top: 6px; font: 700 20px/1.2 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
.calc-out .v.neutral { font-size: 14px; color: var(--text-2) }
.calc-note { margin: 0; padding: 0 22px 20px; font-size: 12px; color: var(--text-2) }
.route-trace { margin-top: 12px; border-top: 1px solid var(--border-soft); padding-top: 10px }
.route-trace summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 12px }
.route-trace .eyebrow { display: inline }
.rt-body { margin-top: 10px; display: grid; gap: 10px }
.rt-scores { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.rt-scores li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; gap: 8px; align-items: center; font: 10.5px var(--mono); color: var(--text-2) }
.rt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rt-scores b { text-align: right; color: var(--text) }
.rt-track { display: block; background: var(--surface-2); border-radius: 0 4px 4px 0 }
.rt-track i { display: block; height: 8px; width: var(--w, 0); background: var(--ref-fill); border-radius: 0 4px 4px 0 }
.rt-scores li.sel .rt-track i { background: var(--b-fill) }
.rt-slices { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 11px }
.rt-slices code { color: var(--text-2); overflow-wrap: anywhere }
.chip { display: inline-block; padding: 1px 6px; border: 1px solid #155e75; border-radius: 10px; font: 600 10px var(--mono); color: #67e8f9 }
.rt-sec { display: inline-block; font-size: 10.5px; color: var(--muted) }
.rt-link { font-size: 11px; color: var(--cyan) }
.verdict-strip { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--nested) }
.verdict-strip p { margin: 0; font-size: 13px; color: var(--text-2) }

/* ---------- Tab 2: corpus + inspector ---------- */
.corpus-explorer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
.document-card { text-align: left; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 7px 10px; display: flex; flex-direction: column; gap: 3px; transition: border-color .15s, background .15s; min-width: 0 }
.document-card:hover { border-color: #475569; background: #152033 }
.document-card[aria-pressed=true] { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); background: #0f2533 }
.doc-meta { font: 10px var(--mono); color: var(--muted); display: flex; justify-content: space-between; gap: 10px }
.document-card strong { font-size: 11.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.document-card .doc-file { display: none } /* compact pill bar: the full file name stays in the toolbar select */
.doc-file { font: 9.5px var(--mono); color: #64748b; overflow-wrap: anywhere }
.doc-tokens { font: 11px var(--mono); color: var(--text-2); margin-top: auto }
.doc-tokens i { font-style: normal; color: var(--muted) }
.document-card .pill { align-self: flex-start; font-family: var(--mono) }
.inspector-toolbar { margin-top: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 20px }
.inspector-toolbar > .field { flex: 1 }
.doc-telemetry { display: flex; gap: 8px; flex-wrap: wrap }
#corpus-note { margin-top: 8px }
.document-panes { margin-top: 14px }
.document-pane { min-width: 0; overflow: hidden }
.pane-a { border-top: 3px solid var(--amber) }
.pane-b { border-top: 3px solid var(--emerald) }
.pane-header { min-height: 52px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border) }
.pane-header h3 { font-size: 14px; margin-top: 3px }
.mode-switch { display: flex; flex-wrap: wrap; gap: 4px }
.mode-switch .btn { font-size: 10px; padding: 6px 9px; background: var(--nested) }
.mode-switch .btn.on { background: #164e63; border-color: var(--cyan); color: #fff }
.document-view { padding: 16px; max-height: 76vh; min-height: 360px; overflow: auto; overflow-wrap: anywhere; background: var(--nested) }
/* Legend and link strips are always laid out (never display:none) at a locked 34px, one line, scrolling sideways
 when crowded, so both document views start on one baseline with or without subgrid. Subgrid additionally
 shares the header / strip / view rows across the two panes. */
.noise-legend, .concept-links { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; height: 34px; min-height: 34px; max-height: 34px; padding: 0 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; white-space: nowrap; border-bottom: 1px solid var(--border); font-size: 10px; line-height: 16px; background: var(--surface) }
.noise-legend > *, .concept-links > * { flex: 0 0 auto }
.noise-legend span { padding: 3px 7px; border-radius: 3px; font-family: var(--mono) }
.concept-links .hint { line-height: 16px }
@supports (grid-template-rows: subgrid) {
 .document-panes { row-gap: 0 }
 .document-pane { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0 }
}
/* Without subgrid, rows are not shared: keep each header on one line so both headers resolve to the same height. */
@supports not (grid-template-rows: subgrid) {
 .pane-header { flex-wrap: nowrap }
 .pane-header > div:first-child { min-width: 0 }
 .pane-header h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
 .pane-header .mode-switch { flex-wrap: nowrap; flex-shrink: 0 }
}
.rawline { white-space: pre-wrap; font: 10.5px/1.7 var(--mono); padding: 0 5px; color: #cbd5e1; border-radius: 2px }
.raw-page { margin-bottom: 20px }
.raw-page h4 { font: 700 10px var(--mono); color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--border); margin-bottom: 8px; padding-bottom: 4px }
.n-toc { background: #78350f66; color: #fcd34d }
.n-pagenum { background: #4c1d9566; color: #c4b5fd }
.n-header_footer { background: #0c4a6e66; color: #7dd3fc }
.n-disclaimer { background: #7f1d1d66; color: #fca5a5 }
.n-fragment { background: #7c2d1266; color: #fdba74 }
.doc-state { padding: 20px; border: 1px dashed var(--border); border-radius: 8px; font-size: 12px; line-height: 1.7; color: var(--text-2) }
.doc-state .btn { margin-top: 12px }
.pdf-frame { width: 100%; height: 70vh; border: 0; background: var(--nested) }

/* ---------- Markdown: Obsidian dark ---------- */
.md { font-size: 12.5px; line-height: 1.75; overflow-wrap: anywhere; color: var(--text-2) }
.md p { margin: 10px 0; color: var(--text-2) }
.md h1, .md h2, .md h3, .md h4 { color: var(--text) }
.md h1 { font-size: 22px; letter-spacing: -.4px; line-height: 1.3; margin: 20px 0 12px }
.md h2 { font-size: 17px; line-height: 1.4; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border) }
.md h3 { font-size: 14.5px; margin: 18px 0 8px; color: #e2e8f0 }
.md h4 { font-size: 13px; margin: 14px 0 6px }
.md > :first-child { margin-top: 0 }
.md ul, .md ol { padding-left: 22px }
.md li { margin: 4px 0 }
.md li::marker { color: var(--muted) }
.md strong { color: var(--text) }
.md a { color: #67e8f9 }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0 }
.md pre { background: var(--root); color: #e2e8f0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; overflow: auto }
.md pre code { font-size: inherit; color: inherit }
.md :not(pre) > code { background: var(--surface-2); color: #f9a8d4; border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px }
.md blockquote { margin: 12px 0; border-left: 3px solid #7c3aed; padding: 4px 12px; color: var(--text-2); background: #1e1b4b55; border-radius: 0 4px 4px 0 }
.table-scroll { width: 100%; overflow-x: auto; margin: 12px 0; border: 1px solid var(--border); border-radius: 6px }
.md table { width: 100%; border-collapse: collapse; font-size: 11px }
.md th { background: var(--surface-2); color: var(--text); font-weight: 700; text-align: left; border-bottom: 1px solid #475569 }
.md td, .md th { padding: 8px 11px; border-right: 1px solid var(--border-soft); min-width: 90px; vertical-align: top }
.md td { border-top: 1px solid var(--border-soft); color: var(--text-2) }
.md tr:nth-child(odd) td { background: var(--nested) }
.md tr:nth-child(even) td { background: #162033 }
.md tr:hover td { background: #1c2a40 }
.wiki-link, .property-pill { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; line-height: 1.6 }
.wiki-link { background: #2e1065aa; color: #c4b5fd; border: 1px solid #5b21b6; cursor: help }
.wiki-link:hover { background: #4c1d95; color: #ede9fe }
.concept-links .wiki-link { font-size: 10px }
.frontmatter-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px }
.properties-heading { font: 700 10px var(--mono); letter-spacing: 1px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft) }
.properties-heading span { font-weight: 400; letter-spacing: 0; color: #64748b }
.properties-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0 }
.property dt { font-size: 10px; color: var(--muted) }
.property dd { margin: 4px 0 0 }
.property-pill { margin: 0 3px 3px 0; background: var(--nested); color: #67e8f9; border: 1px solid #155e75; font-family: var(--mono); font-size: 10px }
.property-empty { font-size: 10px; color: #64748b }
.mmd { display: block; width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--nested); margin: 12px 0 }
.mmd-h { height: 320px }
#md-view .mmd { max-height: 420px; margin: 12px auto } /* tall diagrams scroll inside the frame instead of towering over the reader */
.mermaid-src { color: #fcd34d }

/* ---------- Tab 3: harness ---------- */
.harness { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 14px; align-items: start }
.harness-diagram { padding: 12px; min-width: 0; display: flex; flex-direction: column; justify-content: center }
.harness-diagram .mmd { margin: 0; border: 0 }
.harness-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch }
.quota-card { grid-column: 1 / -1 }
.note { padding: 14px 16px }
.note h3 { margin: 6px 0 6px; font-size: 14px }
.note p { font-size: 12px }
.quota { display: grid; gap: 8px; margin: 8px 0 6px }
.q-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 42px; gap: 10px; align-items: center; font-size: 11px; color: var(--text-2) }
.q-row b { font: 700 12px var(--mono); text-align: right }
.q-track { height: 10px; background: var(--surface-2); border-radius: 3px; overflow: hidden }
.q-fill { display: block; height: 100% }
.q-gem { width: 50%; background: var(--cyan) }
.q-cla { width: 30%; background: var(--amber) }
.q-gpt { width: 8%; background: var(--emerald) }

/* ---------- Tab 3: work-package explorer ---------- */
.wp-selector { display: flex; flex-wrap: wrap; gap: 6px }
.wp-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); min-width: 112px; text-align: left }
.wp-btn b { font: 800 12px var(--mono); color: var(--text) }
.wp-btn span { font-size: 10px; color: var(--muted) }
.wp-btn .wp-name { font-size: 11.5px; font-weight: 600; color: var(--text-2) }
.wp-btn:hover { border-color: #475569; background: #152033 }
.wp-btn[aria-pressed=true] { border-color: var(--cyan); background: #0f2533; box-shadow: inset 0 0 0 1px var(--cyan) }
.wp-btn[aria-pressed=true] b { color: #67e8f9 }
.wp-flow { margin-top: 12px }
.wp-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px }
.wp-title h3 { font-size: 15px }
.wp-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.wp-col { position: relative; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--cyan); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.wp-col + .wp-col::before { content: "→"; position: absolute; left: -11px; top: 22px; color: #64748b; font-size: 12px }
.wp-col.c2 { border-top-color: var(--emerald) }
.wp-col.c3 { border-top-color: var(--crimson) }
.wp-col.c4 { border-top-color: var(--amber) }
.wp-col h4 { font-size: 12px; color: var(--text) }
.wp-col .who { font: 10px var(--mono); color: var(--muted) }
.wp-col p, .wp-col li { font-size: 11.5px; line-height: 1.55; color: var(--text-2) }
.wp-col ul { margin: 0; padding-left: 16px }
.wp-col li { margin: 3px 0 }
.wp-col .finding { font: 700 10px var(--mono); color: #fca5a5 }
.wp-col .pending { color: #fcd34d; font-style: italic }
.wp-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border-soft) }
.wp-files .btn { font: 600 10px var(--mono); padding: 5px 8px; background: var(--nested) }
.wp-files .missing { font: 10px var(--mono); color: #64748b; padding: 5px 0 }
.wp-artifact { margin-top: 12px; overflow: hidden }
.wp-artifact-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap }
.wp-artifact-head h3 { font: 700 13px var(--mono) }
.artifact-note { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--border); font-size: 10.5px; color: var(--muted) }
.audit-download { display: inline-block; margin: 8px 0 }
#wp-artifact-body { padding: 16px; max-height: 70vh; overflow: auto; background: var(--nested) }

/* ---------- Tab 3: catches + audit trail ---------- */
.catch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.catch-card { padding: 16px }
.catch-card .eyebrow { font-size: 9.5px; color: var(--cyan) }
.catch-card h3 { font-size: 14px; line-height: 1.35; margin: 8px 0 10px }
.catch-card ul { padding-left: 16px; font-size: 11.5px; color: var(--text-2); line-height: 1.6; margin: 0 }
.catch-card li { margin: 5px 0 }
.audit-trail { margin-top: 22px }
.audit-trail > summary { padding: 14px 16px; font-size: 13px; font-weight: 650 }
.audit-trail > summary .hint { font-weight: 400; margin-left: 14px }
.audit-body { padding: 0 16px 16px; font-size: 12px }
.audit-body > p { color: var(--muted); margin-bottom: 12px; font-size: 12px }
.audit-body details { padding: 10px 12px; background: var(--nested); border: 1px solid var(--border); border-radius: 6px; margin-top: 10px }
.audit-body summary { font-size: 11.5px; color: var(--text-2) }
.audit-body .md { max-height: 600px; overflow: auto; padding: 10px }
.finding-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 }
.finding-chips .pill { font: 600 10px var(--mono) }
.artifact-body { margin-top: 10px }

/* ---------- footer / login / misc ---------- */
footer { display: flex; justify-content: space-between; gap: 18px; padding: 20px 40px; border-top: 1px solid var(--border-soft); font: 10px var(--mono); color: #64748b; letter-spacing: .3px; background: var(--root) }
footer > span:first-child { font-weight: 750; letter-spacing: 1px; color: var(--muted) }
.login-overlay { position: fixed; inset: 0; z-index: 100; background: #0b0f19f0; display: grid; place-items: center; padding: 20px }
.login-card { width: min(400px, 100%); padding: 28px }
.login-card h2 { margin: 10px 0 20px }
.login-card .btn { margin-top: 14px; width: 100% }
#login-error { font-size: 12px; color: #fca5a5; margin-top: 10px }
.skip-link { position: fixed; left: 15px; top: -100px; background: var(--surface-2); color: var(--text); padding: 12px; z-index: 200 }
.skip-link:focus { top: 12px }
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden }
.text-amber { color: #fcd34d }
.text-red-400, .text-red-300 { color: #fca5a5 }
.text-term { color: #6ee7b7 }
.text-slate-500, .text-slate-400 { color: var(--muted) }
.whitespace-pre-wrap { white-space: pre-wrap }
.hljs { color: #e2e8f0 }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: #67e8f9 }
.hljs-string, .hljs-attr { color: #6ee7b7 }
.hljs-number, .hljs-literal { color: #fcd34d }
.hljs-comment { color: #64748b; font-style: italic }
.hljs-title, .hljs-section { color: #c4b5fd }
* { scrollbar-color: #334155 var(--nested) }

/* ---------- responsive ---------- */
@media (min-width: 1700px) {
 .masthead, .navigation { padding-left: max(40px, calc((100vw - 1520px) / 2)); padding-right: max(40px, calc((100vw - 1520px) / 2)) }
}
@media (max-width: 1280px) {
 .hud { grid-template-columns: repeat(3, minmax(0, 1fr)) }
 .hud-cell:nth-child(4) { border-left: 0 }
 .hud-cell:nth-child(n+4) { border-top: 1px solid var(--border-soft) }
 .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .wp-columns { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .wp-col:nth-child(3)::before { display: none }
}
@media (max-width: 1200px) {
 main { padding: 0 24px 40px }
 .masthead, .navigation { padding-left: 24px; padding-right: 24px }
 .edition { display: none }
 .run-console { grid-template-columns: 1fr 1fr }
 .run-actions { grid-column: 1 / -1; margin-top: 0 }
 .catch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .harness { grid-template-columns: 1fr }
 .router-flow { grid-template-columns: 1fr 1fr }
 .rf-node:nth-child(3)::before { display: none }
 .calc { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 900px) {
 .section-intro { grid-template-columns: 1fr; gap: 14px; padding: 26px 0 16px }
 .scenario-deck { grid-template-columns: repeat(3, minmax(0, 1fr)) }
 .corpus-explorer { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .paths, .document-panes { grid-template-columns: 1fr }
 #md-pane { margin-top: 16px } /* stacked panes: subgrid zeroes the row gap */
 .comparison-bars { grid-template-columns: 1fr; gap: 18px }
 .inspector-toolbar { align-items: stretch; flex-direction: column; gap: 12px }
 footer { padding: 20px 24px; flex-wrap: wrap }
 .router-flow, .tradeoff-cards, .rf-ex-cols { grid-template-columns: 1fr }
 .rf-node + .rf-node::before { content: "↓"; left: 50%; top: -15px; display: block }
 .calc { grid-template-columns: 1fr 1fr }
 .funnel-row { grid-template-columns: 1fr auto }
 .funnel-track { grid-column: 1 / -1; order: 3 }
}
@media (max-width: 560px) {
 main { padding: 0 14px 30px }
 .masthead { padding: 14px; flex-direction: column; align-items: flex-start; gap: 10px }
 .navigation { padding: 0 14px; overflow-x: auto }
 .navigation nav { gap: 18px }
 .tab-btn span { display: none }
 .scenario-deck { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .scenario-card:last-child { grid-column: 1 / -1 }
 .run-console { grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px }
 .run-console > .field:first-child { grid-column: 1 / -1 }
 .run-actions .btn { flex: 1 }
 .hero-delta { padding: 18px 16px }
 .hero-topline { flex-direction: column; align-items: flex-start }
 .hero-metrics { grid-template-columns: 1fr }
 .pipeline-strip { grid-template-columns: 1fr 1fr; row-gap: 6px }
 .pipe-step:nth-child(3)::before { display: none }
 .hud { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .hud-cell { border-left: 0; border-top: 1px solid var(--border-soft) }
 .hud-cell:nth-child(-n+2) { border-top: 0 }
 .hud-cell:nth-child(even) { border-left: 1px solid var(--border-soft) }
 .corpus-explorer { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .document-card strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
 .doc-tokens { overflow-wrap: anywhere }
 .document-card .pill { max-width: 100%; white-space: normal }
 .properties-grid { grid-template-columns: 1fr }
 .wp-columns, .catch-grid, .harness-notes { grid-template-columns: 1fr }
 .quota-card { grid-column: auto }
 .wp-col + .wp-col::before { display: none }
 .bar-line { grid-template-columns: 18px minmax(0, 1fr) 80px }
 footer { flex-direction: column; gap: 8px; padding: 18px 14px }
 .rf-node { padding: 12px }
 .rf-metric { font-size: 20px }
 .router-flow, .tradeoff-cards, .calc, .calc-out { padding-left: 14px; padding-right: 14px }
 .calc, .calc-out { grid-template-columns: 1fr }
 .calc input, .calc .seg { min-height: 44px; width: 100% }
 .calc .seg .btn { flex: 1 }
 .page-strip i { height: 16px }
 .verdict-strip { flex-direction: column; align-items: stretch }
 .verdict-table th, .verdict-table td { display: block; width: 100% }
 .rt-scores li { grid-template-columns: minmax(0, 1fr) 60px 40px }
}
/* ---------- WP-12D: vision-audit polish ---------- */
.technical-body { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth }
.technical-details .fact-table th, #tech-details th { position: sticky; top: 0; background: #0b0f19; z-index: 10 }
.step-num { flex: 0 0 auto }
.concept-links .wiki-link, .concept-links .property-pill, .noise-legend span { max-width: 100%; overflow-wrap: anywhere }
@media (max-width: 560px) {
 .section-intro h1, .router-head h2, .tradeoffs-head h2 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere }
 .noise-legend, .concept-links { flex-wrap: wrap; gap: 6px; height: auto; max-height: none; padding: 8px 14px; white-space: normal; overflow-x: auto; overflow-y: visible }
 .noise-legend > *, .concept-links > * { flex: 0 1 auto; white-space: normal }
 .scenario-card, .tab-btn, .btn, .btn-primary, select, .wp-btn, .mode-switch .btn, .wp-files .btn { min-height: 44px; display: inline-flex; align-items: center }
 .scenario-card { flex-direction: column; align-items: stretch; justify-content: center }
 .tab-btn { padding-top: 0; padding-bottom: 0 }
 select { width: 100% }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important }
}