/* swings
   Split from the single v22 stylesheet. Everything here is scoped to
   .card.swings and this form's own class prefix (rule 14: a change made for one
   card form is scoped to that form, by class).

   lane-face-fit-width: not evaluated at 430x743/375x667 this lane -- left at the shell default --faceh-min:var(--faceh) (852), which is byte-identical to today and safe. See NEXT.md / the coordinator for who picks this up. */
/* ------------------------------------------------------------------ *
   The Swings — the day's five biggest jumps, or its five biggest drops.

   Named in the header as well as the selectors. The block that used to sit
   here still called itself "The Close" from an earlier naming, and a later
   edit anchored on that comment and deleted this entire section -- the rows
   lost their grid and the sparklines lost `fill:none`, so they rendered as
   black blobs. A stale section name is a live hazard, not a typo.
 * ------------------------------------------------------------------ */
.card.swings .vizsec{padding:20px 0}

/* The Swings' own reduced-motion rules. They used to sit in the shared block
   at the end of The Poll's section: correct selectors, wrong neighbourhood.
   A rule for one form living where another form's markup happens to be is
   what AGENTS.md rule 14 is about, and it is how this block was deleted once
   already. */
@media (prefers-reduced-motion:reduce){
  .mv-spark{clip-path:none;transition:none}
}
.swings{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}
.mv-head{padding:0 15px;font-size:12px;font-weight:600;color:var(--muted);
  letter-spacing:0;text-transform:none}
.mv-cap{margin:6px 15px 0;padding:12px 0 0;font-size:12px;color:var(--dim);
  letter-spacing:0;text-transform:none;border-top:1px solid var(--line)}

/* space-between, not space-evenly. Evenly puts a gap above the first row and
   below the last as well as between them, so the panel had dead bands at both
   ends and the five rows sat in a floating block. */
.mv-rows{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;
  gap:18px;padding:0 15px;margin:0}

/* Fixed columns, not `auto`. Every row is its own grid, so an auto-sized
   figure column took its width from that row's own number -- -23.07% is wider
   than -9.47% -- and the chart column started at a different x on each row.
   Five plots that do not share a left edge cannot be read against each other,
   which is the entire point of stacking them. */
/* The rows do not animate in, and the stagger they used to arrive on is gone.

   Each row carried `--d: .26 + i*.13s` and faded up from `translateY(9px)`, so
   the card was read top to bottom: five rows appearing one after another, each
   dragging its own line and figure behind it. That made the ENTRANCE the
   animation and the price movement a detail inside it.

   The five names are not a sequence -- they are one list, ranked, and the
   reader is meant to compare them. So the list is simply there, and the only
   thing that moves is the thing worth watching: five sessions drawing at once,
   left to right, each figure tracking its own line. `--d` is no longer set on
   the row at all, so nothing here reads it. */
.mv-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 84px;gap:11px;align-items:center}

/* Originally shipped as identity in ink, not in the issuer's colour: five
   brand hexes do not survive the Session card's treatment -- TSLA and MSTR
   are red, and a red ticker beside a green line on an up day is the
   identity/direction collision. Overruled by the reviewer, session 33,
   2026-09-03: each row's ticker now carries its issuer's colour when one
   resolves (session/swings.mjs), ink when it does not. `--row-brand` is set
   per row rather than reusing `--brand` -- see the comment on `rowPalette()`
   in forms/swings.js for why a second name was necessary. */
.mv-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.mv-sym{font-size:18px;font-weight:700;letter-spacing:-.01em;
  color:var(--row-brand,var(--ink));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* On the real gainers list a ticker is not the identity -- STDN, ASST and CHA
   identify nothing to anyone. */
.mv-nm{font-size:12.5px;font-weight:400;color:var(--dim);letter-spacing:0;
  text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-num{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.mv-px{font-size:12px;font-weight:400;color:var(--dim);letter-spacing:0;
  font-variant-numeric:tabular-nums;text-transform:none}

/* The session, drawn. A clip wipe, not a dash offset -- see the .pathviz note
   above: non-scaling-stroke makes a browser measure dashes in screen pixels,
   so a dash reveal silently drops the end of a choppy path. */
.mv-field{position:relative;height:40px}
.mv-spark{display:block;width:100%;height:100%;overflow:visible;
  clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.22,.9,.3,1)}
.card.in .mv-spark{clip-path:inset(0 0 0 0)}
.mv-spark path{fill:none;stroke:var(--up);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mv-row.dn .mv-spark path{stroke:var(--down)}

/* Sized so the longest real figure -- a -23.07% with its sign -- still leaves
   the name column room for "Edison International" without an ellipsis. */
.mv-pct{font-size:17px;font-weight:700;letter-spacing:-.015em;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--up);white-space:nowrap}
.mv-row.dn .mv-pct{color:var(--down)}
/* A non-numeric pct (fe-002) draws neither -- both this and the spark stroke
   above defaulted to --up with no third colour, so a stored "n/a" read as a
   real gain. Never reachable from a real payload: direction() maps every
   finite pct, including zero, to up or dn. */
.mv-row.na .mv-pct{color:var(--muted)}
.mv-row.na .mv-spark path{stroke:var(--muted)}