/* RelBench leaderboards, scoped under #lb and re-themed to the site's Cardinal palette.
   Inherits the global design tokens from style.css (--paper, --line, --muted, --ink,
   --shadow, --ease). The accent is Cardinal; medals use neutral metals. */
#lb {
  --panel: var(--paper);
  --panel-2: var(--paper-3);
  --accent: var(--cardinal);
  --accent-strong: var(--cardinal-dark);
  --accent-soft: color-mix(in srgb, var(--cardinal) 10%, var(--paper));
  --accent-tint: color-mix(in srgb, var(--cardinal) 7%, transparent);
  --text: var(--ink);
  --shadow-sm: var(--shadow);
  --shadow-accent: 0 6px 18px rgba(140, 21, 21, .22);
  /* medal metals (categorical, not part of the brand palette) */
  --gold-m: #c9a227;
  --silver-m: #9aa3af;
  --bronze-m: #bd7b4a;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: .5rem auto 0;
  max-width: 680px;
}
#lb a { color: var(--accent); font-weight: 600; }
#lb a:hover { color: var(--accent-strong); }

/* Board tabs (primary, top level) — one leaderboard per task family. Lifted into the
   hero action row alongside the Submit button, so they use global tokens rather than the
   #lb-scoped palette. */
.paper-actions { align-items: center; }
#splits { display: inline-flex; gap: 8px; flex-wrap: wrap; }
#splits .tab {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink); cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  box-shadow: var(--shadow);
  transition: border-color .15s, background .15s, transform .12s var(--ease), box-shadow .2s;
}
#splits .tab:hover { border-color: var(--cardinal); transform: translateY(-1px); }
#splits .tab small { font-size: 12px; font-weight: 400; color: var(--muted); }
#splits .tab[aria-selected="true"] {
  background: var(--cardinal); border-color: var(--cardinal); color: #fff;
  box-shadow: 0 6px 18px rgba(140, 21, 21, .22);
}
#splits .tab[aria-selected="true"] small { color: rgba(255,255,255,.85); }

/* Sub-tabs (secondary) — In-context / Fine-tuned / Combined. Pill-style with a calm
   tinted active state so they read as subordinate to the solid board tabs above. */
#lb .subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
#lb .subtab {
  display: inline-flex; gap: 6px; align-items: baseline;
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--muted); cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; line-height: 1.2;
  transition: border-color .15s, background .15s, color .15s;
}
#lb .subtab:hover { border-color: var(--accent); color: var(--text); }
#lb .subtab small { font-size: 11.5px; font-weight: 400; opacity: .8; }
#lb .subtab[aria-selected="true"] {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--accent);
}

/* Table — blended "list" aesthetic to match the site's .dtable (no card, light separators). */
#lb .table-wrap { overflow-x: auto; }
#lb table { border-collapse: collapse; width: 100%; margin: 0; border-top: 1px solid var(--line); }
#lb th, #lb td { padding: 14px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); font-size: 14px; }
#lb tbody tr:last-child td { border-bottom: none; }
#lb th:nth-child(-n+2), #lb td:nth-child(-n+2) { text-align: left; }
#lb thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--muted); padding: 12px 10px; background: transparent; user-select: none; }
#lb th.rankable { cursor: pointer; }
#lb th.rankable:hover { color: var(--ink); }
#lb th.ranked { color: var(--cardinal); }
#lb th.ranked::after { content: " ↓"; color: var(--cardinal); }
#lb td.ranked { font-weight: 700; color: var(--ink); }
#lb tbody tr { transition: background .15s var(--ease); }
#lb tbody tr:hover { background: var(--paper); }
#lb .rank { font-weight: 700; color: var(--muted); }
#lb .medal-1 { color: var(--gold-m); }
#lb .medal-2 { color: var(--silver-m); }
#lb .medal-3 { color: var(--bronze-m); }

/* Name cell: clickable method name + optional variant subtitle. */
#lb td.name { line-height: 1.35; }
#lb .m-name { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--ink); }
#lb td.name a { color: var(--ink); }
#lb td.name a:hover { color: var(--cardinal); }
#lb .var { display: block; font-size: 11.5px; color: var(--muted); }

#lb td.attr { color: var(--muted); font-size: 13px; }

#lb .empty { text-align: center; color: var(--muted); padding: 30px; }
#lb .lb-foot { color: var(--muted); font-size: 13px; margin-top: 12px; }
#lb code { background: var(--panel-2); padding: 1px 6px; border-radius: 6px; font-size: .9em; font-family: var(--mono); }

/* Visually-hidden accessible name for the results table. */
#lb .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }