/* /benchmarks: a calm research report. Reads the tokens in styles.css (paper, ink, ink-2, muted, accent, line).
   Link it after styles.css: <link rel="stylesheet" href="/benchmarks.css">. Light only, no shadows or gradients.
   Rules: at most one hairline between two blocks. */
.bench { max-width: 1000px; }
.bench .lede { max-width: 40em; }
.bench h2 { scroll-margin-top: 24px; }
.bench .bench-text { max-width: var(--measure); }
.bench .dateline { font-size: 13px; color: var(--muted); margin: 0 0 12px; font-variant-numeric: lining-nums; }

/* Key figures: big lining numbers in the display face. The toc above draws the top rule. */
.bench .figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 8px; border-bottom: 1px solid var(--line); }
.bench .figure { padding: 22px 20px 20px 0; }
.bench .figure + .figure { padding-left: 20px; border-left: 1px solid var(--line); }
.bench .figure dt { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.bench .figure dd { margin: 0; }
.bench .figure .big { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--accent); }
.bench .figure .of { font-family: var(--display); font-size: 18px; color: var(--muted); font-variant-numeric: lining-nums; }
.bench .figure .sub { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }

/* Tables. The tab strip above draws its own rule, so the head row has none on top. */
.bench .tabs [role=tablist] { margin-bottom: 8px; }
.bench table.results { font-size: 14px; font-variant-numeric: lining-nums tabular-nums; }
.bench table.results th { vertical-align: bottom; padding-top: 8px; }
.bench table.results th .h { display: block; white-space: nowrap; }
.bench table.results th .unit { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.bench table.results td { vertical-align: baseline; padding-top: 10px; padding-bottom: 10px; }
.bench table.results td.num, .bench table.results th.num { text-align: right; }
.bench table.results .v { display: block; }
.bench table.results .ci { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; }
.bench table.results .kind { display: block; font-size: 12px; color: var(--muted); }
.bench table.results tr:last-child td { border-bottom: 0; }
.bench table.results tr.is-us td { background: color-mix(in oklab, var(--accent) 6%, var(--paper)); }
.bench table.results tr.is-us td:first-child { border-left: 2px solid var(--accent); padding-left: 8px; }
.bench table.results tr.is-us .name { color: var(--accent); font-weight: 500; }
.bench table.results td:first-child, .bench table.results th:first-child { padding-left: 10px; }
.bench .sort { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.bench .sort:hover, .bench th[aria-sort] .sort { color: var(--ink); }
.bench .sort .arrow { display: inline-block; width: 1em; text-align: center; }
.bench .table-note { font-size: 13px; color: var(--muted); margin-top: 12px; max-width: var(--measure); }

/* Charts: one HTML row per system, a hand-built SVG bar with a 95% interval whisker. */
.bench .charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 8px; }
.bench .chart { min-width: 0; margin: 24px 0 0; max-width: 560px; }
.bench .charts .chart { margin-top: 0; max-width: none; }
.bench .chart h3 { margin: 0 0 4px; font-size: 14px; font-weight: 500; }
.bench .chart .axis-note { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.bench .bar-row { display: grid; grid-template-columns: minmax(0, 8.8em) minmax(0, 1fr) 3em; align-items: center; gap: 8px; height: 22px; font-size: 12px; }
.bench .bar-row .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.bench .bar-row .val { text-align: right; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-2); }
.bench .bar-row svg { display: block; width: 100%; height: 14px; overflow: visible; }
.bench .bar-row .bar { fill: color-mix(in oklab, var(--ink) 16%, var(--paper)); }
.bench .bar-row .whisker { stroke: var(--ink-2); stroke-width: 1; }
.bench .bar-row .guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
.bench .bar-row.is-us .lbl, .bench .bar-row.is-us .val { color: var(--accent); font-weight: 500; }
.bench .bar-row.is-us .bar { fill: var(--accent); }
.bench .scale { display: grid; grid-template-columns: minmax(0, 8.8em) minmax(0, 1fr) 3em; gap: 8px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 4px; margin-top: 4px; font-variant-numeric: lining-nums; }
.bench .chart.wide-labels { max-width: 680px; margin-bottom: 20px; }
.bench .chart.wide-labels .bar-row, .bench .chart.wide-labels .scale { grid-template-columns: minmax(0, 17em) minmax(0, 1fr) 3em; }
.bench .scale .ends { display: flex; justify-content: space-between; }

/* Method page. */
.bench-method { max-width: var(--measure); }
.bench .method-list dt { font-weight: 500; margin-top: 16px; }
.bench .method-list dd { margin: 4px 0 0; color: var(--ink-2); }

/* How we tested: three plain lines. */
.bench .method { padding-left: 1.2em; color: var(--ink-2); font-size: 15px; }
.bench code { font-size: .82em; }

@media (max-width: 860px) {
  .bench .charts { grid-template-columns: 1fr; gap: 28px; }
  .bench .bar-row, .bench .scale { grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 3em; }
}
@media (max-width: 640px) {
  .bench .figures { grid-template-columns: 1fr; }
  .bench .figure, .bench .figure + .figure { padding: 16px 0; border-left: 0; }
  .bench .figure + .figure { border-top: 1px solid var(--line); }
  .bench .figure .big { font-size: 34px; }
  .bench table.results { font-size: 13px; }
  .bench table.results th, .bench table.results td { padding-right: 6px; }
  .bench table.results .ci { font-size: 11px; }
  .bench table.results td:first-child, .bench table.results th:first-child { padding-left: 6px; }
  .bench table.results th .h, .bench table.results th .unit { white-space: normal; }
  .bench .hide-narrow { display: none; }
}