/* loops/plan-market/style.css: the stage's own rules (every selector starts with .kl-plan-market or names one of the stage's movers).
   Identity build, 15 Oct 2026: the film is drawn as identity-comp/home-plan-run/index.html draws it, with no box behind it (the white sheet is gone). The comp's rules for the rows, the chip, the
   thumbnails, the competitor's ad and the band around it are in home-src/css/plan.css (the loop page, loops/plan-market/index.html, links that file too). This file only holds what a live
   stage needs on top of the comp: the reset of the motion kit's stage, the nodes the round moves (the faint fill that lights the price, the price's own brackets) and the travelling brackets.
   The markup and this CSS are the POSTER, the round's last frame (builder contract v3): Searches and Click prices in place, the price lit in its brackets, the chip and the competitor's ad there,
   the travelling brackets away. Every part the round brings in rests at its poster value here 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 (the comp's figure has none), and the comp's own reset (the motion kit's stage reset is put back) */
.kl-stage.kl-plan-market { contain: none; overflow: visible; isolation: auto; container-type: normal; aspect-ratio: auto; min-width: 0; margin: 0; line-height: normal; color: inherit; font-family: inherit; }
.kl-stage.kl-plan-market img { max-width: none; }
/* the camera is the table and the ad: a real box, the travelling brackets' frame of reference (the motion kit's camera is absolute, inset 0) */
.kl-plan-market .kl-camera { position: relative; inset: auto; display: flow-root; }
@media (min-width: 1180px) { .kl-plan-market .kl-camera { display: grid; } }
.kl-plan-market .hp-ad .k-pic { --pw-d: 204px; --ph-d: 255px; }

/* the Replay glyph: the comp's replay icon; Play and Pause show only when the director says so (data-state), as the motion kit's .pd-ctl does with its masks */
.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; }

/* the price: the comp's found box (the kit's .k-found, drawn here so its faint teal fill is a node of its own and can arrive), with the kit's own brackets 6 px clear of it.
   The fill is .pm-lit (the plate, opacity 0 to 1 at 1.50); the brackets are the kit's .k-brackets, so the poster is the comp's still; they arrive at 3.80 as the travelling ones leave. */
.kl-plan-market .pm-found { position: relative; isolation: isolate; display: inline-block; padding: 4px 8px; border-radius: 3px; }
.kl-plan-market .pm-lit { position: absolute; inset: 0; z-index: -1; display: block; border-radius: 3px; background: rgba(167, 244, 255, .09); pointer-events: none; }

/* the travelling brackets, Muffin Intel only: the kit's brackets (arms 13 px, 19 from 1180; 2.5 px teal over a 4.5 px ink keyline). They are away at rest; the builder measures the price's fill and
   the competitor's frame, puts the four corners on the box (6 px clear) and moves them by translate and opacity only. */
.kl-plan-market .pm-br { position: absolute; left: 0; top: 0; z-index: 4; display: block; width: 13px; height: 13px; opacity: 0; pointer-events: none; }
.kl-plan-market .pm-br svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kl-plan-market .pm-br path { fill: none; stroke-linecap: butt; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.kl-plan-market .pm-brk { stroke: var(--ink); stroke-width: 4.5; }
.kl-plan-market .pm-brt { stroke: var(--teal); stroke-width: 2.5; }
@media (min-width: 1180px) { .kl-plan-market .pm-br { width: 19px; height: 19px; } }

/* only while frame 0 is armed or a round runs (builder.js, tl.data) the camera is its own stacking context; the poster takes it off, so the rest frame repaints whole */
.kl-plan-market.pm-live .kl-camera { isolation: isolate; }