/* The visual system emphasizes readable contrast and clear keyboard focus. */
:root { color-scheme: light; --ink:#172331; --muted:#546474; --paper:#f3f6f8; --panel:#fff; --accent:#145f72; --line:#c8d4dc; --danger:#9b3027; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 system-ui,sans-serif; }
header { display:flex; justify-content:space-between; gap:1rem; padding:1rem max(1rem,calc((100% - 980px)/2)); background:var(--ink); }
header a { color:#fff; } .brand { font-weight:700; } .brand a { text-decoration:underline; }
main { max-width:980px; margin:auto; padding:3rem 1rem 5rem; }
h1 { max-width:22ch; font-size:clamp(2rem,5vw,3.7rem); line-height:1.08; } h2 { margin-top:0; }
.eyebrow { color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.notice,.card { background:var(--panel); border:1px solid var(--line); border-radius:.6rem; padding:1.3rem; margin-top:1.5rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
label { display:block; margin-top:.8rem; font-weight:700; }
input,select,textarea,button { width:100%; padding:.7rem; margin-top:.25rem; border:1px solid #718392; border-radius:.3rem; font:inherit; }
textarea { min-height:8rem; resize:vertical; } button { margin-top:1rem; background:var(--accent); color:#fff; border:0; font-weight:700; cursor:pointer; }
button.secondary { background:#5d6872; } button:disabled { cursor:not-allowed; opacity:.55; }
:focus-visible { outline:3px solid #e09022; outline-offset:2px; }
.help,.status { color:var(--muted); } .status { min-height:1.6em; margin-top:1rem; }
.result { min-height:4rem; padding:1rem; white-space:pre-wrap; overflow-wrap:anywhere; background:#edf2f5; border-left:4px solid var(--accent); }
.overlay { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:rgb(10 22 30 / 78%); }
.overlay[hidden] { display:none; } .overlay-card { width:min(90%,420px); text-align:center; background:#fff; padding:2rem; border-radius:.7rem; }
.overlay img { display:block; margin:auto; } .table-scroll { max-width:100%; overflow-x:auto; } table { width:100%; min-width:70rem; border-collapse:collapse; background:#fff; } th,td { padding:.7rem; border:1px solid var(--line); text-align:left; }
@media (prefers-reduced-motion:reduce) { .overlay img { visibility:hidden; } *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; } }

/* The leaderboard uses a focused dark dashboard theme while the experiment stays light. */
.leaderboard-page {
  color-scheme:dark;
  --ink:#eef6ff;
  --muted:#a9b8c8;
  --paper:#07111d;
  --panel:#0d1b2a;
  --accent:#5eead4;
  --line:#263b50;
  min-height:100vh;
  background:
    radial-gradient(circle at 85% 4%,rgb(30 138 160 / 22%),transparent 30rem),
    linear-gradient(145deg,#07111d 0%,#091827 56%,#07111d 100%);
}

/* A wider shell gives the comparison table room without weakening readable text widths. */
.leaderboard-shell { max-width:1200px; padding-top:2rem; }
.back-link {
  display:inline-flex;
  align-items:center;
  color:#b8fff4;
  font-weight:700;
  text-decoration:none;
}
.back-link:hover { text-decoration:underline; }

/* The hero provides a clear dashboard identity through depth, spacing, and an accent rule. */
.leaderboard-hero {
  display:block;
  margin:1.5rem 0 2rem;
  padding:clamp(1.5rem,4vw,3rem);
  overflow:hidden;
  border:1px solid #28445b;
  border-radius:1.25rem;
  background:linear-gradient(125deg,rgb(14 36 54 / 96%),rgb(13 54 65 / 82%));
  box-shadow:0 24px 70px rgb(0 0 0 / 32%);
}
.leaderboard-hero h1 { margin:.25rem 0 .75rem; max-width:none; }
.leaderboard-intro { max-width:60ch; margin:0; color:#c5d5e5; font-size:1.1rem; }

/* Dashboard sections read as individual surfaces against the deep page background. */
.leaderboard-page section {
  margin-top:1.25rem;
  padding:clamp(1.25rem,3vw,2rem);
  border:1px solid var(--line);
  border-radius:1rem;
  background:rgb(13 27 42 / 92%);
  box-shadow:0 14px 36px rgb(0 0 0 / 18%);
}
.leaderboard-page section h2 { margin-bottom:.75rem; font-size:clamp(1.35rem,3vw,2rem); }
.leaderboard-page section p { max-width:78ch; color:#c4d0dc; }
.leaderboard-page dl { display:grid; grid-template-columns:minmax(10rem,.3fr) 1fr; gap:.7rem 1.5rem; }
.leaderboard-page dt { color:#f4fbff; font-weight:800; }
.leaderboard-page dd { margin:0; color:var(--muted); }

/* The results surface has a brighter edge and tinted table to establish visual priority. */
.leaderboard-page .leaderboard-results { border-color:#237c7a; }
.section-heading { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:.5rem 1rem; }
.section-heading .eyebrow { margin:0; }
.leaderboard-page caption { padding:0 0 1rem; color:#c4d0dc; text-align:left; }
.leaderboard-page table { background:#0a1724; }
.leaderboard-page th,.leaderboard-page td { border-color:#294158; }
.leaderboard-page thead th { color:#07111d; background:#5eead4; }
.leaderboard-page tbody td { white-space:nowrap; }
.leaderboard-page tbody th { color:#a7f3e9; background:#102537; }
.leaderboard-page tbody tr:nth-child(even) td { background:#0e2030; }
.leaderboard-page tbody tr:hover td { background:#153047; }
.leaderboard-page .empty { padding:.8rem 1rem; border-left:4px solid var(--accent); background:#102537; }

/* The overview dumbbell chart uses two validated series hues plus shape encoding:
   hollow bare-baseline rings and filled named-score dots, joined by a neutral line. */
.leaderboard-chart { --bare:#c98500; --named:#199e70; --chart-surface:#0d1b2a; }
.chart-legend { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin:0 0 .75rem; padding:0; list-style:none; color:var(--muted); font-size:.95rem; }
.chart-legend li { display:inline-flex; align-items:center; gap:.45rem; }
.chart-legend .swatch { display:inline-block; width:.8rem; height:.8rem; border-radius:50%; }
.chart-legend .swatch.bare { border:2.5px solid var(--bare); }
.chart-legend .swatch.named { background:var(--named); }
.chart-legend .swatch.band { width:1.6rem; height:.4rem; border-radius:.2rem; background:linear-gradient(90deg,rgb(201 133 0 / 45%),rgb(25 158 112 / 45%)); }
.chart-scroll { max-width:100%; overflow-x:auto; }
.dumbbell-chart { display:block; width:100%; min-width:34rem; height:auto; font:inherit; }
.dumbbell-chart .grid { stroke:#1f3448; stroke-width:1; }
.dumbbell-chart .tick { fill:var(--muted); font-size:13px; }
.dumbbell-chart .label { fill:#dbe7f2; font-size:14px; font-weight:600; }
.dumbbell-chart .rank { fill:var(--muted); font-weight:400; }
.dumbbell-chart .hit { fill:transparent; }
.dumbbell-chart .dumbbell:hover .hit { fill:rgb(94 234 212 / 5%); }
.dumbbell-chart .band { opacity:.38; }
.dumbbell-chart .band.bare { fill:var(--bare); }
.dumbbell-chart .band.named { fill:var(--named); }
.dumbbell-chart .clip { fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.dumbbell-chart .clip.bare { stroke:var(--bare); }
.dumbbell-chart .clip.named { stroke:var(--named); }
.dumbbell-chart .connector { stroke:#7f93a8; stroke-width:2; stroke-linecap:round; }
.dumbbell-chart .point.bare { fill:var(--chart-surface); stroke:var(--bare); stroke-width:2.5; }
.dumbbell-chart .point.named { fill:var(--named); stroke:var(--chart-surface); stroke-width:2; }
@media (forced-colors:active) {
  .dumbbell-chart .point.named,.chart-legend .swatch.named { fill:CanvasText; background:CanvasText; }
  .dumbbell-chart .point.bare { stroke:CanvasText; }
  .dumbbell-chart .connector,.dumbbell-chart .grid { stroke:GrayText; }
}

/* Narrow screens stack definitions while the labeled table region remains scrollable. */
@media (max-width:600px) {
  .leaderboard-page dl { grid-template-columns:1fr; gap:.2rem; }
  .leaderboard-page dd { margin-bottom:.8rem; }
}