/* ==========================================================================
   Interactive figures, shared by every page that has some; a page
   adds its own figures.css next to it when it needs more. Design tokens only, so both themes work; canvases read the same
   tokens at draw time and redraw on theme change.
   ========================================================================== */

/* site.css paints plot panels white; follow the theme instead. */
.dynamic-figure .plot-panel{background:var(--bg);color:var(--fg)}
.dynamic-figure .plot-readout{color:var(--mut);line-height:1.45}
/* No justification or hyphenation inside figures (site.css justifies .doc main p). */
.dynamic-figure p.plot-readout,.dynamic-figure p.figure-hint,.dynamic-figure .subcaptions p{text-align:left;hyphens:manual;-webkit-hyphens:manual}
.dynamic-figure .plot-panel canvas{aspect-ratio:1.45;touch-action:none}
.dynamic-figure[data-dynamic="cone"] .plot-panel{max-width:520px;margin:0 auto}
.dynamic-figure[data-dynamic="cone"] canvas,
.dynamic-figure[data-dynamic="ols"] canvas{aspect-ratio:1}
.dynamic-figure .figure-controls button:hover:not(:disabled){border-color:var(--fg)}
.dynamic-figure .figure-controls button:disabled{opacity:.4;cursor:default}
.dynamic-figure :focus-visible{outline:1px solid var(--fg);outline-offset:2px}

/* Sub-captions of a two-panel figure */
.subcaptions{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.8rem;
  font-family:var(--sans);font-size:.85rem;color:var(--mut)}
.dynamic-figure .subcaptions p{margin:.5rem 0 0}

@media print{.dynamic-figure .figure-controls,.dynamic-figure .figure-hint{display:none}}