/*
 * research-figures.css — figures inside research posts (G-BUILDERSLENS-POSTS-VISUALS-20261019).
 * Colours only from the site tokens (src/styles/global.css :root). The un-classed state IS the final
 * state (JS off / reduced motion). research-figures.js adds .fig-armed (rewound, no transition) and then
 * .fig-run (transitions on), so a figure plays once and never visibly rewinds.
 */
.prose .fig, .prose .fig-img { margin: 2.2rem 0; }
.fig { border: 1px solid var(--hair); background: var(--ground-deep); padding: 1.2rem 1.1rem 1rem; }
.fig figcaption, .fig-img figcaption { font-family: var(--mono); font-size: 0.74rem; line-height: 1.5; color: var(--muted); margin-top: 0.8rem; }
.fig .fig-title { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.9rem; }
.fig-img img { display: block; width: 100%; height: auto; margin: 0; }

/* ── Master Rule gauge ─────────────────────────────────────────────────── */
.gauge { position: relative; padding-top: 2.4rem; padding-bottom: 1.6rem; }
.gauge-zone { position: absolute; top: 2.4rem; height: 14px; left: var(--from); width: calc(var(--to) - var(--from)); }
/* labels sit above the marker's arrowhead (13px over the bar), so the marker never crosses them */
.gauge-zone span { position: absolute; bottom: calc(100% + 16px); left: 6px; font-family: var(--mono); font-size: 0.7rem; white-space: nowrap; }
.gauge-zone.z1 { background: color-mix(in srgb, var(--p-green) 30%, transparent); } .gauge-zone.z1 span { color: var(--p-green); }
.gauge-zone.z2 { background: color-mix(in srgb, var(--p-amber) 30%, transparent); } .gauge-zone.z2 span { color: var(--p-amber); }
.gauge-zone.z3 { background: color-mix(in srgb, var(--p-red) 32%, transparent); } .gauge-zone.z3 span { color: var(--p-red); }
.gauge-track { position: relative; height: 14px; }
.gauge-tick { position: absolute; left: var(--at); top: -4px; height: 22px; border-left: 1px solid var(--ink-soft); }
.gauge-tick.exit { border-left-style: dashed; border-left-color: var(--p-red); }
.gauge-tick b { position: absolute; top: 24px; transform: translateX(-50%); font: 400 0.7rem var(--mono); color: var(--ink-soft); }
.gauge-marker { position: absolute; left: var(--at); top: -7px; width: 0; height: 28px; border-left: 2px solid var(--brass); }
.gauge-marker::after { content: ''; position: absolute; top: -6px; left: -7px; border: 6px solid transparent; border-top-color: var(--brass); }
.fig-armed:not(.fig-run) .gauge-marker { left: 0; }
.fig-run .gauge-marker { transition: left 1.6s cubic-bezier(.2, .7, .2, 1); }
.gauge-reading { font-size: 0.95rem; color: var(--ink); margin: 0.2rem 0 0; }
.gauge-reading .num { font-family: var(--mono); color: var(--brass); font-size: 1.15rem; margin-right: 0.4rem; }

/* ── count-up strip ────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; }
.stat { border-left: 2px solid var(--gold); padding: 0.2rem 0 0.2rem 0.8rem; }
.stat .num { display: block; font-family: var(--display); font-size: 1.9rem; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .what { display: block; font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); margin-top: 0.25rem; }

/* ── two-episode timeline ──────────────────────────────────────────────── */
.episodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.episode h4 { font-family: var(--display); color: var(--ink); font-size: 1.1rem; margin: 0 0 0.6rem; }
.episode ol { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 1px solid var(--hair); }
.episode li { position: relative; margin: 0 0 0.7rem; font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }
.episode li::before { content: ''; position: absolute; left: calc(-0.9rem - 5px); top: 0.4rem; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--gold)); }
.episode li.p1 { --dot: var(--p-green); } .episode li.p2 { --dot: var(--p-amber); } .episode li.p3 { --dot: var(--p-red); } .episode li.pk { --dot: var(--brass); }
.episode li time { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--gold); }
.fig-armed:not(.fig-run) .episode li { opacity: 0; transform: translateY(6px); }
.fig-run .episode li { transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i, 0) * 260ms); }

/* ── checkpoint diagram ────────────────────────────────────────────────── */
.cp { position: relative; margin: 2.2rem 0.6rem 3.4rem; height: 2px; background: var(--hair); }
.cp-stop { position: absolute; left: var(--at); top: -7px; transform: translateX(-50%); text-align: center; }
.cp-stop i { display: block; width: 16px; height: 16px; margin: 0 auto; border-radius: 50%; border: 2px solid var(--gold); background: var(--ground-deep); }
.cp-stop.start i { border-color: var(--ink-soft); }
/* the end stops align to their edge so their labels stay inside the figure at 375 px */
.cp-stop.start { transform: translateX(-8px); text-align: left; } .cp-stop.start i { margin: 0; }
.cp-stop.end { transform: translateX(calc(-100% + 8px)); text-align: right; } .cp-stop.end i { margin: 0 0 0 auto; }
.cp-stop b { display: block; margin-top: 6px; font: 500 0.72rem var(--mono); color: var(--ink); white-space: nowrap; }
.cp-stop em { display: block; font: normal 0.7rem var(--mono); color: var(--brass); white-space: nowrap; }
.cp-stop:not(.start) i { background: var(--gold); }
.cp-token { position: absolute; left: var(--at); top: -20px; transform: translateX(-50%); font: 0.7rem var(--mono); color: var(--ground-deep); background: var(--brass); padding: 1px 6px; white-space: nowrap; }
.fig-armed:not(.fig-run) .cp-token { left: 0; }
.fig-armed:not(.fig-run) .cp-stop:not(.start) i { background: var(--ground-deep); }
.fig-run .cp-token { transition: left 3.2s linear; }
.fig-run .cp-stop:not(.start) i { transition: background .3s ease; transition-delay: calc(var(--at-n) * 3.2s); }
.band { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0 0.8rem; margin-top: 0.4rem; font-size: 0.86rem; line-height: 1.4; }
.band .lvl { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); text-align: right; padding: 0.45rem 0; }
.band .cell { padding: 0.45rem 0.7rem; border-left: 2px solid var(--gold); color: var(--ink-soft); }
.band .cell.dead { border-left-color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--ink); }