/* Shared styles for both UIs. Near-monochrome, one accent, no decoration.
   Theme switching: every color lives in a variable; [data-theme="dark"] on the
   root overrides them (toggle in api.js, stored in localStorage). */

:root {
  --bg: #f6f6f4;
  --panel: #ffffff;
  --ink: #1d1d1f;
  --muted: #6d6d70;
  --line: #e3e3df;
  --hover: #fafaf8;
  --frame: #ececea;
  --accent: #2450d6;
  --accent-strong: #1d43b4;
  --accent-soft: #eaeffc;
  --ok: #2e7d32;
  --ok-soft: #e7f2e8;
  --ok-line: #cbe2cd;
  --warn: #b26a00;
  --warn-soft: #f7eede;
  --warn-line: #ecd9b4;
  --bad: #c62828;
  --bad-soft: #f9e7e7;
  --bad-line: #ecc9c9;
  --neutral-soft: #efefec;
  --chip: #f1f1ee;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(20,20,25,0.04), 0 4px 16px rgba(20,20,25,0.05);
  --shadow-lift: 0 6px 24px rgba(20,20,25,0.12);
  --skeleton: linear-gradient(100deg, #ececea 30%, #f4f4f2 50%, #ececea 70%);
  /* coherence heat ramp, bad -> good */
  --q0-bg: #f6dadc; --q0-fg: #b0221f; --q0-line: #ecbdbe;
  --q1-bg: #f7e0d2; --q1-fg: #ab540d; --q1-line: #eccbb2;
  --q2-bg: #f4ecc6; --q2-fg: #856a0d; --q2-line: #e4d59a;
  --q3-bg: #e6efcb; --q3-fg: #5f7016; --q3-line: #d0e0a6;
  --q4-bg: #d6ebd4; --q4-fg: #2c7a33; --q4-line: #b4d8b1;
  --q5-bg: #c4e6c6; --q5-fg: #1c6a33; --q5-line: #9dd2a4;
  /* Topology identity: the independent variable keeps one tint everywhere.
     The four hues are categorical and sit OUTSIDE every semantic family
     (quality red-green, status, cost-amber, accent-blue) so a topology mark is
     never misread as a good/bad/cost signal. Monolithic is neutral grey — it is
     the no-coordination baseline; the three multi-agent topologies get colour. */
  --topo-monolithic-fg: #52606f; --topo-monolithic-bg: #eef1f4; --topo-monolithic-line: #d7dee5;
  --topo-independent-fg: #0d7a6f; --topo-independent-bg: #e4f3f1; --topo-independent-line: #c2e2dd;
  --topo-coarse-fg: #6d4fc4; --topo-coarse-bg: #efeafb; --topo-coarse-line: #dbd0f2;
  --topo-fine-fg: #b03a6e; --topo-fine-bg: #f9e7f0; --topo-fine-line: #eecbdd;
}

:root[data-theme="dark"] {
  --bg: #151517;
  --panel: #1e1e21;
  --ink: #e8e8ea;
  --muted: #9d9da3;
  --line: #323236;
  --hover: #242428;
  --frame: #2a2a2e;
  --accent: #7f9cf5;
  --accent-strong: #99b0f7;
  --accent-soft: #263252;
  --ok: #7cc47f;
  --ok-soft: #22321f;
  --ok-line: #3c5638;
  --warn: #dfa452;
  --warn-soft: #372c18;
  --warn-line: #5c4a26;
  --bad: #e57373;
  --bad-soft: #3a2222;
  --bad-line: #5e3535;
  --neutral-soft: #29292d;
  --chip: #252529;
  --shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.28);
  --shadow-lift: 0 6px 24px rgba(0,0,0,0.5);
  --skeleton: linear-gradient(100deg, #242428 30%, #2e2e33 50%, #242428 70%);
  --q0-bg: #3a2020; --q0-fg: #ea8a8a; --q0-line: #5e3232;
  --q1-bg: #392a1b; --q1-fg: #e0a266; --q1-line: #593f24;
  --q2-bg: #34301b; --q2-fg: #d3bd62; --q2-line: #524a26;
  --q3-bg: #2b331d; --q3-fg: #aecb6e; --q3-line: #445234;
  --q4-bg: #223021; --q4-fg: #82c985; --q4-line: #3a5638;
  --q5-bg: #1d3324; --q5-fg: #74cf90; --q5-line: #325640;
  --topo-monolithic-fg: #a2b2c2; --topo-monolithic-bg: #242b32; --topo-monolithic-line: #39444f;
  --topo-independent-fg: #6cc7ba; --topo-independent-bg: #17312d; --topo-independent-line: #2b5049;
  --topo-coarse-fg: #b49df2; --topo-coarse-bg: #272040; --topo-coarse-line: #423463;
  /* rose, deliberately not the dark --warn (#dfa452) it used to duplicate */
  --topo-fine-fg: #e488b0; --topo-fine-bg: #3a2130; --topo-fine-line: #5e3548;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3 { margin: 0 0 8px; font-weight: 600; }
h1 { font-size: 18px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
p { margin: 4px 0; }
a { color: var(--accent); text-decoration: none; }

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand { font-weight: 700; font-size: 16px; }
.topbar-end { margin-left: auto; }
.theme-toggle { padding: 4px 10px; font-size: 12.5px; color: var(--muted); }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a {
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topbar nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

main { max-width: 1180px; margin: 0 auto; padding: 20px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.card > h2 { margin-bottom: 12px; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grid { display: grid; gap: 12px; }

button {
  font: inherit;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: -3px;
}
h1 .icon, h2 .icon { margin-right: 6px; vertical-align: -2px; }
.status .icon { vertical-align: -3px; margin-right: 3px; }
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--panel); font-weight: 600; }
button.primary:hover { background: var(--accent-strong); }
button.danger { color: var(--bad); }
button.danger:hover { border-color: var(--bad); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary:disabled {
  /* stays readable in light theme: tinted background, accent text */
  opacity: 1;
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent);
}

input, select {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
button { transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.05s ease; }
button:active { transform: translateY(0.5px); }

label.check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }

.card { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.click { cursor: pointer; }
tr.click:hover { background: var(--hover); }

.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
  vertical-align: 2px;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.plain { background: var(--neutral-soft); color: var(--muted); }

/* The provider badge is a control: it picks which models answer and, with them,
   which runs every view shows. It stays a badge rather than becoming a form
   field, and a provider whose environment is incomplete stays listed and names
   what it lacks instead of vanishing from the menu. */
.provider { position: relative; display: inline-flex; }
.provider > button {
  padding: 2px 8px;
  border: 0;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  gap: 4px;
  background: var(--neutral-soft);
  color: var(--muted);
}
.provider > button:hover { background: var(--frame); }
/* Amber, the cost family: a live provider bills every run. */
.provider.billed > button { background: var(--warn-soft); color: var(--warn); }

.provider-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 244px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-lift);
  z-index: 6;
}
.provider-menu button {
  width: 100%;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  justify-content: flex-start;
  text-align: left;
  font-size: 12.5px;
}
.provider-menu button:hover:not(:disabled) { background: var(--hover); }
.provider-menu button:disabled {
  /* Readable, not faded: the row exists to be read, only not chosen. */
  opacity: 1;
  color: var(--muted);
  cursor: default;
}
.provider-menu .label { flex: 1; min-width: 0; }
.provider-menu .needs {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  white-space: normal;
}
.provider-menu .icon { flex: none; color: var(--accent); }

.status { font-weight: 600; font-size: 12.5px; }
.status.done { color: var(--ok); }
.status.running { color: var(--warn); }
.status.failed { color: var(--bad); }
.status.queued { color: var(--muted); }

/* Matrix */
.matrix-table { width: auto; }
.matrix-table th, .matrix-table td { border-bottom: none; padding: 5px 9px; }
.matrix-table thead th { padding-bottom: 2px; }
.matrix-table td { vertical-align: middle; }
.matrix-table tbody tr { border-bottom: 1px solid var(--line); }
.matrix-table tbody tr:last-child { border-bottom: none; }
.matrix-brief { font-size: 14px; padding-right: 22px; }
.cell-chips { display: flex; gap: 5px; }
.chip {
  width: 38px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--chip);
  color: var(--muted);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
  position: relative;
}
a.chip:hover, button.chip:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.13); z-index: 2; filter: saturate(1.2); }
a.chip:focus-visible, button.chip:focus-visible { outline-offset: 2px; }
/* An empty cell is the only way to start a single run, so it is a button and
   has to keep the grid's geometry rather than the button padding. */
button.chip { padding: 0; }
button.chip:disabled { opacity: 1; color: var(--line); }
.chip.running { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.chip.running .icon { animation: pulse 1.4s ease-in-out infinite; }
.chip.failed { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
@keyframes pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

/* Score heat ramp (coherence 0-5, integer buckets). q0 weak … q5 strong. */
.q0 { background: var(--q0-bg); border-color: var(--q0-line); color: var(--q0-fg); }
.q1 { background: var(--q1-bg); border-color: var(--q1-line); color: var(--q1-fg); }
.q2 { background: var(--q2-bg); border-color: var(--q2-line); color: var(--q2-fg); }
.q3 { background: var(--q3-bg); border-color: var(--q3-line); color: var(--q3-fg); }
.q4 { background: var(--q4-bg); border-color: var(--q4-line); color: var(--q4-fg); }
.q5 { background: var(--q5-bg); border-color: var(--q5-line); color: var(--q5-fg); }

/* A failed run keeps its stage: the artifacts it managed before breaking, the
   platforms it never reached as held slots, and the traceback in full. */
.rd-failure { margin-top: 14px; }
.rd-failure-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--bad);
  font-size: 12.5px;
  font-weight: 600;
}
.rd-failure-head .muted { color: var(--muted); font-weight: 400; }
.rd-art.missing { cursor: default; }
.rd-art.missing .frame {
  background: var(--frame);
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-missing-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; flex: 1; }
.progress > div { height: 100%; background: var(--accent); transition: width 0.3s; }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  cursor: zoom-out;
}
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: default; }
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: #f2f2f2;
  padding: 6px;
}

.toast {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 14px;
  border-radius: 8px;
  z-index: 40;
  font-weight: 600;
}
.toast button { padding: 4px 10px; background: transparent; color: inherit; border-color: var(--muted); }

details { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-top: 8px; }
details summary { cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--muted); }
details[open] summary { margin-bottom: 6px; }

.empty { padding: 28px; text-align: center; color: var(--muted); }
.empty .icon { display: block; margin: 0 auto 8px; opacity: 0.55; }
.empty p { margin: 0; }
a .icon { vertical-align: -2px; }
.error-note { color: var(--bad); padding: 8px 0; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

.svg-chart { display: block; }
.svg-chart text { font: 11px system-ui, sans-serif; fill: var(--muted); }
.svg-chart .lbl { font-weight: 600; fill: var(--ink); }
.svg-chart .grid { stroke: var(--line); }
.svg-chart .whisker { stroke: var(--muted); }
.svg-chart .iqr { fill: var(--accent-soft); stroke: var(--accent); }
.svg-chart .median { stroke: var(--accent); }
.svg-chart .pt { fill: var(--ink); fill-opacity: 0.35; }
.svg-chart .frontier-pt { fill: var(--accent); stroke: var(--accent-strong); }
.svg-chart .dominated-pt { fill: var(--neutral-soft); stroke: var(--muted); }
.svg-chart .curve { stroke: var(--accent); fill: none; }
.svg-chart .pt-val { fill: var(--ink); font-weight: 700; font-size: 10px; }
.curve-legend { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.curve-legend span { display: inline-flex; align-items: center; gap: 5px; }
.curve-legend .cl-mark { overflow: visible; }
.svg-chart .proxy { stroke: var(--muted); fill: none; }
.svg-chart .dot { fill: var(--panel); stroke: var(--accent); }
.svg-chart .dot-delivered { fill: var(--accent); stroke: var(--accent); }
.svg-chart .best-ring { fill: none; stroke: var(--warn); }

/* ============================================================
   Rater UI — one task per screen, structured, never a text wall.
   Persistent progress, a scannable brief with product image, and
   working screens sized to a single viewport.
   ============================================================ */
/* Wide enough that a set — a square post, a portrait story and a landscape
   banner side by side — uses the height a viewport can spare instead of being
   width-starved; the intro and done cards stay narrow and centred regardless. */
.rater-shell { max-width: 1700px; margin: 0 auto; padding: 12px 16px 16px; }

/* progress */
.rv-progress { margin-bottom: 12px; }
.rv-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rv-phase { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }
.rv-part-tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 2px 7px; }
.rv-count { font-size: 13px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-count-tot { color: var(--muted); font-weight: 500; }
.rv-track { height: 7px; border-radius: 4px; background: var(--neutral-soft); overflow: hidden; }
.rv-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .35s cubic-bezier(.4,0,.2,1); }

/* stage: brief | work */
.rv-stage { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 16px; align-items: start; }
.rv-enter { animation: rv-in .22s ease; }
@keyframes rv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* brief panel */
.rv-brief { position: sticky; top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 12px; display: flex; flex-direction: column; gap: 11px; max-height: calc(100dvh - var(--topbar-h) - 82px); overflow: auto; }
/* fade cue only appears when the brief actually overflows and can scroll */
.rv-brief::after { content: ""; position: sticky; bottom: -12px; height: 20px; margin: -20px -12px -12px; background: linear-gradient(transparent, var(--panel)); pointer-events: none; flex: none; }
.rv-product { border-radius: 8px; overflow: hidden; background: var(--bg); aspect-ratio: 4/3; padding: 8px; }
/* Packshots are cut-outs on transparency, from square to very tall; contain
   shows the whole product, cover would slice the tall ones. */
.rv-product img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rv-brand { font-size: 16px; font-weight: 750; line-height: 1.15; }
.rv-pname { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.rv-bbody { display: flex; flex-direction: column; gap: 9px; }
.rv-brow { display: grid; grid-template-columns: 74px 1fr; gap: 8px; }
.rv-bk { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.rv-bv { font-size: 12.5px; line-height: 1.45; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rv-chip { font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 2px 8px; }
.rv-chip.no { background: var(--bad-soft); color: var(--bad); text-decoration: line-through; text-decoration-thickness: 1px; }

/* A/B compare — set A above set B. The whole card is the choice: click it to
   pick that set. No buttons, so the artifacts get nearly the full stage; the
   grey footer names the choice and the card lifts on hover. */
/* The set is one row of aspect-proportional columns (--cols from rater.js), so
   the frames share a height and each hugs its artifact. Width drives that
   height, so the card is capped at the height two stacked sets can spare —
   never a fixed frame height, which a wide set (a landscape banner beside a
   portrait story) overflows, and flex then squeezes every frame out of shape.
   The cap adds the card's own 28px padding and the row's 20px of gaps. */
:root { --set-h: clamp(150px, calc((100dvh - 272px) / 2), 460px); }
.rv-compare { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.rv-setcard { position: relative; width: 100%; max-width: calc(var(--set-h) * var(--sumar, 3.1667) + 48px); border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 14px; cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.rv-setcard:hover { border-color: var(--accent); box-shadow: 0 8px 26px rgba(0,0,0,.28); transform: translateY(-2px); }
.rv-setcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv-setcard.busy { pointer-events: none; opacity: .55; }
.rv-setcard-arts { display: grid; grid-template-columns: var(--cols, repeat(3, 1fr)); gap: 10px; align-items: start; }
.rv-choose { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; color: var(--muted); font-weight: 650; font-size: 14px; transition: color .14s ease; }
.rv-setcard:hover .rv-choose { color: var(--accent); }
.rv-choose .rv-kbd { border-color: currentColor; color: inherit; }

/* one artifact tile — the frame carries the platform aspect ratio */
.rv-art { display: flex; flex-direction: column; min-width: 0; }
.rv-frame { position: relative; aspect-ratio: var(--ar, 1); border-radius: 7px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.rv-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.rv-zoom { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 9px; background: rgba(14,16,20,.74); color: #fff; border: 1px solid rgba(255,255,255,.28); font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .12s ease; cursor: zoom-in; }
.rv-frame:hover .rv-zoom { opacity: 1; }

.rv-kbd { font: 600 12px/1 var(--mono); border: 1px solid var(--muted); border-radius: 5px; padding: 3px 6px; min-width: 16px; text-align: center; color: var(--muted); display: inline-block; }

/* rubric rating */
/* Same width-driven row as the A/B card; here one set shares the screen with
   the three rubric scales, so the height budget is what they leave over. */
:root { --rate-h: clamp(120px, calc(100dvh - 560px), 460px); }
.rv-rate { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rv-rate-arts { display: grid; grid-template-columns: var(--cols, repeat(3, 1fr)); gap: 14px; align-items: start;
  width: 100%; max-width: calc(var(--rate-h) * var(--sumar, 3.1667) + 28px); }
.rv-pillars { display: flex; flex-direction: column; }
.rv-pillar { padding: 13px 0; border-bottom: 1px solid var(--line); }
.rv-pillar:last-child { border-bottom: 0; }
.rv-pillar-head { margin-bottom: 9px; }
.rv-pillar-head strong { font-size: 14px; }
.rv-pillar-d { font-size: 12px; color: var(--muted); margin-left: 8px; }
.rv-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 430px; }
.rv-seg { height: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-weight: 650; font-size: 14px; cursor: pointer; transition: border-color .1s, color .1s, background .1s; }
.rv-seg:hover { border-color: var(--accent); color: var(--accent); }
.rv-seg.sel { background: var(--accent); color: #fff; border-color: var(--accent); }
.rv-scale-ends { display: flex; justify-content: space-between; max-width: 430px; margin-top: 5px; font-size: 11px; color: var(--muted); }
.rv-scale-two { grid-template-columns: repeat(2, 1fr); max-width: 210px; }
.rv-rate-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.rv-submit { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; font-size: 14px; font-weight: 700; border-radius: 9px; background: var(--accent); color: #fff; border: 1px solid var(--accent); cursor: pointer; }
.rv-submit:disabled { opacity: .45; cursor: default; }
.rv-note { font-size: 12px; color: var(--muted); }

/* intros / code / done — centred cards, structured not prose */
.rv-center { display: grid; place-items: center; min-height: calc(100dvh - var(--topbar-h) - 36px); }
.rv-intro { max-width: 520px; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 30px; box-shadow: var(--shadow); }
.rv-intro-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.rv-intro h1 { margin: 0 0 6px; font-size: 24px; }
.rv-intro-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; line-height: 1.5; }
.rv-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.rv-step { display: flex; gap: 12px; align-items: flex-start; }
.rv-step-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.rv-step-t { font-weight: 650; font-size: 14px; }
.rv-step-d { font-size: 12.5px; color: var(--muted); margin-top: 1px; line-height: 1.4; }
.rv-kbdhint { font-size: 12px; color: var(--muted); margin-bottom: 20px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rv-start:hover { filter: brightness(1.06); }
.rv-start { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; font-size: 15px; font-weight: 700; border-radius: 10px; background: var(--accent); color: #fff; border: 1px solid var(--accent); cursor: pointer; }
.rv-code-row { display: flex; gap: 10px; margin-top: 16px; }
.rv-code-input { flex: 1; text-transform: uppercase; font-family: var(--mono); font-size: 18px; text-align: center; letter-spacing: 3px; padding: 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); }
.rv-done { text-align: center; }
.rv-done-check { color: var(--ok); display: flex; justify-content: center; margin-bottom: 6px; }
.rv-done-stats { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.rv-done-stat { border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; }
.rv-done-n { display: block; font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.rv-done-l { font-size: 11.5px; color: var(--muted); }

@media (max-width: 1000px) {
  .rv-stage { grid-template-columns: 1fr; }
  .rv-brief { position: static; max-height: none; }
  .rv-setcard-arts { flex-wrap: wrap; }
}

/* ============================================================
   Polish layer: depth, motion, drill-down, charts, dialogs.
   ============================================================ */

.card { box-shadow: var(--shadow); }
h1 { letter-spacing: -0.01em; }
.section-note { color: var(--muted); font-size: 12.5px; max-width: 70ch; margin: 2px 0 12px; }

/* Charts scale to their container; fixed pixel widths were clipping. */
.svg-chart { display: block; width: 100%; height: auto; max-width: 100%; }
.chart-hold { min-width: 0; }

/* --- Matrix legend --- */

.mx-foot .ramp { display: flex; align-items: center; gap: 8px; }
.ramp-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.ramp-bar > i { width: 20px; }
.mx-foot .glyphs { display: flex; gap: 14px; align-items: center; }
.mx-foot .glyphs span { display: inline-flex; align-items: center; gap: 5px; }

/* --- Progress / active job --- */
.jobcard { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--accent-soft); background: var(--accent-soft); border-radius: 8px; }
.jobcard .spin { color: var(--accent); display: inline-flex; }
.jobcard .spin .icon { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Tooltip (hover on chips, points) --- */
.tt { position: fixed; z-index: 60; pointer-events: none; background: var(--ink); color: var(--bg);
  padding: 7px 10px; border-radius: 7px; font-size: 12px; line-height: 1.4; box-shadow: var(--shadow-lift);
  max-width: 280px; opacity: 0; transform: translateY(3px); transition: opacity 0.1s ease, transform 0.1s ease; }
.tt.show { opacity: 1; transform: translateY(0); }
.tt b { color: var(--bg); }
.tt .k { opacity: 0.7; }
/* The brief cue's hover card carries the whole brief, so it lifts the shared
   tooltip's line-length cap for this content only. A card this size reads as a
   panel, not as a label: it keeps the theme's own surface instead of the
   inverted tooltip fill. Sizes are fixed, and the packshot sits in a reserved
   box: the card must not resize after the tooltip has been placed. */
.tt:has(.tt-brief) { max-width: none; padding: 12px 13px; background: var(--panel);
  color: var(--ink); border: 1px solid var(--line); }
.tt-brief { width: 480px; }
.tb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.tb-shot { flex: none; width: 84px; height: 100px; border-radius: 7px;
  background: var(--frame); padding: 5px; }
.tb-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tb-name { min-width: 0; }
.tb-brand { font-size: 15px; font-weight: 750; line-height: 1.15; }
.tb-product { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tb-body { display: flex; flex-direction: column; gap: 7px; }
.tb-row { display: grid; grid-template-columns: 124px 1fr; gap: 10px; align-items: start; }
.tb-k { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); padding-top: 2px; }
.tb-v { font-size: 12px; line-height: 1.4; }
.tb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-chip { font-size: 11px; font-weight: 600; border-radius: 5px; padding: 1px 7px;
  background: var(--ok-soft); color: var(--ok); }
.tb-chip.no { background: var(--bad-soft); color: var(--bad);
  text-decoration: line-through; text-decoration-thickness: 1px; }

/* --- Run detail: sibling nav + breadcrumb --- */
.crumb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; margin-bottom: 10px; flex-wrap: wrap; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.crumb .sep { opacity: 0.5; }
.repnav { display: inline-flex; gap: 4px; align-items: center; }
/* only reps get the button box; the word "rep" is a label, not an affordance */
.repnav a, .repnav .ghost { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel); }
.repnav a:hover { border-color: var(--muted); color: var(--ink); }
.repnav a.cur { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.repnav .ghost { opacity: 0.4; }
.repnav .lbl { color: var(--muted); font-size: 11.5px; margin-right: 3px; }
.supersede { color: var(--warn); font-size: 12px; }

.mini-badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; background: var(--neutral-soft); color: var(--muted); white-space: nowrap; }
.mini-badge.good { background: var(--ok-soft); color: var(--ok); }
.mini-badge.bad { background: var(--bad-soft); color: var(--bad); }
/* VIEScore carries the same quality heat as the rail hero it drills into, so a
   strong artifact reads green and a weak one reads warm — never a flat grey. */
.mini-badge.q0 { background: var(--q0-bg); color: var(--q0-fg); }
.mini-badge.q1 { background: var(--q1-bg); color: var(--q1-fg); }
.mini-badge.q2 { background: var(--q2-bg); color: var(--q2-fg); }
.mini-badge.q3 { background: var(--q3-bg); color: var(--q3-fg); }
.mini-badge.q4 { background: var(--q4-bg); color: var(--q4-fg); }
.mini-badge.q5 { background: var(--q5-bg); color: var(--q5-fg); }

.checks { display: grid; gap: 5px; }
.check-line { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: baseline; font-size: 12.5px; padding: 2px 0; }
.check-line.fail { background: var(--bad-soft); border-radius: 6px; padding: 5px 8px; margin: 0 -8px; }

/* --- Trace: Gantt + expandable payload rows --- */
.gantt { width: 100%; }
.gantt-row { display: grid; grid-template-columns: 150px 1fr 58px; gap: 10px; align-items: center; padding: 3px 4px; border-radius: 5px; }
.gantt-row.click { cursor: pointer; }
.gantt-row.click:hover { background: var(--hover); }
.gantt-row.click:hover .gantt-bar { filter: brightness(1.09); }
.gantt-row .who { font-family: var(--mono); font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-track { position: relative; height: 20px; background: var(--neutral-soft); border-radius: 5px; }
.gantt-bar { position: absolute; top: 2px; height: 16px; border-radius: 4px; display: flex; align-items: center; padding: 0 6px;
  font-size: 10.5px; color: #fff; overflow: hidden; white-space: nowrap; cursor: default; transition: filter 0.1s ease; }
.gantt-bar:hover { filter: brightness(1.08); }
.gantt-bar.production { background: var(--accent); }
.gantt-bar.coordination { background: var(--warn); }
.gantt-bar.image { background: #7d8aa8; }
.gantt-dur { font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.gantt-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); margin: 4px 0 12px; }
.gantt-legend .k { display: inline-flex; align-items: center; gap: 5px; }
.gantt-legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.trace-table tr.trace-row { cursor: pointer; }
.trace-table tr.trace-row.flash > td { animation: rowflash 0.9s ease; }
@keyframes rowflash { 0%, 100% { background: transparent; } 30% { background: var(--accent-soft); } }
.trace-table tr.trace-row:hover { background: var(--hover); }
.trace-table .chevcell { width: 24px; color: var(--muted); }
.trace-table tr.trace-row .icon { transition: transform 0.12s ease; }
.trace-table tr.trace-row.open .chev { transform: rotate(90deg); }
.payload-cell { padding: 0 !important; }
.payload { padding: 12px 14px; background: var(--bg); border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.payload h4 { margin: 0 0 5px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.code-block { font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; max-height: 320px; overflow: auto; }
.code-block .sec { color: var(--accent); font-weight: 600; }
.code-block.json .k { color: var(--accent); }
.code-block.json .s { color: var(--ok); }
.code-block.json .n { color: var(--warn); }
.copy-mini { font-size: 11px; padding: 2px 8px; border-radius: 6px; color: var(--muted); }


/* --- Sortable table headers --- */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
th.sortable .icon { opacity: 0.9; vertical-align: -2px; }
/* Metric value tinted by goodness (direction-aware); outliers pop red/green,
   the mid of the field stays near-neutral so only the tails draw the eye. */
.heatnum { font-variant-numeric: tabular-nums; font-weight: 650; }
.heatnum.q0 { color: var(--q0-fg); } .heatnum.q1 { color: var(--q1-fg); }
.heatnum.q2 { color: var(--q2-fg); } .heatnum.q3 { color: var(--q3-fg); }
.heatnum.q4 { color: var(--q4-fg); } .heatnum.q5 { color: var(--q5-fg); }
.runid-cell { display: inline-flex; align-items: center; gap: 8px; }
.tag { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 5px; background: var(--neutral-soft); color: var(--muted); }
/* The coherence tag is the list's headline metric — it must carry the heat, not
   sit grey while every other column is coloured. Two-class specificity beats the
   plain .tag background above. */
.tag.q0 { background: var(--q0-bg); color: var(--q0-fg); }
.tag.q1 { background: var(--q1-bg); color: var(--q1-fg); }
.tag.q2 { background: var(--q2-bg); color: var(--q2-fg); }
.tag.q3 { background: var(--q3-bg); color: var(--q3-fg); }
.tag.q4 { background: var(--q4-bg); color: var(--q4-fg); }
.tag.q5 { background: var(--q5-bg); color: var(--q5-fg); }

/* --- Modal dialog (replaces native alert/confirm/prompt) --- */
.modal-back { position: fixed; inset: 0; background: rgba(15,15,18,0.5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 70; opacity: 0; transition: opacity 0.12s ease; }
.modal-back.show { opacity: 1; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift);
  width: min(440px, 92vw); padding: 20px; transform: translateY(6px) scale(0.99); transition: transform 0.12s ease; }
.modal-back.show .modal { transform: none; }
.modal h3 { font-size: 16px; margin-bottom: 8px; }
.modal p { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; }
.modal input { width: 100%; margin-bottom: 14px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 10px; }

/* --- Skeleton loading --- */
.skel { border-radius: 8px; background: var(--skeleton); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-row { height: 34px; margin-bottom: 8px; }
.skel-card { height: 96px; }
@media (prefers-reduced-motion: reduce) {
  .skel, .chip.running .icon, .jobcard .spin .icon, .gantt-bar { animation: none; }
  a.chip:hover { transform: none; }
}

/* SVG chart point affordance */
.svg-chart .hit { cursor: pointer; }
.svg-chart a { cursor: pointer; }
.svg-chart .lbl-link { fill: var(--accent); cursor: pointer; }

/* ============================================================
   Run detail: results-led. The mock artifacts are a compact
   reference strip (click to enlarge); the verdict and metrics
   own the space below, with the per-artifact breakdown in full.
   ============================================================ */

:root { --topbar-h: 47px; }
.topbar { height: var(--topbar-h); }

/* Cockpit: height follows content (no forced 100vh belly); two columns —
   artifacts (stage) + drawer on the left, the verdict rail on the right at the
   same top edge. align-items:start so neither column stretches into empty. */
/* Cap the reading width: the left column holds a set ~410px tall (1335px wide
   at the set's 3.1667 total aspect) plus the card, the gap and the rail, so the
   artifacts fill their column with no internal margin and an ultrawide's surplus
   becomes clean symmetric page margin (centred via main's margin:auto) instead
   of a well on each side of the set. Wider would only stretch the trace below
   them: the set is what earns the width, and it is a wide, low strip. */
main.cockpit { max-width: 1740px; min-height: calc(100dvh - var(--topbar-h)); padding: 12px 16px; }
.rd { display: grid; grid-template-columns: minmax(0, 1fr) 356px; grid-template-rows: auto auto; gap: 12px; align-items: start; }
.rd .card { margin-bottom: 0; }
.rd-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; }
.rd-head .crumb { margin-bottom: 0; }
.rd-head .actions { margin-left: auto; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.rd-head .actions button { padding: 4px 10px; font-size: 12px; }
.rd-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Stage — the artifact set is the subject; it fills the stage width, columns
   sized by each platform's aspect so every frame hugs its artifact (no
   letterbox wells), capped in height so an ultrawide doesn't blow them up. */
.rd-stage { display: flex; flex-direction: column; }
.rd-stage-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; min-height: 28px; }
.rd-stage-head h2 { margin: 0; }
.rd-stage-head .brief-cue { color: var(--muted); font-size: 12.5px; border-bottom: 1px dotted var(--muted); cursor: help; }
.rd-gallery { display: block; }
.rd-arts { display: grid; grid-template-columns: var(--cols, repeat(3, 1fr)); gap: 12px; align-items: start;
  width: 100%; max-width: calc(var(--art-h, 500px) * var(--sumar, 3.1667)); margin: 0 auto; }
.rd-art { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.rd-art:hover { border-color: var(--muted); }
.rd-art.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.rd-art .frame { aspect-ratio: var(--ar, 1); width: 100%; position: relative; background: var(--frame); }
.rd-art .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rd-art .zoom { position: absolute; right: 6px; top: 6px; opacity: 0; transition: opacity 0.12s ease; background: rgba(20,20,20,0.6); color: #fff; border: none; border-radius: 6px; padding: 4px 6px; }
.rd-art .frame:hover .zoom { opacity: 1; }
/* Wraps rather than truncates: the narrow story tile cannot fit its label next
   to the score chips, and a clipped platform name is worse than a second line.
   Every footer reserves both lines, so one tile wrapping does not leave the set
   with three different bottom edges. */
.rd-art .foot { border-top: 1px solid var(--line); padding: 7px 9px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; font-size: 12px; min-height: 54px; }
.rd-art .foot .name { font-weight: 600; display: inline-flex; gap: 5px; align-items: center; }
.rd-art .foot .chips { margin-left: auto; display: inline-flex; gap: 4px; flex-shrink: 0; }

/* Verdict rail — sized to its content, never stretched to an empty belly */
.rd-rail { display: flex; flex-direction: column; gap: 10px; }
.rp { display: grid; grid-template-columns: 112px 1fr 22px; gap: 9px; align-items: center; padding: 4px 0; cursor: pointer; border-radius: 5px; }
.rp:hover .pname { color: var(--accent); }
.rp .pname { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.rp .pname .chev { transition: transform 0.12s ease; flex-shrink: 0; }
.rp.open .pname .chev { transform: rotate(90deg); }
.rp .bar { height: 6px; border-radius: 3px; background: var(--neutral-soft); overflow: hidden; }
.rp .bar span { display: block; height: 100%; border-radius: 3px; }
.rp .val { text-align: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-just { font-size: 11.5px; color: var(--muted); padding: 1px 0 7px 20px; }

.rd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-tile { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 6px; min-width: 0; }
.rd-tile .k { font-size: 11px; color: var(--muted); display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.rd-tile .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.rd-tile .v .u { font-size: 10.5px; color: var(--muted); font-weight: 600; margin-left: 3px; }

/* Rail drill-down: selected artifact. Structure from the hero + axis groups +
   status row, not a ladder of grey headings. */
.rail-sep { border: 0; border-top: 1px solid var(--line); margin: 10px 0 0; }

/* The artifact panel is its own card stacked above the set-verdict card (they
   never share a background), wearing the accent selection outline of its stage
   tile — so the two scopes read as two things, not one panel whose numbers
   silently swapped. */
.rd-setcard { display: flex; flex-direction: column; gap: 10px; }
.rd-artpanel {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
/* Scope labels: the panel carries an "Artifact" chip; the set section below
   gets a matching label once a drill-down is open, so neither is mistaken
   for the other. */
.rd-panel-head .scope-tag,
.rail-scope {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent);
}
.rd-panel-head .scope-tag { padding: 1px 6px; border: 1px solid var(--accent-soft); border-radius: 4px; }
.rail-scope { color: var(--muted); margin: 2px 0 -2px; }
.rd-panel-head { display: flex; align-items: center; gap: 7px; }
.rd-panel-head .t { font-weight: 650; font-size: 13.5px; display: inline-flex; gap: 7px; align-items: center; }
.rd-panel-head .x { margin-left: auto; padding: 3px 7px; color: var(--muted); border: none; background: transparent; }
.rd-panel-head .x:hover { color: var(--ink); background: var(--hover); border: none; }

/* Round scrubber (segmented; dot = delivered round) */
.rseg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.rseg button { border: none; border-radius: 0; padding: 3px 11px 6px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel); position: relative; }
.rseg button + button { border-left: 1px solid var(--line); }
.rseg button:hover { color: var(--ink); }
.rseg button.on { background: var(--accent); color: #fff; }
.rseg button .dot { position: absolute; bottom: 2.5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.rd-hero { border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; display: flex; align-items: center; gap: 14px; }
.rd-hero > div:first-child { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.rd-hero .v { font-size: 33px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.rd-hero .of { font-size: 12px; font-weight: 600; opacity: 0.65; }
/* Analytics hero (set-coherence): kicker + big number on the left, standing
   chips on the right. `.hero-c` rules sit later than `.rd-hero > div:first-child`
   with higher specificity, so the block layout wins. Chips take the quality
   tint from currentColor, so they read on any card colour. */
.rd-hero.hero-c { align-items: flex-start; justify-content: space-between; gap: 12px; }
.rd-hero.hero-c > div:first-child { display: block; white-space: normal; }
.hero-c .hero-kick { font-size: 10px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; opacity: 0.72; }
.hero-c .hero-fig { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
.hero-c .hero-fig .v { font-size: 40px; }
.hero-c .hero-fig .of { font-size: 15px; }
.hero-c .hero-chips { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; padding-top: 3px; flex-shrink: 0; }
.hero-c .hero-chip { font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 2px 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); background: color-mix(in srgb, currentColor 12%, transparent); }
.rd-hero .sub { font-size: 11.5px; opacity: 0.8; margin-top: 2px; }
.rd-hero.muted-hero { background: var(--neutral-soft); color: var(--muted); }
.rd-hero.big { padding: 16px 18px; gap: 18px; }
.rd-hero.big .v { font-size: 46px; }
/* the shorthand above resets border-color, so re-apply the ramp's line tone */
.rd-hero.q0 { border-color: var(--q0-line); } .rd-hero.q1 { border-color: var(--q1-line); }
.rd-hero.q2 { border-color: var(--q2-line); } .rd-hero.q3 { border-color: var(--q3-line); }
.rd-hero.q4 { border-color: var(--q4-line); } .rd-hero.q5 { border-color: var(--q5-line); }

.limit-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: var(--warn-soft); color: var(--warn); flex-shrink: 0; }

.dist { display: block; margin-top: 2px; }
.dist .base { stroke: var(--line); }
.dist .tick { stroke: var(--muted); opacity: 0.38; }
.dist .me { stroke: var(--accent); stroke-width: 2; }
.dist .me-dot { fill: var(--accent); }

/* Per-artifact VIEScore axis groups (semantic consistency / perceptual quality) */
.axis-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 650; margin: 10px 0 3px; }
.axis-head .amin { font-size: 10.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.axis-head .amin.binding { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.spec-row { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; margin-top: 12px; }
.spec-row.ok { color: var(--ok); }
.spec-row.bad { color: var(--bad); }
.sub10 { display: grid; grid-template-columns: 108px 1fr 22px; gap: 9px; align-items: center; padding: 3px 0; }
.sub10 .sname { font-size: 12px; }
.sub10 .bar { height: 6px; border-radius: 3px; background: var(--neutral-soft); overflow: hidden; }
.sub10 .bar span { display: block; height: 100%; border-radius: 3px; }
.sub10 .val { text-align: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rationale { font-size: 11.5px; color: var(--muted); margin: 0 0 6px; padding-left: 0; }

/* Drill drawer: execution & rounds live here, not in the scroll flow */
.rd-drawer { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; padding: 8px 14px; }
.rd-drawer.open { padding-bottom: 12px; }
.drawbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 30px; }
.tabbtn { border: none; background: transparent; color: var(--muted); font-weight: 600; font-size: 12.5px; padding: 5px 10px; border-radius: 6px; }
.tabbtn:hover { background: var(--hover); color: var(--ink); border: none; }
.tabbtn.on { background: var(--accent-soft); color: var(--accent); }
.drawbar .sum { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.sharebar { display: inline-flex; height: 8px; width: 132px; border-radius: 4px; overflow: hidden; background: var(--neutral-soft); }
.sharebar i { height: 100%; }
.rd-drawer .body { display: none; }
.rd-drawer.open .body { display: block; overflow: auto; max-height: 60vh; margin-top: 8px; }

/* Rounds: a focused, capped, centred panel — the curve is small data, so its
   flanking space is deliberate margin, not a stretched void. */
.rounds-panel { max-width: 720px; margin: 6px auto; display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; }
.rounds-chart { min-width: 0; }
.rounds-side { display: flex; flex-direction: column; gap: 12px; }
.rounds-facts { display: flex; gap: 10px; flex-wrap: wrap; }
.rounds-facts .rf { border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; min-width: 84px; }
.rounds-facts .rf .k { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rounds-facts .rf .v { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .rounds-panel { grid-template-columns: 1fr; } }

/* Narrow windows: one column, artifacts stack, natural height */
@media (max-width: 1080px) {
  .rd { display: flex; flex-direction: column; }
  .rd-arts { grid-template-columns: 1fr; max-width: none; }
}

/* ============================================================
   Matrix board: grid on top, per-topology leaderboard below.
   ============================================================ */

.matrix-wrap { display: block; overflow-x: auto; }

/* Leaderboard: one card per topology, grid-column order preserved. The card
   with the top coherence median carries an accent ring — the winner, at a
   glance; each metric's best value is accented in place. */
.lb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.lb-card { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--panel);
  color: inherit; border-top: 3px solid var(--tc-line); transition: box-shadow 0.12s ease, transform 0.05s ease; }
.lb-card:hover { box-shadow: var(--shadow); }
.lb-card:active { transform: translateY(0.5px); }
.lb-card.frontier { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lb-front { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--accent); cursor: help; }
.lb-coh { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 12px; flex-wrap: wrap; }
.lb-big { font-size: 30px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; padding: 1px 9px; border-radius: 7px; }
.lb-big.muted { background: var(--neutral-soft); color: var(--muted); }
.lb-unit { font-size: 11px; color: var(--muted); }
.lb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.lb-stat { display: flex; flex-direction: column; gap: 1px; }
.lb-stat .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.lb-stat .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-stat.win .v { color: var(--accent); font-weight: 750; }
.lb-stat.win .k { color: var(--accent); }
/* Spec is off the Pareto axes (Analysis): context only, never marked a winner. */
.lb-stat.off-axis .v { color: var(--muted); font-weight: 600; }
@media (max-width: 900px) { .lb { grid-template-columns: repeat(2, 1fr); } }

/* Topology identity chip (glyph + tint), one look across every surface */
.topo-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 6px;
  background: var(--tc-bg); color: var(--tc-fg); border: 1px solid var(--tc-line); white-space: nowrap; }
.topo-chip.bare { background: transparent; border-color: transparent; padding: 0; font-size: 12.5px; }
.topo-monolithic { --tc-fg: var(--topo-monolithic-fg); --tc-bg: var(--topo-monolithic-bg); --tc-line: var(--topo-monolithic-line); }
.topo-independent { --tc-fg: var(--topo-independent-fg); --tc-bg: var(--topo-independent-bg); --tc-line: var(--topo-independent-line); }
.topo-coarse { --tc-fg: var(--topo-coarse-fg); --tc-bg: var(--topo-coarse-bg); --tc-line: var(--topo-coarse-line); }
.topo-fine { --tc-fg: var(--topo-fine-fg); --tc-bg: var(--topo-fine-bg); --tc-line: var(--topo-fine-line); }
.mx-foot { display: flex; gap: 22px; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
.tt .thumbs { display: flex; gap: 4px; margin-top: 7px; }
.tt .thumbs img { height: 52px; border-radius: 4px; display: block; background: rgba(127,127,127,0.25); }

/* Runs list: every row anchored to its artifact set */
/* Shared height, width from the platform's aspect: square thumbs cropped the
   portrait story and the landscape banner into the same shape and hid the
   format difference the set is built on (concept/02). `contain` so nothing is
   cut. */
.run-thumbs { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.run-thumbs img { height: 32px; width: calc(32px * var(--ar, 1)); object-fit: contain; border-radius: 4px; border: 1px solid var(--line); background: var(--frame); }
.run-thumbs .none { height: 32px; width: calc(32px * var(--ar, 1)); border-radius: 4px; border: 1px dashed var(--line); opacity: 0.5; }

/* ============================================================
   Result panels: one stat unit, diverging bars, win-rate rows.
   Shared by Review and Analysis so both read as one system.
   ============================================================ */

/* Stat: label over value, tiles wrap to fill the row */
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.stat { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: var(--panel); min-width: 0; }
.stat .sl { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.stat .sv { font-size: 13px; }
.stat .sv strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.stat .sv.warn-sv { color: var(--warn); }

/* Diverging track (deltas, Spearman): 0 in the centre, sign sets the side */
.delta-track, .rho-track { position: relative; height: 20px; border-radius: 5px; background: var(--neutral-soft); }
.delta-track .axis, .rho-track .axis { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: var(--muted); opacity: 0.5; }
.delta-track .fill, .rho-track i { position: absolute; top: 5px; height: 10px; border-radius: 3px; }
.rho-track i.up, .delta-track .fill { }
.rho-track i.up { background: var(--ok); } .rho-track i.down { background: var(--bad); }
.delta-track .pb { position: absolute; top: 3px; width: 2px; height: 14px; background: var(--ink); opacity: 0.55; transform: translateX(-1px); border-radius: 1px; }

.deltas { display: grid; gap: 8px; margin-top: 4px; }
.delta-row { display: grid; grid-template-columns: 210px 1fr 96px; gap: 14px; align-items: center; }
.delta-step { display: inline-flex; align-items: center; gap: 6px; }
.delta-step .icon { color: var(--muted); }
.delta-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta-val .sd { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.delta-legend { display: inline-flex; gap: 12px; font-size: 11.5px; align-items: center; }
.delta-legend .k { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.delta-legend .k::before { content: ""; width: 11px; height: 6px; border-radius: 2px; }
.delta-legend .k.up::before { background: var(--ok); }
.delta-legend .k.down::before { background: var(--bad); }

/* Frontier list: identity chip + encoded mini-stats, no mono number wall */
.frontier-list { display: grid; gap: 8px; }
.frontier-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.frontier-nums { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.ministat { display: inline-flex; flex-direction: column; }
.ministat .mk { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ministat .mv { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Win-rate rows: shared 0..1 track, 0.5 tie line, identity chips per pair */
.winrate-list { display: grid; gap: 10px; position: relative; padding-top: 20px; }
.wr-scale { position: relative; height: 0; margin-left: 210px; margin-right: 58px; }
.wr-scale span { position: absolute; top: -16px; transform: translateX(-50%); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wr-scale .tie-lbl { color: var(--muted); font-weight: 600; }
.wr-row { display: grid; grid-template-columns: 196px 1fr 50px; gap: 14px; align-items: center; }
.wr-pair { display: inline-flex; align-items: center; gap: 6px; }
.wr-pair .icon { color: var(--muted); }
.wr-track { position: relative; height: 22px; border-radius: 6px; background: var(--neutral-soft); }
.wr-track .tie { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: var(--muted); opacity: 0.55; }
.wr-track .bar { position: absolute; top: 6px; height: 10px; border-radius: 3px; opacity: 0.85; }
.wr-track .bar.up { background: var(--ok); } .wr-track .bar.down { background: var(--bad); }
.wr-track .ci { position: absolute; top: 10px; height: 2px; background: var(--ink); opacity: 0.4; }
.wr-track .dot { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--panel); border: 2px solid var(--ink); }
.wr-val { text-align: right; }
.wr-val strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.wr-n { font-size: 10.5px; color: var(--muted); }

@media (max-width: 760px) {
  .delta-row { grid-template-columns: 1fr; gap: 4px; }
  .wr-row { grid-template-columns: 1fr; gap: 4px; }
  .wr-scale { display: none; }
}