/* figures.css — fig. 4 · 4b · 4c, the practice trace, wherever they are shown.
 *
 * The front page, the Localist portfolio page and the author screen's preview all carry the same
 * figure markup, from src/figures/. They therefore have to carry the same rules, or the preview is
 * a picture of something else. One file, linked by all three.
 *
 * The custom properties are the site's; the fallbacks are here so this file also holds up on the
 * author screen, which declares its own and is not served site.css.
 */
.figure { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fig { width: 100%; height: auto; display: block; }
.fig-lens { overflow: visible; }
.caption {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11.5px; color: var(--muted, #8a8477);
}
/* The drawing is made by assets/practice-trace.js; the static fig. 4 stays beneath it and shows
   only where that element never upgrades. */
.figure-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.fig-panel { border: 1px solid var(--hair, #d9d3c5); padding: 16px; justify-content: space-between; }
practice-trace:defined ~ .fig-static { display: none; }
.cap-left { display: flex; gap: 18px; flex-wrap: wrap; }
.replay { font: inherit; color: var(--moss, #4d6a3f); background: none; border: 0; padding: 0; cursor: pointer; }
.replay:hover { color: var(--ink, #211f1b); }
/* nothing to run again: the figures hold the end state, so the control is not offered */
@media (prefers-reduced-motion: reduce) { .replay { display: none; } }