/* Figures: inline SVG in the family's palette (site-theme's tokens.css,
   --ap-*). The page is --ap-bg, a box the panel --ap-bg-2, a rule
   --ap-line, text the ink --ap-fg and the muted --ap-fg-3. The accent is
   headwater's coral; the second colour, teal, marks a pin, a tier that is
   due and a fixer's change; millpond's blue marks what millpond does. The
   light palette serves mdBook's light and rust themes and a page without
   JavaScript; the dark one serves coal, navy and ayu. */
:root {
  --hw-page: #f7f6f2;
  --hw-surface: #e9e7e0;
  --hw-line: #c9c7bf;
  --hw-ink: #0e1116;
  --hw-muted: #5d6370;
  --hw-accent: #a8442a;
  --hw-accent-soft: #f3ddd5;
  --hw-mark: #1d7368;
  --hw-mark-soft: #d6eae6;
  --hw-mp: #2160b0;
  --hw-mp-soft: #dae5f4;
  --hw-font: "IBM Plex Sans", system-ui, sans-serif;
  --hw-font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --hw-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
html.coal,
html.navy,
html.ayu {
  --hw-page: #0e1116;
  --hw-surface: #161a21;
  --hw-line: #2a2f38;
  --hw-ink: #f2f1ec;
  --hw-muted: #8c92a0;
  --hw-accent: #ef8a6a;
  --hw-accent-soft: #3b2219;
  --hw-mark: #5cc2b2;
  --hw-mark-soft: #15332f;
  --hw-mp: #6ea8fe;
  --hw-mp-soft: #172a45;
}

figure.hw {
  margin: 1.8em 0;
}
figure.hw .hw-scroll {
  overflow-x: auto;
  border: 1px solid var(--hw-line);
  border-radius: 8px;
  background: var(--hw-page);
}
figure.hw svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 640px;
  font-family: var(--hw-font);
}
figure.hw figcaption {
  margin-top: 0.6em;
  font-size: 0.9em;
  font-family: var(--hw-font);
  color: var(--hw-muted);
}

.hw-bx { fill: var(--hw-surface); stroke: var(--hw-line); stroke-width: 1.2; }
.hw-bx-a { fill: var(--hw-accent-soft); stroke: var(--hw-accent); stroke-width: 1.5; }
.hw-bx-o { fill: var(--hw-mark-soft); stroke: var(--hw-mark); stroke-width: 1.2; }
.hw-bx-d { fill: none; stroke: var(--hw-muted); stroke-width: 1.2; stroke-dasharray: 6 5; }
.hw-bx-mp { fill: var(--hw-mp-soft); stroke: var(--hw-mp); stroke-width: 1.5; }
.hw-chip { fill: var(--hw-accent-soft); stroke: none; }
.hw-chip-p { fill: var(--hw-page); stroke: var(--hw-line); stroke-width: 1; }

.hw-h { fill: var(--hw-ink); font-family: var(--hw-font-display); font-size: 16px; font-weight: 700; }
.hw-t { fill: var(--hw-ink); font-size: 14px; font-weight: 600; }
.hw-s { fill: var(--hw-muted); font-size: 12.5px; }
.hw-m { fill: var(--hw-ink); font-family: var(--hw-font-mono); font-size: 12px; }
.hw-ms { fill: var(--hw-muted); font-family: var(--hw-font-mono); font-size: 11.5px; }
.hw-ma { fill: var(--hw-accent); font-family: var(--hw-font-mono); font-size: 11.5px; font-weight: 600; }
.hw-th { fill: var(--hw-muted); font-family: var(--hw-font-mono); font-size: 11px; letter-spacing: 0.08em; }
.hw-la { fill: var(--hw-accent); font-size: 12.5px; font-weight: 600; }
.hw-lo { fill: var(--hw-mark); font-size: 12.5px; font-weight: 600; }
.hw-th-mp { fill: var(--hw-mp); font-family: var(--hw-font-mono); font-size: 11px; letter-spacing: 0.08em; }

.hw-ar { stroke: var(--hw-muted); stroke-width: 1.4; fill: none; }
.hw-ar-a { stroke: var(--hw-accent); stroke-width: 1.8; fill: none; }
.hw-ar-o { stroke: var(--hw-mark); stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
.hw-lead { stroke: var(--hw-muted); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.hw-hd { fill: var(--hw-muted); }
.hw-hd-a { fill: var(--hw-accent); }
.hw-hd-o { fill: var(--hw-mark); }

.hw-axis { stroke: var(--hw-muted); stroke-width: 1.4; }
.hw-tick { stroke: var(--hw-line); stroke-width: 1; }
.hw-dot { fill: var(--hw-surface); stroke: var(--hw-muted); stroke-width: 1.5; }
.hw-dot-a { fill: var(--hw-accent); stroke: var(--hw-accent); stroke-width: 1.5; }
.hw-dot-x { fill: var(--hw-surface); stroke: var(--hw-mark); stroke-width: 2; }
.hw-pin { fill: var(--hw-mark); }
.hw-band-a { fill: var(--hw-accent-soft); }
.hw-band-o { fill: var(--hw-mark-soft); }