/* ===== 30-Day Race Prep — built for HYROX ===== */
:root {
  --bg:        #0a0a0a;
  --bg-2:      #121212;
  --bg-3:      #1a1a1a;
  --line:      #262626;
  --line-2:    #333;
  --txt:       #f4f4f4;
  --txt-dim:   #9a9a9a;
  --txt-faint: #5c5c5c;
  --accent:    #00FFEF;
  --accent-dim:#0a8f88;
  --done:      #00FFEF;

  --p1: #00FFEF; /* Foundation */
  --p2: #37b6ff; /* Build */
  --p3: #b98bff; /* Race Sim */
  --p4: #ffcf4a; /* Taper */

  /* Our own yellow for the "Built for HYROX" descriptor. Not sampled from
     HYROX brand assets — see the trademark note in README. */
  --race-yellow: #FFE500;
  /* Fuel notes get their own voice — green, so they never read as Phase-4
     yellow or a coaching note. */
  --fuel: #7be382;

  --r: 14px;
  --safe: env(safe-area-inset-bottom, 0px);
  /* Horizontal gutter of .app. The header backdrop negates it to reach the
     app's edges, so the two must stay in sync. */
  --app-pad: 20px;

  /* Shared decorative texture — used by the header backdrop and the phase cards.
     Two passes at different periods so it never reads as a repeating stripe. */
  --streaks:
    repeating-linear-gradient(114deg, transparent 0 9px, rgba(255,255,255,0.030) 9px 10px, transparent 10px 31px),
    repeating-linear-gradient(114deg, transparent 0 23px, rgba(255,255,255,0.018) 23px 25px, transparent 25px 62px);
  /* A steeper, sparser cut of the same texture — for the landing page, so it
     reads as a relative of the app header rather than a copy of it. */
  --streaks-alt:
    repeating-linear-gradient(98deg, transparent 0 13px, rgba(255,255,255,0.026) 13px 14px, transparent 14px 41px),
    repeating-linear-gradient(98deg, transparent 0 29px, rgba(255,255,255,0.014) 29px 31px, transparent 31px 82px);
  /* Film grain. Inline SVG turbulence — no network request, no photo. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* [hidden] only sets display:none at user-agent weight, so any `display` rule in
   this file silently beats it. .set-list is display:flex — without this, hiding
   it while the editor is open does nothing. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  overscroll-behavior-y: none;
  min-height: 100dvh;
}

.mono { font-variant-numeric: tabular-nums; }

/* ---- Typographic scale: heavy, athletic ---- */
.display {
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-transform: uppercase;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ============ App shell ============ */
.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 0 var(--app-pad) calc(40px + var(--safe));
  position: relative;
}

/* ============ Gate ============ */
/* It doubles as the landing page for anyone who hasn't bought, so it scrolls.
   Deliberately NOT position:fixed with internal overflow — #app is display:none
   while locked, so the body can scroll it normally. A fixed overlay with its own
   scroll container breaks momentum scrolling and URL-bar behaviour on iOS. */
.gate {
  min-height: 100dvh;
  background: var(--bg);
  padding: 48px 20px calc(56px + var(--safe));
  text-align: center;
  position: relative;   /* offsetParent for .gate-art */
}

/* Landing backdrop. A relative of the app header's, not a copy: steeper streaks,
   a warm yellow glow set against the accent one, and no drift — a sales page
   shouldn't fidget behind the type. Height-capped so it fades out well above the
   carousel; it never scrolls, so there's nothing to composite on scroll. */
.gate-art {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 560px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(55% 50% at 84% 2%, rgba(0, 255, 239, 0.09), transparent 70%),
    radial-gradient(48% 46% at 12% 10%, rgba(255, 229, 0, 0.055), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0 46%, transparent 100%);
}
.gate-art::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--streaks-alt);
}
.gate-art::after {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: var(--grain);
}

.gate-inner { max-width: 420px; margin: 0 auto; position: relative; z-index: 1; }
.gate-mark { color: var(--accent); font-weight: 900; letter-spacing: 0.3em; font-size: 12px; margin-bottom: 24px; }
.gate h1 { font-size: clamp(40px, 13vw, 64px); line-height: 0.9; margin-bottom: 10px; }
/* NOTE: --race-yellow is *our* yellow, eyeballed to sit in the same family as
   HYROX's. It is deliberately not sampled from their brand assets, and no claim
   is made that it matches. See the trademark note in README. */
.gate-for { color: var(--race-yellow); font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 22px; }
/* Scoped, not `.gate p` — that would bleed into every paragraph in the preview. */
.gate-pitch { color: var(--txt-dim); font-size: 15px; line-height: 1.55; max-width: 330px; margin: 0 auto 30px; }
.gate-hint { color: var(--txt-faint); font-size: 12px; font-weight: 600; margin-bottom: 10px; }

/* "returning" = arrived here from inside the app. They're still unlocked, so the
   key form is pointless — offer a way straight back instead. */
.gate-back { display: none; max-width: 320px; margin: 0 auto 4px; }
.gate.returning .gate-back { display: block; }
.gate.returning .gate-hint,
.gate.returning .gate-form { display: none; }
.gate-form { width: 100%; max-width: 320px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.gate-error { color: #ff5b5b; font-size: 13px; min-height: 18px; font-weight: 600; }

/* ---- "A look inside" divider ---- */
.gate-rule { display: flex; align-items: center; gap: 14px; margin: 44px 0 26px; }
.gate-rule::before, .gate-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gate-rule span { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--txt-faint); }

/* ============ Gate preview ============ */
/* Swipeable rail of real UI. Native scroll-snap: touch momentum, trackpads and
   keyboards all work for free. Neighbours blur back; the centred card is crisp.
   The rail scrolls internally, so the document never gains a horizontal bar. */
.pv-carousel { margin: 4px 0 14px; }
.pv-rail {
  position: relative;               /* offsetParent for the centring maths */
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 10px 0 16px;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.pv-rail::-webkit-scrollbar { display: none; }
/* Spacer flex items, NOT padding-inline: `flex-basis: 74%` on the cards resolves
   against the content box, so horizontal padding would shrink the cards and
   leave the first and last unable to reach the centre snap point. */
.pv-rail::before, .pv-rail::after { content: ""; flex: 0 0 12%; }

.pv-card {
  flex: 0 0 74%;
  scroll-snap-align: center;
  /* A quick flick used to carry straight past a card or two. This forces the
     scroll to stop at the very next snap point, however hard you swipe — one
     gesture, one card. */
  scroll-snap-stop: always;
  position: relative; overflow: hidden;
  /* All cards share a height so the rail doesn't jump. Sized to fit the tallest
     genuinely-bounded content (the four-phase card); the day card deliberately
     overflows behind its veil. */
  height: 322px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; text-align: left;
  transform: scale(0.9);
  filter: blur(2px) brightness(0.72);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.pv-card.on {
  transform: scale(1); filter: none;
  box-shadow: 0 22px 46px -20px rgba(0,0,0,.9);
}
/* Fade the day card's lower half so the veil reads as intentional, not clipped.
   Sits under .pv-feats, which is pinned to the same bottom edge. */
.pv-daycard::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(to top, var(--bg-2) 42%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* Static replica of the level toggle — it advertises the three tiers without
   pretending to be interactive. */
.pv-levels {
  display: flex; gap: 3px; padding: 3px; margin-bottom: 12px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 99px;
}
.pv-levels i {
  flex: 1; text-align: center; padding: 5px 2px; border-radius: 99px;
  font-size: 8.5px; font-weight: 800; font-style: normal;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--txt-faint); white-space: nowrap;
}
.pv-levels i.on { background: var(--accent); color: #001615; }

/* What you get, legible over the veil. One row — wrapping eats the card. */
.pv-feats {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: nowrap; gap: 4px;
  padding: 8px 12px 10px;
}
.pv-feat {
  flex: 1 1 0; text-align: center;
  padding: 4px 2px; border-radius: 99px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--txt-dim); white-space: nowrap;
}

/* The day card packs a whole session into a fixed box: shrink everything so the
   main set AND the coaching note both make it above the feature strip. */
.pv-daycard .pv-day-head { margin-bottom: 10px; }
.pv-daycard .pv-day-head b { font-size: 24px; }
.pv-daycard .pv-day-head span { font-size: 13px; }
.pv-daycard .pv-block p {
  font-size: 12px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.pv-daycard .pv-bl { margin-bottom: 4px; }
.pv-daycard .pv-block { margin-bottom: 9px; }
.pv-daycard .pv-sets { gap: 4px; }
.pv-daycard .pv-sets li { padding: 5px 9px; font-size: 10.5px; }
.pv-daycard .pv-note { padding: 6px 10px; }
.pv-daycard .pv-note p {
  font-size: 11px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

.pv-dots { display: flex; justify-content: center; gap: 7px; }
.pv-dots button { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: background .2s, transform .2s; }
.pv-dots button.on { background: var(--accent); transform: scale(1.3); }

/* The part they're paying for. Blurred, unselectable, hidden from a11y tree. */
.pv-veiled { filter: blur(4.5px); opacity: 0.6; user-select: none; pointer-events: none; }
.pv-bl-sp { margin-top: 6px; }

/* ---- miniature UI rendered inside the carousel cards ---- */
.pv-mini-head { display: flex; justify-content: space-between; align-items: baseline; }
.pv-mini-head .pv-bl { margin-bottom: 0; }
.pv-mini-count { font-size: 11px; font-weight: 800; color: var(--txt-dim); font-variant-numeric: tabular-nums; }

.pv-mini-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 11px; }
.pv-mc {
  position: relative; aspect-ratio: 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px;
  font-style: normal; font-size: 10px; font-weight: 800; color: var(--txt-faint);
}
.pv-mc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--pc); }
.pv-mc.done { background: color-mix(in srgb, var(--accent) 15%, var(--bg-3)); border-color: var(--accent-dim); color: var(--accent); }
.pv-mc.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--accent); }
.pv-mc.race { background: color-mix(in srgb, var(--p4) 20%, var(--bg-3)); font-size: 9px; }

.pv-mini-pct { font-size: 44px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.pv-mini-pct span { font-size: 20px; color: var(--txt-dim); }
.pv-mini-bar { height: 8px; background: var(--bg-3); border-radius: 99px; margin: 14px 0 18px; overflow: hidden; }
.pv-mini-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; box-shadow: 0 0 12px var(--accent-dim); }
.pv-mini-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pv-mini-phases u {
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
  height: 34px; border-radius: 6px; background: var(--bg-3);
  border: 1px solid var(--line); border-top: 3px solid var(--pc);
  text-decoration: none;
}
.pv-mini-phases u.on { background: color-mix(in srgb, var(--pc) 12%, var(--bg-3)); border-color: var(--pc); }
.pv-mini-phases em { font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: 0.06em; color: var(--txt-faint); }
.pv-mini-phases u.on em { color: var(--pc); }
.pv-mini-legend { margin-top: 12px; font-size: 11px; font-weight: 700; color: var(--txt-dim); }

/* Card 3's life beyond the bar: streak, a logged time, what's next. */
.pv-mini-rows { display: grid; gap: 5px; margin-top: 12px; }
.pv-mini-rows i {
  display: flex; align-items: center; gap: 8px; font-style: normal;
  background: var(--bg-3); border-radius: 7px; padding: 6px 9px;
  font-size: 10.5px; font-weight: 700; color: var(--txt-dim); text-align: left;
}
.pv-mini-rows em { font-style: normal; color: var(--accent); font-size: 11px; flex: none; }

.pv-locked { font-size: 12px; color: var(--txt-faint); margin-bottom: 26px; }

.pv-list { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 9px; max-width: 340px; margin: 0 auto 30px; }
.pv-list li { position: relative; padding-left: 22px; font-size: 14px; color: var(--txt-dim); line-height: 1.45; }
.pv-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Now a carousel card rather than a page section, so it fills the card.
   Compacted to fit four phases inside .pv-card's fixed height. */
.pv-phasecard .pv-phases { display: grid; gap: 5px; margin-top: 9px; }
/* Name and day-range share a row so the blurb still fits. */
.pv-phasecard .pv-phases { gap: 4px; }
.pv-phasecard .pv-phase {
  padding: 6px 10px; border-radius: 8px;
  display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: baseline;
}
/* The day range must never wrap — it's what forces the row to double height. */
.pv-phasecard .pv-phase .pv-tag { grid-area: 1 / 2; font-size: 8px; text-align: right; white-space: nowrap; }
.pv-phasecard .pv-phase b {
  grid-area: 1 / 1; font-size: 12.5px; margin: 0;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-phasecard .pv-phase .pv-blurb {
  grid-area: 2 / 1 / 2 / -1;
  font-size: 10.5px; line-height: 1.3; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Station list card — the eight stations, compact enough to fit the fixed card. */
.pv-stations { display: grid; gap: 3px; margin-top: 9px; }
.pv-stations i {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  background: var(--bg-3); border-radius: 6px; padding: 5px 8px; font-style: normal;
}
.pv-stations em {
  font-style: normal; width: 15px; height: 15px; border-radius: 4px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  font-size: 8px; font-weight: 800; color: var(--txt-faint);
  display: inline-flex; align-items: center; justify-content: center;
}
.pv-stations b { font-size: 11px; font-weight: 800; letter-spacing: -0.01em; }
.pv-stations span { font-size: 9px; font-weight: 700; color: var(--txt-faint); white-space: nowrap; }
.pv-stations-note { margin-top: 9px; font-size: 10px; color: var(--txt-faint); }

/* One real standard, animated, on the sales page. */
.pv-standard-diagram { margin-top: 10px; background: var(--bg-3); border-radius: 8px; padding: 6px; }
.pv-standard-diagram svg { display: block; width: 100%; height: auto; }
.pv-standard-fault { margin-top: 9px; font-size: 10.5px; font-weight: 700; color: #ff9f6b; text-align: left; }

.pv-phase {
  background: var(--bg-2); border: 1px solid var(--line);
  border-left: 3px solid var(--pc);
  border-radius: 10px; padding: 11px 13px; text-align: left;
  position: relative; overflow: hidden;
}
/* Same phase-tinted texture as the in-app phase pills. */
.pv-phase::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.6;
  background:
    radial-gradient(80% 100% at 100% 0, color-mix(in srgb, var(--pc) 15%, transparent), transparent 72%),
    var(--streaks);
  -webkit-mask-image: linear-gradient(to bottom left, #000, transparent 80%);
          mask-image: linear-gradient(to bottom left, #000, transparent 80%);
}
.pv-phase > * { position: relative; z-index: 1; }
.pv-phase .pv-tag { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pc); }
.pv-phase b { display: block; font-size: 15px; letter-spacing: -0.01em; margin: 2px 0 3px; }
.pv-phase .pv-blurb { font-size: 12px; color: var(--txt-dim); line-height: 1.45; }

.pv-day-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.pv-day-head b { font-size: 30px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.pv-day-head span { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.pv-block { margin-bottom: 12px; }
.pv-bl { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-faint); margin-bottom: 5px; }
.pv-block p { font-size: 14px; color: var(--txt-dim); font-weight: 600; }
.pv-sets { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pv-sets li { background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 13px; font-weight: 700; }
.pv-note { background: color-mix(in srgb, var(--accent) 7%, transparent); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 10px 12px; }
.pv-note .pv-bl { color: var(--accent); }
.pv-note p { font-size: 13px; line-height: 1.5; }

.pv-cta { display: block; text-decoration: none; text-align: center; }
.pv-fine { font-size: 11px; color: var(--txt-faint); margin-top: 12px; line-height: 1.5; }
.pv-early {
  display: inline-block; margin-bottom: 10px; padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--race-yellow) 45%, transparent);
  border-radius: 99px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--race-yellow);
}

/* A returning (already-unlocked) visitor exited to look around — don't sell
   them what they own. */
.gate.returning .pv-early,
.gate.returning .pv-cta,
.gate.returning .pv-fine,
.gate.returning .pv-fine-refund { display: none; }
.pv-fine-refund { font-size: 10px; color: #4d4d4d; margin-top: 6px; max-width: 340px; margin-left: auto; margin-right: auto; }

input[type="password"], input[type="text"], input[type="date"] {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--txt);
  padding: 16px;
  border-radius: var(--r);
  font-size: 16px;
  font-family: inherit;
  transition: border-color .2s;
}
input:focus { outline: none; border-color: var(--accent); }
input::placeholder { color: var(--txt-faint); }

.btn {
  background: var(--accent);
  color: #001615;
  font-weight: 800;
  padding: 16px;
  border-radius: var(--r);
  font-size: 16px;
  letter-spacing: 0.01em;
  transition: transform .12s ease, filter .2s;
  text-transform: uppercase;
}
.btn:active { transform: scale(0.97); }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.55; cursor: default; }

.gate-dev { background: transparent; color: var(--txt-faint); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }
.gate-dev:hover { color: var(--txt-dim); }
.btn-ghost {
  background: transparent; color: var(--txt-dim);
  border: 1px solid var(--line-2); text-transform: none;
  font-weight: 600; letter-spacing: 0;
}
.btn-ghost:hover { color: var(--txt); border-color: var(--txt-faint); }

/* ============ Header ============ */
.hdr { padding: 28px 0 8px; position: relative; }
/* Everything except the backdrop sits above it. */
.hdr > :not(.hdr-art) { position: relative; z-index: 1; }

/* ---- Decorative backdrop ----
   Pure CSS: diagonal motion streaks + a faint accent glow + film grain, all
   dissolved by a mask so it never collides with the type below.
   It bleeds sideways by exactly --app-pad to cancel .app's gutter, so it reaches
   the app's edges without ever widening the page — at any breakpoint.

   PHOTO HOOK: set --hdr-photo on .hdr (or :root) to a url() and .hdr-photo
   paints it under the streaks with a duotone treatment. Unset it renders
   nothing — `none` means no background layer, so the filter has nothing to act
   on. Only use imagery you own or have licensed. */
.hdr-art {
  position: absolute;
  inset: 0 calc(-1 * var(--app-pad)) -22px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* The glow lives here, not on ::before — ::before is deliberately oversized
     for the drift, so a %-positioned gradient on it would land off-screen. */
  background: radial-gradient(60% 70% at 82% 6%, rgba(0, 255, 239, 0.10), transparent 70%);
  /* Fade out downward, and inward from the left/right edges (visible only once
     .app stops being full-bleed, i.e. wider than 560px). */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 40%, transparent 100%),
                      linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, #000 0 40%, transparent 100%),
                      linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* Streaks + glow. Two streak passes at different periods so the rhythm never
   reads as a repeating texture. */
.hdr-art::before {
  content: "";
  position: absolute;
  inset: -30% -60%;
  background: var(--streaks);
  animation: hdr-drift 34s linear infinite;
}

.hdr-art::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: var(--grain);
}

/* Empty unless --hdr-photo is set. Duotone: crush to grey, then re-tint toward
   the accent with the sepia → hue-rotate → saturate chain. */
.hdr-photo {
  position: absolute;
  inset: 0;
  background-image: var(--hdr-photo, none);
  background-size: cover;
  background-position: 50% 30%;
  opacity: 0.5;
  filter: grayscale(1) contrast(1.1) brightness(0.6) sepia(1) hue-rotate(125deg) saturate(2.6);
}

/* Seamless loop. A horizontal shift dx advances a θ-angled gradient by dx·sin(θ)
   along its own axis, so dx must satisfy dx·sin(114°) = k·period for BOTH layers.
   Periods 31 and 62 share a period of 62; 135.73·0.91355 = 124.0 = 2×62. */
@keyframes hdr-drift {
  to { background-position: -135.73px 0; }
}

/* The global reduced-motion guard further down uses `*`, which does not match
   pseudo-elements — so the drift needs stopping explicitly. */
@media (prefers-reduced-motion: reduce) {
  .hdr-art::before { animation: none; }
}

.hdr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.brand-name { font-weight: 800; font-size: 14px; letter-spacing: 0.02em; }
.brand-name span { color: var(--accent); }

.hdr-exit {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--txt-faint); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 99px; padding: 7px 13px;
  transition: color .2s, border-color .2s, transform .12s;
}
.hdr-exit:hover { color: var(--txt); border-color: var(--line-2); }
.hdr-exit:active { transform: scale(0.94); }

.hdr h1 { font-size: clamp(34px, 10vw, 52px); line-height: 0.9; }
.hdr h1 em { color: var(--accent); font-style: normal; }

/* ---- Who you are ---- */
.you {
  margin-top: 16px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--txt-faint);
}

/* ---- Countdown chip ---- */
.count {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 16px; flex-wrap: wrap;
}
.count-num { font-size: 15px; font-weight: 800; }
.count-num b { color: var(--accent); font-size: 22px; }
.count-sub { color: var(--txt-dim); font-size: 13px; }
.count-edit { color: var(--txt-faint); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; margin-left: 2px; }
.count-edit:hover { color: var(--accent); }

/* ---- Streak chip ---- */
.streak {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding: 8px 13px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 99px;
}
.streak-flame { font-size: 11px; line-height: 1; color: var(--txt-faint); transform: translateY(-1px); }
.streak.lit { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.streak.lit .streak-flame { color: var(--accent); text-shadow: 0 0 10px var(--accent); }
.streak-num { font-size: 13px; font-weight: 800; }
.streak-num b { color: var(--accent); font-size: 16px; }
.streak.cold .streak-num { color: var(--txt-dim); font-weight: 700; }
.streak-sub { font-size: 12px; color: var(--txt-dim); }
.streak-best { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt-faint); }

/* ============ Progress ============ */
.progress { margin: 24px 0 8px; }
.progress-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
.progress-pct { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; }
.progress-pct span { font-size: 18px; color: var(--txt-dim); font-weight: 700; }
.progress-label { color: var(--txt-dim); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }

.pbar { height: 8px; background: var(--bg-3); border-radius: 99px; overflow: hidden; position: relative; }
.pbar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--p1), var(--accent));
  border-radius: 99px;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 12px var(--accent-dim);
}

/* ---- Phase legend under bar ---- */
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.phase-pill {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 8px; text-align: left;
  transition: border-color .2s, background .2s;
  position: relative; overflow: hidden;
}
/* Same texture as the header, tinted by the card's own phase colour and faded
   out toward the bottom-left so it never sits behind the label or the bar.
   Static, not drifting — four animated cards is noise, not atmosphere. */
.phase-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(80% 100% at 100% 0, color-mix(in srgb, var(--pc) 14%, transparent), transparent 72%),
    var(--streaks);
  -webkit-mask-image: linear-gradient(to bottom left, #000, transparent 78%);
          mask-image: linear-gradient(to bottom left, #000, transparent 78%);
  transition: opacity .2s;
}
.phase-pill > * { position: relative; z-index: 1; }
.phase-pill:hover { border-color: var(--line-2); }
.phase-pill:hover::before { opacity: 0.75; }
.phase-pill.active { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 8%, var(--bg-2)); }
.phase-pill.active::before { opacity: 1; }
.phase-pill .pp-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-faint); }
.phase-pill.active .pp-tag { color: var(--pc); }
.phase-pill .pp-name { font-size: 11px; font-weight: 800; line-height: 1.15; margin-top: 3px; }
.phase-pill .pp-bar { height: 3px; background: var(--bg-3); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.phase-pill .pp-bar i { display: block; height: 100%; background: var(--pc); border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* ============ Level toggle ============ */
/* Three tiers don't fit beside the heading on a phone, so the head stacks and
   the toggle takes a full row of its own. */
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 30px 0 14px; flex-wrap: wrap; }
.section-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--txt-dim); white-space: nowrap; }
.section-head .toggle { flex: 1 1 100%; }

.toggle { display: flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px; position: relative; }
.toggle button { flex: 1 1 0; padding: 8px 10px; font-size: 11px; font-weight: 800; border-radius: 99px; color: var(--txt-dim); position: relative; z-index: 1; transition: color .2s; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.toggle button.on { color: #001615; }
.toggle-thumb { position: absolute; top: 3px; bottom: 3px; border-radius: 99px; background: var(--accent); transition: transform .25s cubic-bezier(.2,.8,.2,1), width .25s; z-index: 0; }

/* Division caption under the level toggle. Deliberately quiet, with clear air
   above the calendar grid below it. */
.level-div { margin: 12px 2px 22px; font-size: 10.5px; line-height: 1.55; color: #4d4d4d; }
.level-div b { color: var(--txt-dim); font-weight: 700; }

/* ============ Day grid ============ */
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cell {
  aspect-ratio: 1;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition: transform .12s ease, border-color .2s, background .2s;
}
.cell:active { transform: scale(0.93); }
.cell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--pc);
}
.cell .c-day { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.cell .c-tag { font-size: 8px; font-weight: 700; color: var(--txt-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.cell.rest .c-tag { color: var(--txt-faint); }
.cell.done { background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); border-color: var(--accent-dim); }
.cell.done .c-day { color: var(--accent); }
.cell.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px -4px var(--accent); }
/* Plan hasn't begun yet — Day 1 is the on-ramp, not "today". */
.cell.starts { border-color: var(--accent-dim); border-style: dashed; }
.cell.starts .c-tag { color: var(--accent); }
.cell .c-check { position: absolute; top: 5px; right: 6px; color: var(--accent); font-size: 11px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; }
.cell.done .c-check { opacity: 1; transform: scale(1); }
.cell.race { background: linear-gradient(160deg, color-mix(in srgb, var(--p4) 22%, var(--bg-2)), var(--bg-2)); }
.cell.race .c-day { color: var(--p4); font-size: 15px; }

/* ============ Day detail (sheet) ============ */
.sheet-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .3s; }
.sheet-scrim.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  max-width: 560px; margin: 0 auto;
  background: var(--bg-2);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--line-2);
  padding: 10px 22px calc(30px + var(--safe));
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.2,.9,.25,1);
  max-height: 92dvh; overflow-y: auto;
  box-shadow: 0 -20px 60px rgba(0,0,0,.6);
}
.sheet.open { transform: translateY(0); }
.sheet-grip { width: 40px; height: 4px; background: var(--line-2); border-radius: 99px; margin: 6px auto 18px; }

.sheet-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pc); }
.sheet-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc); }
.sheet-daynum { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 2px; }
.sheet-daynum b { font-size: 46px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.sheet-daynum .of { color: var(--txt-faint); font-size: 15px; font-weight: 700; }
.sheet h2 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 18px; line-height: 1.05; }
.sheet.race h2 { color: var(--p4); }

.block { margin-bottom: 18px; }
.block-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--txt-faint); margin-bottom: 8px; }
.block-body { font-size: 16px; }
.set-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.set-list li {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px;
  font-weight: 700; font-size: 15px;
  display: flex; align-items: center; gap: 10px;
}
.set-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pc); flex: none; }

.note { background: color-mix(in srgb, var(--pc) 7%, transparent); border-left: 3px solid var(--pc); border-radius: 0 10px 10px 0; padding: 12px 14px; }
.note .block-label { color: var(--pc); margin-bottom: 5px; }
.note p { font-size: 15px; color: var(--txt); line-height: 1.5; }

/* Fuel note: same shape as the coaching note, green so it reads as its own voice
   (not Phase-4 yellow, not the accent). */
.note.fuel { background: color-mix(in srgb, var(--fuel) 7%, transparent); border-left-color: var(--fuel); }
.note.fuel .block-label { color: var(--fuel); }
.note.fuel p { font-size: 14px; color: var(--txt-dim); }

.warmup { color: var(--txt-dim); font-weight: 600; }

/* ---- editable sets ---- */
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.block-head .block-label { margin-bottom: 0; }
.edited-tag {
  margin-left: 6px; padding: 2px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--pc) 18%, transparent); color: var(--pc);
  font-size: 9px; letter-spacing: 0.08em;
}
.block-edit {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--txt-faint); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px;
  transition: color .2s, border-color .2s;
}
.block-edit:hover { color: var(--txt); border-color: var(--line-2); }

.set-rows { display: flex; flex-direction: column; gap: 7px; }
.set-row { display: flex; gap: 7px; align-items: stretch; }
.set-row input {
  flex: 1; min-width: 0;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 12px 13px; color: var(--txt); font-size: 15px; font-family: inherit;
}
.set-row input:focus { outline: none; border-color: var(--pc); }
.set-del {
  flex: none; width: 42px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--txt-faint); font-size: 19px; line-height: 1;
}
.set-del:hover { color: #ff6b6b; border-color: #ff6b6b; }

.set-add {
  width: 100%; margin-top: 8px; padding: 11px; border-radius: 10px;
  background: transparent; border: 1px dashed var(--line-2); color: var(--txt-dim);
  font-size: 13px; font-weight: 700;
}
.set-add:hover { color: var(--pc); border-color: var(--pc); }

.set-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-top: 10px; }
.set-actions button {
  padding: 12px; border-radius: 10px;
  font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
}
.set-save { background: var(--pc); color: #06110f; }
.set-cancel { background: transparent; border: 1px solid var(--line-2); color: var(--txt-dim); }
.set-revert {
  display: block; width: 100%; margin-top: 12px;
  color: var(--txt-faint); font-size: 12px;
  text-decoration: underline; text-underline-offset: 3px;
}
.set-revert:hover { color: #ff6b6b; }

/* ---- movement standards ---- */
/* Outer disclosure: reads as a quiet button until you open it. */
.mv-lib { margin: 28px 0 4px; }
.mv-lib > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .2s, background .2s;
}
.mv-lib > summary::-webkit-details-marker { display: none; }
.mv-lib > summary:hover { border-color: var(--line-2); background: var(--bg-3); }
.mv-lib-t { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--txt-dim); }
.mv-lib-s { flex: 1; font-size: 11px; color: var(--txt-faint); text-align: right; }
.mv-lib-c {
  flex: none; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid var(--txt-faint); border-bottom: 2px solid var(--txt-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.mv-lib[open] > summary { border-color: var(--line-2); border-radius: var(--r) var(--r) 0 0; }
.mv-lib[open] .mv-lib-c { transform: rotate(-135deg) translate(-2px, -2px); }
.mv-lib[open] > summary .mv-lib-t { color: var(--txt); }
#moves-all {
  border: 1px solid var(--line-2); border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  padding: 12px 12px 6px;
}

/* On a phone the subtitle and the title won't share a line. */
@media (max-width: 400px) {
  .mv-lib > summary { flex-wrap: wrap; padding: 13px 14px; }
  .mv-lib-s { flex: 1 1 100%; text-align: left; order: 3; margin-top: 3px; }
  .mv-lib-c { margin-left: auto; }
}

.mv {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 7px; overflow: hidden;
}
.mv[open] { border-color: var(--line-2); }
.mv summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px; cursor: pointer; list-style: none;
  transition: background .15s;
}
/* Open, the title needs to stop sitting on top of the body copy. */
.mv[open] > summary {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px; margin-bottom: 4px;
}
.mv summary::-webkit-details-marker { display: none; }
.mv summary:hover { background: var(--bg-3); }
.mv-n {
  flex: none; width: 20px; height: 20px; border-radius: 5px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  font-size: 10px; font-weight: 800; color: var(--txt-faint);
  display: inline-flex; align-items: center; justify-content: center;
}
.mv[open] .mv-n { background: var(--pc, var(--accent)); border-color: transparent; color: #06110f; }
.mv-name { flex: 1; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.mv-spec { font-size: 10px; font-weight: 700; color: var(--txt-faint); text-align: right; }

.mv-body { padding: 16px 15px 18px; }
.mv-loads {
  font-size: 11.5px; font-weight: 700; color: var(--txt-dim); line-height: 1.5;
  background: var(--bg-3); border-radius: 8px; padding: 10px 12px; margin-bottom: 20px;
}
.mv-diagram {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; margin-bottom: 20px;
}
.mv-diagram svg { display: block; width: 100%; height: auto; }

.mv-sec { margin-bottom: 20px; }
.mv-sl {
  display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--txt-faint); margin-bottom: 11px;
}
.mv-sl.warn { color: #ff9f6b; }
.mv-body ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.mv-body li { position: relative; padding-left: 19px; font-size: 13.5px; line-height: 1.6; color: var(--txt-dim); }
.mv-std li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.mv-faults li::before { content: "×"; position: absolute; left: 0; top: 0; color: #ff9f6b; font-weight: 800; }
.mv-cue {
  font-size: 13.5px; line-height: 1.6; color: var(--txt);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  padding: 13px 14px;
}

/* ---- add to home screen: a permanent, quiet affordance ---- */
.ihint { margin-top: 16px; }
.ihint-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--txt-dim);
  padding: 7px 12px; border-radius: 99px;
  background: var(--bg-2); border: 1px solid var(--line);
  transition: color .2s, border-color .2s;
}
.ihint-toggle:hover { color: var(--txt); border-color: var(--line-2); }
.ihint-ico { font-size: 13px; color: var(--accent); }
.ihint-steps {
  margin: 8px auto 0; max-width: 320px;
  font-size: 11px; line-height: 1.5; color: var(--txt-faint);
}
.ihint-steps b { color: var(--txt-dim); font-weight: 700; }

/* ---- result logging ---- */
.result { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.result-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.result-row input {
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 13px; color: var(--txt); font-family: inherit;
  font-size: 22px; font-weight: 800; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; text-align: center; min-width: 0;
}
.result-row input:focus { outline: none; border-color: var(--pc); }
.result-row input::placeholder { color: var(--txt-faint); font-weight: 700; }
.result-row button {
  padding: 0 20px; border-radius: 10px; background: var(--pc); color: #06110f;
  font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
}
.result-row button:active { transform: scale(0.97); }
#result-note {
  width: 100%; margin-top: 8px;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; color: var(--txt-dim); font-size: 14px; font-family: inherit;
}
#result-note:focus { outline: none; border-color: var(--line-2); color: var(--txt); }
.result-error:not(:empty) { margin-top: 8px; font-size: 12px; font-weight: 600; color: #ff6b6b; }
.result-compare {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--txt-dim);
  font-variant-numeric: tabular-nums;
}
.result-compare.better { color: var(--accent); }
.result-compare.worse { color: #ff9f6b; }
.result-compare.muted { color: var(--txt-faint); font-weight: 600; }

/* ---- rest timer in sheet ---- */
.timer {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px;
  transition: border-color .25s;
}
.timer.running { border-color: var(--pc); }
.timer.done { border-color: var(--accent); animation: timer-flash .5s ease-out 3; }
@keyframes timer-flash {
  0%, 100% { background: var(--bg-2); }
  50% { background: color-mix(in srgb, var(--accent) 16%, var(--bg-2)); }
}

.timer-face {
  font-size: 46px; font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  text-align: center; margin: 2px 0 14px;
  transition: color .25s;
}
.timer.running .timer-face { color: var(--pc); }
.timer.done .timer-face { color: var(--accent); }

.timer-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.timer-presets button {
  padding: 9px 0; border-radius: 8px;
  background: var(--bg-3); border: 1px solid transparent;
  color: var(--txt-dim); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color .15s, border-color .15s, background .15s;
}
.timer-presets button.on { color: var(--pc); border-color: var(--pc); background: color-mix(in srgb, var(--pc) 10%, var(--bg-3)); }
.timer-presets button:active { transform: scale(0.95); }

.timer-ctrl { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.timer-ctrl button {
  padding: 13px; border-radius: 10px;
  font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--pc); color: #06110f;
  transition: opacity .15s, transform .12s;
}
.timer-ctrl button.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--txt-dim); }
.timer-ctrl button:active { transform: scale(0.97); }

/* ---- complete button in sheet ---- */
.complete-btn {
  width: 100%; margin-top: 8px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px; border-radius: var(--r);
  font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid var(--accent); color: var(--accent);
  background: transparent; transition: background .2s, color .2s, transform .12s;
}
.complete-btn:active { transform: scale(0.98); }
.complete-btn.done { background: var(--accent); color: #001615; }
.complete-btn .chk { display: inline-flex; }

.sheet-nav { display: flex; gap: 10px; margin-top: 14px; }
.sheet-nav button { flex: 1; padding: 13px; border-radius: var(--r); background: var(--bg-3); border: 1px solid var(--line); font-weight: 700; font-size: 13px; color: var(--txt-dim); transition: border-color .2s, color .2s; }
.sheet-nav button:hover:not(:disabled) { color: var(--txt); border-color: var(--line-2); }
.sheet-nav button:disabled { opacity: 0.3; cursor: default; }

/* ---- level toggle inside sheet ---- */
.sheet-level { display: flex; justify-content: flex-end; margin-bottom: 6px; }

/* ============ Footer ============ */
.foot { text-align: center; color: var(--txt-faint); font-size: 11px; margin-top: 40px; line-height: 1.6; }
.foot b { color: var(--txt-dim); font-weight: 700; }
.foot-legal { margin-top: 14px; color: #3d3d3d; font-size: 10px; line-height: 1.5; max-width: 340px; margin-left: auto; margin-right: auto; }
.foot-legal + .foot-legal { margin-top: 6px; }
.gate-legal { margin: 10px auto 0; color: #3d3d3d; font-size: 10px; line-height: 1.5; max-width: 340px; }
.foot-reset { color: var(--txt-faint); text-decoration: underline; text-underline-offset: 3px; }
.foot-reset:hover { color: #ff5b5b; }

/* ============ Race-date modal ============ */
.modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(4px); z-index: 110; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .28s; }
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 20px; padding: 28px 24px; width: 100%; max-width: 380px; transform: translateY(14px) scale(.98); transition: transform .28s cubic-bezier(.2,.9,.25,1); }
.modal-scrim.open .modal { transform: translateY(0) scale(1); }
.modal h2 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 6px; }
.modal p { color: var(--txt-dim); font-size: 14px; margin-bottom: 20px; }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.mf { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.mf > span { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-faint); }
.mf > span i { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--line-2); }
.modal-form input {
  width: 100%; min-width: 0;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 12px 13px; color: var(--txt); font-family: inherit; font-size: 15px; font-weight: 600;
}
.modal-form input:focus { outline: none; border-color: var(--accent); }
.modal-form input::placeholder { color: var(--txt-faint); font-weight: 500; }
/* Safari renders the date picker's own glyph mid-grey on dark. */
.modal-form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.modal-form .btn { margin-top: 4px; }
.modal-skip { text-align: center; color: var(--txt-faint); font-size: 13px; margin-top: 4px; }
.modal-skip:hover { color: var(--txt-dim); }

/* ============ Load-in animation ============ */
.reveal { opacity: 0; transform: translateY(12px); animation: reveal .55s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes reveal { to { opacity: 1; transform: none; } }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .12s; } .d3 { animation-delay: .19s; } .d4 { animation-delay: .26s; } .d5 { animation-delay: .33s; }

/* ============ Small phones (iPhone SE / 320–400px) ============ */
@media (max-width: 400px) {
  :root { --app-pad: 16px; }

  /* Heading gets its own line; the toggle takes the full row. Stops the labels
     crowding the edge and gives noticeably bigger tap targets mid-workout. */
  .section-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .section-head .toggle { display: flex; width: 100%; }
  .section-head .toggle button { flex: 1; }

  /* Tighten the phase pills so "Race Simulation" / "Taper & Peak" stop
     stacking three lines deep and blowing out the row height. */
  .phases { gap: 5px; }
  .phase-pill { padding: 9px 7px; }
  .phase-pill .pp-tag { font-size: 8px; letter-spacing: 0.06em; }
  .phase-pill .pp-name { font-size: 10px; }

  .grid { gap: 6px; }
  .cell .c-day { font-size: 18px; }
  .sheet { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .05s !important; }
}

.hidden { display: none !important; }