/* ============================================================
   GENE HEW v13 - SCENES (2026-09-24)
   Shared material for the 11 anime.js diagrams: 6 tool cards (#mech-*)
   and 5 AI rows (#ai-*). Frozen contract: tasks/scenes-contract.md.
   The diagrams are made of the same material as the hero prints: white
   paper cards with a soft print shadow, lying on warm paper, drawn in fine
   ink hairlines. Green only where something is live.
   Per-scene rules live in scenes-ai.css / scenes-t1.css / scenes-t2.css.
   ============================================================ */

:root {
  --sx-stage: #F2F0E9;                /* warm paper panel behind every diagram */
  --sx-grid: rgba(22, 32, 26, 0.075); /* dot grid on the panel */
  --sx-card: #FFFFFF;                 /* paper cards */
  --sx-tray: rgba(22, 32, 26, 0.045); /* grouping tray, replaces dashed boxes */
  --sx-hair: rgba(22, 32, 26, 0.17);  /* card edges, dividers */
  --sx-wire: rgba(22, 32, 26, 0.24);  /* resting wires */
  --sx-mute: rgba(22, 32, 26, 0.11);  /* placeholder text bars */
  --sx-ink: var(--ink);
  --sx-soft: #5E6A63;                 /* labels */
  --sx-green: var(--green);
  --sx-green-deep: var(--green-deep);
  --sx-green-tint: #DDF1E7;           /* fill of a lit card or chip */
}

/* ---------- the panel: warm paper with a faint dot grid ---------- */
.bld-viz.is-mech,
.tools-shell .bld-viz.is-mech {
  background-color: var(--sx-stage);
  background-image: radial-gradient(circle, var(--sx-grid) 0.9px, transparent 1.2px);
  background-size: 14px 14px;
  background-position: 7px 7px;
}
.aimap-viz .aimap-scene-wrap,
.aimap-viz:has(.aimap-scene) {
  background-color: var(--sx-stage);
  background-image: radial-gradient(circle, var(--sx-grid) 0.9px, transparent 1.2px);
  background-size: 14px 14px;
  background-position: 7px 7px;
}

/* the caption row under each AI diagram: warm, one step deeper than the panel (was mint #e4edde) */
.aimap-viz .aimap-flow,
.proof-diagram .aimap-flow { background: #EAE7DE; }

/* ---------- stroke weights per family (viewBox units) ----------
   Tool cards render at ~1.18x (desktop) / ~1.0x (phone); AI rows at ~1.39x / ~1.03x.
   Target on desktop: hairline 1px, wire 1.25px, live route 2px. */
.bld-viz .fp-mech { --sx-w-hair: 0.85; --sx-w-wire: 1.1; --sx-w-lit: 1.7; }
.aimap-scene      { --sx-w-hair: 0.72; --sx-w-wire: 0.9; --sx-w-lit: 1.45; }

/* ---------- shared vocabulary ---------- */
.fp-mech .sx-card { fill: var(--sx-card); stroke: var(--sx-hair); stroke-width: var(--sx-w-hair); }
.fp-mech .sx-tray { fill: var(--sx-tray); stroke: none; }
.fp-mech .sx-hairline { fill: none; stroke: var(--sx-hair); stroke-width: var(--sx-w-hair); }
.fp-mech .sx-wire { fill: none; stroke: var(--sx-wire); stroke-width: var(--sx-w-wire); stroke-linecap: round; stroke-linejoin: round; }
.fp-mech .sx-lit  { fill: none; stroke: var(--sx-green); stroke-width: var(--sx-w-lit); stroke-linecap: round; stroke-linejoin: round; }
.fp-mech .sx-head { fill: var(--sx-green); }
.fp-mech .sx-bar  { fill: var(--sx-mute); }
.fp-mech .sx-bar-on { fill: var(--sx-green); }
.fp-mech .sx-tint { fill: var(--sx-green-tint); }
.fp-mech .sx-core { fill: var(--sx-green-deep); }
.fp-mech .sx-core-mark { fill: #fff; }

/* labels: sentence case, body font. values: mono, tabular. */
.fp-mech svg text { font-family: var(--font-body); font-weight: 600; fill: var(--sx-soft); letter-spacing: 0; text-transform: none; }
.fp-mech svg text.sx-val { font-family: var(--font-mono); font-weight: 500; fill: var(--sx-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fp-mech svg text.sx-on { fill: var(--sx-green-deep); }
.fp-mech svg text.sx-ink { fill: var(--sx-ink); }

/* motion-path riders and pulses scale about their own centre */
.fp-mech .sx-head, .fp-mech .sx-pop { transform-box: fill-box; transform-origin: center; }