/* leaderboard MVP — surface-specific layer, tokens only.
 * Everything structural (.rail, .wrap.wide, .masthead, .note, .stats, .tabs,
 * .field.dd, table, tr.sota, .score-cell, .badge-verified, .btn, figure) comes
 * from the SFDS system stylesheets (/tokens.css + /style.css). This file only
 * carries what is unique to the leaderboard surface. No raw colors/sizes. */

/* the HTML `hidden` attribute must win even over an author display (the system's
   .stats is display:grid, our legends are display:flex — both would otherwise leak
   through `hidden`). This reset keeps toggling reliable across the surface. */
[hidden] { display: none !important; }

/* a muted qualifier appended to an h2 (e.g. "Cost vs. accuracy (Pareto frontier)") */
.h2-sub { font-family: var(--f-mono); font-weight: var(--weight-regular); font-size: var(--text-lead); color: var(--ink-2); }

/* only the rankings table (and its legend) break out wider than the column; the rest
   of the benchmark page keeps the normal .wrap.wide measure. margin-left:50% +
   translateX(-50%) centers a wider block on the column's centre line. */
.board-page #board-wrap,
.board-page #row-legend {
  width: min(1180px, calc(100vw - 2 * var(--space-5)));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* right-aligned rail links (benchmarks · docs). The one adjacent to the FIXED mode
   toggle carries extra right margin (.rail-link--end) so nothing sits under the glyph. */
.rail .rail-link { color: var(--ink-2); text-decoration: none; }
.rail .rail-link:hover { color: var(--ink); }
.rail .rail-link.here { color: var(--ink); border-bottom: var(--border-hairline) solid var(--ink); }
.rail .rail-link--end { margin-right: var(--space-7); }

/* benchmark tab strip — the primary nav on the benchmark page. Scrolls sideways
   on narrow screens rather than wrapping the segmented control. */
.bench-tabs { margin: var(--space-6) 0 var(--space-7); overflow-x: auto; }
.bench-tabs .tabs { max-width: none; }

/* controls row: a quiet label + the verified/unverified segmented toggle */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); }
.controls-lbl { font-family: var(--f-mono); font-size: var(--text-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--ink-2); }

/* loading / empty / error placeholder (mirrors the scoreboard's .state) */
.state { font-family: var(--f-mono); font-size: var(--text-sm); color: var(--ink-2); padding: var(--space-6) 0; }
.state-error { color: var(--danger-text-low); }

/* the landing "focus" column wraps; keep a readable measure */
td.cell-wrap { white-space: normal; min-width: 24ch; color: var(--ink-2); }

/* brand color on the definitions: the "Reproducible" term carries the same green
   as its cached badge, so the color reads as meaning, not decoration */
.kv .dt-repro { color: var(--success-text-low); }
/* the "Open →" link never breaks across lines */
td.col-open { white-space: nowrap; }

/* submitter is a handle → mono, never wraps mid-name (blank for solo models) */
td.col-submitter { font-family: var(--f-mono); color: var(--ink); white-space: nowrap; }
/* the fusion (model list) is the one cell allowed to wrap (it can be long) */
td.col-fusion { white-space: normal; min-width: 18ch; font-family: var(--f-mono); color: var(--ink); }
/* dates recede to the meta tone */
td.col-date, th.col-date { font-family: var(--f-mono); color: var(--ink-2); white-space: nowrap; text-align: left; }
/* unbadged = the whisper tone, never a red/negative treatment (SFDS verified semantic) */
.status-none { color: color-mix(in oklch, var(--ink-2) 64%, transparent); }
/* third-party source tag in the unverified pool — quiet mono, shows where it came from */
.src-tag { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2); white-space: nowrap; }

/* compact in-row action — copy the url4 rerun expression */
.btn.sm { font-size: var(--text-label); padding: var(--space-1) var(--space-2); white-space: nowrap; }

/* accuracy cell: the primary % + bar, then a mark; the spread of all reported
   sources sits underneath in the meta tone */
.col-acc .acc-spread { display: block; font-family: var(--f-mono); font-size: var(--text-micro);
  color: var(--ink-2); text-align: right; margin-top: 2px; white-space: nowrap; }
/* delta whisker: the min–max range of all reported scores, drawn on the accuracy bar
   as an error-bar (end caps + connecting hairline) over the fill */
.col-acc .score-track { position: relative; overflow: visible; }
.col-acc .score-delta { position: absolute; top: 50%; transform: translateY(-50%); height: 9px;
  box-sizing: border-box; border-left: var(--border-hairline) solid var(--ink); border-right: var(--border-hairline) solid var(--ink); }
.col-acc .score-delta::before { content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--ink); transform: translateY(-50%); }

/* the reports summary is hoverable — dotted underline + help cursor signal the per-source split */
.col-acc .acc-spread[tabindex] { cursor: help; text-decoration: underline dotted var(--line-2); text-underline-offset: 2px; }
.col-acc .acc-spread[tabindex]:focus-visible { outline: var(--border-hairline) solid var(--accent-solid); outline-offset: 2px; }

/* custom hover tooltip — the per-source split. A small in-brand surface panel:
   square, hairline, mono; the one shadow the system allows (window elevation). */
.sf-tip { position: absolute; z-index: 80; max-width: 340px; pointer-events: none;
  background: var(--surface); color: var(--ink); border: var(--border-hairline) solid var(--line);
  box-shadow: var(--shadow-window); padding: var(--space-3) var(--space-4);
  font-family: var(--f-mono); font-size: var(--text-micro); line-height: var(--leading-snug); }
[data-theme="dark"] .sf-tip { box-shadow: var(--shadow-window-dark); }
.sf-tip-h { color: var(--ink-2); text-transform: uppercase; letter-spacing: var(--tracking-label); margin-bottom: var(--space-2); }
.sf-tip-grid { display: grid; grid-template-columns: auto auto auto auto; gap: var(--space-1) var(--space-4); }
.sf-tip-src { color: var(--ink-2); white-space: nowrap; }
.sf-tip-acc { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.sf-tip-cost { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sf-tip-date { text-align: right; color: var(--ink-2); white-space: nowrap; }
.sf-tip-slug { color: var(--ink); }
.score-cell .mk { margin-left: var(--space-2); }

/* marks — gold medal = SOTA (rationed gold, the win); ink square = frontier.
   Same language in the table and the chart legend. */
.mk { flex: 0 0 auto; display: inline-block; width: 12px; height: 12px; vertical-align: middle; }
.mk--sota { background: var(--gain);
  -webkit-mask: url(/assets/icons/medal.svg) center / contain no-repeat;
  mask: url(/assets/icons/medal.svg) center / contain no-repeat; }
.mk--front { background: var(--ink); }
.mk--none { visibility: hidden; }   /* invisible spacer so unmarked rows keep names aligned */

/* name cell: the SOTA/frontier mark leads the submission name */
.col-name { font-family: var(--f-mono); color: var(--ink); white-space: nowrap; }
.col-name .name-cell { display: inline-flex; align-items: center; gap: var(--space-2); }

/* models cell: fusion members stack one per line (a solo model shows a dash).
   each model is hoverable to reveal its full provider slug */
.col-fusion .fusion-list { display: flex; flex-direction: column; align-items: flex-start; }
.col-fusion .fm { display: block; white-space: nowrap; cursor: help; }
.col-fusion .fm:hover { text-decoration: underline dotted var(--line-2); text-underline-offset: 2px; }

/* row legend under the board + the chart figcaption legend share one look */
.row-legend, #pareto-cap { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-5); font-family: var(--f-mono); font-size: var(--text-micro);
  color: var(--ink-2); }
.row-legend { margin: var(--space-2) 0 var(--space-6); }
.lg { display: inline-flex; align-items: center; gap: var(--space-2); }
.lg .mk { width: 11px; height: 11px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
.dot--dom { background: var(--ink-3); }
.dot--src { background: transparent; border: var(--border-hairline) solid var(--ink-3); }
.dot--nocost { background: transparent; border: var(--border-hairline) dashed var(--ink-3); }

/* ---- Pareto chart ---------------------------------------------------------
   The figure/svg shell + svg theme hooks (.svg-ink/.svg-line/.svg-axis/.svg-base/
   .svg-gain) come from the system. Only chart-local geometry lives here. */
#pareto { display: block; width: 100%; height: auto; background: var(--bg); }
/* dominated points recede; frontier points read as ink; the SOTA point spends gold */
#pareto .pt { fill: var(--ink-3); }
#pareto .pt--front { fill: var(--ink); }
#pareto .pt--sota { fill: var(--gain); }
/* the frontier line is a plain ink hairline; the axes are the quiet decorative step */
#pareto .frontier { fill: none; stroke: var(--ink); stroke-width: 1.5; }
#pareto .grid { stroke: var(--line); stroke-width: 1; }
#pareto .axis { stroke: var(--ink-3); stroke-width: 1; }
#pareto .gutter-div { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
#pareto text { font-family: var(--f-mono); font-size: var(--text-micro); fill: var(--ink-2); }
#pareto .axis-title { fill: var(--ink-2); }
/* other reported scores for a model: hollow (has cost) / dashed (cost n/a) */
#pareto .pt--src { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
#pareto .pt--nocost { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 2 2; }

@media (max-width: 620px) {
  .controls { gap: var(--space-2); }
  td.col-fusion { min-width: 12ch; }
  .rail .rail-link { margin-right: var(--space-6); }
}