/* The approved prototype, `prototype-in-gym-screen.html`, is the visual source of truth.
   Colours, type scale and spacing come from it unchanged. The white switcher bar of the
   prototype was scaffolding, so its `--bar` reserve is gone and the card gets that room. */
:root {
  --bg:#0f1115; --card:#171a21; --card2:#1e222b; --line:#2a2f3a;
  --fg:#e8eaed; --muted:#9aa0a8; --go:#4ade80; --rest:#fbbf24; --skip:#f87171;
  --gap:clamp(5px,1.2dvh,13px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* `overscroll-behavior` stops the pull that reloads the page. A thumb that drags the card
   in the gym must never throw the screen away and start it again. */
/* The fonts ship with the shell, so the phone draws them with no network. Four families,
   one job each. Space Grotesk sets the words: the setup, the buttons, the sentences.
   Archivo sets the names: the Exercise, the Routine, the next machine. It is one variable
   file (every weight in one font), and the names take its 800.
   JetBrains Mono Bold sets every number: the weight, the count, the chips and the clock
   of the Rest, so a digit that changes never moves its neighbours. Space Mono sets the
   small labels in capitals, so a label reads as a label and never as a value. `swap`
   shows the system font while a font still loads, and never a blank card. */
@font-face { font-family:"Space Grotesk"; font-weight:400; font-display:swap;
  src:url(/fonts/SpaceGrotesk-Regular.ttf); }
@font-face { font-family:"Space Grotesk"; font-weight:500; font-display:swap;
  src:url(/fonts/SpaceGrotesk-Medium.ttf); }
@font-face { font-family:"Space Grotesk"; font-weight:700; font-display:swap;
  src:url(/fonts/SpaceGrotesk-Bold.ttf); }
@font-face { font-family:"Archivo"; font-weight:100 900; font-stretch:62% 125%;
  font-display:swap; src:url(/fonts/Archivo.ttf); }
@font-face { font-family:"JetBrains Mono"; font-weight:700; font-display:swap;
  src:url(/fonts/JetBrainsMono-Bold.ttf); }
@font-face { font-family:"Space Mono"; font-weight:400; font-display:swap;
  src:url(/fonts/SpaceMono-Regular.ttf); }
html,body { margin:0; background:#06070a; color:var(--fg); overscroll-behavior:none;
  font:16px/1.4 "Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.a-name, .a-prep, .a-routine b, .a-pick b, .a-top > b { font-family:"Archivo",sans-serif; font-weight:800; }
.a-dial .n, .a-sets > *, .a-thr div b, .a-chg, .a-win, .a-sum .wt {
  font-family:"JetBrains Mono",monospace; }
.a-lbl, .a-prev, .a-next, .a-left, .muted.small, .a-ring .t span, .a-thr div,
.a-routine .muted, .a-mant { font-family:"Space Mono",monospace; text-transform:uppercase;
  letter-spacing:.06em; }
/* The screen is one column of a fixed height. Nothing scrolls the page. */
#phone { max-width:430px; height:100dvh; margin:0 auto; background:var(--bg);
  position:relative; overflow:hidden; display:flex; flex-direction:column; }
#app { flex:1; min-height:0; display:flex; flex-direction:column; }
/* The tutorial. `.a-slot` keeps its room in the card, 16:9 with the margins of the body,
   and `#video` floats over the slot. `hidden` keeps its display rule, so the frame takes
   no room while no Exercise has a video. */
.a-slot { flex:0 0 auto; aspect-ratio:16/9; margin:0; }
/* The player is taller than the box by `--crop` at each end. YouTube letterboxes the video
   in the middle and draws its title bar and its control bar in the black bands, so the box
   clips both bars and keeps the whole image. Tune `--crop` to the height of the bars. */
#video-box { --crop:56px; position:absolute; overflow:hidden; background:#000; }
#video { position:absolute; left:0; top:calc(-1 * var(--crop)); width:100%;
  height:calc(100% + 2 * var(--crop)); border:0; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.muted { color:var(--muted); }
.setup { color:var(--muted); font-size:14px; }

/* three parts: the head holds still at the top, the body takes the room that is left,
   and the foot keeps the action on the thumb. The body never hides under the foot. */
.a-wrap { flex:1; min-height:0; display:flex; flex-direction:column; }
.a-top { flex:0 0 auto; display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--line); }
.a-body { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--gap);
  padding:var(--gap) 18px; text-align:center; }
.a-foot { flex:0 0 auto; padding:8px 16px calc(8px + env(safe-area-inset-bottom)); }
.a-lbl { font-size:11px; color:var(--muted); }
.a-name { font-size:clamp(19px,3.1dvh,26px); font-weight:700; margin:0; line-height:1.15; }
.a-setup { margin:0; font-size:clamp(12px,1.7dvh,14px); }
.a-w { font:800 clamp(46px,8.6dvh,72px)/1 "JetBrains Mono",monospace; letter-spacing:-2px; }
.a-go { display:block; width:100%; background:var(--go); color:#06210f;
  font-size:clamp(16px,2.2dvh,18px); font-weight:800; padding:clamp(13px,2.1dvh,18px) 12px;
  border-radius:16px; }
.a-go.rest { background:var(--rest); color:#241a00; }
.small { font-size:11px; }

/* The Rest ring stands where the weight and the dial stand, so nothing jumps under the
   thumb. `.sm` is the ring of the Rest that closes an Exercise, which carries two cards. */
.a-ring { --r:clamp(140px,25dvh,200px); position:relative; flex:0 0 auto; margin:0;
  width:var(--r); height:var(--r); }
.a-ring.sm { --r:clamp(96px,15dvh,132px); }
.a-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.a-ring .tr { stroke:var(--card2); }
.a-ring .fg { stroke:var(--rest); stroke-linecap:round; }
.a-ring .t { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; }
.a-ring .t b { font:800 calc(var(--r) * .26)/1 "JetBrains Mono",monospace; color:var(--rest);
  letter-spacing:-2px; }
.a-ring .t span { font-size:clamp(11px,calc(var(--r) * .075),14px); }
/* one tap adds 30 seconds, and it sits away from the button that ends the Rest */
.a-add { padding:10px 20px; font-size:15px; border-radius:999px; background:var(--card2); }

/* the two cards under the ring: what the Exercise just decided, and the next machine */
.a-card { background:var(--card); border-radius:16px; padding:10px 14px; margin:0; width:100%;
  text-align:left; border-left:4px solid var(--line); }
.a-card.up { border-left-color:var(--go); } .a-card.down { border-left-color:var(--skip); }
.a-card.hold { border-left-color:var(--rest); }
.a-res { font-size:17px; margin-top:3px; }
.a-prep { font-size:19px; font-weight:700; margin:3px 0; }
.a-chg { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:clamp(19px,2.8dvh,24px); font-weight:800; margin:3px 0 1px; }
.a-chg .ar { color:var(--muted); font-weight:400; }
.a-chg .old { font-size:16px; font-weight:600; color:var(--muted); }

/* the rep dial: a big − and a big + around the count, so a sweaty hand still hits them */
.a-dial { display:flex; align-items:center; justify-content:center; gap:22px; margin:0; }
.a-dial button { width:clamp(50px,7.3dvh,64px); height:clamp(50px,7.3dvh,64px);
  border-radius:50%; background:var(--card2); font-size:clamp(24px,3.6dvh,30px); font-weight:700; }
/* a hold of three digits must not clip, so the number grows and the buttons move out */
.a-dial .n { font-size:clamp(40px,6.4dvh,56px); font-weight:800; min-width:96px; }

/* the Routine opens the chooser, so the whole head reads as one tap target */
.a-routine { display:flex; align-items:center; gap:6px; padding:0; }

/* one chip per set. A logged chip is a button that opens its correction, and an open dot
   is a span, so only a set that exists takes a tap. */
.a-sets { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin:0; }
.a-sets > * { min-width:40px; padding:6px 6px; border-radius:9px; background:var(--card2);
  font-size:15px; font-weight:700; }
.a-sets button:active { background:var(--line); }
.a-sets .up { color:var(--go); } .a-sets .down { color:var(--skip); }
.a-sets .hold { color:var(--rest); }
/* an open set is an outlined square, so the sets still to do read at a glance */
.a-sets .todo { color:var(--muted); font-weight:400; background:none; border:2px solid var(--muted); }
/* the result card reads left to right, so its chips start at the left edge and not centred */
.a-card .a-sets { justify-content:flex-start; margin-top:5px; }

/* the three Progression thresholds, and the one the dial hits lights up */
.a-thr { display:flex; gap:6px; margin:0; width:100%; }
.a-thr div { flex:1; padding:6px 2px 7px; border-radius:9px; background:var(--card2);
  font-size:11px; color:var(--muted); line-height:1.3; }
.a-thr div b { display:block; font-size:14px; color:var(--fg); text-transform:none; letter-spacing:0; }
.a-thr div.on { color:#0b0d10; } .a-thr div.on b { color:#0b0d10; }
.a-thr div.on.d { background:var(--skip); } .a-thr div.on.m { background:var(--rest); }
.a-thr div.on.u { background:var(--go); }

.a-sheet { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:40; display:flex;
  align-items:flex-end; justify-content:center; }
.a-sheet .in { width:min(430px,100vw); background:var(--card); border-radius:20px 20px 0 0;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  max-height:calc(100dvh - 20px); overflow:auto; }
.a-sheet .row { display:block; width:100%; text-align:left; padding:13px 22px; font-size:16px; }
.a-sheet .row:active { background:var(--card2); }

/* the ⋯ opens the sheet that lists the Routine */
.a-dots { font-size:24px; line-height:1; padding:0 8px; color:var(--muted); }
/* the next Exercise of the Routine, over the thumb button, so a Jump reads as a choice */
.a-next { font-size:11px; color:var(--muted); text-align:center; padding-bottom:7px; }

/* one row per Exercise: the wide part jumps and writes nothing, the narrow button skips */
.a-left { padding:4px 22px 8px; font-size:11px; color:var(--muted); }
.a-sheet .plan { display:flex; align-items:center; }
.a-sheet .plan.here { background:var(--card2); }
.a-sheet .plan .row { flex:1; min-width:0; }
.a-sheet .st { display:inline-block; width:20px; color:var(--muted); }
.a-sheet .st.ok { color:var(--go); } .a-sheet .st.no { color:var(--skip); }
.a-sheet .sk { flex:0 0 auto; padding:13px 22px; font-size:17px; color:var(--skip); }
.a-sheet .sk.on { color:var(--go); }

/* one line of the previous Session, so the target is on the card before the set */
.a-prev { font-size:11px; color:var(--muted); }
/* the Maintain Override: a switch on the card, not a menu item. The thresholds dim while
   it holds, because the reps still count and the weight still does not move. */
.a-mant { flex:0 0 auto; padding:7px 16px; font-size:11px; border-radius:999px;
  background:var(--card2); color:var(--muted); }
.a-mant.on { background:var(--rest); color:#241a00; font-weight:700; }
.a-thr.held { opacity:.4; }
/* the Finish, at the foot of the sheet that lists the Routine */
.a-fin { display:block; width:100%; text-align:center; margin-top:6px; padding:15px 22px;
  font-size:16px; font-weight:700; color:var(--go); border-top:1px solid var(--line); }
.a-fin:active { background:var(--card2); }
/* the Cancel, under the Finish, in the colour of the Skip: it throws the Session away */
.a-fin.cancel { color:var(--skip); }
/* the welcome: the cards share the body evenly, so four Activities fill the screen with no
   dead room at the top. Each card centres its three parts: the Activity name, the row that
   holds the Routine pill and the last Session, and the Start. The pill has the fill of a
   control and a chevron, so the eye reads it as a chooser before the thumb tries it. */
.a-body.wel { justify-content:stretch; padding:var(--gap) 16px; }
.a-body.wel .a-card { flex:1 0 auto; display:flex; flex-direction:column;
  justify-content:center; gap:clamp(8px,1.4dvh,14px); padding:14px 16px; border-left:0; }
.a-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.a-pick { display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:999px; background:var(--card2); border:1px solid var(--line);
  font-size:15px; font-weight:500; white-space:nowrap; }
.a-pick:active { background:var(--line); }
.a-body.wel .a-go { margin:0; }

/* the summary of the Session that just closed: it proves the arithmetic, so the list
   starts at the top of the body and scrolls instead of standing in the middle. */
.a-body.top { justify-content:flex-start; }
.a-sum { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:4px 0; font-size:15px; }
.a-sum .nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-sum .wt { flex:0 0 auto; display:flex; align-items:baseline; gap:6px; font-weight:700; }
.a-sum .old { font-size:13px; font-weight:600; color:var(--muted); }
.a-sum .ar { color:var(--muted); font-weight:400; }

/* A tap on the weight opens the entry, so the weight reads as a target and not as a label.
   The entry takes the notation of the vault, typed, because 25 machines have no Pin Step
   and no dial can step a weight that names no Step. */
button.a-w { padding:0; border-bottom:1px dashed var(--muted); }
.a-wbox { padding:4px 22px 10px; text-align:center; }
.a-win { width:100%; margin-bottom:7px; padding:12px; border-radius:12px; text-align:center;
  background:var(--card2); color:var(--fg); border:2px solid var(--line);
  font-family:inherit; font-size:24px; font-weight:800; }
.a-win.bad { border-color:var(--skip); }

/* The Hold timers of a Timed Exercise: the Rest ring in the colour of the set, one per
   side, side by side. A paused ring dims, so the eye tells a running clock at once. */
.a-holds { display:flex; justify-content:center; gap:18px; }
.a-holds > div { display:flex; flex-direction:column; align-items:center; gap:6px; }
.a-hold { padding:0; }
.a-ring.hold { --r:clamp(84px,13dvh,120px); }
.a-ring.hold .fg { stroke:var(--go); } .a-ring.hold .t b { color:var(--go); }
.a-hold.paused .a-ring { opacity:.55; }
.a-holds .a-add { padding:6px 14px; font-size:13px; }
/* the side checks of a one-side Exercise that counts reps: one pill per side, lit when done */
.a-sides { display:flex; justify-content:center; gap:12px; }
.a-sides button { padding:10px 22px; border-radius:999px; background:var(--card2);
  border:2px solid var(--muted); font-size:15px; font-weight:700; }
.a-sides .on { background:var(--go); border-color:var(--go); color:#06210f; }