/* X3 Momentum -- styles lifted from the approved redesign mockup
   (scratchpad/x3-redesign.html) and adapted to render inside <main id="app">
   instead of the mockup's .phone/.scr gallery frame. The mockup's .scr
   screen styling (background, padding, flex column) is applied to #app so a
   single screen fills the viewport, mobile-first. */

:root {
  --fire: #FF6B35;
  --cta: #C2410C;
  --ember: #D32F2F;
  --flame: #FFC107;
  --ink: #1b1510;
  --mut: #5f544c;
  --line: #e7dcd0;
  --paper: #ffffff;
  --g-bg: #ece7e2;
  --g-ink: #241c18;
  --g-mut: #5f544c;
}
@media (prefers-color-scheme: dark) {
  :root { --g-bg: #161311; --g-ink: #f2ebe6; --g-mut: #a99c92; }
}
:root[data-theme="dark"] { --g-bg: #161311; --g-ink: #f2ebe6; --g-mut: #a99c92; }
:root[data-theme="light"] { --g-bg: #ece7e2; --g-ink: #241c18; --g-mut: #5f544c; }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--g-bg);
  color: var(--g-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.4;
}
.tab { font-variant-numeric: tabular-nums; }

/* Button reset: fragments carry the mockup's control classes (.start,
   .beginbtn, .opt, .save, .home, .band, .cont, step/minus/plus, up/down)
   on real <button> elements, not the mockup's plain <div>s. Strip default
   button chrome so the class styling below renders like the mockup. */
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  text-align: inherit;
  padding: 0;
  margin: 0;
}

:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

/* ---- App shell: one screen, mobile-first, fills the viewport ---- */
#app {
  max-width: 480px;
  min-height: 100vh;
  overflow-x: hidden;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.hdr { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); flex: none; }
.hdr .wm { font-size: 20px; font-weight: 900; }
.hdr .wm b { color: var(--fire); }
.hdr .nav-group { display: flex; gap: 8px; align-items: center; }
.hdr .nav { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; }
.hdr .nav svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 2; fill: none; }
.hdr .home { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; }
.hdr .home svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 2; fill: none; }

/* Body wrapper shared by home, dashboard and settings screens; the
   exercise screen's top-level <form class="exercise"> plays the same role. */
.body, .exercise { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---- HOME ---- */
.home-body { padding: 20px; gap: 16px; }
.todaylbl { font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.todayval { font-size: 30px; font-weight: 900; }
.todayval .wk { display: block; font-size: 15px; font-weight: 700; color: var(--mut); text-transform: none; margin-top: 2px; }
.restmsg { font-size: 20px; font-weight: 700; color: var(--mut); line-height: 1.45; }
.exlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.exlist li { border-bottom: 1px solid #f0e8e0; }
.exinfo summary { font-size: 19px; font-weight: 700; padding: 11px 0; display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; }
.exinfo summary::-webkit-details-marker { display: none; }
.exinfo summary b { color: var(--fire); width: 18px; }
.exinfo p { margin: 0 0 12px; font-size: 15px; font-weight: 400; color: var(--mut, #5f544c); }
.cont { width: 100%; background: #fff4ec; border: 2px solid var(--cta); border-radius: 14px; padding: 15px 16px; min-height: 44px; }
.cont .t { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cta); }
.cont .s { font-size: 19px; font-weight: 800; margin-top: 3px; }
.start { width: 100%; margin-top: auto; padding: 22px; border-radius: 15px; font-size: 23px; font-weight: 900; text-align: center; background: var(--cta); color: #fff; min-height: 44px; }

/* ---- EXERCISE ---- */
.ex-top { padding: 13px 16px 0; }
.ex-prog { font-size: 18px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.ex-name { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 5px 0 0; }
.info[open] { flex-basis: 100%; }
.ex-name h2 { font-size: 29px; font-weight: 800; letter-spacing: -.02em; margin: 0; }

/* .info is a <details><summary>i</summary><p>guide</p></details> in the
   live markup; style the summary as the mockup's round "i" badge and the
   guide text that appears underneath when expanded. */
.info { flex: none; }
.info summary {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--cta); color: var(--cta);
  font-weight: 800; font-size: 18px; display: grid; place-items: center;
  font-family: Georgia, serif; font-style: italic; list-style: none; cursor: pointer;
}
.info summary::-webkit-details-marker { display: none; }
.info p { margin: 8px 0 0; font-size: 15px; color: var(--mut); overflow-wrap: anywhere; }

/* ---- band chip / dropdown ---- */
.band {
  width: calc(100% - 32px); margin: 12px 16px 0; display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-radius: 13px; font-size: 23px; font-weight: 800; border: 2px solid rgba(0, 0, 0, .15);
  min-height: 44px;
}
.bd-lorange { background: #F5A876; color: #141a20; }
.bd-white { background: #FFFFFF; color: #141a20; }
.bd-gray { background: #9AA2AB; color: #141a20; }
.bd-dgray { background: #4A4F56; color: #ffffff; }
.bd-black { background: #15130F; color: #ffffff; }
.bd-orange { background: #FF6B35; color: #141a20; }

.ddlist { margin: 6px 16px 0; display: flex; flex-direction: column; gap: 6px; border-radius: 13px; overflow: hidden; }
.opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: 17px; font-weight: 700; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .15);
  min-height: 44px;
}
.opt .chk { font-weight: 900; }
.opt.sel { border-color: var(--cta); border-width: 2px; }

/* stage: upper SLOT (countdown / catch breath / begin button), cadence below */
.stage { flex: 1; margin: 12px 16px 4px; display: flex; flex-direction: column; }
.slot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.beginbtn { width: 100%; align-self: stretch; padding: 18px; border-radius: 13px; border: 2px solid var(--cta); background: #fff; color: var(--cta); font-size: 23px; font-weight: 800; text-align: center; min-height: 44px; }
.cd { font-size: 132px; font-weight: 900; color: var(--cta); line-height: .78; letter-spacing: -.05em; }
.cb-l { font-size: 20px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.cb-t { font-size: 80px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; line-height: .85; }
.cadhold { padding: 10px 0 4px; }
.cad { position: relative; height: 88px; }
/* The comet: the play button's ball pulled away and stretched. One shape at
   full button height, anchored at the button's LEFT edge and layered under
   it, so it emerges from behind the button with no visible left edge. The
   right end reads as a solid red ball; leftward it blends through opaque
   orange back into the button. Extends 2000 ms, contracts 2000 ms, matching
   the cadence tone phases. */
.cad .comet {
  position: absolute; left: 0; top: 0; height: 88px; width: 88px; border-radius: 999px; z-index: 1;
  background: linear-gradient(90deg, #E8763A 0%, #F07E33 35%, #DF5A2B 70%, #D32F2F 92%);
}
.cad .play {
  position: absolute; left: 0; top: 0; width: 88px; height: 88px; border-radius: 50%; background: var(--fire);
  display: grid; place-items: center; z-index: 3; box-shadow: 0 4px 14px rgba(255, 107, 53, .4);
}
.cad .play svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }
@keyframes swc { from { width: 88px; } to { width: 100%; } }
/* The sweep runs only while the cadence is playing, so the animation and
   the tone start and stop together. */
.cad.playing .comet { animation: swc 2s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .cad .comet { animation: none; }
  .cad.playing .comet { width: 65%; }
}

/* ---- entry: prefilled last numbers ---- */
.entry { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 9px; }
.entry .er { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.entry .el { flex: none; font-size: 21px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
.step { display: flex; align-items: center; gap: 10px; flex: none; }
.step button { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 11px; border: 2px solid #e0d5ca; background: #fff; font-size: 30px; font-weight: 700; line-height: 1; }
.step .v {
  width: 74px; flex: none; font-size: 42px; font-weight: 800; text-align: center;
  border: none; background: transparent; color: var(--ink); font-family: inherit; -moz-appearance: textfield;
}
.step .v::-webkit-outer-spin-button,
.step .v::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.save { width: 100%; margin-top: 6px; background: var(--cta); color: #fff; border: none; border-radius: 14px; padding: 17px; font-size: 23px; font-weight: 800; text-align: center; min-height: 44px; }

/* ---- dashboard ---- */
.dash { padding: 16px; gap: 14px; }
.dash .dt { font-size: 17px; color: var(--mut); font-weight: 700; }
.dash .dd { font-size: 28px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; color: var(--fire); }
.dash table { width: 100%; border-collapse: collapse; font-size: 19px; }
.dash thead td { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 800; padding-bottom: 8px; }
.dash td { padding: 14px 0; border-bottom: 1px solid #f0e8e0; }
.dash td.n { font-weight: 800; }
.dash td.b { text-align: center; width: 76px; }
.dash td.num { text-align: right; width: 54px; font-variant-numeric: tabular-nums; font-weight: 800; }
.chip { display: inline-block; padding: 4px 12px; border-radius: 8px; font-size: 16px; font-weight: 800; }
.c-bk { background: #15130f; color: #fff; }
.c-gy { background: #9aa2ab; color: #141a20; }
.c-wh { background: #fff; color: #1b1510; border: 1px solid #cbb8a6; }
.c-lor { background: #F9C08A; color: #141a20; }
.c-dgy { background: #454b53; color: #ffffff; }
.c-or { background: #E8590C; color: #141a20; }
.tomorrow { margin-top: auto; padding: 16px; border-radius: 13px; background: #faf4ef; border: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.tomorrow .tl { font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.tomorrow .tv { font-size: 22px; font-weight: 900; color: var(--cta); }

/* ---- settings ---- */
.settings { padding: 20px; gap: 14px; }
.settings h2 { font-size: 26px; font-weight: 800; margin: 0; }
.resetwarn { font-size: 18px; font-weight: 600; color: var(--mut); line-height: 1.5; margin: 0; }
.danger-label { color: var(--ember); margin-top: 8px; }
.reset { width: 100%; padding: 18px; border-radius: 14px; font-size: 20px; font-weight: 800; text-align: center; border: 2px solid var(--ember); color: var(--ember); background: #fff; min-height: 44px; }
.reset.danger { background: var(--ember); color: #fff; border-color: var(--ember); }
.start.ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); margin-top: 10px; }
.zone-label { font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-bottom: 4px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0e8e0; }
.setlabel { font-size: 18px; font-weight: 700; }
.setrow input[type="checkbox"] { width: 24px; height: 24px; }
.setrow input[type="number"] { width: 80px; font-size: 18px; font-weight: 700; padding: 8px; border-radius: 8px; border: 2px solid #e0d5ca; font-family: inherit; }
.orderlist { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.orderitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; }
.oname { font-size: 16px; font-weight: 700; flex: 1; }
.orderitem button {
  width: 40px; height: 40px; border-radius: 8px; border: 2px solid #e0d5ca; background: #fff;
  font-size: 15px; display: grid; place-items: center;
}
.orderitem button[disabled] { opacity: .35; cursor: default; }

/* Schedule notices and in-session progress chips (Pass A) */
.notice { background: #FFF4EC; border-left: 4px solid #DE4E1C; color: #141a20; padding: 12px 14px; border-radius: 6px; font-size: 15px; margin: 0; }
.pchips { display: inline-flex; gap: 8px; margin-left: 12px; vertical-align: middle; }
.pchip { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d8d2cb; background: #fff; color: #6a6257; font-size: 15px; }
.pchip.cur { background: #DE4E1C; border-color: #DE4E1C; color: #fff; font-weight: 700; }
.pchip.done { background: #FFF4EC; border-color: #DE4E1C; color: #141a20; cursor: pointer; }
.pchip.done:focus-visible { outline: 2px solid #141a20; outline-offset: 2px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #141a20; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 15px; z-index: 50; max-width: 90vw; }

/* Progress page (rebuilt: Lean Column, no cards, full/partial kept separate) */
.stats { padding: 16px; gap: 6px; overflow-y: auto; }
.stats h2 { font-size: 26px; font-weight: 900; margin: 0; }
.statshint { color: var(--mut); font-size: 15px; margin: 0 0 6px; }
.statsempty { color: var(--mut); font-size: 17px; }
.exstat { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid #f0e8e0; }
.exstat.empty { padding: 10px 0; }
.es-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.es-top h3 { font-size: 20px; font-weight: 900; margin: 0; }
.es-none { color: var(--mut); font-size: 15px; }
.es-latest { margin: 0; font-size: 17px; }
.es-latest b { font-weight: 800; }
.es-trend { font-size: 14px; font-weight: 800; padding: 2px 8px; border-radius: 6px; margin-left: 6px; }
.es-trend.up { background: #E8F4EA; color: #1E6B2F; }
.es-trend.down { background: #FDEBEC; color: #B3261E; }
.es-trend.steady { background: #F1EDE8; color: #6a6257; }
.spark { width: 100%; height: 44px; display: block; }
.estable { width: 100%; border-collapse: collapse; font-size: 16px; }
.estable thead td { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 800; padding-bottom: 4px; }
.estable td { padding: 7px 0; border-bottom: 1px solid #f7f1ea; }
.estable td.sd { color: var(--mut); font-weight: 700; }
.estable td.sb { text-align: center; width: 96px; }
.estable td.snum { text-align: right; width: 64px; font-variant-numeric: tabular-nums; font-weight: 800; }

/* Onboarding card, how-to page, practice screen (Pass C) */
.howtocard { border: 1px solid #f0e8e0; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.hc-t { font-size: 17px; font-weight: 900; }
.hc-p { margin: 0; color: var(--mut); font-size: 15px; }
.hc-row { display: flex; gap: 10px; }
.ghostbtn { flex: 1; min-height: 44px; border: 1px solid #d8d2cb; border-radius: 8px; background: #fff; font-size: 15px; font-weight: 800; color: #141a20; cursor: pointer; }
.ghostbtn:focus-visible { outline: 2px solid #141a20; outline-offset: 2px; }
.howto { padding: 16px; gap: 14px; overflow-y: auto; }
.howto h2 { font-size: 26px; font-weight: 900; margin: 0; }
.howto h3 { font-size: 18px; font-weight: 900; margin: 0 0 4px; }
.howto section { border-bottom: 1px solid #f0e8e0; padding-bottom: 12px; }
.howto p { margin: 0; font-size: 16px; line-height: 1.45; }
.notice.advice { margin-top: 8px; }
.practice .ex-prog { color: var(--mut); }

/* ---- Pass D: large-print grammar (spec 2026-08-19) ----
   Type floor 16px, button text 30px+, 64px steppers, green = go,
   orange = effort, one full-width control per row, even vertical spread. */
:root { --go: #3FA35C; --save: #DE4E1C; }

.hdr .wm { font-size: 30px; }
.hdr .nav, .hdr .home { width: 52px; height: 52px; }
.hdr .nav svg, .hdr .home svg { width: 26px; height: 26px; }

.todaylbl { font-size: 20px; }
.todayval { font-size: 52px; line-height: 1.05; }
.todayval .wk { font-size: 22px; }
.exinfo summary { font-size: 22px; padding: 14px 0; }
.exinfo summary b { width: 22px; }
.exinfo p { font-size: 17px; }
.restmsg { font-size: 22px; }
.start { background: var(--go); font-size: 30px; padding: 24px; border-radius: 14px; }
.start.ghost { background: #fff; color: var(--ink); font-size: 20px; padding: 18px; }
.cont .t { font-size: 16px; }
.cont .s { font-size: 21px; }

.ex-prog { font-size: 24px; }
.ex-name h2 { font-size: 36px; }
.info summary { width: 40px; height: 40px; font-size: 20px; }
.info p { font-size: 17px; }
.band { font-size: 30px; padding: 18px 16px; border-radius: 14px; }
.opt { font-size: 20px; padding: 16px; }
.beginbtn { background: var(--go); border: 0; color: #fff; font-size: 30px; padding: 20px; border-radius: 14px; font-weight: 900; }
.lasttime { margin: 0; font-size: 18px; font-weight: 700; color: var(--mut); text-align: center; }
.entry .el { font-size: 26px; }
.step button { width: 64px; height: 64px; font-size: 40px; border-radius: 14px; }
.step .v { font-size: 46px; width: 84px; }
.save { background: var(--save); font-size: 34px; padding: 20px; border-radius: 14px; }
.notice { font-size: 18px; padding: 14px 16px; }
.cb-l { font-size: 24px; }
.pchips i { }

/* Dashboard rows (row grammar shared with Progress) */
.dash-eyebrow { font-size: 20px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.dash-hi { font-size: 40px; font-weight: 900; line-height: 1.1; }
.dash .dt { font-size: 20px; }
.drows { display: flex; flex-direction: column; }
.drow { display: flex; align-items: center; gap: 10px; padding: 13px 2px; border-bottom: 2px solid #f0e8e0; }
.drow .dn { flex: 1; font-size: 20px; font-weight: 800; }
.dnum { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dnum i { font-style: normal; font-size: 15px; font-weight: 700; opacity: .55; margin-left: 3px; }
.chip { font-size: 16px; padding: 5px 12px; }
.tomorrow { border: 2px solid #DCD3C6; border-radius: 14px; padding: 18px 16px; }
.tomorrow .tl { font-size: 20px; }
.tomorrow .tv { font-size: 26px; color: var(--ink); }

/* Progress in the same grammar */
.stats h2 { font-size: 34px; }
.statshint { font-size: 18px; }
.statsempty { font-size: 19px; }
.exstat { border-bottom: 3px solid #EFE7DB; padding: 18px 0; gap: 10px; }
.es-top h3 { font-size: 26px; }
.es-none { font-size: 17px; }
.es-latest { font-size: 19px; }
.es-trend { font-size: 15px; }
.spark { height: 54px; }
.hrows { display: flex; flex-direction: column; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 2px solid #f7f1ea; }
.hrow:last-child { border-bottom: 0; }
.hrow .hday { flex: 1; font-size: 19px; font-weight: 800; color: var(--mut); }

/* Settings / how-to / onboarding sizes */
.settings h2 { font-size: 34px; }
.setlabel { font-size: 20px; }
.setrow input[type="checkbox"] { width: 28px; height: 28px; }
.zone-label { font-size: 16px; }
.oname { font-size: 18px; }
.orderitem button { width: 48px; height: 48px; }
.howto h2 { font-size: 34px; }
.howto h3 { font-size: 22px; }
.howto p { font-size: 18px; }
.hc-t { font-size: 19px; }
.hc-p { font-size: 17px; }
.ghostbtn { font-size: 17px; min-height: 52px; }