/* ZooBench.
   Layout: a fixed instrument rail across the top, then stacked panels on a paper ground.
   The recurring motif is the two-track gap (E vs O) the benchmark exists to measure, so
   paired marks and paired columns are the page's basic unit rather than single values.

   Stage hues are the three buckets, in pipeline order. They come from a palette validated
   for all-pairs CVD separation in both themes; Backtest is deliberately NOT a fourth hue
   (no fourth slot clears the floors against these three) and wears neutral ink instead. */
:root {
  color-scheme: light;

  /* paper + ink: neutrals carry a slight blue bias toward the Theme hue */
  --paper: #f7f8fa;
  --panel: #ffffff;
  --panel-2: #eef1f6;
  --rule: #d8dde7;
  --ink: #11161f;
  --ink-2: #495162;
  --ink-3: #78808f;

  /* the three buckets */
  --theme: #2a78d6;
  --logic: #eb6834;
  --code: #1baf7a;
  --backtest: #5c6678; /* neutral by design, see note above */

  /* regime marks: compositional is hollow, oracle is filled */
  --oracle: #11161f;

  --good: #1a7f4b;
  --warn: #9a6400;
  --bad: #b3261e;

  --shadow: 0 1px 2px rgba(17, 22, 31, 0.06), 0 8px 24px -12px rgba(17, 22, 31, 0.18);

  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --maxw: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0e1116;
    --panel: #151a22;
    --panel-2: #1b222c;
    --rule: #2b3340;
    --ink: #f2f4f8;
    --ink-2: #b2bac8;
    --ink-3: #7e8795;
    --theme: #3987e5;
    --logic: #d95926;
    --code: #199e70;
    --backtest: #8b94a4;
    --oracle: #f2f4f8;
    --good: #35b06c;
    --warn: #d2a008;
    --bad: #e66767;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e1116;
  --panel: #151a22;
  --panel-2: #1b222c;
  --rule: #2b3340;
  --ink: #f2f4f8;
  --ink-2: #b2bac8;
  --ink-3: #7e8795;
  --theme: #3987e5;
  --logic: #d95926;
  --code: #199e70;
  --backtest: #8b94a4;
  --oracle: #f2f4f8;
  --good: #35b06c;
  --warn: #d2a008;
  --bad: #e66767;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; line-height: 1.1; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 1.03rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--theme); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- top rail ---------- */
.rail {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.rail-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 1.1rem; }
.brand .bars { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.brand .bars i { width: 4px; border-radius: 1px 1px 0 0; display: block; }
.brand .bars i:nth-child(1) { height: 56%; background: var(--theme); }
.brand .bars i:nth-child(2) { height: 100%; background: var(--logic); }
.brand .bars i:nth-child(3) { height: 74%; background: var(--code); }

nav { display: flex; gap: 2px; flex-wrap: wrap; }
nav button {
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
}
nav button:hover { background: var(--panel-2); color: var(--ink); }
nav button[aria-current="page"] { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--theme); outline-offset: 2px; }

.rail-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ghost {
  font: inherit; font-size: 0.8rem; color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--rule);
  padding: 6px 10px; border-radius: 7px; cursor: pointer;
}
.ghost:hover { border-color: var(--ink-3); color: var(--ink); }

/* ---------- shell ---------- */
main { max-width: var(--maxw); margin: 0 auto; padding-inline: 16px; padding-block: 28px 72px; }
.view[hidden] { display: none !important; }
.stack { display: grid; gap: 22px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px;
}
.panel.flat { background: none; border: 0; padding: 0; }
.panel-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-head p { color: var(--ink-2); font-size: 0.88rem; }

/* ---------- hero ---------- */
.hero { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.hero-lede { font-size: 1.06rem; color: var(--ink-2); max-width: 60ch; margin-top: 14px; }
.hero h1 em { font-style: normal; color: var(--logic); }

.pipeline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 20px; }
.chip {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em;
  padding: 4px 9px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap;
}
.chip.t { color: var(--theme); }
.chip.l { color: var(--logic); }
.chip.c { color: var(--code); }
.chip.b { color: var(--backtest); }
.pipeline span.arrow { color: var(--ink-3); font-family: var(--mono); }

.countdown { display: flex; gap: 8px; margin-top: 8px; }
.cd-cell { background: var(--panel-2); border: 1px solid var(--rule); border-radius: 9px; padding: 8px 12px; text-align: center; min-width: 62px; }
.cd-cell b { display: block; font-family: var(--mono); font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cd-cell span { font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.provisional { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--rule)); }

/* ---------- stat tiles ---------- */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile { background: var(--panel); border: 1px solid var(--rule); border-radius: 11px; padding: 14px 15px; }
.tile b { display: block; font-family: var(--mono); font-size: 1.6rem; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.15; }
.tile span { font-size: 0.78rem; color: var(--ink-2); }
.tile small { display: block; margin-top: 3px; font-size: 0.7rem; color: var(--ink-3); }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 0; }
thead th {
  text-align: right; padding: 7px 9px; border-bottom: 1.5px solid var(--rule);
  color: var(--ink-2); font-weight: 600; white-space: nowrap;
  font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
}
thead th:first-child, tbody td:first-child { text-align: left; }
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--ink); }
thead th .dir { color: var(--theme); }

/* two-level leaderboard header: regime groups over their stage columns */
thead tr.groups th {
  text-align: center; border-bottom: 0; padding: 6px 9px 5px;
  font-size: 0.62rem; letter-spacing: 0.09em; color: var(--ink-3);
}
thead tr.groups th.grp {
  background: var(--panel-2);
  border-radius: 7px 7px 0 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}
thead tr.groups th.grp:hover { color: var(--ink); }

/* vertical separators between groups, on both header rows and the body cells */
th.g-start, td.g-start { border-left: 1px solid var(--rule); }
tbody td { padding: 8px 9px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--panel-2); }
tbody tr.open { background: var(--panel-2); }
td.model-cell { display: flex; align-items: center; gap: 8px; }

.swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }

.pill {
  display: inline-block; font-family: var(--mono); font-size: 0.68rem;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2);
}
.pill.v { border-color: color-mix(in srgb, var(--theme) 40%, var(--rule)); color: var(--theme); }
.pill.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--rule)); color: var(--warn); }
.pill.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--rule)); color: var(--bad); }
.pill.good { border-color: color-mix(in srgb, var(--good) 45%, var(--rule)); color: var(--good); }

.delta.pos { color: var(--good); }
.delta.zero { color: var(--ink-3); }
.delta.neg { color: var(--bad); }

/* ---------- gap bars (E vs O in one cell) ---------- */
.gapbar { display: inline-flex; align-items: center; gap: 6px; }
.gapbar svg { display: block; }

/* ---------- filters ---------- */
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filters label { font-size: 0.78rem; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
select, input[type="search"] {
  font: inherit; font-size: 0.84rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 7px; padding: 5px 8px;
}

/* ---------- detail drawer ---------- */
/* The drawer sits inside a leaderboard/runs <td>, whose cells are white-space: nowrap
   so numbers never wrap. That would inherit into the drawer and let a long kv value
   ("10 of 30 — calibrated tasks only") run straight over the next column, so prose is
   switched back to wrapping here; the nested numeric tables still get nowrap from the
   tbody td rule, which matches them directly and beats inheritance. */
.detail { white-space: normal; overflow-wrap: anywhere; background: var(--panel-2); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 11px 11px; padding: 16px; margin-bottom: 14px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 20px; }
.kv div { min-width: 0; }
.kv dt { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.kv dd { margin: 1px 0 0; font-family: var(--mono); font-size: 0.82rem; overflow-wrap: anywhere; min-width: 0; }

/* ---------- timeline ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--rule); }
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item::before {
  content: ""; position: absolute; left: -24px; top: 5px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--panel); border: 2.5px solid var(--theme);
}
.tl-item.current::before { background: var(--theme); }
.tl-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tl-head h3 { font-family: var(--mono); font-size: 0.95rem; }
.tl-item p { color: var(--ink-2); font-size: 0.88rem; margin-top: 4px; max-width: 70ch; }
.tl-runs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

/* ---------- prose ---------- */
.prose { max-width: 68ch; display: grid; gap: 14px; }
/* The finding panel wants the full column: 68ch is right for long-form methodology
   prose, but it left the finding stranded in the left half of a wide panel. */
.prose.wide { max-width: none; }
.prose p, .prose li { color: var(--ink-2); }
.prose h2 { color: var(--ink); margin-top: 10px; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.prose code { font-family: var(--mono); font-size: 0.86em; background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.note { border-left: 3px solid var(--warn); padding: 2px 0 2px 13px; color: var(--ink-2); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.78rem; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

footer { max-width: var(--maxw); margin: 0 auto; padding: 22px 16px 40px; color: var(--ink-3); font-size: 0.78rem; border-top: 1px solid var(--rule); }

.tip {
  position: fixed; z-index: 90; pointer-events: none; opacity: 0;
  background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.72rem;
  padding: 6px 9px; border-radius: 6px; transition: opacity 0.1s; max-width: 260px;
}
.tip.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }