/* ULTRABENCH — view-specific layout: the benchmark registry and one benchmark's page.
   The leaderboard, the cost page and the model page carry their own sheets
   (`leaderboard.css`, `insights.css`, `model-detail.css`). */

/* ---------- benchmark detail head ---------- */

/* The title takes the base h1 size, like every other page title. */
.detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.detail-sub { color: var(--text-faint); font-family: var(--mono); font-size: var(--fs-s); margin-bottom: 14px; }

/* ---------- benchmark registry + coverage ---------- */

/* Not `.detail-sub`: that one adds a mono face and a 14px bottom margin. */
.bench-id { font-size: var(--fs-s); }
.back-link { margin-top: 12px; }

/* Registry rail, tiers and the folded long tail (UB-255). The rail itself is the
   leaderboard's `.lb-rail`; only the chip counts are registry-specific. */
.bm-chip-n { margin-left: 2px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.lb-chip[aria-pressed="true"] .bm-chip-n { color: inherit; opacity: .75; }
.bm-longtail { margin: 10px 0 0; font-size: var(--fs-m); }
.badge-retired { color: var(--text-faint); border-style: dashed; }

/* Per-benchmark page (UB-256): the methodology line under the title, the ranked score
   table and the name lists. Nothing scrolls inside the page — the lists flow in columns. */
.bench-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0 0 4px; padding: 0;
  color: var(--text-dim); font-size: var(--fs-m);
}
.bench-meta strong { color: var(--accent); font-weight: 600; }
.bench-aside { margin-left: 10px; color: var(--text-faint); font-size: var(--fs-s); font-weight: 400; }
table.data td.bench-config { white-space: normal; min-width: 110px; max-width: 320px; }
.bench-config-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
table.data tr.row-inadmissible td, table.data tr.row-inadmissible td a { color: var(--text-faint); }
.bench-names {
  list-style: none; margin: 10px 0 0; padding: 0;
  columns: 3 220px; column-gap: 24px; font-size: var(--fs-m);
}
.bench-names li { break-inside: avoid; padding: 2px 0; }

/* Unbroken underscore-joined slugs (design_arena_codecategories) carry no natural break
   points, so at phone widths they overflowed the Benchmark name column straight into the
   tier badge. Anywhere-wrapping is scoped to cells that already declared wrapping intent. */
td.wrap { overflow-wrap: anywhere; }
/* A status badge beside a wrapping name is one token: it moves to the next line whole. */
td.wrap .badge { overflow-wrap: normal; white-space: nowrap; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .stat .stat-value { font-size: var(--fs-stat-sm); }
  .panel { padding: 12px 12px; }
}

@media (max-width: 520px) {
  table.data th, table.data td { padding: 8px 10px; }
  /* The table scrolls sideways on a phone, so the model name keeps a readable width
     instead of collapsing to one word per line beside the unwrapped score. */
  table.data td.bench-model { min-width: 150px; }
}