/* benchmark.css — the benchmark chart (front page section + /benchmark) and
 * the /benchmark page itself. Namespace: bench- (bm- belongs to the beta
 * popup). Loaded LAST on both pages, after world.css, so it only adds.
 *
 * SCALE. Everything is calc(<n> * var(--hw-u)), world.css's fluid unit
 * (390 -> 15px, 1920 -> 19px, 3072 -> 25px); px only for hairlines and
 * minimum touch sizes. home's 1.25x root is not used here, so nothing
 * compounds with it.
 *
 * COLOUR. The page's own tokens (home.css dark, world.css light). Two
 * series only: "web search only" is a flat grey, "with Cavalry" is the
 * page's ink (--text-primary), so the chart reads the same in both themes.
 * Verdicts get one muted colour each; they are words, not badges. Flat:
 * no gradients, no glow, no gridlines, no radius on the bars.
 */

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root{
  --bench-web:     #3c3c44;
  --bench-web-ink: #8c8c96;
  --bench-right:   #74c595;
  --bench-partial: #d8a957;
  --bench-wrong:   #e2867a;
}
html[data-theme="light"]{
  --bench-web:     #bfc2c6;
  --bench-web-ink: #8b9097;
  --bench-right:   #2e7449;
  --bench-partial: #8a6212;
  --bench-wrong:   #a63f2f;
}

.bench-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ── Front page section ──────────────────────────────────────────────── */
/* The monitors section's grid (monitors.css .hw-mon, .hw-mon-show; owner,
   2026-10-13): the same side gutters, the same two columns and the same gap,
   mirrored: the chart on the left in the monitor's column width, the link
   centred in the other column (owner: chart left, link right). Was: the link where the feature names sit (left), the chart where the monitor
   sits (right). The column sizes are monitors.css's own formulas, repeated
   here because those custom properties live on .hw-mon only. */
.bench-sec{
  --hw-mon-pic-w:clamp(46vw, calc((100svh - 112px) * 1.0705), 68vw);
  --hw-mon-col:calc(min(var(--hw-mon-pic-w), 1760px) - var(--hw-gutter));
  padding:calc(3.4 * var(--hw-u)) var(--hw-gutter) calc(1 * var(--hw-u));
  overflow-x:clip;
}
.bench-show{
  display:grid; align-items:center;
  column-gap:calc(2 * var(--hw-u));
  grid-template-columns:var(--hw-mon-col) minmax(0, 1fr);
  grid-template-areas:"pic nav";
}
/* the link: centred in the right column. Old note: the feature names' box, the
   link's left edge sits on the names' fill edge */
.bench-nav{
  grid-area:nav;
  justify-self:center;
  display:flex; justify-content:center;
}
.bench-pic{ grid-area:pic; min-width:0; padding-left:calc(4 * var(--hw-u)); }  /* nudged toward the middle (owner) */
.bench-box{ max-width:calc(36 * var(--hw-u)); margin:0 auto; }

/* ── The chart ───────────────────────────────────────────────────────── */
.bench-chart{ margin:0; font-family:var(--font-sans); color:var(--text-primary); }
.bench-head{
  display:flex; align-items:center;
  font-size:clamp(26px, calc(1.95 * var(--hw-u)), 50px);
}
/* The knight frame is 3:2 with transparent margins (light_knight.png and
   knight1.webm share it); pull the frame in so the ink, not the frame,
   sits at the column's left edge and close to the title. */
.bench-knight{
  display:block; flex:none;
  height:2.1em; width:auto; aspect-ratio:3 / 2;
  margin:-0.45em -0.25em -0.45em -0.72em;
  pointer-events:none;
}
.bench-title{
  margin:0;
  font-family:var(--font-display);
  font-size:1em; font-weight:600; line-height:1.1;
  letter-spacing:-0.026em;
  color:var(--text-primary);
  text-wrap:balance;
}
.bench-sub{
  margin-top:calc(0.75 * var(--hw-u));
  font-size:clamp(15px, calc(1 * var(--hw-u)), 25px); line-height:1.45;
  color:var(--text-secondary);
  text-wrap:pretty;
}
.bench-legend{
  list-style:none; margin:calc(1.1 * var(--hw-u)) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:calc(0.4 * var(--hw-u)) calc(1.5 * var(--hw-u));
  font-size:clamp(14px, calc(0.88 * var(--hw-u)), 22px);
  color:var(--text-secondary);
}
.bench-legend li{ display:inline-flex; align-items:center; gap:calc(0.5 * var(--hw-u)); }
.bench-sw{ display:block; width:0.72em; height:0.72em; }
.bench-sw--web{ background:var(--bench-web); }
.bench-sw--cav{ background:var(--text-primary); }

/* Plot: one row of bars over a baseline that spans both groups, then the
   model names and times under each group. Bar height = accuracy as a share
   of the row; the value sits on the bar. */
.bench-plot{ margin-top:calc(3.6 * var(--hw-u)); }
.bench-bars-row{
  position:relative;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  height:calc(16 * var(--hw-u));
}
.bench-bars-row::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--text-primary);
}
.bench-bars{
  display:flex; justify-content:center; align-items:flex-end;
  gap:calc(0.8 * var(--hw-u));
  height:100%;
}
.bench-bar{
  position:relative;
  width:min(calc(5.8 * var(--hw-u)), 36%);
  height:calc(var(--v) * 1%);
}
.bench-bar--web{ background:var(--bench-web); }
.bench-bar--cav{ background:var(--text-primary); }
.bench-val{
  position:absolute; left:50%; bottom:100%;
  transform:translateX(-50%);
  margin-bottom:calc(0.3 * var(--hw-u));
  font-size:clamp(17px, calc(1.6 * var(--hw-u)), 40px); font-weight:600; line-height:1;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.bench-bar--web .bench-val{ color:var(--bench-web-ink); }
.bench-bar--cav .bench-val{ color:var(--text-primary); }
.bench-caps{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0 calc(0.8 * var(--hw-u));
  margin-top:calc(1.1 * var(--hw-u));
  text-align:center;
}
.bench-model{
  font-size:clamp(15px, calc(1.05 * var(--hw-u)), 26px); font-weight:500; line-height:1.3;
  color:var(--text-primary);
}
.bench-time{
  margin-top:calc(0.55 * var(--hw-u));
  font-size:clamp(13px, calc(0.82 * var(--hw-u)), 20px); line-height:1.45;
  color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
  text-wrap:balance;
}
.bench-time-web{ color:var(--bench-web-ink); }
.bench-time b{ font-weight:600; color:var(--text-primary); }

/* The one link under the chart: the front page's outlined pill
   (world.css .hw-firms-cta), filled on hover. */
.hw .bench-cta,
.bench-cta{
  display:inline-flex; align-items:center; min-height:44px;
  margin-top:calc(2.2 * var(--hw-u));
  padding:0 calc(1.3 * var(--hw-u));
  font-size:clamp(14px, calc(0.9 * var(--hw-u)), 22px); font-weight:500;
  color:var(--text-primary); text-decoration:none;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 28%, transparent);
  transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.hw .bench-cta:hover,
.bench-cta:hover{ background:var(--text-primary); color:var(--bg-primary); }
.bench-cta:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--text-primary); }

/* Front page: the link sits in the left column with no space above it. */
.hw .bench-nav .bench-cta,
.bench-nav .bench-cta{
  margin-top:0;
  min-height:calc(2.9 * var(--hw-u));
  padding:0 calc(1.7 * var(--hw-u));
  font-size:clamp(16px, calc(1.1 * var(--hw-u)), 27px);
}
/* Phones and narrow tablets: stacked like the monitors (the same query as
   monitors.css), the chart, then the link under it at the left edge. */
@media (max-width:860px) and (min-aspect-ratio:1/1) and (min-height:521px), (max-width:860px) and (max-aspect-ratio:1/1){
  .bench-show{
    grid-template-columns:minmax(0, 1fr);
    column-gap:0;
    grid-template-areas:"pic" "nav";
    row-gap:calc(1.6 * var(--hw-u));
  }
  .bench-pic{ padding-left:0; }
  .bench-nav{ justify-self:center; justify-content:center; }
}
/* Landscape phones: side by side, the monitors' column sized to the height. */
@media (max-height:520px) and (min-aspect-ratio:1/1){
  .bench-sec{ --hw-mon-pic-w:calc((100svh - 88px) * 1.0705); }
}

/* Going to /benchmark and back: one calm cross fade with a short rise, and
   the chart itself carried across (the same chart is on both pages). Only
   these two pages load this file, so only these two opt in. */
@view-transition{ navigation:auto; }
.bench-chart{ view-transition-name:bench-chart; }
::view-transition-old(root){ animation:bench-vt-out 240ms ease both; }
::view-transition-new(root){ animation:bench-vt-in 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
::view-transition-group(bench-chart){ animation-duration:420ms; animation-timing-function:cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes bench-vt-out{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes bench-vt-in{ from{ opacity:0; transform:translateY(14px); } }
/* Back from /benchmark (html.bench-ret, set by home.html's restore script
   while the front page returns to the reader's own scroll position): a
   plain cross fade, nothing rises and the chart is not flown down from
   the top, so the page appears exactly where it was left. The reveals
   already on screen show at once instead of rising in. */
html.bench-ret::view-transition-old(root){ animation:bench-vt-fade-out 200ms ease both; }
html.bench-ret::view-transition-new(root){ animation:bench-vt-fade-in 260ms ease both; }
@keyframes bench-vt-fade-out{ to{ opacity:0; } }
@keyframes bench-vt-fade-in{ from{ opacity:0; } }
html.bench-ret .hw-reveal{ transition:none !important; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}

/* ── /benchmark page ─────────────────────────────────────────────────── */
/* home.css pins html/body to the viewport for the front page's scenes;
   this page is a plain scrolling document. */
html:has(> body.bench-page),
body.bench-page{ height:auto; overflow-x:hidden; overflow-y:auto; }
body.bench-page{
  display:block; min-height:100vh;
  background:var(--bg-primary); color:var(--text-primary);
  font-family:var(--font-sans);
}
.bench-top{
  --ha-u:clamp(16px, calc(8px + 0.55vw), 25px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:calc(var(--hw-max) + 2 * var(--hw-gutter));
  margin:0 auto;
  padding:calc(1 * var(--hw-u)) var(--hw-gutter);
}
.bench-back{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:clamp(14px, calc(0.85 * var(--hw-u)), 21px);
  color:var(--text-secondary); text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.bench-back:hover{ color:var(--text-primary); }
.bench-back:focus-visible{ outline:1px solid var(--text-primary); outline-offset:4px; }

.bench-main{ padding-top:calc(1.6 * var(--hw-u)); padding-bottom:calc(4.5 * var(--hw-u)); }
.bench-main > *{ max-width:calc(40 * var(--hw-u)); margin-left:auto; margin-right:auto; }
.bench-block{ margin-top:calc(3.6 * var(--hw-u)); }
.bench-h2{
  margin:0 0 calc(1 * var(--hw-u));
  font-family:var(--font-display);
  font-size:clamp(20px, calc(1.3 * var(--hw-u)), 32px); font-weight:600; line-height:1.2;
  letter-spacing:-0.018em;
  color:var(--text-primary);
}

/* Results table. Scrolls inside itself on a phone, never the page. */
.bench-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bench-table{
  width:100%; border-collapse:collapse;
  font-size:clamp(13px, calc(0.85 * var(--hw-u)), 21px);
  font-variant-numeric:tabular-nums;
}
.bench-table th,
.bench-table td{
  padding:calc(0.6 * var(--hw-u)) calc(0.7 * var(--hw-u));
  text-align:right; white-space:nowrap;
  box-shadow:inset 0 -1px 0 var(--hw-line);
}
.bench-table th:first-child{ padding-left:0; text-align:left; }
.bench-table thead th{ font-weight:500; color:var(--text-muted); white-space:normal; vertical-align:bottom; }
.bench-table thead th + th{ min-width:5.2em; }
.bench-table tbody th{ font-weight:500; color:var(--text-secondary); }
.bench-table td{ color:var(--text-secondary); }
.bench-table tr.is-cav th,
.bench-table tr.is-cav td{ color:var(--text-primary); font-weight:600; }
.bench-table td:last-child,
.bench-table th:last-child{ padding-right:0; }

.bench-how{ list-style:none; margin:0; padding:0; max-width:62ch; }
.bench-how li{
  padding:calc(0.3 * var(--hw-u)) 0;
  font-size:clamp(15px, calc(0.95 * var(--hw-u)), 23px); line-height:1.55;
  color:var(--text-secondary);
}

/* Category filter */
.bench-filter{ display:flex; flex-wrap:wrap; gap:calc(0.5 * var(--hw-u)); margin-bottom:calc(0.6 * var(--hw-u)); }
.bench-chip{
  display:inline-flex; align-items:center; gap:0.45em; min-height:40px;
  padding:0 calc(0.95 * var(--hw-u));
  font:inherit; font-size:clamp(14px, calc(0.85 * var(--hw-u)), 21px); font-weight:500;
  color:var(--text-secondary); background:transparent;
  border:0; border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--hw-line-2);
  cursor:pointer;
  transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.bench-chip span{ color:var(--text-muted); font-variant-numeric:tabular-nums; }
.bench-chip:hover{ color:var(--text-primary); }
.bench-chip[aria-pressed="true"]{ background:var(--text-primary); color:var(--bg-primary); box-shadow:none; }
.bench-chip[aria-pressed="true"] span{ color:color-mix(in srgb, var(--bg-primary) 70%, transparent); }
.bench-chip:focus-visible{ outline:2px solid var(--text-primary); outline-offset:2px; }

/* Questions */
.bench-qs{ list-style:none; margin:0; padding:0; }
.bench-q{ padding:calc(1.8 * var(--hw-u)) 0; box-shadow:inset 0 -1px 0 var(--hw-line); }
.bench-q[hidden]{ display:none; }
.bench-q-meta{
  display:flex; flex-wrap:wrap; gap:calc(0.8 * var(--hw-u));
  font-size:clamp(13px, calc(0.78 * var(--hw-u)), 19px);
  color:var(--text-muted);
}
.bench-q-n{ font-weight:500; color:var(--text-secondary); }
.bench-q-text{
  margin-top:calc(0.45 * var(--hw-u));
  font-size:clamp(15px, calc(1 * var(--hw-u)), 25px); line-height:1.55;
  color:var(--text-primary);
  text-wrap:pretty;
}
.bench-key{
  margin-top:calc(1 * var(--hw-u));
  padding:calc(0.85 * var(--hw-u)) calc(1 * var(--hw-u));
  background:var(--hw-tint);
  box-shadow:inset 0 0 0 1px var(--hw-line);
}
.bench-key-h{
  font-size:clamp(13px, calc(0.78 * var(--hw-u)), 19px); font-weight:600;
  color:var(--text-muted);
}
.bench-key ul{ list-style:none; margin:calc(0.35 * var(--hw-u)) 0 0; padding:0; }
.bench-key li{
  padding:calc(0.12 * var(--hw-u)) 0;
  font-size:clamp(14px, calc(0.9 * var(--hw-u)), 22px); line-height:1.5;
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

/* The four answers: closed by default; the summary row carries who
   answered, the verdict and the time. */
.bench-answers{ margin-top:calc(0.8 * var(--hw-u)); }
.bench-ans{ box-shadow:inset 0 -1px 0 var(--hw-line); }
.bench-ans:last-child{ box-shadow:none; }
.bench-ans > summary{
  display:grid; grid-template-columns:minmax(0, 1fr) auto auto auto; align-items:center;
  gap:calc(0.9 * var(--hw-u));
  min-height:44px; padding:calc(0.45 * var(--hw-u)) 0;
  list-style:none; cursor:pointer;
  font-size:clamp(14px, calc(0.9 * var(--hw-u)), 22px);
}
.bench-ans > summary::-webkit-details-marker{ display:none; }
.bench-ans > summary::after{
  content:""; width:0.45em; height:0.45em; margin:0 0.25em 0.2em 0;
  border-right:1.5px solid var(--text-muted); border-bottom:1.5px solid var(--text-muted);
  transform:rotate(45deg);
  transition:transform var(--dur-fast) var(--ease-out);
}
.bench-ans[open] > summary::after{ transform:rotate(-135deg); margin-bottom:-0.15em; }
.bench-ans > summary:hover .bench-ans-who{ color:var(--text-primary); }
.bench-ans > summary:focus-visible{ outline:2px solid var(--text-primary); outline-offset:2px; }
.bench-ans-who{ font-weight:500; color:var(--text-secondary); }
.bench-ans.is-cav .bench-ans-who{ color:var(--text-primary); }
.bench-ans-who span{ font-weight:400; color:var(--text-muted); }
.bench-v{ font-weight:600; }
.bench-v--right{ color:var(--bench-right); }
.bench-v--partial{ color:var(--bench-partial); }
.bench-v--wrong{ color:var(--bench-wrong); }
.bench-ans-t{
  min-width:3.6em; text-align:right;
  color:var(--text-muted); font-variant-numeric:tabular-nums;
}

/* Answer text, rendered from the answer's own markdown (escaped). */
.bench-ans-body{
  padding:calc(0.2 * var(--hw-u)) 0 calc(1.1 * var(--hw-u));
  font-size:clamp(14px, calc(0.86 * var(--hw-u)), 21px); line-height:1.6;
  color:var(--text-secondary);
  overflow-wrap:anywhere;
}
/* Long answer lines must wrap inside the column, never run past it. */
.bench-answers,
.bench-ans,
.bench-ans-body{ min-width:0; max-width:100%; }
.bench-ans-body li,
.bench-ans-body p{ white-space:normal; overflow-wrap:anywhere; }
.bench-ans-body > * + *{ margin-top:0.7em; }
.bench-ans-body strong{ font-weight:600; color:var(--text-primary); }
.bench-ans-body ul,
.bench-ans-body ol{ margin-left:0; padding-left:1.3em; }
.bench-ans-body li + li{ margin-top:0.25em; }
.bench-ans-body a{ color:var(--text-primary); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.bench-ans-body code,
.bench-ans-body pre{ font-family:var(--font-mono); font-size:0.9em; }
.bench-ans-body pre{ overflow-x:auto; white-space:pre; padding:0.6em 0.8em; background:var(--hw-tint); }
.bench-ans-body table{ border-collapse:collapse; font-size:0.94em; font-variant-numeric:tabular-nums; }
.bench-ans-body th,
.bench-ans-body td{
  padding:0.35em 0.9em 0.35em 0; text-align:left; vertical-align:top;
  box-shadow:inset 0 -1px 0 var(--hw-line);
  overflow-wrap:normal; min-width:4em;
}
.bench-ans-body th{ font-weight:500; color:var(--text-muted); }

/* ── Phones ──────────────────────────────────────────────────────────── */
@media (max-width:560px){
  .bench-plot{ margin-top:calc(3 * var(--hw-u)); }
  .bench-bars-row{ height:calc(14 * var(--hw-u)); }
  .bench-bars{ gap:calc(0.5 * var(--hw-u)); }
  .bench-bar{ width:40%; }
  .bench-val{ font-size:18px; letter-spacing:-0.035em; }
  .bench-ans > summary{ gap:calc(0.7 * var(--hw-u)); }
  .bench-key{ padding:calc(0.75 * var(--hw-u)) calc(0.8 * var(--hw-u)); }
}
@media (prefers-reduced-motion: reduce){
  .bench-ans > summary::after,
  .bench-cta, .bench-chip{ transition:none; }
}