/* ---------------------------------------------------------------------------
   overlooked-bench leaderboard.

   Plain CSS, no build step, no dependencies. The site is served from the repo
   itself so that the page and the audit trail it reads are the same artefact - 
   `../data/runs/...` on this page is the committed run data, not a copy of it.

   Palette is the validated dataviz default. Light values are defined on bare
   :root; the dark blocks redefine only the tokens.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light;
  --surface:        #fcfcfb;
  --surface-raised: #ffffff;
  --surface-sunken: #f4f3f0;
  --ink:            #0b0b0b;
  --ink-secondary:  #52514e;
  --ink-muted:      #8a8880;
  --rule:           #e6e5e1;
  --accent:         #2a78d6;
  --accent-soft:    #cde2fb;
  --warn:           #eb6834;
  --bar:            #2a78d6;
  --bar-track:      #e9e8e4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface:        #1a1a19;
    --surface-raised: #232322;
    --surface-sunken: #141413;
    --ink:            #ffffff;
    --ink-secondary:  #c3c2b7;
    --ink-muted:      #8a8880;
    --rule:           #383835;
    --accent:         #3987e5;
    --accent-soft:    #184f95;
    --warn:           #d95926;
    --bar:            #3987e5;
    --bar-track:      #2c2c2a;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface:        #1a1a19;
  --surface-raised: #232322;
  --surface-sunken: #141413;
  --ink:            #ffffff;
  --ink-secondary:  #c3c2b7;
  --ink-muted:      #8a8880;
  --rule:           #383835;
  --accent:         #3987e5;
  --accent-soft:    #184f95;
  --warn:           #d95926;
  --bar:            #3987e5;
  --bar-track:      #2c2c2a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; padding: 10px 16px; z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

a { color: var(--accent); }
a:hover { text-decoration: underline; }

/* --- Header -------------------------------------------------------------- */

.site-header {
  border-top: 8px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-raised);
  padding: 26px 0 22px;
}
.header-inner {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: flex-end; justify-content: space-between;
}
.wordmark {
  margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
}
.wordmark span { color: var(--accent); }
.tagline { margin: 4px 0 0; color: var(--ink-secondary); font-size: 16px; }

.run-picker { display: flex; align-items: center; gap: 10px; }
.run-picker label { color: var(--ink-secondary); font-size: 14px; }
.run-picker select {
  font: inherit; font-size: 15px; padding: 7px 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 8px;
}

/* --- Intro --------------------------------------------------------------- */

.intro { padding: 40px 0 8px; max-width: 78ch; }
.lede { font-size: 18px; margin: 0 0 16px; }
.note { color: var(--ink-secondary); font-size: 15px; margin: 0; }

.status { padding: 48px 0; color: var(--ink-secondary); }

/* --- Provenance band ----------------------------------------------------- */

.provenance {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--surface-sunken);
  margin: 28px 0 8px; overflow: hidden;
}
.prov-item {
  flex: 1 1 170px; padding: 14px 18px;
  border-right: 1px solid var(--rule);
}
.prov-item:last-child { border-right: 0; }
.prov-label {
  display: block; font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 3px;
}
.prov-value { font-size: 15px; font-weight: 600; word-break: break-word; }
.prov-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* --- Sections ------------------------------------------------------------ */

section { margin: 44px 0; }
h2 {
  font-size: 22px; margin: 0 0 8px; letter-spacing: -0.01em;
  padding-bottom: 8px; border-bottom: 2px solid var(--rule);
}
.section-note {
  color: var(--ink-secondary); font-size: 15px; margin: 0 0 18px; max-width: 78ch;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em; background: var(--surface-sunken);
  padding: 1px 5px; border-radius: 4px;
}

/* --- Tables -------------------------------------------------------------- */

/* Wide tables scroll inside their own container; the page body never does. */
.table-scroll {
  overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--surface-raised);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.data-table th, .data-table td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.data-table thead th {
  background: var(--surface-sunken); font-size: 12.5px; font-weight: 600;
  color: var(--ink-secondary); text-transform: uppercase; letter-spacing: 0.04em;
  position: sticky; top: 0; cursor: pointer; user-select: none;
}
.data-table thead th:hover { color: var(--ink); }
.data-table thead th[aria-sort="descending"]::after { content: " v"; font-size: 9px; }
.data-table thead th[aria-sort="ascending"]::after  { content: " ^"; font-size: 9px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-sunken); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .rank { color: var(--ink-muted); width: 1%; }
.model-name { font-weight: 600; }
.provider { color: var(--ink-muted); font-size: 13px; }

/* A bar behind the number: identity stays in the text, the bar only gives the
   eye a magnitude to scan. Values are always printed, never bar-only. */
.cell-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
}
.cell-bar .track {
  flex: 0 0 62px; height: 6px; border-radius: 3px; background: var(--bar-track);
  overflow: hidden;
}
.cell-bar .fill { display: block; height: 100%; background: var(--bar); border-radius: 3px; }
.cell-bar.warnbar .fill { background: var(--warn); }

.tier {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted); border: 1px solid var(--rule);
  padding: 1px 6px; border-radius: 999px;
}

/* --- Asymmetry detail ---------------------------------------------------- */

.asym-detail { margin-top: 18px; }
.asym-detail details {
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface-raised); margin-bottom: 10px; padding: 0;
}
.asym-detail summary {
  cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 15px;
}
.asym-detail .body { padding: 0 16px 14px; font-size: 14.5px; }
.gap-row {
  display: flex; gap: 12px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--rule);
}
.gap-row .k { flex: 0 0 150px; color: var(--ink-secondary); }
.gap-row .v { color: var(--ink); }

/* --- Charts -------------------------------------------------------------- */

.chart-grid { display: grid; gap: 22px; }
.chart-card {
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: #fcfcfb; /* charts are rendered on a light surface; keep it */
}
.chart-card img { display: block; width: 100%; height: auto; }
.chart-card figcaption {
  padding: 10px 16px; font-size: 13.5px; color: #52514e;
  border-top: 1px solid #e6e5e1; background: #f4f3f0;
}

/* --- Diagnostics --------------------------------------------------------- */

.diag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.diag-card {
  border: 1px solid var(--rule); border-radius: 12px; padding: 15px 17px;
  background: var(--surface-raised);
}
.diag-card .k {
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-muted); display: block; margin-bottom: 4px;
}
.diag-card .v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.diag-card .sub { font-size: 13px; color: var(--ink-secondary); }
.alert {
  border: 1px solid var(--warn); border-left-width: 5px; border-radius: 10px;
  background: var(--surface-raised); padding: 14px 18px; margin-bottom: 16px;
}
.alert strong { color: var(--warn); }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule); margin-top: 64px;
  padding: 30px 0 56px; background: var(--surface-sunken);
  font-size: 15px;
}
.site-footer p { margin: 0 0 8px; }
.muted { color: var(--ink-secondary); }

@media (max-width: 640px) {
  .wordmark { font-size: 24px; }
  .lede { font-size: 16.5px; }
  .prov-item { flex-basis: 50%; }
}