/* anim.css — companion to assets/anim.js.
 *
 * Two jobs:
 *   1. the beats list, which is the no-JS / print fallback for scene captions;
 *   2. a small shared drawing language for the SVG scenes, so every diagram in
 *      the course looks like it came from the same hand.
 *
 * Light-only, like the rest of the course. No dark-mode block here either.
 */

/* ---------- beats list: visible without JS, hidden once anim.js runs ---------- */

.anim-beats {
  margin: var(--s-3) 0 0;
  padding-left: 1.4rem;
  font-size: .88em;
  color: var(--muted);
  line-height: 1.55;
}
.anim-beats li { margin-bottom: var(--s-1); }

.ab-step {
  font: 600 11.5px var(--mono);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.anim-controls .ab-play { min-width: 4.4rem; }
figure[data-anim]:focus-visible { outline: 3px solid var(--blue-bg); outline-offset: 3px; }

/* ---------- shared SVG drawing language ---------- */

.dg text { font-family: var(--mono); fill: var(--ink); }
.dg .t-head { font-size: 10px; font-weight: 700; letter-spacing: .09em; fill: var(--accent-ink); }
.dg .t-lbl { font-size: 12px; font-weight: 600; }
.dg .t-sub { font-size: 10px; fill: var(--muted); }
.dg .t-tiny { font-size: 8.5px; fill: var(--faint); }
.dg .t-a { fill: var(--accent-ink); }
.dg .t-g { fill: var(--green); }
.dg .t-x { fill: #b5341f; }

.dg .box { fill: #fff; stroke: var(--border); stroke-width: 1.25; }
.dg .box-a { fill: var(--blue-bg); stroke: var(--blue-edge); stroke-width: 1.25; }
.dg .box-g { fill: var(--green-bg); stroke: var(--green-edge); stroke-width: 1.25; }
.dg .box-w { fill: var(--amber-bg); stroke: var(--amber-edge); stroke-width: 1.25; }
.dg .box-x { fill: #fbeeeb; stroke: #dfa093; stroke-width: 1.25; }
.dg .box-d { fill: var(--code-bg); stroke: var(--border); stroke-width: 1.1; stroke-dasharray: 4 3; }

.dg .rail { stroke: var(--border); stroke-width: 1.2; stroke-dasharray: 3 4; fill: none; }
.dg .link { stroke: var(--faint); stroke-width: 1.4; fill: none; }
.dg .link-a { stroke: var(--accent); stroke-width: 2; fill: none; }
.dg .link-x { stroke: #b5341f; stroke-width: 2; fill: none; }
.dg .link-g { stroke: var(--green); stroke-width: 2; fill: none; }

.dg .fill-a { fill: var(--accent); }
.dg .fill-g { fill: var(--green); }
.dg .fill-x { fill: #b5341f; }
.dg .fill-m { fill: var(--faint); }

/* ---------- small inline legend under a scene ---------- */

.legend {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 4px 0;
  font: 500 11.5px var(--mono); color: var(--muted);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); background: #fff; }
.legend i.a { background: var(--blue-bg); border-color: var(--blue-edge); }
.legend i.g { background: var(--green-bg); border-color: var(--green-edge); }
.legend i.w { background: var(--amber-bg); border-color: var(--amber-edge); }
.legend i.x { background: #fbeeeb; border-color: #dfa093; }

/* ---------- two-up comparison panels ---------- */

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: 0 0 var(--s-4); }
.grid > * { min-width: 0; }

.panel {
  border: 1px solid var(--border); background: var(--card);
  border-radius: 10px; padding: 14px 16px; font-size: .93em;
}
.panel > :last-child { margin-bottom: 0; }
/* Panel labels are `<p class="ph">`, not headings — they are captions on a
   comparison box, and promoting them to <h4> puts phantom sections in the
   document outline (and trips the h2 -> h4 jump check). */
.panel .ph {
  font: 700 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s-2);
}
.panel.bad { background: #fdf1ee; border-color: #e8c3b8; }
.panel.bad .ph { color: #b5341f; }
.panel.good { background: var(--green-bg); border-color: var(--green-edge); }
.panel.good .ph { color: var(--green); }
.panel ul { padding-left: 1.15rem; margin-bottom: 0; }

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}

@media print {
  .anim-beats[hidden] { display: block !important; }
  .grid { grid-template-columns: 1fr 1fr; }
  figure[data-anim] { break-inside: avoid; }
}