:root{
  color-scheme:light dark;
  --bg:#f4f6f9; --panel:#ffffff; --panelHi:#eceff4; --line:#d8dde5;
  --text:#151920; --muted:#5c6472;
  --accent:#f0a500; --accentText:#8a5300; --accentDim:#fff3d6; --onAccent:#2a1c00;
  --danger:#b3261e;
  --shadow:rgba(16,20,28,.08);

  /* --k is set by fit(): every size below scales with it so a long day still fits the window. */
  --k:1;
  --sp:calc(clamp(9px,2.8vw,14px) * var(--k));
  --gap:calc(clamp(6px,2vw,10px) * var(--k));
  --f-tiny:calc(9px * var(--k));
  --f-xs:calc(10px * var(--k));
  --f-sm:calc(12px * var(--k));
  --f-md:calc(13px * var(--k));
  --f-lg:calc(15px * var(--k));
  --f-clock:calc(clamp(23px,6.4vw,28px) * var(--k));
  --f-rep:calc(clamp(26px,7.4vw,34px) * var(--k));
  --f-cell:calc(clamp(15px,4vw,17px) * var(--k));
  --round:calc(clamp(44px,12.5vw,54px) * var(--k));
  --cellh:calc(clamp(36px,10vw,42px) * var(--k));
  /* Widths deliberately ignore --k: three set columns always fit, the rest scroll. */
  /* One height for every primary action: Log set, Start set, End workout. */
  --ctlh:calc(40px * var(--k));
  --cellw:clamp(50px,13.5vw,58px);
  --exw:clamp(92px,27vw,150px);
  --exwmax:clamp(150px,42vw,190px);
}
/* Dark applies when the device asks for it, or when the setting forces it. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101216; --panel:#181b21; --panelHi:#1f242c; --line:#2a2f38;
    --text:#e9ebee; --muted:#8b93a1;
    --accent:#ffc247; --accentText:#ffc247; --accentDim:#3a3320; --onAccent:#1a1200;
    --danger:#ff6b6b;
    --shadow:rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101216; --panel:#181b21; --panelHi:#1f242c; --line:#2a2f38;
  --text:#e9ebee; --muted:#8b93a1;
  --accent:#ffc247; --accentText:#ffc247; --accentDim:#3a3320; --onAccent:#1a1200;
  --danger:#ff6b6b;
  --shadow:rgba(0,0,0,.4);
}
:root[data-theme="light"]{color-scheme:light;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{height:100%;margin:0;padding:0;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none;}
button{font-family:inherit;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;}

/* The window is the frame: header, table, panel and timer bar divide it, nothing overflows it. */
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;}
/* Auto sizing keeps this from ever overflowing; a big fixed size may, so it can scroll. */
.wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;
  width:100%;max-width:640px;margin:0 auto;
  padding:max(10px,env(safe-area-inset-top)) var(--sp) 0;}
.wrap.scroll{display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));}
.wrap.scroll>*{flex:none;}
/* On a desktop window, short pages hang high — a quarter of the free space above, three
   below — so the content centres on the top-quarter line rather than mid-screen. The
   spacers grow only into free space, so long days still scroll from the top. Phones
   keep the top-anchored flow. */
@media (min-width:700px){
  .wrap.scroll::before{content:"";flex:1 1 0;}
  .wrap.scroll::after{content:"";flex:3 1 0;}
  .home .homeinner{margin:0;}
}

.head{flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.eyebrow{font-size:var(--f-tiny);letter-spacing:2px;text-transform:uppercase;
  color:var(--accentText);font-weight:700;}
.h1{font-size:calc(clamp(18px,5.2vw,22px) * var(--k));font-weight:800;letter-spacing:-0.4px;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1.2;}
.h1 .pen{font-size:var(--f-sm);color:var(--muted);}
.daysbtn{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:20px;
  padding:calc(8px * var(--k)) calc(13px * var(--k));font-size:var(--f-md);font-weight:700;
  cursor:pointer;white-space:nowrap;flex:none;}

.stats{flex:none;display:flex;gap:var(--gap);margin:var(--sp) 0;}
.stat{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:calc(8px * var(--k)) 6px;text-align:center;}
.stat .v{font-size:calc(clamp(19px,5.6vw,24px) * var(--k));font-weight:800;line-height:1.05;}
.stat.big .v{font-size:calc(clamp(23px,6.8vw,29px) * var(--k));color:var(--accentText);}
.stat .l{font-size:var(--f-tiny);color:var(--muted);text-transform:uppercase;
  letter-spacing:1px;margin-top:3px;}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:calc(9px * var(--k));}
/* Sets grow to the right forever, so the table is the one thing allowed to scroll. */
/* Never squeezed to a sliver: at a big fixed text size the page scrolls instead. */
.tblwrap{flex:1 1 auto;min-height:calc(116px * var(--k));overflow:auto;
  -webkit-overflow-scrolling:touch;}
table{border-collapse:separate;border-spacing:5px calc(5px * var(--k));width:100%;}
th{font-size:var(--f-tiny);color:var(--muted);text-transform:uppercase;letter-spacing:1px;
  font-weight:700;padding-bottom:1px;}
th.exh{text-align:left;}
/* The exercise column stays put while the sets scroll under it, and never gets squeezed. */
th.exh,tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--panel);
  box-shadow:5px 0 0 0 var(--panel);min-width:var(--exw);}
/* Reads as a button, so it is clear the day's exercises can be edited from here. */
.exhbtn{background:var(--panelHi);border:1px solid var(--line);border-radius:8px;
  padding:calc(4px * var(--k)) calc(7px * var(--k));color:var(--muted);
  font-size:calc(10px * var(--k));text-transform:uppercase;letter-spacing:1px;
  font-weight:700;cursor:pointer;white-space:nowrap;}
.exhbtn .pen{color:var(--accentText);font-size:calc(12px * var(--k));}
.exbtn{width:100%;text-align:left;background:transparent;border:1px solid transparent;color:var(--text);
  border-radius:8px;padding:calc(6px * var(--k)) calc(8px * var(--k));font-size:var(--f-md);
  font-weight:600;line-height:1.2;max-width:var(--exwmax);cursor:pointer;}
.exbtn.active{background:var(--accentDim);border-color:var(--accent);color:var(--accentText);}
td.cell{min-width:var(--cellw);height:var(--cellh);text-align:center;border-radius:8px;
  font-size:var(--f-cell);font-weight:600;padding:0;line-height:1.05;}
td.cell.has{background:var(--panelHi);border:1px solid var(--line);cursor:pointer;}
td.cell.empty{color:var(--line);}
td.cell.editing{border:1px solid var(--accent);}
td.sum{min-width:36px;text-align:center;color:var(--accentText);
  font-weight:700;font-size:var(--f-lg);}
.cr{display:block;}
.sd{font-size:var(--f-xs);color:var(--muted);margin-left:1px;}
/* Marks a set as carrying weight, next to the /s marker for per-side work. */
.wt{font-size:var(--f-xs);color:var(--accentText);font-weight:800;margin-left:2px;
  vertical-align:super;line-height:1;}
.ct{display:block;font-size:var(--f-tiny);font-weight:600;color:var(--muted);line-height:1;margin-top:2px;}

/* Sits flush on the timer bar: the space below it belongs to the table. */
.panel{flex:none;margin-top:var(--sp);margin-bottom:0;}
.prow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:calc(8px * var(--k));}
.plabel{font-size:var(--f-sm);color:var(--muted);text-transform:uppercase;letter-spacing:1px;flex:none;}
.pactive{font-size:var(--f-md);font-weight:700;color:var(--accentText);text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stepper{display:flex;align-items:center;justify-content:center;
  gap:calc(clamp(10px,4vw,18px) * var(--k));margin-bottom:calc(9px * var(--k));}
.round{width:var(--round);height:var(--round);border-radius:50%;background:var(--panelHi);
  border:1px solid var(--line);color:var(--text);font-size:calc(25px * var(--k));
  font-weight:700;cursor:pointer;line-height:1;}
.repbox{min-width:calc(90px * var(--k));text-align:center;}
.repnum{font-size:var(--f-rep);font-weight:800;line-height:1;}
.replbl{font-size:var(--f-xs);color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.quick{display:flex;gap:calc(5px * var(--k));justify-content:center;margin-bottom:calc(9px * var(--k));}
.q{flex:1;background:var(--panelHi);color:var(--muted);border:1px solid var(--line);border-radius:8px;
  padding:calc(7px * var(--k)) 4px;font-size:var(--f-md);font-weight:700;cursor:pointer;}
.q.on{background:var(--accent);color:var(--onAccent);border-color:var(--accent);}
.togrow{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:calc(9px * var(--k));}
.togrow .q{flex:none;padding:calc(7px * var(--k)) calc(14px * var(--k));}
.togrow .hint{font-size:var(--f-sm);color:var(--muted);}

.btn{border-radius:10px;padding:calc(10px * var(--k)) 14px;font-size:var(--f-md);
  font-weight:700;cursor:pointer;flex:1;}
/* Matches the timer bar buttons, so the three primary actions read as one row of controls. */
.btn.log{background:var(--accent);color:var(--onAccent);border:1px solid var(--accent);
  width:100%;font-size:var(--f-md);font-weight:800;padding:0 6px;min-height:var(--ctlh);}
.btn.log .at{font-weight:800;opacity:.75;}
.btn.primary{background:var(--accent);color:var(--onAccent);border:1px solid var(--accent);}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);}
.btn.dang{background:transparent;color:var(--danger);border:1px solid var(--danger);}
.btn.tiny{flex:none;padding:calc(5px * var(--k)) calc(12px * var(--k));font-size:var(--f-sm);}
.editrow{display:flex;gap:8px;}
/* Log-set row with a ×N multiplier for adding several identical sets at once. */
.logrow{display:flex;gap:8px;align-items:stretch;}
.logrow .btn.log{flex:1;}
.setmult{flex:none;min-width:calc(48px * var(--k));border-radius:10px;border:1px solid var(--line);
  background:var(--panelHi);color:var(--text);font-weight:800;font-size:var(--f-md);cursor:pointer;
  min-height:var(--ctlh);}
.setmult:active{background:var(--accentDim);border-color:var(--accent);color:var(--accentText);}
/* Editable recorded times: two labelled mm:ss fields in the set editor. */
.timerow{display:flex;gap:8px;margin-bottom:calc(8px * var(--k));}
.timefield{flex:1;display:flex;flex-direction:column;gap:2px;}
.timefield span{font-size:var(--f-tiny);color:var(--muted);text-transform:uppercase;
  letter-spacing:1px;font-weight:700;padding-left:2px;}
.timein{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:10px;
  padding:calc(8px * var(--k)) 10px;font-size:16px;text-align:center;outline:none;
  -webkit-user-select:text;user-select:text;width:100%;}
.timein:focus{border-color:var(--accent);}

.addstrip{flex:none;display:flex;align-items:center;margin-top:var(--sp);}
/* Pinned outside the scroller so the actions are reachable however long the list is. */
.stripact{flex:none;display:flex;align-items:center;gap:5px;padding-left:4px;
  border-left:1px solid var(--line);}
.striprow{padding-right:2px;}
.stripact input.name{width:min(28vw,110px);}
.striprow{flex:1;min-width:0;display:flex;align-items:center;gap:calc(5px * var(--k));
  overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;padding-bottom:2px;}
.striprow .addbtn{flex:none;}
.chip.spick{flex:none;padding:calc(5px * var(--k)) 12px;cursor:pointer;background:var(--panelHi);}
.striprow .chip{flex:none;padding:calc(5px * var(--k)) 12px;cursor:pointer;}
.striprow .chip.on.sel{background:var(--accent);border-color:var(--accent);color:var(--onAccent);}
.picklbl{font-size:var(--f-tiny);text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  font-weight:700;margin:calc(10px * var(--k)) 0 calc(5px * var(--k));}
.pickmsg{font-size:var(--f-sm);color:var(--muted);}
.chips{display:flex;flex-wrap:wrap;gap:calc(6px * var(--k));align-items:center;}
.chip.on{background:var(--accentDim);border-color:var(--accent);color:var(--accentText);font-weight:600;}
.chip .pick{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0;}
.empty-card{display:flex;align-items:center;justify-content:center;}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--panelHi);border:1px solid var(--line);
  border-radius:20px;padding:calc(4px * var(--k)) 5px calc(4px * var(--k)) 11px;
  font-size:var(--f-sm);color:var(--muted);}
.chip .x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:var(--f-lg);padding:0 3px;}
.addbtn{background:transparent;border:1px dashed var(--line);color:var(--accentText);border-radius:20px;
  padding:calc(5px * var(--k)) 13px;font-size:var(--f-sm);font-weight:600;cursor:pointer;}
/* Acts on whichever exercise is selected, so it names it rather than sitting anonymous. */
.rmbtn{flex:none;background:transparent;border:1px dashed var(--danger);color:var(--danger);
  border-radius:20px;padding:calc(5px * var(--k)) 13px;font-size:var(--f-sm);font-weight:600;
  cursor:pointer;white-space:nowrap;}
.rmbtn:active{background:var(--danger);color:#fff;border-style:solid;}
.addrow{display:inline-flex;gap:6px;align-items:center;}
.addrow .btn{flex:none;padding:calc(6px * var(--k)) 12px;font-size:var(--f-md);}
input.name{background:var(--bg);border:1px solid var(--accent);color:var(--text);border-radius:20px;
  padding:5px 12px;font-size:16px;width:min(44vw,170px);outline:none;
  -webkit-user-select:text;user-select:text;}
.reset{margin-top:calc(10px * var(--k));text-align:center;}
.reset button{background:none;border:none;color:var(--muted);font-size:var(--f-sm);
  text-decoration:underline;cursor:pointer;}

/* Both clocks and both controls, thumb-height at the bottom of the screen. */
.timerbar{flex:none;background:var(--panel);border-top:1px solid var(--line);
  padding:calc(8px * var(--k)) var(--sp) calc(calc(8px * var(--k)) + env(safe-area-inset-bottom));
  box-shadow:0 -8px 20px var(--shadow);}
.tinner{max-width:640px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
.tcell{min-width:0;display:flex;flex-direction:column;}
.tcell+.tcell{padding-left:var(--gap);border-left:1px solid var(--line);}
.tl{font-size:var(--f-tiny);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
  font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tv{font-size:var(--f-clock);font-weight:800;line-height:1.1;}
.tv.held{color:var(--accentText);}
.tsub{font-size:var(--f-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tbtnrow{display:flex;gap:4px;margin-top:calc(6px * var(--k));}
.tv.edit{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:var(--line);text-underline-offset:3px;}
.tbtn.narrow{flex:none;width:calc(34px * var(--k));padding-left:0;padding-right:0;
  font-size:calc(15px * var(--k));}
.tbtn{width:100%;border-radius:10px;min-height:var(--ctlh);
  padding:0 6px;font-size:var(--f-md);font-weight:800;cursor:pointer;
  border:1px solid var(--line);background:var(--panelHi);color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tbtn.go{background:var(--accent);border-color:var(--accent);color:var(--onAccent);}
.tbtn.stop{background:var(--danger);border-color:var(--danger);color:#fff;}
.tbtn.on{background:var(--accentDim);border-color:var(--accent);color:var(--accentText);}

.headbtns{display:flex;gap:6px;flex:none;}
.iconbtn{padding:calc(8px * var(--k)) calc(10px * var(--k));font-size:calc(15px * var(--k));}
.h1.plain{cursor:default;}

/* Settings — sized against --k like everything else, so a size change shows itself. */
.setgroup{font-size:calc(11px * var(--k));text-transform:uppercase;letter-spacing:1.5px;
  color:var(--accentText);font-weight:700;margin:calc(18px * var(--k)) 0 calc(8px * var(--k));}
.setrow{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:calc(11px * var(--k)) calc(12px * var(--k));margin-bottom:calc(8px * var(--k));}
.setlbl{font-size:calc(14px * var(--k));font-weight:700;}
.sethint{font-size:calc(11px * var(--k));color:var(--muted);margin-top:2px;line-height:1.35;}
.setopts{display:flex;flex-wrap:wrap;gap:5px;margin-top:calc(9px * var(--k));}
.setopts .q{flex:1 0 auto;min-width:calc(52px * var(--k));
  padding:calc(7px * var(--k)) calc(10px * var(--k));font-size:calc(12px * var(--k));}

.hhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px;}
.csvrow{margin-top:-2px;margin-bottom:16px;}

/* Landing page — the app opens here. Calm, few words, clear next step. */
.wrap.scroll.home{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:max(20px,env(safe-area-inset-top)) 20px 20px;box-sizing:border-box;text-align:center;}
/* Auto top/bottom margins centre the block vertically yet still let it scroll if it ever
   outgrows a short screen — unlike justify-content:center, which would clip the top. */
.homeinner{margin:auto 0;width:100%;max-width:420px;}
.homegear{position:absolute;top:max(16px,env(safe-area-inset-top));right:18px;z-index:2;}
.brand{font-size:20px;font-weight:800;letter-spacing:-0.5px;margin-bottom:28px;
  display:flex;align-items:center;justify-content:center;gap:7px;}
.brand .bk{color:var(--accent);}
.brandshield{width:20px;height:20px;flex:none;}
.homehero{margin-bottom:26px;}
.homeday{font-size:clamp(26px,8vw,34px);font-weight:800;letter-spacing:-1px;line-height:1.1;
  margin-bottom:16px;}
.homecta{width:100%;background:var(--accent);color:var(--onAccent);border:1px solid var(--accent);
  border-radius:14px;padding:16px;font-size:17px;font-weight:800;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.homelink{display:block;width:100%;margin-top:10px;background:none;border:0;color:var(--muted);
  font-size:14px;font-weight:600;cursor:pointer;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.homerow{display:flex;gap:10px;margin-bottom:22px;}
.hometile{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--text);
  border-radius:14px;padding:20px 12px;font-size:14px;font-weight:700;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;}
.hticon{font-size:22px;}
.homestat{text-align:center;font-size:12px;color:var(--muted);}

/* Search box in the exercise sheet. */
.searchrow{position:relative;margin:calc(4px * var(--k)) 0 calc(10px * var(--k));}
.searchin{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:calc(9px * var(--k)) 34px calc(9px * var(--k)) 12px;
  font-size:16px;outline:none;-webkit-user-select:text;user-select:text;}
.searchin:focus{border-color:var(--accent);}
.searchin::-webkit-search-cancel-button{display:none;}
.searchx{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;
  border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:0 6px;line-height:1;}

/* Calendar — a month of workout days, tap a filled cell to open that day. */
.calnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.calmonth{font-size:16px;font-weight:800;letter-spacing:-0.3px;}
.calarrow{background:var(--panel);border:1px solid var(--line);color:var(--text);
  border-radius:10px;width:38px;height:34px;font-size:18px;font-weight:700;cursor:pointer;}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.calhead{margin-bottom:5px;}
.calwd{text-align:center;font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;padding:2px 0;}
.calcell{position:relative;aspect-ratio:1;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:0;color:var(--muted);font-family:inherit;cursor:default;}
.calcell.blank{background:transparent;border:none;}
.caldate{font-size:13px;font-weight:600;}
.calcell.worked{background:var(--accentDim);border-color:var(--accent);color:var(--accentText);
  cursor:pointer;}
.calcell.worked .caldate{font-weight:800;}
.calcell.today{box-shadow:inset 0 0 0 2px var(--accent);}
.calcell.cur{background:var(--accent);border-color:var(--accent);color:var(--onAccent);}
/* Any empty day can be tapped — past to backfill, future to plan; a faint + shows on press. */
.calcell.addable{cursor:pointer;}
.caladd{font-size:12px;font-weight:700;line-height:1;color:var(--muted);opacity:0;height:6px;}
.calcell.addable:active{border-color:var(--accent);color:var(--accentText);}
.calcell.addable:active .caladd{opacity:.9;}
.calcell.future{opacity:.5;}
/* Scheduled but not yet done: dashed outline, hollow dots — stays distinct even when current. */
.calcell.planned{cursor:pointer;background:var(--panel);border-style:dashed;
  border-color:var(--accent);color:var(--accentText);}
.calcell.planned .caldot{background:transparent;border:1.5px solid currentColor;width:6px;height:6px;}
.calcell.planned.cur{box-shadow:inset 0 0 0 2px var(--accent);}
.caldots{display:flex;align-items:center;gap:2px;height:6px;}
.caldot{width:5px;height:5px;border-radius:50%;background:currentColor;}
.calmore{font-size:8px;font-weight:800;line-height:1;}
.calfoot{margin:14px 0 4px;text-align:center;font-size:12px;color:var(--muted);}
@media (prefers-reduced-motion:no-preference){.calcell,.calarrow{transition:all .12s ease;}}
.backbtn{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:20px;
  padding:calc(8px * var(--k)) calc(14px * var(--k));font-size:calc(13px * var(--k));
  font-weight:700;cursor:pointer;}
.newday{background:var(--accent);border:1px solid var(--accent);color:var(--onAccent);border-radius:20px;
  padding:calc(8px * var(--k)) calc(16px * var(--k));font-size:calc(13px * var(--k));
  font-weight:800;cursor:pointer;}
.day{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:calc(11px * var(--k)) calc(12px * var(--k));
  margin-bottom:calc(8px * var(--k));cursor:pointer;}
.day.cur{border-color:var(--accent);}
.day .info{flex:1;min-width:0;}
.day .t{font-size:calc(15px * var(--k));font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.day .sub{font-size:calc(12px * var(--k));color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.day .sub .live{color:var(--accentText);font-weight:700;}
.day .cur-tag{font-size:calc(10px * var(--k));color:var(--accentText);font-weight:700;
  text-transform:uppercase;letter-spacing:1px;}
.day .nums{text-align:right;flex:none;}
.day .nums .r{font-size:calc(20px * var(--k));font-weight:800;color:var(--accentText);line-height:1;}
.day .nums .rl{font-size:calc(10px * var(--k));color:var(--muted);
  text-transform:uppercase;letter-spacing:1px;}
.day .del{background:none;border:none;color:var(--muted);font-size:calc(20px * var(--k));
  cursor:pointer;flex:none;padding:0 4px;}
.empty-note{color:var(--muted);font-size:calc(13px * var(--k));text-align:center;padding:20px;}

@media (prefers-reduced-motion:no-preference){.exbtn,.q,.round,.btn,.tbtn,.day{transition:all .12s ease;}}

/* Weight shown against the reps, e.g. 10 with a small 12 beside it. */
.quick.weights{margin-top:calc(-4px * var(--k));}

/* The exercise list opens over the app rather than scrolling sideways forever. */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;
  background:rgba(0,0,0,.45);}
.sheet{width:100%;max-width:640px;margin:0 auto;background:var(--bg);
  border-top-left-radius:18px;border-top-right-radius:18px;
  border-top:1px solid var(--line);box-shadow:0 -10px 30px var(--shadow);
  padding:var(--sp) var(--sp) calc(var(--sp) + env(safe-area-inset-bottom));
  max-height:86dvh;display:flex;flex-direction:column;}
.sheethead{flex:none;display:flex;justify-content:space-between;align-items:center;
  margin-bottom:calc(8px * var(--k));}
.sheetbody{overflow-y:auto;-webkit-overflow-scrolling:touch;}
.sheetgrid{display:grid;grid-template-columns:1fr 1fr;gap:calc(6px * var(--k));}
.chip.sheetitem{justify-content:space-between;padding:calc(7px * var(--k)) 6px calc(7px * var(--k)) 12px;
  font-size:var(--f-md);color:var(--text);}
.chip.sheetitem .pick{text-align:left;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.sheetadd{display:flex;gap:6px;align-items:center;margin-top:calc(10px * var(--k));}
.sheetadd input.name{flex:1;min-width:0;}

/* Held to be dragged: lifted out of the row so it is obvious what is moving. */
.exbtn.held{background:var(--accent);border-color:var(--accent);color:var(--onAccent);
  box-shadow:0 4px 14px var(--shadow);transform:scale(1.02);}
tr.held td{opacity:.55;}
tr.held td:first-child{opacity:1;}
/* Stops the table scrolling under the finger mid-drag. */
.tblwrap.dragging{touch-action:none;}
.tblwrap.dragging .exbtn{transition:none;}
.btn.log[disabled]{opacity:.4;cursor:default;}

/* Laptop and up: the picker and day-detail popups stop being bottom-anchored phone
   sheets — which glue to the window edge and clip — and become a centred, floating
   modal with a capped height. Mobile keeps the bottom sheet untouched. */
@media (min-width:700px){
  .overlay{align-items:center;padding:24px;}
  .sheet{max-height:min(80dvh,760px);border-radius:18px;border:1px solid var(--line);
    box-shadow:0 20px 60px var(--shadow);}
}

/* Keyboard focus is first-class on a laptop: a clear ring on whatever is tabbed to, shown
   only for keyboard focus (not taps) via :focus-visible. The 2px offset keeps the ring on
   the page background so it stays visible even on an accent-filled button. */
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.searchin:focus-visible,.timein:focus-visible,input.name:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px;}

/* Pointer devices get hover feedback the touch UI never needed. Gated on hover:hover so a
   phone — which reports no hover — is completely unaffected. Toggle-on and accent states
   are excluded so a live selection never dims to a neutral hover. */
@media (hover:hover) and (pointer:fine){
  .daysbtn,.backbtn,.iconbtn,.calarrow,.exhbtn,.addbtn,.rmbtn,.q,.round,.tbtn,.setmult,
  .chip.spick,.striprow .chip,.chip.sheetitem,.day,.exbtn,.calcell,.hometile,.homecta,
  .homelink,.btn,.newday,.reset button,.h1,.searchx,.chip .x,.day .del{
    transition:background-color .12s ease,border-color .12s ease,color .12s ease,
      box-shadow .12s ease,transform .12s ease,filter .12s ease;}

  /* Neutral controls: warm the border and surface. */
  .daysbtn:hover,.backbtn:hover,.iconbtn:hover,.calarrow:hover,
  .tbtn:not(.go):not(.stop):not(.on):hover,.round:hover,
  .chip.spick:hover,.striprow .chip:not(.on):hover{
    border-color:var(--accent);background:var(--panelHi);}
  .exbtn:not(.active):hover{background:var(--panelHi);}
  .exhbtn:hover{border-color:var(--accent);color:var(--accentText);}
  .chip.sheetitem:hover{border-color:var(--accent);}

  /* Selectable pills warm toward the accent. */
  .q:not(.on):hover,.setmult:hover{border-color:var(--accent);background:var(--accentDim);
    color:var(--accentText);}
  .addbtn:hover{border-color:var(--accent);background:var(--accentDim);border-style:solid;}

  /* Clickable cards lift or ring. */
  .day:hover{border-color:var(--accent);background:var(--panelHi);}
  .hometile:hover{border-color:var(--accent);transform:translateY(-2px);
    box-shadow:0 8px 22px var(--shadow);}

  /* Accent actions brighten and lift a touch. */
  .homecta:hover,.newday:hover,.btn.primary:hover,.tbtn.go:hover,
  .btn.log:not([disabled]):hover{filter:brightness(1.06);box-shadow:0 6px 18px var(--shadow);}

  /* Calendar days. */
  .calcell.worked:hover,.calcell.planned:hover{border-color:var(--accent);
    box-shadow:0 4px 12px var(--shadow);}
  .calcell.addable:hover{border-color:var(--accent);color:var(--accentText);}
  .calcell.addable:hover .caladd{opacity:.9;}

  /* Destructive controls fill in on hover, matching their pressed state. */
  .rmbtn:hover,.btn.dang:hover{background:var(--danger);color:#fff;border-style:solid;}
  .day .del:hover,.chip .x:hover{color:var(--danger);}

  /* Quiet text buttons gain contrast. */
  .homelink:hover,.reset button:hover,.searchx:hover{color:var(--text);}
  .h1:not(.plain):hover{color:var(--accentText);}
}