/* measure -- js/measure.js's two-finger overlay. One shared layer for every
   `.pathwrap`-shaped box: the Move's post-playback inspector (js/inspect.js,
   and through it The Poll/Index Change/Earnings) and the solo-card drag
   scrub (js/scrub.js). Nothing here names a card form (rule 14): a second
   finger on any of those boxes gets the identical two hairlines and lit
   segment. The readout is not drawn here at all -- js/measure.js hands each
   host `onReadout({price, change, dir})` and the host writes its own
   `.rdprice`/`.rdchg` (or whatever its own single-finger drag already
   rewrites), so the reading lives in exactly the one place on the card a
   single-finger drag already put it, never a second copy floating over the
   line.

   Absolutely positioned over whatever box IS the chart's own coordinate
   space, same requirement `.rp-insp` (css/replay.css) already makes of its
   own container -- that box is `position:relative` already. `pointer-events:
   none` throughout: the layer is drawn, never hit-tested, so it never
   steals the gesture it is illustrating (js/measure.js listens on the box
   itself, not on anything drawn here). */
.ms-layer{position:absolute;inset:0;pointer-events:none;opacity:0}
.ms-layer.on{opacity:1}
.ms-bar{position:absolute;top:0;bottom:0;width:1px;background:var(--edge)}
.ms-knob{position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--ink);transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px rgba(245,245,247,.14)}

/* The lit segment. js/measure.js clones the box's own <svg> wholesale and
   clips the clone to the two hairlines' own x-range in the box's own
   percentage space -- it is never a second path built from `pts` (AGENTS.md
   rule 16, "a component's DOM is not its data"). Sharing the clone's class
   list with the original is what lets it inherit the original's own stroke
   colour (`.rp-line.up`/`.dn`, `.pathline`/`.pathviz.dn`) with no colour
   decision made here. The original dims via an inline `opacity` js/measure.js
   sets directly on it, not a class, so this file never has to name the
   source svg's own class to reach it. */
.ms-lit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .ms-layer{transition:none}
}