/* loops/run-make/style.css: the stage's own rules (every selector starts with .kl-run-make).
   Identity build, 15 Oct 2026: the film is drawn as identity-comp/home-plan-run/index.html draws it, on the ink chamber, with no box behind it (the light sheet and the three cards are gone).
   The comp's rules for the brief, the ad, the page, the Approve stamp and the band around them are in home-src/css/run.css and plan.css (the loop page, loops/run-make/index.html, links both).
   This file only holds what a live stage needs on top of the comp: the reset of the motion kit's stage, and the camera as a real box.
   The markup and the CSS are the POSTER, the round's last frame (builder contract v3): the three brief rows ticked, the first line in its chip and on the ad, both arrows, the page there, and the
   stamp in its last frame, yellow and reading "Approved". Every part the round brings in rests at its poster value and is hidden or offset only at frame 0 (builder.js). */

/* the stage is not a box: no clip, no paint containment, no sizing container, no stacking context of its own (they snap the origin to a whole pixel and move every glyph by a fraction);
   the comp's own reset is put back where the motion kit's stage reset differs */
.kl-stage.kl-run-make { contain: none; overflow: visible; isolation: auto; container-type: normal; aspect-ratio: auto; min-width: 0; line-height: normal; color: inherit; font-family: inherit; }
.kl-stage.kl-run-make img { max-width: none; }
/* the camera is the comp's .hp-flow (a grid, in run.css): a real box in flow, not the motion kit's absolute layer */
.kl-run-make .kl-camera { position: relative; inset: auto; }
.kl-run-make .hp-adf .k-pic { --pw: 184px; --ph: 230px; --pw-d: 304px; --ph-d: 380px; }

/* the Replay glyph: the comp's replay icon; Play and Pause show only when the director says so (data-state) */
.hp-rp.pd-ctl { box-shadow: none; border-radius: 0; background: none; transition: none; }
.kl-stage .hp-rp.pd-ctl { color: var(--fg); }   /* the band's ground decides the glyph's colour (an older band rule, .prc .pd-ctl, names one ink for every control) */
.hp-rp.pd-ctl::before, .hp-rp.pd-ctl::after { content: none; display: none; }
.hp-rp.pd-ctl:active { transform: none; }
@media (hover: hover) and (pointer: fine) { html .hp-rp.pd-ctl:hover { background: none; } }   /* the motion kit's hover fill sits in the same media query, so this answer to it does too */
.hp-rp.pd-ctl svg { display: block; }
.hp-rp.pd-ctl .hp-rp-p, .hp-rp.pd-ctl .hp-rp-s { display: none; }
.hp-rp.pd-ctl[data-state="play"] .hp-rp-r, .hp-rp.pd-ctl[data-state="pause"] .hp-rp-r { display: none; }
.hp-rp.pd-ctl[data-state="play"] .hp-rp-p, .hp-rp.pd-ctl[data-state="pause"] .hp-rp-s { display: block; }
.hp-rp.pd-ctl[data-state="play"] .hp-rp-p { fill: currentColor; }