/* IRONCADE experience refresh. Presentation only; existing feature selectors,
   player colors, fixed navigation, score engine and motion contracts remain. */
:root {
  --panel:#10131e; --panel2:#171c29; --bg2:#0c1019;
  --txt:#f0f2f7; --sub:#b8bfce; --mut:#919bad;
  --bdr:rgba(201,214,239,.13); --bdr2:rgba(201,214,239,.25);
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ui-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --accent:var(--p1); --nav-h:60px;
}
body.p2 { --accent:var(--p2); }
body { font-size:15px; line-height:1.6; }
body::before { opacity:.13; }
body::after { opacity:.35; }
.wrap { max-width:1080px; padding:0 24px; }
button,input,select,textarea { touch-action:manipulation; }
button { font-family:var(--ui); }
:is(button,a,input,select,textarea,[role=button]):focus-visible {
  outline:2px solid var(--accent); outline-offset:4px;
}
button:disabled { cursor:not-allowed; }
.marquee { display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 24px;
  text-align:left;padding:calc(var(--st) + 24px) 0 24px;border-bottom:1px solid var(--bdr);margin-bottom:30px; }
.mq-title .mq-lockup { margin:0;filter:none;height:34px; }
.mq-sub { grid-column:1;grid-row:2;font-family:var(--ui-mono);font-size:10px;letter-spacing:.12em;margin:0; }
.who { grid-column:2;grid-row:1/3;margin:0;padding:5px 5px 5px 14px;border-radius:12px;
  gap:12px;letter-spacing:0;font-size:10px;cursor:default;flex-wrap:wrap; }
.who b { font-family:var(--ui);font-size:13px; }
.who .sw { min-height:44px;padding:10px 12px;border-radius:8px;font:600 12px var(--ui);color:var(--txt);cursor:pointer; }
.who #signOut { background:transparent;color:var(--sub);border-color:transparent; }
.snd { width:44px;height:44px;top:calc(var(--st) + 12px);right:12px; }
.ux-heading { display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 26px; }
.ux-eyebrow { font:600 10px/1.6 var(--ui-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px; }
.ux-heading h1 { font-family:var(--ui);font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.045em;font-weight:700; }
.ux-heading p { color:var(--sub);font-size:14px;margin-top:10px;max-width:560px; }
.ux-mark { flex:none;display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--bdr2);border-radius:15px;color:var(--accent);background:var(--panel); }
.ux-mark svg { width:26px;height:26px; }
.ux-guide { border-block:1px solid var(--bdr);padding:13px 0;margin-bottom:24px;display:flex;gap:20px;flex-wrap:wrap; }
.ux-guide span { color:var(--sub);font-size:12px; }
.ux-guide b { font:600 10px var(--ui-mono);color:var(--accent);margin-right:8px; }
.sect { margin-bottom:24px; }
.sh { margin-bottom:12px;align-items:baseline;flex-wrap:wrap; }
.sh h3 { font:650 14px/1.4 var(--ui);letter-spacing:.01em; }
.sh .note { font:500 11px/1.5 var(--ui);letter-spacing:.02em; }
.panel,.vcard,.duel,.board,.rpt-mod { border-radius:16px;padding:22px; }
.prose { font-size:14px;line-height:1.8; }
.vtitle { font:700 20px/1.35 var(--ui);letter-spacing:-.025em; }
.vsub,.edit-sub,.set-note,.lockmsg,.metnote { font-size:12px;line-height:1.7; }
.shead { padding:24px;border:1px solid var(--bdr2);border-radius:16px;margin-bottom:20px;
  background:linear-gradient(110deg,rgba(255,182,39,.06),transparent 70%),var(--panel); }
body.p2 .shead { background:linear-gradient(110deg,rgba(0,229,255,.07),transparent 70%),var(--panel); }
.sh-date { font:500 11px/1.6 var(--ui-mono);letter-spacing:.06em; }
.sh-name { font:700 clamp(24px,3vw,32px)/1.2 var(--ui);letter-spacing:-.035em;margin-top:10px;text-shadow:none; }
.sh-prog { font-size:13px;margin-top:8px; }
.calbar-t { font:600 12px var(--ui-mono);letter-spacing:.06em; }
.calbar-b,.sh-edit { min-height:44px;font:600 12px var(--ui);letter-spacing:.02em;padding:10px 14px; }
.wstrip { gap:8px;margin-bottom:20px; }
.wpill { min-width:0;padding:12px 4px;border-radius:11px; }
.wpill .wd { font:600 10px var(--ui-mono);letter-spacing:.02em; }
.wpill .wn { font-size:18px;margin-top:6px; }
.wpill .wtag span { font:500 8px/1.4 var(--ui-mono);letter-spacing:0; }
.wpill.fut { opacity:.6; }
.btn,body.p2 .btn { min-height:48px;font:700 14px/1.35 var(--ui);letter-spacing:.015em;padding:14px 18px;
  box-shadow:0 4px 18px rgba(0,0,0,.18);background:var(--accent);color:#06101a;border:1px solid transparent;border-radius:11px; }
.btn.ghost,body.p2 .btn.ghost { background:transparent;color:var(--sub);border-color:var(--bdr2);box-shadow:none;font-size:13px;padding:12px 16px; }
.btn.done,body.p2 .btn.done { background:var(--panel2);color:var(--win);border-color:rgba(57,255,20,.42);box-shadow:none; }
.btn:disabled,body.p2 .btn:disabled { background:var(--panel2);color:var(--mut);border-color:var(--bdr);box-shadow:none; }
.subwrap { margin:18px 0 28px; }
.subwrap .btn { min-height:54px; }
.exc { border-radius:14px;margin-bottom:14px; }
.exc-h { padding:16px;gap:12px; }
.exc-n { font-size:16px;line-height:1.4; }
.exc-n[data-swap] { text-decoration:underline;text-decoration-color:var(--bdr2);text-underline-offset:4px;min-height:44px;display:flex;align-items:center; }
.exc-s,.exc-last { font-size:12px;line-height:1.6; }
.exc-b { padding:0 16px 16px; }
.srow,.shdr { grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) 22px 44px;gap:8px; }
.shdr { font:600 10px var(--ui-mono);letter-spacing:.04em; }
.sin { min-height:48px;font-size:17px;border-color:var(--bdr2); }
.sdel,.exc-h .exc-del { width:44px;height:44px;border-radius:9px; }
.exc-h .exc-del { font-size:17px; }
.addex,.addact,#addEx,#addAct,.addex[data-addset] { min-height:46px;font:600 13px/1.4 var(--ui);letter-spacing:.02em;padding:12px 14px; }
.ss-bar { gap:10px; }
.ss-head { flex-wrap:wrap;gap:8px; }
.ss-go,.ss-head button,.ss-head .ss-tap,.wt-undo button,.exc-conv,.chip-sel,.rpt-pill,.csw-rpill,
.pview,.wl-src,.wl-chip,.ed-tg,.pick-cat,.load-chip { min-height:44px;font-family:var(--ui);font-size:12px;letter-spacing:.015em;padding:10px 12px; }
.ss-head span { min-width:72px; }
.actbtn { min-height:58px;padding:14px 16px; }
.actbtn-n { font-size:16px; }
.actbtn-c { font:500 11px var(--ui-mono);letter-spacing:.02em; }
.actdel { min-height:44px;padding:8px 12px;font:600 12px var(--ui); }
.mins label,.share-row .lbl { font-size:13px; }
.note-in { font-size:16px;padding:14px;min-height:100px; }
.disc-h { min-height:44px;font-size:13px; }
.confirm .ct .a,.confirm.compact .ct .a { font-size:14px; }
.confirm .ct .b { font-size:12px; }
.toggle { width:48px;height:32px; }
.toggle .kn { top:5px;left:5px; }
.toggle.on .kn { left:23px; }
.share-row { min-height:60px; }
.pcard { padding:28px 20px;border-width:1px;border-radius:16px; }
.pcard.lead { padding-top:34px; }
.p-nm { font:700 16px/1.4 var(--ui);text-shadow:none; }
.p-rk,.p-pl,.ds-l,.st-l,.wtsum-t i,.rpt-tl { font:600 10px/1.6 var(--ui-mono);letter-spacing:.08em; }
.p-pts { font-size:clamp(30px,6vw,52px); }
.bgrid { grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px; }
.bg { padding:22px 14px;opacity:.6; }
.bg.got { opacity:1; }
.bg-n { font:650 14px/1.4 var(--ui); }
.bg-d { font-size:12px;line-height:1.6; }
.rc { padding:22px;border-width:1px; }
.rc-n { font:650 15px/1.4 var(--ui); }
.wk { min-height:60px;padding:14px; }
.wk-n,.wk-w { font-family:var(--ui-mono);font-size:11px; }
.legend .lg { font-size:11px;padding:7px 10px; }
.chipx { font-size:12px;padding:7px 10px; }
.vs { gap:16px;margin-bottom:20px; }
.duel { border-width:1px; }
.duel-w { font:650 16px var(--ui);text-shadow:none; }
.sgrid { gap:12px; }
.st { padding:20px 12px; }
.st-n { font-size:26px; }
.exp { padding:18px;gap:16px;min-height:82px;border-radius:14px; }
.en { font:650 16px/1.4 var(--ui);letter-spacing:0; }
.ed { font-size:12px;line-height:1.6; }
.ea { font:600 11px var(--ui-mono); }
.rpt-mod { margin-top:18px; }
.rpt-mh span:first-child { font:650 15px/1.4 var(--ui);letter-spacing:0; }
.rpt-mh { flex-wrap:wrap; }
.rpt-sub,.rpt-note,.rpt-dim,.rpt-mn { font-size:12px; }
.rpt-tn { font-size:24px; }
.rpt-row { padding-block:8px; }
.csw-card { border-width:1px;padding:0 18px 20px; }
.csw-pname,.cpf-name { font:650 14px/1.4 var(--ui);letter-spacing:0; }
.csw-biglab,.csw-weeknm,.csw-sub,.cpf-note { font-family:var(--ui-mono);font-size:11px;letter-spacing:.06em; }
.csw-weekhd { font:600 14px/1.5 var(--ui); }
.csw-mode { flex-wrap:wrap; }
.csw-mode .csw-rpill { min-width:120px; }
.cpf-select { min-height:46px;font-size:14px; }
.cpf-info { width:44px;height:44px;flex-shrink:0; }
.calbox,.editbox,.pickbox { border-radius:20px;max-height:calc(94dvh - var(--st) - var(--sb));padding:22px; }
.editbox,.pickbox { max-width:600px; }
.calhead { gap:12px;margin-bottom:20px; }
.caltitle { font:700 19px/1.35 var(--ui);letter-spacing:-.02em; }
.calnav,.calx { width:44px;height:44px; }
.edit-foot,.set-foot { flex-wrap:wrap;gap:10px;padding-top:16px; }
.edit-foot .btn.ghost { flex:1;white-space:normal; }
.edit-foot .btn { flex:1;min-width:150px; }
.ed-name,.ed-acts,.ed-note,.ed-sets,.ed-reps,.pick-search,.mail-in { font-size:16px;min-height:46px; }
.ed-day { padding:16px;margin-bottom:14px; }
.ed-day-h { flex-wrap:wrap;gap:12px; }
.ed-ex { grid-template-columns:minmax(0,1fr) 48px 56px 44px;gap:6px; }
.ed-x { height:44px; }
.ed-ex-n { min-height:44px;font-size:13px; }
.ed-lbl,.set-k { font:600 12px/1.5 var(--ui);letter-spacing:.015em; }
.set-h { font:650 15px var(--ui);letter-spacing:0; }
.set-row { gap:18px;padding-block:12px; }
.set-v { font-size:13px;overflow-wrap:anywhere; }
.pick-item { padding:14px;min-height:56px; }
.wl-name,.wl-dname { font:700 20px/1.3 var(--ui);letter-spacing:-.02em; }
.wl-save,.wl-save.big,.wl-back,.wtsum-x { width:44px;height:44px; }
.tabs { height:calc(var(--nav-h) + var(--sb));padding:8px 4px calc(var(--sb) + 8px); }
.tab { min-width:0;min-height:52px;font:600 10px/1.2 var(--ui);letter-spacing:.035em;gap:7px;padding:9px 2px;border-radius:10px; }
.tab.on,body.p2 .tab.on { text-shadow:none;background:rgba(255,255,255,.055); }
.tab .ti { width:23px;height:23px; }
.gate .boot-tag { font-size:14px;line-height:1.75;max-width:400px; }
.gate .boot-sub { font-family:var(--ui-mono);font-size:10px; }
.gate .splash-lockup { filter:drop-shadow(0 0 14px rgba(0,229,255,.12)); }
.lf-t { font-size:13px; }
.mail-btn,.gbtn { min-height:50px;font:650 14px var(--ui);letter-spacing:.02em; }
.mail-alt,.linkbtn { min-height:44px;font-size:13px; }
.err { font-size:13px;line-height:1.6; }
@media (hover:hover) {
  :is(.btn,.addex,.addact,.calbar-b,.sh-edit,.exp,.who .sw):not(:disabled):hover { filter:brightness(1.1);border-color:var(--accent); }
}
@media (min-width:1100px) {
  .wrap { padding-top:12px; }
  .tabs { padding-inline:max(4px,calc((100vw - 1032px)/2)); }
  /* Preserve the existing sliding indicator's relation to its six tabs. */
  .tabs::after { width:calc(1032px / var(--tab-n));left:calc((100vw - 1032px)/2); }
}
@media (max-width:700px) {
  .wrap { padding-inline:16px; }
  .marquee { grid-template-columns:1fr;gap:10px;margin-bottom:24px;padding-top:calc(var(--st) + 24px); }
  .mq-title .mq-lockup { height:28px;max-width:calc(100vw - 100px); }
  .who { grid-column:1;grid-row:3;justify-self:start;gap:8px;margin-top:8px;font-size:9px; }
  .who .sw { padding-inline:10px; }
  .ux-heading { gap:16px;margin-bottom:20px; }
  .ux-heading p { font-size:13px; }
  .ux-mark { width:44px;height:44px;border-radius:12px; }
  .ux-guide { gap:8px 16px; }
  .ux-guide span { font-size:11px; }
  .panel,.vcard,.duel,.board,.rpt-mod,.shead { padding:16px; }
  .wstrip { gap:5px; }
  .wpill { padding:11px 2px; }
  .wpill .wtag span { font-size:7px; }
  .exc-h { padding:14px 12px;gap:8px; }
  .exc-b { padding:0 12px 14px; }
  .srow,.shdr { gap:5px;grid-template-columns:20px minmax(0,1fr) minmax(0,1fr) 18px 44px; }
  .vs { gap:8px; }
  .pcard { padding:24px 10px 18px; }
  .p-nm { font-size:14px; }
  .p-row { gap:5px; }
  .chipx { font-size:11px;padding:6px; }
  .calmodal { padding:12px; }
  .calbox,.editbox,.pickbox { padding:16px; }
  .rpt-row { grid-template-columns:minmax(80px,1fr) 1fr 65px;gap:6px; }
}
@media (max-width:360px) {
  .who { gap:5px;padding-left:8px; }.who b { font-size:12px; }
  .tab { font-size:9px;letter-spacing:0; }
  .ux-mark { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .screen.on { animation:none; }
  .btn,.tab,.exc,.wpill { transition:none; }
}

/* ---- v17.5: the top of every screen earns its height ----
   On a phone the lockup, season line, PLAYING AS chip, crew pills and the
   new hero heading spent ~250px before any content; the day's session sat
   below the fold. The header is one row, the heading one line, the
   three-step guide and the purpose line retire once a fighter has verified
   a day (html.ux-veteran, set by experience.js), and the crew pills sit
   under the heading instead of above it. Nothing here changes the desktop
   layout above 700px. */
@media (max-width:700px) {
  .marquee { grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 10px;align-items:center;
    padding:calc(var(--st) + 10px) 0 10px;margin-bottom:14px; }
  .mq-title .mq-lockup { height:22px;max-width:none; }
  .mq-sub { grid-column:1;grid-row:2;font-size:9px;margin:0; }
  .who { grid-column:2;grid-row:1/3;justify-self:end;margin:0;padding:3px 3px 3px 10px;gap:6px;font-size:9px; }
  .who b { font-size:12px; }
  .who .sw { min-height:34px;padding:7px 10px;font-size:11px; }
  .who #signOut { display:none; } /* Settings keeps SIGN OUT */
  .snd { width:38px;height:38px;top:auto;bottom:calc(var(--nav-h) + var(--sb) + 10px);right:10px;opacity:.75; }
  .ux-heading { margin:0 0 12px;gap:10px;align-items:flex-start; }
  .ux-eyebrow { margin-bottom:3px;font-size:9px; }
  .ux-heading h1 { font-size:22px;line-height:1.15; }
  .ux-heading p { font-size:12px;margin-top:4px;color:var(--mut); }
  .ux-mark { display:none; }
  .ux-guide { padding:8px 0;margin-bottom:14px;gap:6px 14px; }
  html.ux-veteran .ux-guide,
  html.ux-veteran .ux-heading p { display:none; }
  html.ux-veteran .ux-heading { margin-bottom:10px; }
  .csw-bar { margin:0 0 12px; }
  .calbar { margin-bottom:6px; }
}

/* ---- v17.7: crew boards read on a phone ----
   Eight scorecards at 165px each put the tug-of-war and the week strip
   1,300px down. Two tighter cards per row on a phone, the range and
   mode chips share one row, the week strip fits four across, and the
   PERFORMANCE rows give the number more room than the badge. */
@media (max-width:700px) {
  .csw-h { font-size:10px;letter-spacing:1.4px;margin-bottom:8px; }
  .csw-mode { gap:6px;margin-bottom:8px; }
  .csw-mode .csw-rpill { min-width:0;flex:1;padding:9px 6px;font-size:11px; }
  .csw-range { gap:6px;margin-bottom:8px; }
  .csw-range .csw-rpill { flex:1;text-align:center;padding:9px 6px;font-size:11px;min-height:40px; }
  .csw-grid { grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0; }
  .csw-card { padding:0 10px 12px;border-radius:14px; }
  .csw-leadstrip { margin:0 -10px 8px;padding:4px 0;font-size:6px; }
  .csw-leadstrip.off { height:16px;margin-bottom:8px; }
  .csw-pnum { font-size:10px; }
  .csw-pname { margin-top:4px;font-size:12px; }
  .csw-pname b { font-size:9px;margin-left:4px; }
  .csw-big { margin-top:6px;font-size:30px; }
  .csw-biglab { margin-top:4px;font-size:9px;letter-spacing:.12em; }
  .csw-chips { gap:4px;margin-top:8px; }
  .csw-chip { padding:3px 6px;font-size:10px;border-radius:7px; }
  .csw-sub { margin:14px 0 6px;font-size:10px; }
  .csw-barrow { grid-template-columns:minmax(64px,96px) 1fr 36px;gap:8px; }
  .csw-barnm { font-size:6px; }
  .csw-bartrk { height:12px; }
  .csw-weekbox { padding:10px 12px;margin-top:10px; }
  .csw-weekgrid { grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px; }
  .csw-weeknum { font-size:22px; }
  .csw-weeknm { font-size:8px;letter-spacing:.06em; }
  .csw-seg { width:14px;height:5px; }
  .csw-heatnm { font-size:9px;letter-spacing:.08em; }
  .cpf-chips { gap:6px;margin-bottom:8px; }
  .cpf-chips .csw-rpill { flex:1;text-align:center;min-width:0;padding:9px 6px;font-size:11px; }
  .cpf-hero { padding:12px 12px 10px;margin-bottom:10px; }
  .cpf-hero-v { font-size:32px; }
  .cpf-row { grid-template-columns:30px 1fr auto 34px;gap:6px;padding:8px 10px; }
  .cpf-name { font-size:13px; }
  .cpf-sub { font-size:10px;letter-spacing:.04em; }
  .cpf-val { font-size:17px; }
  .cpf-note { font-size:10px;line-height:1.45;margin-bottom:8px; }
  .cpf-explain { font-size:11px; }
  .cpf-pick { gap:8px; }
  .cpf-pick-l { display:none; }
  .csw-note { font-size:9px;line-height:1.5; }
}

/* ---- v17.8: Settings folds; Reports chips scroll ---- */
.set-block.set-fold > .set-h { cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;min-height:40px;user-select:none;-webkit-user-select:none; }
.set-block.set-fold > .set-h::after { content:'+';font:600 18px/1 var(--ui);color:var(--mut);flex:none; }
.set-block.set-fold.open > .set-h::after { content:'\2013'; }
.set-block.set-fold.open > .set-h { margin-bottom:10px; }
.set-block.set-fold:not(.open) > :not(.set-h) { display:none; }
.set-block.set-fold:not(.open) { padding-block:6px; }
.set-block.set-fold > .set-h:focus-visible { outline:2px solid var(--accent);outline-offset:2px;border-radius:6px; }
@media (max-width:700px) {
  .rpt-ranges { flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;margin-bottom:8px; }
  .rpt-ranges::-webkit-scrollbar { display:none; }
  .rpt-ranges .rpt-pill { flex:none;white-space:nowrap; }
  .rpt-tiles { grid-template-columns:repeat(2,1fr);gap:8px; }
  .rpt-tn { font-size:22px; }
  .rpt-bands { gap:3px; }
  .rpt-bands .rb { padding:5px 2px;font-size:12px; }
  .cpf-chips .csw-rpill { font-size:10px;letter-spacing:.3px;padding:9px 4px;white-space:nowrap; }
  .set-row { gap:12px;padding-block:10px; }
  .set-note { font-size:11.5px; }
}

/* ---- v17.9: two actions close the day ----
   The reflection composer and feed are gone from TODAY. What is left at
   the bottom of the screen is VERIFY DAY, SHARE WORKOUT under it, and one
   plain sentence saying what unlocks them. Both buttons are tall, set in
   the UI face at 16-17px, and keep their label readable when disabled -
   a dashed outline says "not yet", it does not fade the words away. */
.subwrap { display:flex;flex-direction:column;gap:10px;margin:24px 0 34px;padding-top:0; }
.subwrap .btn, .subwrap .btn.wide { margin:0; }
#subBtn { order:1;min-height:66px;font:800 17px/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;border-radius:14px;padding:16px 18px; }
#subBtn:disabled, body.p2 #subBtn:disabled { background:var(--panel2);color:var(--sub);border:1px dashed var(--bdr2);box-shadow:none;opacity:1; }
#shareDayBtn, body.p2 #shareDayBtn { order:2;min-height:60px;font:800 16px/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;border-radius:14px;padding:14px 18px;
  background:transparent;color:var(--accent);border:2px solid var(--accent);box-shadow:none; }
#shareDayBtn:active { background:rgba(255,255,255,.06); }
#shareDayBtn:disabled, body.p2 #shareDayBtn:disabled { color:var(--sub);border:2px dashed var(--bdr2);background:transparent;opacity:1;cursor:not-allowed; }
#lockMsg { order:3;font:600 13px/1.6 var(--ui);color:var(--sub);text-align:center;margin:2px 4px 0;letter-spacing:0; }
.subwrap.is-verified #lockMsg { order:0;font-weight:800;font-size:14px;color:var(--win);margin:0 0 2px; }
#revertBtn, body.p2 #revertBtn { order:4;min-height:44px;font:600 12px/1.2 var(--ui);letter-spacing:.04em;color:var(--mut);border:1px solid var(--bdr);background:transparent;box-shadow:none;margin-top:4px; }
@media (max-width:700px) {
  #subBtn { min-height:64px;font-size:16px; }
  #shareDayBtn { min-height:58px;font-size:15px; }
}

/* ---- v18.8: ERGONOMIC EXCELLENCE (add-on) ----
   A card above VERIFY DAY and one full-screen reference. Tuned for a
   phone first: every control is a real tap target, the comfort scale
   shows a blank as a dash rather than a zero, and nothing here borrows
   the win colour that the rest of the app reserves for a banked day. */
.ergo-card { border:1px solid var(--bdr);border-radius:14px;background:var(--panel);padding:14px;margin:18px 0 0; }
.ergo-h { display:flex;align-items:baseline;justify-content:space-between;gap:8px; }
.ergo-h b { font:800 12px/1.2 var(--ui);letter-spacing:.14em;color:var(--ergo); }
.ergo-h span { font:700 10px/1.2 var(--ui);letter-spacing:.12em;color:var(--mut); }
.ergo-day { margin-top:8px;font:800 15px/1.25 var(--ui);letter-spacing:.04em; }
.ergo-acts { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px; }
.ergo-act { display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:8px 6px;
  border:1px solid var(--bdr2);border-radius:11px;background:transparent;color:var(--sub);
  font:700 11px/1.2 var(--ui);letter-spacing:.06em;cursor:pointer; }
.ergo-act.done { border-color:var(--ergo);color:var(--ergo);background:rgba(255,255,255,.04); }
.ergo-act:active { transform:scale(.97); }
.ergo-tick { font-size:12px;line-height:1;width:10px;display:inline-block; }
.ergo-mb { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  border:1px solid var(--bdr);border-radius:11px;padding:6px 8px; }
.ergo-mbv { font:700 11px/1.2 var(--ui);letter-spacing:.08em;color:var(--sub); }
.ergo-mbv b { font-family:var(--num);font-size:18px;color:var(--fg,inherit);margin-right:4px; }
.ergo-step { width:44px;min-height:38px;border:1px solid var(--bdr2);border-radius:9px;background:transparent;
  color:var(--sub);font:700 18px/1 var(--ui);cursor:pointer; }
.ergo-step:active { background:rgba(255,255,255,.06); }
.ergo-metrics { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px; }
.ergo-metric { display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:8px 12px;
  border:1px solid var(--bdr2);border-radius:11px;background:transparent;cursor:pointer; }
.ergo-metric.open { border-color:var(--ergo); }
.ergo-mk { font:700 10px/1.2 var(--ui);letter-spacing:.12em;color:var(--mut); }
.ergo-mv { font-family:var(--num);font-size:18px;color:var(--sub); }
.ergo-metric.set .ergo-mv { color:var(--ergo); }
.ergo-strip { display:flex;gap:5px;margin-top:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px; }
.ergo-strip::-webkit-scrollbar { display:none; }
.ergo-dot { flex:none;width:34px;min-height:38px;border:1px solid var(--bdr2);border-radius:9px;background:transparent;
  color:var(--sub);font-family:var(--num);font-size:13px;cursor:pointer; }
.ergo-dot.on { border-color:var(--ergo);color:var(--ergo);background:rgba(255,255,255,.05); }
.ergo-dot.clr { color:var(--mut);border-style:dashed; }
.ergo-legend { margin-top:6px;font:600 10.5px/1.5 var(--ui);color:var(--mut); }
.ergo-foot { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px; }
.ergo-streak { font:800 10px/1.2 var(--ui);letter-spacing:.12em;color:var(--ergo); }
.ergo-streak.off { color:var(--mut); }
.ergo-foot .btn.mini { margin:0;flex:none; }
.ergo-teaser .ergo-tl { display:block; }
.ergo-teaser b { display:block;font:800 12px/1.3 var(--ui);letter-spacing:.14em;color:var(--ergo); }
.ergo-teaser span { display:block;margin-top:5px;font:600 12px/1.6 var(--ui);color:var(--sub); }
.ergo-trow { display:flex;gap:8px;margin-top:11px; }
.ergo-trow .btn.mini { margin:0; }

/* the reference */
.ergo-box-wrap { max-width:720px;width:100%; }
.ergo-body { overflow-y:auto;max-height:78vh;padding:4px 2px 10px; }
.ergo-sect { border-top:1px solid var(--bdr);padding:2px 0; }
.ergo-sh { width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;
  background:none;border:0;color:inherit;font:800 11px/1.3 var(--ui);letter-spacing:.12em;text-align:left;cursor:pointer; }
.ergo-car { font:600 17px/1 var(--ui);color:var(--mut); }
.ergo-sect:not(.open) .ergo-sb { display:none; }
.ergo-sb { padding-bottom:12px; }
.ergo-why { font:600 12.5px/1.65 var(--ui);color:var(--sub);margin:4px 0 10px; }
.ergo-ex { list-style:none;margin:0;padding:0; }
.ergo-ex li { border-left:2px solid var(--bdr2);padding:0 0 0 11px;margin-bottom:12px; }
.ergo-ex b { display:block;font:700 13.5px/1.35 var(--ui); }
.ergo-dose { display:block;margin-top:2px;font-family:var(--num);font-size:12px;color:var(--ergo);letter-spacing:.04em; }
.ergo-cue { display:block;margin-top:4px;font:500 12px/1.6 var(--ui);color:var(--mut); }
.ergo-plain { margin:0 0 10px;padding-left:16px; }
.ergo-plain li { font:500 12.5px/1.65 var(--ui);color:var(--sub);margin-bottom:7px; }
.ergo-plain li.here { color:var(--ergo); }
.ergo-plain li i { font-style:normal;font-weight:700; }
.ergo-wd { display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:14px 0 8px; }
.ergo-wd b { font:800 12px/1.2 var(--ui);letter-spacing:.06em; }
.ergo-wd span { font-family:var(--num);font-size:11px;color:var(--mut); }
.ergo-avoid { border:1px solid var(--bdr2);border-radius:10px;padding:9px 11px;font:600 12px/1.6 var(--ui);color:var(--sub); }
.ergo-check { width:100%;display:flex;align-items:flex-start;gap:10px;text-align:left;background:none;
  border:1px solid var(--bdr);border-radius:11px;padding:11px;margin-bottom:8px;color:inherit;cursor:pointer; }
.ergo-check.done { border-color:var(--ergo); }
.ergo-box { flex:none;width:20px;height:20px;border:1px solid var(--bdr2);border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ergo);margin-top:1px; }
.ergo-check.done .ergo-box { border-color:var(--ergo); }
.ergo-ct b { display:block;font:700 12.5px/1.35 var(--ui); }
.ergo-ct span { display:block;margin-top:3px;font:500 11.5px/1.6 var(--ui);color:var(--mut); }
.ergo-stats { display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0; }
.ergo-stats > div { border:1px solid var(--bdr);border-radius:11px;padding:10px; }
.ergo-stats b { display:block;font-family:var(--num);font-size:22px; }
.ergo-stats span { display:block;margin-top:3px;font:700 9px/1.3 var(--ui);letter-spacing:.1em;color:var(--mut); }
.ergo-red { border:1px solid var(--dng,#ff4d4d);border-radius:12px;padding:12px;margin-top:14px; }
.ergo-red b { display:block;font:800 11px/1.3 var(--ui);letter-spacing:.12em;color:var(--dng,#ff4d4d); }
.ergo-red ul { margin:8px 0;padding-left:16px; }
.ergo-red li { font:500 12px/1.6 var(--ui);color:var(--sub); }
.ergo-red span { display:block;font:600 12px/1.6 var(--ui);color:var(--sub); }
.ergo-note { margin-top:14px;font:500 11.5px/1.7 var(--ui);color:var(--mut); }
.ergo-actions { display:flex;flex-wrap:wrap;gap:8px;margin-top:12px; }
.ergo-actions .btn.mini { margin:0; }
@media (max-width:700px) {
  .ergo-acts { gap:6px; }
  .ergo-act { font-size:10px;letter-spacing:.04em;min-height:44px; }
  .ergo-stats { grid-template-columns:1fr 1fr; }
  .ergo-body { max-height:72vh; }
}

/* ── v19.0 · PROGRAM CONTROL CENTER ────────────────────────────────────
   The card that answers "how far through am I, and when does this end"
   before the week editor gets a chance to ask you about Monday. It sits
   at the top of the program sheet and owns no scroll of its own — the
   day cards below keep it.                                            */
.pc-host { margin: 0 0 10px; }
.pc-card {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
}
.pc-k {
  font-size: 10px; letter-spacing: .18em; opacity: .6;
  text-transform: uppercase; margin-bottom: 2px;
}
.pc-name { font-size: 19px; line-height: 1.15; margin: 0 0 6px; }
.pc-week { font-size: 12px; letter-spacing: .12em; opacity: .85; margin-bottom: 6px; }
.pc-pct { font-size: 12px; letter-spacing: .1em; opacity: .75; margin: 5px 0 8px; }

/* The bar is a fact, not decoration: with no length there is nothing to
   fill, so it renders hatched rather than empty — an empty bar reads as
   0%, and 0% is a claim this run cannot make. */
.pc-bar {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,.1);
}
.pc-bar > i {
  display: block; height: 100%; border-radius: 99px;
  background: currentColor; opacity: .85;
}
.pc-bar.unknown {
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.16) 0 5px, rgba(255,255,255,.04) 5px 10px);
}

.pc-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px; margin: 10px 0 2px;
}
.pc-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-ck { font-size: 9px; letter-spacing: .16em; opacity: .5; text-transform: uppercase; }
.pc-cv { font-size: 13px; letter-spacing: .04em; overflow-wrap: anywhere; }

.pc-note { font-size: 11px; line-height: 1.5; opacity: .62; margin: 8px 0 0; }
.pc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pc-host .btn.mini { flex: 0 0 auto; }

.pc-hist { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pc-run {
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  padding: 9px 10px; background: rgba(255,255,255,.02);
}
.pc-run-h { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.pc-run-n { font-size: 12px; letter-spacing: .08em; min-width: 0; overflow-wrap: anywhere; }
.pc-run-s { font-size: 9px; letter-spacing: .14em; opacity: .55; white-space: nowrap; }
.pc-run-d { font-size: 11px; opacity: .55; margin-top: 3px; letter-spacing: .06em; }
.pc-run-p { font-size: 11px; opacity: .8; margin-top: 2px; letter-spacing: .06em; }

@media (min-width: 560px) {
  .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── v19.2 · START, REPEAT, STOP ───────────────────────────────────────
   The sheet that turns an open-ended week into a finite run. Its whole
   job is to put the finish date on screen before the athlete commits to
   it, so the date is a decision rather than a discovery.             */
.ps-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ps-run-acts { margin-top: 7px; }

.ps-box { max-height: 86vh; overflow: auto; }
.ps-h { font-size: 13px; letter-spacing: .18em; margin: 2px 0 4px; opacity: .75; }
.ps-name { font-size: 19px; line-height: 1.15; margin: 0 0 10px; }

.ps-prior {
  font-size: 11px; line-height: 1.6; letter-spacing: .06em;
  border-left: 2px solid currentColor; padding: 2px 0 2px 9px;
  margin: 0 0 8px; opacity: .8;
}

.ps-lbl {
  display: block; font-size: 9px; letter-spacing: .18em;
  opacity: .55; text-transform: uppercase; margin: 10px 0 4px;
}
.ps-in {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 15px; letter-spacing: .04em;
  color: inherit; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  padding: 9px 10px; min-height: 44px;   /* a real tap target on a phone */
}
.ps-in:focus { outline: 2px solid currentColor; outline-offset: 1px; }
.ps-weeks { display: flex; align-items: center; gap: 8px; }
.ps-weeks .ps-in { flex: 1 1 auto; min-width: 0; }
.ps-unit { font-size: 10px; letter-spacing: .16em; opacity: .55; white-space: nowrap; }

.ps-end {
  display: flex; flex-direction: column; gap: 2px;
  margin: 12px 0 0; padding: 10px 11px;
  border: 1px dashed rgba(255,255,255,.22); border-radius: 10px;
}
.ps-end .ps-ck { font-size: 9px; letter-spacing: .18em; opacity: .55; }
.ps-end .ps-cv { font-size: 17px; letter-spacing: .04em; }

.ps-note { font-size: 11px; line-height: 1.55; opacity: .6; margin: 9px 0 0; }
.ps-foot { display: flex; gap: 8px; margin-top: 14px; }
.ps-foot .btn { flex: 1 1 0; min-width: 0; }

/* Daily Ergonomics has its own identity, independent of player colors. */
:root { --ergo:#35d0f0; --ergo-dim:rgba(53,208,240,.55); --ergo-bg:rgba(53,208,240,.07); --ergo-glow:rgba(53,208,240,.16); }
#ergoHost { min-width:0; max-width:100%; }
.ergo-card { border-color:var(--ergo-dim); background:linear-gradient(110deg,var(--ergo-bg),transparent 70%),var(--panel); margin:12px 0; }
.ergo-card.complete { border-color:var(--ergo); }
.ergo-h { align-items:center; flex-wrap:wrap; }
.ergo-h b { display:flex; align-items:center; gap:8px; }
.ergo-icon { width:24px; height:24px; flex:none; color:var(--ergo); }
.ergo-k { margin:14px 0 8px; font:700 10px/1.4 var(--ui); letter-spacing:.12em; color:var(--ergo); }
.ergo-context { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; font-size:12px; }
.ergo-context select { flex:1; min-width:0; max-width:100%; min-height:44px; padding:8px; color:var(--fg,#eee); background:var(--panel); border:1px solid var(--ergo-dim); border-radius:8px; font:inherit; }
.ergo-ex-track { width:100%; display:flex; gap:10px; align-items:flex-start; text-align:left; padding:12px; margin:7px 0; color:inherit; background:var(--panel); border:1px solid var(--bdr2); border-radius:10px; cursor:pointer; }
.ergo-ex-track > span:last-child { min-width:0; overflow-wrap:anywhere; }
.ergo-ex-track b { display:block; font:700 14px/1.35 var(--ui); }
.ergo-ex-track.done, .ergo-act.done { border-color:var(--ergo); background:var(--ergo-bg); }
.ergo-ex-track.done .ergo-box { color:var(--ergo); border-color:var(--ergo); }
.ergo-ex-track:disabled { opacity:.55; cursor:default; }
.ergo-routine summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--ergo); font:700 12px/1.5 var(--ui); }
.ergo-routine summary::before { content:'＋'; margin-right:8px; }
.ergo-routine[open] summary::before { content:'−'; }
.ergo-reminder { display:flex; align-items:center; gap:8px; margin:10px 0; padding:10px; border-radius:9px; background:var(--ergo-bg); font:500 12px/1.5 var(--ui); }
.ergo-reminder button { flex:none; width:44px; height:44px; color:var(--ergo); background:none; border:0; font-size:22px; }
.ergo-review { display:block; width:100%; min-height:44px; margin-top:10px; padding:10px; color:var(--ergo); border:1px solid var(--ergo-dim); border-radius:8px; background:none; text-align:left; font:inherit; font-size:12px; }
.ergo-save { font-size:11px; color:var(--mut); }
.ergo-foot { flex-wrap:wrap; }
.ergo-strip { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); overflow:visible; }
.ergo-dot { width:100%; min-height:44px; }
.ergo-week-dot { display:block; width:6px; height:6px; margin:4px auto 0; border-radius:50%; background:var(--ergo); }
.ergo-box-wrap { display:flex; flex-direction:column; max-height:calc(100dvh - 32px); overflow:hidden; }
.ergo-box-wrap .calhead { flex:none; gap:10px; flex-wrap:wrap; }
.ergo-body { min-height:0; max-height:none; overflow:auto; overscroll-behavior:contain; }
.ergo-box-wrap .calhead b { color:var(--ergo); }
.ergo-card button:focus-visible, .ergo-box-wrap button:focus-visible, #ergoSettingsHost button:focus-visible { outline:2px solid var(--ergo); outline-offset:3px; }
#ergoSettingsHost .btn { color:var(--ergo); border-color:var(--ergo-dim); }
.rpt-ergo { border:1px solid var(--ergo-dim); border-radius:14px; padding:12px; margin:16px 0; background:var(--ergo-bg); min-width:0; }
.rpt-ergo .rpt-mh, .rpt-ergo .rpt-tn { color:var(--ergo); }
.rpt-ergo .rpt-dow { overflow-x:auto; max-width:100%; }
.rpt-ergo .rpt-dowc { min-width:56px; }
.rpt-ergo .rpt-dbar > div { background:var(--ergo); }
.rpt-ergo .ergo-trend-table { width:100%; font-size:11px; border-collapse:collapse; }
.rpt-ergo .ergo-trend-table td, .rpt-ergo .ergo-trend-table th { padding:6px 3px; text-align:left; border-bottom:1px solid var(--bdr); }

.ergo-foot .btn.mini { width:auto; min-height:44px; }

/* ---- v19.3 - CHOOSE A PROGRAM (progpick-1.0) -----------------------
   Deliberately palette-free: everything here inherits from the sheet it
   sits in, using currentColor and translucent overlays, so the picker
   cannot drift away from the app's theme the way a hard-coded colour
   would. */

.pk-box { max-width: 560px; width: 100%; }
#pkBody { display: flex; flex-direction: column; gap: 10px; max-height: 82vh; overflow: auto; }

.pk-h { margin: 0; letter-spacing: .06em; }
.pk-sub { margin: 0; font-size: 11px; line-height: 1.5; opacity: .72; }

.pk-q {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  font: inherit; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: inherit; background: rgba(127, 127, 127, .10);
  border: 1px solid rgba(127, 127, 127, .34); border-radius: 8px;
}
.pk-q::placeholder { opacity: .45; letter-spacing: .08em; }

.pk-grp {
  margin: 6px 0 0; font-size: 10px; letter-spacing: .16em;
  opacity: .58; text-transform: uppercase;
}
.pk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.pk-row {
  border: 1px solid rgba(127, 127, 127, .26); border-radius: 10px;
  background: rgba(127, 127, 127, .06); overflow: hidden;
}
.pk-row.open { border-color: rgba(127, 127, 127, .52); background: rgba(127, 127, 127, .11); }

.pk-head {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  width: 100%; padding: 10px 12px; text-align: left;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.pk-name { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.pk-badge {
  justify-self: end; align-self: center; font-size: 9px; letter-spacing: .12em;
  padding: 2px 6px; border-radius: 999px; opacity: .8;
  border: 1px solid rgba(127, 127, 127, .45);
}
.pk-meta {
  grid-column: 1 / -1; font-size: 10px; letter-spacing: .08em; opacity: .62;
}

.pk-tag { margin: 0 12px 8px; font-size: 11px; line-height: 1.5; opacity: .72; }
.pk-phases { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.pk-phases .btn.on { outline: 1px solid currentColor; opacity: 1; }

.pk-days { list-style: none; margin: 0 12px 10px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.pk-day {
  display: grid; grid-template-columns: 42px 1fr; gap: 2px 8px;
  padding: 5px 8px; border-radius: 6px; background: rgba(127, 127, 127, .09);
  font-size: 11px;
}
.pk-day b { letter-spacing: .1em; opacity: .62; font-weight: 600; }
.pk-day span { letter-spacing: .05em; text-transform: uppercase; }
.pk-day i { grid-column: 2; font-style: normal; font-size: 10px; opacity: .6; line-height: 1.45; }
.pk-day.rest { opacity: .5; }
.pk-day.rest span { letter-spacing: .14em; }

.pk-acts-row { padding: 0 12px 12px; }
.pk-note { font-size: 11px; opacity: .62; }

.pk-empty { margin: 4px 0; font-size: 12px; opacity: .7; line-height: 1.5; }
.pk-foot { padding-top: 4px; }

.pk-acts { margin-top: 10px; }

/* CHANGE PROGRAM on the TODAY card inherits CUSTOMIZE PROGRAM's classes,
   so it needs no styling of its own - only a little air when the two end
   up stacked rather than side by side. */
.pk-today { margin-top: 8px; }

@media (max-width: 420px) {
  .pk-day { grid-template-columns: 36px 1fr; }
  .pk-head { padding: 9px 10px; }
}

/* ---- v19.5 - LAST performance recency (exrec-1.0) ------------------
   Metadata, not emphasis. Orange stays reserved for progression; this
   is quieter than the performance it annotates and must never compete
   with the TODAY line. No hard-coded colour: it inherits whatever the
   LAST line already is and simply sits at lower contrast. */

.exc-age {
  margin-left: .35em;
  font-size: .78em;          /* §34: 0.72-0.82em of the performance */
  opacity: .62;              /* §34: ~0.6-0.75 */
  white-space: nowrap;       /* "4 WKS AGO" never breaks mid-phrase ... */
  color: inherit;
}

/* ... but it may wrap onto its own line under LAST rather than being
   truncated (§35). The LAST row is allowed to run to two lines; nothing
   here sets a height, so the card grows only when it genuinely must. */
.exc-last { overflow-wrap: anywhere; }

/* The visible LAST text is wrapped so it can be hidden from screen
   readers in favour of the spoken sentence below. display:contents
   means the wrapper generates no box at all, so the rendered layout is
   byte-identical to before this change. */
.exc-lastv { display: contents; }

/* §36. Present to assistive technology, invisible and zero-size to
   everything else - it must not affect the card's height. */
.exc-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* §20. An explicit absence, never a bare dash and never "0 WKS AGO". */
.exc-last.exc-none { opacity: .5; }

/* ── v19.9 · the Programs workspace ─────────────────────────────────────
   Four tabs across one sheet. The bar scrolls sideways rather than
   wrapping, because a wrapped tab bar moves the content under it every
   time the selection changes. */
.pk-tabs { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:2px 0 10px; margin:0 0 2px; }
.pk-tabs::-webkit-scrollbar { display:none; }
.pk-tab { flex:0 0 auto; background:none; border:1px solid var(--bdr2);
  border-radius:999px; color:var(--mut); font:700 11px/1 var(--arc);
  letter-spacing:1.4px; padding:9px 14px; min-height:36px; cursor:pointer;
  transition:.15s; }
.pk-tab.on { color:var(--p1); border-color:var(--p1); box-shadow:0 0 10px var(--p1g); }
body.p2 .pk-tab.on { color:var(--p2); border-color:var(--p2); box-shadow:0 0 10px var(--p2g); }
.pk-embed { margin-top:6px; }
.pk-embed .set-note { margin:6px 0; }

/* ── v20.0 · the program band on the month grid ─────────────────────────
   Painted as a bar under the number rather than as a background, so the
   cell's own status colours - verified, has-content, shield, earned rest
   - are never covered by it. Membership is quieter than what you did. */
.cc { position:relative; }
.cc.prun::before {
  content:''; position:absolute; left:0; right:0; bottom:3px; height:3px;
  background:var(--p1); opacity:.45; pointer-events:none;
}
body.p2 .cc.prun::before { background:var(--p2); }
.cc.prun-a::before { left:20%; border-top-left-radius:3px; border-bottom-left-radius:3px; }
.cc.prun-z::before { right:20%; border-top-right-radius:3px; border-bottom-right-radius:3px; }
/* An open run has no drawn finish, because no finish was chosen. The band
   simply fades out at today rather than ending in a cap. */
.cc.prun-open::before { opacity:.26; }
/* Planned rest is not earned rest, and must not read as it. */
.cc.prest::before { opacity:.16; height:2px; }
.cc.prun-a.prest::before, .cc.prun-z.prest::before { opacity:.3; }

/* ── v20.1 · more than one program at a time ────────────────────────────
   Cards stack. The count line only appears when there is something to
   count, because "1 PROGRAMS RUNNING" is noise. */
.pc-multi { font:700 10px/1 var(--arc); letter-spacing:1.6px; color:var(--mut);
  margin:0 0 8px; }
.pc-host .pc-card + .pc-card { margin-top:10px; }
.ps-add { margin-top:10px; }

/* ── v20.2 · which program these numbers were made in ───────────────────
   Context, not a statistic. It sits with the date range, in the same
   quiet weight, because it describes the numbers rather than being one. */
.rpt-prog { font:700 10px/1.5 var(--arc); letter-spacing:1.5px; color:var(--mut);
  margin:2px 0 10px; opacity:.85; }

/* ── v20.3 · the unsaved-week bar ───────────────────────────────────────
   It sits above the day cards, and it is styled as a notice rather than
   an alarm: nothing has gone wrong, and nothing has been lost. */
.pd-bar { border:1px solid var(--bdr2); border-radius:14px; padding:12px 14px;
  margin:0 0 12px; background:rgba(255,255,255,.02); }
.pd-k { font:700 11px/1 var(--arc); letter-spacing:1.6px; color:var(--p1); }
body.p2 .pd-k { color:var(--p2); }
.pd-note { font:400 12px/1.5 var(--ui); color:var(--mut); margin:6px 0 10px; }
.pd-acts { display:flex; gap:8px; flex-wrap:wrap; }

/* ── v20.5 · five day kinds, and copying a day ──────────────────────────
   Five buttons do not fit across a phone, so the row scrolls sideways
   rather than wrapping - a wrapped row moves the card under it every time
   the selection changes. */
.ed-type { display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; max-width:62%; }
.ed-type::-webkit-scrollbar { display:none; }
.ed-type .ed-tg { flex:0 0 auto; }
.ed-copy { display:flex; align-items:center; gap:8px; margin:6px 0 2px;
  font:700 10px/1 var(--arc); letter-spacing:1.4px; color:var(--mut); }
.ed-copy.on { color:var(--p1); }
body.p2 .ed-copy.on { color:var(--p2); }
.ed-rest { font:400 12px/1.5 var(--ui); color:var(--mut); padding:10px 0 2px; }

/* ── v20.6 · what a row says beyond name, sets and reps ─────────────────
   The detail is a second line under the row, not more controls on it. A
   row nobody has said anything about looks exactly as it did. */
.ed-more { background:none; border:1px solid var(--bdr2); border-radius:8px;
  color:var(--mut); font:700 12px/1 var(--ui); width:30px; height:30px;
  cursor:pointer; flex:0 0 auto; }
.ed-more.has { color:var(--p1); border-color:var(--p1); }
body.p2 .ed-more.has { color:var(--p2); border-color:var(--p2); }
.ed-exd { font:700 9.5px/1.5 var(--arc); letter-spacing:1.2px; color:var(--mut);
  padding:0 0 8px 2px; opacity:.85; }
.ed-exd-edit { display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:6px 10px; align-items:center; padding:2px 2px 10px; }
.ed-exd-edit .ed-lbl { margin:0; }
.ed-exd-edit .ed-d { width:100%; min-width:0; }

/* ── v20.7 · making a superset in the editor ────────────────────────────
   The pick marker sits ahead of the exercise name and is invisible until
   it is on, so a day nobody is grouping looks exactly as it did. */
.ed-pick { background:none; border:1px solid var(--bdr2); border-radius:6px;
  width:22px; height:22px; flex:0 0 auto; cursor:pointer; color:transparent;
  font:700 12px/1 var(--ui); padding:0; }
.ed-pick.on { color:var(--p1); border-color:var(--p1); }
body.p2 .ed-pick.on { color:var(--p2); border-color:var(--p2); }
.ed-group { display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:4px 2px 10px; font:700 10px/1 var(--arc); letter-spacing:1.3px;
  color:var(--mut); }
.ed-sbs { padding:2px 0 8px; }
.ed-sb { border:1px solid var(--bdr2); border-radius:12px; padding:10px 12px;
  margin:0 0 8px; }
.ed-sb-k { font:700 10px/1.4 var(--arc); letter-spacing:1.3px; color:var(--p1); }
body.p2 .ed-sb-k { color:var(--p2); }
.ed-sb-f { display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:6px 10px; align-items:center; margin-top:8px; }
.ed-sb-f input { width:100%; min-width:0; }

/* ── v20.8 · preview before save ────────────────────────────────────────
   The destructive pair moves behind ••• so the footer's two visible
   buttons are the two you actually want: look at it, then save it. */
.edit-more { display:flex; gap:8px; padding:0 0 8px; }
.edit-more.hidden { display:none; }
.pv-list { padding:2px 0 8px; }
.pv-day { border-bottom:1px solid var(--bdr2); padding:10px 0; }
.pv-day:last-child { border-bottom:0; }
.pv-dow { font:700 10px/1 var(--arc); letter-spacing:1.5px; color:var(--p1); }
body.p2 .pv-dow { color:var(--p2); }
.pv-n { font:700 14px/1.4 var(--ui); margin:4px 0 2px; }
.pv-m { font:700 9.5px/1.5 var(--arc); letter-spacing:1.2px; color:var(--mut); }
.pv-ex { font:400 12px/1.6 var(--ui); color:var(--mut); }
.pv-ch { border:1px solid var(--bdr2); border-radius:14px; padding:12px 14px;
  margin:0 0 12px; }
.pv-ch-k { font:700 11px/1 var(--arc); letter-spacing:1.6px; color:var(--p1); }
body.p2 .pv-ch-k { color:var(--p2); }
.pv-ch p { font:400 12px/1.6 var(--ui); color:var(--mut); margin:6px 0 0; }

/* ── v20.9 · the Programs sheet scrolls, and a card says what it is ─────
   .calbox was written for a month calendar: a max-height and nothing
   else. Four tabs of programs is taller than that, and because .calmodal
   centres its child, the overflow went off BOTH ends of the screen - the
   title sat above the top of the phone, unreachable, and scrolling moved
   the page behind instead of the sheet.

   The sheet is a column now: a pinned head, a pinned tab row, one
   scrolling region, and a pinned footer. That is the same shape .editbox
   and .pickbox have had all along; this one was the odd sheet out. */
#pkModal .pk-box {
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
  max-height:calc(94dvh - var(--st) - var(--sb));
}
#pkModal .calhead, #pkModal .pk-tabs, #pkModal .pk-foot { flex:0 0 auto; }
#pkModal .pk-scroll {
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding-right:2px;
}
#pkModal .pk-foot {
  padding-top:12px; margin-top:6px; border-top:1px solid var(--bdr2);
}
/* The title is the one thing that must never be clipped. */
#pkModal .calhead { min-height:34px; }
.pk-h { overflow-wrap:anywhere; }

/* What the program actually is, under its name, on every card - not only
   on the one that happens to be open. */
.pk-desc {
  grid-column:1 / -1; font:400 11.5px/1.45 var(--ui);
  opacity:.72; margin:2px 0 1px; text-transform:none; letter-spacing:0;
}

/* ===== v21.0 - the close button belongs at the edge, not beside the title =====
   .calhead is a bare flex row. In every sheet that reads correctly it is
   .caltitle{flex:1} that pushes .calx to the far edge - the row has no
   justify-content of its own. The programs and preview headers use .pk-h
   for the title, which does not grow, so the close button came to rest
   against the last letter of the word, mid-header. On a notched phone
   that is under the Dynamic Island.
   The title grows. The close button does not, and is pinned right even
   if the title is ever empty. */
.calhead .pk-h { flex:1 1 auto; min-width:0; }
.calhead .calx { flex:0 0 auto; margin-left:auto; }

/* ===== v21.1 - a newer release is live, and you are not on it yet =====
   Sits above the nav bar rather than over it, and is not a modal: it
   must never stand between a person and the set they are logging. */
.vw-bar { position:fixed; left:12px; right:12px;
  bottom:calc(var(--sb) + var(--nav-h) + 12px);
  z-index:940;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background:var(--bg2); border:1px solid var(--p1); border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  font:600 10.5px/1.35 var(--ui); letter-spacing:.06em; color:var(--txt);
  animation:calfade .18s ease; }
.vw-bar[hidden] { display:none; }
.vw-msg { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.vw-go { flex:0 0 auto; background:var(--p1); color:#12100a; border:0;
  border-radius:9px; padding:9px 14px; font:700 11px/1 var(--ui);
  letter-spacing:.08em; cursor:pointer; }
.vw-go:active { opacity:.82; }
.vw-bar .vw-x { flex:0 0 auto; width:30px; height:30px; font-size:14px; }

/* ===== v21.2 - the day editor gets its own height back =====
   Same shape as the programs sheet in 21.0: a column that cannot grow
   past the screen, a head and a foot that do not move, and exactly one
   region between them that scrolls.

   .edit-days stops being a scroller of its own. It was the only child
   with flex:1, so it absorbed whatever the program card, the paragraph,
   the PROGRAMS button and the unsaved-week bar left over - measured at
   236px onto 4912px of day cards. Nested scrollers also mean a drag
   that starts on a day card moves a different list than a drag that
   starts on the card above it, which is not something to explain to
   someone holding a phone between sets. */
#progModal .editbox { overflow:hidden; min-height:0; }
#progModal .calhead, #progModal .edit-foot, #progModal .edit-more { flex:0 0 auto; }
#progModal .edit-scroll { flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding-right:2px; }
#progModal .edit-days { flex:0 0 auto; overflow:visible; }