/* ============================================================
 * FIGURES — semantic inline SVG charts and diagrams, shared by the
 * home page, the model notebooks and the laboratory. Built by
 * models/_R/figures.R; readouts by js/figures.js.
 * Load after site-tokens.css.
 * ============================================================ */

:root {
  /* Chart roles (validated categorical order; see design-spec.md §3.1) */
  --viz-surface: #ffffff;
  --viz-1: #2a5fa8; --viz-2: #c68427; --viz-3: #209075; --viz-4: #7860b5;
  --viz-5: #71943f; --viz-6: #853a77; --viz-7: #3699b8; --viz-8: #c86483;
  --viz-on: #c0d6f6;           /* blue 200: a variable that is true */
  --viz-grid: var(--rule-light);
  --viz-base: var(--ink-soft);
  --viz-connector: var(--rule);
  --viz-context: var(--muted-light);
  --cond-obs: #8a8786;         /* Observations only */
  --cond-ac: #2a66a8;          /* Other explanations */
  --cond-cs: #e2401c;          /* Causal selection */
}

.plate svg.viz, .plate svg.nw { display: block; width: 100%; height: auto; overflow: visible; }
.plate:has(svg.viz) { position: relative; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 0 10px; padding: 0; list-style: none; font-family: var(--f-figlabel); font-size: 14px; color: var(--ink-soft); }
.viz-legend li, .plate .viz-legend li { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: normal; line-height: 1.5; }
.viz-legend li::before, .viz-legend li::marker { content: none; }
.viz-legend svg { width: auto; display: inline-block; flex: none; }
.viz-narrow { display: none; }
@media (max-width: 600px) { .viz-wide { display: none; } .viz-narrow { display: block; } }

/* chart text roles: words in Spectral SC, numbers in Source Sans 3, variables in math italic */
svg.viz text, svg.nw text { font-variant-numeric: tabular-nums lining-nums; }
.viz-strip { font-family: var(--f-figlabel); font-size: 15px; fill: var(--ink); }
.viz-axis-title, .nw-layer, .viz-label { font-family: var(--f-figlabel); font-size: 14px; fill: var(--ink-soft); }
.viz-tick, .nw-num, .viz-note, .viz-stat { font-family: var(--ui); font-size: 12.5px; fill: var(--muted); }
.viz-stat { fill: var(--ink-soft); }
.viz-var { font-family: KaTeX_Math, var(--serif); font-style: italic; font-size: 15px; fill: var(--ink); }
.viz-op { font-family: KaTeX_Main, var(--serif); font-style: normal; }
.viz-it { font-family: KaTeX_Math, var(--serif); font-style: italic; font-size: 14px; fill: var(--ink-soft); }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-base { stroke: var(--viz-base); stroke-width: 1; }
.viz-sep { stroke: var(--rule-light); stroke-width: 1; }
.viz-gap { stroke: var(--viz-connector); stroke-width: 2; stroke-linecap: round; }
.viz-ci { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: butt; }
.viz-dot { stroke: var(--viz-surface); stroke-width: 2; }
.viz-obs { fill: var(--ink); }
.viz-model { fill: var(--viz-1); }
.viz-ring { fill: none; stroke: var(--viz-1); stroke-width: 2; }
.viz-hit { fill: transparent; }
.viz-row.is-hot .viz-hit { fill: var(--paper-callout); }
.viz-row.is-hot .viz-gap { stroke: var(--muted-light); }
/* Fig. 3 lattice: while a state or a move is read out, the other marks step back */
.viz-cube-mark { transition: opacity .12s; }
svg.viz:has(.viz-cube-mark.is-hot) .viz-cube-mark:not(.is-hot) { opacity: .22; }
svg.viz:focus { outline: none; }
svg.viz:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.viz-tip {
  position: absolute; pointer-events: none; z-index: 2; min-width: 168px; width: max-content; max-width: calc(100% - 16px); padding: 8px 12px 9px;
  background: var(--paper); box-shadow: var(--panel-shadow); font-family: var(--ui); font-size: 13px; color: var(--ink-soft);
  line-height: 1.35; font-variant-numeric: tabular-nums;
}
.viz-tip[hidden] { display: none; }
.viz-tip .tip-head { font-family: KaTeX_Math, var(--serif); font-style: italic; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.viz-tip .tip-sub { font-family: var(--f-figlabel); font-size: 13px; color: var(--muted); margin: -2px 0 4px; }
.viz-tip .tip-row { display: flex; align-items: center; gap: 8px; }
.viz-tip .tip-row b { color: var(--ink); font-weight: 600; font-size: 14px; min-width: 2.6em; }
.viz-tip .key { width: 14px; height: 2px; flex: none; }

/* network diagram */
.nw-node { fill: var(--paper); stroke: var(--ink); stroke-width: 1.25; }
.nw-node.is-on { fill: var(--viz-on); }
.nw-halo { fill: none; stroke: var(--accent); stroke-width: 2; }
.nw-var { font-family: KaTeX_Math, var(--serif); font-style: italic; font-size: 19px; fill: var(--ink); }
.nw-var.is-off { fill: var(--ink-soft); }
.nw-sub { font-size: 12px; font-style: normal; font-family: var(--ui); }
.nw-edge { stroke: var(--muted-light); stroke-width: 1; }
.nw-edge.is-active { stroke: var(--ink); stroke-width: 1.5; }
.nw-head { fill: var(--ink); }
.nw-head-q { fill: var(--muted-light); }
.viz-var-sm { font-size: 13px; }
.viz-halo { paint-order: stroke; stroke: var(--viz-surface, #fff); stroke-width: 7px; stroke-linejoin: round; }

/* a plate that holds an inline chart rather than an image (home page deep dives) */
.plate.plate--viz { display: block; aspect-ratio: auto; overflow: visible; position: relative; background: var(--viz-surface); padding: 18px 18px 12px; }
@media (max-width: 600px) { .plate.plate--viz { padding: 12px 10px 8px; } }