/* ============================================================================
   VECTOR — Design tokens v1.0
   Drop this file into your global CSS entry. Every component should read from
   these custom properties; never hard-code colors, type sizes, or shadows.
   ========================================================================== */

:root {
  /* ── COLOR · surfaces (darkest → lightest) ───────────────────────────── */
  --v-void:       #000000;
  --v-bg:         #0A0B07;   /* default page background */
  --v-surface:    #13140E;   /* default card background */
  --v-elevated:   #1C1D14;   /* nested cards, day chips */
  --v-overlay:    #23241A;   /* modal scrims, menus */

  /* ── COLOR · borders ─────────────────────────────────────────────────── */
  --v-border:        #2A2C20; /* default hairline */
  --v-border-strong: #3D4030; /* prominent hairlines, focused inputs */

  /* ── COLOR · text ────────────────────────────────────────────────────── */
  --v-text:     #E8E9DC;     /* primary       — 16.4:1 on --v-bg */
  --v-text-2:   #B0B19E;     /* secondary     —  9.8:1 */
  --v-text-3:   #7A7C68;     /* muted/caption —  4.9:1 */
  --v-text-4:   #4E4F40;     /* disabled      —  2.7:1 (decorative only) */

  /* ── COLOR · accents (semantic) ──────────────────────────────────────── */
  --v-phosphor:     #CCFF3D; /* easy · positive · primary CTA · BUILD phase */
  --v-phosphor-dim: #7A9920;
  --v-magenta:      #FF3D9A; /* quality · A-race · negative · warning */
  --v-magenta-dim:  #992460;
  --v-amber:        #FFB23D; /* long run · taper · B-race · caution */
  --v-amber-dim:    #996524;
  --v-blue:         #3D9AFF; /* strength · stretch · info · C-race */
  --v-blue-dim:     #24588F;

  /* ── COLOR · workout-type aliases ────────────────────────────────────── */
  --v-type-easy:     var(--v-phosphor);
  --v-type-quality:  var(--v-magenta);
  --v-type-long:     var(--v-amber);
  --v-type-rest:     var(--v-text-4);
  --v-type-strength: var(--v-blue);

  /* ── COLOR · race priority aliases ───────────────────────────────────── */
  --v-race-a: var(--v-magenta);
  --v-race-b: var(--v-amber);
  --v-race-c: var(--v-blue);

  /* ── COLOR · training phase aliases ──────────────────────────────────── */
  --v-phase-base:  var(--v-phosphor-dim);
  --v-phase-build: var(--v-phosphor);
  --v-phase-taper: var(--v-amber);
  --v-phase-race:  var(--v-magenta);

  /* ── TYPE · families ─────────────────────────────────────────────────── */
  --v-font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --v-font-body:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --v-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── TYPE · scale (px) ───────────────────────────────────────────────── */
  /* display: Bricolage 800, negative tracking */
  --v-fs-display-xl: 132px;  /* race countdown */
  --v-fs-display-lg: 48px;   /* page title */
  --v-fs-display-md: 32px;   /* card heading */
  --v-fs-display-sm: 22px;
  /* body: Inter Tight */
  --v-fs-title:   18px;
  --v-fs-body-lg: 14px;
  --v-fs-body:    13px;
  --v-fs-body-sm: 12px;
  /* mono */
  --v-fs-mono-data: 13px;
  --v-fs-caption:   11px;
  --v-fs-label:     10px;    /* tracked-out caps labels */

  /* ── TYPE · letter-spacing ───────────────────────────────────────────── */
  --v-ls-display-tight: -0.06em;
  --v-ls-display:       -0.04em;
  --v-ls-display-soft:  -0.03em;
  --v-ls-mono:           0.06em;
  --v-ls-label:          0.22em;
  --v-ls-button:         0.28em;

  /* ── TYPE · line-height ──────────────────────────────────────────────── */
  --v-lh-display: 0.85;
  --v-lh-title:   1.0;
  --v-lh-body:    1.45;
  --v-lh-tight:   1.2;

  /* ── SPACING · 4-based scale ─────────────────────────────────────────── */
  --v-s-1:  4px;
  --v-s-2:  8px;
  --v-s-3:  12px;
  --v-s-4:  16px;
  --v-s-5:  20px;
  --v-s-6:  24px;
  --v-s-7:  28px;
  --v-s-8:  32px;
  --v-s-10: 40px;
  --v-s-12: 48px;

  --v-gutter: 18px;          /* mobile page side-padding */
  --v-card-inset-y: 12px;
  --v-card-inset-x: 14px;
  --v-card-gap: 10px;

  /* ── RADIUS ──────────────────────────────────────────────────────────── */
  --v-r-0: 0;                /* default — VECTOR is sharp */
  --v-r-1: 2px;              /* only for status dots, never surfaces */
  --v-r-pill: 99px;          /* dots, the GO indicator */

  /* ── BORDERS ─────────────────────────────────────────────────────────── */
  --v-border-default: 1px solid var(--v-border);
  --v-border-strong-line: 1px solid var(--v-border-strong);
  --v-border-dashed: 1px dashed var(--v-border);

  /* ── SHADOW · glow ───────────────────────────────────────────────────── */
  /* Use rgba() versions so they layer over any surface. */
  --v-glow-phosphor-light:  0 0 6px rgba(204,255,61,0.35);
  --v-glow-phosphor-med:    0 0 8px rgba(204,255,61,0.40), 0 0 24px rgba(204,255,61,0.20);
  --v-glow-phosphor-strong: 0 0 12px rgba(204,255,61,0.60), 0 0 36px rgba(204,255,61,0.30);

  --v-glow-magenta-light:   0 0 6px rgba(255,61,154,0.35);
  --v-glow-magenta-med:     0 0 8px rgba(255,61,154,0.40), 0 0 24px rgba(255,61,154,0.20);

  --v-glow-amber-light:     0 0 6px rgba(255,178,61,0.35);
  --v-glow-amber-med:       0 0 8px rgba(255,178,61,0.40), 0 0 18px rgba(255,178,61,0.20);

  --v-glow-blue-light:      0 0 6px rgba(61,154,255,0.35);
  --v-glow-blue-med:        0 0 8px rgba(61,154,255,0.40), 0 0 18px rgba(61,154,255,0.20);

  /* Box-shadow versions of the above (for buttons/cards) */
  --v-shadow-cta: 0 0 24px rgba(204,255,61,0.50), 0 0 60px rgba(204,255,61,0.20);
  --v-shadow-active-card: 0 0 16px rgba(204,255,61,0.20);

  /* ── MOTION ──────────────────────────────────────────────────────────── */
  --v-dur-instant:  80ms;
  --v-dur-fast:     120ms;
  --v-dur-default:  200ms;
  --v-dur-slow:     400ms;
  --v-ease:         cubic-bezier(0.2, 0.7, 0.3, 1);
  --v-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Scanline overlay — apply to <body> or <main> ─────────────────────── */
.v-scanlines {
  position: relative;
}
.v-scanlines::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(transparent 0px, rgba(42,44,32,0.5) 1px, transparent 2px);
  background-size: 100% 3px;
  opacity: 0.15;
  z-index: 10;
}

/* ── Keyframes ────────────────────────────────────────────────────────── */
@keyframes v-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 6px currentColor; }
  50%      { opacity: 0.4; box-shadow: 0 0 12px currentColor; }
}
@keyframes v-breathe {
  0%, 100% { filter: brightness(1)   drop-shadow(0 0 8px rgba(204,255,61,0.4)); }
  50%      { filter: brightness(1.3) drop-shadow(0 0 18px rgba(204,255,61,0.7)); }
}
@keyframes v-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes v-press {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.97); }
}

/* ── Utility classes ──────────────────────────────────────────────────── */
.v-pulse   { animation: v-pulse 1.6s ease-in-out infinite; }
.v-breathe { animation: v-breathe 2.4s ease-in-out infinite; }
.v-cursor  { animation: v-blink 1s steps(2) infinite; }

/* ============================================================================
   COMPONENT RECIPES
   Each class below maps to a documented component in HANDOFF.md.
   Built with the tokens above — no magic numbers.
   ========================================================================== */

/* ── Page chrome ─────────────────────────────────────────────────────── */
.v-page {
  background: var(--v-bg);
  color: var(--v-text);
  font-family: var(--v-font-body);
  min-height: 100vh;
}

/* ── Page title ──────────────────────────────────────────────────────── */
.v-page-title {
  font-family: var(--v-font-display);
  font-weight: 800;
  font-size: var(--v-fs-display-lg);
  letter-spacing: var(--v-ls-display);
  line-height: var(--v-lh-display);
  margin: 0;
}
.v-page-title::after {                  /* trailing phosphor period */
  content: ".";
  color: var(--v-phosphor);
  text-shadow: var(--v-glow-phosphor-med);
}

/* ── Mast (header strip) ─────────────────────────────────────────────── */
.v-mast {
  display: flex; justify-content: space-between;
  padding: 2px var(--v-gutter) var(--v-s-2);
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-label);
  letter-spacing: var(--v-ls-label);
  color: var(--v-text-3);
}

/* ── Mono label (small caps) ─────────────────────────────────────────── */
.v-label {
  font-family: var(--v-font-mono);
  font-weight: 500;
  font-size: var(--v-fs-label);
  letter-spacing: var(--v-ls-label);
  color: var(--v-text-3);
  text-transform: uppercase;
}
.v-label--phosphor { color: var(--v-phosphor); text-shadow: var(--v-glow-phosphor-light); }
.v-label--magenta  { color: var(--v-magenta);  text-shadow: var(--v-glow-magenta-light); }
.v-label--amber    { color: var(--v-amber);    text-shadow: var(--v-glow-amber-light); }
.v-label--blue     { color: var(--v-blue);     text-shadow: var(--v-glow-blue-light); }

/* ── Glowing number ──────────────────────────────────────────────────── */
.v-glow-num {
  font-family: var(--v-font-display);
  font-weight: 800;
  letter-spacing: var(--v-ls-display-soft);
  line-height: var(--v-lh-display);
  color: var(--v-phosphor);
  text-shadow: var(--v-glow-phosphor-med);
}
.v-glow-num--magenta { color: var(--v-magenta); text-shadow: var(--v-glow-magenta-med); }
.v-glow-num--amber   { color: var(--v-amber);   text-shadow: var(--v-glow-amber-med); }
.v-glow-num--blue    { color: var(--v-blue);    text-shadow: var(--v-glow-blue-med); }
.v-glow-num--hero    { font-size: var(--v-fs-display-xl); letter-spacing: var(--v-ls-display-tight); }

/* ── Card ────────────────────────────────────────────────────────────── */
.v-card {
  background: var(--v-surface);
  border: var(--v-border-default);
  padding: var(--v-card-inset-y) var(--v-card-inset-x);
}
.v-card--void { background: var(--v-void); }
.v-card--accent-left { border-left-width: 3px; border-left-style: solid; }
.v-card--active {
  background: var(--v-void);
  border-color: var(--v-phosphor);
  box-shadow: var(--v-shadow-active-card);
}
.v-card--empty {
  background: var(--v-surface);
  border: var(--v-border-dashed);
  text-align: center;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.v-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--v-s-2);
  font-family: var(--v-font-display);
  font-weight: 800;
  letter-spacing: var(--v-ls-button);
  padding: var(--v-s-3) var(--v-s-5);
  font-size: var(--v-fs-body);
  border: 0; cursor: pointer;
  background: transparent; color: var(--v-text);
  transition: filter var(--v-dur-fast) var(--v-ease),
              transform var(--v-dur-instant) var(--v-ease);
}
.v-btn:hover  { filter: brightness(1.1); }
.v-btn:active { transform: scale(0.97); }

.v-btn--primary { background: var(--v-phosphor); color: var(--v-bg); box-shadow: var(--v-shadow-cta); }
.v-btn--magenta { background: var(--v-magenta);  color: var(--v-bg); box-shadow: 0 0 20px rgba(255,61,154,0.5); }
.v-btn--amber   { background: var(--v-amber);    color: var(--v-bg); }
.v-btn--blue    { background: var(--v-blue);     color: var(--v-bg); }

.v-btn--ghost {
  background: transparent;
  color: var(--v-text);
  border: var(--v-border-default);
  font-family: var(--v-font-mono);
  font-weight: 500;
  letter-spacing: 0.2em;
  font-size: var(--v-fs-caption);
}
.v-btn--ghost.is-accent {
  color: var(--v-phosphor);
  border-color: var(--v-phosphor);
}

.v-btn--sm { padding: var(--v-s-2) var(--v-s-3); font-size: var(--v-fs-caption); }
.v-btn--lg { padding: var(--v-s-4) var(--v-s-5); font-size: 16px; letter-spacing: 0.36em; }
.v-btn--full { width: 100%; }

/* ── Tag / pill ──────────────────────────────────────────────────────── */
.v-tag {
  display: inline-block;
  font-family: var(--v-font-mono);
  font-weight: 700;
  font-size: var(--v-fs-label);
  letter-spacing: 0.18em;
  padding: 4px 9px;
}
.v-tag--outlined {
  background: transparent;
  border: 1px solid currentColor;
  font-weight: 500;
}

/* Workout-type chip (E/Q/L/R/S) — apply size/aspect from JS or use --v-tile-size */
.v-wtag {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--v-font-display);
  font-weight: 800;
  letter-spacing: var(--v-ls-display);
  color: var(--v-bg);
  width: var(--v-tile-size, 46px);
  height: var(--v-tile-size, 46px);
  font-size: calc(var(--v-tile-size, 46px) * 0.45);
}
.v-wtag--E { background: var(--v-type-easy); }
.v-wtag--Q { background: var(--v-type-quality); box-shadow: var(--v-glow-magenta-med); }
.v-wtag--L { background: var(--v-type-long);    box-shadow: var(--v-glow-amber-med); }
.v-wtag--R { background: var(--v-surface);      color: var(--v-text-3); border: var(--v-border-default); }
.v-wtag--S { background: var(--v-type-strength); }
.v-wtag--today { background: var(--v-phosphor); box-shadow: var(--v-glow-phosphor-med); }

/* ── Input ───────────────────────────────────────────────────────────── */
.v-input {
  display: flex; align-items: center; gap: var(--v-s-2);
  background: var(--v-void);
  border: var(--v-border-default);
  padding: var(--v-s-3) var(--v-s-3);
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-body);
  color: var(--v-phosphor);
  letter-spacing: 0.04em;
}
.v-input:focus-within {
  border-color: var(--v-phosphor);
  box-shadow: 0 0 12px rgba(204,255,61,0.25);
}
.v-input::placeholder, .v-input .placeholder {
  color: var(--v-text-3);
  font-style: italic;
  font-family: var(--v-font-body);
  letter-spacing: 0;
}

/* ── Status dot ──────────────────────────────────────────────────────── */
.v-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: var(--v-r-pill);
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  vertical-align: middle;
}

/* ── Bottom nav ──────────────────────────────────────────────────────── */
.v-nav {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--v-void);
  border-top: var(--v-border-default);
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-label);
  letter-spacing: 0.2em;
  font-weight: 500;
}
.v-nav__item {
  text-align: center;
  padding: 13px 0 22px;
  color: var(--v-text-3);
  position: relative;
}
.v-nav__item.is-active {
  color: var(--v-phosphor);
}
.v-nav__item.is-active::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 2px;
  background: var(--v-phosphor);
  box-shadow: 0 0 8px var(--v-phosphor);
}

/* ── Stat block ──────────────────────────────────────────────────────── */
.v-stat {
  background: var(--v-void);
  border: var(--v-border-default);
  padding: var(--v-s-2) var(--v-s-1);
  text-align: center;
}
.v-stat__label {
  font-family: var(--v-font-mono);
  font-size: 9px; letter-spacing: var(--v-ls-label);
  color: var(--v-text-3);
}
.v-stat__value {
  font-family: var(--v-font-display);
  font-weight: 800; font-size: var(--v-fs-display-sm);
  letter-spacing: var(--v-ls-display-soft);
  line-height: 1.05;
}

/* ============================================================================
   LOCAL OPERATIVE EXTENSIONS
   Layout glue + helpers used by the Jinja macros and per-screen templates.
   These are NOT part of the canonical handoff (design/vector/tokens.css).
   Add new tokens to the canonical first, mirror down, then extend here.
   ========================================================================== */

/* ── Base reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--v-bg); color: var(--v-text); }
body {
  font-family: var(--v-font-body);
  font-size: var(--v-fs-body);
  line-height: var(--v-lh-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; border: 0; }
:focus-visible {
  outline: 2px solid var(--v-phosphor);
  outline-offset: 2px;
  box-shadow: var(--v-glow-phosphor-light);
}

/* ── App shell ──────────────────────────────────────────────────────── */
main.v-main {
  padding: var(--v-s-3) var(--v-gutter) 96px; /* bottom space for nav */
  max-width: 480px;
  margin: 0 auto;
}
.v-stack > * + * { margin-top: var(--v-card-gap); }
.v-stack-tight > * + * { margin-top: var(--v-s-2); }
.v-stack-loose > * + * { margin-top: var(--v-s-5); }

/* ── Page sub-title ──────────────────────────────────────────────────── */
.v-page-sub {
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-caption);
  letter-spacing: var(--v-ls-label);
  color: var(--v-text-3);
  margin: var(--v-s-1) 0 var(--v-s-3);
  text-transform: uppercase;
}

/* ── Mast halves ─────────────────────────────────────────────────────── */
.v-mast__left,
.v-mast__right { display: inline-flex; align-items: center; gap: 6px; }
.v-mast__right.is-phosphor { color: var(--v-phosphor); text-shadow: var(--v-glow-phosphor-light); }
.v-mast__right.is-magenta  { color: var(--v-magenta);  text-shadow: var(--v-glow-magenta-light); }

/* ── Colored dot variants (label-driven, not currentColor) ──────────── */
.v-dot--phosphor { color: var(--v-phosphor); }
.v-dot--magenta  { color: var(--v-magenta); }
.v-dot--amber    { color: var(--v-amber); }
.v-dot--blue     { color: var(--v-blue); }

/* ── Button extras ───────────────────────────────────────────────────── */
.v-btn__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--v-r-pill);
  background: currentColor;
}
.v-btn--primary .v-btn__dot { background: var(--v-bg); }
.v-btn--magenta .v-btn__dot { background: var(--v-bg); }

/* ── Input extras (terminal-style) ───────────────────────────────────── */
.v-input { position: relative; }
.v-input__prefix {
  color: var(--v-text-3);
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-mono-data);
}
.v-input__field {
  flex: 1;
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-body);
  color: var(--v-phosphor);
  letter-spacing: 0.04em;
  background: transparent;
}
.v-input__field::placeholder {
  color: var(--v-text-3);
  font-style: italic;
  font-family: var(--v-font-body);
  letter-spacing: 0;
}
textarea.v-input__field { min-height: 60px; resize: vertical; }

/* ── Section heading row ─────────────────────────────────────────────── */
.v-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--v-s-2) 0 var(--v-s-1);
}
.v-section-head__link {
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-caption);
  letter-spacing: var(--v-ls-label);
  color: var(--v-phosphor);
  text-transform: uppercase;
}

/* ── Forms (grouped fields) ──────────────────────────────────────────── */
.v-field { display: block; }
.v-field + .v-field { margin-top: var(--v-s-3); }
.v-field__label {
  display: block;
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-label);
  letter-spacing: var(--v-ls-label);
  color: var(--v-text-3);
  text-transform: uppercase;
  margin-bottom: var(--v-s-1);
}
.v-field__hint {
  display: block;
  margin-top: var(--v-s-1);
  font-size: var(--v-fs-body-sm);
  font-style: italic;
  color: var(--v-text-3);
}
.v-field__error {
  display: block;
  margin-top: var(--v-s-1);
  font-size: var(--v-fs-body-sm);
  color: var(--v-magenta);
  text-shadow: var(--v-glow-magenta-light);
}

/* ── Segmented button row (used for filter chips, severity, type) ───── */
.v-seg {
  display: grid;
  gap: 6px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.v-seg .v-btn { padding: var(--v-s-2) var(--v-s-2); font-size: var(--v-fs-label); letter-spacing: 0.2em; }

/* ── Coaching prose ─────────────────────────────────────────────────── */
.v-prose {
  font-family: var(--v-font-body);
  font-style: italic;
  color: var(--v-text-2);
  font-size: var(--v-fs-body-lg);
  line-height: var(--v-lh-body);
}
.v-prose-muted { color: var(--v-text-3); }

/* ── Caption ─────────────────────────────────────────────────────────── */
.v-cap {
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-caption);
  letter-spacing: var(--v-ls-label);
  color: var(--v-text-3);
  text-transform: uppercase;
}

/* ── Em-dash empty value ─────────────────────────────────────────────── */
.v-empty { color: var(--v-text-3); }

/* ── Week strip (7-col day chips) ────────────────────────────────────── */
.v-weekstrip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.v-weekstrip__day {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 8px 0;
  background: var(--v-surface);
  border: var(--v-border-default);
  font-family: var(--v-font-mono);
  font-size: 9px;
  letter-spacing: var(--v-ls-label);
  color: var(--v-text-3);
  text-transform: uppercase;
  min-height: 60px;
}
.v-weekstrip__day.is-today {
  background: var(--v-phosphor);
  color: var(--v-bg);
  box-shadow: var(--v-glow-phosphor-med);
}
.v-weekstrip__day.is-Q { background: var(--v-magenta); color: var(--v-bg); box-shadow: var(--v-glow-magenta-light); }
.v-weekstrip__day.is-L { background: var(--v-amber);   color: var(--v-bg); box-shadow: var(--v-glow-amber-light); }
.v-weekstrip__day.is-R { background: var(--v-surface); color: var(--v-text-3); }
.v-weekstrip__num {
  font-family: var(--v-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: var(--v-ls-display-soft);
}

/* ── Scoreboard grid (4-up / 3-up) ───────────────────────────────────── */
.v-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.v-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.v-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ── Activity row ───────────────────────────────────────────────────── */
.v-act-row {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: var(--v-s-3);
  align-items: center;
  padding: var(--v-s-3) 0;
  border-bottom: var(--v-border-default);
}
.v-act-row:last-child { border-bottom: 0; }
.v-act-row__date {
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-caption);
  letter-spacing: var(--v-ls-label);
  color: var(--v-text-3);
  text-transform: uppercase;
}
.v-act-row__desc {
  font-family: var(--v-font-body);
  font-style: italic;
  color: var(--v-text-2);
  font-size: var(--v-fs-body);
}
.v-act-row__tss {
  display: block;
  margin-top: 2px;
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-caption);
  letter-spacing: var(--v-ls-label);
  color: var(--v-text-3);
  text-transform: uppercase;
}
.v-act-row__km {
  font-family: var(--v-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: var(--v-ls-display-soft);
  color: var(--v-phosphor);
  text-shadow: var(--v-glow-phosphor-light);
}
.v-act-row.is-medium .v-act-row__km { color: var(--v-magenta); text-shadow: var(--v-glow-magenta-light); }
.v-act-row.is-long  {
  border: var(--v-border-default);
  border-color: var(--v-amber);
  padding: var(--v-s-3) var(--v-s-3);
  margin: var(--v-card-gap) 0;
  box-shadow: var(--v-shadow-active-card);
}
.v-act-row.is-long .v-act-row__km {
  color: var(--v-amber);
  text-shadow: var(--v-glow-amber-med);
  font-size: 26px;
}

/* ── Phase rail ──────────────────────────────────────────────────────── */
.v-phase-rail {
  display: grid;
  gap: 4px;
  align-items: stretch;
  height: 56px;
}
.v-phase-rail__cell {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 6px 8px;
  font-family: var(--v-font-mono);
  font-size: var(--v-fs-label);
  letter-spacing: var(--v-ls-label);
  color: var(--v-bg);
  text-transform: uppercase;
}
.v-phase-rail__cell--BASE  { background: var(--v-phase-base);  }
.v-phase-rail__cell--BUILD { background: var(--v-phase-build); box-shadow: var(--v-glow-phosphor-med); }
.v-phase-rail__cell--TAPER { background: var(--v-phase-taper); }
.v-phase-rail__cell--RACE  { background: var(--v-phase-race); box-shadow: var(--v-glow-magenta-light); }

/* ── Wizard step circles ─────────────────────────────────────────────── */
.v-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--v-r-pill);
  font-family: var(--v-font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--v-bg);
  margin-right: var(--v-s-2);
}
.v-step--1 { background: var(--v-phosphor); box-shadow: var(--v-glow-phosphor-light); }
.v-step--2 { background: var(--v-magenta); box-shadow: var(--v-glow-magenta-light); }
.v-step--3 { background: var(--v-amber);   box-shadow: var(--v-glow-amber-light); }

/* ── Confidence bar (5 segments) ─────────────────────────────────────── */
.v-confbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; height: 8px; }
.v-confbar__seg { background: var(--v-elevated); }
.v-confbar__seg.is-on { background: var(--v-phosphor); box-shadow: var(--v-glow-phosphor-light); }
.v-confbar__seg.is-on.is-amber  { background: var(--v-amber);   box-shadow: var(--v-glow-amber-light); }
.v-confbar__seg.is-on.is-magenta{ background: var(--v-magenta); box-shadow: var(--v-glow-magenta-light); }

/* ── Bottom nav positioning (canonical .v-nav is unstyled for placement) ── */
.v-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
  max-width: 480px;
  margin: 0 auto;
}
.v-nav__item { text-decoration: none; }
@media (min-width: 481px) {
  .v-nav { border-left: var(--v-border-default); border-right: var(--v-border-default); }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v-pulse, .v-breathe, .v-cursor { animation: none !important; }
  * { transition: none !important; }
}