html[data-theme="light"] { color-scheme:light; --fg:#1a1a1a; --mut:#666; --line:#e2e2e2; --bg:#fafafa; --surface:#fff; --surface2:#f3f3f3; --accent:#2748a0; --accent-bg:#eef3ff; --accent-bd:#c7d6f5; --accent-hover:#dce6fb; --banner-bg:#f0f6ff; --note-bg:#f6f8fa; --arrow-bg:rgba(255,255,255,.9); --bp-fill:rgba(39,72,160,.14); --bp-grid:#eef0f3; --err:#a01; }
html[data-theme="dark"] { color-scheme:dark; --fg:#c9d1d9; --mut:#8b949e; --line:#30363d; --bg:#0d1117; --surface:#161b22; --surface2:#1c2230; --accent:#79c0ff; --accent-bg:rgba(56,139,253,.13); --accent-bd:#30466b; --accent-hover:rgba(56,139,253,.22); --banner-bg:#11233f; --note-bg:#1c2230; --arrow-bg:rgba(22,27,34,.9); --bp-fill:rgba(121,192,255,.18); --bp-grid:#21262d; --err:#f85149; }
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
body { font: 14px/1.5 -apple-system, system-ui, sans-serif; color: var(--fg); margin: 0; background: var(--bg); }
.topbar { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 24px; }
/* Identity band: data-derived title (left) vs. primary + overflow actions (right). */
.topbar-id { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topbar-id .id-main { min-width: 0; }
.breadcrumb { font-size: 11.5px; color: var(--mut); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.breadcrumb a { color: var(--accent); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .bc-sep { color: var(--line); }
.topbar h1 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.01em; line-height: 1.25; }
.topbar #run-meta { margin-top: 3px; }
.topbar-id .id-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
/* Ghost button — readily-accessible but visually quiet (PDF, theme toggle, overflow). */
.btn-ghost { font: inherit; font-weight: 600; font-size: 12px; padding: 5px 12px; cursor: pointer; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; line-height: 1.4; }
.btn-ghost:hover { background: var(--surface2); border-color: var(--accent-bd); }
.btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-icon { padding: 5px 9px; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.controls:empty { display: none; }
.controls label { font-size: 12px; color: var(--mut); }
.controls select, .controls input[type=search], .controls input { font: inherit; padding: 3px 6px; }
.controls button { font: inherit; font-weight: 600; padding: 5px 12px; cursor: pointer; }
/* Topbar run-switcher: navigates to a SIBLING published run dir. Hidden by default —
   shown only after the sibling reports-index.json successfully loads (graceful
   degradation for a local file:// open / absent index). */
.run-switcher { display: none; align-items: center; gap: 5px; }
.run-switcher.ready { display: inline-flex; }
.run-switcher label { font-size: 12px; color: var(--mut); }
.run-switcher select { font: inherit; font-size: 12px; padding: 4px 8px; max-width: 360px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); }
.toggles { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; margin: 0; }
.toggles legend { font-size: 11px; color: var(--mut); padding: 0 4px; }
.toggles label { font-size: 12px; color: var(--fg); display: inline-flex; gap: 3px; align-items: center; }
.meta { color: var(--mut); font-size: 12px; font-family: ui-monospace, monospace; }

/* Section-local filter bar (UX research: filters live next to the data they affect —
   Pencil&Paper / LogRocket / Aufait: component-level filters for discrepant sections;
   only global dimensions belong in a page toolbar). Sits at the top of the Answers
   section, sticky just under the topbar so it stays reachable while scrolling tiles. */
.answers-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: sticky; top: var(--topbar-h, 64px); z-index: 20; background: var(--bg); padding: 8px 0; margin: 0 0 6px; border-bottom: 1px solid var(--line); }
.answers-filters label { font-size: 12px; color: var(--mut); }
.answers-filters select, .answers-filters input[type=search] { font: inherit; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); }
.answers-filters input[type=search] { min-width: 220px; }

/* Multi-select "Filter setups ▾" dropdown (UX research: NN/g listbox-vs-dropdown — a
   checkbox listbox holds many options compactly; UX Patterns / Baymard — select-all +
   clear-all + a count badge for reporting filters). A <details> disclosure anchors a
   scrollable checkbox panel; the trigger shows an "N of M" badge. Scales to 11+ setups. */
.setup-filter { position: relative; display: inline-block; }
.setup-filter > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit; font-weight: 600; font-size: 12px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); }
.setup-filter > summary::-webkit-details-marker { display: none; }
.setup-filter > summary::marker { content: ''; }
.setup-filter > summary:hover { border-color: var(--accent-bd); background: var(--surface2); }
.setup-filter[open] > summary { border-color: var(--accent-bd); background: var(--surface2); }
.setup-filter > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.setup-count { font: 11px ui-monospace, monospace; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-bd); border-radius: 10px; padding: 0 7px; }
.setup-count.count-badge.partial { background: #fff3d6; color: #8a5a00; border-color: #f1c21b; }
.setup-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 260px; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 8px; }
.setup-panel-acts { display: flex; gap: 6px; padding: 2px 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.setup-panel-acts button { font: inherit; font-size: 11px; font-weight: 600; padding: 3px 9px; cursor: pointer; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-bd); border-radius: 5px; }
.setup-panel-acts button:hover { background: var(--accent-hover); }
.setup-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.setup-list label { display: flex; gap: 7px; align-items: center; font-size: 12px; color: var(--fg); padding: 5px 6px; border-radius: 5px; cursor: pointer; }
.setup-list label:hover { background: var(--accent-bg); }
.setup-list input { margin: 0; flex-shrink: 0; }
main { max-width: none; margin: 0 auto; padding: 16px 24px 120px; }
.intro { color: var(--mut); font-size: 13px; margin: 4px 0 14px; max-width: 84ch; }
section.intro-led > .intro:first-child { margin-top: 0; }

/* Skip-link + visually-hidden (screen-reader-only) helper (a11y). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 60; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 0 0 8px 8px; font-weight: 600; transition: top .15s; }
.skip-link:focus { top: 0; }

/* Sticky in-page navigation: 4-Tab Progressive Disclosure Bar + section links. */
#toc { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.report-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rtab { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mut); background: var(--surface2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .12s; white-space: nowrap; }
.rtab:hover { color: var(--fg); border-color: var(--accent-bd); background: var(--accent-bg); }
.rtab.active { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
.rtab-badge { font: 700 10.5px/1.3 ui-monospace, monospace; padding: 1px 6px; border-radius: 99px; background: var(--surface); color: var(--mut); border: 1px solid var(--line); }
.rtab.active .rtab-badge { background: var(--accent); color: #fff; border-color: var(--accent); }
.rtab-all { margin-left: auto; font-size: 11.5px; padding: 5px 10px; }
.toc-sub { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding-top: 2px; }
.toc-sub[hidden] { display: none !important; }
#toc .toc-link { font-size: 11.5px; font-weight: 600; color: var(--mut); text-decoration: none; padding: 3px 9px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; }
#toc .toc-link:hover { background: var(--accent-bg); color: var(--accent); }
#toc .toc-link[aria-current="location"] { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-bd); }

/* Tab visibility rules: in Overview / Questions / Speed / Methodology tabs, only matching
   sections show; in 'all' mode (or print), every section is visible. */
#report[data-active-tab="overview"] > [data-tab-group]:not([data-tab-group~="overview"]),
#report[data-active-tab="questions"] > [data-tab-group]:not([data-tab-group~="questions"]),
#report[data-active-tab="speed"] > [data-tab-group]:not([data-tab-group~="speed"]),
#report[data-active-tab="methodology"] > [data-tab-group]:not([data-tab-group~="methodology"]) {
  display: none !important;
}

/* Distinct, numbered, divider-led sections (UX research: numbered headings + dividers +
   whitespace so stacked sections read as separate blocks). scroll-margin-top keeps an
   anchored heading clear of the sticky header. */
#report > section.rsec { counter-increment: rsec; border-top: 2px solid var(--line); margin-top: 34px; padding-top: 22px; scroll-margin-top: 128px; }
#report > section.rsec:first-of-type { border-top: 0; margin-top: 8px; }
#report > section.rsec > h2 { font-size: 17px; margin: 0 0 10px; font-family: -apple-system, system-ui, sans-serif; font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
#report > section.rsec > h2 .sec-h::before { content: counter(rsec, decimal-leading-zero) " "; color: var(--accent); font-family: ui-monospace, monospace; font-weight: 700; margin-right: 6px; }
#report > section.rsec > h2 .sec-note { font-size: 11px; font-weight: 600; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 2px 8px; }
.scenario-h { font-size: 14px; margin: 22px 0 6px; font-family: ui-monospace, monospace; color: var(--fg); }
/* Engineering = visible but de-emphasized (operational, not answer quality). */
#sec-engineering { opacity: .96; }
#sec-engineering > h2 .sec-h { color: var(--mut); }

/* Layer 1: Overview (At a Glance) — 3 Plain-English Visual Blocks */
.exec-summary { margin: 4px 0 24px; display: flex; flex-direction: column; gap: 20px; max-width: 1280px; }
.ov-block { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.ov-banner-card { border-left: 5px solid var(--accent); }
.ov-kicker { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-headline { font-size: 19px; font-weight: 800; color: var(--fg); line-height: 1.35; margin: 0 0 8px; letter-spacing: -.015em; }
.ov-lead { font-size: 14px; color: var(--mut); line-height: 1.6; margin: 0 0 16px; max-width: 95ch; }
.ov-lead b, .ov-lead strong { color: var(--fg); }
.ov-study-brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 0 0 18px; }
.ov-study-box { padding: 12px 15px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface2); min-width: 0; }
.ov-study-box.takeaway { border-left: 4px solid var(--accent); background: var(--accent-bg); border-color: var(--accent-bd); }
.ov-study-kicker { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 4px; }
.ov-study-body { font-size: 13.5px; line-height: 1.55; color: var(--fg); overflow-wrap: anywhere; }
.ov-study-body a { color: var(--accent); font-weight: 700; text-decoration: none; }
.ov-study-body a:hover { text-decoration: underline; }
.ov-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ov-hero-card { background: var(--surface2); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ov-hero-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.ov-hero-big { font-size: 23px; font-weight: 800; color: var(--fg); line-height: 1.2; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ov-hero-big.accent { color: var(--accent); }
.ov-hero-big.ok { color: #196c2e; }
.ov-hero-big small { font-size: 13px; font-weight: 600; color: var(--mut); }
.ov-hero-pill { display: inline-flex; align-items: center; align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-bd); max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.ov-hero-pill.ok { background: #d6f0d8; color: #103d1a; border-color: #8ce99a; }
.ov-hero-pill.warn { background: #fff3d6; color: #8a5a00; border-color: #f1c21b; }
.ov-hero-desc { font-size: 12.5px; color: var(--mut); line-height: 1.45; margin-top: 2px; }
.ov-hero-desc b { color: var(--fg); }

/* Block 2: Head-to-Head Comparison Table */
.ov-sec-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ov-sec-title { font-size: 16px; font-weight: 800; color: var(--fg); margin: 0; }
.ov-sec-sub { font-size: 12.5px; color: var(--mut); }
.ov-comp-wrap { overflow-x: auto; }
table.ov-comp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ov-comp-table th { background: var(--surface2); color: var(--mut); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.ov-comp-table td { padding: 12px; border: 1px solid var(--line); vertical-align: middle; }
.ov-comp-table tr.is-leader { background: var(--accent-bg); }
.ov-setup-name { font-weight: 700; font-size: 13.5px; color: var(--fg); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ov-setup-desc { font-size: 11.5px; color: var(--mut); margin-top: 3px; line-height: 1.35; }
.ov-score-cell { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.ov-score-num { font: 800 16px/1 ui-monospace, monospace; color: var(--fg); min-width: 38px; font-variant-numeric: tabular-nums; }
.ov-score-bar { flex: 1; height: 9px; background: var(--surface2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; min-width: 70px; }
.ov-score-fill { height: 100%; border-radius: 99px; background: var(--accent); }
.ov-score-fill.tier-good { background: #2f9e44; }
.ov-score-fill.tier-mid { background: #d9730d; }
.ov-score-fill.tier-bad { background: #da1e28; }
.ov-dim-val { font: 700 13.5px/1.2 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.ov-dim-val small { font-weight: 400; color: var(--mut); font-size: 11px; }
.ov-wait-main { font-weight: 700; font-size: 13px; color: var(--fg); }
.ov-wait-sub { font-size: 11px; color: var(--mut); margin-top: 2px; }
table.ov-comp-table[data-collapsed="1"] tr.exec-row-extra { display: none; }
.ov-table-toggle-wrap { margin-top: 10px; display: flex; justify-content: center; }
.ov-table-toggle { font-weight: 700; color: var(--accent); background: var(--accent-bg); border-color: var(--accent-bd); padding: 6px 16px; }
.tile-workspace-bar { margin: 12px 0; padding: 12px 16px; background: var(--surface2); border: 1px dashed var(--accent-bd); border-radius: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Block 3: Clinical Task Categories + Top 3 Differentiators */
.ov-sub-kicker { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); margin: 6px 0 10px; }
.ov-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 12px; margin-bottom: 22px; }
.ov-cat-card { background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color .12s, transform .1s; }
.ov-cat-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.ov-cat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ov-cat-name { font-weight: 700; font-size: 13.5px; color: var(--fg); line-height: 1.3; }
.ov-cat-cnt { font-size: 11px; font-weight: 600; color: var(--mut); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.ov-cat-desc { font-size: 12px; color: var(--mut); line-height: 1.4; }
.ov-cat-bars { display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding-top: 4px; }
.ov-cat-row { display: grid; grid-template-columns: 110px 1fr 40px; gap: 8px; align-items: center; font-size: 11.5px; }
.ov-cat-arm { color: var(--mut); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-cat-val { font: 700 11.5px ui-monospace, monospace; text-align: right; font-variant-numeric: tabular-nums; }

.ov-diff-list { display: flex; flex-direction: column; gap: 12px; }
.ov-diff-card { border: 1px solid var(--line); border-radius: 11px; padding: 15px 18px; background: var(--bg); min-width: 0; max-width: 100%; }
.ov-diff-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ov-diff-badges { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.ov-cat-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-bd); }
.ov-sid-muted { font: 11px ui-monospace, monospace; color: var(--mut); }
.ov-delta-pill { font: 800 11.5px ui-monospace, monospace; padding: 3px 10px; border-radius: 99px; background: #d6f0d8; color: #103d1a; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.ov-diff-q { font-size: 14.5px; font-weight: 700; color: var(--fg); line-height: 1.4; margin: 4px 0 8px; overflow-wrap: anywhere; }
.ov-diff-why { font-size: 13px; color: var(--mut); line-height: 1.5; margin-bottom: 10px; overflow-wrap: anywhere; }
.ov-diff-why b { color: var(--fg); }
.ov-diff-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-bottom: 10px; }
.ov-diff-sc { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; min-width: 0; max-width: 100%; }
.ov-diff-sc > div:first-child { min-width: 0; flex: 1 1 0; overflow-wrap: anywhere; }
.ov-diff-sc > .ov-score-num { flex: 0 0 auto; white-space: nowrap; min-width: 0; text-align: right; }
.ov-diff-sc.win { border-color: #8ce99a; background: rgba(47, 158, 68, .06); }
.ov-diff-sc.lose { border-color: #f1c21b; background: rgba(241, 194, 27, .07); }
.ov-diff-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
details.diff-example { width: 100%; }
details.diff-example > summary { cursor: pointer; color: var(--accent); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; }
details.diff-example > summary:hover { text-decoration: underline; }
.diff-qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.diff-qa-col { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; font-size: 12.5px; }
.diff-qa-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-weight: 700; }
.diff-qa-body { max-height: 14em; overflow: auto; white-space: pre-wrap; line-height: 1.5; }
.btn-drawer-open { font: inherit; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-bd); border-radius: 7px; padding: 5px 11px; cursor: pointer; }
.btn-drawer-open:hover { background: var(--accent-hover); }
.ov-cta-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Layer 2: Question Explorer Matrix + Slide-Over Answer Reader (#scenario-drawer) */
.question-explorer { margin: 8px 0 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.qe-filter-bar { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 10px 0 14px; }
.qe-pill { font: inherit; font-size: 12px; font-weight: 600; color: var(--mut); background: var(--surface2); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; cursor: pointer; }
.qe-pill:hover { color: var(--fg); border-color: var(--accent-bd); }
.qe-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.qe-search { margin-left: auto; font: inherit; font-size: 12.5px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--fg); min-width: 220px; }
table.qe-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.qe-table th { background: var(--surface2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); padding: 9px 11px; border: 1px solid var(--line); }
.qe-table td { padding: 10px 11px; border: 1px solid var(--line); vertical-align: top; }
.qe-row { cursor: pointer; transition: background .1s; }
.qe-row:hover { background: var(--accent-bg); }
.qe-q-main { font-weight: 700; font-size: 13px; color: var(--fg); line-height: 1.35; margin-bottom: 4px; }
.qe-q-sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--mut); }
.qe-score-badge { display: inline-block; font: 700 12.5px/1.2 ui-monospace, monospace; padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.qe-score-badge.good { background: #d6f0d8; color: #103d1a; }
.qe-score-badge.mid { background: #fdedc8; color: #5c4300; }
.qe-score-badge.bad { background: #f6d2d2; color: #7d1a1a; }
.qe-axes-sub { font: 10.5px ui-monospace, monospace; color: var(--mut); margin-top: 3px; }
.qe-delta { font: 800 12.5px ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qe-delta.big { color: #196c2e; }
.qe-note { font-size: 12px; color: var(--mut); line-height: 1.4; max-width: 44ch; }

/* Slide-Over Answer Reader (#scenario-drawer) */
.sdrawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .52); z-index: 90; justify-content: flex-end; }
.sdrawer-backdrop.open { display: flex; }
.sdrawer { width: min(1080px, 95vw); height: 100vh; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 36px rgba(0,0,0,.28); display: flex; flex-direction: column; overflow: hidden; }
.sdrawer-head { padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface2); display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.sdrawer-title { font-size: 15px; font-weight: 800; color: var(--fg); margin: 3px 0 0; line-height: 1.35; }
.sdrawer-nav { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.sdrawer-tabs { display: flex; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.sd-tab { font: inherit; font-size: 12px; font-weight: 700; color: var(--mut); background: var(--surface2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 12px; cursor: pointer; }
.sd-tab.active { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); }
.sdrawer-body { flex: 1; overflow-y: auto; padding: 18px 20px 40px; }
.sd-turn-block { margin-bottom: 20px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--bg); }
.sd-turn-q { padding: 10px 14px; background: var(--surface2); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13.5px; color: var(--fg); }
.sd-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; padding: 14px; }
.sd-col { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }
.sd-col-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.sd-col-body { white-space: pre-wrap; line-height: 1.55; font-size: 13px; }

/* Layer 2->3: Speed & Multi-User Scaling Visual Summary */
.speed-visual { margin: 8px 0 24px; display: flex; flex-direction: column; gap: 18px; max-width: 1280px; }
.speed-stage-row { margin-bottom: 14px; }
.speed-stage-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.speed-bar-track { height: 26px; background: var(--surface2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; font: 700 11px ui-monospace, monospace; color: #fff; }
.speed-seg-ttft { background: #3b82f6; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; padding: 0 6px; }
.speed-seg-stream { background: #16a34a; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; padding: 0 6px; }
.speed-seg-check { background: #64748b; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; padding: 0 4px; }
.speed-conc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.speed-conc-card { background: var(--surface2); border: 1px solid var(--line); border-radius: 11px; padding: 15px 17px; }
.speed-conc-card.highlight { border-color: var(--accent); background: var(--accent-bg); }

/* Keep legacy exec-kpis / exec-board classes styled for backward-compatible assertions */
.exec-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kpi-card { background: var(--surface2); border: 1px solid var(--line); border-radius: 9px; padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; }
.kpi-kicker { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.kpi-val { font-size: 15px; font-weight: 700; color: var(--fg); display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; line-height: 1.3; }
.kpi-score { font-family: ui-monospace, monospace; font-size: 18px; color: var(--accent); font-variant-numeric: tabular-nums; }
.kpi-score small { font-size: 11px; color: var(--mut); font-weight: 500; }
.kpi-ok { color: #196c2e; }
.kpi-warn { color: #a2191f; }
.kpi-sub { font-size: 11.5px; color: var(--mut); line-height: 1.4; }
.exec-board { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.exec-board-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); margin-bottom: 2px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.exec-board-h span { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
div.exec-row { display: grid; grid-template-columns: minmax(190px, 1.4fr) minmax(160px, 2fr) auto auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 7px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; }
div.exec-row.is-best { border-color: var(--accent-bd); background: var(--accent-bg); }
tr.exec-row.is-leader td { background: var(--accent-bg); }
.exec-arm { font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td .exec-arm { white-space: normal; overflow: visible; text-overflow: clip; }
.exec-bar-wrap { display: flex; align-items: center; gap: 8px; }
.exec-bar-track { flex: 1; height: 8px; background: var(--surface2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; min-width: 70px; }
.exec-bar-fill { height: 100%; border-radius: 99px; background: var(--accent); }
.exec-bar-fill.tier-good { background: #2f9e44; }
.exec-bar-fill.tier-mid { background: #d9730d; }
.exec-bar-fill.tier-bad { background: #da1e28; }
.exec-bscore { font-family: ui-monospace, monospace; font-weight: 700; font-size: 12.5px; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.exec-axes { font-family: ui-monospace, monospace; font-size: 11px; color: var(--mut); white-space: nowrap; }
.exec-safe { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
.exec-safe.ok { background: #d6f0d8; color: #103d1a; }
.exec-safe.bad { background: #f6d2d2; color: #7d1a1a; }
.exec-lat { font-family: ui-monospace, monospace; font-size: 11px; color: var(--mut); min-width: 52px; text-align: right; white-space: nowrap; }
@media (max-width: 820px) {
  .exec-row { grid-template-columns: 1fr 1fr; }
}


/* Sortable-table header affordances (UX research: W3C APG / Roselli). The label is a real
   <button> (free keyboard); the active column shows aria-sort + a solid ▲/▼; the glyph is
   aria-hidden (state lives in aria-sort). */
th button.th-sort { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: baseline; gap: 4px; width: 100%; text-align: inherit; }
th button.th-sort:hover { color: var(--accent); }
th button.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
th .sort-ind { font-size: 9px; color: var(--accent); min-width: .8em; }
th[aria-sort] { background: var(--accent-bg); }
th[aria-sort] button.th-sort { color: var(--accent); }
.arms-section { margin: 8px 24px 0; }
.arm-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.arm-card { flex: 1 1 240px; min-width: 220px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.arm-head { display: flex; align-items: center; gap: 8px; }
.arm-name { font-size: 13px; font-weight: 600; }
.arm-id { font-family: ui-monospace, monospace; font-size: 10px; color: var(--mut); margin: 2px 0 0; }
.badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--accent-bd); background: var(--accent-bg); color: var(--accent); }
.badge.single { background: var(--surface2); color: var(--mut); border-color: var(--line); }
.arm-path { color: var(--mut); font-size: 11px; margin: 3px 0 6px; }
.makeup { width: 100%; font-size: 11px; background: transparent; }
.makeup td { padding: 2px 4px; border: none; }
.makeup .role { color: var(--mut); width: 28%; }
.makeup .mdl { font-family: ui-monospace, monospace; }
.makeup .mq { color: var(--mut); }
.makeup-single { font-size: 12px; color: var(--mut); font-family: ui-monospace, monospace; margin-top: 4px; }
details.arm-config { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
details.arm-config > summary { cursor: pointer; color: var(--accent); font-size: 11px; font-weight: 600; }
.arm-config .ac-tease { color: var(--mut); font-weight: 400; font-size: 10px; font-family: ui-monospace, monospace; }
.arm-config .ac-body { margin-top: 8px; }
.arm-config .ac-h { font-size: 11px; font-weight: 700; color: var(--fg); text-transform: uppercase; letter-spacing: .03em; margin: 10px 0 4px; }
.arm-config .ac-h:first-child { margin-top: 0; }
.arm-config .ac-sub, .arm-config .ac-src { font-weight: 400; text-transform: none; color: var(--mut); font-size: 10px; font-family: ui-monospace, monospace; letter-spacing: 0; }
table.ac-knobs { width: 100%; font-size: 11px; border-collapse: collapse; }
table.ac-knobs th, table.ac-knobs td { border: 1px solid var(--line); padding: 2px 6px; text-align: left; font-family: ui-monospace, monospace; }
table.ac-knobs th { background: var(--surface2); font-weight: 600; }
table.ac-knobs td.ac-k, table.ac-knobs th:first-child { color: var(--mut); font-family: inherit; }
.arm-config .ac-prompt { margin: 4px 0 8px; }
.arm-config .ac-plabel { font-size: 11px; font-weight: 600; }
.arm-config .ac-psum { font-size: 11px; color: var(--mut); margin: 2px 0; max-width: 60ch; }
.arm-config .ac-pfull > summary { cursor: pointer; color: var(--accent); font-size: 10px; }
.arm-config pre.ac-pre { white-space: pre-wrap; font: 10.5px/1.45 ui-monospace, monospace; background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 4px 0 0; max-height: 16em; overflow: auto; }
.arm-config .ac-retr { font-size: 11px; font-family: ui-monospace, monospace; color: var(--fg); }
table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--surface2); font-weight: 600; font-size: 12px; }
.summary td, .summary th { text-align: center; }
.summary td.b { text-align: left; font-family: ui-monospace, monospace; }
.summary .model { display: block; color: var(--mut); font-size: 11px; }
.metrics-section { margin-top: 18px; }
.metrics-legend { color: var(--mut); font-size: 12px; margin: 2px 0 10px; }

/* Scannable grading-key / legend: a definition grid (term -> concise definition) instead
   of a dense prose wall. <dl> keeps the term↔definition pairing semantic + screen-reader
   navigable (W3C H40 / WCAG). Long secondary detail nests in a <details> disclosure
   (progressive disclosure, NN/g). */
.legend-key { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 6px 0 0; font-size: 12px; align-items: baseline; }
.legend-key dt { font-weight: 700; color: var(--fg); font-size: 11.5px; }
.legend-key dd { margin: 0; color: var(--mut); }
.legend-key dd b, .legend-key dt b { color: var(--fg); font-weight: 700; }
.legend-key code { font-family: ui-monospace, monospace; font-size: 11px; background: var(--surface2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--fg); }
/* When several short keys sit side by side (e.g. box-plot glyphs), let the grid wrap as
   chips rather than one tall column. */
.legend-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; font-size: 12px; }
.legend-chips .lk { display: inline-flex; gap: 5px; align-items: baseline; color: var(--mut); }
.legend-chips .lk b { color: var(--fg); font-weight: 700; }
.legend-detail { margin: 8px 0 4px; }
.legend-detail > summary { cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.legend-detail > summary::-webkit-details-marker { display: none; }
.legend-detail > summary::after { content: '▾'; font-size: 10px; transition: transform .15s; }
.legend-detail[open] > summary::after { transform: rotate(180deg); }
.legend-detail > summary:hover { text-decoration: underline; }
.legend-detail > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.legend-detail .legend-body { margin-top: 8px; padding: 10px 12px; background: var(--note-bg); border: 1px solid var(--line); border-radius: 8px; }
.legend-detail .legend-body p { margin: 0 0 6px; color: var(--mut); font-size: 12px; }
.legend-detail .legend-body p:last-child { margin-bottom: 0; }
.legend-caveat { font-size: 11.5px; color: var(--mut); margin: 8px 0 0; font-style: italic; }
.legend-group-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); margin: 12px 0 2px; }
.legend-group-h:first-child { margin-top: 6px; }
.metrics-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.boxplot-wrap { flex: 1 1 300px; min-width: 280px; max-width: 460px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--surface); }
.boxplot { width: 100%; height: auto; }
.bp-title { font-size: 12px; font-weight: 600; fill: var(--fg); }
.bp-grid { stroke: var(--bp-grid); stroke-width: 1; }
.bp-ytick { font-size: 9px; fill: var(--mut); text-anchor: end; }
.bp-xtick { font-size: 10px; fill: var(--fg); text-anchor: middle; }
.bp-xn { font-size: 8.5px; fill: var(--mut); text-anchor: middle; }
.bp-box { fill: var(--bp-fill); stroke: var(--accent); stroke-width: 1.3; }
.bp-median { stroke: var(--accent); stroke-width: 2.2; }
.bp-mean { stroke: #d9730d; stroke-width: 1.4; stroke-dasharray: 3 2; }
.bp-whisker, .bp-cap { stroke: var(--accent); stroke-width: 1; }
.bp-out { fill: none; stroke: #d9730d; stroke-width: 1; opacity: .85; }
.bp-clip { fill: #d9730d; }
.bp-clipnote { font-size: 8.5px; fill: #d9730d; }
.judge-section, .det-section, .adj-section { margin-top: 18px; }
.th-sub { font-weight: 400; color: var(--mut); font-size: 10px; }
.vtiers-banner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.vtiers-label { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); margin-right: 4px; }
.vtier-pill { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface2); color: var(--mut); text-decoration: none; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.vtier-pill .vt-k { font-weight: 700; color: var(--fg); }
.vtier-pill.det { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-bd); }
.vtier-pill.judge { background: #fff3d6; color: #8a5a00; border-color: #f1c21b; }
.vtier-pill.human { background: #d6f0d8; color: #103d1a; border-color: #2f9e44; }
.cal { margin-top: 5px; font-size: 11px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; justify-content: center; }
.cal-pt { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal .ci { color: var(--mut); font-variant-numeric: tabular-nums; }
.cal .kap { color: var(--accent); font-family: ui-monospace, monospace; }
.cal .cal-n, .cal-run .cal-n { color: var(--mut); font-size: 10px; }
.tier-badge { font-size: 9px; font-weight: 700; letter-spacing: .03em; padding: 1px 6px; border-radius: 10px; white-space: nowrap; border: 1px solid var(--line); }
.tier-badge.owner { background: var(--surface2); color: var(--mut); }
.tier-badge.domain { background: #fff3d6; color: #8a5a00; border-color: #f1c21b; }
.tier-badge.clinical { background: #d6f0d8; color: #103d1a; border-color: #2f9e44; }
.cal-run { margin: 10px 0 0; padding: 8px 12px; background: var(--note-bg); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.cal-run .ci { color: var(--mut); }
.cal-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 10px 0 16px; }
.cal-stat-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.cal-stat-card .cs-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); }
.cal-stat-card .cs-v { font-size: 18px; font-weight: 700; margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
.cal-stat-card .cs-sub { font-size: 11.5px; color: var(--mut); }
.adj-overrides { margin-top: 16px; }
.adj-overrides h3 { font-size: 14px; margin: 0 0 6px; }
.adj-delta.pos { color: #196c2e; font-weight: 700; }
.adj-delta.neg { color: #a2191f; font-weight: 700; }
.jb-faith { fill: var(--accent); }
.jb-corr { fill: #d9730d; }
.jb-acc { fill: var(--accent); }
.jb-comp { fill: #2f9e44; }
.jb-rel { fill: #d9730d; }
.jh-title { font-size: 13px; margin: 16px 0 5px; color: var(--mut); }
table.jheat { border-collapse: collapse; font-size: 11px; }
.jheat th, .jheat td { border: 1px solid var(--line); padding: 3px 7px; text-align: center; }
.jheat th.jh-scen { text-align: left; font-weight: 400; font-family: ui-monospace, monospace; white-space: nowrap; }
.jh { cursor: pointer; font-variant-numeric: tabular-nums; }
.jh:hover { outline: 2px solid var(--accent); }
.jh-good { background: #d6f0d8; color: #103d1a; }
.jh-mid { background: #fdedc8; color: #5c4300; }
.jh-bad { background: #f6d2d2; color: #7d1a1a; }
.jh-na { color: #cbd5e1; }
.jh-note { margin-top: 8px; padding: 8px 10px; background: var(--note-bg); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--mut); min-height: 18px; }
.qband { display: grid; grid-template-columns: var(--qcol, 240px) 1fr; gap: 12px; align-items: start; border-top: 1px solid var(--line); padding: 12px 0; }
.qhead { position: sticky; left: 0; z-index: 1; background: var(--bg); align-self: start; }
.qhead .n { font-family: ui-monospace, monospace; font-weight: 700; color: var(--mut); }
.qhead .q { margin-top: 2px; }
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 1fr); gap: 12px; align-items: stretch; overflow-x: auto; min-height: 60px; scroll-behavior: smooth; }
.tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px; }
.tile.empty { color: var(--mut); align-items: center; justify-content: center; cursor: default; }
.tile-head { display: flex; gap: 6px; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; padding-right: 28px; }
.tile-head .backend { font-weight: 700; font-size: 12px; }
.tile-head .label { color: var(--mut); font-size: 11px; font-family: ui-monospace, monospace; }
.tile-jscore { font: 700 10.5px/1.3 ui-monospace, monospace; padding: 1px 6px; border-radius: 6px; margin-left: auto; white-space: nowrap; }
.tile-jscore.j-good { background: #d6f0d8; color: #103d1a; }
.tile-jscore.j-mid { background: #fdedc8; color: #5c4300; }
.tile-jscore.j-bad { background: #f6d2d2; color: #7d1a1a; }
.tile-jnote { margin-top: 6px; font-size: 11.5px; color: var(--mut); border-left: 2px solid var(--accent-bd); padding-left: 8px; }
.tile-jnote > summary { cursor: pointer; color: var(--accent); font-size: 11px; font-weight: 600; }
.tile-jnote-body { margin-top: 3px; color: var(--fg); white-space: normal; }
.jh-jump { display: inline-block; margin-top: 4px; color: var(--accent); font-weight: 600; text-decoration: none; font-size: 11.5px; }
.jh-jump:hover { text-decoration: underline; }
.detail-toggle[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-bd); }
.compact-tiles .tile:not(.expanded) .sources,
.compact-tiles .tile:not(.expanded) table.claims { display: none; }
.expand { font: 600 11px/1.2 ui-monospace, monospace; color: var(--accent); cursor: pointer; background: var(--accent-bg); border: 1px solid var(--accent-bd); border-radius: 6px; padding: 4px 11px; align-self: flex-start; margin-top: 6px; }
.expand:hover { background: var(--accent-hover); }
.ans { white-space: pre-wrap; max-height: 20em; overflow: auto; }
.tile.expanded .ans { max-height: none; }
.tile:has(.reviewdraft[open]) .ans { max-height: none; }
.ctags { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.ctag { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; color: #fff; cursor: default; }
.ctag.green { background: #196c2e; }
.ctag.yellow { background: #9e6a03; }
.ctag.red { background: #8b1a1a; }
.csec { margin: 8px 0 0; }
.ctitle { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.cchip { display: inline-block; padding: 1px 7px; border-radius: 10px; color: #fff; font-size: 10px; margin-left: 6px; vertical-align: middle; }
.caveat { border-radius: 6px; padding: 8px 10px; font-size: 12px; margin: 4px 0; }
.caveat.red { background: #fff1f1; border: 1px solid #da1e28; color: #a2191f; }
.caveat.yellow { background: #fcf4d6; border: 1px solid #f1c21b; color: #684e00; }
.collapse > summary { cursor: pointer; color: var(--accent); font-size: 11px; padding: 3px 0; }
.reviewdraft { margin-top: 8px; border-left: 3px solid #da1e28; padding-left: 10px; }
.reviewdraft > summary { cursor: pointer; color: var(--fg); font-size: 12px; font-weight: 650; padding: 4px 0; }
.reviewdraft > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reviewdraft-note { background: #fff1f1; color: #a2191f; font-size: 12px; padding: 7px 9px; margin: 4px 0; }
.reviewdraft.edited { border-left-color: #f1c21b; }
.reviewdraft.edited .reviewdraft-note { background: #fcf4d6; color: #684e00; }
.reviewrefs { margin-top: 8px; font-size: 11px; color: var(--mut); }
.reviewrefs ul { margin: 5px 0 0 18px; padding: 0; }
.reviewrefs li { margin: 4px 0; }
.reviewrefs li > span { margin-left: 4px; }
.reviewrefs details { margin-top: 2px; }
.reviewrefs summary { cursor: pointer; color: var(--accent); }
.reviewrefs pre { white-space: pre-wrap; margin: 3px 0 6px; }
.secbody { margin-top: 4px; }
.schip { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 10px; font-weight: 700; margin-left: 6px; vertical-align: middle; border: 1px solid var(--line); }
.schip.t-ok { background: #196c2e; border-color: #196c2e; color: #fff; }
.schip.t-warn { background: #9e6a03; border-color: #9e6a03; color: #fff; }
.schip.t-bad { background: #8b1a1a; border-color: #8b1a1a; color: #fff; }
.schip.t-neutral { background: var(--line); color: var(--mut); }
.sconf { font-size: 10px; color: var(--mut); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.snote { font-size: 12px; margin: 3px 0 5px; padding-left: 8px; border-left: 3px solid var(--line); }
.snote.t-bad { border-left-color: #da1e28; }
.snote.t-warn { border-left-color: #f1c21b; }
ul.findings { margin: 2px 0 6px; padding-left: 18px; font-size: 12px; }
ul.findings li { margin: 1px 0; }
.fwhere { color: var(--mut); }
.checkprec table.summary caption { text-align: left; color: var(--mut); font-size: 12px; padding: 4px 0; }
.checkprec-arms { margin: 8px 0; }
.secbody .md-list { margin: 0; padding-left: 20px; white-space: normal; }
.secbody .md-list li { margin: 3px 0; }
.secbody .md-p { margin: 0 0 4px; white-space: normal; }
.claim-mark { color: #8a3b00; }
.claim-guidance { color: var(--mut); }
table.claims { border-collapse: collapse; font-size: 11px; width: 100%; margin-top: 6px; white-space: normal; }
.claims td, .claims th { border: 1px solid var(--line); padding: 3px 6px; text-align: left; vertical-align: top; }
.claims th { color: var(--mut); font-weight: 400; }
.claims td.t-bad { color: #a2191f; }
.claims td.t-warn { color: #8a5a00; }
.claims td.t-ok { color: #196c2e; }
.claims td.t-neutral { color: var(--mut); }
.claims tr.marked td:first-child { box-shadow: inset 3px 0 0 #f1c21b; }
.creason { color: var(--mut); font-size: 10px; margin-top: 2px; }
.draftbox { margin-top: 8px; border-left: 3px solid var(--line); padding-left: 10px; }
.draftbox > summary { cursor: pointer; font-size: 12px; font-weight: 650; padding: 4px 0; }
.draftnote { color: var(--mut); font-size: 12px; margin: 2px 0 4px; }
.rawcheck { white-space: pre-wrap; font-size: 10px; }
.source-section { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px; background: var(--accent-bg); color: var(--accent); }
.source-status.warn { background: #fcf4d6; color: #684e00; }
.raw-refs { margin-top: 6px; color: var(--mut); font-size: 11px; }
.raw-refs summary { cursor: pointer; color: var(--mut); }
.refs { margin-top: 6px; }
.ref { display: inline-block; font-size: 10px; font-family: ui-monospace, monospace; background: var(--accent-bg); color: var(--accent); padding: 1px 4px; border-radius: 3px; margin: 1px; }
.more { color: var(--mut); font-size: 10px; }
.sources { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.sources-title { font-size: 11px; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.source-grid { display: grid; gap: 6px; }
.source-card { border: 1px solid var(--line); background: var(--surface2); border-radius: 7px; padding: 7px 8px; }
.source-head { display: flex; gap: 6px; align-items: baseline; font-size: 11px; }
.source-head b { color: var(--accent); font-family: ui-monospace, monospace; }
.source-meta { color: var(--mut); font-size: 10px; margin-top: 2px; }
.source-status { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px; background: var(--line); color: var(--mut); }
.source-status.ok { background: #e6f5ea; color: #196c2e; }
.source-status.bad { background: #fde8e8; color: #a01; }
.source-card ul { margin: 4px 0 0 16px; padding: 0; color: var(--fg); font-size: 11px; }
.source-card details { margin-top: 4px; color: var(--mut); }
.source-card summary { cursor: pointer; font-size: 10px; }
.source-card pre { white-space: pre-wrap; margin: 4px 0 0; font-size: 10px; color: var(--mut); }
.source-more { margin-top: 6px; }
.source-more > summary { cursor: pointer; color: var(--accent); font-size: 11px; }
.source-diag { margin-top: 5px; color: var(--mut); font-size: 10px; }
.err { color: var(--err); font-family: ui-monospace, monospace; font-size: 12px; }
.chips { margin-top: 6px; }
.chip { display: inline-block; font-size: 10px; font-family: ui-monospace, monospace; background: var(--surface2); color: var(--mut); padding: 1px 5px; border-radius: 3px; margin: 1px; }
.chip.warm { background: #fff3d6; color: #8a5a00; }
.chip.none { background: #fde8e8; color: #a01; }
.chip.bad { background: #a01; color: #fff; }
.tile-eval-footer { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; }
.tile-eval-pills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ev-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; font-family: ui-monospace, monospace; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface2); color: var(--fg); }
.ev-pill.pass, .ev-pill.ok { background: #e6f5ea; color: #196c2e; border-color: #a7d7b4; }
.ev-pill.warn { background: #fff3d6; color: #8a5a00; border-color: #f1c21b; }
.ev-pill.fail, .ev-pill.bad { background: #fde8e8; color: #a2191f; border-color: #f5b5b5; }
.ev-pill.human { background: #d6f0d8; color: #103d1a; border-color: #2f9e44; }
.tile-eval-drawer { margin-top: 6px; }
.tile-eval-drawer > summary { cursor: pointer; color: var(--accent); font-size: 11px; font-weight: 600; }
.tile-eval-body { margin-top: 6px; padding: 8px 10px; background: var(--note-bg); border: 1px solid var(--line); border-radius: 6px; font-size: 11.5px; line-height: 1.45; }
.tile-eval-body .ev-row + .ev-row { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.tile-eval-body .ev-k { font-weight: 700; color: var(--fg); }
.tile-eval-body .ev-note { color: var(--fg); margin-top: 4px; font-style: italic; }
table.ev-actors-tbl { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
table.ev-actors-tbl th, table.ev-actors-tbl td { border: 1px solid var(--line); padding: 3px 6px; text-align: left; }
.block { margin-top: 8px; }
.block-title { font-weight: 600; font-size: 12px; margin-bottom: 2px; }
.block-tbl th, .block-tbl td { font-size: 12px; padding: 4px 6px; }
.row-sources { margin-top: 3px; color: var(--mut); font-size: 10px; }
.row-sources span { display: inline-block; margin-left: 3px; padding: 0 4px; border-radius: 6px; background: var(--accent-bg); color: var(--accent); font-family: ui-monospace, monospace; }
.legend { color: var(--mut); font-size: 12px; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 12px; }
[data-hidden="1"] { display: none !important; }
.patient-banner { background: var(--banner-bg); border: 1px solid var(--accent-bd); border-radius: 8px; padding: 8px 14px; margin: 0 0 14px; font-size: 13px; }
.patient-banner .pt-id { font-family: ui-monospace, monospace; font-weight: 700; }
.patient-banner .pt-name { font-weight: 600; }
.patient-banner a { color: var(--accent); font-weight: 600; text-decoration: none; margin-left: 8px; }
.patient-banner a:hover { text-decoration: underline; }
.patient-banner .pt-block + .pt-block { margin-top: 8px; border-top: 1px solid var(--accent-bd); padding-top: 8px; }
.patient-banner .pt-head { font-size: 13px; }
.patient-banner .pt-demo { color: var(--mut); }
.patient-banner .pt-line { margin-top: 3px; font-size: 12px; color: var(--fg); }
.patient-banner .pt-lab { font-weight: 600; color: var(--mut); }
.patient-banner .pt-counts { color: var(--mut); }
.tile { position: relative; }
.tiles-wrap { position: relative; min-width: 0; }
.scroll-arrow { position: absolute; top: 0; bottom: 0; width: 30px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; z-index: 5; font-size: 15px; color: var(--accent); background: var(--arrow-bg); box-shadow: 0 0 8px rgba(0,0,0,.15); }
.scroll-arrow.left { left: -2px; } .scroll-arrow.right { right: -2px; }
.scroll-arrow.disabled { color: #cfcfcf; cursor: default; box-shadow: none; background: rgba(255,255,255,.4); pointer-events: none; }
.fs-btn { position: absolute; top: 8px; right: 8px; font-size: 12px; color: var(--accent); cursor: pointer; background: var(--accent-bg); border: 1px solid var(--accent-bd); border-radius: 6px; padding: 2px 7px; line-height: 1; }
.fs-btn:hover { background: var(--accent-hover); }
.fs-overlay { display: none; position: fixed; inset: 0; background: rgba(20,20,20,.55); z-index: 100; }
.fs-overlay.open { display: flex; align-items: center; justify-content: center; }
.fs-modal { background: var(--surface); width: 92vw; height: 92vh; border-radius: 12px; padding: 18px 24px; overflow: auto; box-shadow: 0 8px 40px rgba(0,0,0,.35); }
.fs-close { float: right; font: inherit; font-weight: 600; cursor: pointer; background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; }
.fs-body { clear: both; }
.fs-body .ans { max-height: none; overflow: visible; font-size: 15px; line-height: 1.6; }
pre.sql-code { background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-family: ui-monospace, monospace; font-size: 11.5px; overflow-x: auto; white-space: pre-wrap; margin: 6px 0; color: var(--fg); }

/* Scrollable wide data tables in Methodology & Speed sections so narrow viewports never clip */
main, #report, #report > section.rsec { min-width: 0; max-width: 100%; }
.det-section, .summary-section, .judge-section, .adjudication-section, .heatmap-wrap, .judge-heatmap-wrap, .consensus-detail { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 720px) {
  .topbar { padding: 10px 14px; position: static; }
  .answers-filters { position: static; }
  main { padding: 12px 14px 80px; }
  .arms-section { margin: 8px 0 0; }
  .topbar h1 { font-size: 16.5px; }
  .topbar-id .id-actions { width: 100%; flex-wrap: wrap; }
  .run-switcher { flex: 1 1 100%; min-width: 0; }
  .run-switcher select { max-width: 100%; width: 100%; min-width: 0; }
  .report-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .rtab-all { margin-left: 0; }
  .ov-block, .question-explorer { padding: 14px; }
  .ov-study-brief, .ov-hero-grid, .ov-cat-grid, .ov-diff-scores, .diff-qa-grid, .sd-cols, .speed-conc-grid { grid-template-columns: 1fr; }
  .qe-search, .answers-filters input[type=search] { min-width: 0; width: 100%; margin-left: 0; }
  .boxplot-wrap { min-width: 0; width: 100%; max-width: 100%; }
  .qband { grid-template-columns: 1fr; }
  .qhead { position: static; }
  .tiles { grid-auto-columns: minmax(min(300px, 84vw), 1fr); }
  .sdrawer { width: 100vw; }
  .legend-key { grid-template-columns: 1fr; gap: 2px; }
}

/* Smooth in-page jumps, but honour reduced-motion. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Print / Save-as-PDF: drop the interactive chrome, expand answers, keep tiles whole. */
@media print {
  .controls, .id-actions, .answers-filters, .sdrawer-backdrop { display: none !important; }
  #toc, .skip-link { display: none !important; }
  #report[data-active-tab] > [data-tab-group] { display: block !important; }
  .expand { display: none !important; }
  .topbar { position: static; }
  .answers-filters { position: static; }
  #report > section.rsec { scroll-margin-top: 0; break-inside: avoid-page; }
  .tiles { overflow: visible; }
  .tile { break-inside: avoid; }
  .ans { max-height: none !important; overflow: visible !important; }
  body { background: #fff; }
}