/* The Index Change -- the stage, rebuilt session 48 (2026-09-18).

   Every rule here is scoped to `.card.indexchange` (rule 14) and every class
   is prefixed `ixc-` (pipeline/selftest/renderer.mjs's FORM_SECTIONS). What
   this file borrows and only positions: `.rp-svg`/`.rp-line`/`.rp-ref`
   (css/replay.css -- the small line in the strip is viz.js's `lineChart`
   with ns "rp"), `.rp-tp-*` (the transport), `.hooktick` (shell.css).

   THE MOTION is one number a frame from js/forms/indexchange.js -- the
   crossing's `--xg-p` (css/crossing.css), the strip's `--rp-p`
   (css/replay.css) -- linear in time; nothing here keeps time and nothing
   here transitions.

   MEMBERSHIP IS CHROME, NOT DIRECTION. The verb, the index label and the
   marks are ink and muted greys. `--up`/`--down` appear once, on the strip's
   percentage, because that is a price. The hero mark alone takes the
   subject's `--brand`, the way every other form's ticker does.

   TYPE IS DESIGN PX, VIA TOKENS (rule 8, amended session 34): the face is
   laid out at 393 and scaled, so every size is an `--fs-*` token. */

/* width:100%: `.stage` is a centring flex ROW (shell.css), so this measured
   304px of 399 -- the strip's 300px viewBox -- until it was told (session 48). */
.card.indexchange .ixc{position:relative;display:flex;flex-direction:column;
  height:100%;min-height:0;width:100%;padding:0 2px}

.card.indexchange .ixc-chrome{font-size:var(--fs-10);letter-spacing:var(--ls-14);
  text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}

/* The transport. The again button is in the shared `.rp-top` row, top-right,
   where every replaying card has it (css/replay.css owns its rules). The
   skip button sits in this form's own corner wrapper, bottom-right, pushed
   into the rail so it never shortens the line ("move the rewind and fast
   forward pieces out a bit more" -- the reviewer, session 48). */
.card.indexchange .ixc-ctl{position:absolute;z-index:3;width:30px;height:30px}
.card.indexchange .ixc-ctl--skip{bottom:-4px;right:-10px}

/* The crossing and the timeline are css/crossing.css's (`xg-`), shared with
   The Rebalance since session 48. This sheet owns the roster line and the
   reaction strip. The field starts ON the transport row: its heads sit level
   with the again button, so the row every other card fills with its ticker
   is filled here by the column heads. -20px is `.rp-top`'s own min-height. */
.card.indexchange .xg-field{margin-top:-20px}

.card.indexchange .ixc-roster{margin-top:8px;font-size:var(--fs-11);color:var(--dim);
  text-align:center;letter-spacing:var(--ls-005)}

/* ---------------------------------------------------------- the strip */

/* The strip is the section that grows: whatever height the stage has left
   after the crossing and the timeline goes to the line, centred, so the
   stage fills its panel instead of leaving black under the foot ("we now
   have a big grey space" -- the reviewer, session 48). The SVG stretches
   (viz.js draws it preserveAspectRatio="none"), so a taller box is a taller
   line, not a scaled one. */
.card.indexchange .ixc-strip{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.card.indexchange .ixc-strip-head{display:flex;justify-content:space-between;align-items:baseline}
.card.indexchange .ixc-chg{font-size:var(--fs-15);font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:var(--ls-n02)}
.card.indexchange .ixc-chg.up{color:var(--up)}
.card.indexchange .ixc-chg.dn{color:var(--down)}
/* Full width, the line's box centred between the head and the foot, so it
   lines up with the timeline's rule above it ("carry the graph to the right
   more to line up with the rest of the graphic, vertically center it a
   bit"). */
.card.indexchange .ixc-plot{position:relative;margin-top:8px;touch-action:pan-y;
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
.card.indexchange .ixc-canvas{position:relative;flex:1 1 44px;min-height:44px;max-height:120px;width:100%;margin:8px 0}
/* 36px under the foot: the skip button is 30px tall and sits 4px past the
   stage's bottom edge, so the labels end above it rather than under it. */
.card.indexchange .ixc-strip-foot{display:flex;justify-content:space-between;margin-top:2px;padding-bottom:36px;
  font-size:var(--fs-10);color:var(--dim);font-variant-numeric:tabular-nums}
.card.indexchange .ixc-strip--none{display:flex;justify-content:space-between;align-items:baseline}
.card.indexchange .ixc-none{font-size:var(--fs-11);color:var(--dim)}