/* Shared table styles for the board and arena preview. */
.board-page,.board-preview { --ink-soft:#666666; --ink-faint:rgba(34,34,34,.46); --accent-blue:var(--ink); }
.board-heading { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.board-heading h1 { margin:0; }
.board-chip { display:inline-block; border:1px solid var(--hair-strong); border-radius:2px; padding:3px 7px; font:var(--data); font-size:11px; color:var(--ink); white-space:nowrap; }
[data-state="collecting"] .board-chip, [data-state="preliminary"] .board-chip { background:var(--ink); border-color:var(--ink); color:#fff; }
.board-meta { font:var(--data); color:var(--ink-soft); margin:14px 0 30px; line-height:1.8; }
/* One plain line under the board meta, read before the numbers. */
.board-page .board-preliminary { color:var(--ink); margin:-16px 0 22px; text-wrap:pretty; }
.board-toolbar { display:flex; align-items:center; height:44px; gap:0; margin-bottom:12px; font:var(--data); position:relative; }
.board-toolbar button,.board-filter-row button { font:inherit; color:var(--ink); background:none; border:0; cursor:pointer; }
#filter-toggle { display:flex; align-items:center; gap:8px; height:44px; padding:0; margin-right:auto; }
.filter-chevron { width:12px; height:12px; flex:none; transition:transform .18s ease; }
@media(prefers-reduced-motion:reduce) { .filter-chevron { transition:none; } }
#filter-toggle[aria-expanded=true] .filter-chevron { transform:rotate(180deg); }
.board-actions { display:flex; order:2; }
.board-icon { display:grid; place-items:center; width:44px; height:44px; padding:0; }
.board-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.board-icon:hover { background:var(--paper-2); }
.board-toolbar input[type=search] { border:1px solid var(--hair-strong); background:var(--page); color:var(--ink); border-radius:2px; padding:11px 12px; font:var(--data); height:44px; }
#board-search { order:1; width:240px; min-width:0; margin-left:16px; }
.board-filter-row { display:flex; align-items:center; gap:24px; height:56px; font:var(--data); border-block:1px solid var(--hair); margin-bottom:12px; }
.provider-filters { display:flex; align-items:center; gap:8px; }
/* Weights and rated-only first, behind a hairline; the labs wrap in the room that is left. */
.board-filter-row:not([hidden]) { height:auto; min-height:56px; align-items:flex-start; padding-block:12px; }
.filter-kinds { display:flex; align-items:center; gap:8px; flex:none; padding-right:24px; border-right:1px solid var(--hair); }
.lab-filters { flex:1 1 0; min-width:0; flex-wrap:wrap; }
@media(min-width:700px) { .board-filter-row:not([hidden]) #clear-filters { margin-block:-7px; } }
.board-filter-row .filter-pill { height:30px; padding:0 10px; border:1px solid var(--hair); border-radius:16px; font:var(--label); letter-spacing:.04em; white-space:nowrap; }
.board-filter-row .filter-pill[aria-pressed=true] { background:var(--ink); color:var(--page); border-color:var(--ink); }
.board-filter-row .filter-pill:hover { border-color:var(--ink); }
#clear-filters { margin-left:auto; min-height:44px; padding:0; color:var(--ink-soft); }
#clear-filters:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.board-toolbar [hidden],.board-filter-row[hidden],.board-filter-row [hidden] { display:none; }
@media(min-width:700px) and (max-width:1100px) { .board-filter-row { overflow-x:auto; } }
@media(max-width:699px) { .board-filter-row { height:auto; min-height:56px; flex-wrap:wrap; gap:12px 24px; padding-block:12px; } .provider-filters { flex-wrap:wrap; width:100%; } .filter-kinds { flex-wrap:wrap; width:100%; padding:0 0 12px; border-right:0; border-bottom:1px solid var(--hair); } .filter-kinds > .provider-filters { width:auto; } .lab-filters { flex-basis:100%; } }
.board-table { width:100%; table-layout:fixed; font:var(--data); font-variant-numeric:tabular-nums; border-collapse:separate; border-spacing:0; border:1px solid var(--hair-strong); border-radius:6px; }
.board-table th:first-child { border-top-left-radius:6px; } .board-table th:last-child { border-top-right-radius:6px; }
.board-table tbody>tr:last-child>td { border-bottom:0; }
.board-table tbody>tr:last-child>td:first-child { border-bottom-left-radius:6px; } .board-table tbody>tr:last-child>td:last-child { border-bottom-right-radius:6px; }
.board-table th,.board-table td { padding:10px 16px; text-align:right; border-bottom:1px solid var(--hair); vertical-align:middle; }
.board-table th:not(:last-child),.board-table tr[data-model]>td:not(:last-child),.board-table .table-message>td:not(:last-child) { border-right:1px solid var(--hair); }
.board-table tr[data-model] { height:64px; }
.board-table th { padding-block:0; white-space:nowrap; color:var(--ink-soft); background:var(--page); }
.board-table th[aria-sort=ascending],.board-table th[aria-sort=descending] { color:var(--ink); }
.board-table th button { font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; background:none; border:0; cursor:pointer; padding:14px 0; min-height:44px; }
.board-table [data-column=rank],.board-table [data-column=name] { text-align:left; }
.board-table [data-column=rank] { width:72px; }
.board-table [data-column=name] { width:auto; }
.board-table [data-column=rating] { width:250px; }
.board-table [data-column=votes] { width:90px; }
.board-table .model a { text-decoration:none; font:var(--data); font-size:15px; line-height:21px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.model-name { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.model-row { display:flex; align-items:center; gap:12px; min-width:0; }
.lab-mark { flex:none; width:20px; height:20px; background:var(--ink); -webkit-mask:var(--mark) center / contain no-repeat; mask:var(--mark) center / contain no-repeat; }
.lab-mark-initial { background:none; border:1px solid var(--hair-strong); border-radius:3px; display:grid; place-items:center; font:var(--label); font-size:10px; color:var(--ink-soft); }
.board-compact .lab-mark { width:16px; height:16px; }
.model-text { flex:1; min-width:0; }
.board-table .sub { color:var(--ink-soft); font:var(--data); font-size:12px; line-height:15px; letter-spacing:0; margin-top:3px; }
.point-rank { font-size:15px; line-height:18px; }
.rank-range { display:block; font-size:12px; line-height:15px; color:var(--ink-soft); margin-top:3px; white-space:nowrap; }
.board-table .score { font-size:17px; white-space:nowrap; }
.board-table .ci { color:var(--ink-soft); font-size:12px; display:inline-block; margin-left:2px; }
.board-table .row-maturity { display:block; width:max-content; max-width:100%; margin:5px 0 0 auto; font-size:10px; }
.board-table .collecting-score { font:var(--data); color:var(--ink-soft); white-space:normal; }
.board-table .gate-progress { display:block; margin-top:2px; font-size:12px; color:var(--ink-faint); }
@media (max-width:700px) { .board-table .gate-progress { display:none; } .board-table .collecting-score { display:inline-block; font-size:12px; line-height:1.3; } }
.board-table .table-message td { text-align:left; color:var(--ink-soft); line-height:1.6; }
.board-about { margin-top:22px; border-bottom:1px solid var(--hair); font:var(--data); line-height:1.7; }
.board-about p { max-width:80ch; }
.board-about>a { display:inline-block; margin-bottom:20px; }
.snapshot-id { overflow-wrap:anywhere; }
.phone-only { display:none; }
.board-mobile-sort { display:flex; align-items:center; gap:8px; font:var(--label); }
.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; }
.column-heading { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-height:44px; }
[data-column=rank] .column-heading,[data-column=name] .column-heading { justify-content:flex-start; }
[data-column=rating] .column-heading { justify-content:space-between; }
.score-scale { display:flex; justify-content:space-between; flex:1; min-width:0; color:var(--ink-faint); font-size:10px; font-weight:400; letter-spacing:0; }
.score-cell { display:flex; align-items:baseline; gap:12px; }
.score-value { flex:none; width:88px; text-align:left; }
[data-column=rating] .column-heading>button,[data-column=rating] .column-label { width:88px; flex:none; text-align:left; }
.score-chart { position:relative; display:block; flex:1; min-width:24px; height:6px; max-height:6px; background:var(--paper-3); margin-inline:1px; }
.score-bar { position:absolute; display:block; left:0; top:0; height:6px; background:var(--ink); }
.score-whisker { position:absolute; display:block; top:-2px; height:10px; border-inline:1px solid var(--ink-soft); }
.score-whisker::after { content:""; position:absolute; left:0; right:0; top:4px; border-top:1px solid var(--ink-soft); }
.score-tick { position:absolute; top:-2px; height:10px; border-left:1px solid var(--ink); }
.sort-glyph { color:var(--ink); font-size:9px; }
.board-preview { border-top:1px solid var(--hair); margin-top:40px; padding-top:16px; font:var(--data); }
.board-preview[hidden] { display:none; }
.board-preview-heading { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
main .board-preview h2 { font:400 28px/1.2 "Fraunces",Georgia,serif; letter-spacing:0; margin:0; }
.board-compact tr[data-model] { height:50px; }
.board-compact td { padding-block:6px; }
.board-compact .model a { font-size:15px; }
.board-compact .sub { font-size:12px; margin-top:0; }
.board-compact .rank-range { margin-top:0; }
.board-compact .column-heading { min-height:44px; }
.board-compact [data-column=votes] { width:90px; }

.board-preview-link { display:flex; align-items:center; justify-content:flex-end; width:max-content; max-width:100%; margin:16px 0 0 auto; min-height:44px; color:var(--ink); text-decoration:none; }
.board-preview-link:hover { text-decoration:underline; text-underline-offset:3px; }
.preview-retry { font:inherit; background:none; border:0; text-decoration:underline; color:var(--ink); cursor:pointer; min-height:44px; }
@media(min-width:701px) {
  .board-page .board-table thead { position:sticky; top:var(--board-nav-height,80px); z-index:2; background:var(--page); box-shadow:0 1px var(--hair); border-radius:6px 6px 0 0; }
}
@media(max-width:1000px) and (min-width:701px) {
  .board-table [data-column=rank] { width:72px; }
  .board-table [data-column=rating] { width:170px; }
  .board-table [data-column=votes] { width:76px; }
  .score-value { width:42px; }
  [data-column=rating] .column-heading>button,[data-column=rating] .column-label { width:42px; }
  .score-value .ci { display:block; margin-left:0; }
}
@media(max-width:700px) {
  .board-heading { gap:12px; }
  .board-meta { margin:12px 0 22px; font-size:12px; }
  .board-toolbar.search-open { height:96px; flex-wrap:wrap; row-gap:8px; }
  #board-search { order:3; flex-basis:100%; width:100%; margin:0; }
  .board-mobile-sort { display:flex; align-items:center; justify-content:flex-end; gap:8px; font-size:12px; margin:0; }
  .board-mobile-sort select { padding:11px 5px; font-size:12px; border-radius:2px; }
  /* Explicit tracks keep disclosure colspans from allocating hidden columns. */
  .board-table,.board-table thead,.board-table tbody { display:block; }
  .board-table tr { display:grid; grid-template-columns:60px minmax(0,1fr) 92px; }
  .board-table .score-chart, .board-table .score-scale { display:none; }
  .board-table .model a { white-space:normal; overflow:visible; text-overflow:clip; font-size:14.5px; line-height:1.25; }
  .score-value { width:auto; }
  .board-table th,.board-table td { display:block; min-width:0; }
  .board-table th { font-size:10px; letter-spacing:.04em; }
  .board-table tr[data-model] { height:auto; min-height:72px; }
  .board-table [data-column=rank],.board-table [data-column=name],.board-table [data-column=rating] { width:auto; }
  .board-table th[data-column=rating],.board-table td[data-column=rating] { border-right:0; }
  .board-table .model { position:relative; }
  .model-name,.board-table .model a { display:block; }
  .board-table .phone-only { display:block; }
  .mobile-votes { font-size:11px; color:var(--ink-soft); margin-top:5px; padding-right:0; }
  .board-table .row-maturity { font-size:10px; padding-inline:4px; }
  .score-cell { gap:8px; text-align:left; }
  .score-value { font-size:15px; width:42px; }
  [data-column=rating] .column-heading>button,[data-column=rating] .column-label { width:42px; }
  .score-value .ci { display:block; margin-left:0; font-size:11px; }
  [data-column=rating] .column-heading { gap:7px; }
  .score-scale { font-size:9px; }
  .board-preview { margin-top:30px; }
  .board-compact th { font-size:10px; }
  .board-compact .score { font-size:15px; }
  .board-compact .model a { font-size:15px; }
  .board-compact .collecting-score { font-size:12px; }

  .board-compact tr[data-model] { min-height:52px; }
}
/* Plots under the board, closed panels placed by id: preference against cost across the top, head to head and
   scores side by side on one row (equal heights, on the same rows), then the snapshot identity as a strip.
   Below 1100 px they stack. */
.board-plots { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); grid-template-areas:"pareto pareto" "winrate scores" "identity identity"; gap:20px; margin-top:44px; align-items:start; }
#plot-pareto { grid-area:pareto; }
#plot-winrate { grid-area:winrate; align-self:stretch; }
#plot-scores { grid-area:scores; align-self:stretch; }
#plot-identity { grid-area:identity; }
@media (max-width:1099px) { .board-plots { grid-template-columns:minmax(0,1fr); grid-template-areas:"pareto" "winrate" "scores" "identity"; } }
.plot-panel { position:relative; margin:0; border:1px solid var(--hair-strong); border-radius:6px; padding:16px 18px 12px; background:var(--page); min-width:0; display:flex; flex-direction:column; }
.plot-panel figcaption { display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.plot-wide { grid-column:1 / -1; }
.plot-wide figcaption { flex-direction:row; align-items:flex-start; justify-content:space-between; gap:18px; }
.plot-cap { display:flex; flex-direction:column; gap:3px; max-width:62ch; }
.plot-axis-toggle { display:flex; flex:none; border:1px solid var(--hair-strong); border-radius:16px; overflow:hidden; }
.plot-axis-toggle button { border:0; background:var(--page); color:var(--ink-soft); padding:6px 12px; font:var(--label); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.plot-axis-toggle button[aria-pressed="true"] { background:var(--ink); color:var(--page); }
.plot-pareto-wrap { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:18px; align-items:stretch; }
.plot-pareto svg { min-width:560px; }
.plot-pareto g[data-model] { transition:opacity .15s ease; }
/* Quiet by default: frontier badges and labels, plain dots for the rest, no intervals. Hovering or selecting a
   model (on the chart or in the list) fades everything else and shows its interval, ring and card. */
#plot-pareto.is-hot .plot-pareto g[data-model]:not(.is-hot), #plot-pareto.is-hot .plot-pareto .pl-frontier { opacity:.25; }
#plot-pareto .plot-pareto .pl-ci, #plot-pareto .plot-pareto .pl-ring { visibility:hidden; }
#plot-pareto .plot-pareto g[data-model].is-hot .pl-ci, #plot-pareto .plot-pareto g[data-model].is-pinned .pl-ci,
#plot-pareto .plot-pareto g[data-model].is-hot .pl-ring, #plot-pareto .plot-pareto g[data-model].is-pinned .pl-ring { visibility:visible; }
#plot-pareto .plot-pareto g[data-model].is-hot .pl-dot, #plot-pareto .plot-pareto g[data-model].is-pinned .pl-dot { fill:var(--ink); }
#plot-pareto .plot-pareto g[data-model].is-hot .pl-badge, #plot-pareto .plot-pareto g[data-model].is-pinned .pl-badge { stroke-width:2.2; }
#plot-pareto .plot-pareto g[data-model] { cursor:pointer; }
#plot-pareto .plot-pareto g[data-model]:focus { outline:none; }
#plot-pareto .plot-pareto g[data-model]:focus-visible .pl-dot, #plot-pareto .plot-pareto g[data-model]:focus-visible .pl-badge { stroke:var(--ink); stroke-width:2; }
.pl-legend-row.is-pinned { box-shadow:inset 3px 0 0 var(--ink); background:var(--paper-2); }
.pl-card { position:absolute; z-index:3; max-width:min(260px, calc(100% - 16px)); padding:8px 11px; border-radius:4px; background:var(--ink); color:var(--page); font:var(--data); font-size:12.5px; line-height:1.45; pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,.18); }
.pl-card[hidden] { display:none; }
.pl-card strong { display:block; font-weight:500; margin-bottom:2px; }
.pl-card span { display:block; }
#plot-pareto.is-searching .plot-pareto g[data-model]:not(.pl-match) { opacity:.18; }
.pl-legend { border-left:1px solid var(--hair); padding-left:18px; min-width:0; display:flex; flex-direction:column; }
/* Beside the plot the legend adds no height of its own, so the plot sets the panel's height and a long list scrolls. */
@media (min-width:901px) { .pl-legend { contain:size; } }
.pl-legend-head { margin-bottom:10px; }
.pl-legend-search { width:100%; min-height:34px; padding:6px 10px; border:1px solid var(--hair-strong); border-radius:4px; background:var(--page); color:var(--ink); font:var(--data); font-size:12.5px; margin-bottom:8px; }
.pl-legend-search:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
/* The list takes the height the plot leaves it and only scrolls when it truly
   overruns; one column track keeps long names ellipsising instead of overflowing. */
.pl-legend-list { display:grid; grid-template-columns:minmax(0,1fr); flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; align-content:start; }
.pl-legend-row { display:flex; align-items:center; gap:8px; min-width:0; min-height:32px; padding:4px 6px; border:0; border-radius:3px; background:none; color:var(--ink); font:var(--data); font-size:12.5px; text-align:left; cursor:pointer; }
.pl-legend-row:hover, .pl-legend-row.is-hot { background:var(--paper-2); }
.pl-legend-row .lab-mark { width:14px; height:14px; flex:none; }
.pl-legend-row .pl-legend-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.pl-legend-row.is-front .pl-legend-name { font-weight:500; }
.pl-legend-row.is-hidden { color:var(--ink-faint); } .pl-legend-row.is-hidden .lab-mark { opacity:.35; } .pl-legend-row.is-hidden .pl-legend-name { text-decoration:line-through; }
.pl-legend-row.is-unrated { color:var(--ink-faint); } .pl-legend-note { margin-left:auto; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.pl-legend-rule { border:0; border-top:1px solid var(--hair); margin:6px 0; }
@media (max-width:900px) { .plot-pareto-wrap { grid-template-columns:1fr; } .pl-legend { border-left:0; padding-left:0; border-top:1px solid var(--hair); padding-top:12px; } .pl-legend-list { max-height:240px; flex:none; } }
.plot .pl-axis { font-size:11.5px; fill:var(--ink-soft); }
@media (max-width:900px) { .plot-wide figcaption { flex-direction:column; } }
.plot-title { font:var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.plot-why { font:var(--data); font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.plot { overflow:auto; flex:1; display:flex; flex-direction:column; justify-content:center; }
.plot:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:2px; }
.plot svg { display:block; width:100%; height:auto; min-width:440px; font:11.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif; font-variant-numeric:tabular-nums; }
.plot text { fill:var(--ink); }
.plot .pl-col { font-size:10.5px; fill:var(--ink-soft); }
.plot .pl-row { font-size:12px; }
.plot .pl-rank { fill:var(--ink-soft); }
.plot .pl-val { font-size:11px; }
.plot [tabindex]:focus rect:not(.pl-hit), .plot [tabindex]:focus circle { stroke:var(--ink); stroke-width:1.5; }
.plot-tip { font:var(--data); font-size:12.5px; color:var(--ink-soft); min-height:2.9em; line-height:1.45; margin:10px 0 0; }
.plot-identity .snapshot-id { margin:0; font:var(--data); font-size:12.5px; }
.plot-identity .id-row { display:grid; grid-template-columns:120px minmax(0,1fr); gap:0 14px; padding:9px 0; border-top:1px solid var(--hair); }
.plot-identity .id-row:first-child { border-top:0; padding-top:0; }
.plot-identity dt { color:var(--ink-soft); }
.plot-identity dd { margin:0; overflow-wrap:anywhere; font:var(--data); font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums; }
.plot-identity .id-row:nth-last-child(-n+2) dd { font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
.plot-link { display:inline-block; margin-top:auto; padding-top:14px; font:var(--data); font-size:13px; color:var(--ink); text-decoration:none; }
.plot-link:hover { text-decoration:underline; text-underline-offset:3px; }
/* Head to head: cells stay 32 px at every width; a narrow panel scrolls them sideways under row labels that stay put. */
/* Head to head and Scores: drawn at their natural size from a step the page picks for the panel's width. The row
   labels have a fixed width and stay put while a narrow panel scrolls sideways. Hover never changes a size or a
   position: highlights are colour only, the crosshair bands are rects that move, and the card floats. */
#plot-winrate .plot, #plot-scores .plot { display:block; flex:none; overscroll-behavior-x:contain; }
.plot-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.plot-view-toggle button { padding:4px 11px; }
.heat { display:flex; align-items:flex-start; width:max-content; }
.heat-rows { position:sticky; left:0; z-index:1; flex:none; box-sizing:border-box; margin:0; padding:0 8px 0 0; list-style:none; background:var(--page); font:11px/1 "Helvetica Neue",Helvetica,Arial,sans-serif; font-variant-numeric:tabular-nums; color:var(--ink); }
.heat-rows li { display:grid; grid-template-columns:16px 12px minmax(0,1fr); align-items:center; gap:5px; padding-right:3px; border-radius:2px; white-space:nowrap; }
.heat-rows .pl-rank { text-align:right; color:var(--ink-soft); }
.heat-rows .lab-mark, .heat-rows .lab-mark-none { width:12px; height:12px; }
.heat-rows .lab-mark-initial { font-size:7px; }
.heat-rows .heat-name { overflow:hidden; text-overflow:ellipsis; }
.heat-rows li.is-hot { background:rgba(34,34,34,.08); }
.heat-rows li.is-hot .pl-rank { color:var(--ink); }
.plot .heat svg { flex:none; min-width:0; max-width:none; }
.plot .heat .pl-col { font-size:10px; fill:var(--ink-soft); }
.plot .heat .heat-col.is-hot .pl-col { fill:var(--ink); }
.plot .heat .pl-val { font-size:11px; }
.heat g { cursor:default; }
.heat .pt-cells { pointer-events:none; }
.heat g:hover rect:not(.pl-hit) { stroke:var(--ink); stroke-width:1.2; }
/* every number in a faint grey so the colour leads; the hovered row and column show theirs in ink */
.heat g[data-r] .pl-val { fill:rgba(34,34,34,.34); }
.heat g[data-r].in-cross .pl-val { fill:var(--ink); }
/* the crosshair: two bands over the hovered row and column */
.heat .heat-band { visibility:hidden; pointer-events:none; opacity:.07; }
.heat.is-cross .heat-band { visibility:visible; }
.heat-tip { position:absolute; z-index:3; max-width:min(320px, calc(100% - 16px)); padding:8px 11px; border-radius:4px; background:var(--ink); color:var(--page); font:var(--data); font-size:12.5px; line-height:1.45; pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,.18); }
.heat-tip[hidden] { display:none; }
.heat-tip strong { display:block; font-weight:500; margin-bottom:2px; }
.heat-tip span { display:block; }
/* the snapshot identity as a strip: three columns of two */
@media (min-width:901px) {
  .plot-identity .snapshot-id { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 28px; }
  .plot-identity .id-row:nth-child(-n+3) { border-top:0; padding-top:0; }
}

@media(max-width:700px) {
  .board-table [data-column=votes] { display:none; }
  .board-table .table-message>td { grid-column:1 / -1; }
  .board-table .licence { white-space:normal; }
  .board-toolbar { height:auto; min-height:44px; gap:12px; flex-wrap:wrap; }
  #board-search { flex-basis:100%; margin-bottom:8px; }
}

/* ---- Paint: fills are washes, lines are graphite, type and marks stay ink. Filters live in PAINT_DEFS. ---- */
.paint-defs { position:absolute; width:0; height:0; overflow:hidden; }
/* Each filter runs once per group, never per element. Filtering (and multiply-blending) every cell and line put each
   of the head-to-head grid's ~600 squares and their numbers on a compositor layer of its own and re-rastered full-plot
   noise for every rule, which made scrolling and hovering the board slow. The groups hold shapes that never overlap,
   on white paper, so the picture is the same; multiply over white was a no-op and is gone. */
.board-plots.paint.pt-grouped .plot-pareto svg > rect { filter:url(#pt-wash); }
/* the head-to-head grid is dozens of small cells: the light wash (grain only, no edge pooling or warp) reads the same at that size and rasters far cheaper */
.board-plots.paint.pt-grouped .heat .pt-cells, .board-plots.paint.pt-grouped .heat g:hover > .heat-hit, .board-plots.paint.pt-grouped .heat g:focus > .heat-hit { filter:url(#pt-wash-lite); }
.board-plots.paint.pt-grouped .plot .pt-rules { filter:url(#pt-rule); }
.board-plots.paint.pt-grouped .plot .pt-ink, .board-plots.paint.pt-grouped .plot-pareto .pl-ci, .board-plots.paint.pt-grouped .plot svg polyline { filter:url(#pt-graphite); }
.board-plots.paint.pt-grouped .plot svg line { stroke-width:1.3; }
.board-plots.paint.pt-grouped .plot svg line[stroke="var(--hair)"] { stroke:#e3e0d8; }
.board-plots.paint.pt-grouped .plot svg line[stroke="var(--ink-faint)"], .board-plots.paint.pt-grouped .plot svg line[stroke="var(--ink)"] { stroke:#4a453c; stroke-width:2.2; }
.board-plots.paint.pt-grouped .plot svg polyline { stroke-width:2; stroke:#4a453c; }
.board-plots.paint.pt-grouped .plot svg line[stroke-dasharray] { stroke:#8a8375; }
.board-plots.paint.pt-grouped .plot-pareto svg line { stroke-width:1; }
.board-plots.paint.pt-grouped .plot-pareto svg line[stroke="var(--ink-faint)"] { stroke:#5a554b; stroke-width:1.3; }
.board-plots.paint.pt-grouped .plot-pareto svg polyline { stroke-width:1.4; }
@media (max-width:700px) {
  .board-plots.paint.pt-grouped .plot-pareto svg > rect { filter:url(#pt-wash-lite); }
  /* rules and the frontier go plain on a phone; the ink intervals keep their graphite, as they always have */
  .board-plots.paint.pt-grouped .plot .pt-rules, .board-plots.paint.pt-grouped .plot svg polyline { filter:none; }
}

/* ---- Skeleton: shipped in leaderboard.html, built from the table's own classes so
   the header, toolbar and first rows sit where the real ones land. No script, font
   or request needed; a failed request clears it and shows the error. ---- */
body:has(> main.board-page) #nav:empty { min-height:72px; }
@media (min-width:701px) and (max-width:850px) { body:has(> main.board-page) #nav:empty { min-height:80px; } }
@media (max-width:700px) { body:has(> main.board-page) #nav:empty { min-height:66px; } }
.board-page { --sk-tint:rgba(34,34,34,.07); --sk-sheen:rgba(255,255,255,.6); }
@supports (color: color-mix(in srgb, red, blue)) {
  .board-page { --sk-tint:color-mix(in srgb, var(--ink) 7%, transparent); --sk-sheen:color-mix(in srgb, var(--page) 60%, transparent); }
}
.board-page .sk { display:block; background-color:var(--sk-tint); border-radius:3px; }
@media (prefers-reduced-motion:no-preference) {
  .board-page .sk { background-image:linear-gradient(100deg, transparent 30%, var(--sk-sheen) 50%, transparent 70%); background-size:200% 100%; background-repeat:no-repeat; animation:board-sk-sheen 1.6s ease-in-out infinite; }
}
@keyframes board-sk-sheen { from { background-position:150% 0; } to { background-position:-50% 0; } }
/* A failed start is not loading: the watchdog's notice stills the skeleton. */
.board-page:has(#module-failure:not([hidden])) .sk { animation:none; background-image:none; }
.board-page:has(#module-failure:not([hidden])) .board-skeleton { opacity:.45; }
#board-state .sk-chip { display:inline-block; width:88px; height:23px; vertical-align:middle; border-radius:2px; }
#board-meta .sk-meta { display:inline-block; width:min(560px,100%); height:.9em; vertical-align:middle; }
.board-skeleton .board-toolbar .sk-filters { width:92px; height:16px; margin:14px auto 14px 0; }
.board-skeleton .sk-search { display:block; order:1; width:240px; height:44px; margin-left:16px; border:1px solid var(--hair-strong); border-radius:2px; }
.board-skeleton .board-table th { color:var(--ink-faint); }
.board-skeleton .sk-rank { width:16px; height:14px; margin-top:2px; }
.board-skeleton .sk-range { width:30px; height:10px; margin-top:7px; }
.board-skeleton .sk-lab { flex:none; width:20px; height:20px; border-radius:4px; }
.board-skeleton .sk-model { width:var(--w,60%); height:14px; margin:3px 0 4px; }
.board-skeleton .sk-sub { width:42%; height:10px; margin-top:6px; }
.board-skeleton .score-cell { align-items:center; }
.board-skeleton .sk-score { flex:none; width:64px; height:14px; margin-right:24px; }
.board-skeleton .sk-chart { flex:1; min-width:24px; height:6px; border-radius:0; }
.board-skeleton .sk-votes { width:24px; height:12px; margin-left:auto; }
@media(max-width:1000px) and (min-width:701px) { .board-skeleton .sk-score { width:40px; margin-right:0; } }
@media(max-width:700px) {
  /* The meta line wraps to two lines on a phone. */
  #board-meta .sk-meta { display:block; height:3.6em; animation:none; background:linear-gradient(var(--sk-tint),var(--sk-tint)) 0 .45em / 100% .9em no-repeat, linear-gradient(var(--sk-tint),var(--sk-tint)) 0 2.25em / 62% .9em no-repeat; }
  /* Real phone rows wrap the model's licence; these approximate the first screenful. */
  .board-skeleton .board-table tr[data-model] { min-height:112px; }
  .board-skeleton .sk-search { order:3; flex-basis:100%; width:100%; margin:0 0 8px; }
  .board-skeleton .sk-score { width:34px; margin-right:0; }
  .board-skeleton .sk-chart { display:none; }
  .board-skeleton .sk-sub { width:80%; }
  .board-skeleton .model-text::after { content:""; display:block; width:36%; height:9px; margin-top:10px; background:var(--sk-tint); border-radius:3px; }
}