/* wtpp-figures.css  (added v3.7.813)
 *
 * Styling for inline explanatory figures injected by tools/build_page_figures.py.
 *
 * TOKEN CONVENTION
 *   Use tokens that are DEFINED. The first draft supplied hex fallbacks alongside each custom property, and
 *   tripped CSS-DEBT-RATCHET; removing the fallbacks then tripped
 *   CSS-TOKEN-UNDEFINED, because --tone-69 and --tone-45 are not defined anywhere
 *   in the stylesheets even though the SVG figures reference them with fallbacks.
 *   The two checks together enforce something sensible: a colour must come from a
 *   real token, not from a literal and not from a token that does not exist.
 *   Resolution took three attempts and the lesson is worth keeping: --border is
 *   defined ONLY inside the dark-theme block, not in the base :root, so a page in
 *   the default theme has nothing to resolve it to. --tone-69 and --ink-muted are
 *   both in base :root. 'Defined somewhere in the stylesheet' is not the same as
 *   'defined in the scope that will apply', and grepping for the token name cannot
 *   tell the difference.
 *
 *   Colours are referenced as CSS custom properties with NO hex fallback. The first draft
 *   of this file supplied hex fallbacks and tripped CSS-DEBT-RATCHET, which
 *   counts hardcoded colour literals and permits them only to shrink. The
 *   fallback is a literal, and a literal in a new file is new debt regardless of
 *   whether it is ever used. Every other stylesheet here follows the same rule.
 *
 * DESIGN NOTES
 *   The SVGs are inlined rather than referenced through <img> so they inherit the
 *   page's CSS custom properties. That is the whole reason this file can stay
 *   small: colour, contrast and forced-colors behaviour are already handled inside
 *   the SVG and by wtpp-user-contrast-prefs.css. Nothing here sets a colour on the
 *   artwork itself.
 *
 *   The caption is deliberately two parts. The first is a plain-language reading of
 *   what the figure shows, for someone who will not study the axes. The second is
 *   the provenance line, which on this platform is not decoration: two of the three
 *   figures currently shipped rest on a derivation that is not reproducible, and
 *   the caption says so rather than leaving a reader to discover it in the
 *   registry.
 *
 *   The SVGs scale by viewBox with width:100%, so they reflow at 320px without any
 *   media query here. That is checked by tools/check_reflow.py like everything else.
 */

.wtpp-figure {
  margin: 2rem 0;
  padding: 0;
  max-width: 100%;
}

.wtpp-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 760px;
  margin: 0 auto;
}

.wtpp-figure-caption {
  display: block;
  max-width: 760px;
  margin: 0.75rem auto 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--tone-69);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-29);
}

.wtpp-figure-text {
  display: block;
}

.wtpp-figure-source {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

@media (max-width: 480px) {
  .wtpp-figure {
    margin: 1.4rem 0;
  }
  .wtpp-figure-caption {
    font-size: 0.88rem;
  }
}

/* In forced-colors mode the caption rule above would lose its separator, since
   author border colours are discarded. Restore it from the system palette. */
@media (forced-colors: active) {
  .wtpp-figure-caption {
    border-top-color: CanvasText;
  }
}