/* ---------- self-hosted fonts ----------
   Bundled + precached by the service worker so they render instantly and identically
   on every device, online or off. No Google Fonts dependency = no system-font ("Arial")
   flash on the installed phone PWA.
   Pairing: Chakra Petch (titles/headers/labels — the techy accent) + IBM Plex Sans
   (body/UI workhorse — clean + legible, lets Chakra be the star). */
@font-face{
  font-family:'IBM Plex Sans';               /* variable weight file, covers 100–700 */
  src:url('./fonts/ibm-plex-sans.woff2') format('woff2');
  font-weight:100 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('./fonts/chakra-petch-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('./fonts/chakra-petch-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('./fonts/chakra-petch-bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --bg:#0e0818; --bg-2:#140c24; --panel:#1a1130; --panel-2:#241640; --line:#332155;
  --text:#f3ecff; --muted:#a99cc7; --faint:#7d6fa0;
  --pink:#ff3bd4; --purple:#a855f7; --violet:#7c5cff;
  --green:#39e6a8; --green-glow:#39ff14;
  --amber:#ffb648; --danger:#ff5c7a;
  --radius:16px; --tabh:66px;
  --glow:0 0 12px rgba(255,59,212,.55), 0 0 26px rgba(168,85,247,.35);
  --font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:'Chakra Petch','IBM Plex Sans',sans-serif;
}
/* ---------- Shred Sled — purple journey ---------- */
body.sled{
  --bg:#0c0616; --bg-2:#150a26; --panel:#1c0f33; --panel-2:#271447; --line:#3a2160;
  --text:#f2ecff; --muted:#b9a8e0; --faint:#8a76b8;
  --pink:#c026d3; --purple:#8b5cf6; --violet:#7c3aed;
  --green:#39e6a8; --glow:0 0 12px rgba(192,38,211,.5), 0 0 26px rgba(139,92,246,.35);
  background:radial-gradient(130% 70% at 50% -10%,#2a1152 0%,#0c0616 55%) fixed;
}
.switch{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px;margin:0 0 14px}
.switch button{flex:1;border:none;background:none;color:var(--faint);font-weight:700;font-size:16px;padding:9px;border-radius:999px;font-family:var(--font-head);letter-spacing:.3px}
.switch button.on{background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;box-shadow:var(--glow)}
.sled-wm{width:100%;max-width:330px;height:auto;display:block;margin:12px auto 6px;
  filter:drop-shadow(0 1px 1px #120225) drop-shadow(0 0 10px #9d4edd) drop-shadow(0 0 24px #5b21a8)}
.sled-bolt{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #d946ef) drop-shadow(0 0 20px #a855f7)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;
  background-color:var(--bg);   /* solid fallback so safe-area / overscroll never flashes white on iOS */
  background-image:radial-gradient(120% 60% at 50% -10%, #1d1038 0%, var(--bg) 55%);
  background-attachment:fixed;
  color:var(--text);overscroll-behavior-y:none;font-family:var(--font-body);font-size:17px;line-height:1.5}

/* Chakra Petch on headings, numbers, labels, tabs — the "sport/techy" accent.
   The neon .wordmark keeps its own Caveat font. */
.big, .stat .lbl, .card h2, .block h3, .section-label, .tab, .item .ttl,
.pill, .dtitle, .ttlinput, .badge, .timer-big, .rest-pill .t, .setcols,
.scheme, .tut-title, .btn{
  font-family:var(--font-head)}
body{padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom))}
.boot{display:flex;height:100vh;align-items:center;justify-content:center;color:var(--muted)}
/* Buttons don't inherit page color by default — they fall back to the UA's
   `buttontext` (black), which rendered the journey-picker headings black on a dark
   purple card: the literal first screen of the app. Every styled button (.btn, .tag,
   .link, .switch button) sets its own color, so inheriting here only fixes the ones
   that never set one. */
button{font-family:inherit;color:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
a{color:var(--pink)}
::placeholder{color:var(--faint)}

/* ---------- layout ---------- */
.screen{padding:14px 16px 26px;max-width:680px;margin:0 auto}
/* The status bar sits ON TOP of the page: viewport-fit=cover plus black-translucent means
   iOS hands us the full screen and the clock, wifi and battery are drawn over whatever is in
   the top inset. This used to read max(14px, env(safe-area-inset-top)), which on a phone
   resolves to the inset EXACTLY — 47 to 59px of padding, all of it underneath the status bar,
   leaving zero clearance below it. So the wordmark and the icon button sat in the same band as
   the battery meter. env + 14px keeps the 14px of breathing room the design wants and puts it
   where it belongs: below the system chrome, not inside it. Same correction on every
   full-bleed overlay (.wt-screen, .tut, .fullscreen) for the same reason. */
.topbar{position:sticky;top:0;z-index:5;
  background:linear-gradient(var(--bg),rgba(14,8,24,.82));backdrop-filter:blur(10px);
  padding:calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;display:flex;align-items:center;justify-content:space-between}
.topbar h1{font-size:24px;margin:0;letter-spacing:.2px}
.topbar .sub{color:var(--muted);font-size:15.5px}
.datebtn{background:none;border:none;color:var(--muted);font-family:inherit;font-size:inherit;padding:0 1px;
  cursor:pointer;border-bottom:1px dotted var(--faint)}

/* ---------- neon wordmark ---------- */
.wordmark{font-family:"Caveat","Bradley Hand","Segoe Script",cursive;
  font-weight:700;color:#fff;line-height:1.05;letter-spacing:.5px;display:inline-block;
  transform:skewX(-12deg);transform-origin:left center;
  text-shadow:0 0 6px #fff,0 0 12px var(--pink),0 0 24px var(--pink),0 0 40px var(--purple)}

/* ---------- cards ---------- */
.card{background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:15px;margin:0 0 13px}
.card h2{font-size:15px;margin:0 0 11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.row{display:flex;gap:10px;align-items:center}
.row.between{justify-content:space-between}
.muted{color:var(--muted)} .faint{color:var(--faint)}
/* lighter/secondary text always uses the body typeface (Inter) — no stray system/Arial fallback */
.muted,.faint,.meta,.sub,.empty{font-family:var(--font-body)}
.small{font-size:16px}
.big{font-size:32px;font-weight:800;line-height:1}
.stat{flex:1;text-align:center;background:var(--panel-2);border-radius:13px;padding:13px 6px;border:1px solid var(--line)}
.stat .lbl{color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.5px;margin-top:6px}
.stat .big{background:linear-gradient(90deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- forms ---------- */
label{display:block;font-size:15.5px;color:var(--muted);margin:0 0 5px;letter-spacing:.3px}
input,select,textarea{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:12px;padding:11px 13px;font-size:17px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,59,212,.16)}
textarea{min-height:84px;resize:vertical;line-height:1.45}
.field{margin-bottom:11px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;
  padding:14px 16px;font-size:16.5px;font-weight:700;width:100%;color:#fff;
  background:linear-gradient(90deg,var(--pink),var(--purple));box-shadow:var(--glow)}
.btn:active{transform:scale(.985)}
.btn.secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.ghost{background:transparent;color:var(--pink);border:1px solid var(--line);box-shadow:none}
.btn.danger{background:transparent;color:var(--danger);border:1px solid var(--line);box-shadow:none}
.btn.sm{padding:10px 13px;font-size:15.5px;width:auto}
.btn.green{background:linear-gradient(90deg,var(--green),#1fb588);box-shadow:0 0 12px rgba(57,230,168,.4);color:#06251a}
.iconbtn{background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  width:40px;height:40px;border-radius:11px;font-size:20px;display:flex;align-items:center;justify-content:center;flex:none}
.link{color:var(--pink);background:none;border:none;font-size:16.5px;padding:6px}

/* ---------- list items ---------- */
.item{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text);-webkit-text-fill-color:var(--text);
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px 15px;margin-bottom:9px}
.item .ttl{font-weight:700;font-size:18px;color:var(--text);-webkit-text-fill-color:var(--text)}
.item .meta{-webkit-text-fill-color:var(--muted)}
.item .meta{color:var(--muted);font-size:15px;margin-top:2px}
.pill{display:inline-block;background:rgba(124,92,255,.16);border:1px solid var(--violet);color:#cbb8ff;
  font-size:13.5px;padding:4px 9px;border-radius:999px;margin-right:6px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.pill.green{background:rgba(57,230,168,.14);border-color:var(--green);color:#7af0c8}
.pill.amber{background:rgba(255,182,72,.14);border-color:var(--amber);color:#ffd29a}

/* ---------- block (logger) ---------- */
.section-label{color:var(--faint);font-size:14.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;margin:16px 2px 8px}
.block{border:1px solid var(--line);border-radius:15px;padding:15px;margin-bottom:12px;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));position:relative}
.block.done{border-color:var(--green)}
.block-head{display:flex;gap:11px;align-items:flex-start}
.badge{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15.5px;border:2px solid var(--line);color:var(--muted);background:var(--bg-2)}
.badge.done{background:linear-gradient(135deg,var(--green),#1fb588);border-color:var(--green);color:#06251a;
  box-shadow:0 0 10px rgba(57,230,168,.5)}
.block h3{margin:0;font-size:21px;font-weight:700;flex:1}
.block .detail{white-space:pre-wrap;color:var(--muted);font-size:14.5px;line-height:1.5;margin:7px 0 12px}
.scheme{color:var(--pink);font-weight:800;font-size:17px;margin-top:4px;letter-spacing:.5px}
.note-bubble{display:inline-flex;gap:7px;align-items:center;background:var(--panel-2);border:1px solid var(--line);
  border-radius:11px;padding:8px 12px;margin-top:9px;color:var(--text);font-size:16.5px}
.note-bubble svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8}

/* set rows */
.setrow{display:grid;gap:7px;align-items:center;margin-bottom:7px}
.setrow.strength{grid-template-columns:30px 1fr 1fr 50px 38px}
.setrow.interval{grid-template-columns:30px 1fr 1fr 50px 38px}
.setrow.timeonly{grid-template-columns:30px 1fr 38px}
.setcols.timeonly{grid-template-columns:30px 1fr 38px}
.setrow.bwstrength{grid-template-columns:30px 1fr 50px 38px}
.setcols.bwstrength{grid-template-columns:30px 1fr 50px 38px}
.setrow.strengthnr{grid-template-columns:30px 1fr 1fr 38px}
.setcols.strengthnr{grid-template-columns:30px 1fr 1fr 38px}
.setrow.bwnr{grid-template-columns:30px 1fr 38px}
.setcols.bwnr{grid-template-columns:30px 1fr 38px}
.setrow .n{color:var(--faint);text-align:center;font-weight:800}
.setrow input{padding:11px 8px;text-align:center;font-size:16.5px}
.setrow .mini{position:absolute}
.setcols{display:grid;gap:7px;font-size:12.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;text-align:center}
.setcols.strength{grid-template-columns:30px 1fr 1fr 50px 38px}
.setcols.interval{grid-template-columns:30px 1fr 1fr 50px 38px}
.platebtn{font-size:10px;color:var(--violet);background:none;border:none;padding:2px}

/* ---------- bottom tab bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;height:calc(var(--tabh) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:rgba(20,12,36,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:stretch}
.tab{flex:1;border:none;background:none;color:var(--faint);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;font-size:12px;letter-spacing:.2px;font-weight:600}
.tab svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9}
.tab.active{color:var(--pink)}
.tab.active svg{filter:drop-shadow(0 0 6px rgba(255,59,212,.7))}
/* avatar tab — the profile photo IS the icon, so it needs the same optical weight
   as a 23px stroke icon and a ring that reads as "selected" without a glow. */
.tab .avatar{width:23px;height:23px;border-radius:50%;object-fit:cover;display:block;
  border:1.5px solid var(--faint);background:var(--card)}
.tab.active .avatar{border-color:var(--pink);box-shadow:0 0 6px rgba(255,59,212,.55)}
.tab-av{gap:2px}
.avatar-fb{border-radius:50%;display:inline-block;text-align:center;font-weight:800;
  font-size:12px;color:var(--fg);background:var(--card);border:1.5px solid var(--faint)}
.card .avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid var(--pink)}
.card .avatar-fb{font-size:24px;line-height:56px}
body.sled .tab.active .avatar{border-color:var(--violet);box-shadow:0 0 6px rgba(154,77,255,.55)}
body.sled .card .avatar{border-color:var(--violet)}

/* ---------- overlays / sheets ---------- */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(8,4,16,.7);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end}
.sheet-inner{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:20px 20px 0 0;
  width:100%;max-width:680px;margin:0 auto;max-height:88vh;overflow:auto;padding:16px 16px calc(20px + env(safe-area-inset-bottom));
  transition:transform .18s ease-out}
.sheet-inner.dragging{transition:none}
/* The grabber used to be decoration: a pill that says "drag me" above a sheet with no drag
   handler and no close button. The only way out was the dim strip of backdrop above the sheet,
   and a full-height list leaves almost none of it, so Mike force-quit the app twice to escape
   the add-block sheet. It is a real handle now, and the ✕ is the guaranteed way out. */
.sheet-handle{display:block;width:100%;border:none;background:none;padding:6px 0 10px;cursor:grab;touch-action:none}
.sheet-handle:active{cursor:grabbing}
.grabber{width:42px;height:5px;border-radius:3px;background:var(--line);margin:0 auto;pointer-events:none}
.sheet-handle:active .grabber{background:var(--muted)}
.sheet-x{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted);font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0}
.sheet-x:active{transform:scale(.94);border-color:var(--pink);color:var(--text)}
.sheet-x:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.sheet-inner h2{padding-right:42px}

/* The floating feedback bubble lived here until 2026-09-19. It was hidden during a workout so
   it could not cover the Finish button, which meant the one place an athlete most wants to
   report something was the one place it was unreachable. Mike: "I never use clock. Not sure
   anyone really does. Let's move that icon in the top right and have that be the feedback
   bubble." So feedback is now the topbar's right-hand icon on every screen, workouts included,
   and nothing floats over the content. The rest timer is still on each block and in Coach. */
.fab-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}

/* ---------- full-screen workout timer ---------- */
.wt-screen{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(18px + env(safe-area-inset-bottom))}
.wt-top{display:flex;justify-content:flex-end;min-height:30px}
.wt-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px}
.wt-phase{font-family:var(--font-head);font-weight:800;font-size:26px;letter-spacing:2px;text-transform:uppercase}
.wt-time{font-family:var(--font-head);font-variant-numeric:tabular-nums;font-weight:800;font-size:96px;line-height:1.05}
.wt-sub{color:var(--muted);font-size:15.5px;margin-top:6px}
.wt-bar{width:100%;max-width:340px;height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden;margin-top:22px}
.wt-bar>div{height:100%;width:0;transition:width .2s linear}

/* ---------- tutorial carousel ---------- */
.tut{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(18px + env(safe-area-inset-bottom))}
.tut-top{display:flex;justify-content:flex-end;min-height:30px}
.tut-skip{background:none;border:none;color:var(--faint);font-size:16.5px;font-weight:600;padding:4px 2px}
.tut-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.tut-art{width:100%;max-width:330px;margin:0 auto 14px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:14px;padding:10px 8px}
.tut-art svg{display:block}
.tut-title{font-family:var(--font-head);font-size:29px;font-weight:800;letter-spacing:.2px;line-height:1.25;
  background:linear-gradient(90deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tut-copy{font-family:var(--font-body);font-size:17.5px;line-height:1.6;color:var(--muted);max-width:34ch;margin-top:4px}
.tut-dots{display:flex;gap:8px;justify-content:center;margin:18px 0 14px}
.tut-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:all .2s}
.tut-dot.on{background:var(--pink);width:22px;border-radius:999px;box-shadow:var(--glow)}
.fullscreen{position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto;
  padding:calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(24px + env(safe-area-inset-bottom))}

/* ---------- rest timer ---------- */
.rest-pill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 12px);
  z-index:30;background:var(--panel);border:1px solid var(--pink);border-radius:14px;padding:9px 14px;
  display:flex;align-items:center;gap:12px;box-shadow:var(--glow)}
.rest-pill .t{font-variant-numeric:tabular-nums;font-weight:800;font-size:22px;min-width:58px;text-align:center}
.timer-big{font-variant-numeric:tabular-nums;font-weight:800;font-size:68px;text-align:center;
  background:linear-gradient(90deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* plate visual */
.plate-stack{display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap;padding:14px 0}
.plate{border-radius:5px;color:#fff;font-weight:800;font-size:13.5px;display:flex;align-items:center;justify-content:center;
  min-width:30px;box-shadow:0 0 8px rgba(255,59,212,.3)}
.bar-icon{height:6px;background:linear-gradient(90deg,#888,#ccc);flex:1;min-width:30px;border-radius:3px}

/* ---------- misc ---------- */
.center{text-align:center}
.empty{color:var(--faint);text-align:center;padding:26px 10px;font-size:16.5px}
.spacer{height:8px}
.divider{height:1px;background:var(--line);margin:14px 0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabh) + 76px);
  background:var(--panel-2);border:1px solid var(--pink);color:var(--text);padding:11px 16px;border-radius:12px;
  font-size:15.5px;z-index:60;box-shadow:var(--glow);max-width:90%}
.chartwrap{position:relative;height:240px}
.auth-wrap{min-height:84vh;display:flex;flex-direction:column;justify-content:center}
.logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:24px}
.logo img{width:84px;height:84px;border-radius:20px;box-shadow:var(--glow)}
.banner{background:rgba(255,182,72,.1);border:1px solid var(--amber);color:#ffd9a8;border-radius:12px;
  padding:12px 14px;font-size:16px;margin-bottom:14px;line-height:1.5}
.tag-row{display:flex;flex-wrap:wrap;gap:7px}
.tag{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:15.5px;font-weight:600}
.tag.on{background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;border-color:transparent;box-shadow:var(--glow)}
.chip{display:inline-block;padding:5px 10px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);font-size:15px;color:var(--muted);margin:0 6px 6px 0}

/* The Sun-Sat week strip (.weekstrip / .wsday) lived here until 2026-09-18. It showed the
   CALENDAR week while the block rail shows the TRAINING week, and the two never line up:
   a rotation week advances only when a session is saved, so one calendar week can straddle
   two of them. The rail answers where you are, the calendar screen answers what you did on
   the 14th, and the strip was a blurred version of both. */

/* Unit chip in a set-grid column header. Small, tappable, and visibly a control rather than
   part of the label, because the rest of that cell removes the column. */
.unitchip{display:inline-block;margin-left:4px;padding:1px 5px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--pink);font-family:var(--font-head);font-size:10.5px;
  font-weight:700;letter-spacing:.3px;line-height:1.5;vertical-align:1px}
.unitchip:active{border-color:var(--pink)}

/* ---------- the coach reporting in ----------
   Pinned above the tab bar rather than inline at the top of the logger. Mike, 2026-09-25:
   "its very subtle and easy to miss" — and he was right for a structural reason, not a styling
   one. It lands MINUTES after the session opens, by which time the athlete has scrolled down
   into their blocks, so a bar at the top of the page is a message delivered to a part of the
   screen nobody is looking at.

   Still not a modal. Someone holding a barbell should not have to dismiss a dialog, so this
   sits over the page, states what changed and why, and waits. */
.cbar{position:fixed;left:50%;transform:translateX(-50%);z-index:32;
  bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 14px);
  width:calc(100% - 28px);max-width:640px;
  background:linear-gradient(180deg,#241640,#1a1130);border:1px solid var(--violet);
  border-radius:16px;padding:14px 15px 13px;
  box-shadow:0 0 18px rgba(124,92,255,.42), 0 10px 30px rgba(0,0,0,.55);
  animation:cbar-in .26s ease-out}
@keyframes cbar-in{ from{ opacity:0; transform:translate(-50%,14px) } to{ opacity:1; transform:translate(-50%,0) } }
.cbar-h{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;
  font-size:17px;color:#e9dcff;letter-spacing:.2px}
.cbar-t{font-family:var(--font-body);font-size:15px;line-height:1.5;color:#cbb8ff;margin-top:6px}
.cbar-sum{font-family:var(--font-head);font-size:12.5px;letter-spacing:1px;text-transform:uppercase;
  color:#a68fe0;margin-top:9px}
.cbar-a{display:flex;gap:9px;margin-top:12px}
.cbar-a .btn{flex:1;padding:11px 12px;font-size:15.5px}
.cbar-a .btn.ghost{flex:0 0 40%;background:none;border:1px solid var(--line);color:var(--muted)}
/* The rest pill lives in the same corner of the screen, so it has to move while this is showing.
   --cbarh is the card's measured height, set by coachBar(). A fixed offset was wrong: the card
   is as tall as the coach's note is long, and the number that cleared a one-line note left the
   pill sitting on top of a three-line one. The fallback only matters for the frame before JS
   measures. */
body.cbar-up .rest-pill{
  bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + var(--cbarh, 150px) + 26px)}
@media (prefers-reduced-motion: reduce){ .cbar{animation:none} }

/* ---------- history month calendar ---------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{text-align:center;font-size:13px;color:var(--faint);padding-bottom:2px;font-weight:700;letter-spacing:.5px}
.cal-day{aspect-ratio:1;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  border-radius:9px;font-size:14.5px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0}
.cal-day[disabled]{opacity:.4;border-color:transparent;background:transparent}
.cal-day.has{color:var(--text);border-color:var(--pink)}
.cal-day.done{color:#eafff6;font-weight:800;border-color:var(--green);
  background:linear-gradient(135deg,rgba(57,230,168,.28),rgba(168,85,247,.22));box-shadow:0 0 9px rgba(57,230,168,.4)}
.cal-day.today{outline:2px solid var(--pink);outline-offset:-2px}

/* ---------- completion effects ---------- */
/* Completing a block is the moment the app should feel best. It used to be a single
   0.75s pink flash that left no trace, so a finished block looked much like an unfinished
   one a second later. Now it is one coordinated moment that SETTLES rather than ending:
   a violet burst, then a permanent violet edge so the block stays visibly banked. */
@keyframes dld-block-flash{
  0%  {box-shadow:0 0 0 0 rgba(168,85,247,0)}
  18% {box-shadow:0 0 30px 6px rgba(255,59,212,.9),0 0 74px 20px rgba(168,85,247,.7)}
  55% {box-shadow:0 0 22px 3px rgba(168,85,247,.55),0 0 48px 10px rgba(168,85,247,.3)}
  100%{box-shadow:0 0 14px 0 rgba(168,85,247,.34)}}
.block.flash{animation:dld-block-flash 1.1s cubic-bezier(.16,.9,.3,1) both}
/* the resting state a completed block keeps, so the change persists after the animation */
.block.done{border-color:rgba(168,85,247,.55);box-shadow:0 0 14px 0 rgba(168,85,247,.22)}
.block.done .badge{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;border-color:transparent}

@keyframes dld-badge-pop{
  0%{transform:scale(1) rotate(0)}
  35%{transform:scale(1.34) rotate(-7deg)}
  62%{transform:scale(.94) rotate(3deg)}
  100%{transform:scale(1) rotate(0)}}
.block.flash .badge{animation:dld-badge-pop .62s cubic-bezier(.2,1.4,.4,1)}
/* a single ring that expands and fades, drawn on the badge so it reads as coming FROM the
   thing you just tapped. One element, no particle system, no per-frame JS. */
.block.flash .badge::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(168,85,247,.85);animation:dld-ring .72s ease-out forwards;pointer-events:none}
@keyframes dld-ring{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.block .badge{position:relative}

/* ---------- session banked ----------
   Saving is the biggest moment in the app and it used to be a toast. This is a brief
   overlay with the numbers counting up, then it gets out of the way. */
.bank{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(10,6,18,.92);backdrop-filter:blur(10px);animation:dld-bank-in .28s ease-out both}
@keyframes dld-bank-in{from{opacity:0}to{opacity:1}}
.bank.out{animation:dld-bank-out .3s ease-in both}
@keyframes dld-bank-out{to{opacity:0}}
.bank-inner{text-align:center;padding:0 28px;max-width:420px}
.bank-mark{width:96px;height:96px;margin:0 auto 20px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--pink),var(--purple));
  display:flex;align-items:center;justify-content:center;font-size:44px;
  box-shadow:0 0 34px rgba(255,59,212,.5),0 0 78px rgba(168,85,247,.42);
  animation:dld-bank-mark .7s cubic-bezier(.2,1.5,.35,1) both}
@keyframes dld-bank-mark{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.bank h2{font-size:26px;margin:0 0 6px;letter-spacing:-.01em}
.bank .sub{color:var(--muted);font-size:14.5px;line-height:1.5;margin-bottom:22px}
.bank-stats{display:flex;gap:10px;justify-content:center}
.bank-stat{flex:1;max-width:120px;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.32);
  border-radius:14px;padding:13px 8px}
.bank-stat .big{font-size:25px;font-weight:800;color:var(--text);line-height:1.1}
.bank-stat .lbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:5px}

/* Motion is a bonus, never a requirement. Anyone who has asked their device to calm down
   gets the same information with no animation at all. */
@media (prefers-reduced-motion: reduce){
  .block.flash,.block.flash .badge,.block.flash .badge::after,
  .bank,.bank.out,.bank-mark{animation:none !important}
  .block.flash{box-shadow:0 0 14px 0 rgba(168,85,247,.34)}
}

/* set complete — electric pink strikethrough */
.setrow.setdone .n{color:var(--pink);text-shadow:0 0 10px var(--pink)}
.setrow.setdone input{color:var(--faint);position:relative}
.setrow.setdone{position:relative}
.setrow.setdone::after{content:"";position:absolute;left:34px;right:8px;top:50%;height:2px;
  background:linear-gradient(90deg,var(--pink),var(--purple));border-radius:2px;
  box-shadow:0 0 8px var(--pink),0 0 16px var(--purple);transform-origin:left center;
  animation:dld-strike .32s ease-out}
@keyframes dld-strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.setrow .n{cursor:pointer;user-select:none}

/* swipe-left to delete — blocks and set rows. The red reveal only shows mid-swipe
   (opacity toggled in JS) so it never bleeds through at rest. */
.swipe{position:relative;overflow:hidden;border-radius:15px;margin-bottom:12px}
.set-swipe{position:relative;overflow:hidden;border-radius:11px;margin-bottom:7px}
.swipe-del{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;
  padding-right:20px;background:var(--danger);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:1px;
  text-transform:uppercase;opacity:0;transition:opacity .1s}
/* touch-action:pan-y = the browser keeps vertical scroll, but hands horizontal drags to
   our JS instead of hijacking them as scroll/back — without this iOS cancels the swipe. */
.swipe > .block{margin-bottom:0;will-change:transform;touch-action:pan-y}
.set-swipe > .setrow{margin-bottom:0;will-change:transform;touch-action:pan-y}
.set-swipe > .setrow input{touch-action:pan-y}

/* grip handle — press-drag to reorder blocks */
.grip{width:36px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--faint);
  cursor:grab;touch-action:none;flex:none;background:none;border:none;padding:0;border-radius:8px}
.grip:active{cursor:grabbing;color:var(--muted)}
.block.dragging{opacity:.95;box-shadow:0 10px 34px rgba(0,0,0,.55),var(--glow);position:relative;z-index:20}

/* coach "tuning" loading state — centered, calm, no emoji blob */
.loadwrap{min-height:64vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:0 24px}
.loadwrap .msg{font-size:20px;line-height:1.5;color:var(--muted);max-width:24ch}
.pulse-dot{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--pink),var(--purple));
  box-shadow:0 0 22px rgba(255,59,212,.55),0 0 44px rgba(168,85,247,.35);animation:dld-pulse 1.5s ease-in-out infinite}
@keyframes dld-pulse{0%,100%{transform:scale(.82);opacity:.72}50%{transform:scale(1.06);opacity:1}}

/* ---------- v93 logger polish: data-forward, tighter chrome ----------
   The numbers you tap every set are the hero; chips + utilities recede. Tap targets
   stay ≥~40px even where the glyph shrinks. */
.tag{padding:7px 13px;font-size:14px}                 /* format chips: less air, same legibility */
.pill{font-size:12px;padding:3px 8px}                  /* kind/style badges: smaller */
.setrow input{font-size:19px;padding:12px 6px}         /* set/weight fields: bigger, punchier */
.setcols{font-size:11px}
/* block remove: small glyph tucked in the corner, but padded to a real tap zone */
.block-x{position:absolute;top:8px;right:8px;width:34px;height:34px;padding:10px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--faint);
  font-size:14px;line-height:1;cursor:pointer;z-index:3;border-radius:9px}
.block-x:active{color:var(--danger)}
/* move arrows: subtle, no heavy box */
.movegrp .iconbtn{background:none;border:1px solid var(--line);color:var(--faint)}
/* subtle inline set actions (recede vs the data) */
.setact{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.setlnk{background:none;border:none;color:var(--violet);font-family:var(--font-head);font-weight:600;
  font-size:14px;padding:8px 4px;cursor:pointer;letter-spacing:.3px;display:inline-flex;align-items:center;gap:5px}
.setlnk.dim{color:var(--faint)}

/* ---------- Chakra Petch weight hierarchy ----------
   Now that Chakra Petch has real 500/600/700 (not just Bold), give headings a proper
   ladder instead of everything shouting at 800: big impact numbers stay heaviest,
   headings drop to semibold, small labels to medium. Placed last so it wins by source
   order. Keeps the sport/techy feel but reads far cleaner. */
.card h2,.block h3,.item .ttl,.section-label,.scheme,.dtitle{font-weight:600}
.stat .lbl,.tab,.pill,.badge,.setcols{font-weight:500}
.big{font-weight:700}

/* --- staging ribbon ---------------------------------------------------------
   Prod and staging are visually identical, and on 2026-08-31 that cost an
   afternoon: a whole test pass was run against production while the feature
   being tested only existed on staging. The build number was the only tell and
   it lives three taps deep in Settings. This puts the environment and the build
   on screen permanently.
   pointer-events:none so it can never intercept a tap. */
.envbadge{position:fixed;left:8px;bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 8px);
  z-index:60;pointer-events:none;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  padding:4px 9px;border-radius:999px;text-transform:uppercase;
  background:rgba(255,176,32,.16);color:#ffcf7a;border:1px solid rgba(255,176,32,.5);
  backdrop-filter:blur(6px)}

/* ---------- progress ----------
   Added 0.15.1 when Progress stopped being a dropdown and a chart. */
.dotstrip{display:flex;gap:6px}
.dotstrip .dot{flex:1;height:8px;border-radius:4px;background:rgba(168,85,247,.16);
  border:1px solid rgba(168,85,247,.26)}
.dotstrip .dot.on{background:linear-gradient(135deg,var(--purple),var(--pink));
  border-color:transparent;box-shadow:0 0 8px rgba(168,85,247,.5)}

/* a lift row is a button, so it must not look like one */
.item.liftrow{background:none;border:none;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:11px 0;cursor:pointer;font:inherit;color:inherit}
.item.liftrow:first-of-type{border-top:none}
.item.liftrow:active{opacity:.65}
.meta.up{color:var(--green)}
.meta.down{color:#ff8fa3}

/* ---------- block rail (Train) ----------
   Answers "which week of the block, which day of the rotation", and every day in it is a
   way into that day's workout. Since 2026-09-18 it is the only thing between the journey
   switcher and today's card; the 📅 in its header goes straight to the calendar screen.
   Tokens only — this must follow the Sled palette swap like everything else. */
.prail{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 12px 13px;margin:0 0 12px;display:flex;flex-direction:column;gap:10px}
.prail-top{display:flex;align-items:center;gap:8px}
.prail-top .prail-blk{margin-right:auto}
.prail-cal{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:9px;
  padding:3px 8px;font-size:14px;line-height:1.3;cursor:pointer;color:var(--muted);flex:none;
  -webkit-tap-highlight-color:transparent}
.prail-cal:active{border-color:var(--pink);background:rgba(255,59,212,.14)}
.prail-cal:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.prail-blk{font-family:var(--font-head);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint)}
.prail-wk{font-family:var(--font-head);font-size:12px;letter-spacing:1.2px;color:var(--muted);
  background:none;border:none;padding:2px 0 2px 6px;cursor:pointer}
.prail-wk:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:6px}
.prail-weeks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pwk{border:1px solid var(--line);border-radius:10px;padding:7px 3px 6px;text-align:center;
  background:rgba(0,0,0,.22);min-width:0}
.pwk .n{font-family:var(--font-head);font-size:10px;letter-spacing:.9px;color:var(--faint);display:block}
.pwk .lbl{font-family:var(--font-head);font-size:12.5px;font-weight:700;color:var(--muted);display:block;
  margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwk.done{border-color:rgba(57,230,168,.3)}
.pwk.done .lbl{color:var(--green)}
.pwk.deload{border-style:dashed;border-color:rgba(255,182,72,.42)}
.pwk.deload .lbl{color:var(--amber)}
.pwk.now{border-color:var(--pink);background:linear-gradient(180deg,rgba(255,59,212,.16),rgba(168,85,247,.08));
  box-shadow:0 0 13px rgba(255,59,212,.26)}
.pwk.now .lbl{color:#fff}
.pwk.now .n{color:var(--pink)}
/* a deload that is also the live week keeps the amber identity and gains the lit ring */
.pwk.now.deload{border-color:var(--amber);box-shadow:0 0 13px rgba(255,182,72,.3);
  background:linear-gradient(180deg,rgba(255,182,72,.16),transparent)}
.pwk.now.deload .lbl{color:var(--amber)}
.prail-daycap{font-family:var(--font-head);font-size:11px;letter-spacing:1px;color:var(--faint);
  text-transform:uppercase;margin-top:1px}
.prail-days{display:grid;grid-template-columns:repeat(var(--pdays,6),1fr);gap:5px}
.pday{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;
  border:1px solid var(--line);border-radius:11px;padding:7px 2px 6px;background:rgba(0,0,0,.24);
  color:var(--muted);font-family:var(--font-head);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pday .l{font-size:9.5px;letter-spacing:.5px;color:var(--faint);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pday .m{font-size:14px;line-height:1.1}
.pday:active{transform:scale(.97)}
.pday.done{border-color:rgba(57,230,168,.32)}
.pday.done .m{color:var(--green)}
.pday.now{border-color:var(--pink);box-shadow:0 0 12px rgba(255,59,212,.28);
  background:linear-gradient(180deg,rgba(255,59,212,.15),transparent)}
.pday.now .l{color:var(--pink)}
.pday.now .m{color:#fff}
.pday:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.prail-next{font-size:14px;color:var(--muted)}
.prail-next b{color:var(--text);font-weight:600;font-family:var(--font-head)}
.prail-flag{font-size:13px;line-height:1.45;color:var(--amber);background:rgba(255,182,72,.09);
  border:1px solid rgba(255,182,72,.34);border-radius:10px;padding:8px 10px}
@media (prefers-reduced-motion: reduce){ .pwk.now,.pday.now{box-shadow:none} .pday:active{transform:none} }

/* ---------- check-in: one card, one row per question ----------
   Mike, 2026-09-19, on the check-in screen: "I love the questions. Keep em. The size of each
   strip seems a little wide, let's also maybe experiment with the design. maybe something like
   the strip we have for days on the new homescreen." It was five full cards, each with a 5-wide
   .tag-row of pill buttons at 9px/14px padding, so the screen ran well past one phone height for
   five taps. Same idea as .pday: small, square-ish, tabular numerals, the chosen one lit. */
.qcard{padding:10px 14px}
.qlegend{font-family:var(--font-body);font-size:12.5px;color:var(--faint);letter-spacing:.3px;
  text-align:right;padding-bottom:7px}
/* One line per question: label left, scale right. Stacking the label above the scale cost a
   whole row of height per question, and with six questions plus a Start button that is the
   difference between one screen and a scroll. */
.qrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.qrow-stack{display:block}
.qlab{flex:1;min-width:0;font-family:var(--font-head);font-weight:600;font-size:15.5px;
  letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qnote{font-family:var(--font-body);font-size:13px;color:var(--muted);line-height:1.45;
  padding:0 0 8px;margin-top:-2px}
.seg{flex:none;width:196px;display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
/* Two cells, not five, so it does not need the full 196px — and "Riding today?" is the longest
   label on the screen, so the space it gives back is exactly where it was needed. Right-aligned
   like every other scale, so the right edge still lines up. */
.seg2{width:132px;grid-template-columns:repeat(2,1fr)}
.checkin-screen .tag-row{gap:6px}
.checkin-screen .tag{padding:6px 11px;font-size:13.5px}
.segb{display:flex;align-items:center;justify-content:center;min-width:0;height:36px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--muted);
  font-family:var(--font-head);font-variant-numeric:tabular-nums;font-weight:600;font-size:16px;padding:0}
.segb:active{transform:scale(.97)}
.segb.on{border-color:var(--pink);color:#fff;background:linear-gradient(135deg,rgba(255,59,212,.22),rgba(168,85,247,.18));
  box-shadow:0 0 11px rgba(255,59,212,.26)}
.segb:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* ---------- the three ways into a session (Train card) ----------
   Quick WOD carries the accent because it is the one that needs no decisions; Create session and
   Recovery are the deliberate paths and read quieter. Icon over label so three fit a phone at
   3 columns without truncating, which is what a flex row of text buttons was doing. */
.actrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}
.act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;
  padding:11px 6px 10px;border-radius:13px;border:1px solid var(--line);background:var(--panel-2);color:var(--text)}
.act .ico{font-size:19px;line-height:1.1}
.act .lab{font-family:var(--font-head);font-size:12.5px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.2;
  /* Two lines' worth of room whether or not the label needs it, so "Create session" wrapping
     does not shove its icon half a line higher than the two beside it. */
  min-height:2.4em;display:flex;align-items:center;justify-content:center}
.act:active{transform:scale(.97)}
.act:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.act.hot{border-color:var(--amber);background:linear-gradient(160deg,rgba(255,182,72,.17),var(--panel-2))}
.act.hot .lab{color:var(--amber)}
@media (prefers-reduced-motion: reduce){ .act:active,.segb:active{transform:none} }

/* Short screens (an SE, or a phone with its browser chrome showing) still have six questions
   and a Start button to fit. The anchor words are the first thing to go: they are a reminder of
   which end is which, and the row keeps its 1-5 either way. Height, not width, because this is
   a vertical-space problem — a wide phone in landscape has the same one. */
@media (max-height: 740px){
  .checkin-screen .qrow{padding:5px 0}
  .checkin-screen .segb{height:32px;font-size:15px}
  .checkin-screen .qlegend{padding-bottom:5px}
}
/* On a full-size phone the compact sizing leaves a third of the screen empty below Start, and
   a 36px cell is under Apple's 44px minimum target for something you tap with a thumb mid-warm-up.
   Mike, looking at B160 on his own phone: "I feel like we have some more real estate at the
   bottom." So the room goes back into the targets, not into padding. Gated on HEIGHT, and sized
   so the worst case (riding yes plus the fatigue follow-up open) still lands above the fold. */
/* Middle tier: most phones. 42px cells and a little more air, which is as far as it goes while
   the worst case — riding yes, plus the fatigue follow-up open, plus its chips wrapping to two
   lines — still lands above the fold. */
@media (min-height: 741px){
  .checkin-screen .qcard{padding:12px 15px}
  .checkin-screen .qrow{padding:9px 0}
  .checkin-screen .segb{height:42px;font-size:16.5px;border-radius:11px}
  .checkin-screen .qlab{font-size:16.5px}
  .checkin-screen .seg{width:210px}
  .checkin-screen .seg2{width:142px}
  .checkin-screen .qlegend{padding-bottom:9px}
}
/* Top tier: a Pro Max, or any phone with real height to spare. 48px clears Apple's 44px minimum
   target with room, which matters for something you tap five times with a thumb between sets. */
@media (min-height: 880px){
  .checkin-screen .qcard{padding:14px 15px}
  .checkin-screen .qrow{padding:11px 0}
  .checkin-screen .segb{height:46px;font-size:17.5px;border-radius:12px}
  .checkin-screen .qlab{font-size:17px}
  .checkin-screen .seg{width:216px;gap:6px}
  .checkin-screen .seg2{width:148px}
  .checkin-screen .qlegend{font-size:13px;padding-bottom:10px}
  .checkin-screen .qnote{font-size:14px;padding-bottom:10px}
  .checkin-screen .tag{padding:8px 13px;font-size:15px}
}
/* A narrow phone cannot give 196px to the scale AND keep "Freshness" readable, so below 360px
   the scale gives ground first — a 5-cell scale at 32px a cell is still a comfortable target. */
@media (max-width: 360px){ .seg{width:168px} .seg2{width:120px} .qlab{font-size:14.5px} }

/* Quick WOD sheet: the workout as a whiteboard, monospaced-ish and unstyled on purpose. */
.wod-name{font-family:var(--font-head);font-weight:700;font-size:22px;line-height:1.2}
.wod-meta{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 11px}
.wod-body{white-space:pre-line;line-height:1.65;background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:12px 13px;font-size:16.5px}
.wod-scale{color:var(--muted);font-size:15.5px;line-height:1.55;margin:10px 0 0}


/* ---------- disclosure ----------
   Shared collapsible card. Reference material starts closed; the summary keeps a hint so it
   rarely has to be opened just to find out whether it is worth opening. */
.disc{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);
  border-radius:var(--radius);margin:0 0 13px;overflow:hidden}
.disc>summary{display:flex;align-items:center;gap:10px;padding:14px 15px;cursor:pointer;
  list-style:none;-webkit-tap-highlight-color:transparent}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}
.disc-t{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:1px}
.disc-hint{margin-left:auto;font-size:13.5px;color:var(--faint)}
.disc-x{color:var(--faint);font-size:13px;transition:transform .18s ease;flex:none}
.disc[open]>summary .disc-x{transform:rotate(180deg)}
.disc[open]>summary{border-bottom:1px solid var(--line)}
.disc-body{padding:13px 15px 15px}
.disc-body>.card{margin:0;border:none;background:none;padding:0}
@media (prefers-reduced-motion: reduce){ .disc-x{transition:none} }