/* drive
   Everything here hangs off `.card.drive` or a `drv-` class, per AGENTS.md
   rule 14 ("a change made for one card form is scoped to that form, by
   class") -- pipeline/selftest.mjs's FORM_SECTIONS guard asserts that no
   `drv-` rule is set anywhere but between these two banners. */

/* ------------------------------------------------------------------ *
   The Drive — play by play, drawn in ink.

   No team palettes exist (docs/drive-2026-09-13.md); team names carry
   identity, so this file draws one colour scheme (--ink on --panel, the
   card's own tokens) and never a per-team hue. The field is a single
   vertical strip, most of the panel's height, flex:1 the same way every
   solo form's stage gives what the window leaves rather than declaring a
   fixed height (AGENTS rule 8's amendments). Fixed reserves: the masthead
   (matchup + quarter/clock), the score+odds row, and the one-line result
   strip below the field -- the field is everything the window leaves
   between them.
 * ------------------------------------------------------------------ */

/* `.stage > *{height:100%}` (css/shell.css) already gives THIS element
   (the `.drive` div `visualDrive()` draws, the direct child of `.stage`)
   a full-height box -- the bug the coordinator's send-back caught was
   putting `display:flex` on `.stage` itself instead of on the element
   that actually needs to distribute that height to its own children.
   `.stage` was never the flex column; `.drive` has to be. */
.card.drive .stage > .drive{position:relative;display:flex;flex-direction:column;height:100%;gap:8px}
/* The skip button's corner: bottom-right, pushed into the rail, the same
   place The Index Change puts it. The result strip keeps clear of it. */
.card.drive .drv-ctl{position:absolute;right:-10px;bottom:-4px;width:30px;height:30px;z-index:3}
.card.drive .drv-result{padding-right:34px}

/* The $100 line: a strip under the result, the Index Change's shape -- a
   chrome head with the live figure, a short line (viz.js lineChart, ns "rp",
   css/replay.css draws it; `--rp-p` set here per play is its reveal), a
   foot naming kickoff and final. The one place a price colour appears on
   this card: the line's own two-tone cut about the $100 baseline. */
.card.drive .drv-strip{flex:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  padding-right:34px}
.card.drive .drv-strip-head{display:flex;justify-content:space-between;align-items:baseline}
.card.drive .drv-chrome{font-size:var(--fs-10);letter-spacing:var(--ls-14);text-transform:uppercase;
  color:var(--muted);font-weight:600;white-space:nowrap}
.card.drive .drv-stake{font-size:var(--fs-15);font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:var(--ls-n02);color:var(--ink)}
/* 84px, not 44: the one-minute series swings 30 points mid-game and the
   short box flattened them under the late spike ("can we get more granular
   than this?"). The field gives the height. */
.card.drive .drv-canvas{position:relative;height:84px;width:100%;margin:8px 0 4px}

/* The pop: a scoring play swells the score line and the result word ~12%
   and settles, in the scorer's colour, once. `transform`/`color` only. */
@keyframes drv-pop{0%{transform:scale(1)}30%{transform:scale(1.12)}100%{transform:scale(1)}}
.card.drive .drv-pop{animation:drv-pop .7s cubic-bezier(.2,.9,.3,1) 1;transform-origin:left center}
.card.drive .drv-half{display:inline-block}
.card.drive .drv-half[data-side="home"].drv-pop{transform-origin:right center}
.card.drive .drv-dash{margin:0 .08em}
.card.drive .drv-result.drv-pop{color:var(--drv-pop-ink, var(--ink))}
.card.drive .drv-stake.drv-pop{transform-origin:right center}
@media (prefers-reduced-motion: reduce){ .card.drive .drv-pop{animation:none} }
.card.drive .drv-strip-foot{display:flex;justify-content:space-between;font-size:var(--fs-10);
  color:var(--dim);font-variant-numeric:tabular-nums}

.drv-head{display:flex;align-items:baseline;justify-content:space-between;
  flex:none;font-size:var(--fs-13);font-weight:600;color:var(--muted)}
.drv-matchup{color:var(--ink)}
.drv-qtr{font-variant-numeric:tabular-nums;color:var(--dim)}

.drv-score{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex:none;font-weight:700}
.drv-score-line{font-size:var(--fs-headline-lg,24px);color:var(--ink);
  font-variant-numeric:tabular-nums}
.drv-odds{flex:none;white-space:nowrap;font-size:var(--fs-13);color:var(--up);font-variant-numeric:tabular-nums;
  letter-spacing:var(--ls-01)}

/* The field, LEFT TO RIGHT (session 48: "left to right like an actual
   field"). The away end zone is x=0, the home end zone x=100; yard lines
   every ten as thin vertical rules, midfield labelled. `position:relative`
   lets the marker and the trail place themselves in percentages of it. Team
   colour appears in exactly three places -- the end-zone labels, the trail
   segments and the chip -- read off `--drv-away`/`--drv-home`, which the
   JS writes from the payload's team palettes (ink when none is on file). */
.drv-field{position:relative;flex:1;min-height:96px;
  border-left:1px solid var(--dim);border-right:1px solid var(--dim);
  background:repeating-linear-gradient(to right,
    transparent 0, transparent calc(10% - 1px), var(--line) 10%);
}
.drv-endlabel{position:absolute;top:4px;font-size:var(--fs-11-5);font-weight:700;
  letter-spacing:var(--ls-02);color:var(--dim)}
.drv-endlabel-left{left:6px}
.drv-endlabel-right{right:6px}
.drv-endlabel .drv-team{color:inherit}
.drv-endlabel-left .drv-team{color:var(--drv-away)}
.drv-endlabel-right .drv-team{color:var(--drv-home)}
.drv-yardline-mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--edge);
  transform:translateX(-50%);pointer-events:none}
.drv-yardline-mid span{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  font-size:var(--fs-10);color:var(--dim);background:var(--panel);padding:0 4px}

/* The trail: one <i> per drive segment, placed by the JS-computed
   left/width along the field's midline -- a cumulative record of every
   drive walked so far, dimmed for everything but the live one, in the
   possessing team's colour. */
.drv-trail{position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%)}
.drv-trail i{position:absolute;top:0;height:3px;background:var(--drv-seg, var(--dim));opacity:.35;border-radius:var(--radius-xs)}
.drv-trail i.drv-seg-live{opacity:1}

/* The marker: a chip carrying the team with the ball, centred on the ball's
   x along the midline. `placeDot` (createWalk, js/replay.js) writes `left`
   and the team; `top` is the midline. */
.drv-marker{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  padding:3px 6px;border-radius:var(--radius-xs);font-size:var(--fs-10);font-weight:800;
  letter-spacing:var(--ls-04);line-height:1;font-style:normal;
  color:var(--ink);background:var(--drv-chip, var(--edge));
  box-shadow:0 0 0 3px var(--panel);transition:none}

.drv-team{font-weight:inherit}

.drv-result{flex:none;min-height:18px;font-size:var(--fs-13);font-weight:700;
  letter-spacing:var(--ls-01);color:var(--ink);text-transform:uppercase}

.drv-empty{color:var(--muted);font-size:var(--fs-13)}

/* Reduced motion: the state machine in js/forms/drive.js paints the final
   frame directly and never starts a rAF loop, so no transition rule is
   needed here beyond `transition:none` on the marker above -- there is
   nothing this file has to disable. */