:root{
  --ink:#0f1a20;
  --surface:#17242c;
  --raised:#1e2f39;
  --rule:#263a45;
  --paper:#e8eef1;
  --mute:#8296a2;
  --faint:#5b6e79;
  --z2:#4fa69b;
  --z5:#e4674e;
  --mark:#d9a441;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nav:58px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--font);font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 24px);
}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wrap{max-width:620px;margin:0 auto;padding:0 18px}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{margin:0;letter-spacing:-.022em}

/* ---------- app bar ---------- */
.bar{
  position:sticky;top:0;z-index:30;background:var(--ink);
  padding:calc(env(safe-area-inset-top) + 14px) 0 12px;
  border-bottom:1px solid var(--rule);
}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bar h1{font-size:20px;font-weight:650}
.bar .date{font-size:12.5px;color:var(--mute)}
.chip{
  font-size:11px;padding:3px 8px;border-radius:2px;
  background:rgba(79,166,155,.15);color:var(--z2);white-space:nowrap;
}
.chip.bad{background:rgba(228,103,78,.18);color:var(--z5)}

/* ---------- view switching ---------- */
.view{display:none;padding-top:20px}
.view.on{display:block}

/* ---------- today ---------- */
.hero{padding:6px 0 22px}
.hero .kicker{font-size:13px;color:var(--mute)}
.hero h2{font-size:36px;font-weight:680;margin:2px 0 6px}
.hero p{margin:0;color:var(--mute);font-size:14.5px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:22px 0 6px}
.wd{text-align:center}
.wd .d{font-size:11px;color:var(--faint)}
.wd .m{
  height:30px;margin-top:5px;border-radius:2px;border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--faint);font-weight:600;
}
.wd .m.lift{border-color:var(--rule);color:var(--mute)}
.wd .m.int{border-color:var(--z5);color:var(--z5)}
.wd .m.done{background:var(--z2);border-color:var(--z2);color:var(--ink)}
.wd .m.today{outline:1.5px solid var(--paper);outline-offset:1px}

.cta{
  display:block;width:100%;margin:22px 0 8px;padding:17px;border:0;border-radius:3px;
  background:var(--paper);color:var(--ink);font-size:17px;font-weight:650;
}
.cta.alt{background:none;border:1px solid var(--rule);color:var(--paper);font-weight:500;font-size:15px;padding:14px}

.recap{margin-top:26px;border-top:1px solid var(--rule);padding-top:18px}
.recap h3{font-size:13px;color:var(--mute);font-weight:500;margin-bottom:10px}
.recap .line{font-size:13.5px;color:var(--mute);padding:3px 0}
.recap .line b{color:var(--paper);font-weight:600}

/* ---------- exercises ---------- */
.ex{padding:24px 0;border-top:1px solid var(--rule)}
.exhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.exname{font-size:19px;font-weight:640}
.extarget{font-size:12.5px;color:var(--mark);white-space:nowrap}
.exnote{font-size:13px;color:var(--faint);margin:4px 0 0}
.prev{font-size:12.5px;color:var(--mute);margin-top:9px}
.prev b{color:var(--paper);font-weight:600}

.cols{
  display:grid;gap:8px;margin:15px 0 7px;padding:0 11px;
  font-size:10.5px;color:var(--faint);
}
.set{
  display:grid;gap:8px;align-items:center;
  background:var(--surface);border:1px solid transparent;border-radius:3px;padding:9px 11px;
}
.set.filled{background:var(--raised);border-color:var(--rule)}
.cols.load,.set.load{grid-template-columns:20px 1fr 1fr 124px}
.cols.body,.set.body{grid-template-columns:20px 1fr 124px}
.cols.power,.set.power{grid-template-columns:20px 1fr 1fr}
.cols.carry,.set.carry{grid-template-columns:20px 1fr 1fr 150px}
.cols span:last-child{text-align:center}
.idx{font-size:12px;color:var(--faint)}
.f{position:relative}
.f input{
  width:100%;background:none;border:0;border-bottom:1px solid var(--rule);
  color:var(--paper);font-family:var(--font);font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums;padding:8px 32px 7px 0;outline:none;border-radius:0;
}
.f input:focus{border-bottom-color:var(--mark)}
.f input::placeholder{color:var(--faint);font-weight:400;font-size:15px}
.f .u{position:absolute;right:0;bottom:9px;font-size:11px;color:var(--faint);pointer-events:none}

.opts{display:flex;gap:3px;justify-content:flex-end}
.opts button{
  min-width:28px;height:34px;padding:0 4px;border:1px solid var(--rule);background:none;
  border-radius:2px;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;
}
.opts button.on{background:var(--mark);border-color:var(--mark);color:var(--ink);font-weight:650}
.opts button.on.hot{background:var(--z5);border-color:var(--z5)}
.opts.stop button{min-width:0;flex:1;font-size:10.5px}
.warnline{font-size:12.5px;color:var(--z5);margin-top:9px;display:none}
.warnline.on{display:block}

/* ---------- collapsible ---------- */
.fold{width:100%;background:none;border:0;padding:16px 0;display:flex;
  justify-content:space-between;align-items:center;color:var(--paper);font-size:15px;font-weight:500}
.fold .sub{font-size:12px;color:var(--mute);font-weight:400}
.foldbody{display:none}
.foldbody.on{display:block}
.check{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;
  border-top:1px solid var(--rule);padding:13px 2px;color:var(--mute);font-size:14px;text-align:left}
.check .bx{width:17px;height:17px;flex:0 0 17px;border:1px solid var(--faint);border-radius:2px;position:relative}
.check.on{color:var(--paper)}
.check.on .bx{background:var(--z2);border-color:var(--z2)}
.check.on .bx::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(43deg)}

/* ---------- intervals ---------- */
.wave{width:100%;height:112px;display:block;margin:10px 0 4px}
.phase{text-align:center;padding:14px 0 4px}
.phase .p{font-size:14px;color:var(--mute)}
.phase .t{font-size:66px;font-weight:680;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em;margin:6px 0}
.phase .hr{font-size:15px;font-weight:600}
.phase.work .t,.phase.work .hr{color:var(--z5)}
.phase.easy .t,.phase.easy .hr{color:var(--z2)}
.trow{display:flex;gap:9px;margin:18px 0 4px}
.trow button{flex:1;padding:15px;border-radius:3px;border:1px solid var(--rule);
  background:none;color:var(--paper);font-size:15px;font-weight:600}
.trow button.go{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.bouts{margin-top:24px;border-top:1px solid var(--rule)}
.bout{display:grid;grid-template-columns:56px 1fr 1fr 1fr;gap:8px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--rule)}
.bout .lb{font-size:12.5px;color:var(--mute)}
.bout input{width:100%;background:none;border:0;border-bottom:1px solid var(--rule);
  color:var(--paper);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;
  padding:6px 0;outline:none;text-align:center}
.bout input:focus{border-bottom-color:var(--z5)}

/* ---------- charts ---------- */
.pick{width:100%;background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  color:var(--paper);font-size:15px;padding:13px 11px;margin-bottom:18px;font-family:var(--font)}
.chart{width:100%;height:210px;display:block}
.cmeta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mute);margin-top:8px}
.empty{color:var(--mute);font-size:14.5px;padding:28px 0;line-height:1.55}

/* ---------- coach ---------- */
.coach{white-space:pre-wrap;font-size:15px;line-height:1.6;margin-top:18px}
.coach h4{margin:18px 0 6px;font-size:15px}

/* ---------- misc ---------- */
.acts{display:flex;gap:9px;margin:22px 0 10px;flex-wrap:wrap}
.btn{flex:1 1 auto;background:none;border:1px solid var(--rule);border-radius:3px;
  color:var(--paper);font-size:15px;font-weight:500;padding:14px;min-height:48px}
.btn.solid{background:var(--paper);border-color:var(--paper);color:var(--ink);font-weight:650}
.btn.thin{flex:0 0 auto;color:var(--faint);padding:14px 16px}
.msg{font-size:12.5px;color:var(--faint);text-align:center;min-height:18px;margin-bottom:26px}
textarea{width:100%;min-height:110px;background:var(--surface);border:1px solid var(--rule);
  border-radius:3px;color:var(--paper);font-family:var(--font);font-size:14.5px;padding:12px;
  outline:none;resize:vertical}
textarea:focus{border-color:var(--mark)}
.done{border:1px solid var(--z2);border-radius:3px;padding:17px;margin:6px 0 20px;display:none}
.done.on{display:block}
.done h3{font-size:17px;margin-bottom:13px}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.dgrid span{display:block;font-size:11px;color:var(--mute)}
.dgrid b{font-size:24px;font-weight:650;font-variant-numeric:tabular-nums}

/* ---------- rest timer ---------- */
.rest{
  position:fixed;left:0;right:0;bottom:calc(var(--nav) + env(safe-area-inset-bottom));
  z-index:40;background:var(--raised);border-top:1px solid var(--rule);
  transform:translateY(130%);transition:transform .2s ease;
}
.rest.up{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.rest{transition:none}}
.rest .bar2{height:2px;background:var(--z2)}
.rest .in{max-width:620px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:12px}
.rest .c{font-size:31px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.03em;min-width:88px}
.rest .c.over{color:var(--mark)}
.rest .l{flex:1;font-size:13px;color:var(--mute);line-height:1.3}
.rest button{background:none;border:1px solid var(--rule);border-radius:2px;color:var(--mute);
  font-size:12px;padding:10px;min-height:40px;min-width:44px}

/* ---------- nav ---------- */
nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);
  border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom);
}
nav .in{max-width:620px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
nav button{background:none;border:0;padding:9px 4px 10px;color:var(--faint);font-size:11px;height:var(--nav)}
nav button.on{color:var(--paper)}
nav button i{display:block;height:3px;width:20px;margin:0 auto 9px;border-radius:2px;background:transparent}
nav button.on i{background:var(--paper)}
:focus-visible{outline:2px solid var(--mark);outline-offset:2px}