/* Fuelstate pages in the App worlds system. Loaded after worlds.css, which
   holds the tokens, glass, chrome headlines, buttons, nav, FAQ and footer.
   This file adds the layouts and live tiles the other pages use. Brand
   exceptions (glass, the app's own colours inside data-ui tiles) are marked
   taste-skill-ignore as in worlds.css. */

/* ── Layout ───────────────────────────────────────────────────────── */

/* Subpage heroes: the title sits in the top third and the first content
   starts on the first screen. Only the 404 and the deletion status fill it. */
.page .hero {
  min-height: 0;
  align-items: start;
  padding: clamp(128px, 17vh, 184px) 0 clamp(40px, 6vh, 72px);
}

.page .hero__grid { align-items: center; }

.page .hero--lost,
.page .hero--confirm {
  min-height: 100svh;
  align-items: center;
  padding-block: 120px 64px;
}

/* Headlines fade in a little quicker here; the page title starts at once. */
.motion .page .chrome.is-split .line__inner,
.page.motion .chrome.is-split .line__inner { transition-duration: 900ms; }

.motion .page .hero .chrome.is-split .line__inner,
.page .hero .chrome.is-split .line__inner {
  transition-duration: 650ms;
  transition-delay: calc(var(--l, 0) * 60ms);
}

.hero--short {
  min-height: 78svh;
}

.hero--lost {
  min-height: 100svh;
  align-items: center;
}

.hero__copy--wide {
  max-width: 1040px;
}

.hero__copy--wide .lead {
  max-width: 44ch;
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}

.duo > * { min-width: 0; }
.duo--top { align-items: start; }
.duo--end { align-items: end; }

.duo--top > .stack {
  position: sticky;
  top: 120px;
}

.stack--wide {
  max-width: 900px;
  container-type: inline-size;
}

.chapter--flush { padding-top: 0; }
.chapter--tight { padding-block: 24px var(--chapter-pad); }

.more {
  margin: clamp(32px, 5vh, 56px) 0 0;
}

.more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.more .icon {
  transition: transform 420ms var(--ease-spring);
}

.more a:hover .icon { transform: translateX(4px); }

.fine {
  margin: clamp(40px, 7vh, 72px) auto 0;
  max-width: 62ch;
  color: var(--ink-quiet);
  font-size: var(--step-small);
}

.wrap.fine { margin-inline: auto; }

.lead a,
.body a,
.doc__body a,
.delete a,
.confirm a:not(.btn) {
  color: var(--ink);
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}

.nav__links a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.12);
}

.nav--min {
  right: auto;
  padding-right: 18px;
}

/* ── Icon lists ───────────────────────────────────────────────────── */

.points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 48px);
  margin: clamp(40px, 7vh, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.points--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.points--one { grid-template-columns: minmax(0, 1fr); margin: 0; }

.points li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--ink-soft);
}

.points .icon { font-size: 1.5rem; margin-top: 2px; color: var(--ink); }

.points strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin: clamp(48px, 8vh, 88px) 0 0;
  padding: 0;
  list-style: none;
}

.flow li {
  display: grid;
  gap: 10px;
  align-content: start;
  color: var(--ink-soft);
}

.flow .icon {
  font-size: 2.25rem;
  color: var(--ink);
  margin-bottom: 8px;
}

.flow strong {
  color: var(--ink);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ── Audio: the three cues for one fuel ───────────────────────────── */

.cue-line {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cue-line__row {
  display: grid;
  grid-template-columns: 4.5ch 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  color: var(--ink-soft);
}

.cue-line__row strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.cue-line__time {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.cue-line__row--now .cue-line__time { color: var(--cue-yellow); }
.cue-line__row--late .cue-line__time { color: #ff5c5c; } /* taste-skill-ignore: DSColor.liveActivityRed */

/* Three-way segmented control for the voice card. */
.segmented--3 { grid-template-columns: repeat(3, 1fr); }
.segmented--3 .segmented__thumb { width: calc((100% - 8px) / 3); }
.segmented--3[data-value="now"] .segmented__thumb { transform: translateX(100%); }
.segmented--3[data-value="late"] .segmented__thumb { transform: translateX(200%); }

/* ── Apple Watch: the run screen, as FuelstateWatch draws it ──────── */

.hero__grid--voice {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
}

.hero .voice__text {
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
}

.hero__grid--watch {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 600px);
}

.watch-live {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* Apple Watch Series 11, 46mm, drawn in CSS. The screen is laid out in
   watch points (208 x 248, the 46mm display) and scales as one piece, so
   it keeps the proportions of FuelstateWatch's ActiveRunView exactly. */
.watch {
  position: relative;
  width: 100%;
  padding-block: 30%;
  isolation: isolate;
}

.watch__band {
  position: absolute;
  left: 17%;
  right: 17%;
  height: 36%;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.55)), /* taste-skill-ignore: band edge shading */
    #2b2b2e;
}

.watch__band--top {
  top: 0;
  border-radius: 14px 14px 0 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%); /* taste-skill-ignore: band fades out */
  mask-image: linear-gradient(to bottom, transparent, #000 55%); /* taste-skill-ignore: band fades out */
}

.watch__band--bottom {
  bottom: 0;
  border-radius: 0 0 14px 14px;
  -webkit-mask-image: linear-gradient(to top, transparent, #000 55%); /* taste-skill-ignore: band fades out */
  mask-image: linear-gradient(to top, transparent, #000 55%); /* taste-skill-ignore: band fades out */
}

.watch__case {
  position: relative;
  padding: 4.2%;
  border-radius: 25% / 21%;
  background: linear-gradient(145deg, #3a3c42 0%, #16171a 38%, #0b0b0d 62%, #2d2d30 100%); /* taste-skill-ignore: polished aluminium case */
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.12),
    inset 0 2px 3px rgba(255, 255, 255, 0.18),
    0 34px 70px rgba(0, 0, 0, 0.55); /* taste-skill-ignore: the device floats over the world */
}

/* The black glass around the display. */
.watch__case::before {
  content: "";
  position: absolute;
  inset: 2.2%;
  border-radius: 23% / 19.5%;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); /* taste-skill-ignore: glass edge */
}

.watch__crown {
  position: absolute;
  right: -3.4%;
  top: 43%;
  width: 6%;
  height: 10%;
  border-radius: 3px 7px 7px 3px;
  background: repeating-linear-gradient(180deg, #4a4c52 0 2px, #28282b 2px 4px); /* taste-skill-ignore: Digital Crown knurling */
  box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.5);
}

.watch__button {
  position: absolute;
  right: -1.6%;
  top: 58%;
  width: 3%;
  height: 13%;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, #1b1c20, #3a3c42); /* taste-skill-ignore: side button */
}

.watch__screen {
  --phase: #ffffff;
  position: relative;
  aspect-ratio: 208 / 248;
  margin: 3.4%;
  border-radius: 19% / 16%;
  background: #000;
  overflow: hidden;
  container-type: inline-size;
  font-family: ui-rounded, "SF Pro Rounded", var(--font);
  color: #fff;
}

.watch__screen[data-phase="now"] { --phase: #ffd666; } /* taste-skill-ignore: WatchColor.liveActivityGold */
.watch__screen[data-phase="overdue"] { --phase: #ff5c5c; } /* taste-skill-ignore: WatchColor.liveActivityRed */

/* 1 watch point. */
.wr {
  --pt: calc(100cqw / 208);
  position: absolute;
  inset: 0;
  padding: calc(10 * var(--pt)) calc(15 * var(--pt)) 0;
}

.wr__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(29 * var(--pt));
}

.wr__pause {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  height: calc(29 * var(--pt));
  padding: 0 calc(10 * var(--pt));
  border: 0;
  border-radius: calc(12 * var(--pt));
  background: rgba(84, 153, 242, 0.24);
  box-shadow: inset 0 0 0 1px rgba(84, 153, 242, 0.48); /* taste-skill-ignore: the watch's own button stroke */
  color: #5499f2; /* taste-skill-ignore: WatchColor.liveActivityBlue */
  font-family: inherit;
  font-size: calc(10 * var(--pt));
  font-weight: 800;
  letter-spacing: 0.05em;
}

.wr__bars {
  width: calc(9 * var(--pt));
  height: calc(11 * var(--pt));
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); /* taste-skill-ignore: the pause glyph */
  border-radius: 1px;
}

.wr__clock {
  font-family: var(--font);
  font-size: calc(16 * var(--pt));
  font-weight: 500;
  letter-spacing: 0;
}

.wr__run,
.wr__paused {
  display: flex;
  flex-direction: column;
}

.wr__run[hidden],
.wr__paused[hidden] { display: none; }

.wr__body {
  transition: opacity 170ms ease;
}

.wr__body.is-fading { opacity: 0; }

.wr__product {
  margin: calc(15 * var(--pt)) 0 0;
  font-size: calc(20.5 * var(--pt));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.wr__timer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: calc(3 * var(--pt));
}

.wr__clockbig {
  font-size: calc(36 * var(--pt));
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--phase);
  transition: color 300ms ease, text-shadow 300ms ease;
}

.watch__screen[data-phase="now"] .wr__clockbig { text-shadow: 0 0 calc(10 * var(--pt)) rgba(255, 214, 102, 0.72); } /* taste-skill-ignore: watch glow */
.watch__screen[data-phase="overdue"] .wr__clockbig { text-shadow: 0 0 calc(9 * var(--pt)) rgba(255, 92, 92, 0.72); } /* taste-skill-ignore: watch glow */

.wr__hr {
  display: inline-flex;
  align-items: baseline;
  gap: calc(3 * var(--pt));
  color: #ff5c5c; /* taste-skill-ignore: WatchColor.liveActivityRed */
  font-size: calc(18 * var(--pt));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wr__beat {
  display: inline-flex;
  align-self: center;
  animation: beat 0.84s ease-in-out infinite; /* on the wrapper, so it stays on the compositor */
}

.wr__hr .icon {
  width: calc(13 * var(--pt));
  height: calc(13 * var(--pt));
}

@keyframes beat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.16); }
}

.wr__metrics {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  margin-top: calc(14 * var(--pt));
  text-align: center;
}

.wr__metrics::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-2 * var(--pt));
  width: 1px;
  height: calc(23 * var(--pt));
  background: rgba(255, 255, 255, 0.24);
}

.wr__metrics b {
  font-size: calc(18.5 * var(--pt));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wr__mi {
  color: #5499f2; /* taste-skill-ignore: WatchColor.liveActivityBlue */
  font-size: calc(11 * var(--pt));
  font-weight: 700;
}

.wr__pace {
  font-size: calc(11 * var(--pt));
  font-weight: 700;
}

.wr__nudge {
  position: absolute;
  left: 0;
  right: 0;
  margin: calc(153 * var(--pt)) 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(9 * var(--pt));
  font-weight: 500;
  line-height: calc(10 * var(--pt));
  text-align: center;
}

.wr__buttons {
  display: grid;
  grid-template-columns: 50fr 118fr;
  gap: calc(10 * var(--pt));
  margin-top: calc(6 * var(--pt));
}

.wr__buttons button,
.wr__resume {
  height: calc(44 * var(--pt));
  border: 0;
  border-radius: calc(12 * var(--pt));
  font-family: inherit;
  font-size: calc(14 * var(--pt));
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform 160ms ease, background-color 300ms ease;
}

.wr__buttons button:active,
.wr__resume:active,
.wr__pause:active { transform: scale(0.95); }

.wr__skip {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); /* taste-skill-ignore: the watch's own button stroke */
}

/* Holding Skip fills it, as the 0.6s long press does on the wrist. */
.wr__skip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.26);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.wr__skip.is-holding::after {
  transform: scaleX(1);
  transition: transform 600ms linear;
}

.wr__done {
  color: #0b1019;
  background: var(--phase);
  font-size: calc(15 * var(--pt)) !important;
}

.wr__paused-title {
  margin: calc(15 * var(--pt)) 0 0;
  color: #5499f2; /* taste-skill-ignore: WatchColor.liveActivityBlue */
  font-size: calc(24 * var(--pt));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.wr__paused .wr__metrics { margin-top: calc(11 * var(--pt)); }
.watch__screen[data-paused="true"] .wr__pause { visibility: hidden; }
.wr__paused .wr__hr { justify-content: center; }

.wr__resume {
  margin-top: calc(14 * var(--pt));
  color: #0b1019;
  background: #5499f2; /* taste-skill-ignore: WatchColor.liveActivityBlue */
  font-size: calc(15 * var(--pt));
}

.watch-states {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.watch-states li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  color: var(--ink-soft);
  font-size: var(--step-small);
}

.watch-states strong {
  display: block;
  color: var(--ink);
  font-size: 1.0625rem;
}

.watch-states__dot {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transition: background-color 300ms ease, transform 420ms var(--ease-spring);
}

.watch-states li.is-on .watch-states__dot { transform: scale(1.3); }
.watch-states li[data-state-key="countdown"].is-on .watch-states__dot { background: #fff; }
.watch-states li[data-state-key="now"].is-on .watch-states__dot { background: #ffd666; } /* taste-skill-ignore: liveActivityGold */
.watch-states li[data-state-key="overdue"].is-on .watch-states__dot { background: #ff5c5c; } /* taste-skill-ignore: liveActivityRed */

/* ── Calculators (gels, carb load) ────────────────────────────────── */

.calc,
.load,
.morning,
.course {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 30px;
}

.calc__field {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.calc__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 600;
}

.calc__label output {
  color: var(--ink);
  font-size: 1.375rem;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --pct: 50%;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--gold) var(--pct), rgba(255, 255, 255, 0.16) var(--pct)); /* taste-skill-ignore: a filled track, not decoration */
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 6px;
  background: var(--gold);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); /* taste-skill-ignore: a thumb you drag floats */
  transition: transform 220ms var(--ease-spring);
}

input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

.pick {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.pick button,
.unit-toggle button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color var(--t-feedback) ease, transform 300ms var(--ease-spring);
}

.pick button:hover,
.unit-toggle button:hover { background: rgba(255, 255, 255, 0.08); }
.pick button:active,
.unit-toggle button:active { transform: scale(0.94); }

.pick button[aria-pressed="true"],
.unit-toggle button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 0.75px var(--glass-edge), inset 0 1px 0 var(--glass-shine); /* taste-skill-ignore: liquid-glass edge */
}

.calc__answer {
  display: grid;
  gap: 4px;
  padding-top: 4px;
}

.calc__big {
  margin: 0;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.calc__plus {
  color: var(--gold-light);
  font-size: 0.5em;
  letter-spacing: -0.01em;
}

.calc__sub,
.calc__verdict {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

.calc__verdict[data-state="short"] { color: #ff8a8a; } /* taste-skill-ignore: DSColor.errorRed tint */
.calc__verdict[data-state="ok"] { color: var(--teal); }

.bars {
  display: grid;
  gap: 10px;
}

.bars__row {
  display: grid;
  grid-template-columns: 8ch 1fr 5ch;
  gap: 12px;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.bars__row b { color: var(--ink); text-align: right; }

.bars__track {
  height: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.bars__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.55);
  transform-origin: 0 50%;
  transform: scaleX(var(--w, 0.5));
  transition: transform 600ms var(--ease-out);
}

.bars__fill--need { background: var(--gold); }

.unit-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  justify-self: start;
  gap: 4px;
  margin-top: -8px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.unit-toggle button { min-width: 56px; min-height: 36px; font-size: 0.9375rem; }

.load__days {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.load__days li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.load__day strong { display: block; font-size: 1.125rem; }
.load__day span { color: var(--ink-soft); font-size: 0.9375rem; }

.load__grams {
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
}

.load__grams b {
  font-size: 2rem;
  letter-spacing: -0.03em;
}

.load__days li:last-child .load__grams b { color: var(--gold-light); }

.bump-in { animation: bump 420ms var(--ease-spring); }

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Carb load: three days, and the plate ─────────────────────────── */

.days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin: clamp(48px, 8vh, 88px) 0 0;
  padding: 0;
  list-style: none;
}

.days li {
  display: grid;
  gap: 10px;
  align-content: start;
  color: var(--ink-soft);
}

.days__when {
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.days strong {
  color: var(--ink);
  font-size: 1.375rem;
  letter-spacing: -0.015em;
}

.plate {
  display: grid;
  gap: clamp(28px, 4vh, 40px);
}

.plate__tile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding: clamp(22px, 3vw, 32px);
}

.plate__col h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.plate__col ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.1em;
  color: var(--ink-soft);
}

.plate__col li::marker { color: rgba(255, 255, 255, 0.4); }

.plate__misses {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: var(--step-lead);
}

.plate__misses strong { color: var(--ink); }

/* ── Race morning checklist ───────────────────────────────────────── */

.morning__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.morning__step,
.morning__start {
  display: grid;
  grid-template-columns: auto 1fr 26px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px 14px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
  transition: background-color var(--t-feedback) ease, transform 300ms var(--ease-spring);
}

.morning__step:hover { background: rgba(255, 255, 255, 0.1); }
.morning__step:active { transform: scale(0.98); }

.morning__time {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.morning__text {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.morning__text strong {
  display: block;
  color: var(--ink);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.morning__tick {
  font-size: 1.625rem;
  color: rgba(255, 255, 255, 0.3);
  transition: color 300ms ease, transform 420ms var(--ease-spring);
}

.morning__step[aria-pressed="true"] .morning__tick {
  color: var(--teal);
  transform: scale(1.12);
}

.morning__step[aria-pressed="true"] .morning__text strong {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.morning__start {
  background: rgba(78, 191, 165, 0.12);
}

.morning__start .icon { font-size: 1.5rem; color: var(--teal); }

/* ── Glass rows (setup-row language as a list) ────────────────────── */

.rows {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rows .setup-row { font-size: 1.1875rem; }
.rows .setup-row > .icon { color: var(--ink); }
.rows .setup-row__end { color: var(--ink-soft); }

.rows--links a {
  text-decoration: none;
  transition: transform 420ms var(--ease-spring), background-color var(--t-feedback) ease;
}

.rows--links a:hover { background: rgba(255, 255, 255, 0.1); }
.rows--links a:active { transform: scale(0.98); }
.rows--links .chev { transition: transform 420ms var(--ease-spring); }
.rows--links a:hover .chev { transform: translateX(4px); }

/* ── Race course ──────────────────────────────────────────────────── */

.course__select {
  position: relative;
}

.course__select select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 54px;
  padding: 0 48px 0 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 0 0 0.75px var(--glass-edge); /* taste-skill-ignore: liquid-glass edge */
}

.course__select select option { color: #0b1019; }

.course__select .icon {
  position: absolute;
  right: 18px;
  top: 50%;
  margin-top: -0.5em;
  pointer-events: none;
}

.course__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.course__stats div {
  display: grid;
  gap: 2px;
}

.course__stats b {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.course__stats span { color: var(--ink-soft); font-size: 0.9375rem; }

.course__profile {
  margin: 0;
}

.course__profile svg {
  display: block;
  width: 100%;
  height: 150px;
  overflow: visible;
}

.course__area { fill: rgba(255, 255, 255, 0.1); }
.course__line { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.course__marks line { stroke-width: 2; vector-effect: non-scaling-stroke; }
.course__marks .gel { stroke: var(--gold); }
.course__marks .refill { stroke: #5499f2; stroke-dasharray: 3 3; } /* taste-skill-ignore: liveActivityBlue, the app's water colour */

.course__line.is-drawing {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 1.1s var(--ease-out) forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

.course__miles {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--ink-quiet);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.course__stations {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course__stations li {
  display: grid;
  grid-template-columns: 22px 7ch 1fr;
  gap: 10px;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.course__stations img { width: 22px; height: 22px; }
.course__stations .num { color: var(--ink); white-space: nowrap; }
.course__stations .is-water { color: #8dbbf7; } /* taste-skill-ignore: liveActivityBlue tint */
.course__stations li.is-none { display: block; color: var(--ink-soft); }

/* ── How it works: the setup fills in as you read ─────────────────── */

.steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 104px);
}

.steps__text {
  display: grid;
}

.step {
  display: grid;
  gap: 24px;
  align-content: center;
  min-height: 78vh;
  container-type: inline-size;
}

.step:first-child { min-height: 64vh; align-content: start; }

.step > .title { font-size: min(var(--step-title), 9.4cqi); }

.steps__tile {
  position: relative;
}

.steps__tile .setup {
  position: sticky;
  top: max(110px, calc(50vh - 280px));
}

[data-setup] .setup-row,
[data-setup] .before {
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out), background-color 400ms ease;
}

[data-setup] .setup-row .ok { transition: opacity 300ms ease, transform 420ms var(--ease-spring); }

.js [data-setup] [data-row]:not(.is-done) .ok { opacity: 0; transform: scale(0.4); }
.js [data-setup] [data-row]:not(.is-done) .setup-row__end > :not(.ok) { opacity: 0.35; }
.js [data-setup] [data-row="before"]:not(.is-done) { opacity: 0.3; transform: translateY(12px); }
[data-setup] [data-row].is-current { background: rgba(255, 255, 255, 0.12); }

.step__row { display: none; }
.js .step__row:not(.is-done) .ok { opacity: 0; transform: scale(0.4); }
.step__row .ok { transition: opacity 300ms ease, transform 420ms var(--ease-spring); }
.js .before.step__row:not(.is-done) { opacity: 0.35; }
.before.step__row { transition: opacity 500ms var(--ease-out); }

.facts {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  max-width: 50ch;
}

.facts strong { display: block; color: var(--ink); }

.paths {
  display: grid;
  gap: 8px;
  margin: clamp(40px, 7vh, 72px) 0 0;
  padding: 12px clamp(18px, 2.4vw, 30px);
  border-radius: 30px;
  list-style: none;
}

.paths li {
  display: grid;
  grid-template-columns: 44px minmax(0, 13rem) minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  color: var(--ink-soft);
}

.paths .icon { font-size: 1.875rem; color: var(--ink); }

.paths strong {
  color: var(--ink);
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.paths a {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  text-underline-offset: 3px;
}

.gut--still { align-self: center; }

.does {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(40px, 6vh, 64px);
}

.does__col {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 26px;
}

.does__col p { margin: 0; color: var(--ink-soft); }
.does__col .tile-head .icon { color: var(--ink); }

/* ── About ────────────────────────────────────────────────────────── */

.note-card {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px);
}

.note-card p {
  margin: 0;
  font-size: var(--step-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

.note-card p:first-child { color: var(--ink); }

.facts-card {
  display: grid;
  margin: 0;
  padding: 8px 26px;
}

.facts-card div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 16px;
  padding: 18px 0;
}

.facts-card div + div { box-shadow: 0 -0.75px 0 rgba(255, 255, 255, 0.12); } /* taste-skill-ignore: rows of a definition list in a glass tile */
.facts-card dt { color: var(--ink-soft); }
.facts-card dd { margin: 0; font-weight: 600; }

/* ── Support ──────────────────────────────────────────────────────── */

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 760px) {
  .help-grid { grid-template-columns: minmax(0, 1fr); }
}

.help-grid li { display: grid; }

.help-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  text-decoration: none;
  transition: transform 420ms var(--ease-spring), background-color var(--t-feedback) ease;
}

.help-row > .icon { font-size: 1.5rem; }
.help-row > span { display: grid; gap: 4px; }
.help-row__title { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
.help-row__desc { color: var(--ink-soft); }
.help-row .chev { transition: transform 420ms var(--ease-spring); }
.help-row:hover { background: rgba(255, 255, 255, 0.1); }
.help-row:hover .chev { transform: translateX(4px); }
.help-row:active { transform: scale(0.98); }

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(26px, 4vw, 52px);
  container-type: inline-size;
}

.contact > div { display: grid; gap: 12px; }
.contact .title { font-size: min(var(--step-title), 11cqi); }

/* ── Documents: privacy, terms ────────────────────────────────────── */

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  margin: 0;
}

.doc-meta div { display: grid; gap: 2px; }
.doc-meta dt { color: var(--ink-soft); font-size: var(--step-small); }
.doc-meta dd { margin: 0; font-weight: 600; }

.doc {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.doc__toc {
  position: sticky;
  top: 110px;
}

.doc__toc-title {
  margin: 0 0 12px;
  font-weight: 700;
  list-style: none;
}

.doc__toc-title::-webkit-details-marker { display: none; }

@media (min-width: 1081px) {
  .doc__toc-title { pointer-events: none; }
}

.doc__toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc__toc a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: var(--step-small);
  text-decoration: none;
  transition: background-color var(--t-feedback) ease, color var(--t-feedback) ease;
}

.doc__toc a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }

.doc__toc a[aria-current="location"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.12);
}

.doc__body {
  display: grid;
  gap: 0;
  padding: clamp(24px, 4vw, 56px);
  border-radius: 30px;
  max-width: 860px;
  color: rgba(245, 245, 243, 0.88);
}

.doc__body section {
  min-width: 0;
  overflow-wrap: anywhere;
  padding-block: 28px;
  scroll-margin-top: 110px;
}

.doc__body section:first-child { padding-top: 0; }
.doc__body section:last-child { padding-bottom: 0; }

/* Legal section numbers stay: the policies are cited by section, and the
   copy-drift fingerprint covers them. */
.doc__body .section-num { /* taste-skill-ignore: legal section numbering */
  margin-bottom: 6px;
  color: var(--ink-quiet);
  font-size: var(--step-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.doc__body h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.doc__body h3 {
  margin: 24px 0 8px;
  color: var(--ink);
  font-size: 1.1875rem;
}

.doc__body p,
.doc__body ul,
.doc__body dl { margin: 0 0 14px; }

.doc__body ul { padding-left: 1.2em; }
.doc__body li { margin-bottom: 6px; }
.doc__body li::marker { color: rgba(255, 255, 255, 0.4); }
.doc__body strong { color: var(--ink); }

.doc__body .lede {
  color: var(--ink);
  font-size: var(--step-lead);
  line-height: 1.5;
}

.doc__body .principle {
  margin: 0 0 16px;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(221, 180, 86, 0.1);
  color: var(--ink);
}

.doc__body .principle p { margin: 0; }

.doc__body .def-list dt {
  margin-top: 18px;
  color: var(--ink);
  font-weight: 700;
}

.doc__body .def-list dd { margin: 6px 0 0; }
.doc__body .def-list dd strong { display: block; margin-bottom: 2px; }

.doc__body code {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.9em;
}

/* ── Delete account ───────────────────────────────────────────────── */

.delete {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.delete__info {
  display: grid;
  gap: 30px;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 30px;
}

.delete__info h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.delete__info ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2em;
  color: var(--ink-soft);
}

.delete__info li::marker { color: rgba(255, 255, 255, 0.4); }

.delete__side {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 20px;
}

.delete-form-block {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 30px;
}

.form-desc { margin: 0; color: var(--ink-soft); }

.delete-form {
  display: grid;
  gap: 10px;
}

.delete-form label { font-weight: 600; }

html.no-js .delete-form { display: none; }

.delete-form input {
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font: inherit;
  box-shadow: inset 0 0 0 0.75px var(--glass-edge); /* taste-skill-ignore: a form field keeps its edge */
}

.delete-form input::placeholder { color: var(--ink-quiet); }
.delete-form input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

.btn--danger {
  margin-top: 6px;
  color: #fff;
  background: #c94a4a; /* taste-skill-ignore: DSColor.destructive, a delete action */
}

.btn--danger:hover { background: #d65757; }
.btn--danger[disabled] { opacity: 0.6; cursor: progress; }

.delete-error {
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(224, 85, 85, 0.16);
  color: #ffb4b4;
}

.delete-success { display: none; gap: 10px; }
.delete-success.is-visible { display: grid; }
.delete-success .icon { font-size: 2rem; color: var(--teal); }
.delete-success h2 { margin: 0; font-size: 1.5rem; }
.delete-success p { margin: 0; color: var(--ink-soft); }

.delete-noscript,
.delete-alt {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step-small);
}

.delete-alt strong,
.delete-alt em { color: var(--ink); font-style: normal; }

/* ── Delete confirmation ──────────────────────────────────────────── */

.hero--confirm {
  min-height: 100svh;
  align-items: center;
}

.confirm {
  width: min(100%, 560px);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 52px);
  border-radius: 34px;
  text-align: center;
}

.confirmation-state { display: none; justify-items: center; gap: 16px; }
.confirmation-state.is-active { display: grid; }
.no-js #state-loading { display: none !important; }

.confirmation-state h1,
.confirmation-state h2 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.confirmation-state p { margin: 0; color: var(--ink-soft); }

.confirm__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1.75rem;
}

.confirm__icon--ok { color: var(--teal); background: rgba(78, 191, 165, 0.16); }
.confirm__icon--warn { color: #ff8a8a; background: rgba(224, 85, 85, 0.16); } /* taste-skill-ignore: errorRed tint */

.confirm__spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.16); /* taste-skill-ignore: spinner track */
  border-top: 3px solid var(--gold);
  animation: spin 800ms linear infinite;
}

@keyframes spin { to { rotate: 360deg; } }

.confirm__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
}

.confirm__error { font-size: var(--step-small); }

/* ── Close ────────────────────────────────────────────────────────── */

.close .wordmark { margin-top: clamp(144px, 15vh, 152px); }
.close .footer { margin-top: clamp(32px, 5vh, 56px); }

/* ── Footer-only close ────────────────────────────────────────────── */

.close--foot { padding-top: clamp(32px, 6vh, 72px); }
.close--foot .wordmark { margin-top: 0; }

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wr__beat,
  .confirm__spinner,
  .course__line.is-drawing { animation: none; }
  .course__line.is-drawing { stroke-dasharray: none; stroke-dashoffset: 0; }
  .bars__fill,
  .pick button,
  .morning__step,
  .morning__tick,
  .watch-states__dot,
  [data-setup] .setup-row,
  [data-setup] .before { transition: none; }
  .bump-in { animation: none; }
}

/* ── Tablet ───────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .duo,
  .steps__grid,
  .delete,
  .doc { grid-template-columns: minmax(0, 1fr); }

  .duo--top > .stack,
  .delete__side { position: static; }

  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero__grid--watch,
  .hero__grid--voice { grid-template-columns: minmax(0, 1fr); }
  .watch-live { max-width: 560px; }

  /* Each step carries its own row, which ticks as the step arrives. */
  .steps__tile { display: none; }
  .step__row { display: flex; max-width: 520px; }
  .before.step__row { display: grid; }
  .step,
  .step:first-child { min-height: 0; padding-block: 40px; align-content: start; }

  .doc__toc { position: static; }
  .doc__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 4px; }
  .doc__fold { padding: 4px 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.06); }
  .doc__toc-title { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0; cursor: pointer; }
  .doc__toc-title::after { content: "+"; font-size: 1.25rem; font-weight: 500; transition: transform 300ms var(--ease-out); }
  .doc__fold[open] .doc__toc-title::after { transform: rotate(45deg); }
  .doc__fold[open] { padding-bottom: 14px; }
  .doc__body { max-width: none; }

  .paths li { grid-template-columns: 36px minmax(0, 1fr); gap: 6px 14px; }
  .paths li > span { grid-column: 2; }
  .paths li > a { grid-column: 2; justify-self: start; }
  .paths strong { font-size: 1.125rem; }
}

/* ── Phone ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .points,
  .points--two,
  .flow,
  .days,
  .plate__tile,
  .does { grid-template-columns: minmax(0, 1fr); }

  .watch-live { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; }
  .watch { width: min(280px, 76vw); }
  .watch-states { width: 100%; }
  .watch-states { gap: 12px; }
  .watch-states li { font-size: 0.875rem; }

  .pick button { min-height: 40px; font-size: 0.9375rem; }
  .bars__row { grid-template-columns: 7.5ch 1fr 4.6ch; gap: 8px; }

  .morning__step,
  .morning__start { grid-template-columns: auto 1fr 24px; gap: 10px; padding: 12px; }
  .morning__time { font-size: 0.8125rem; }

  .course__stats b { font-size: 1.5rem; }
  .course__profile svg { height: 120px; }

  .cue-line__row { grid-template-columns: 1fr; gap: 6px; padding: 18px; }
  .hero .voice__text { font-size: 1.375rem; }

  .facts-card div { grid-template-columns: 1fr; gap: 2px; }

  .rows .setup-row { font-size: 1.0625rem; }
  .rows--links .setup-row__end { display: none; }

  .doc__body { padding: 22px 18px; border-radius: 24px; }
  .contact .btn { width: 100%; }
}