/* ---------- Figure 4: control-to-screen latency (inline SVG built in js/latency.js; 1 unit = 1 px) ----------
 * Directions use the steering demo's colours (css/steer.css, the .steer-legend swatches): up --purple, down --ochre,
 * left --blue, right --magenta. */
.lat-stage { max-width: 880px; margin-inline: auto; }
.lat-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lat-svg text { font-family: var(--sans); }
.lat-rowlbl { font-size: 13px; font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: var(--ground); stroke-width: 3px; stroke-linejoin: round; }
.lat-rowlbl .sub, .lat-rowlbl.sub { font-weight: 400; fill: var(--muted); }
.lat-fnum { font: 400 12px var(--mono); fill: var(--muted); text-anchor: middle; }
.lat-axis { font: 400 12px var(--sans); fill: var(--muted); text-anchor: middle; }
.lat-axisline { stroke: var(--line); stroke-width: 1; }

/* A frame: an empty outline until the playhead reaches it, then a filled cell with its direction arrow */
.lat-fr { --dir: var(--ghost); }
.lat-fr[data-dir="U"] { --dir: var(--purple); }
.lat-fr[data-dir="D"] { --dir: var(--ochre); }
.lat-fr[data-dir="L"] { --dir: var(--blue); }
.lat-fr[data-dir="R"] { --dir: var(--magenta); }
.lat-out { fill: none; stroke: var(--ghost); stroke-width: 1; transition: opacity 0.2s ease; }
.lat-fill { fill: var(--dir); opacity: 0; transition: opacity 0.2s ease; }
.lat-arrow { fill: none; stroke: var(--on-act); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.2s ease; }
.lat-block { fill: none; stroke: var(--muted); stroke-width: 1; }   /* one outline per 4-frame block of the latent model */
.lat-fr.on .lat-out { opacity: 0; }
.lat-fr.on .lat-fill, .lat-fr.on .lat-arrow { opacity: 1; }

/* Waiting cell (the model still shows an older direction than the key held): faded fill, hatching and a thin outline in
 * its own direction colour, and an arrow in that colour instead of white. */
.lat-hatch line { stroke: var(--dir); stroke-width: 1; }
.lat-hatch[data-dir="U"] { --dir: var(--purple); }
.lat-hatch[data-dir="D"] { --dir: var(--ochre); }
.lat-hatch[data-dir="L"] { --dir: var(--blue); }
.lat-hatch[data-dir="R"] { --dir: var(--magenta); }
.lat-hatchfill, .lat-waitout, .lat-arrow-halo { opacity: 0; transition: opacity 0.2s ease; }
.lat-hatchfill { fill-opacity: 0.55; }
.lat-waitout { fill: none; stroke: var(--dir); stroke-width: 1; }
.lat-arrow-halo { fill: none; stroke: var(--ground); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.lat-fr[data-stale] .lat-fill { fill-opacity: 0.16; }
.lat-fr[data-stale].on .lat-hatchfill, .lat-fr[data-stale].on .lat-waitout, .lat-fr[data-stale].on .lat-arrow-halo { opacity: 1; }
.lat-fr[data-stale] .lat-arrow { stroke: var(--dir); }

/* Run of waiting cells: a thin bracket just above it with a short label, shown when the playhead reaches the run. */
.lat-run { opacity: 0; transition: opacity 0.2s ease; }
.lat-run.on { opacity: 1; }
.lat-brk { fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linejoin: round; }
.lat-svg .lat-runlbl { font-size: 11.5px; font-weight: 400; fill: var(--accent); text-anchor: middle; }

/* Playhead */
.lat-head { stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }

/* Legend: one centred line in the page's sans font, sentence case; wraps on narrow screens. */
.lat-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; margin-top: var(--sp-3); color: var(--ink); font: 400 13px/1.4 var(--sans); }
.lat-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.lat-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: none; }
.lat-legend .u { background: var(--purple); }
.lat-legend .l { background: var(--blue); }
.lat-legend .r { background: var(--magenta); }
.lat-legend .wait { background: repeating-linear-gradient(135deg, var(--muted) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--muted); }

/* Play / pause: the button is the video players' (.controls .pp); only its placement is set here. */
#fig4 .controls { justify-content: center; margin-top: var(--sp-3); }

@media (max-width: 480px) {
  .lat-rowlbl { font-size: 12.5px; }
  .lat-rowlbl.sub { font-size: 11.5px; }
  .lat-svg .lat-runlbl { font-size: 11px; }
  .lat-legend { font-size: 12.5px; gap: 6px 14px; }
}
/* Reduced motion: the figure is a still frame. If the reader presses play it moves, because they asked for it. */
@media (prefers-reduced-motion: reduce) {
  .lat-svg:not([data-running="true"]) * { transition: none; }
}