/* Outcome metrics and cost metrics read in opposite directions, so hue carries
   the direction and bar length can stay honest to the raw value. Longer is not
   always better — a long "account reads" bar is a worse result, not a win. */
:root {
  --cb-outcome: #0b6e76;
  --cb-cost: #9a5b12;
  --cb-track: rgba(0, 0, 0, 0.07);
}
[data-md-color-scheme="slate"] {
  --cb-outcome: #3fafb6;
  --cb-cost: #c9913f;
  --cb-track: rgba(255, 255, 255, 0.1);
}

/* Gate state is structural, not decorative: an invalid run must not be
   mistakable for a merely low-scoring one at a glance. */
.cb-invalid { opacity: 0.62; }
.cb-badge {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.cb-badge.ok { color: #2c7a55; }
.cb-badge.invalid { color: #a63f38; }
[data-md-color-scheme="slate"] .cb-badge.ok { color: #4fa97c; }
[data-md-color-scheme="slate"] .cb-badge.invalid { color: #d0665c; }

/* Figures line up when they are compared down a column. */
.md-typeset table td:not(:first-child),
.md-typeset table th:not(:first-child) {
  font-variant-numeric: tabular-nums;
}

/* A leaderboard, then a panel per arm — the shape a benchmark reader already
   knows. It replaced a card grid whose bars were a 6px strip: too thin for
   colour to be legible, and too thin for length to be either. These tracks are
   1rem and 1.25rem, which is the whole reason they read. */

/* ── the leaderboard ───────────────────────────────────────────────────── */

.cb-board {
  list-style: none;
  margin: 1.2rem 0 2rem;
  padding: 0;
}
.md-typeset .cb-board li { margin: 0; }

.cb-board-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(8rem, 13rem) minmax(0, 1fr) 3.6rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--cb-track);
}
.cb-board-row.pending { opacity: 0.55; }

.cb-rank {
  font-size: 0.72rem;
  text-align: right;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* Who this is, answered before anything is compared. The name was body-size in
   link blue under a 2rem figure, which read as a caption rather than the
   subject. */
.cb-who { display: flex; flex-direction: column; min-width: 0; }
.cb-who-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--md-default-fg-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-who-name:hover,
.cb-who-name:focus { color: var(--md-accent-fg-color); }
.cb-who-sub { font-size: 0.68rem; opacity: 0.6; }
/* The control is marked in place rather than moved to the bottom. Where it
   lands is the point. */
.cb-who-sub .cb-tag {
  margin-left: 0.3rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 0.25rem;
  opacity: 0.8;
}

.cb-board-value {
  text-align: right;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cb-board-row .cb-track { height: 1.25rem; border-radius: 3px; }

/* ── picking an arm ───────────────────────────────────────────────────── */

/* The radios drive everything and are never seen. Kept focusable and on-screen
   rather than display:none, so the rows stay reachable from the keyboard. */
.cb-pick {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cb-board-row { cursor: pointer; }

.cb-explorer > .cb-pick:nth-of-type(1):checked ~ .cb-board > li:nth-child(1) > .cb-board-row,
.cb-explorer > .cb-pick:nth-of-type(2):checked ~ .cb-board > li:nth-child(2) > .cb-board-row,
.cb-explorer > .cb-pick:nth-of-type(3):checked ~ .cb-board > li:nth-child(3) > .cb-board-row,
.cb-explorer > .cb-pick:nth-of-type(4):checked ~ .cb-board > li:nth-child(4) > .cb-board-row,
.cb-explorer > .cb-pick:nth-of-type(5):checked ~ .cb-board > li:nth-child(5) > .cb-board-row,
.cb-explorer > .cb-pick:nth-of-type(6):checked ~ .cb-board > li:nth-child(6) > .cb-board-row,
.cb-explorer > .cb-pick:nth-of-type(7):checked ~ .cb-board > li:nth-child(7) > .cb-board-row,
.cb-explorer > .cb-pick:nth-of-type(8):checked ~ .cb-board > li:nth-child(8) > .cb-board-row,
.cb-explorer > .cb-pick:nth-of-type(9):checked ~ .cb-board > li:nth-child(9) > .cb-board-row,
.cb-explorer > .cb-pick:nth-of-type(10):checked ~ .cb-board > li:nth-child(10) > .cb-board-row {
  background: var(--cb-track);
  border-left-color: var(--cb-outcome);
  font-weight: 600;
}
.cb-board-row { border-left: 2px solid transparent; }

/* One panel set on screen at a time — the picked arm's. Every arm has the same
   panels, so switching compares like with like. */
.cb-panelset { display: none; }
.cb-explorer > .cb-pick:nth-of-type(1):checked ~ .cb-panelsets > .cb-panelset:nth-child(1),
.cb-explorer > .cb-pick:nth-of-type(2):checked ~ .cb-panelsets > .cb-panelset:nth-child(2),
.cb-explorer > .cb-pick:nth-of-type(3):checked ~ .cb-panelsets > .cb-panelset:nth-child(3),
.cb-explorer > .cb-pick:nth-of-type(4):checked ~ .cb-panelsets > .cb-panelset:nth-child(4),
.cb-explorer > .cb-pick:nth-of-type(5):checked ~ .cb-panelsets > .cb-panelset:nth-child(5),
.cb-explorer > .cb-pick:nth-of-type(6):checked ~ .cb-panelsets > .cb-panelset:nth-child(6),
.cb-explorer > .cb-pick:nth-of-type(7):checked ~ .cb-panelsets > .cb-panelset:nth-child(7),
.cb-explorer > .cb-pick:nth-of-type(8):checked ~ .cb-panelsets > .cb-panelset:nth-child(8),
.cb-explorer > .cb-pick:nth-of-type(9):checked ~ .cb-panelsets > .cb-panelset:nth-child(9),
.cb-explorer > .cb-pick:nth-of-type(10):checked ~ .cb-panelsets > .cb-panelset:nth-child(10) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.6rem;
}

/* ── the metric panels ────────────────────────────────────────────────── */

.cb-mpanels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.6rem;
}

.cb-mpanel {
  border: 1px solid var(--cb-track);
  border-radius: 6px;
  padding: 1rem 1.1rem 1.15rem;
}
.cb-mpanel-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.md-typeset .cb-mpanel-title { margin: 0; }
.cb-mpanel-note {
  margin: 0.3rem 0 0.9rem;
  font-size: 0.7rem;
  opacity: 0.65;
  line-height: 1.45;
}
.cb-mpanel-sub {
  margin: 0.9rem 0 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}
.cb-mpanel-sub:first-of-type { margin-top: 0; }

.cb-mrows { display: flex; flex-direction: column; gap: 0.35rem; }

/* name | bar | figure, the same shape as the leaderboard so the eye can move
   between them without relearning the row. */
.cb-mrow {
  display: grid;
  grid-template-columns: minmax(4.5rem, 6.5rem) minmax(0, 1fr) 4.4rem;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
}
.cb-mrow-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-mrow-value { text-align: right; font-variant-numeric: tabular-nums; }

/* The arm's own value leads; best and field average are context behind it. */
.cb-mrow.self { font-weight: 700; }
.cb-mrow.ref { opacity: 0.6; }
.cb-mrow.ref .cb-mrow-name { font-style: italic; }

/* Pass rate by question is eight rows of long task names, so it gets the full
   width rather than being squeezed into a column beside the three-row panels. */
.cb-mpanel.wide { grid-column: 1 / -1; }
.cb-mpanel.wide .cb-mrow {
  grid-template-columns: minmax(9rem, 18rem) minmax(0, 1fr) 3rem;
}
.cb-mrow .cb-track { height: 0.85rem; }

/* ── the bars ──────────────────────────────────────────────────────────── */

.cb-track {
  display: block;
  width: 100%;
  height: 1rem;
  border-radius: 3px;
  background: var(--cb-track);
  overflow: hidden;
}
.cb-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
}
/* The dark value travels with the element rather than being recomputed, so a
   colour is only ever chosen once. A var() standing alone as the whole value is
   safe, unlike the var()-inside-hsl() this replaces, which dropped out at
   computed-value time and painted every bar the track colour. */
[data-md-color-scheme="slate"] .cb-fill { background: var(--cb-dark) !important; }

.cb-pending-note { font-size: 0.78rem; margin: 0; opacity: 0.8; }

@media print {
  .cb-track { display: none; }
}

/* ── an expandable question ───────────────────────────────────────────── */

/* The slug is a filename. Opening the row shows what was actually asked and
   what the answer is graded against, so a 2/3 can be looked into rather than
   just noted. */
.cb-q > summary {
  cursor: pointer;
  list-style: none;
}
.cb-q > summary::-webkit-details-marker { display: none; }
.cb-q > summary:hover .cb-mrow-name { color: var(--md-accent-fg-color); }
.cb-q[open] > summary .cb-mrow-name { font-weight: 700; }

.cb-q-body {
  padding: 0.5rem 0 0.7rem 0.4rem;
  border-left: 2px solid var(--cb-track);
  margin: 0.35rem 0 0.6rem 0.4rem;
}
.md-typeset .cb-q-body p { margin: 0 0 0.3rem; font-size: 0.76rem; }
.cb-q-prompt { font-weight: 600; }
.cb-q-truth { opacity: 0.75; }

/* How the rest of the field did — whether a question is hard for this tool or
   hard for everyone. The cross-arm table that used to carry this was the
   transpose of the panel above it, so it went and this stayed. */
.cb-q-field { opacity: 0.75; }
.cb-q-marks { margin-left: 0.5rem; letter-spacing: 0.15em; }
.md-typeset .cb-q-link { margin: 0.4rem 0 0; font-size: 0.72rem; }

/* ── the agent environment ────────────────────────────────────────────── */

/* Two arms differing on a number only means something if they were set up the
   same way, so the setup is published rather than described. */
.cb-env {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: 0.3rem 0.9rem;
  margin: 0;
  font-size: 0.74rem;
}
.md-typeset .cb-env dt { opacity: 0.65; margin: 0; }
.md-typeset .cb-env dd { margin: 0; }

.cb-briefing { margin-top: 0.9rem; }
.cb-briefing > summary {
  cursor: pointer;
  font-size: 0.74rem;
  opacity: 0.8;
}
.cb-briefing pre {
  max-height: 24rem;
  overflow: auto;
  font-size: 0.7rem;
  line-height: 1.5;
}

/* ── the rows are controls ────────────────────────────────────────────── */

/* Nothing said these were clickable: no chevron, no hover, and the only
   selected-state was a left border most people would read as decoration. A row
   that does something has to look like it does something before it is clicked. */
.cb-chev {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.35;
  transition: opacity 120ms ease, transform 120ms ease;
}
.cb-board-row { grid-template-columns: 1.5rem minmax(8rem, 13rem) minmax(0, 1fr) 3.6rem 1rem; }
.cb-board-row:hover { background: var(--cb-track); }
.cb-board-row:hover .cb-chev { opacity: 0.8; transform: translateX(2px); }
.cb-board-row.pending { cursor: default; }
.cb-board-row.pending:hover { background: none; }

/* Keyboard users get the same signal: the label is what has focus. */
.cb-pick:focus-visible ~ .cb-board .cb-board-row { outline: none; }
.cb-pick:focus-visible + * { outline: none; }

.cb-panelsets { scroll-margin-top: 3.5rem; }

/* The command that repeats the run sits with the rest of that run's
   provenance, because "can I check this" and "what produced this" are the
   same question. */
.cb-env-repro {
  margin: 0.8rem 0 0;
  font-size: 0.74rem;
  opacity: 0.85;
}
.cb-env-repro code { margin-left: 0.4rem; }