/* Model comparison and model detail: accuracy tables shaded on a one-hue sequential scale. */
:root {
  color-scheme: light;
  --ink: #172b3b;
  --ink-soft: #3d5263;
  --muted: #6a7b89;
  --canvas: #f2f6f8;
  --panel: #ffffff;
  --line: #dbe4ea;
  --line-strong: #c9d6df;
  --blue: #245dd8;
  --teal: #0c8d83;
  --warning: #b96a1c;
  --system: #bd4f4f;
  /* Sequential blue steps 100, 200, 300, 500 and 650; text on each clears 4.5:1. */
  --band-0: #cde2fb;
  --band-1: #9ec5f4;
  --band-2: #6da7ec;
  --band-3: #256abf;
  --band-4: #104281;
  --no-score: #f4f7f9;
  font: 14px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
a { color: inherit; }
select, input { font: inherit; }
[hidden] { display: none !important; }

a:focus-visible,
select:focus-visible,
input:focus-visible,
.table-scroll:focus-visible {
  outline: 3px solid #8db0ff;
  outline-offset: 3px;
}

.skip-link:not(:focus),
caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  z-index: 10;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  background: white;
  box-shadow: 0 4px 20px #1b31452e;
}

.topbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 12px 38px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; width: max-content; text-decoration: none; font-size: 18px; font-weight: 450; letter-spacing: -0.35px; }
.brand strong { font-weight: 760; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 8px; background: var(--ink); color: white; font-size: 21px; }
.app-nav { display: flex; align-self: stretch; gap: 7px; }
.app-nav a {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
}
.app-nav a:hover { color: var(--ink); }
.app-nav a[aria-current="page"] { border-color: var(--blue); color: var(--blue); }
.snapshot-status {
  justify-self: end;
  padding: 7px 11px;
  border: 1px solid #c8e6dd;
  border-radius: 999px;
  background: #eef9f5;
  color: #176b54;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

main { max-width: 1540px; margin: 0 auto; padding: 34px 38px 24px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 22px; }
.eyebrow,
.page-footer { margin: 0; color: #617b91; font-size: 10px; font-weight: 720; letter-spacing: 1.15px; }
h1 { margin: 6px 0 0; font-size: 30px; line-height: 1.2; letter-spacing: -0.9px; overflow-wrap: anywhere; }
.subtitle { max-width: 760px; margin: 8px 0 0; color: var(--muted); font-size: 13px; }

.rows-toggle { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; border: 0; }
.rows-toggle legend { float: left; margin-right: 10px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.rows-toggle label {
  position: relative;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  background: white;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.rows-toggle label:first-of-type { border-radius: 7px 0 0 7px; }
.rows-toggle label:last-of-type { margin-left: -1px; border-radius: 0 7px 7px 0; }
.rows-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.rows-toggle label:has(input:checked) { z-index: 1; border-color: var(--blue); background: #eaf0ff; color: var(--blue); }
.rows-toggle label:has(input:focus-visible) { outline: 3px solid #8db0ff; outline-offset: 2px; }

.model-picker { width: min(420px, 42vw); color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.model-picker span { display: block; margin-bottom: 7px; letter-spacing: 0.3px; }
.model-picker select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: white;
  color: var(--ink);
  font-size: 12px;
}

.view-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 22px;
  min-height: 50px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-strong);
}
.view-tabs { display: flex; align-self: stretch; gap: 27px; }
.view-tabs a {
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
}
.view-tabs a:hover { color: var(--ink); }
.view-tabs a[aria-current="page"] { border-color: var(--teal); color: var(--ink); }

.score-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 10px; }
.score-legend li { display: flex; align-items: center; gap: 5px; }
.legend-swatch { width: 14px; height: 14px; border-radius: 3px; background: var(--no-score); box-shadow: inset 0 0 0 1px #0000000f; }

.state-card {
  margin: 18px 0;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--ink-soft);
}
.state-card[data-kind="loading"] { border-left: 3px solid var(--blue); }
.state-card[data-kind="empty"] { border-left: 3px solid var(--warning); }
.state-card[data-kind="error"] { border-left: 3px solid var(--system); color: #8c3e3e; }

.table-note { margin: 0 0 12px; color: var(--muted); font-size: 11px; }

/* The top bar scrolls away with the page, so a table can be as tall as the window. The footer
   follows the table and shows only after the page scrolls past it. Browsers without dvh use vh. */
.table-scroll {
  max-height: 100vh;
  max-height: 100dvh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}
.score-table { border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; }
.score-table th { background: white; color: var(--ink-soft); font-size: 11px; font-weight: 650; }
.score-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 10px 8px;
  vertical-align: bottom;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.3px;
}
.score-table tbody th {
  position: sticky;
  z-index: 1;
  left: 0;
  padding: 6px 14px 6px 12px;
  text-align: left;
  white-space: nowrap;
}
.score-table thead th.corner { z-index: 3; left: 0; text-align: left; text-transform: uppercase; }
.task-heading span { font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.task-heading .task-link { color: var(--blue); text-decoration: none; text-underline-offset: 2px; }
.task-heading .task-link:hover { text-decoration: underline; }
/* A vertical task heading clips its overflow, so its span draws the link's focus ring. */
.task-heading .task-link:focus-visible { outline: none; }
.task-heading span:has(> .task-link:focus-visible) { outline: 3px solid #8db0ff; outline-offset: 2px; }
.model-heading { min-width: 96px; }
thead .model-heading { max-width: 170px; overflow-wrap: anywhere; }
.model-heading a { color: var(--blue); text-decoration: none; }
.model-heading a:hover { text-decoration: underline; }
.score-table[data-columns="tasks"] thead th.task-heading { text-align: left; }
.score-table[data-columns="tasks"] thead th.task-heading > span { display: inline-block; max-height: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }

.score-cell {
  min-width: 66px;
  height: 30px;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--no-score);
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
}
.score-cell:hover { outline: 2px solid var(--ink); outline-offset: -1px; }
.no-score { color: #9aa9b4; }
.no-score:hover { outline: 0; }
[data-band="0"] { background: var(--band-0); }
[data-band="1"] { background: var(--band-1); }
[data-band="2"] { background: var(--band-2); }
[data-band="3"] { background: var(--band-3); color: white; }
[data-band="4"] { background: var(--band-4); color: white; }

.level-table .score-cell { min-width: 44px; padding: 4px 3px; }
.level-table .score-cell.overall { min-width: 60px; font-weight: 760; }
.level-table thead th { min-width: 44px; text-align: center; }
.level-prefix { display: block; font-size: 8px; letter-spacing: 0.6px; text-transform: uppercase; }

.page-footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px 2px 0; font-size: 8px; letter-spacing: 0.8px; }

@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr auto; gap: 12px; padding: 12px 16px; }
  .app-nav { grid-column: 1 / -1; grid-row: 2; min-height: 36px; justify-content: center; border-top: 1px solid var(--line); }
  .app-nav a { padding: 0 10px; }
  main { padding: 24px 16px 18px; }
  .page-heading { align-items: start; flex-direction: column; gap: 18px; }
  .model-picker { width: 100%; }
  .page-footer { flex-direction: column; gap: 4px; }
}

/* Score and Rows switches, the legend title, and each model's wins and mean score. */
.table-controls { display: flex; flex-direction: column; align-items: end; gap: 10px; }
.rows-toggle label:not(:first-of-type) { margin-left: -1px; }
.legend-title { color: var(--ink); font-weight: 700; }
.score-table tfoot th {
  position: sticky;
  z-index: 1;
  left: 0;
  padding: 6px 14px 6px 12px;
  text-align: left;
  white-space: nowrap;
}
.score-table tfoot tr:first-child > * { border-top: 2px solid var(--line-strong); }
.total-heading { min-width: 70px; text-align: center; }
.total-cell {
  min-width: 70px;
  padding: 4px 8px;
  background: #f8fafb;
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .table-controls { align-items: start; }
}

/* A score table is as wide as the sum of its column widths, and its scroll region ends at the
   table's right edge, up to the screen width. The sticky first column has a draggable divider. */
main:has(.score-table) { max-width: none; padding-inline: 16px; }
main:has(.score-table) .table-scroll { width: fit-content; max-width: 100%; border-radius: 0; }
.level-table .task-heading,
.level-table .corner { width: var(--task-column-width, 340px); min-width: var(--task-column-width, 340px); max-width: var(--task-column-width, 340px); box-sizing: border-box; }
.level-table .task-heading > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.level-table .corner { position: sticky; padding-right: 14px; }
/* One task names the task's maximum difficulty beside the Model heading. */
.level-table .corner-task-maximums { margin-left: 8px; font-size: 9px; font-weight: 500; color: var(--muted); text-transform: none; }
.task-column-resize { position: absolute; top: 0; right: -2px; width: 12px; height: 100%; padding: 0; border: 0; border-right: 2px solid var(--line-strong); background: transparent; cursor: col-resize; touch-action: none; }
.task-column-resize:hover { border-color: var(--blue); }
.task-column-resize:focus-visible { outline: 3px solid #8db0ff; outline-offset: -3px; }
/* Score columns narrower than 64 px drop most padding, so "100%" and "Level" fit at 40 px. The task
   maximum marker moves to the cell's top corner, above the first value line, and a value that still
   does not fit ends with an ellipsis. */
.score-table[data-narrow-columns] td.score-cell:not(.overall) { position: relative; padding-inline: 1px; }
.score-table[data-narrow-columns] td.score-cell:not(.overall) .score-link { position: static; padding-inline: 1px; overflow: hidden; text-overflow: ellipsis; }
.score-table[data-narrow-columns] td.score-cell:not(.overall) .metric-value { overflow: hidden; text-overflow: ellipsis; }
.score-table[data-narrow-columns] td.score-cell:not(.overall) .maximum-level-marker { top: 0; right: 1px; font-size: 7px; line-height: 6px; }
.score-table[data-narrow-columns] .level-heading,
.score-table[data-narrow-columns] thead .task-heading { padding-inline: 2px; }
.detail-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 16px; }
.metric-checkboxes { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 6px; }
.metric-checkboxes legend { padding-inline: 4px; font-size: 11px; font-weight: 700; }
.metric-checkboxes label { display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; }
.metric-checkboxes input { accent-color: var(--blue); }
.metric-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.metric-choice select { max-width: 135px; min-height: 28px; padding: 3px 5px; border: 1px solid var(--line-strong); border-radius: 4px; background: white; color: var(--ink); font-size: 11px; }
.outcome-picker { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 700; }
.outcome-picker select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: white; color: var(--ink); }
.metric-help { margin: 0; font-size: 11px; color: var(--muted); }

/* Help text behind a small "i": it opens as a popover so it never pushes the table down. */
.info-tip { position: relative; align-self: center; }
.info-tip summary { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 50%; background: white; color: var(--muted); font: italic 700 11px/1 Georgia, serif; list-style: none; cursor: pointer; }
.info-tip summary::-webkit-details-marker { display: none; }
.info-tip summary:hover,
.info-tip[open] summary { border-color: var(--blue); color: var(--blue); }
.info-tip summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.info-tip-text { position: absolute; z-index: 20; top: 24px; left: 0; width: min(440px, calc(100vw - 48px)); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: white; box-shadow: 0 6px 18px rgb(15 23 42 / 12%); }
.info-tip[data-align="end"] .info-tip-text { right: 0; left: auto; }
.level-table .score-link { display: flex; min-height: 30px; height: 100%; flex-direction: column; justify-content: center; padding-inline: 6px; }
.level-table .metric-value { display: block; line-height: 16px; }
.metric-sample { margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line-strong); padding-left: 12px; font-size: 11px; }
.metric-sample legend { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.metric-sample ol { list-style: none; margin: 4px 0 0; padding: 0; }
.metric-sample li { line-height: 1.4; }
.level-table .resource-cell { background: white; box-shadow: inset 0 0 0 1px var(--line); }

.overall-heading input { width: 11px; height: 11px; margin-left: 3px; accent-color: var(--blue); cursor: pointer; }
.has-pinned-overall .overall-heading,
.has-pinned-overall td.overall { position: sticky; left: calc(var(--task-column-width, 340px) + 2px); z-index: 2; }
.has-pinned-overall .overall-heading { z-index: 4; background: white; }

.resource-legend { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.resource-gradient { display: inline-block; flex: 0 0 80px; height: 12px; border-radius: 3px; background: linear-gradient(to right, var(--band-0), var(--band-4)); }

/* Optional task maxima stay in the cell corner without changing virtual row heights. */
.score-cell .score-link { position: relative; }
.maximum-level-marker { position: absolute; top: 1px; right: 3px; font-size: 8px; line-height: 12px; }
.score-link:has(.maximum-level-marker) { padding-right: 15px; }
.maximum-level-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 12px; color: var(--muted); font-size: 11px; }
.maximum-level-controls label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.maximum-level-controls input { accent-color: var(--blue); }
.maximum-level-controls p { margin: 0; }
.crossing-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.crossing-controls label { display: flex; flex-direction: column; gap: 5px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.crossing-controls select { min-height: 32px; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 5px; background: white; color: var(--ink); }
.crossing-interval { display: block; font-size: 9px; line-height: 14px; font-weight: 500; }
@media (max-width: 900px) {
  .rows-toggle { flex-wrap: wrap; row-gap: 4px; }
  .rows-toggle legend { float: none; width: 100%; margin: 0 0 5px; }
}

/* Comparison model names use the same divider as the detail task column. */
.comparison-table .model-heading { position: relative; min-width: 0; box-sizing: border-box; }
.comparison-table .model-heading a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comparison-table thead .model-heading { padding-right: 16px; }
.comparison-table .task-heading > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.comparison-table .task-maximum { margin-left: 6px; font-weight: 500; color: var(--muted); }
.crossing-method-info { font-size: 11px; line-height: 1.5; }

/* Task metadata uses the existing score row height, beneath the task name. */
.comparison-table tbody .task-heading { padding-block: 2px; }
.comparison-table tbody .task-heading .task-link { display: block; line-height: 14px; overflow: hidden; text-overflow: ellipsis; }
.comparison-table .task-heading .task-maximums { display: block; line-height: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comparison-table .task-maximum:first-child { margin-left: 0; }
.model-order-group { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: 4px; }
.model-order-group > a { flex: 1; min-width: 0; }
.model-drag-handle { display: flex; align-items: center; justify-content: center; flex: 0 0 20px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: grab; }
.model-drag-handle svg { fill: currentColor; }
.model-drag-handle:active { cursor: grabbing; }
.model-drag-handle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* Model names sort tasks; the adjacent arrow opens the model detail view. */
.model-order-group .model-sort { flex: 1; min-width: 0; }
.model-sort { display: flex; align-items: center; gap: 3px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.model-sort svg { flex: 0 0 auto; }
/* A model name that does not fit ends with an ellipsis, and the sort arrow after it stays visible. */
.model-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.model-order-group .model-detail-link { flex: 0 0 14px; }
.model-detail-link { display: inline-flex; align-items: center; justify-content: center; }
.model-sort:focus-visible, .model-detail-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Whole-table insertion lines distinguish the two sides of every model. */
.model-sort[draggable="true"] { cursor: grab; }
.model-sort[draggable="true"]:active { cursor: grabbing; }
.comparison-table [data-model-dragging] .model-order-group { opacity: .5; }
.comparison-table th[data-model-drop]::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--blue); box-shadow: 0 0 0 1px white; pointer-events: none; z-index: 6; }
.comparison-table th[data-model-drop="before"]::after { left: -2px; }
.comparison-table th[data-model-drop="after"]::after { right: -2px; }
.comparison-table th[scope="row"][data-model-drop]::after { left: 0; right: 0; width: auto; height: 3px; }
.comparison-table th[scope="row"][data-model-drop="before"]::after { top: -2px; bottom: auto; }
.comparison-table th[scope="row"][data-model-drop="after"]::after { bottom: -2px; top: auto; }