/* The benchmark charts on about/benchmarks.md. Surfaces and text come from the
 * theme, so the block follows the site's light and dark toggle. The series and
 * table colours are the block's own, picked per scheme. */
.bench {
  --surface: var(--md-default-bg-color);
  --surface-2: var(--md-code-bg-color);
  --fg: var(--md-default-fg-color);
  --fg2: var(--md-default-fg-color--light);
  --muted: var(--md-default-fg-color--lighter);
  --hairline: var(--md-default-fg-color--lightest);
  --s1: #6d28d9; --s2: #a9800c; --s3: #2a78d6; --s4: #d42f2a; --floor: #6b6a61;
  --mix: 70%;
  --d-mid: #f0efec; --d-t1: #fbe0c6; --d-t2: #f5bf8c; --d-t3: #e5934c; --d-t4: #b35a0c;
  --d-o1: #e2d6f9; --d-o2: #c3acf1; --d-o3: #a080e8; --d-o4: var(--s1); --d-ink4: #ffffff;
  --ts-chart-tooltip-background: var(--surface);
  --ts-chart-tooltip-color: var(--fg);
  --ts-chart-tooltip-border: 1px solid var(--hairline);
  --ts-chart-tooltip-font: 500 .64rem/1.35 var(--md-text-font-family);
  --ts-chart-tooltip-padding: .35rem .5rem;
  --ts-chart-tooltip-max-width: 24rem;
}
[data-md-color-scheme="slate"] .bench {
  --s1: #9670e8; --s2: #b88d18; --s3: #35b9f2; --s4: #e5483f; --floor: #a3a196;
  --mix: 85%;
  --d-mid: #383835; --d-t1: #45301a; --d-t2: #64411a; --d-t3: #8a5218; --d-t4: #e9944a;
  --d-o1: #30244f; --d-o2: #45307a; --d-o3: #6247b0; --d-o4: var(--s1); --d-ink4: #141413;
}
/* The context libraries: each hue mixed into the surface, so they recede in either scheme. */
.bench {
  --p1: color-mix(in oklab, var(--s1) 45%, var(--surface));
  --p2: color-mix(in oklab, var(--s2) var(--mix), var(--surface));
  --p3: color-mix(in oklab, var(--s3) var(--mix), var(--surface));
  --p4: color-mix(in oklab, var(--s4) var(--mix), var(--surface));
}

.bench { margin: 1.2em 0; }
.bench .bench-controls { display: grid; gap: .4rem; padding-bottom: .6rem; border-bottom: 1px solid var(--hairline); }
.bench .bench-row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem; }
.bench .bench-label, .bench .bench-hint { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.bench .bench-label:not(:first-child) { margin-left: .5rem; }
.bench .bench-seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; }
.bench .bench-seg button { font: inherit; font-size: .66rem; color: var(--fg2); background: var(--surface);
  border: 0; padding: .25rem .6rem; cursor: pointer; }
.bench .bench-seg button + button { border-left: 1px solid var(--hairline); }
.bench .bench-seg button[aria-pressed="true"] { background: var(--fg); color: var(--surface); }
.bench button:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
.bench #bench-legend { display: flex; gap: .2rem .4rem; flex-wrap: wrap; font-size: .68rem; }
.bench #bench-legend button { font: inherit; color: var(--fg2); background: none; border: 0; border-radius: 5px;
  display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .3rem; cursor: pointer; }
.bench #bench-legend button[aria-pressed="false"] { opacity: .38; }
.bench #bench-legend button[disabled] { cursor: default; }
.bench .swatch { width: 16px; height: 2px; border-radius: 2px; display: inline-block; }
.bench .swatch.ours { width: 20px; height: 4px; }

/* `minmax(0, 1fr)` rather than `1fr`: the zero lets a track be narrower than its content. */
.bench .bench-zoombar { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: .6rem; }
.bench .bench-zoombar button { font: inherit; font-size: .66rem; color: var(--fg2); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 6px; padding: .25rem .6rem; cursor: pointer; }
.bench .bench-zoombar button:disabled { opacity: .45; cursor: default; }
.bench #bench-facets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .6rem;
  -webkit-user-select: none; user-select: none; }
@media (max-width: 44.9375em) { .bench #bench-facets { grid-template-columns: minmax(0, 1fr); } }
.bench .bench-panel { min-width: 0; color: var(--fg2); border: 1px solid var(--hairline); border-radius: 8px; padding: .5rem .6rem .2rem; }
.bench .bench-panel > div:last-child { position: relative; cursor: crosshair; touch-action: pan-y; }
.bench #bench-facets.zooming .ts-chart-tooltip { visibility: hidden; }
.bench .bench-zoom { position: absolute; pointer-events: none; border: 1px solid var(--s1); background: var(--s1); opacity: .15; }
.bench .bench-caption { font-size: .7rem; font-weight: 700; color: var(--fg); margin-bottom: .2rem; }

.bench .bench-scale { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: 1rem; font-size: .62rem; color: var(--muted); }
.bench .bench-scale i { display: inline-block; width: 22px; height: 11px; border-radius: 3px; }
.bench .bench-scale span { margin: 0 .4rem; }
.bench .bench-table { overflow-x: auto; margin-top: .5rem; border: 1px solid var(--hairline); border-radius: 8px; }
.md-typeset .bench table.bench-heat { display: table; border-collapse: separate; border-spacing: 2px; width: 100%;
  padding: .25rem; margin: 0; font-size: .64rem; font-variant-numeric: tabular-nums; border: 0; }
.md-typeset .bench .bench-heat th { font-weight: 700; color: var(--fg2); text-align: right; padding: .25rem .45rem;
  white-space: nowrap; background: none; border: 0; }
.md-typeset .bench .bench-heat td { text-align: right; padding: .22rem .45rem; white-space: nowrap; border-radius: 4px;
  border: 0; font-family: var(--md-code-font-family); color: var(--fg); }
.md-typeset .bench .bench-heat th:first-child, .md-typeset .bench .bench-heat td:first-child { text-align: left; }
.md-typeset .bench .bench-heat td.panel { font-family: inherit; color: var(--fg2); }
.md-typeset .bench .bench-heat tr.first td { border-top: 1px solid var(--hairline); }
.md-typeset .bench .bench-heat td.own { background: var(--surface-2); }
.md-typeset .bench .bench-heat td.none { color: var(--muted); }
.md-typeset .bench .bench-heat td.neutral { background: var(--surface-2); color: var(--fg2); }
.md-typeset .bench .bench-heat th.neutral { color: var(--muted); }
.bench .ts-chart-tooltip__row > span:nth-child(2) { white-space: nowrap; }