/* Direction B — "Terminal".
   Dark instrument panel, dense, everything above the fold. The previous
   version's faults are the brief here: one flat type size, competing borders,
   ragged spacing, weak axis labels, dominated points barely dimmer than live
   ones. Fixed by a real typographic scale, an 8px rhythm, borders only where
   they separate regions, and hard contrast between live and dead points. */

:root {
  --bg: #0b0d0f;
  --panel: #111417;
  --panel-2: #161a1e;
  --line: #222a30;
  --fg: #dde5ea;
  --fg-2: #8d9ba5;
  --fg-3: #5b6873;
  --accent: #46e5a0;
  --accent-dim: #1d6e4d;
  --warn: #e8b63c;
  --warn-bg: #241d0c;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 8px rhythm */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px;

  /* typographic scale — the previous version had exactly one size */
  --t-micro: 10px; --t-small: 11px; --t-body: 13px;
  --t-lead: 15px; --t-h: 19px; --t-display: 30px; --t-hero: 44px;

  --gutter: clamp(var(--s2), 3vw, var(--s4));
}

:root[data-theme="light"] {
  --bg: #f4f6f7; --panel: #fff; --panel-2: #eef1f3; --line: #d3dade;
  --fg: #10161a; --fg-2: #4b5960; --fg-3: #7b8a93;
  --accent: #067a4d; --accent-dim: #a5e0c6; --warn: #8a6612; --warn-bg: #fbf3dd;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--mono); font-size: var(--t-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 1400px; margin: 0 auto; padding-inline: var(--gutter); }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-dim); }
a:hover { border-bottom-color: var(--accent); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------- masthead */

.masthead { border-bottom: 1px solid var(--line); background: var(--panel); }
.masthead-inner {
  max-width: 1400px; margin: 0 auto; padding-inline: var(--gutter);
  padding-block: var(--s3) var(--s2);
  display: flex; flex-wrap: wrap; gap: var(--s2);
  align-items: flex-end; justify-content: space-between;
}
h1 { font-size: var(--t-display); line-height: 1.1; }
.standfirst { margin: var(--s1) 0 0; font-size: var(--t-body); color: var(--fg-2); max-width: 46rem; }
.masthead-tools { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }
.generated { margin: 0; font-size: var(--t-micro); color: var(--fg-3); letter-spacing: 0.04em; }

.style-switch, .mode-switch { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.style-switch button, .mode-switch button {
  border: 0; background: var(--panel-2); color: var(--fg-3);
  padding: var(--s1) var(--s2); font-size: var(--t-small);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.style-switch button[aria-pressed="true"], .mode-switch button[aria-pressed="true"] {
  background: var(--accent); color: var(--bg);
}

/* --------------------------------------------------------------- answer */

.answer { padding-block: var(--s3) var(--s2); }
.answer-line { margin: 0; font-family: var(--sans); font-size: var(--t-h); line-height: 1.4; max-width: 62rem; color: var(--fg-2); }
.answer-line strong { color: var(--fg); font-weight: 600; }
.answer-line .effort { font-family: var(--mono); font-size: 0.8em; color: var(--accent); }
.answer-empty { color: var(--fg-3); }

/* -------------------------------------------------------------- notices */

.notices { display: grid; gap: var(--s1); margin-bottom: var(--s3); }
.notice {
  background: var(--panel); border-left: 2px solid var(--accent);
  padding: var(--s2); font-size: var(--t-body); line-height: 1.55;
  color: var(--fg-2); max-width: 70rem;
}
.notice strong { color: var(--fg); }
.notice-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.notice code { color: var(--accent); }
.inline-toggle { white-space: nowrap; color: var(--accent); cursor: pointer; }

/* ------------------------------------------------------------- controls */

.controls {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: flex-end;
  background: var(--panel); border: 1px solid var(--line);
  padding: var(--s2); margin-bottom: var(--s3);
}
.control { flex: 1 1 20rem; min-width: 0; }
.control label, .filter-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-3); margin-bottom: var(--s1);
}
.control output { font-size: var(--t-lead); color: var(--accent); letter-spacing: 0; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

.filters { flex: 1 1 100%; }
.filters summary { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); cursor: pointer; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s3); padding-top: var(--s2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip { border: 1px solid var(--line); padding: 2px var(--s1); font-size: var(--t-small); cursor: pointer; color: var(--fg-2); }
.chip:has(:checked) { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.check { display: block; font-size: var(--t-body); cursor: pointer; color: var(--fg-2); }
.hint { display: block; font-size: var(--t-small); color: var(--fg-3); margin: var(--s1) 0 0; line-height: 1.5; }

/* ---------------------------------------------------------------- cards */

.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-bottom: var(--s3);
}
.card { background: var(--panel); padding: var(--s2); cursor: pointer; }
.card:hover, .card:focus-visible { background: var(--panel-2); }
.card h2 {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-3); margin-bottom: var(--s2);
}
.card-qual { color: var(--accent); letter-spacing: 0.04em; }
.card-value {
  font-size: var(--t-hero); line-height: 1; margin: 0 0 var(--s1);
  color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.card-name { margin: 0; font-family: var(--sans); font-size: var(--t-lead); font-weight: 600; }
.card-sub { margin: 2px 0 0; font-size: var(--t-small); color: var(--fg-3); }
.card-empty .card-value { color: var(--fg-3); }

/* --------------------------------------------------------------- ladder */

.ladder-section { margin-bottom: var(--s3); }
.ladder { background: var(--panel); border: 1px solid var(--line); max-width: 52rem; }
.ladder-head {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: baseline;
  justify-content: space-between; padding: var(--s2); border-bottom: 1px solid var(--line);
}
.ladder-head h2 { font-size: var(--t-lead); }
.ladder-sub { margin: 0; font-size: var(--t-small); color: var(--fg-3); letter-spacing: 0.04em; }
.ladder-list { list-style: none; margin: 0; padding: 0; }
.ladder-row {
  display: flex; gap: var(--s2); align-items: baseline;
  padding: var(--s2); border-bottom: 1px solid var(--line); cursor: pointer;
}
.ladder-row:last-child { border-bottom: 0; }
.ladder-row:hover { background: var(--panel-2); }
.ladder-on { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }
.ladder-band { flex: 0 0 5.5rem; font-size: var(--t-body); color: var(--fg-3); white-space: nowrap; }
.ladder-on .ladder-band { color: var(--accent); }
.ladder-body { min-width: 0; }
.ladder-name {
  display: flex; align-items: center; gap: var(--s1);
  font-family: var(--sans); font-weight: 600; font-size: var(--t-lead); color: var(--fg);
}
.swatch { width: 9px; height: 9px; flex: none; }
.ladder-stats { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--fg-3); line-height: 1.6; }
.ladder-stats b { color: var(--accent); font-weight: 400; }
.ladder-empty { padding: var(--s2); font-size: var(--t-body); color: var(--fg-3); }

/* ---------------------------------------------------------------- chart */

.chart-section { margin-bottom: var(--s4); }
.chart-head { margin-bottom: var(--s2); }
.chart-head h2, .table-head h2, .panel h2 { font-size: var(--t-h); margin-bottom: var(--s1); }
.chart-note, .table-note, .panel-note { margin: 0; font-size: var(--t-small); color: var(--fg-3); line-height: 1.55; max-width: 62rem; }
.chart-wrap { background: var(--panel); border: 1px solid var(--line); padding: var(--s2); }
#chart { width: 100%; height: auto; display: block; overflow: visible; }

.grid { stroke: var(--line); stroke-width: 1; }
.axis-tick { fill: var(--fg-3); font-size: 11px; font-family: var(--mono); }
.axis-label { fill: var(--fg-2); font-size: 12px; font-family: var(--sans); letter-spacing: 0.06em; }
.frontier-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.pt-front { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; cursor: pointer; }
/* Dominated points must read as dead, not merely quieter. */
.pt-dominated { fill: var(--fg-3); opacity: 0.3; cursor: pointer; }
.pt-out { opacity: 0.1; }
.pt-hi { fill: #fff; stroke: var(--accent); stroke-width: 3; }
.ci { stroke: var(--accent); stroke-width: 1.5; opacity: 0.45; }
.ci-dim { stroke: var(--fg-3); opacity: 0.15; }

/* ---------------------------------------------------------------- table */

.table-section { margin-bottom: var(--s4); }
.table-head { margin-bottom: var(--s2); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
/* One separator per row, none between columns — the old version boxed every cell. */
th, td { padding: var(--s1) var(--s2); text-align: left; border-bottom: 1px solid var(--line); }
th {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-3); font-weight: 400; cursor: pointer; white-space: nowrap;
  position: sticky; top: 0; background: var(--panel-2); border-bottom-color: var(--fg-3);
}
th[aria-sort] { color: var(--accent); }
th[aria-sort]::after { content: " ▾"; }
th[aria-sort="ascending"]::after { content: " ▴"; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.strong { color: var(--accent); font-weight: 600; }
.rank { color: var(--fg-3); }
.model { font-family: var(--sans); font-weight: 600; white-space: nowrap; }
.row:hover { background: var(--panel-2); }
.row-qual .rank { color: var(--accent); }
.row-open { background: var(--panel-2); }
.empty { color: var(--line); }
.empty-row { text-align: center; color: var(--fg-3); padding: var(--s5); }

.effort { font-size: var(--t-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-2); }
.score { color: var(--fg); }
.ci-text { color: var(--fg-3); font-size: var(--t-small); margin-left: 4px; }
.harness { display: block; font-size: var(--t-micro); color: var(--fg-3); text-align: right; letter-spacing: 0.04em; }
.badge, .tag {
  display: inline-block; margin-left: var(--s1); padding: 0 4px;
  font-size: var(--t-micro); border: 1px solid var(--line); color: var(--fg-3);
}
.tag { border-color: var(--accent-dim); color: var(--accent); }

/* ----------------------------------------------------------- provenance */

.prov-row td { background: var(--bg); padding: var(--s3) var(--s2); }
.prov-lead { margin: 0 0 var(--s2); font-size: var(--t-body); color: var(--fg-2); max-width: 62rem; }
.prov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s2); }
.prov-item { background: var(--panel); border: 1px solid var(--line); padding: var(--s2); }
.prov-item h4 { font-family: var(--mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); margin-bottom: var(--s1); }
.prov-score { margin: 0 0 var(--s2); font-size: var(--t-display); line-height: 1; color: var(--accent); }
.prov-item dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s2); margin: 0 0 var(--s2); font-size: var(--t-small); }
.prov-item dt { color: var(--fg-3); }
.prov-item dd { margin: 0; text-align: right; color: var(--fg-2); }
.prov-item a { font-size: var(--t-small); }
.prov-missing { opacity: 0.5; }

/* --------------------------------------------------------------- panels */

.panel { padding-block: var(--s4); border-top: 1px solid var(--line); }
.panel p { font-size: var(--t-body); color: var(--fg-2); max-width: 62rem; line-height: 1.65; }
.limitation strong { color: var(--fg); }
.bench-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s2); margin-block: var(--s2); }
.bench { background: var(--panel); border: 1px solid var(--line); padding: var(--s2); }
.bench-out { border-style: dashed; opacity: 0.55; }
.bench h3 { font-size: var(--t-lead); margin-bottom: 2px; }
.ver { font-family: var(--mono); font-size: var(--t-small); color: var(--fg-3); }
.bench-state { margin: 0 0 var(--s2); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.14em; }
.bench-in .bench-state { color: var(--accent); }
.bench-out .bench-state { color: var(--fg-3); }
.bench dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s2); font-size: var(--t-small); margin: 0 0 var(--s2); }
.bench dt { color: var(--fg-3); }
.bench dd { margin: 0; text-align: right; color: var(--fg-2); }
.bench-fail { font-size: var(--t-small); color: var(--warn); margin: 0 0 var(--s1); }
.bench-pass { font-size: var(--t-small); color: var(--fg-3); margin: 0 0 var(--s1); }
.bench a { font-size: var(--t-small); }
.bench-guard { grid-column: 1 / -1; color: var(--warn); font-size: var(--t-body); }

.refresh-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-start; }
.refresh-row .hint { flex: 1 1 24rem; margin: 0; }
#refresh {
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  padding: var(--s1) var(--s2); font-size: var(--t-body);
  text-transform: uppercase; letter-spacing: 0.1em;
}
#refresh:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
#refresh:disabled { opacity: 0.4; cursor: progress; }
.refresh-status { font-size: var(--t-small); color: var(--fg-3); }

footer { border-top: 1px solid var(--line); background: var(--panel); margin-top: var(--s4); }
footer p {
  max-width: 1400px; margin: 0 auto; padding-inline: var(--gutter); padding-block: var(--s3);
  font-size: var(--t-small); color: var(--fg-3);
}

.tooltip { display: none; }

@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .masthead-tools { align-items: flex-start; }
  th, td { padding: var(--s1); }
}

/* -------------------------------------------------------------- retired */

.retired { margin-top: var(--s1); }
.retired summary { font-size: var(--t-small); color: var(--fg-3); cursor: pointer; }
.retired-note { font-size: var(--t-small); color: var(--fg-3); margin: var(--s1) 0; max-width: 52rem; }
.retired-list {
  display: flex; flex-wrap: wrap; gap: var(--s1);
  list-style: none; margin: 0 0 var(--s1); padding: 0;
}
.retired-list li {
  font-size: var(--t-small); color: var(--fg-3);
  border: 1px solid var(--line); padding: 0 var(--s1);
}