/*
 * GameBench 2 report figures. Generated file; do not edit by hand. Load after the DuelLab
 * design tokens.
 *
 * Text, axes, grid and surfaces use the site tokens. Data marks use the --gbr-* tokens below,
 * whose light-dark() pairs follow the color-scheme the site tokens set for light and dark.
 * Their steps were checked with a palette validator for both surfaces; the site's
 * --reasoning-*-fg tokens are text colours and are too close to each other as dark-mode marks.
 */

.gbr-figure {
  --gbr-accent: light-dark(var(--mint), #26a37e);
  --gbr-accent-2: light-dark(var(--amber), #bd8418);
  --gbr-low: light-dark(#6b7079, var(--reasoning-none-border));
  --gbr-high: light-dark(#6a3fc0, #9a7cf0);
  --gbr-context: light-dark(#8b8f96, #686c72);

  margin: 2rem 0;
  padding: 1rem 1rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 6px);
  color: var(--text);
  font-family: var(--font-sans);
}

@supports not (color: light-dark(#000, #fff)) {
  .gbr-figure {
    --gbr-accent: var(--mint);
    --gbr-accent-2: var(--amber);
    --gbr-low: #6b7079;
    --gbr-high: #6a3fc0;
    --gbr-context: #8b8f96;
  }
}

.gbr-figure > .gbr-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 36rem;
  margin: 0 auto;
}

.gbr-figure > .gbr-svg.gbr-phone {
  display: none;
  max-width: 24rem;
}

.gbr-figure > figcaption {
  margin: 0.75rem 0 0;
  color: var(--soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.gbr-figure > details {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--soft);
}

.gbr-figure > details > summary {
  cursor: pointer;
  color: var(--link);
  width: fit-content;
}

.gbr-figure .gbr-table-wrap {
  margin-top: 0.5rem;
  max-height: 26rem;
  overflow: auto;
}

.gbr-figure table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.gbr-figure th,
.gbr-figure td {
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.gbr-figure thead th {
  position: sticky;
  top: 0;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
}

.gbr-figure .num {
  text-align: right;
}

.gbr-figure td.num {
  white-space: nowrap;
}

.gbr-figure td:first-child {
  min-width: 8rem;
}

@media (max-width: 480px) {
  .gbr-figure {
    padding: 0.75rem 0.375rem 0.5rem;
  }

  .gbr-figure > figcaption,
  .gbr-figure > details {
    padding: 0 0.375rem;
  }

  .gbr-figure > .gbr-svg.gbr-has-phone {
    display: none;
  }

  .gbr-figure > .gbr-svg.gbr-phone {
    display: block;
  }
}

.gbr-figure .gbr-svg {
  font-family: var(--font-sans);
}

.gbr-figure .gbr-bg {
  fill: var(--panel);
}

.gbr-figure .gbr-ink {
  fill: var(--text);
}

.gbr-figure .gbr-soft {
  fill: var(--soft);
}

.gbr-figure .gbr-muted {
  fill: var(--muted);
}

.gbr-figure .gbr-num {
  font-variant-numeric: tabular-nums;
}

.gbr-figure .gbr-halo {
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.gbr-figure .gbr-grid {
  stroke: var(--line);
  stroke-width: 1px;
  fill: none;
}

.gbr-figure .gbr-axis {
  stroke: var(--line-strong);
  stroke-width: 1px;
  fill: none;
}

.gbr-figure .gbr-zero {
  stroke: var(--muted);
  stroke-width: 1px;
  fill: none;
}

.gbr-figure .gbr-connector {
  stroke: var(--muted);
  stroke-opacity: 0.6;
  stroke-width: 2px;
  stroke-linecap: round;
  fill: none;
}

.gbr-figure .gbr-leader {
  stroke: var(--muted);
  stroke-width: 1px;
  fill: none;
}

.gbr-figure .gbr-hit {
  fill: transparent;
  pointer-events: all;
}

.gbr-figure .gbr-row:hover > .gbr-hit {
  fill: var(--panel-2);
}

.gbr-figure .gbr-ring {
  stroke: var(--panel);
  stroke-width: 2px;
}

.gbr-figure .gbr-mark:hover > .gbr-ring {
  stroke: var(--text);
}

.gbr-figure .gbr-mark:hover > .gbr-bar {
  opacity: 0.8;
}

.gbr-figure .gbr-fill-accent {
  fill: var(--gbr-accent);
}

.gbr-figure .gbr-fill-accent-2 {
  fill: var(--gbr-accent-2);
}

.gbr-figure .gbr-fill-low {
  fill: var(--gbr-low);
}

.gbr-figure .gbr-fill-high {
  fill: var(--gbr-high);
}

.gbr-figure .gbr-fill-context {
  fill: var(--gbr-context);
}

.gbr-figure .gbr-line-accent {
  stroke: var(--gbr-accent);
  stroke-width: 2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gbr-figure .gbr-line-accent-2 {
  stroke: var(--gbr-accent-2);
  stroke-width: 2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gbr-figure .gbr-node {
  fill: var(--panel-2);
  stroke: var(--line-strong);
  stroke-width: 1px;
}

.gbr-figure .gbr-node-final {
  fill: var(--mint-soft);
  stroke: var(--mint-line);
  stroke-width: 1px;
}

.gbr-figure .gbr-arrow {
  stroke: var(--muted);
  stroke-width: 1.5px;
  fill: none;
}

.gbr-figure .gbr-arrowhead {
  fill: var(--muted);
}