/* Benchmark chart: names ride inside the bars, and the table the chart is drawn
   from stays in the page for screen readers and agents. Tokens first. */
.bench{
  --bar-label: 600 12.5px/1.15 "DM Sans", sans-serif;
  --bar-label-us: 700;
  --bar-label-pad: 10px 6px 0;
  --bar-label-gap: 6px;   /* between a short bar and the name above it */
  --bar-label-lift: 24px; /* room the value leaves for that name */
  --bar-radius: 4px 4px 0 0;
  --pick-gap: 8px;
  --pick-pad: 9px 15px;
  --pick-font: 600 13px/1 "DM Sans", sans-serif;
  --pick-ink: var(--muted);
  --pick-line: var(--line);
  --pick-on: var(--ink);       /* the chosen chip is filled with the text colour... */
  --pick-on-ink: var(--cream); /* ...and its label takes the page colour, in both themes */
}

/* The data table: read, not shown. A table grows to fit its cells whatever
   width it is given, so the box that hides it is a wrapper. */
.bench-data{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* A name inside its bar, pinned to the top so it rises with the bar. */
.col .bar{position:relative;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;border-radius:var(--bar-radius)}
.col .bar .nm{display:block;margin:0;padding:var(--bar-label-pad);border:0;font:var(--bar-label);color:inherit;text-align:center;overflow-wrap:anywhere}
.col.us .bar .nm{font-weight:var(--bar-label-us);color:inherit}

/* Too short to hold it: the name sits just above the bar, under the value. */
.col.tight .bar{overflow:visible}
.col.tight .bar .nm{position:absolute;left:0;right:0;bottom:calc(100% + var(--bar-label-gap));padding:0;color:var(--ink)}
.col.tight .v{margin-bottom:var(--bar-label-lift)}

/* Metrics: one row of chips over the chart instead of a side list, so the
   chart has the full width; under the chips, the metric's full name and what
   it measures. */
.bench-body{grid-template-columns:minmax(0,1fr)}
.bench-pick{display:flex;flex-wrap:wrap;gap:var(--pick-gap);margin:0;padding:22px 30px 0;border:0;background:none}
.bench-pick li{flex:none;border:0}
.bench-pick button{display:block;width:auto;padding:var(--pick-pad);border:1px solid var(--pick-line);border-radius:999px;background:none;font:var(--pick-font);letter-spacing:-.01em;color:var(--pick-ink);white-space:nowrap}
.bench-pick button:hover{background:none;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.bench-pick button[aria-selected=true]{background:var(--pick-on);border-color:var(--pick-on);color:var(--pick-on-ink)}
.bench-pick button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.chart-what{margin:0 0 16px;font:14px/1.5 "DM Sans",sans-serif;color:var(--muted)}
.chart-what b{margin-right:6px;font-weight:600;color:var(--ink)}
/* A phone: the plain names are longer, so the chips wrap onto a second row. */
@media (max-width: 800px){
  .bench{--pick-gap:6px;--pick-pad:8px 12px;--pick-font:600 12.5px/1 "DM Sans", sans-serif}
  .bench-pick{padding:14px 14px 2px}
}

/* The link from the chart to benchmarks.html, every question and the method (24.10.2026). */
.bench-more{margin:22px 0 0}