/* Shared base — both programmes.

   Mobile only. Every rule here is written for a phone in one hand, often in bad
   light, sometimes at 7am on three sedatives. That is the brief: big targets,
   one idea per screen, nothing that needs aiming.

   Two accents, set per page by data-who on <html>: programme A green,
   programme B plum. Everything else is shared, which is what makes it
   affordable for both to run the same real programme.

   No names anywhere in this file, or in anything else the site serves. */

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

:root{
  --bg:#f6f7f8; --card:#ffffff; --tap:#eef0f2; --ink:#101418; --dim:#5b6670; --line:#e2e6ea;
  --go:#0a6e4f; --go2:#085a41; --on-go:#ffffff; --ok-bg:#e8f5ef;
  --warn:#8a4318; --amberbg:#fdf6ec;
  --red:#9b1c1c;  --redbg:#fdf0f0;
  --shadow-card: 0 1px 2px rgba(16,20,24,.05), 0 8px 20px -12px rgba(16,20,24,.16);
  --shadow-btn:  0 1px 2px rgba(16,20,24,.06), 0 10px 18px -8px rgba(10,110,79,.34);
  --shadow-lift: 0 18px 50px -20px rgba(16,20,24,.45);
  --mom:#8e3b70; --mom-bg:#f6eaf2; --on-mom:#ffffff;
  --ease: cubic-bezier(.16,1,.3,1);
  --pop:  cubic-bezier(.34,1.56,.64,1);
}
html[data-who="b"]{
  --go:#8e3b70; --go2:#7a3160; --on-go:#ffffff; --ok-bg:#f6eaf2;
  --shadow-btn: 0 1px 2px rgba(16,20,24,.06), 0 10px 18px -8px rgba(142,59,112,.34);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1113; --card:#161b1e; --tap:#232a2e; --ink:#eef2f4; --dim:#94a1aa; --line:#2a3237;
    --go:#2ea77c; --go2:#3fbc8e; --on-go:#08110d; --ok-bg:#12261f;
    --warn:#e0a06a; --amberbg:#2a1f14;
    --red:#f0a3a3;  --redbg:#2b1618;
    --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 26px -16px rgba(0,0,0,.7);
    --shadow-btn:  0 1px 0 rgba(255,255,255,.06) inset, 0 10px 20px -12px rgba(0,0,0,.6);
    --shadow-lift: 0 24px 60px -16px rgba(0,0,0,.85);
    --mom:#c07ab2; --mom-bg:#24172150; --on-mom:#1a0f18;
  }
  html[data-who="b"]{ --go:#c07ab2; --go2:#cd8fc0; --on-go:#1a0f18; --ok-bg:#24172190 }
}
html{color-scheme:light dark}

body{background:var(--bg);color:var(--ink);
  font:400 18px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);-webkit-font-smoothing:antialiased}
body.noscroll{overflow:hidden}
.wrap{max-width:560px;margin:0 auto;padding:20px 18px 40px}

.screen{display:none}
.screen.on{display:block;animation:screenIn .34s var(--ease) both}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Same curve, smaller travel. Used by anything that stacks in on load — the
   picker cards, the dashboard panels. Defined here rather than inline on a page
   so a page that uses it cannot silently leave its own content at opacity 0. */
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

h1{font-size:28px;line-height:1.18;font-weight:700;letter-spacing:-.025em}
h2{font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.018em}
.te{font-size:19px;color:var(--dim);margin-top:2px}
.muted{color:var(--dim);font-size:16px}

.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;margin:14px 0;
  box-shadow:var(--shadow-card)}
.card.hero{border-color:color-mix(in srgb, var(--go) 26%, var(--line))}

button{font:inherit;border:0;border-radius:15px;cursor:pointer;font-weight:650;color:inherit;
  transition:transform .12s var(--pop), background-color .15s, border-color .15s, box-shadow .15s, opacity .15s}
button:active{transform:scale(.97)}
button:focus-visible{outline:3px solid var(--go);outline-offset:2px}

.big{display:block;width:100%;padding:22px;font-size:21px;background:var(--go);color:var(--on-go);
  margin-top:16px;box-shadow:var(--shadow-btn)}
.big:active{background:var(--go2);box-shadow:none}
.big[disabled]{opacity:.55;pointer-events:none}
.big.danger-bg{background:var(--red);color:#fff;box-shadow:none}
.ghost{background:var(--card);border:2px solid var(--line);color:var(--ink);padding:16px;width:100%;
  margin-top:10px;font-size:18px}
.ghost:active{background:var(--tap)}
.ghost.danger{color:var(--red);border-color:var(--redbg)}
.row{display:flex;gap:10px}.row>*{flex:1}

.pill{display:inline-block;background:var(--ok-bg);color:var(--go);padding:5px 12px;border-radius:999px;
  font-size:13px;font-weight:750;letter-spacing:.06em}
.back{display:block;text-align:center;margin-top:26px;color:var(--dim);font-size:15px;
  text-decoration:none;padding:10px}

/* ---------------------------------------------------------- the three rungs */
/* The floor. Whatever today is, all three are on the screen and the smallest is
   never hidden — the thing whose absence meant six weeks of nothing. */
#ladder{margin-top:6px}
.rung{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 16px;margin-top:10px;
  box-shadow:var(--shadow-card)}
.rung:active{background:var(--tap)}
.rung .tick{flex:none;width:30px;height:30px;border-radius:10px;border:2px solid var(--line);
  display:grid;place-items:center;font-size:16px;color:transparent;background:transparent;
  transition:transform .3s var(--pop), background-color .2s, border-color .2s, color .2s}
.rung.on{border-color:color-mix(in srgb, var(--go) 42%, var(--line));background:var(--ok-bg)}
.rung.on .tick{background:var(--go);border-color:var(--go);color:var(--on-go);transform:scale(1.08)}
.rung span{flex:1;min-width:0}
.rung strong{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.rung small{display:block;font-size:14.5px;color:var(--dim);margin-top:1px}
.rung .chev{flex:none;color:var(--dim);font-size:24px;font-style:normal;line-height:1}
.rung.on .chev{color:var(--go)}

/* --------------------------------------------------------------- checklist */
.chk{display:flex;align-items:center;gap:14px;width:100%;background:var(--card);
  border:2px solid var(--line);border-radius:16px;padding:15px;margin-top:10px;text-align:left}
.chk b{width:30px;height:30px;border-radius:10px;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;font-size:17px;color:transparent;
  transition:transform .3s var(--pop), background-color .2s, border-color .2s, color .2s}
.chk.on{border-color:var(--go);background:var(--ok-bg)}
.chk.on b{background:var(--go);border-color:var(--go);color:var(--on-go);transform:scale(1.1)}
.chk strong{display:block;font-size:17px;font-weight:650}
.chk small{display:block;font-size:14.5px;color:var(--dim);margin-top:1px}

/* ------------------------------------------------------------- week strip */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:14px}
.week div{min-width:0;text-align:center;border:2px solid var(--line);border-radius:11px;padding:8px 1px;
  background:var(--card);transition:transform .22s var(--pop), background-color .25s, border-color .25s}
.week .d{font-size:10px;color:var(--dim);font-weight:700;letter-spacing:.02em}
.week .n{font-size:16px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.week .t{font-size:9px;font-weight:700;margin-top:3px;color:var(--dim);letter-spacing:.01em}
.week div.train{border-color:color-mix(in srgb, var(--go) 40%, var(--line));background:var(--ok-bg)}
.week div.train .t{color:var(--go)}
.week div.today{box-shadow:0 0 0 3px color-mix(in srgb, var(--go) 30%, transparent)}
.week div.done{background:var(--go);border-color:var(--go);box-shadow:var(--shadow-btn);
  animation:tickpop .42s var(--pop)}
.week div.done .d,.week div.done .n,.week div.done .t{color:var(--on-go)}

/* ----------------------------------------------------------------- totals */
.tot{display:flex;gap:10px;margin-top:14px}
.tot div{flex:1;background:var(--card);border:1px solid var(--line);border-radius:15px;
  padding:14px 8px;text-align:center;box-shadow:var(--shadow-card)}
.tot b{display:block;font-size:26px;letter-spacing:-.02em}
.tot span{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.tot div.streak{background:var(--ok-bg);border-color:color-mix(in srgb, var(--go) 36%, var(--line))}
.tot div.streak b{color:var(--go)}

/* ------------------------------------------------------------ the exercise */
.hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hd h1{font-size:26px}
.iconbtn{flex:none;width:46px;height:46px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);font-size:20px;color:var(--ink);box-shadow:var(--shadow-card)}
.iconbtn:active{background:var(--tap)}

.exrx{font-size:31px;font-weight:700;letter-spacing:-.02em;margin-top:14px}
.exload{font-size:19px;color:var(--dim);margin-top:2px}
.excue{font-size:18px;line-height:1.5;margin-top:18px;padding:16px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card)}
.watch{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px;
  padding:15px;border-radius:15px;background:var(--tap);border:1px solid var(--line);
  color:var(--ink);font-size:16px;font-weight:650}
.watch:active{background:var(--line)}
.watch i{font-style:normal;color:#c4302b;font-size:15px}

/* Both in-session screens fill the viewport and push their buttons to the
   bottom, so Done lands under his thumb instead of floating mid-screen. */
#s-ex.on,#s-rest.on{display:flex;flex-direction:column;min-height:calc(100dvh - 62px)}
.grow{flex:1;min-height:18px}
.bar2{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin:16px 0 4px}
.bar2 i{display:block;height:100%;background:var(--go);transition:width .4s var(--ease)}

/* ------------------------------------------------------------- rest timer */
.ringwrap{position:relative;width:200px;height:200px;margin:12px auto 0}
.ringwrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.ringwrap circle{fill:none;stroke-width:8;stroke-linecap:round}
.ringwrap .track{stroke:var(--line)}
.ringwrap .prog{stroke:var(--go);stroke-dasharray:283;transition:stroke-dashoffset .3s linear}
.ringwrap .num{position:absolute;inset:0;display:grid;place-items:center;
  font-size:64px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* -------------------------------------------------------------- the sheet */
/* The demo plays here, over the app. It never navigates away, because the one
   thing worse than no demo is a demo that drops him into a YouTube feed. */
.vsheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none}
.vsheet .vback{position:absolute;inset:0;background:rgba(6,9,11,.62);opacity:0;
  transition:opacity .24s var(--ease);backdrop-filter:blur(2px)}
.vsheet .vbox{position:relative;width:100%;max-width:560px;background:var(--card);
  border-radius:22px 22px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lift);transform:translateY(102%);
  transition:transform .3s var(--ease)}
.vsheet.on{pointer-events:auto}
.vsheet.on .vback{opacity:1}
.vsheet.on .vbox{transform:translateY(0)}
.vhead{display:flex;align-items:center;gap:10px;padding:2px 2px 12px}
.vhead p{flex:1;font-size:17px;font-weight:700;letter-spacing:-.01em}
.vclose{flex:none;width:40px;height:40px;border-radius:12px;background:var(--tap);font-size:24px;line-height:1}
.vframe{position:relative;aspect-ratio:9/16;max-height:62vh;margin:0 auto;border-radius:14px;
  overflow:hidden;background:#000}
/* Shorts are vertical. A 16/9 frame letterboxes them into a thin strip, so the
   frame is portrait and capped by viewport height rather than width, which
   keeps the Done button reachable on a small phone. */
@media (min-aspect-ratio: 1/1){ .vframe{aspect-ratio:9/16;max-height:54vh} }
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.voff{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;
  color:var(--dim);font-size:15px;background:var(--tap)}
.vdone{width:100%;margin-top:12px;padding:16px;background:var(--go);color:var(--on-go);font-size:17px}

/* --------------------------------------------------------------- history */
.lbl{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-top:26px}
.strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:8px}
.strip i{min-width:0;aspect-ratio:1;border-radius:7px;background:var(--line);display:block}
.strip i.s{background:var(--go)}
.strip i.w{background:var(--ok-bg);box-shadow:inset 0 0 0 2px var(--go)}
.strip i.c{background:color-mix(in srgb, var(--go) 30%, var(--line))}
.hist{list-style:none;margin-top:8px}
.hist li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.hist li:last-child{border:0}
.hist .d{flex:1;min-width:0}
.hist .d b{display:block;font-size:16px}
.hist .d small{display:block;color:var(--dim);font-size:14px;margin-top:1px}
.hist .n{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;color:var(--go)}
.sum{list-style:none}
.sum li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:16px}
.sum li:last-child{border:0}
.sum span{color:var(--dim);flex:none;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ the stepper */
.step{display:flex;align-items:center;justify-content:space-between;background:var(--card);
  border:2px solid var(--line);border-radius:16px;padding:8px;margin-top:6px}
.step button{width:60px;height:60px;font-size:30px;background:var(--tap);color:var(--ink)}
.step .val{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:transform .2s var(--pop)}
.step .val.bump{transform:scale(1.18)}
label{display:block;font-size:13px;color:var(--dim);margin:18px 0 6px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.camera{display:block;width:100%;padding:24px;margin-top:12px;border-radius:17px;background:var(--card);
  border:2px dashed color-mix(in srgb, var(--go) 40%, var(--line));color:var(--go);
  font-size:18px;font-weight:700;text-align:center}
.camera:active{background:var(--ok-bg)}
.shot{width:100%;border-radius:15px;margin-top:12px;display:block;border:1px solid var(--line);
  box-shadow:var(--shadow-card);animation:screenIn .3s var(--ease) both}

/* -------------------------------------------------------------- finishing */
.done{text-align:center;padding:34px 0 10px}
.done .tick{font-size:62px;display:inline-block;animation:tickpop .55s var(--pop) both}
@keyframes tickpop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

.prog{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:14px 0 6px}
.prog i{display:block;height:100%;background:var(--go);transition:width .4s var(--ease)}

hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.confirm{background:var(--redbg);border:1px solid var(--red);border-radius:16px;padding:16px;margin-top:10px}
.confirm p{font-size:16px;line-height:1.5;color:var(--red);font-weight:600}
.alert{position:sticky;top:0;z-index:20;background:var(--redbg);color:var(--red);
  border:1px solid var(--red);border-radius:13px;padding:12px 14px;margin-bottom:14px;
  font-size:15px;font-weight:600;line-height:1.4}
.warn{background:var(--amberbg);border:1px solid #f0d5c6;color:var(--warn);border-radius:13px;
  padding:14px;font-size:16px;margin-top:14px;font-weight:600}

/* [hidden] must beat any display rule set by a class */
[hidden]{display:none !important}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .vsheet .vbox{transform:none}
}


/* ---------------------------------------------------- the nickname prompt */
/* Offered once per phone. Dashed rather than solid so it reads as optional,
   which it is: the app works identically without it. */
.namebox{border-style:dashed;border-color:color-mix(in srgb, var(--go) 36%, var(--line));
  background:transparent;animation:screenIn .4s var(--ease) both}
.namebox input{margin-top:0}

/* ------------------------------------------------------------ refinements */
/* The three rungs are the floor and should read as one group, so the gap
   inside the group is tighter than the gap to whatever follows it. */
#ladder .rung + .rung{margin-top:8px}
#ladder{margin-bottom:4px}

/* A heading directly after a card was colliding with its shadow. */
.lbl + #ladder{margin-top:10px}

/* Numbers that change should not shift the layout while they animate. */
.tot b,.timer,.ringwrap .num{font-variant-numeric:tabular-nums}
.tot b{font-variant-numeric:proportional-nums}   /* …except the big standalone ones */

/* Long exercise names were wrapping mid-word on a narrow phone. */
#exname{overflow-wrap:break-word;hyphens:auto}

/* Give the in-session screens a floor so a one-line cue does not leave the
   buttons floating halfway up. */
#s-ex.on,#s-rest.on{padding-bottom:8px}