/* styles/views/run.css: test flows and live widgets (.run-*, .lv-*) (owner E2, UX spec §13.1).
   Picker, coach, Charge-Up calibration, the run loop and src/ui/live/*. Tokens only, no hex values.
   Animate transform and opacity only; every keyframe respects data-motion
   (app.css collapses animation durations when reduced). */

/* ======================================================================
   Shared run chrome
   ====================================================================== */
.run, .run-coach, .run-cal {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); padding-top: var(--safe-top);
}
.run { height: 100vh; height: 100dvh; overflow: hidden; }
.run-top, .run-topbar {
  flex: none; height: var(--run-bar-h); display: grid; align-items: center; gap: var(--s-2);
  grid-template-columns: var(--tap) 1fr auto auto; padding: 0 var(--s-3) 0 var(--s-1);
}
.run-topbar { grid-template-columns: var(--tap) 1fr var(--tap); padding: 0 var(--s-1); }
.run-top-title, .run-topbar-title {
  font-family: var(--font-num); font-weight: 600; font-size: 18px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0;
}
.run-topbar-title { text-align: center; }
.run-topbar-step { justify-self: end; padding-right: var(--s-3); font: 600 13px var(--font-mono); color: var(--muted); }
.run-topbar-spacer { width: var(--tap); }

/* hold-to-end ✕ (bw-hold restyled compact) */
.run-x { position: relative; width: var(--tap); height: var(--tap); display: grid; place-items: center; }
.run-x bw-hold { display: block; }
.run-x .ui-hold { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; gap: 0; background: var(--surface-2); }
.run-x .ui-hold::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.run-x .ui-hold-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.run-x .ui-hold .ui-icon { width: 20px; height: 20px; }

.run-pips { display: inline-flex; align-items: center; gap: 5px; }
.run-pip {
  width: 12px; height: 12px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1.5px solid var(--line-strong); font: 800 11px/1 var(--font-num); color: var(--warn-ink);
}
.run-pip--valid { background: var(--brand); border-color: var(--brand); }
.run-pip--best { background: transparent; border-color: transparent; color: var(--gold); width: 14px; height: 14px; }
.run-pip--fault { border-color: transparent; font-size: 15px; }
.run-top-gauge { display: inline-flex; }

.run-demo-pill {
  display: inline-flex; align-items: center; gap: 5px; align-self: center; margin: 0 0 var(--s-1);
  padding: 2px 10px; border-radius: var(--r-pill); background: var(--info-soft); color: var(--info);
  font: 700 12px/18px var(--font-num); letter-spacing: .1em; text-transform: uppercase;
}
.run-demo-pill--stage { position: absolute; left: var(--s-3); top: var(--s-2); z-index: 3; margin: 0; padding: 1px 8px; font-size: 11px; }
.run-banner { flex: none; padding: 0 var(--gutter) var(--s-2); }

/* ======================================================================
   Run layout: stage · status (48) · action (88); Bench on desktop
   ====================================================================== */
.run-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.run.is-wide .run-body { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-4); padding: 0 var(--s-4) var(--s-4); max-width: 1440px; width: 100%; margin: 0 auto; }
.run.is-xl .run-body { grid-template-columns: 320px minmax(0, 1fr) 360px; }
.run-main { min-height: 0; display: flex; flex-direction: column; }
.run.is-wide .run-main { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }

.run-stage {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; isolation: isolate;
  background-color: var(--stage);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.run.is-wide .run-stage { border-top: 0; }
.run-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(90% 60% at 40% 0%, var(--brand-soft), transparent 70%);
  transition: opacity 600ms var(--ease-out);
}
.phase-result .run-stage::before, .phase-complete .run-stage::before { opacity: 1; }
.run-floor {
  position: absolute; left: -40%; right: -40%; bottom: -2px; height: 34%; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: 56px 36px; background-position: center bottom;
  transform: perspective(240px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, black 20%, transparent 95%); mask-image: linear-gradient(to top, black 20%, transparent 95%);
}

.run-status {
  flex: none; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 var(--gutter);
  background: var(--bg);
}
.run.is-wide .run-status { background: var(--bg-2); }
.run-status-ring { flex: none; }
.run-cue {
  flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--font-num); font-weight: 600; font-size: 22px; line-height: 1;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phase-locked .run-cue { color: var(--brand-strong); }
.phase-fault .run-cue { color: var(--warn-ink); font-size: 18px; }
.phase-paused .run-cue { color: var(--warn-ink); font-size: 16px; white-space: normal; line-height: 1.15; }
.run-status.is-resting .run-cue { display: flex; align-items: baseline; gap: 8px; font-size: 20px; color: var(--ink-2); }
.run-status.is-resting .run-cue small { font: 600 13px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--muted); }
.run-pips-n { font: 600 16px var(--font-num); letter-spacing: .06em; color: var(--muted); }
.run-pips-n b { color: var(--ink); font-weight: 700; font-size: 18px; }
.run-fs-mismatch { font: 600 17px var(--font-ui); color: var(--warn-ink); letter-spacing: 0; }
.run-fs-sub { margin: -2px 0 0; font-size: var(--fs-label); font-weight: 650; color: var(--brand-strong); }
.run-done-stats dd.is-pb { color: var(--gold); }
.run-fs-ok { display: inline-flex; vertical-align: -2px; color: var(--good); }
.run-fsstage.is-result .run-fs-callline { font-size: 24px; }
.run-rest { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: var(--fs-label); color: var(--muted); max-width: 52%; }
.run-rest > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.run-action {
  flex: none; min-height: 88px; padding: var(--s-2) var(--gutter) calc(var(--s-2) + var(--safe-bottom));
  display: flex; flex-direction: column; justify-content: center; gap: 4px; background: var(--bg);
}
.run.is-wide .run-action { background: var(--bg-2); }
.run-act-row { display: flex; gap: var(--s-3); align-items: center; }
.run-act-row > .ui-btn, .run-act-row > .run-share-wrap { flex: 1 1 0; min-width: 0; }
.run-share-wrap .ui-btn { width: 100%; padding: 0 var(--s-3); }
.run-share-wrap .ui-btn-label { white-space: nowrap; }
.run-act-row > .run-share-wrap { flex: 1.25 1 0; }
.run-act-row--quiet { justify-content: space-between; min-height: 48px; }
.run-act-note .ui-note { text-align: center; }
.run-endset {
  min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  color: var(--ink-2); font-weight: 650; font-size: var(--fs-small);
}
.run-next-rest { font-family: var(--font-mono); font-weight: 500; opacity: .75; font-size: 15px; }
.run-share { animation: run-rise 420ms var(--spring-pop) 1300ms both; }

/* Hub, touch stale: the whole lower zone is one tap target (≥ 45% of the frame). */
.run-action.is-tapzone { min-height: calc(45vh - 48px); min-height: calc(45dvh - 48px); padding-top: 0; }
.run-status.is-tapzone .run-cue { color: var(--brand-strong); }
.run-tap {
  position: relative; flex: 1 1 auto; width: 100%; min-height: 120px; border-radius: var(--r-xl);
  border: 2px dashed var(--brand-line); background: var(--brand-soft); color: var(--brand-strong);
  font: 700 26px/1.1 var(--font-num); letter-spacing: .06em; text-transform: uppercase; overflow: hidden;
}
.run-tap-ring {
  position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%;
  border: 2px solid var(--brand-line); opacity: 0; animation: run-breathe 2.4s var(--ease-inout) infinite;
}
.run-tip { margin: var(--s-2) 0 0; font-size: var(--fs-label); color: var(--muted); text-align: center; }
.run-paused { display: flex; flex-direction: column; gap: var(--s-2); text-align: center; color: var(--warn-ink); font-weight: 600; }
.run-paused p { margin: 0; }
.run-paused-wait { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-weight: 600; }
.run-lab { margin-top: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); }
.run-lab[open] { max-height: 46vh; max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain; }
.run-lab summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 650; cursor: pointer; }

.run-boot { margin: auto; color: var(--brand); animation: boot-pulse 1s var(--ease-inout) infinite alternate; }

/* last-rep strip (between reps) */
.run-strip-wrap { flex: none; padding: var(--s-2) var(--gutter) var(--s-2); background: var(--bg); }
.run.is-wide .run-strip-wrap { background: var(--bg-2); }
.run-strip {
  height: 56px; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--highlight); transform-origin: 30% 100%;
}
[data-theme="light"] .run-strip { box-shadow: var(--shadow-1); border-color: transparent; }
.run-strip.is-pb { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.run-strip-k { font: 600 11px var(--font-mono); letter-spacing: .08em; color: var(--muted); }
.run-strip-v { font: 700 30px/1 var(--font-num); }
.run-strip-v small { font-size: .62em; }
.run-strip-v em { font-style: normal; font-size: .45em; color: var(--muted); margin-left: 3px; letter-spacing: .06em; }
.run-strip-rank { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.run-strip-rest { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--font-mono); color: var(--muted); white-space: nowrap; }
.run-strip-pb, .run-strip-today { display: inline-flex; align-items: center; gap: 2px; font: 700 13px var(--font-num); letter-spacing: .08em; color: var(--gold); }
.run-strip-today { color: var(--brand-strong); }

/* ======================================================================
   ArmedRing (.lv-ar)
   ====================================================================== */
bw-armed-ring { display: inline-block; line-height: 0; }
.lv-ar { display: inline-block; width: var(--sz); height: var(--sz); }
.lv-ar svg { width: 100%; height: 100%; overflow: visible; }
.lv-ar-tick { stroke: var(--line-strong); stroke-width: 6; stroke-linecap: round; transition: stroke 120ms linear; }
.lv-ar-tick.is-on { stroke: var(--brand); }
.lv-ar-core { fill: var(--surface-3); transition: fill 160ms var(--ease-standard); }
.lv-ar-check { fill: none; stroke: var(--brand-ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.lv-ar--locked .lv-ar-tick { stroke: var(--brand); }
.lv-ar--locked .lv-ar-core { fill: var(--brand); }
.lv-ar--locked .lv-ar-check { opacity: 1; }
.lv-ar-spin { transform-box: view-box; transform-origin: 50px 50px; }
.lv-ar--set .lv-ar-tick { stroke: var(--line-strong); }
.lv-ar--set .lv-ar-tick:nth-child(6n + 1) { stroke: var(--brand); }
.lv-ar--set .lv-ar-spin { animation: lv-spin 8s linear infinite; }
.lv-ar--set .lv-ar-core { fill: var(--brand-soft); }
@keyframes lv-spin { to { transform: rotate(360deg); } }

/* ======================================================================
   ContactGauge (.lv-cg) + RestRing (.lv-rest)
   ====================================================================== */
.lv-cg { position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--sz); }
.lv-cg-ring { width: var(--sz); height: var(--sz); flex: none; }
.lv-cg-track { fill: none; stroke: var(--surface-3); stroke-width: 4; }
.lv-cg-fill { fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round; }
.lv-cg-soft { stroke: var(--line-strong); stroke-width: 1.5; }
.lv-cg--near .lv-cg-fill { stroke: var(--warn); }
.lv-cg--over .lv-cg-fill { stroke: var(--warn); stroke-dasharray: 3 3 !important; }
.lv-cg-n { position: absolute; left: 0; width: var(--sz); text-align: center; font: 700 12px/1 var(--font-num); }
.lv-cg-label { font-size: var(--fs-label); color: var(--muted); }

.lv-rest { display: inline-block; width: var(--sz); height: var(--sz); flex: none; }
.lv-rest svg { width: 100%; height: 100%; }
.lv-rest-track { fill: none; stroke: var(--surface-3); stroke-width: 3; }
.lv-rest-fill { fill: none; stroke: var(--brand-line); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }

/* ======================================================================
   BalanceBar (.lv-bb)
   ====================================================================== */
bw-balance-bar { display: block; }
.lv-bb { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2); font: 600 13px var(--font-mono); color: var(--ink-2); }
.lv-bb--compact { font-size: 11px; gap: 6px; }
.lv-bb-track { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.lv-bb--compact .lv-bb-track { height: 6px; }
.lv-bb-zone { position: absolute; top: 0; bottom: 0; left: calc(var(--t0) * 100%); right: calc((1 - var(--t1)) * 100%); background: var(--brand-soft); }
.lv-bb-fill-l, .lv-bb-fill-r { position: absolute; top: 2px; bottom: 2px; width: 50%; border-radius: var(--r-pill); }
.lv-bb-fill-l { right: 50%; background: var(--foot-l); transform-origin: right; transform: scaleX(calc(var(--share) * 2)); opacity: .85; transition: transform 120ms linear; }
.lv-bb-fill-r { left: 50%; background: var(--foot-r); transform-origin: left; transform: scaleX(calc((1 - var(--share)) * 2)); opacity: .85; transition: transform 120ms linear; }
.lv-bb-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: .55; }
.lv-bb-marker { display: none; }
.lv-bb.is-off .lv-bb-l, .lv-bb.is-off .lv-bb-r { color: var(--warn-ink); }

/* ======================================================================
   Column stage: Vertical / Single-leg / Broad
   ====================================================================== */
.run-colstage, .run-rdstage { position: absolute; inset: 0; display: flex; flex-direction: column; }
.run-colstage-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: var(--s-3); padding: var(--s-6) var(--s-3) var(--s-4) var(--gutter); }
.run.is-wide .run-colstage-main { grid-template-columns: minmax(0, 1fr) 96px; padding: var(--s-6) var(--s-6) var(--s-5); }
.run-colstage-left { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); position: relative; }
.run-colstage-col { display: block; height: 100%; min-height: 0; }

.run-live { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.run-live-num { color: var(--ink); }
.phase-live .run-live-num { color: var(--brand-hi); }
[data-theme="light"] .phase-live .run-live-num { color: var(--brand-strong); }
.run-live-num .ui-num-row { align-items: flex-start !important; }
.run-live-k { margin: 0; font: 600 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-height: 16px; }
.run-live-feet { display: grid; gap: var(--s-2); max-width: 240px; transition: opacity 200ms var(--ease-standard); }
.run-live-feet.is-quiet { opacity: .25; }
.run-live-feet--row { display: flex; align-items: center; justify-content: center; max-width: none; }

/* SL side banner */
.run-side {
  flex: none; height: 56px; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--side) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--side) 40%, transparent);
}
.run-side--l { --side: var(--foot-l); }
.run-side--r { --side: var(--foot-r); }
.run-side-letter {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--side); color: var(--bg);
  font: 800 30px/1 var(--font-num);
}
.run-side-txt { font: 700 18px var(--font-num); letter-spacing: .08em; text-transform: uppercase; }
.run-side-up { margin-left: auto; font-size: var(--fs-label); font-weight: 700; color: var(--warn-ink); animation: run-blink 1s var(--ease-inout) infinite alternate; }
.phase-complete .run-side { display: none; }
.run-side.is-switching .run-side-letter { animation: run-stamp var(--spring-bouncy-dur, 700ms) var(--spring-bouncy) both; }

/* ======================================================================
   LaunchColumn (.lv-col)
   ====================================================================== */
bw-launch-column { display: block; }
.lv-col { position: relative; height: 100%; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: minmax(0, 1fr) 14px; }
.lv-col-scale { position: relative; grid-row: 1; grid-column: 1; }
.lv-col-tick { position: absolute; right: 3px; width: 5px; height: 1px; background: var(--line-strong); transform: translateY(50%); }
.lv-col-tick.is-major { width: 9px; background: var(--axis); }
.lv-col-tick-n { position: absolute; right: 12px; top: -7px; font: 500 11px/14px var(--font-mono); color: var(--muted); }
.lv-col-tube {
  position: relative; grid-row: 1; grid-column: 2; border-radius: 14px 14px 5px 5px;
  background: linear-gradient(var(--surface-2), var(--surface)); border: 1px solid var(--line-strong);
}
.phase-locked .lv-col-tube, .phase-live .lv-col-tube { border-color: var(--brand-line); box-shadow: var(--glow-brand); }
.lv-col-fill {
  position: absolute; inset: 3px; border-radius: 11px 11px 3px 3px; transform-origin: 50% 100%; transform: scaleY(0);
  background: linear-gradient(to top, color-mix(in srgb, var(--col-tone) 62%, var(--stage)), var(--col-tone) 58%, color-mix(in srgb, var(--col-tone) 55%, var(--ink)));
  will-change: transform;
}
.lv-col-cap { position: absolute; inset: 3px; transform: translateY(100%); pointer-events: none; will-change: transform; }
.lv-col-cap::before {
  content: ""; position: absolute; left: -6px; right: -6px; top: -1px; height: 3px; border-radius: 2px;
  background: var(--brand-hi); box-shadow: 0 0 14px 2px var(--brand-glow);
}
bw-launch-column[state="idle"] .lv-col-cap::before { opacity: 0; }
.lv-col-mark { position: absolute; left: -6px; right: -6px; height: 0; z-index: 2; }
.lv-col-mark-line { position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 1px; }
.lv-col-mark-label {
  position: absolute; right: calc(100% + 6px); top: -9px; white-space: nowrap; font: 700 13px/18px var(--font-num); letter-spacing: .08em;
}
.lv-col-today .lv-col-mark-line { background: var(--brand-strong); }
.lv-col-today .lv-col-mark-label { color: var(--brand-strong); font-size: 11px; }
/* TODAY right under the PB tick: the line stays, its label would collide with the PB label. */
.lv-col-today.is-near-pb .lv-col-mark-label { display: none; }
.lv-col-pb .lv-col-mark-line { background: var(--gold); }
.lv-col-pb .lv-col-mark-label { color: var(--gold); }
.lv-col-pb-gem { position: absolute; right: -9px; top: -6px; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); border-radius: 2px; }
.lv-col-pb-flash { position: absolute; right: -24px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--gold-hi); opacity: 0; pointer-events: none; }
.lv-col-pb.is-lit .lv-col-mark-line { background: var(--gold-hi); box-shadow: 0 0 12px var(--gold); height: 3px; }
.lv-col-pb.is-lit .lv-col-mark-label { color: var(--gold-hi); }
[data-theme="light"] .lv-col-pb.is-lit .lv-col-mark-label { color: var(--gold); }
.lv-col-pb.is-lit .lv-col-pb-gem { background: var(--gold-hi); box-shadow: 0 0 10px var(--gold); }
.lv-col-load { position: relative; grid-row: 2; grid-column: 2; height: 8px; margin-top: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.lv-col-load-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(.45); background: var(--ink-2); opacity: .7; }
.lv-col-load-fill.is-dip { background: var(--ph-unweight); opacity: 1; }
.lv-col-load-fill.is-drive { background: var(--brand); opacity: 1; }
.lv-col-load-ref { position: absolute; left: 45.4%; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .45; }
.lv-col-impact {
  position: absolute; left: calc(24px + (100% - 24px) / 2); bottom: 12px; width: 96px; height: 26px; border-radius: 50%;
  border: 2px solid var(--brand-hi); opacity: 0; transform: translateX(-50%); pointer-events: none;
}

/* ======================================================================
   Result (local fallback reveal, §4.0 C0 timeline via CSS delays)
   ====================================================================== */
.run-res { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); position: relative; min-width: 0; }
.run-res > * { animation: run-up 300ms var(--ease-out) both; }
.run-res > .run-hero { animation: none; }
.run-hero { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; }
.run-hero-n { position: relative; z-index: 1; }
.run-hero-n .ui-num-row { align-items: flex-start !important; }
.run-hero-glow {
  position: absolute; left: -24px; top: -18px; width: 180px; height: 180px; border-radius: 50%; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 26%, transparent), transparent 66%);
}
.run-hero.is-pb .run-hero-glow { animation: run-glow 1.6s var(--ease-out) both; }
.run-res-sec { margin: 0; font: 500 15px/1.3 var(--font-mono); color: var(--ink-2); }
.run-res-note { margin: 0; font-size: var(--fs-label); color: var(--muted); }
.run-chyron-row { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; animation-name: run-slide !important; animation-duration: 320ms !important; }
.run-chyron-row.is-static { animation: none !important; }
.run-chyron {
  display: inline-block; min-width: 0; transform: skewX(var(--skew)); padding: 7px 12px 7px 10px; border-radius: 2px;
  background: var(--surface-3); border-left: 4px solid var(--brand);
}
.run-chyron-txt {
  display: block; transform: skewX(calc(var(--skew) * -1)); font: 700 15px/1 var(--font-num); letter-spacing: var(--track-chyron);
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.run-early { font: 600 11px var(--font-mono); color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.run-delta { margin: 0; font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); }
.run-delta s { color: var(--muted); font-weight: 500; }
.run-next { margin: 0; font-size: var(--fs-label); font-weight: 650; color: var(--muted); letter-spacing: .02em; }
.run-verify { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: 650; }
.run-verify--good { color: var(--good); }
.run-verify--muted { color: var(--muted); }
.run-glyph { display: inline-flex; margin-left: var(--s-2); }
.run-flag {
  margin: 0; display: inline-flex; align-items: flex-start; gap: 6px; padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-label); line-height: 1.35; max-width: 100%;
}
.run-flag b { font-family: var(--font-num); font-size: 14px; letter-spacing: .06em; white-space: nowrap; }
.run-flag .ui-icon { flex: none; margin-top: 1px; }
.run-today-chip {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--r-pill); background: var(--brand); color: var(--brand-ink);
  font: 800 14px/1 var(--font-num); letter-spacing: .1em; animation: run-pop var(--spring-pop-dur, 420ms) var(--spring-pop) both !important;
}
.run-slam {
  position: absolute; left: -4px; top: -40px; z-index: 2; transform: skewX(var(--skew)); padding: 4px 14px 4px 12px; border-radius: 2px;
  background: var(--gold-hi); border-left: 4px solid var(--brand); animation: run-slam var(--spring-pop-dur, 420ms) var(--spring-pop) both !important;
}
/* light keeps the bright --gold-hi plate: the darkened text-safe --gold under dark ink was 3:1 */
.run-slam.is-again { background: var(--surface-3); }
.run-slam-txt { display: inline-block; transform: skewX(calc(var(--skew) * -1)); font: 800 22px/1.15 var(--font-num); letter-spacing: var(--track-chyron); color: var(--go-ink); white-space: nowrap; }
[data-theme="light"] .run-slam-txt { color: var(--brand-ink); }
.run-slam.is-again .run-slam-txt { color: var(--gold); }
.run-letter { display: inline-block; animation: run-letter 260ms var(--spring-pop) both; }
.run-tierup { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-1); animation: run-up 200ms var(--ease-out) both; }
.run-tierup-emblem { display: inline-flex; animation: run-stamp var(--spring-bouncy-dur, 700ms) var(--spring-bouncy) both; }
.run-tierup-txt { font: 800 20px var(--font-num); letter-spacing: var(--track-chyron); }
.run-res-beam { width: 100%; }
.run-extern-result { display: block; width: 100%; min-width: 0; }
/* E3's result embedded beside the LaunchColumn: keep it inside its column. */
.run-colstage-left .run-extern-result .res { padding-top: 0; }
.run-colstage-left .run-extern-result .res-rank-row { max-width: 100%; flex-wrap: wrap; justify-content: center; }
.run-colstage-left .run-extern-result .res-rank-chy { max-width: 100%; }
/* The rank never truncates: a long cohort ("OPEN", a long state) wraps to a second line. */
.run-colstage-left .run-extern-result .res-rank-txt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  white-space: normal; max-width: 100%; line-height: 1.2; text-align: left;
}
/* Beside the launch column the chyron runs a size smaller so the cohort line fits at 390 px. */
.run-colstage-left .run-extern-result .res-rank-txt { font-size: 14px; letter-spacing: .04em; }
.run-colstage-left .run-extern-result .res-rank-chy { padding: 6px 10px 6px 9px; }
[data-short] .run-stage .run-extern-result .res-foot { display: none; }
.phase-result .lv-col-mark-label, .phase-complete .lv-col-mark-label { opacity: 0; transition: opacity 200ms; }

/* Short frames (≤ 679 px, iPhone SE / mini inside the hub): smaller furniture, drop the
   low-priority rows first, and let the result scroll rather than clip mid-element. */
[data-short] .run-colstage-main { padding-top: var(--s-3); padding-bottom: var(--s-3); }
[data-short] .run-fsstage { padding-top: var(--s-2); }
[data-short] .run-fs-callline { font-size: 24px; min-height: 30px; }
[data-short][data-demo] .run-stage .run-extern-result .res-verify { display: none; }
[data-short] .run-stage .run-extern-result .res-delta:not(.is-up) { display: none; }
[data-short] .run-done { gap: 4px; }
[data-short] .run-done-rank { gap: 2px; }
[data-short] .run-fsstage.is-summary .run-fs-callline { min-height: 24px; font-size: 16px; }
[data-short] .run-done-stats dd { font-size: 20px; }
.phase-result .run-colstage-left, .phase-complete .run-colstage-left, .phase-fault .run-colstage-left {
  overflow-y: auto; overflow-x: hidden; justify-content: safe center; overscroll-behavior: contain; scrollbar-width: none;
}
.run-fs-readout { flex: 1 1 auto; min-height: 64px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
.phase-result .run-hopstage-top, .phase-complete .run-hopstage-top, .phase-result .run-brstage-top, .phase-complete .run-brstage-top { overflow-y: auto; scrollbar-width: none; }
.run-colstage-left::-webkit-scrollbar, .run-fs-readout::-webkit-scrollbar { display: none; }

/* Landscape phone (height < 500 px): the stage takes the left, the status line and the
   action buttons stack in a right-hand rail, so the result and set summary keep their height. */
@media (max-height: 500px) and (orientation: landscape) {
  .run:not(.is-wide) .run-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 36%); grid-template-rows: auto auto minmax(0, 1fr); }
  .run:not(.is-wide) .run-stage { grid-column: 1; grid-row: 1 / -1; border-bottom: 0; }
  .run:not(.is-wide) .run-strip-wrap { grid-column: 2; grid-row: 1; }
  .run:not(.is-wide) .run-status { grid-column: 2; grid-row: 2; border-left: 1px solid var(--line); }
  .run:not(.is-wide) .run-action { grid-column: 2; grid-row: 3; justify-content: flex-end; border-left: 1px solid var(--line); }
  .run:not(.is-wide) .run-act-row { flex-wrap: wrap; }
  .run:not(.is-wide) .run-act-row > .ui-btn { flex: 1 1 100%; }
  .run:not(.is-wide) .run-strip { height: 48px; padding: 0 var(--s-3); }
  .run:not(.is-wide) .run-side { height: 40px; }
  .run:not(.is-wide) .run-side-letter { width: 30px; height: 30px; font-size: 22px; }
  .run:not(.is-wide) .run-colstage-main { padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .run:not(.is-wide) .run-done-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .run:not(.is-wide) .run-fsstage { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; column-gap: var(--s-4); padding-top: var(--s-2); }
  .run:not(.is-wide) .run-fs-callline, .run:not(.is-wide) .run-fs-sub { flex: 1 1 100%; text-align: center; }
  .run:not(.is-wide) .run-fs-readout { flex: 1 1 0; min-width: 0; max-height: 100%; align-self: stretch; justify-content: safe center; }
}

/* FaultCard */
.run-fault {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--s-3); align-items: center; width: 100%;
  padding: var(--s-3); border-radius: var(--r-md); background: var(--surface); border-top: 3px solid var(--warn);
  box-shadow: inset 0 1px 0 var(--highlight); animation: run-sheet-up var(--spring-soft-dur, 360ms) var(--spring-soft) both;
}
[data-theme="light"] .run-fault { box-shadow: var(--shadow-1); }
.run-fault-fig { position: relative; width: 96px; height: 96px; }
.run-fault-fig bw-coach-figure { position: absolute; inset: 0; }
.run-fault-fig .lv-cf svg { width: 96px; height: 96px; }
.run-fault-ghost { opacity: .6; }
.run-fault-ghost .lv-cf-seg, .run-fault-ghost .lv-cf-head { stroke: var(--warn); }
.run-fault-ghost .lv-cf--board { display: block; }
.run-fault-ghost .lv-cf-frame:not(:nth-child(2)) { display: none; }
.run-fault-ghost .lv-cf-frame { width: 96px; height: 96px; transform: rotate(-8deg) translateX(-6px); }
.run-fault-ghost .lv-cf-step, .run-fault-ghost .lv-cf-arc, .run-fault-ghost .lv-cf-dot { display: none; }
.run-fault-title { margin: 0 0 2px; font: 700 22px/1.05 var(--font-num); letter-spacing: .05em; text-transform: uppercase; color: var(--warn-ink); }
.run-fault-fix { margin: 0 0 6px; font-size: var(--fs-small); line-height: 1.35; color: var(--ink); }
.run-fault-status { margin: 0; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-micro); font-weight: 600; color: var(--muted); }

/* catch trial */
.run-catch { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; animation: run-sheet-up 320ms var(--ease-out) both; }
.run-catch-icon { color: var(--good); }
.run-catch-title { margin: 0; font: 800 36px/1 var(--font-num); letter-spacing: .06em; }
.run-catch-sub { margin: 0; font-size: var(--fs-body); color: var(--ink-2); }
.run-catch-count { margin: 6px 0 0; font: 600 12px var(--font-mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

/* set complete */
.run-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); width: 100%; animation: run-up 300ms var(--ease-out) both; }
.run-done-k { margin: 0; font: 600 12px var(--font-mono); letter-spacing: .12em; color: var(--brand-strong); }
.run-done-hero { margin: 0; font: 700 var(--fs-display)/.9 var(--font-num); }
.run-done-hero small { font-size: .62em; }
.run-done-hero em { font-style: normal; font-size: .3em; color: var(--muted); margin-left: 4px; letter-spacing: .08em; }
.run-done-label { margin: -4px 0 0; font-size: var(--fs-label); color: var(--muted); }
.run-done-q { margin: var(--s-2) 0 0; font: 700 26px/1.1 var(--font-num); letter-spacing: .04em; text-transform: uppercase; }
.run-done-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); margin: var(--s-1) 0 0; width: 100%; }
.run-done-stats div { min-width: 0; }
.run-done-stats dt { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.run-done-stats dd { margin: 0; font: 700 22px/1.1 var(--font-num); }
.run-done-note { margin: 0; font-size: var(--fs-label); color: var(--ink-2); }
.run-done-beam { width: 100%; display: grid; gap: 4px; }
.run--sl .run-done-stats div:nth-child(2) { display: none; }
.run-done-dirs { display: grid; gap: 6px; }
.run-done-rocket, .run-done-weak { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: var(--fs-small); }
.run-done-rocket { color: var(--gold); }
.run-done-weak { color: var(--warn-ink); }
.run-done-rank { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; }
.run-done-rank .run-chyron-txt { font-size: 17px; }
.run-done-cohort { margin: 0; font: 500 12px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--ink-2); max-width: 100%; }
.run-done-beta { margin: 0; align-self: flex-start; padding: 2px 8px; border-radius: var(--r-pill); background: var(--violet-soft); color: var(--violet); font: 700 12px/18px var(--font-num); letter-spacing: .08em; }
.run-done-pb {
  margin: 0; display: inline-flex; align-items: center; gap: 6px; transform: skewX(var(--skew)); padding: 4px 12px 4px 10px; border-radius: 2px;
  background: var(--gold-hi); border-left: 4px solid var(--brand); color: var(--go-ink); font: 800 16px/1.1 var(--font-num); letter-spacing: var(--track-chyron);
  animation: run-pop var(--spring-pop-dur, 420ms) var(--spring-pop) 600ms both;
}
[data-theme="light"] .run-done-pb { background: var(--gold); }
.run-done.is-pb .run-done-hero { color: var(--gold); }
[data-theme="light"] .run-done.is-pb .run-done-hero { color: var(--ink); }
.run-done-delta { margin: 0; font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); }
.run-done-delta s { color: var(--muted); font-weight: 500; }
.run-fs-readout .run-done-rank { align-items: center; }
/* Onboarding first jump: the number, a silhouette tier waiting, the question. */
.run-done--ob { align-items: center; text-align: center; gap: var(--s-3); }
.run-done-hero--ob { font-size: var(--fs-hero); }
.run-done-ob-emblem { position: relative; display: inline-grid; place-items: center; }
.run-done-ob-emblem .ui-emblem { animation: run-silhouette 1.6s var(--ease-inout) infinite alternate; }
.run-done-ob-q { position: absolute; inset: 0; display: grid; place-items: center; font: 800 26px/1 var(--font-num); color: var(--ink); }
@keyframes run-silhouette { from { opacity: .12; } to { opacity: .34; } }
[data-motion="reduced"] .run-done-ob-emblem .ui-emblem { animation: none; opacity: .24; }
.run-quest { padding: 2px 8px; border-radius: var(--r-pill); border: 1.5px dashed var(--warn); font: 800 11px var(--font-num); letter-spacing: .1em; }

/* ======================================================================
   Spring: HopTrack (.lv-hops)
   ====================================================================== */
.run-hopstage { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--s-6) var(--gutter) var(--s-4); gap: var(--s-3); }
.run-hopstage-top { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); }
.run-hop-prompt { margin: 0; font: 700 26px/1.1 var(--font-num); letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.run-hop-prompt.is-live { color: var(--brand-strong); }
.run-hopstage-track { flex: none; display: block; }
.phase-result .run-hopstage, .phase-complete .run-hopstage { padding-top: var(--s-3); }
.phase-result .run-hopstage-top, .phase-complete .run-hopstage-top { justify-content: flex-start; overflow: hidden; }
.phase-result .run-hopstage .lv-hops-head, .phase-result .run-hopstage .lv-hops-grade-row,
.phase-complete .run-hopstage .lv-hops-head, .phase-complete .run-hopstage .lv-hops-grade-row { display: none; }
.run-stage--hops .run-extern-result .res-foot, .run-stage--compass .run-extern-result .res-foot, .run-stage--ladder .run-extern-result .res-foot { display: none; }
.lv-hops { display: flex; flex-direction: column; gap: 6px; }
.lv-hops-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: var(--s-3); }
.lv-hops-count { font-family: var(--font-num); font-weight: 700; line-height: .9; }
.lv-hops-count-n { font-size: var(--fs-display); }
.lv-hops-count-of { font-size: 26px; color: var(--muted); }
.lv-hops-combo {
  justify-self: start; padding: 4px 10px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-strong);
  font: 800 15px var(--font-num); letter-spacing: .08em; opacity: 0; transition: opacity 160ms;
}
.lv-hops-combo.is-on { opacity: 1; }
.lv-hops-rsi { font: 500 13px var(--font-mono); color: var(--muted); }
.lv-hops-rsi b { color: var(--ink); font-weight: 700; }
.lv-hops-grade-row { height: 28px; display: flex; justify-content: center; }
.lv-hops-grade { font: 800 26px/1 var(--font-num); letter-spacing: .1em; }
.lv-hops-grade--perfect { color: var(--brand-strong); }
.lv-hops-grade--great { color: var(--brand-hi); }
[data-theme="light"] .lv-hops-grade--great { color: var(--brand-strong); }
.lv-hops-grade--good { color: var(--ink-2); }
.lv-hops-grade--slow { color: var(--warn-ink); }
.lv-hops-lane { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; height: 120px; }
.lv-hop-slot { position: relative; border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--line); overflow: hidden; }
.lv-hop-slot.is-filled { border-style: solid; background: var(--surface); }
.lv-hop-n { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font: 500 11px var(--font-mono); color: var(--muted); }
.lv-hop { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 6px 2px 20px; color: var(--ink-2); transition: opacity 300ms; }
.lv-hop--perfect { color: var(--brand); }
.lv-hop--great { color: var(--brand-hi); }
.lv-hop--good { color: var(--ink-2); }
.lv-hop--slow { color: var(--warn); }
.lv-hop-bar { width: 4px; height: 48px; border-radius: 2px; background: currentColor; opacity: .55; transform-origin: 50% 100%; margin-bottom: 4px; }
.lv-hop-tile { height: 34px; border-radius: 6px; background: currentColor; }
.lv-hop-ms { position: absolute; bottom: 4px; font: 600 10px var(--font-mono); color: var(--ink-2); }
.lv-hop.is-dim { opacity: .4; }
.lv-hop.is-scored .lv-hop-tile { box-shadow: 0 0 12px var(--brand-glow); }
.lv-hops-axis { display: flex; justify-content: space-between; font: 500 11px var(--font-mono); color: var(--muted); }

/* ======================================================================
   First Step: CompassPolar (.lv-cp)
   ====================================================================== */
.run-fsstage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: var(--s-5) var(--gutter) var(--s-2); gap: var(--s-1); }
.run-fs-callline { margin: 0; min-height: 34px; font: 700 28px/1.2 var(--font-num); letter-spacing: .04em; color: var(--muted); opacity: 0; }
.run-fs-callline.is-on { opacity: 1; color: var(--ink); }
.run-fs-callline b { color: var(--brand-strong); }
.run-fsstage.is-summary .run-fs-callline { opacity: 1; font-size: 18px; letter-spacing: .12em; color: var(--brand-strong); }
.run-fs-wrap { position: relative; flex: 0 1 auto; min-height: 0; display: grid; place-items: center; }
.run-fs-react { position: absolute; right: 2px; top: 4px; font: 600 14px var(--font-mono); color: var(--brand-strong); }
.run-fs-readout { width: 100%; min-height: 64px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.run-fs-readout .run-res, .run-fs-readout .run-done { align-items: center; }
.run-fs-readout .run-res .run-hero { align-items: center; }
.run-fs-readout bw-number[size="hero"] { font-size: var(--fs-display); }
.run-fs-time { margin: 0; font: 700 var(--fs-display)/1 var(--font-num); color: var(--brand-hi); }
[data-theme="light"] .run-fs-time { color: var(--brand-strong); }
.run-fs-hint { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.run-fs-set { font: 800 44px/1 var(--font-num); letter-spacing: .08em; color: var(--ink); }
.run-fs-arrow { font: 800 48px/1 var(--font-num); color: var(--brand-strong); }
.run-fs-ring { display: inline-block; }

bw-compass { display: block; }
.lv-cp { position: relative; width: var(--sz); height: var(--sz); max-width: 100%; }
.lv-cp svg { width: 100%; height: 100%; overflow: visible; }
.lv-cp-ring { fill: none; stroke: var(--grid-major); stroke-width: 1; stroke-dasharray: 2 4; }
.lv-cp-rim { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.lv-cp-spoke { stroke: var(--grid-major); stroke-width: 1; }
.lv-cp-slot { fill: var(--surface-2); fill-opacity: .55; stroke: var(--line); stroke-width: 1; }
[data-theme="light"] .lv-cp-slot { fill: var(--surface-3); fill-opacity: .8; stroke: var(--line-strong); }
.lv-cp-petal {
  fill: var(--brand); fill-opacity: .78; stroke: var(--brand-hi); stroke-width: 1.5; stroke-linejoin: round;
  transform-box: view-box; transform-origin: 0 0;
}
[data-theme="light"] .lv-cp-petal { stroke: var(--brand-strong); }
.lv-cp-petal.is-hatched { fill: url(#lv-cp-hatch); fill-opacity: 1; }
.lv-cp-hatch-bg { fill: var(--brand-soft); }
.lv-cp-hatch-line { stroke: var(--brand); stroke-width: 2; }
.lv-cp-petal.is-best { stroke: var(--gold-hi); stroke-width: 3; }
[data-theme="light"] .lv-cp-petal.is-best { stroke: var(--gold); }
.lv-cp-petal.is-weak { fill: var(--warn); fill-opacity: .2; stroke: var(--warn); stroke-dasharray: 4 3; stroke-width: 2; }
.lv-cp-ghost { fill: none; stroke: var(--ghost); stroke-width: 2.5; stroke-dasharray: 3 3; }
.lv-cp-call line { stroke: var(--brand-line); stroke-width: 4; stroke-linecap: round; }
.lv-cp-call path { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lv-cp-live { transform-box: view-box; transform-origin: 0 0; }
.lv-cp-live-ray { stroke: var(--brand-hi); stroke-width: 5; stroke-linecap: round; transform-box: view-box; transform-origin: 0 0; transform: scaleY(0); }
[data-theme="light"] .lv-cp-live-ray { stroke: var(--brand-strong); }
.lv-cp-live-head { fill: var(--brand-hi); }
.lv-cp-ripple { fill: none; stroke: var(--brand); stroke-width: 2; opacity: 0; transform-box: view-box; transform-origin: 0 0; }
.lv-cp-label { font: 600 11px var(--font-mono); fill: var(--muted); text-anchor: middle; letter-spacing: .04em; }
.lv-cp-label.is-called { fill: var(--brand-strong); font-weight: 800; }
.lv-cp-label.is-best { fill: var(--gold); font-weight: 800; }
.lv-cp-tlabel { font: 500 9px var(--font-mono); fill: var(--muted); opacity: .8; text-anchor: middle; }
.lv-cp-foot { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.lv-cp-foot.is-l { stroke: var(--foot-l); }
.lv-cp-foot.is-r { stroke: var(--foot-r); }
.lv-cp-quest rect { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1.2; }
.lv-cp-quest text { font: 800 9px var(--font-num); fill: var(--warn-ink); text-anchor: middle; letter-spacing: .1em; }
.lv-cp-hub { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }

/* ======================================================================
   5-Step: SpeedLadder (.lv-sl)
   ====================================================================== */
.run-ladstage { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--s-5) var(--gutter) var(--s-3); gap: var(--s-2); }
.run-ladstage-top { flex: none; min-height: 64px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: var(--s-2); }
.run-ladstage-top .run-res, .run-ladstage-top .run-done { align-items: center; }
.run-ladstage-top .run-hero { align-items: center; }
.run-lad-prompt { margin: 0; font: 700 24px/1.1 var(--font-num); letter-spacing: .05em; text-transform: uppercase; }
.phase-live .run-lad-prompt { color: var(--brand-strong); }
.run-lad-set { margin: 0; font: 800 44px/1 var(--font-num); letter-spacing: .08em; }
.run-ladstage-ladder { flex: 1 1 auto; min-height: 0; display: block; }
.run-ladstage-ladder.is-result { flex: 0 1 180px; }
.lv-sl { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; }
.lv-sl-time { font: 700 var(--fs-display)/1 var(--font-num); letter-spacing: .02em; }
.lv-sl-time-u { font-size: .35em; color: var(--muted); margin-left: 4px; }
.run-ladstage-ladder.is-result .lv-sl-time { display: none; }
.run-ladstage-ladder.is-result .lv-sl-split { font-size: 26px; }
.run-ladstage-ladder.is-result .lv-sl-len { font-size: 19px; }
.run-ladstage-ladder.is-result .lv-sl-foot, .run-ladstage-ladder.is-result .lv-sl-k { font-size: 18px; }
.run-ladstage-ladder.is-result .lv-sl-bar { stroke-width: 10; }
.lv-sl svg { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 400px; }
.lv-sl-rail { stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.lv-sl-bar { stroke: var(--line-strong); stroke-width: 7; stroke-linecap: round; }
.lv-sl-glow { stroke: transparent; stroke-width: 18; stroke-linecap: round; opacity: .35; transform-box: fill-box; transform-origin: center; }
.lv-sl-rung.is-l .lv-sl-bar, .lv-sl-rung.is-l .lv-sl-glow { stroke: var(--foot-l); }
.lv-sl-rung.is-r .lv-sl-bar, .lv-sl-rung.is-r .lv-sl-glow { stroke: var(--foot-r); }
.lv-sl-k { font: 500 12px var(--font-mono); fill: var(--muted); text-anchor: middle; }
.lv-sl-split { font: 700 17px var(--font-num); fill: var(--ink); }
.lv-sl-len { font: 500 11px var(--font-mono); fill: var(--muted); text-anchor: end; }
.lv-sl-foot { font: 800 12px var(--font-num); fill: var(--ink); text-anchor: middle; }
.lv-sl.is-done .lv-sl-time { color: var(--brand-strong); }

/* ======================================================================
   Broad Jump (beta): floor tape + ballistic arc
   ====================================================================== */
.run-brstage { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--s-5) var(--gutter) var(--s-2); }
.run-brstage-top { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s-3); overflow: hidden; }
.run-brstage-top .run-live { align-items: center; }
.run-br-tape { flex: none; width: 100%; max-width: 460px; align-self: center; height: auto; }
.run-br-tape-band { fill: var(--surface-2); stroke: var(--line-strong); }
.run-br-tick { stroke: var(--axis); stroke-width: 1; }
.run-br-tick.is-major { stroke: var(--ink-2); stroke-width: 1.5; }
.run-br-num { font: 500 11px var(--font-mono); fill: var(--muted); text-anchor: middle; }
.run-br-pb { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 3 3; }
.run-br-pb-t { font: 700 11px var(--font-num); fill: var(--gold); text-anchor: middle; letter-spacing: .08em; }
.run-br-arc { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: run-arc 900ms var(--ease-launch) 150ms forwards; }
.run-br-land { fill: var(--brand-hi); stroke: var(--stage); stroke-width: 2; opacity: 0; animation: run-pop 300ms var(--spring-pop) 1000ms forwards; }
@keyframes run-arc { to { stroke-dashoffset: 0; } }
[data-motion="reduced"] .run-br-arc { stroke-dashoffset: 0; }
[data-motion="reduced"] .run-br-land { opacity: 1; }

/* ======================================================================
   Readiness
   ====================================================================== */
.run-rd-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); max-width: 300px; }
.run-rd-slot {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-2) 4px; border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong); background: var(--surface-2);
}
.run-rd-slot.is-on { border-style: solid; border-color: var(--ready-normal); background: var(--surface); animation: run-pop var(--spring-pop-dur, 420ms) var(--spring-pop) both; }
.run-rd-slot small { font: 500 11px var(--font-mono); color: var(--muted); }
.run-rd-slot b { font: 700 24px/1 var(--font-num); }
.run-rd-slot em { font-style: normal; font-size: 11px; color: var(--muted); }
.run-rd-note { margin: 0; font-size: var(--fs-label); color: var(--muted); }
.run-rd-result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--s-4) var(--gutter); }
.run-res--readiness { align-items: center; text-align: center; width: 100%; max-width: 360px; }
.run-ready-dial { animation: run-up 300ms var(--ease-out) both; }
.run-ready-title { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 800 30px/1 var(--font-num); letter-spacing: .06em; }
.run-ready-title.is-go { color: var(--ready-go); }
.run-ready-title.is-normal { color: var(--ready-normal); }
.run-ready-title.is-technique { color: var(--ready-tech); }
.run-ready-body { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.run-ready-strip { width: 100%; }
.run-ready-head { width: 200px; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.run-ready-head span { display: block; height: 100%; background: var(--ready-normal); transform-origin: left; }
.lv-rg { position: relative; width: 220px; }
.lv-rg svg { width: 100%; height: auto; overflow: visible; }
.lv-rg-zone { fill: none; stroke-width: 14; stroke-linecap: butt; opacity: .35; }
.lv-rg-zone.is-tech { stroke: var(--ready-tech); }
.lv-rg-zone.is-normal { stroke: var(--ready-normal); }
.lv-rg-zone.is-go { stroke: var(--ready-go); }
.lv-rg--technique .lv-rg-zone.is-tech, .lv-rg--normal .lv-rg-zone.is-normal, .lv-rg--go .lv-rg-zone.is-go { opacity: 1; }
.lv-rg.is-building .lv-rg-zone { opacity: .25; stroke-dasharray: 4 6; }
.lv-rg-tick { stroke: var(--line-strong); stroke-width: 2; }
.lv-rg-needle { transform-box: view-box; transform-origin: 0 0; transform: rotate(var(--deg)); animation: lv-needle 900ms var(--spring-soft) both; }
.lv-rg-needle line { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.lv-rg-needle circle { fill: var(--ink); }
.lv-rg.is-building .lv-rg-needle { opacity: .35; }
.lv-rg-icon { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: var(--muted); }
.lv-rg--go .lv-rg-icon { color: var(--ready-go); }
.lv-rg--technique .lv-rg-icon { color: var(--ready-tech); }
.lv-rg--normal .lv-rg-icon { color: var(--ready-normal); }
@keyframes lv-needle { from { transform: rotate(-90deg); } to { transform: rotate(var(--deg)); } }
.lv-rs { position: relative; height: 34px; margin: 4px 8px 0; }
.lv-rs::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: var(--line-strong); }
.lv-rs-band { position: absolute; top: 6px; height: 14px; border-radius: 7px; background: var(--band); border: 1px solid var(--line-strong); }
.lv-rs-base { position: absolute; top: 4px; width: 2px; height: 18px; margin-left: -1px; background: var(--ink-2); }
.lv-rs-dot { position: absolute; top: 7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--bg); }
.lv-rs-label { position: absolute; left: 0; bottom: 0; font: 500 11px var(--font-mono); color: var(--muted); }

/* ======================================================================
   BalanceBeam (.lv-beam)
   ====================================================================== */
.lv-beam { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.lv-beam-bars { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; gap: 6px; }
.lv-beam-side { position: relative; height: 34px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.lv-beam-bar { position: absolute; top: 0; bottom: 0; width: 100%; }
.lv-beam-side.is-l .lv-beam-bar { right: 0; background: color-mix(in srgb, var(--foot-l) 70%, transparent); transform-origin: right; }
.lv-beam-side.is-r .lv-beam-bar { left: 0; background: color-mix(in srgb, var(--foot-r) 70%, transparent); transform-origin: left; }
.lv-beam-v { position: absolute; top: 7px; font: 700 17px/1 var(--font-num); color: var(--ink); }
.lv-beam-v small { font-size: 11px; color: var(--ink-2); margin-left: 2px; }
.lv-beam-side.is-l .lv-beam-v { right: 8px; }
.lv-beam-side.is-r .lv-beam-v { left: 8px; }
.lv-beam-k { position: absolute; top: 9px; font: 800 13px var(--font-num); color: var(--ink); }
.lv-beam-side.is-l .lv-beam-k { left: 8px; }
.lv-beam-side.is-r .lv-beam-k { right: 8px; }
.lv-beam-ring { position: relative; width: 56px; height: 56px; }
.lv-beam-ring svg { width: 100%; height: 100%; }
.lv-beam-ring-track { fill: none; stroke: var(--surface-3); stroke-width: 5; }
.lv-beam-ring-fill { fill: none; stroke: var(--good); stroke-width: 5; stroke-linecap: round; }
.lv-beam--amber .lv-beam-ring-fill { stroke: var(--warn); }
.lv-beam--red .lv-beam-ring-fill { stroke: var(--bad); }
.lv-beam-ring-n { position: absolute; inset: 0; display: grid; place-items: center; font: 700 17px var(--font-num); }
.lv-beam-ring-n small { font-size: 10px; }
.lv-beam-copy { margin: 0; font-size: var(--fs-label); color: var(--ink-2); }
.lv-beam--red .lv-beam-copy { background: var(--bad-soft); color: var(--bad); padding: 6px 10px; border-radius: var(--r-sm); }

/* ======================================================================
   Live feet (.lv-feet)
   ====================================================================== */
bw-live-feet { display: block; }
.lv-feet { display: flex; gap: 10px; align-items: flex-end; height: var(--h); }
.lv-feet-foot { position: relative; height: 100%; aspect-ratio: 40 / 104; transition: opacity 200ms; }
.lv-feet-foot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lv-feet-outline { fill: var(--heat-0); stroke: var(--line-strong); stroke-width: 1.2; }
.lv-feet-foot.is-dim { opacity: .25; }
.lv-feet-foot.is-need .lv-feet-outline { stroke: var(--warn); stroke-width: 2.2; animation: run-blink 900ms var(--ease-inout) infinite alternate; }
.lv-ft-blob { transition: fill 80ms linear; }
.lv-ft-blob.h0 { fill: var(--heat-0); } .lv-ft-blob.h1 { fill: var(--heat-1); } .lv-ft-blob.h2 { fill: var(--heat-2); }
.lv-ft-blob.h3 { fill: var(--heat-3); } .lv-ft-blob.h4 { fill: var(--heat-4); } .lv-ft-blob.h5 { fill: var(--heat-5); }
.lv-feet-label { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font: 700 11px var(--font-num); color: var(--muted); }

/* ======================================================================
   ForceTrace (.lv-ft) + Bench + coaching column
   ====================================================================== */
bw-force-trace { display: block; }
.lv-ft { display: flex; flex-direction: column; gap: 6px; }
.lv-ft-canvas { width: 100%; height: var(--h); border-radius: var(--r-sm); background: var(--stage); border: 1px solid var(--line); }
.lv-ft-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 500 11px var(--font-mono); color: var(--muted); }
.lv-ft-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.lv-ft-legend .is-unweight::before { background: var(--ph-unweight); }
.lv-ft-legend .is-brake::before { background: var(--ph-brake); }
.lv-ft-legend .is-propel::before { background: var(--ph-propel); }
.lv-ft-legend .is-flight::before { background: transparent; border: 1px solid var(--ph-flight); }
.lv-ft-legend .is-land::before { background: var(--ph-land); }

.run-bench, .run-coachcol { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-3); }
.run-bench-sec, .run-coachcol {
  padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--highlight);
}
[data-theme="light"] .run-bench-sec, [data-theme="light"] .run-coachcol { box-shadow: var(--shadow-1); border-color: transparent; }
.run-bench-h { margin: 0 0 var(--s-3); display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.run-bench-h small { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; }
.run-bench-feet { display: flex; justify-content: center; padding-bottom: 18px; }
.run-bench-empty { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.run-log { display: flex; flex-direction: column; gap: 2px; }
.run-log-row { display: grid; grid-template-columns: 24px 72px 1fr; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 6px; border-radius: 6px; font-size: var(--fs-small); }
.run-log-row:nth-child(odd) { background: var(--surface-2); }
.run-log-n { font: 500 12px var(--font-mono); color: var(--muted); }
.run-log-v { font: 700 18px var(--font-num); }
.run-log-tag { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-log-row--fault .run-log-v, .run-log-row--fault .run-log-tag { color: var(--warn-ink); }
.run-log-row--catch .run-log-v { color: var(--good); }
.run-coachcol { gap: var(--s-2); }
.run-coachcol-k { margin: 0; font: 600 12px var(--font-mono); letter-spacing: .12em; color: var(--brand-strong); }
.run-coachcol-h { margin: 0; font: 700 28px var(--font-num); letter-spacing: .02em; }
.run-coachcol bw-coach-figure { align-self: center; }
.run-coachcol-cues { display: grid; gap: 6px; margin: var(--s-2) 0; }
.run-coachcol-cues li { display: flex; gap: var(--s-2); font-size: var(--fs-small); }
.run-coachcol-cues span { font: 600 13px var(--font-mono); color: var(--brand-strong); }
.run-coachcol-setup { margin: 0; font-size: var(--fs-label); color: var(--muted); }
.run-coachcol-keys { margin: var(--s-3) 0 0; display: grid; gap: 4px; }
.run-coachcol-keys div { display: flex; gap: var(--s-2); font-size: var(--fs-label); }
.run-coachcol-keys dt { min-width: 64px; font: 600 12px var(--font-mono); padding: 1px 6px; border-radius: 4px; background: var(--surface-3); text-align: center; }
.run-coachcol-keys dd { margin: 0; color: var(--muted); }

/* ======================================================================
   Resume prompt
   ====================================================================== */
.run--ask { justify-content: flex-start; }
.run-ask {
  margin: auto var(--gutter); padding: var(--s-6) var(--s-5); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; animation: run-sheet-up 360ms var(--spring-soft) both;
}
.run-ask-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }
.run-ask-h { margin: 0; font-size: var(--fs-h2); line-height: 1.35; font-weight: 700; }
.run-ask-actions { width: 100%; display: flex; flex-direction: column; gap: var(--s-2); }
@media (min-width: 640px) { .run-ask { max-width: 440px; margin: auto; } }

/* ======================================================================
   Smart Stop sheet
   ====================================================================== */
.run-ss { display: flex; flex-direction: column; gap: var(--s-3); }
.run-ss-chart { width: 100%; height: auto; }
.run-ss-dip { fill: var(--band-dip); }
.run-ss-bar { fill: var(--surface-3); }
.run-ss-bar.is-best { fill: var(--brand); }
.run-ss-best { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; }
.run-ss-label { font: 700 11px var(--font-num); letter-spacing: .08em; fill: var(--gold); }
.run-ss-body { margin: 0; font-size: var(--fs-body); color: var(--ink); }
.run-ss-actions { display: flex; flex-direction: column; gap: var(--s-2); }

/* ======================================================================
   Picker (#/go)
   ====================================================================== */
.run-pick { padding-bottom: var(--s-6); }
.run-pick > .ui-h1 { margin: var(--s-2) 0 var(--s-3); }
.run-pick-contacts { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.run-pick-contacts-txt { display: flex; flex-direction: column; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.3; }
.run-pick-contacts-txt b { color: var(--ink); font-weight: 650; }
.run-pick-contacts-txt small { font-size: var(--fs-label); color: var(--muted); }
.run-pick-contacts--near .run-pick-contacts-txt small, .run-pick-contacts--over .run-pick-contacts-txt small { color: var(--warn-ink); }
.run-pick-resume { margin-bottom: var(--s-3); }
.run-hero-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; min-height: 112px;
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 4px); border-radius: var(--r-lg);
  background: linear-gradient(115deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); contain: layout paint;
}
.run-hero-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); }
.run-hero-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 120% at 100% 0%, var(--brand-soft), transparent 70%); pointer-events: none; }
[data-theme="light"] .run-hero-card { box-shadow: var(--shadow-1); border-color: transparent; }
.run-hero-card-burst { position: absolute; right: -18px; top: -14px; color: var(--brand); opacity: .12; pointer-events: none; }
.run-hero-card-k { font: 600 12px var(--font-mono); letter-spacing: .12em; color: var(--brand-strong); position: relative; }
.run-hero-card-title { margin: 0; font: 700 30px/1 var(--font-num); letter-spacing: .02em; text-transform: uppercase; position: relative; }
.run-hero-card-sub { margin: 0; font-size: var(--fs-small); color: var(--ink-2); position: relative; }
.run-hero-card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); position: relative; z-index: 1; }
.run-hero-card-pb { display: inline-flex; align-items: baseline; gap: 6px; }
.run-hero-card-pb-k { font: 600 12px var(--font-mono); color: var(--muted); letter-spacing: .08em; }
.run-hero-card-pb b { font: 700 28px/1 var(--font-num); }
.run-hero-card-pb b small { font-size: .62em; }
.run-hero-card-pb em { font-style: normal; color: var(--muted); font-size: 13px; }
.run-hero-card-pb .ui-emblem { align-self: center; }
.run-hero-card-go { min-height: 64px !important; padding: 0 var(--s-6) !important; border-radius: var(--r-lg) !important; }
.run-pick-group { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); color: var(--muted); }
.run-pick-beta { padding: 2px 8px; border-radius: var(--r-pill); background: var(--violet-soft); color: var(--violet); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.run-pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.run-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-height: 128px; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-align: left; box-shadow: inset 0 1px 0 var(--highlight);
  transition: transform var(--dur-1) var(--ease-standard), border-color var(--dur-2); contain: layout paint;
}
[data-theme="light"] .run-card { box-shadow: var(--shadow-1); border-color: transparent; }
.run-card:active { transform: scale(.97); }
.run-pick-grid > .run-card, .run-hero-card { animation: run-up 360ms var(--ease-out) both; }
.run-pick-grid > .run-card:nth-child(2) { animation-delay: 40ms; }
.run-hero-card { animation-delay: 0ms; }
.run-card:hover { border-color: var(--brand-line); }
.run-card--full { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 96px; }
.run-card-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); flex: none; }
.run-card--beta .run-card-icon { background: var(--violet-soft); color: var(--violet); }
.run-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.run-card-name { display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: var(--fs-body); line-height: 1.2; }
.run-card-head { padding: 1px 6px; border-radius: 4px; background: var(--surface-3); font: 700 10px var(--font-num); letter-spacing: .1em; color: var(--ink-2); }
.run-card-meta { font-size: var(--fs-label); color: var(--muted); }
.run-card-tag { align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--violet-soft); color: var(--violet); font-size: 12px; font-weight: 650; }
.run-card-pb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.run-card--full .run-card-pb { flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.run-card-pb-k { font: 600 11px var(--font-mono); letter-spacing: .08em; color: var(--muted); }
.run-card-pb-v { font: 700 26px/1 var(--font-num); display: inline-flex; align-items: baseline; gap: 6px; }
.run-card-pb-v small { font-size: .62em; }
.run-card-pb-v em { font-style: normal; font-size: 13px; color: var(--muted); }
.run-card-sl { font-size: 20px; }
.run-card-skel { width: 64px; height: 24px; border-radius: 6px; }
.run-pick-foot { margin-top: var(--s-5); }
@media (min-width: 960px) {
  .run-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-card { grid-column: auto; flex-direction: row; align-items: center; min-height: 96px; }
  .run-pick-grid > .run-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .run-card .run-card-pb { flex-direction: column; align-items: flex-end; gap: 2px; flex: none; margin-left: auto; }
}

/* ======================================================================
   Coach screen (#/test/:id) + CoachFigure (.lv-cf)
   ====================================================================== */
.run-coach { padding-bottom: calc(var(--s-4) + var(--safe-bottom)); }
.run-coach > .run-demo-pill { margin-bottom: 0; }
.run-coach-stage {
  position: relative; margin: var(--s-2) var(--gutter) 0; border-radius: var(--r-xl); overflow: hidden; display: grid; place-items: center;
  padding: var(--s-3) 0 var(--s-2); background: var(--stage); border: 1px solid var(--line);
}
.run-coach-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 24px 24px;
}
.run-coach-beta { position: absolute; right: var(--s-3); top: var(--s-3); padding: 2px 8px; border-radius: var(--r-pill); background: var(--violet-soft); color: var(--violet); font: 700 11px var(--font-num); letter-spacing: .08em; }
.run-coach-cues { display: grid; gap: 4px; padding: var(--s-3) var(--gutter) 0; }
.run-coach-cue { display: flex; gap: var(--s-3); align-items: baseline; padding: 6px 10px; border-radius: var(--r-sm); font-size: var(--fs-body); color: var(--ink-2); transition: background-color 200ms, color 200ms; }
.run-coach-cue.is-on { background: var(--brand-soft); color: var(--ink); }
.run-coach-n { font: 600 14px var(--font-mono); color: var(--brand-strong); }
.run-coach-setup { display: grid; gap: 4px; padding: var(--s-2) var(--gutter) 0; }
.run-coach-setup p { margin: 0; display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-label); color: var(--muted); }
.run-coach-setup .ui-icon { flex: none; color: var(--ink-2); }
.run-coach-diagram { display: flex; align-items: center; gap: var(--s-2); color: var(--brand-strong); font-size: var(--fs-label); }
.run-coach-mode { padding: var(--s-3) var(--gutter) 0; }
.run-coach-actions { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3) var(--gutter) 0; }
.run-coach-foot { padding: var(--s-2) var(--gutter) 0; text-align: center; }
/* Short frames: tighter cues, and Start stays pinned on screen like the run screen's action bar. */
[data-short] .run-coach-stage { padding: var(--s-2) 0 var(--s-1); }
[data-short] .run-coach-cues { padding-top: var(--s-2); gap: 2px; }
[data-short] .run-coach-cue { padding: 3px 10px; }
[data-short] .run-coach-mode { padding-top: var(--s-2); }
[data-short] .run-coach-actions {
  position: sticky; bottom: 0; z-index: 2; flex-direction: row-reverse; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--gutter) calc(var(--s-2) + var(--safe-bottom)); background: var(--bg); box-shadow: 0 -1px 0 var(--line);
}
[data-short] .run-coach-actions > .ui-btn--primary { flex: 1 1 auto; }
[data-short] .run-coach-actions > .ui-btn--ghost { flex: none; }
@media (min-width: 960px) {
  .run-coach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: var(--s-6); max-width: 1120px; margin: 0 auto; width: 100%; }
  .run-coach > .run-topbar, .run-coach > .run-demo-pill { grid-column: 1 / -1; }
  .run-coach-stage { grid-row: 2 / span 6; grid-column: 1; align-self: start; margin: var(--s-4) 0 0 var(--s-6); padding: var(--s-6) 0; }
  .run-coach > :not(.run-topbar):not(.run-coach-stage):not(.run-demo-pill) { grid-column: 2; padding-right: var(--s-6); padding-left: 0; }
}

bw-coach-figure { display: block; }
.lv-cf svg { width: var(--sz); height: calc(var(--sz) * 1.2); overflow: visible; display: block; }
.lv-cf [data-j] { transform-box: view-box; transform-origin: 0 0; }
.lv-cf-seg { stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.lv-cf-seg.is-back { opacity: .42; }
.lv-cf-head { fill: none; stroke: var(--ink-2); stroke-width: 3; }
.lv-cf-dot { fill: var(--brand); stroke: var(--stage); stroke-width: 1.5; }
.lv-cf-arc { fill: none; stroke: var(--brand-line); stroke-width: 2; stroke-dasharray: 4 5; stroke-linecap: round; }
.lv-cf-ground { stroke: var(--line-strong); stroke-width: 1; }
.lv-cf-spot { fill: var(--brand); opacity: .15; }
.lv-cf--board { display: flex; gap: 2px; }
.lv-cf-frame { width: calc(var(--sz) / 2.1) !important; height: calc(var(--sz) * 264 / 180 / 2.1) !important; }
.lv-cf-step { font: 600 18px var(--font-mono); fill: var(--brand-strong); }

/* ======================================================================
   Calibration: Charge-Up (#/calibrate)
   ====================================================================== */
.run-cal { align-items: stretch; padding-bottom: calc(var(--s-4) + var(--safe-bottom)); overflow-x: hidden; }
.run-cal > :not(.run-topbar) { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.run-cal-copy { padding: var(--s-3) var(--gutter) 0; text-align: center; min-height: 78px; }
.run-cal-h { margin: 0; font: 700 28px/1.1 var(--font-num); letter-spacing: .05em; text-transform: uppercase; }
.run-cal.is-warn .run-cal-h { color: var(--warn-ink); }
.run-cal.is-done .run-cal-h { color: var(--brand-strong); }
.run-cal-sub { margin: 6px 0 0; font-size: var(--fs-body); color: var(--ink-2); }
.run-cal-nudge { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: var(--warn-ink); animation: run-nudge 900ms var(--ease-inout) infinite alternate; }
.run-cal-nudge.is-left { animation-name: run-nudge-l; }
@keyframes run-nudge { from { transform: translateX(0); } to { transform: translateX(calc(5px * var(--motion))); } }
@keyframes run-nudge-l { from { transform: translateX(0); } to { transform: translateX(calc(-5px * var(--motion))); } }
.run-cal-connect { display: flex; justify-content: center; margin-top: var(--s-3); }
.run-cal-ring-wrap { display: grid; place-items: center; padding: var(--s-4) 0 var(--s-3); }
.run-cal-ring { position: relative; width: 240px; height: 240px; }
.run-cal-bezel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity 300ms var(--ease-out); }
.run-cal-tick { stroke: var(--line-strong); stroke-width: 1.6; stroke-linecap: round; transition: stroke 160ms var(--ease-standard); }
.run-cal-tick.is-major { stroke-width: 2.4; }
.run-cal-tick.is-on { stroke: var(--brand); }
.run-cal.is-warn .run-cal-tick.is-on { stroke: var(--warn); }
.run-cal-ray {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 34px; margin: -34px 0 0 -2.5px; border-radius: 3px; opacity: 0;
  transform-origin: 50% 100%; background: linear-gradient(to top, var(--brand), var(--brand-hi));
}
.run-cal-ray.is-on { opacity: 1; }
.run-cal-feet { position: absolute; inset: 0; display: grid; place-items: center; }
.run-cal-emblem { position: absolute; inset: 20px; display: grid; place-items: center; color: var(--brand); opacity: 0; pointer-events: none; }
.run-cal.is-done .run-cal-emblem { opacity: 1; }
.run-cal.is-done .run-cal-feet, .run-cal.is-done .run-cal-bezel, .run-cal.is-done .run-cal-ray { opacity: 0; transition: opacity 300ms var(--ease-out); }
.run-cal-balance { padding: 0 var(--s-6); transition: opacity 200ms var(--ease-standard); }
/* No frames yet (or data paused): an empty track, not a live-looking 50/50 split. */
.run-cal-balance.is-idle { opacity: .45; }
.run-cal-balance.is-idle .lv-bb-fill-l, .run-cal-balance.is-idle .lv-bb-fill-r, .run-cal-balance.is-idle .lv-bb-marker { opacity: 0; }
.run-cal-balance.is-idle .lv-bb-l, .run-cal-balance.is-idle .lv-bb-r { visibility: hidden; }
.run-cal-hops { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-4) 0 0; }
.run-cal-hops-k { font: 600 13px var(--font-mono); letter-spacing: .12em; color: var(--muted); }
.run-cal-diamond { width: 16px; height: 16px; transform: rotate(45deg); border: 2px solid var(--line-strong); border-radius: 3px; transition: background-color 200ms, border-color 200ms; }
.run-cal-diamond.is-on { background: var(--brand); border-color: var(--brand); }
.run-cal-retry { display: flex; justify-content: center; padding-top: var(--s-4); }
.run-cal-check { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--gutter) 0; text-align: center; }
.run-cal-micro { margin: 0; font-size: var(--fs-micro); color: var(--muted); }
.run-cal-foot { margin-top: auto; padding: var(--s-4) var(--gutter) 0; text-align: center; }

/* ======================================================================
   Keyframes
   ====================================================================== */
@keyframes run-up { from { opacity: 0; transform: translateY(calc(10px * var(--motion))); } to { opacity: 1; transform: none; } }
@keyframes run-slide { from { opacity: 0; transform: translateX(calc(-60px * var(--motion))); } to { opacity: 1; transform: none; } }
@keyframes run-pop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes run-slam { from { opacity: 0; transform: skewX(var(--skew)) scale(2.2); } to { opacity: 1; transform: skewX(var(--skew)) scale(1); } }
@keyframes run-letter { from { opacity: 0; transform: translateY(calc(-40px * var(--motion))); } to { opacity: 1; transform: none; } }
@keyframes run-stamp { from { opacity: 0; transform: scale(1.6) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes run-glow { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1.05); } 100% { opacity: .55; transform: scale(1); } }
@keyframes run-rise { from { opacity: 0; transform: translateY(calc(24px * var(--motion))); } to { opacity: 1; transform: none; } }
@keyframes run-sheet-up { from { opacity: 0; transform: translateY(calc(36px * var(--motion))); } to { opacity: 1; transform: none; } }
@keyframes run-breathe { 0% { opacity: 0; transform: scale(.6); } 50% { opacity: .7; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes run-blink { from { opacity: 1; } to { opacity: .45; } }

/* Reduced motion: static gold ring behind a PB, plates fade in. */
[data-motion="reduced"] .run-hero.is-pb .run-hero-glow { opacity: .6; }
[data-motion="reduced"] .run-tap-ring { display: none; }
[data-blurred] .run-tap-ring, [data-blurred] .lv-ar--set .lv-ar-spin { animation-play-state: paused; }