/* ============================================================================
   THEME TOKENS
   Dark by default; [data-theme="light"] on <html> overrides for light mode.
   ========================================================================== */
:root{
  --bg:#0f1115;
  --bg-elev:#171a21;
  --bg-elev-2:#1f232c;
  --card:#171a21;
  --border:#272c37;
  --text:#e7ebf3;
  --text-dim:#9aa3b2;
  --text-faint:#5c6573;     /* ghost / "beat last time" text */
  --accent:#4cd4b0;          /* single accent color */
  --accent-ink:#06302a;
  --danger:#ff6b6b;
  --ok:#4cd4b0;
  /* session-type colors (also used by the calendar heatmap) */
  --s-uA:#4cd4b0;
  --s-lA:#f4b860;
  --s-uB:#5aa9ff;
  --s-lB:#b18cff;
  --s-5:#ff9f7a;
  --s-6:#5fd0e0;
  --mob:#7ee081;
  --radius:14px;
  --radius-sm:10px;
  --tap:44px;                /* minimum tap target */
  --shadow:0 6px 20px rgba(0,0,0,.35);
  --maxw:680px;
}
[data-theme="light"]{
  --bg:#f4f6fa;
  --bg-elev:#ffffff;
  --bg-elev-2:#eef1f6;
  --card:#ffffff;
  --border:#dde2ec;
  --text:#1a1f29;
  --text-dim:#5a6473;
  --text-faint:#aab2c0;
  --accent:#0fae89;
  --accent-ink:#ffffff;
  --danger:#d63b3b;
  --ok:#0fae89;
  --s-uA:#0fae89;
  --s-lA:#d68a16;
  --s-uB:#2d7ff0;
  --s-lB:#8556e6;
  --s-5:#e0662f;
  --s-6:#1f9aad;
  --mob:#2faa4f;
  --shadow:0 6px 20px rgba(40,50,70,.12);
}

/* ============================================================================
   BASE
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,
    "Apple Color Emoji","Segoe UI Emoji",sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(72px + env(safe-area-inset-bottom)); /* room for tab bar */
}
button{font:inherit;color:inherit;cursor:pointer}
input{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:var(--accent);color:var(--accent-ink)}

/* layout shell */
.app{max-width:var(--maxw);margin:0 auto;padding:14px 14px 24px}
.appbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  /* safe-area top so the header isn't hidden under the phone status bar when
     run from the home screen (viewport-fit=cover / standalone mode) */
  padding:calc(12px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-left)) 12px max(14px,env(safe-area-inset-right));
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.appbar h1{font-size:1.05rem;margin:0;letter-spacing:.2px;display:flex;gap:8px;align-items:center}
.appbar .brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.icon-btn{
  width:var(--tap);height:var(--tap);min-width:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;
}
.icon-btn:active{transform:scale(.96)}
.icon-btn svg{width:22px;height:22px}
.icon-btn span{display:inline-flex;align-items:center;justify-content:center}
/* inline icon (replaces emoji in labels) */
.i{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.16em;color:currentColor}
.i svg{width:1.05em;height:1.05em}
.goal-name .i,.dd-sec .i,.skip-banner .i{margin-right:7px}
.goal-name .i{color:var(--accent)}
.dd-sec .i{color:var(--text-dim)}

/* cards */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin:12px 0;box-shadow:var(--shadow);
}
.card-flat{box-shadow:none}
.muted{color:var(--text-dim)}
.faint{color:var(--text-faint)}
.tiny{font-size:.8rem}
.center{text-align:center}
h2.section{font-size:1.15rem;margin:6px 2px 2px}
.subtle{font-size:.85rem;color:var(--text-dim)}

/* "Next up" hero */
.hero{
  background:linear-gradient(160deg,var(--bg-elev-2),var(--card));
  border:1px solid var(--border);
}
.hero .eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.hero h2{font-size:1.6rem;margin:4px 0 4px;line-height:1.1}
.hero .focus{color:var(--text-dim);font-size:.95rem}
.cycle-dots{display:flex;gap:6px;margin-top:12px}
.cycle-dots .dot{
  flex:1;height:6px;border-radius:99px;background:var(--bg-elev-2);border:1px solid var(--border);
}
.cycle-dots .dot.active{background:var(--accent);border-color:var(--accent)}
.cycle-dots .dot.done{background:var(--text-faint)}

/* exercise rows */
.ex{border:1px solid var(--border);border-radius:var(--radius-sm);margin:10px 0;overflow:hidden;background:var(--bg-elev)}
.ex.complete{border-color:var(--accent)}
.ex-head{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:transparent;border:0;padding:12px 14px;min-height:var(--tap);
}
.ex-head .grow{flex:1;min-width:0}
.ex-head .ex-name{font-weight:650;display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
.ex-head .ex-sub{font-size:.82rem;color:var(--text-dim);margin-top:2px}
.ex-head .chev{transition:transform .18s ease;color:var(--text-dim);flex:none}
.ex.open .ex-head .chev{transform:rotate(90deg)}
.badge{
  font-size:.7rem;padding:2px 8px;border-radius:99px;border:1px solid var(--border);
  color:var(--text-dim);white-space:nowrap;
}
.badge.plyo{color:var(--s-lB);border-color:color-mix(in srgb,var(--s-lB) 50%,var(--border))}
.rir-tag{font-size:.66rem;font-weight:600;padding:1px 7px;border-radius:99px;white-space:nowrap;
  color:var(--s-lA);background:color-mix(in srgb,var(--s-lA) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--s-lA) 40%,var(--border))}
.tick{
  width:24px;height:24px;border-radius:50%;border:2px solid var(--border);flex:none;
  display:inline-flex;align-items:center;justify-content:center;color:transparent;
}
.ex.complete .tick{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.ex-body{padding:0 14px 14px;display:none}
.ex.open .ex-body{display:block}
.targets{font-size:.85rem;color:var(--text-dim);margin:2px 0 10px}
.prescribe{font-size:.9rem;margin-bottom:8px}
.note{font-size:.82rem;color:var(--s-lA);margin:6px 0}

/* swaps */
.swaps-toggle{
  background:var(--bg-elev-2);border:1px solid var(--border);border-radius:99px;
  padding:8px 14px;font-size:.8rem;color:var(--text-dim);min-height:44px;
}
.swaps-list{margin:8px 0 4px;padding-left:2px;list-style:none;display:none}
.swaps-list.open{display:block}
.swaps-list li{font-size:.85rem;color:var(--text-dim);padding:3px 0;display:flex;gap:8px;align-items:center}
.swaps-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text-faint);flex:none}

/* set logger — ONE compact row on a shared CSS grid. The header and every row
   use the same grid-template-columns, so labels always line up with controls.
   The reps/weight columns flex (minmax 0) so the row never overflows — boxes
   shrink to fit phones from 320px up (Galaxy S25 ≈360–384px sits comfortably). */
.sets-grid{display:grid;grid-template-columns:18px minmax(0,1fr) minmax(0,1.12fr) 40px 44px;
  gap:4px;align-items:center}
.sets-head{font-size:.58rem;color:var(--text-faint);text-transform:uppercase;
  letter-spacing:.02em;padding:6px 0 3px;margin-top:6px}
.sets-head span{text-align:center;white-space:nowrap;overflow:hidden}
.setrow{padding:5px 0;border-radius:10px;border:1px solid transparent}
.setrow+.setrow{margin-top:3px}
.setrow.done{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.setrow .c-idx{font-size:.82rem;color:var(--text-dim);font-weight:650;text-align:center}

.stepper{display:flex;align-items:center;gap:3px;min-width:0;justify-content:center}
.setrow .stepper .valwrap{flex:1;min-width:0}            /* input absorbs slack → no overflow */
.setrow .valnum{max-width:120px}                         /* fill the grid column, capped on desktop */
.step-btn{width:44px;min-width:44px;height:44px;flex:none;border-radius:8px;border:1px solid var(--border);
  background:var(--bg-elev-2);display:inline-flex;align-items:center;justify-content:center;
  font-size:1.1rem;line-height:1;user-select:none;padding:0}
.step-btn:active{transform:scale(.93);background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* to-failure box + complete circle, each centered in its grid column */
.cbox{width:40px;height:44px;border-radius:9px;border:2px solid var(--border);justify-self:center;
  display:inline-flex;align-items:center;justify-content:center;background:var(--bg-elev-2);color:transparent}
.cbox svg{width:17px;height:17px}
.cbox.on{background:var(--danger);border-color:var(--danger);color:#fff}
.setdone{width:44px;height:44px;border-radius:50%;border:2px solid var(--border);background:var(--bg-elev-2);
  justify-self:center;display:inline-flex;align-items:center;justify-content:center;color:var(--text-faint)}
.setdone svg{width:20px;height:20px}
.setrow.done .setdone{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* very narrow screens (≤344px: iPhone SE1, Galaxy Fold cover) — wrap each set
   to two lines so the inputs stay readable and the complete button stays big. */
@media (max-width:344px){
  .setrow.sets-grid{grid-template-columns:18px 1fr 1fr;
    grid-template-areas:"i r w" "i f d";row-gap:7px}
  .setrow .c-idx{grid-area:i;align-self:center}
  .setrow .stepper.reps{grid-area:r}
  .setrow .stepper.wt{grid-area:w}
  .setrow .cbox{grid-area:f;justify-self:stretch;width:auto}
  .setrow .setdone{grid-area:d;justify-self:stretch;width:auto;border-radius:11px}
  .sets-head.sets-grid{grid-template-columns:18px 1fr 1fr}
  .sets-head span:nth-child(4),.sets-head span:nth-child(5){display:none}
}

.row-actions{display:flex;gap:8px;margin-top:10px}
.linkbtn{background:none;border:0;color:var(--accent);font-size:.85rem;padding:8px 6px;min-height:44px}
.linkbtn.dim{color:var(--text-dim)}

/* plyo block */
.plyo-phase{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chip{
  border:1px solid var(--border);background:var(--bg-elev-2);border-radius:99px;
  padding:8px 14px;font-size:.82rem;color:var(--text-dim);min-height:44px;
  display:inline-flex;align-items:center;
}
.chip.active{background:var(--s-lB);border-color:var(--s-lB);color:#10081f;font-weight:650}
.drill{font-size:.88rem;padding:4px 0;color:var(--text);display:flex;gap:8px;align-items:center}
.drill::before{content:"▷";color:var(--s-lB);font-size:.7rem}

/* big buttons */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:52px;border-radius:13px;border:1px solid var(--border);
  background:var(--bg-elev);font-weight:650;font-size:1rem;padding:0 16px;
}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:active{transform:scale(.99);filter:brightness(.96)}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5}
.btn>span{display:inline-flex;align-items:center;flex:none}
.btn svg{width:20px;height:20px}
.btn .chev{transition:transform .18s ease;color:var(--text-dim)}
.btn .chev.open{transform:rotate(90deg)}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}

/* generic field */
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field label{font-size:.82rem;color:var(--text-dim)}
textarea{
  background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);
  padding:10px;resize:vertical;min-height:60px;width:100%;
}
.seg{display:flex;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:11px;padding:3px;gap:3px}
.seg button{flex:1;min-height:40px;border:0;background:transparent;border-radius:8px;color:var(--text-dim);font-weight:600}
.seg button.on{background:var(--accent);color:var(--accent-ink)}

/* settings rows */
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.srow:last-child{border-bottom:0}
.srow .lab{font-size:.95rem}
.srow .sub{font-size:.78rem;color:var(--text-dim)}

/* ---- workout editor ---- */
.ed-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.ed-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:9px;
  color:var(--text);padding:9px 10px;min-height:40px;font-size:.92rem}
.ed-input::placeholder{color:var(--text-faint)}
.ed-session{padding:14px}
.ed-session-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ed-swatch{width:12px;height:24px;border-radius:5px;flex:none}
.ed-title{font-weight:700;font-size:1.05rem}
.ed-focus{margin-bottom:10px;font-size:.85rem}
.ed-ex{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev);
  padding:11px;margin:9px 0;display:flex;flex-direction:column;gap:8px}
.ed-ex-head{display:flex;align-items:flex-start;gap:8px}
.ed-exname{font-weight:600}
.ed-ex-tools{display:flex;gap:4px;flex:none}
.ed-icon{width:44px;height:44px;min-width:44px;border-radius:9px;border:1px solid var(--border);
  background:var(--bg-elev-2);display:inline-flex;align-items:center;justify-content:center;color:var(--text-dim)}
.ed-icon svg{width:18px;height:18px}
.ed-icon:disabled{opacity:.35}
.ed-icon.danger{color:var(--danger)}
.ed-grid{display:grid;grid-template-columns:auto 1fr 1.2fr;gap:8px;align-items:end}
.ed-mini{display:flex;flex-direction:column;gap:4px;font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.ed-mini-lab{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.ed-stepper{display:flex;align-items:center;gap:4px}
.ed-setsnum{min-width:30px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--border);border-radius:9px;font-weight:700;font-variant-numeric:tabular-nums}
.ed-swaps{margin-top:2px}
.ed-swap-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
@media (max-width:380px){ .ed-grid{grid-template-columns:1fr 1fr} .ed-grid .ed-mini:last-child{grid-column:1 / -1} }

/* ---- typeable number field + wider stepper buttons ---- */
.valwrap{display:flex;flex-direction:column;align-items:center;min-width:52px}
.valwrap.wt{min-width:64px}
.valnum{width:100%;max-width:72px;height:44px;text-align:center;border:1px solid var(--border);border-radius:9px;
  background:var(--bg);color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;font-size:1rem;padding:0 2px;
  -moz-appearance:textfield}
.valnum::-webkit-outer-spin-button,.valnum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.valnum:focus,.ed-input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.valwrap .ghost{font-size:.62rem;color:var(--text-faint);margin-top:1px;height:.8em;line-height:1}
.step-btn.wide{width:auto;min-width:40px;padding:0 8px;font-size:.8rem;font-weight:700}
.bw-add .step-btn.wide{height:48px;min-width:46px}
.bw-add .valwrap{min-width:104px}
.bw-add .valnum{max-width:110px;height:48px;font-size:1.3rem}

/* ---- today tools / edit-today / swap chips ---- */
.today-tools{display:flex;align-items:center;gap:10px;margin:4px 2px 10px;flex-wrap:wrap}
.today-edit-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.swaps-chips{display:none;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.swaps-chips.open{display:flex}

/* ---- calendar additions ---- */
.cal-cell{cursor:pointer}
.cal-cell.rest-cell{border-style:dashed;color:var(--text-dim)}
.cal-cell.sel{outline:2px solid var(--text);outline-offset:-2px}
.cal-cell .restmark{position:absolute;bottom:2px;font-size:.6rem;line-height:1;color:var(--text-faint)}
.recent-row{display:flex;align-items:center;gap:10px;padding:8px 0;width:100%;background:none;border:0;
  border-bottom:1px solid var(--border);text-align:left;color:inherit}
.day-detail{border-color:var(--accent)}
.dd-sec{display:flex;align-items:center;gap:8px;font-size:.95rem}
.dd-ex{padding:6px 0;border-bottom:1px solid var(--border)}
.dd-ex:last-child{border-bottom:0}

/* ---- goals ---- */
.goal{padding:12px 0;border-bottom:1px solid var(--border)}
.goal:last-child{border-bottom:0}
.goal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.goal-name{font-weight:650}
.goal-set{display:flex;align-items:center;gap:6px}
.goal-cur{display:flex;align-items:flex-end;gap:10px;margin-top:8px}
.pr-line{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.92rem}
.pbar{height:8px;border-radius:99px;background:var(--bg-elev-2);border:1px solid var(--border);overflow:hidden;margin-top:8px}
.pbar-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.inj-form{display:flex;align-items:flex-end;gap:10px}

/* ---- per-exercise set progress (collapsed header) ---- */
.set-progress{display:inline-flex;align-items:center;gap:3px;margin-left:8px;vertical-align:middle}
.set-progress .sdot{width:7px;height:7px;border-radius:50%;background:var(--bg-elev-2);border:1px solid var(--border)}
.set-progress .sdot.on{background:var(--accent);border-color:var(--accent)}
.set-progress .sdot-lab{font-size:.7rem;color:var(--text-dim);margin-left:3px;font-variant-numeric:tabular-nums}
.set-progress.skipped{font-size:.7rem;color:var(--s-lA);border:1px solid color-mix(in srgb,var(--s-lA) 40%,var(--border));border-radius:99px;padding:1px 8px}
.ex.skipped{opacity:.7}
.ex.skipped .tick{background:var(--s-lA);border-color:var(--s-lA);color:#2a1c00}
.skip-banner{padding:4px 0}

/* ---- rest timer bar ---- */
.restbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(72px + env(safe-area-inset-bottom));
  z-index:40;width:calc(100% - 20px);max-width:var(--maxw);background:var(--bg-elev-2);
  border:1px solid var(--accent);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.restbar.done{border-color:var(--ok)}
.rb-prog{height:5px;background:var(--bg)}
.rb-prog-fill{height:100%;background:var(--accent);width:100%;transition:width 1s linear}
.restbar.done .rb-prog-fill{background:var(--ok)}
.rb-row{display:flex;align-items:center;gap:8px;padding:8px 10px}
.rb-label{font-size:.8rem;color:var(--text-dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-time{font-weight:800;font-variant-numeric:tabular-nums;font-size:1.1rem;min-width:52px}
.rb-btn{min-height:44px;padding:0 10px;border-radius:9px;border:1px solid var(--border);
  background:var(--bg-elev);color:var(--text);font-size:.8rem;font-weight:600}
.rb-btn.rb-skip{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---- mobility tracking strip ---- */
.mob-track{display:flex;align-items:center;gap:10px;margin:2px 0 10px;flex-wrap:wrap}
.mob-7{display:flex;gap:4px}
.mob-7 .d7{width:14px;height:14px;border-radius:4px;background:var(--bg-elev-2);border:1px solid var(--border)}
.mob-7 .d7.on{background:var(--mob);border-color:var(--mob)}

/* ---- editor session picker ---- */
.ed-picker{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ed-select{flex:1;min-height:48px;border-radius:11px;border:1px solid var(--border);background:var(--bg-elev);
  color:var(--text);font-size:1rem;font-weight:650;padding:0 12px}
.ed-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}

/* ---- guided tour / coach marks ---- */
#tourRoot{position:fixed;inset:0;z-index:1000}
.tour-block{position:fixed;inset:0;z-index:1000;background:transparent}
.tour-block.solid{background:rgba(0,0,0,.72)}
.tour-spot{position:fixed;z-index:1001;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 3px var(--accent), 0 0 0 9999px rgba(0,0,0,.72);transition:all .25s ease}
.tour-tip{position:fixed;z-index:1002;width:min(330px,calc(100vw - 24px));
  background:var(--bg-elev-2);border:1px solid var(--accent);border-radius:14px;
  padding:14px 16px;box-shadow:var(--shadow)}
.tour-count{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700}
.tour-title{font-size:1.1rem;font-weight:750;margin:3px 0 5px;display:flex;align-items:center;gap:9px}
.tour-ti{display:inline-flex;color:var(--accent)}
.tour-ti svg{width:24px;height:24px}
.tour-body{font-size:.9rem;color:var(--text-dim);line-height:1.5}
.tour-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.tour-skip{background:none;border:0;color:var(--text-faint);font-size:.85rem;min-height:44px;padding:0 4px}
.tour-right{display:flex;gap:8px}
.tour-btn{min-height:44px;padding:0 16px;border-radius:10px;font-weight:650;font-size:.9rem;border:1px solid var(--border)}
.tour-btn.ghost{background:transparent;color:var(--text)}
.tour-btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ============================================================================
   STREAK / CALENDAR
   ========================================================================== */
.stat-grid{display:flex;gap:10px}
.stat{flex:1;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px;text-align:center}
.stat .big{font-size:2rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stat .lab{font-size:.74rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.stat .flame{font-size:1.4rem}

.cal-head{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px}
.cal-head .mlabel{font-weight:700}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal-dow{font-size:.66rem;color:var(--text-faint);text-align:center;padding-bottom:2px;text-transform:uppercase}
.cal-cell{
  aspect-ratio:1;border-radius:9px;border:1px solid var(--border);background:var(--bg-elev);
  display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  font-size:.78rem;color:var(--text-dim);
}
.cal-cell.empty{background:transparent;border-color:transparent}
.cal-cell.today{outline:2px solid var(--accent);outline-offset:-2px}
.cal-cell.has-w{color:#06120f;font-weight:700}
.cal-cell .mobdot{position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:var(--mob)}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;font-size:.78rem;color:var(--text-dim)}
.legend .k{display:flex;align-items:center;gap:6px}
.legend .sw{width:13px;height:13px;border-radius:4px;border:1px solid var(--border)}
.legend .sw.dot{border-radius:50%;width:9px;height:9px}

/* ============================================================================
   BODYWEIGHT CHART
   ========================================================================== */
.chart-wrap{width:100%;overflow:hidden}
svg.chart{width:100%;height:auto;display:block}
.bw-current{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.bw-current .v{font-size:2rem;font-weight:800}
.bw-add{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:6px}
.bw-add .val{min-width:96px;height:48px}
.bw-add .val .num{font-size:1.3rem}
.bw-add .step-btn{width:48px;height:48px}

/* mobility */
.checkitem{
  display:flex;align-items:center;gap:12px;padding:10px 2px;border:0;flex:1;min-width:0;
  min-height:var(--tap);text-align:left;background:none;
}
.checkitem .cbx{
  width:26px;height:26px;border-radius:7px;border:2px solid var(--border);flex:none;
  display:inline-flex;align-items:center;justify-content:center;color:transparent;background:var(--bg-elev-2);
}
.checkitem.on .cbx{background:var(--mob);border-color:var(--mob);color:#072a0c}
.checkitem.on .txt{color:var(--text-dim)}
/* mobility item with a how-to info button */
.mob-item{border-bottom:1px solid var(--border)}
.mob-item:last-child{border-bottom:0}
.mob-item-row{display:flex;align-items:center;gap:4px}
.how-btn{flex:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--bg-elev-2);
  color:var(--text-dim);display:inline-flex;align-items:center;justify-content:center}
.how-btn svg{width:18px;height:18px}
.how-btn.on{color:var(--accent);border-color:var(--accent)}
/* how-to step lists + disclosures */
.howto{margin:2px 0 10px;padding:0 0 0 22px;color:var(--text-dim);font-size:.85rem}
.howto li{padding:3px 0;line-height:1.45}
.howto-wrap{margin:8px 0 2px}
.howto-toggle{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border-radius:99px;
  border:1px solid var(--border);background:var(--bg-elev-2);color:var(--text-dim);font-size:.8rem;font-weight:600}
.howto-toggle svg{width:16px;height:16px}
.howto-toggle .chev{transition:transform .18s}
.howto-toggle .chev.open{transform:rotate(90deg)}
.how-row{border-bottom:1px solid var(--border)}
.how-row:last-child{border-bottom:0}
.how-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:0;
  text-align:left;padding:10px 2px;min-height:var(--tap);color:var(--text);font-size:.9rem}
.how-cue{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:.72rem;color:var(--accent);font-weight:600}
.how-cue .chev{transition:transform .18s}
.how-row.open .how-cue .chev{transform:rotate(90deg)}
.reflist{margin:6px 0 0;padding-left:18px;color:var(--text-dim);font-size:.9rem}
.reflist li{padding:2px 0}
.acc{border:1px solid var(--border);border-radius:var(--radius-sm);margin:10px 0;overflow:hidden;background:var(--bg-elev)}
.acc-head{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;
  padding:13px 14px;min-height:var(--tap);font-weight:650;text-align:left}
.acc-head .chev{color:var(--text-dim);transition:transform .18s}
.acc.open .acc-head .chev{transform:rotate(90deg)}
.acc-body{display:none;padding:0 14px 12px}
.acc.open .acc-body{display:block}
.donepill{font-size:.7rem;color:var(--mob);border:1px solid color-mix(in srgb,var(--mob) 45%,var(--border));
  border-radius:99px;padding:2px 8px}

/* ============================================================================
   BOTTOM TAB BAR
   ========================================================================== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:center;gap:2px;
  background:color-mix(in srgb,var(--bg-elev) 94%, transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
}
.tabbar .inner{display:flex;width:100%;max-width:var(--maxw);gap:2px}
.tab{
  flex:1;min-height:var(--tap);border:0;background:transparent;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--text-dim);font-size:.66rem;font-weight:600;padding:6px 2px;
}
.tab svg{width:22px;height:22px}
.tab.active{color:var(--accent)}
.tab.active svg{transform:translateY(-1px)}

/* toast + celebration */
.toast{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);
  background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);
  padding:12px 18px;border-radius:12px;box-shadow:var(--shadow);z-index:60;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.celebrate{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden}
.confetti{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.95;
  animation:fall 1.4s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:0}}
.streakpop{position:fixed;inset:0;z-index:56;display:flex;align-items:center;justify-content:center;pointer-events:none}
.streakpop .b{background:var(--bg-elev-2);border:1px solid var(--accent);border-radius:18px;padding:22px 28px;
  text-align:center;box-shadow:var(--shadow);transform:scale(.7);opacity:0;animation:pop .5s cubic-bezier(.2,.8,.3,1.4) forwards}
.streakpop .b .em{font-size:2.6rem}
.streakpop .b .n{font-size:1.3rem;font-weight:800;margin-top:4px}
@keyframes pop{to{transform:scale(1);opacity:1}}

.empty{text-align:center;color:var(--text-dim);padding:26px 10px}
.empty .em{font-size:2rem;opacity:.6}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .confetti{display:none}
}
@media (min-width:520px){
  .hero h2{font-size:1.9rem}
}


/* ===================== v3 additions ===================== */
.appbar-actions{display:flex;gap:8px;align-items:center}
#settingsBtn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.restbar[hidden]{display:none}
.rb-time{flex:none}

/* banners on Today (backup, plan news, unfinished workout, data problems) */
.banner{border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border))}
.banner.warn{border-color:color-mix(in srgb,var(--danger) 55%,var(--border));background:color-mix(in srgb,var(--danger) 7%,var(--bg-elev))}
.banner-title{display:flex;align-items:center;gap:8px;font-weight:700}
.banner-title .i svg{width:18px;height:18px}
.banner-text{margin-top:4px;line-height:1.45}
.banner-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.banner-acts .btn{width:auto;flex:1 1 120px;min-height:44px}

/* what to lift today */
.sug{margin:2px 0 10px;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--accent) 9%,var(--bg-elev-2));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border))}
.sug-main{display:flex;gap:8px;align-items:flex-start;font-weight:650;font-size:.92rem;line-height:1.35}
.sug-i{display:inline-flex;flex:none;color:var(--accent);margin-top:1px}
.sug-i svg{width:18px;height:18px}
.sug-why{margin-top:4px;padding-left:26px;line-height:1.35}
.ex-mynote{margin-top:3px;color:var(--text-dim);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-note-field{margin:12px 0 0}
.badge.swapped{margin-left:6px;color:var(--s-uB);border-color:color-mix(in srgb,var(--s-uB) 45%,var(--border))}
.plates{margin:2px 0 8px;padding:10px 12px;border-radius:12px;background:var(--bg-elev-2);border:1px solid var(--border);line-height:1.4}
.plates-toggle{padding-left:0}

/* set rows: reps and weight on top, effort and done below */
.sets-head.sr2-head{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1.15fr);gap:6px;margin:10px 0 4px}
.setrow.sr2{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1.15fr);
  grid-template-areas:"i r w" "i x x";gap:6px;padding:6px 4px;align-items:center}
.setrow.sr2 .c-idx{grid-area:i;align-self:start;padding-top:13px;font-size:.75rem}
.setrow.sr2 .stepper.reps{grid-area:r}
.setrow.sr2 .stepper.wt{grid-area:w}
.setrow.sr2 .sr-x{grid-area:x;display:flex;align-items:center;gap:6px;min-width:0}
.setrow.sr2 .valwrap{min-width:0}
.setrow.sr2 .setdone{flex:none;margin-left:auto}
.effort{display:flex;gap:4px;flex:1;min-width:0}
.eff{flex:1;min-width:0;min-height:44px;border-radius:9px;border:1px solid var(--border);background:var(--bg-elev-2);
  color:var(--text-dim);font-weight:650;font-size:.8rem;padding:0 2px}
.eff.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.eff.fail.on{background:var(--danger);border-color:var(--danger);color:#fff}
.setrow.warm{border:1px dashed var(--border)}
.setrow.warm .c-idx{color:var(--text-faint)}
.effort-help{margin:6px 2px 0}
.row-actions{flex-wrap:wrap}
@media (max-width:359px){
  .sets-head.sr2-head{display:none}
  .setrow.sr2{grid-template-columns:22px minmax(0,1fr);grid-template-areas:"i r" "i w" "i x"}
}

/* undo toasts */
.toast{display:flex;align-items:center;gap:12px}
.toast.has-act{pointer-events:auto}
.toast-msg{flex:1;min-width:0}
.toast-act{background:none;border:0;color:var(--accent);font-weight:750;min-height:44px;padding:0 6px;margin:-10px -6px -10px 0}

/* calendar: more than one workout on a day */
.cal-n{position:absolute;top:2px;right:4px;font-size:.6rem;font-weight:800;line-height:1;color:#06120f}
.dd-log+.dd-log{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}

/* celebration with new records */
.streakpop .pr-list{list-style:none;margin:12px 0 0;padding:0;text-align:left;max-width:280px}
.pr-list li{display:flex;flex-direction:column;padding:6px 0;border-top:1px solid var(--border);font-size:.82rem}
.pr-list li span{color:var(--text-dim)}

/* small bits */
.mod-section,.mod-tab{display:block}
.chip-i{display:inline-flex;margin-right:5px;vertical-align:-3px}
.chip-i svg{width:15px;height:15px}
.center-btn{display:block;margin:6px auto 0}
.seg-wrap{flex-wrap:wrap}
.seg button:disabled{opacity:.45}
.srow .grow{flex:1;min-width:0}
.srow .stepper .valwrap{min-width:56px}
.ed-grid.ed-grid2{grid-template-columns:1fr 1fr 1fr;margin-top:8px}

/* plan v3 exercise notes are full sentences: wrap them under the name */
.ex-head .ex-plannote{font-size:.78rem;line-height:1.35;color:var(--text-dim);margin-top:3px;overflow-wrap:anywhere}