/* Runner surface — rides the app's Moss tokens (app.css :root).
   Everything is .rn- prefixed; nothing here touches app classes beyond the
   shared .page/.pghead/.pgbody chrome the shell already owns.
   Prototype-approved look (Charlie 2026-08-28): Gloock clocks, flat cards,
   brick for rest, moss for work. */

#runnerPage .rn-body{padding:12px 14px calc(30px + var(--sab));max-width:560px;margin:0 auto}
#runnerPage .pghead .rn-tot{margin-left:auto;font:700 var(--t-label) var(--font-ui);color:var(--ink3);font-variant-numeric:tabular-nums}

.rn-card{background:var(--card);border:1px solid var(--border-card);border-radius:var(--r-card);
  padding:14px;margin-bottom:12px}
.rn-card h3{font:700 var(--t-micro) var(--font-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:10px}

/* chooser (the readable routine view) */
.rn-vpill{display:inline-block;background:var(--moss-100);color:var(--accent);border-radius:var(--r-pill);
  font:700 var(--t-micro) var(--font-ui);padding:3px 10px;margin:2px 0 12px}
.rn-peek{font:600 var(--t-sub) var(--font-ui);color:var(--ink2);cursor:pointer;padding:2px 0 6px;list-style:none;display:block}
.rn-peek::-webkit-details-marker{display:none}
.rn-peek::marker{content:""}
.rn-peek::after{content:" ▾";color:var(--ink3)}
details[open] .rn-peek::after{content:" ▴"}
.rn-prow{display:flex;gap:8px;padding:7px 2px;border-top:1px solid var(--hair);font-size:var(--t-sub)}
.rn-prow span:last-child{margin-left:auto;color:var(--ink2);font-variant-numeric:tabular-nums;text-align:right;flex:none}
.rn-hint{font-size:var(--t-label);color:var(--ink3);line-height:1.5}
.rn-resume{background:var(--moss-50)}

/* the map row — the bar and a labeled door to the steps sheet, one tap
   target (min 44px via padding); the secretly-tappable dots are gone (#279) */
.rn-map{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;
  padding:10px 2px 14px;cursor:pointer}
.rn-map .bar{flex:1;display:flex;gap:5px}
.rn-map .bar i{flex:1;height:7px;border-radius:3px;background:var(--moss-200)}
.rn-map .bar i.done{background:var(--accent)}
.rn-map .bar i.cur{background:var(--ochre)}
.rn-map .lbl{font:700 var(--t-label) var(--font-ui);color:var(--accent);flex:none;letter-spacing:.02em}

/* the steps sheet — the one honest map of the session */
.rn-dim{position:fixed;inset:0;background:rgba(44,54,39,.28);z-index:96}
.rn-sheet{position:fixed;left:0;right:0;bottom:0;z-index:97;background:var(--paper-3);
  border:1px solid var(--border-card);border-bottom:none;border-radius:18px 18px 0 0;
  padding:12px 16px calc(14px + var(--sab));max-width:560px;margin:0 auto;
  max-height:78vh;overflow-y:auto}
.rn-grab{width:36px;height:4px;border-radius:2px;background:var(--moss-200);margin:0 auto 12px}
.rn-sheet h4{font:400 19px var(--font-display);margin-bottom:2px}
.rn-shsub{font-size:var(--t-label);color:var(--ink3);margin-bottom:8px;font-variant-numeric:tabular-nums}
.rn-shrow{display:flex;align-items:center;gap:10px;padding:11px 2px;border-top:1px solid var(--hair);
  font-size:var(--t-body);cursor:pointer}
.rn-shrow:first-of-type{border-top:none}
.rn-shrow .mk{width:20px;flex:none;text-align:center;font-weight:800}
.rn-shrow .mk.done{color:var(--ok)}
.rn-shrow .mk.skip{color:var(--brick)}
.rn-shrow .mk.half{color:var(--ochre)}
.rn-shrow .mk.up{color:var(--moss-300)}
.rn-shrow .shl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rn-shrow .detail{margin-left:auto;color:var(--ink2);font-size:var(--t-label);
  font-variant-numeric:tabular-nums;text-align:right;flex:none}
.rn-shrow.cur{background:var(--moss-50);margin:0 -8px;padding:11px 8px;border-radius:var(--r-chip);
  border-top:none;font-weight:700}
.rn-shrow.cur .mk{color:var(--ochre)}

/* the ↩ back-to-rest chip: rides the work screen while the rest clock runs */
.rn-restchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--moss-300);
  background:var(--paper-3);color:var(--brick);border-radius:var(--r-pill);cursor:pointer;
  font:700 var(--t-label) var(--font-ui);font-variant-numeric:tabular-nums;padding:6px 14px;margin:0 0 10px 2px}

/* header bell — audio cues on/off for this device */
.rn-bell{background:none;border:none;font-size:15px;line-height:1;padding:6px;cursor:pointer;margin-left:2px}

/* clock cards (timed steps + rest) */
.rn-clockcard{text-align:center;padding:20px 14px}
.rn-clocklbl{font:700 var(--t-micro) var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.rn-stepname{font:400 22px var(--font-display);margin-top:6px}
.rn-clock{font:400 56px var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:.02em;margin:2px 0}
.rn-clock.rn-rest{color:var(--brick)}
.rn-clock.rn-paced{font-size:30px;padding:12px 0 8px;color:var(--ink2)}
.rn-clockcard .rn-cue{max-width:38ch;margin:6px auto 0}
.rn-trow{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}

/* buttons */
.rn-btn{border:none;border-radius:var(--r-pill);font:700 14px var(--font-ui);padding:11px 22px;cursor:pointer}
.rn-btn.rn-pri{background:var(--accent);color:var(--cream-1)}
.rn-btn.rn-sec{background:none;border:1px solid var(--moss-300);color:var(--ink)}
.rn-btn.rn-go{background:var(--brick);color:var(--cream-1)}
.rn-btn.rn-wide{width:100%;padding:14px;font-size:var(--t-body);margin-top:10px}
.rn-btn:active{transform:scale(.97)}
.rn-skip{display:block;margin:2px auto 0;background:none;border:none;color:var(--ink3);
  font:600 var(--t-label) var(--font-ui);text-decoration:underline;cursor:pointer;padding:8px}
.rn-navb{background:none;border:none;color:var(--ink3);font:600 var(--t-label) var(--font-ui);
  padding:0 0 6px;cursor:pointer}

/* warm-up group checklist */
.rn-wlist div{padding:7px 2px;border-top:1px solid var(--hair);font-size:var(--t-body);color:var(--ink2);display:flex;gap:8px}
.rn-wlist div:first-child{border-top:none}
.rn-wlist .wdone{color:var(--ink3)}
.rn-wlist .wcur{color:var(--ink);font-weight:700;background:var(--moss-50);margin:0 -8px;padding:7px 8px;
  border-radius:var(--r-chip);border-top:none}
.rn-wsec{margin-left:auto;color:var(--ink3);font-size:var(--t-label);font-variant-numeric:tabular-nums}

/* exercise screen */
.rn-exhead{padding:0 2px 10px}
.rn-stepk{font:700 var(--t-micro) var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.rn-mv{font:400 26px/1.2 var(--font-display);margin:2px 0;text-wrap:balance}
.rn-targ{color:var(--ink2);font-size:var(--t-body)}
.rn-last{display:inline-block;background:var(--moss-100);color:var(--accent);border-radius:var(--r-pill);
  font:600 var(--t-label) var(--font-ui);padding:3px 10px;margin-top:8px}
.rn-cue{color:var(--ink3);font-size:var(--t-sub);font-style:italic;margin-top:8px}

.rn-step3{display:flex;align-items:center;justify-content:space-between;margin:10px 0}
.rn-step3 .lbl{font:700 var(--t-micro) var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);width:52px}
.rn-stbtn{width:40px;height:40px;border-radius:var(--r-chip);border:1px solid var(--moss-300);background:var(--paper-3);
  font:600 20px var(--font-ui);color:var(--accent);cursor:pointer}
.rn-stval{font:400 24px var(--font-display);font-variant-numeric:tabular-nums;min-width:86px;text-align:center}
.rn-stval small{font:600 var(--t-label) var(--font-ui);color:var(--ink3)}
.rn-effrow{display:flex;gap:8px;margin:12px 0 2px}
.rn-effrow button{flex:1;border:1px solid var(--moss-300);background:var(--paper-3);border-radius:var(--r-pill);
  font:600 var(--t-sub) var(--font-ui);padding:9px 0;color:var(--ink2);cursor:pointer}
.rn-effrow button.on{background:var(--accent);border-color:var(--accent);color:var(--cream-1)}

.rn-setrow{display:flex;align-items:center;gap:8px;padding:8px 2px;border-top:1px solid var(--hair);
  font-size:var(--t-body);font-variant-numeric:tabular-nums;cursor:pointer}
.rn-setrow:first-of-type{border-top:none}
.rn-setrow .n{width:56px;color:var(--ok);font-size:var(--t-label);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.rn-setrow .eff{margin-left:auto;font-size:var(--t-label);color:var(--ink2)}
.rn-setrow.editing{background:var(--moss-50);margin:0 -8px;padding:8px;border-radius:var(--r-chip);border-top:none}

/* tap-to-type on a stepper value (real kettlebells defeat increments, #279) */
.rn-stval{cursor:text}
.rn-stin{width:86px;text-align:center;font:400 24px var(--font-display);font-variant-numeric:tabular-nums;
  border:none;border-bottom:1.5px solid var(--moss-300);background:none;color:var(--ink);outline:none}

/* feel notes — one line per exercise, one for the session */
.rn-noterow{display:flex;gap:8px;padding:9px 2px 2px;border-top:1px solid var(--hair);color:var(--ink3);
  font:600 var(--t-sub) var(--font-ui);align-items:center;cursor:pointer}
.rn-noterow:first-child{border-top:none;padding-top:2px}
.rn-noterow .plus{width:20px;height:20px;flex:none;border-radius:50%;border:1.5px solid var(--moss-300);
  display:grid;place-items:center;font-size:13px;color:var(--accent)}
.rn-noterow .saved{font-style:italic;color:var(--ink2);font-weight:400}
.rn-noteform{display:flex;gap:8px;padding-top:8px;align-items:center}
.rn-noteform input{flex:1;min-width:0;border:1px solid var(--moss-300);border-radius:var(--r-chip);
  background:var(--paper-3);padding:9px 11px;font:400 var(--t-field) var(--font-ui);color:var(--ink);outline:none}
.rn-noteform input:focus{border-color:var(--accent)}

/* the honest incomplete banner on the summary */
.rn-warn{background:var(--moss-50);border:1px solid var(--moss-200);border-radius:var(--r-chip);
  padding:9px 12px;font-size:var(--t-sub);color:var(--ink2);margin-bottom:10px}
.rn-warn b{color:var(--brick)}

/* rest-fill: definition-owned mobility line on the rest card */
.rn-fill{margin-top:12px;padding-top:10px;border-top:1px solid var(--hair);font-size:var(--t-sub);color:var(--ink2)}
.rn-fill b{display:block;font:700 var(--t-micro) var(--font-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:3px}

/* summary */
.rn-sumhead{text-align:center;padding:8px 0 6px}
.rn-sumhead .big{font:400 32px var(--font-display)}
.rn-sumhead small{color:var(--ink3)}
.rn-sumrow{display:flex;gap:10px;padding:9px 2px;border-top:1px solid var(--hair);font-size:var(--t-sub);cursor:pointer}
.rn-sumrow:first-of-type{border-top:none}
.rn-sumrow .ok{color:var(--ok)}
.rn-sumrow .sk{color:var(--brick)}
.rn-sumrow .detail{margin-left:auto;color:var(--ink2);font-variant-numeric:tabular-nums;text-align:right}

.rn-toast{position:fixed;left:50%;bottom:calc(24px + var(--sab));transform:translateX(-50%) translateY(70px);
  background:var(--moss-900);color:var(--cream-1);border-radius:12px;padding:9px 16px;
  font-size:var(--t-sub);transition:transform .3s var(--ease-out);max-width:85%;text-align:center;z-index:95}
.rn-toast.show{transform:translateX(-50%) translateY(0)}
.rn-toast.rn-undo{display:flex;gap:14px;align-items:center;white-space:nowrap}
.rn-toast.rn-undo button{background:none;border:none;color:var(--moss-100);cursor:pointer;
  font:700 var(--t-sub) var(--font-ui);text-decoration:underline;padding:4px}
@media(prefers-reduced-motion:reduce){.rn-toast{transition:none}.rn-btn:active{transform:none}}
#runnerPage button:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}