/*
 * Benchmark charts, generated by guide_macros.py as inline SVG.
 *
 * Series colours: three hues plus a neutral grey. Lines cross, so every pair
 * of colours has to be distinguishable, not just neighbours. The set was
 * measured against both page backgrounds: every pair clears the separation
 * thresholds for normal vision and for protan/deutan colour blindness. No
 * fourth hue could do that in both themes, which is why the fourth series is
 * a grey. Change the colours only as a set, and re-measure.
 *
 * Each series also has its own marker shape, so colour is never the only cue,
 * and the table under each chart carries every value.
 */
.bm-chart {
  --bm-s0: #2a78d6; /* blue */
  --bm-s1: #eb6834; /* orange */
  --bm-s2: #1baf7a; /* aqua */
  --bm-s3: #52514e; /* neutral grey */
  --bm-surface: var(--md-default-bg-color);
  --bm-grid: var(--md-default-fg-color--lightest);
  --bm-axis: var(--md-default-fg-color--lighter);
  --bm-muted: var(--md-default-fg-color--light);
  margin: 0 0 1em;
}

[data-md-color-scheme="slate"] .bm-chart {
  --bm-s0: #3987e5;
  --bm-s1: #d95926;
  --bm-s2: #199e70;
  --bm-s3: #c3c2b7;
}

.bm-s0 { --bm-series: var(--bm-s0); }
.bm-s1 { --bm-series: var(--bm-s1); }
.bm-s2 { --bm-series: var(--bm-s2); }
.bm-s3 { --bm-series: var(--bm-s3); }

.bm-plot {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}

.bm-grid {
  stroke: var(--bm-grid);
  stroke-width: 1;
}

.bm-axis {
  stroke: var(--bm-axis);
  stroke-width: 1;
}

.bm-tick,
.bm-title {
  fill: var(--bm-muted);
  font-size: 12px;
}

.bm-tick {
  font-variant-numeric: tabular-nums;
}

.bm-line {
  fill: none;
  stroke: var(--bm-series);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The ring in the page colour keeps a marker legible where lines cross. */
.bm-marker {
  fill: var(--bm-series);
  stroke: var(--bm-surface);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.1s ease-out;
}

/* A hover target much larger than the marker itself. */
.bm-hit {
  fill: transparent;
}

.bm-point:hover .bm-marker {
  transform: scale(1.5);
}

.bm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 1.4em;
  margin-bottom: 0.5em;
  font-size: 0.7rem;
}

.bm-key {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.bm-key svg {
  flex: none;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .bm-marker {
    transition: none;
  }
}

/* A case label in a results table header wraps only where the generated
   markup allows it (after its first parenthesis), never mid-word. */
.md-typeset table:not([class]) th code {
  overflow-wrap: normal;
  word-break: normal;
}