/* Framing for the generated benchmark figures (dev/benchmarks.md).
 *
 * Unlike the SysML views beside them, these SVGs are *drawn by us*, so they
 * take the site's own palette through Material's custom properties and follow
 * the light/dark toggle without a plate behind them. Nothing here sets a
 * colour the theme does not already define: a figure that hard-coded ink
 * would be unreadable in one of the two schemes, which is the defect the
 * dark-plate treatment next door exists to work around. */

.benchmark-figure {
  margin: 1.2rem 0;
}

.benchmark-figure .benchmark-plot {
  /* Wide plots scroll inside the figure rather than widening the page. */
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  padding: 0.6rem 0.4rem 0.2rem;
}

.benchmark-figure svg {
  display: block;
  /* Minimum width keeps the log axis readable on a phone; the frame scrolls. */
  min-width: 34rem;
  width: 100%;
  height: auto;
  font-family: var(--md-code-font-family, monospace);
}

.benchmark-figure .tick { fill: var(--md-default-fg-color--light); font-size: 10px; }
.benchmark-figure .rowlab { fill: var(--md-default-fg-color); font-size: 11px; }
.benchmark-figure .baselabel { fill: var(--md-default-fg-color--light); font-size: 10px; }

.benchmark-figure figcaption {
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
  line-height: 1.5;
  margin-top: 0.45rem;
}

.benchmark-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.5rem;
}

.benchmark-key span { display: inline-flex; align-items: center; gap: 0.35rem; }