/* x3-app — "Latex": tension, material, elastic motion.
   Palette = the six real band colors on true OLED black.
   Color appears only as meaning: push heat, pull ice, PR gold. */

@font-face{
  font-family:"Archivo";
  src:url("./fonts/Archivo-Variable.woff2?v=22") format("woff2-variations");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
}

:root{
  --void:#000000;
  --surface-1:#0C0C0E;
  --surface-2:#141417;
  --line:rgba(255,255,255,.08);
  --hairline:rgba(255,255,255,.06);

  /* the material scale — the actual bands */
  --band-ultra:#F79E6B;
  --band-white:#F4F3EE;
  --band-lgrey:#B9B9BB;
  --band-dgrey:#6F6F73;
  --band-black:#1A1A1E;
  --band-elite:#D65A14;

  --ink:var(--band-white);
  --ink-dark:#0E0E10;
  --muted:#9A9A9F;

  /* meaning-only accents */
  --push:#FF6A3D;
  --pull:#5B9DFF;
  --custom:#B48CF2;
  --pr:#FFD34D;
  --done:var(--band-white);
  --accent:var(--band-lgrey);

  --font-body:ui-sans-serif,system-ui,-apple-system,"SF Pro Text",Roboto,"Segoe UI",Helvetica,Arial,sans-serif;

  --radius:20px;
  --dur-1:120ms;
  --dur-2:200ms;
  --dur-3:320ms;
  --ease-out:cubic-bezier(.22,.61,.21,1);
  --ease-spring:cubic-bezier(.34,1.3,.5,1);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
@supports (animation-timing-function:linear(0,1)){
  :root{
    /* damped spring ω=15 ζ=0.68 — slight mechanical overshoot */
    --ease-spring:linear(0, 0.063, 0.208, 0.385, 0.56, 0.714, 0.838, 0.93, 0.992, 1.03, 1.049, 1.054, 1.051, 1.044, 1.034, 1.024, 1.016, 1.009, 1.004, 1.001, 0.998, 0.997, 0.997, 0.997, 1);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--void);color-scheme:dark}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
::selection{background:rgba(244,243,238,.28)}
:focus-visible{outline:2px solid var(--band-white);outline-offset:2px}
button{font-family:var(--font-body);color:inherit}

/* type roles ---------------------------------------------------------------- */
.display{
  font-family:"Archivo",var(--font-body);
  font-variation-settings:"wdth" 125,"wght" 750;
  text-transform:uppercase;
  letter-spacing:.015em;
}
.numeral{
  font-family:"Archivo",var(--font-body);
  font-variation-settings:"wdth" 78,"wght" 600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.kicker{
  margin:0;
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted);
}
h1{margin:0}

/* shell — the screen IS the panel ------------------------------------------- */
.shell{max-width:440px;margin:0 auto;min-height:100vh;min-height:100dvh}
.screen{
  position:relative;
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
  padding:calc(12px + var(--safe-top)) 18px calc(14px + var(--safe-bottom));
}
.screen.push{--accent:var(--push)}
.screen.pull{--accent:var(--pull)}
.screen.rest{--accent:var(--band-dgrey)}
.screen.custom{--accent:var(--custom)}

/* view transitions — directional, spring-in ---------------------------------- */
.screen{view-transition-name:panel}
.vt-title{view-transition-name:screen-title}
.vt-cta{view-transition-name:primary-cta}
.vt-exercise{view-transition-name:exercise-title}
::view-transition-old(panel),::view-transition-new(panel){animation-duration:var(--dur-2)}
:root[data-nav="forward"]::view-transition-old(panel){animation:vt-out-fwd var(--dur-2) var(--ease-out) both}
:root[data-nav="forward"]::view-transition-new(panel){animation:vt-in-fwd 280ms var(--ease-spring) both}
:root[data-nav="back"]::view-transition-old(panel){animation:vt-out-back var(--dur-2) var(--ease-out) both}
:root[data-nav="back"]::view-transition-new(panel){animation:vt-in-back 280ms var(--ease-spring) both}
::view-transition-group(screen-title),
::view-transition-group(primary-cta),
::view-transition-group(exercise-title){animation-duration:280ms;animation-timing-function:var(--ease-spring)}
@keyframes vt-out-fwd{to{opacity:0;transform:translateX(-18px)}}
@keyframes vt-in-fwd{from{opacity:0;transform:translateX(26px)}}
@keyframes vt-out-back{to{opacity:0;transform:translateX(18px)}}
@keyframes vt-in-back{from{opacity:0;transform:translateX(-26px)}}

/* chrome ---------------------------------------------------------------------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:36px}
.wordmark{font-size:15px;color:var(--ink)}
.pos{font-size:12px;color:var(--muted);text-transform:uppercase}
.chip-btn{
  border:1px solid var(--line);background:transparent;color:var(--ink);
  border-radius:999px;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;
}
.chip-btn[hidden]{display:none}

/* buttons ---------------------------------------------------------------------- */
.primary,.secondary,.save{
  width:100%;min-height:56px;border-radius:var(--radius);
  font-size:16px;font-weight:700;letter-spacing:.01em;cursor:pointer;
}
.primary{
  border:none;background:var(--band-white);color:var(--ink-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.14);
}
.primary.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.secondary{
  margin-top:10px;min-height:50px;border:1px solid var(--line);
  background:var(--surface-1);color:var(--ink);font-weight:600;font-size:15px;
}
button{transition:transform var(--dur-2) var(--ease-spring),opacity var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
button:active{transform:scale(.96)}
button:disabled{opacity:.28;pointer-events:none}
.cta-block{margin-top:auto;padding-top:18px}
.cta-block .primary + .primary{margin-top:10px}

/* first run ---------------------------------------------------------------------- */
.first-run{justify-content:center;gap:22px}
.first-hero .mega{
  font-size:clamp(88px,27vw,136px);line-height:.82;
  margin:14px 0 0;font-variation-settings:"wdth" 125,"wght" 800;
}
.first-hero .mega span{
  display:block;font-size:.34em;letter-spacing:.16em;
  font-variation-settings:"wdth" 112,"wght" 620;color:var(--muted);
}
.band-strip{display:flex;gap:8px;height:14px;margin:22px 0 6px}
.band-strip i{flex:1;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.band-strip .ultra-light{background:var(--band-ultra)}
.band-strip .white{background:var(--band-white)}
.band-strip .light-grey{background:var(--band-lgrey)}
.band-strip .dark-grey{background:var(--band-dgrey)}
.band-strip .black{background:var(--band-black);box-shadow:inset 0 0 0 1px var(--line)}
.band-strip .elite{background:var(--band-elite)}
.first-copy{margin:0;color:var(--muted);max-width:36ch}
.date-card{
  display:grid;gap:9px;padding:16px;
  border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--surface-1);color:var(--muted);
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;
}
input[type="date"]{
  height:48px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface-2);color:var(--ink);padding:0 12px;
  font-family:var(--font-body);font-size:15px;
  color-scheme:dark;
}

/* today ---------------------------------------------------------------------- */
.day-row{display:flex;gap:8px;align-items:center;margin:16px 0 4px}
.day-row input[type="date"]{flex:1;min-width:0;height:46px}
.day-arrow{
  flex:0 0 46px;height:46px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface-1);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;
}
.day-hero{padding:22px 0 4px}
.day-hero .kicker{margin-bottom:4px}
.day-title{
  font-size:clamp(58px,18vw,86px);line-height:.9;
  color:var(--accent);margin:2px 0 0;
}
.day-copy{margin:12px 0 0;color:var(--muted);max-width:38ch}

/* elastic progress strand — a band under tension that fills as you log */
.strand{display:flex;gap:6px;height:8px;margin:18px 0 2px}
.strand i{
  flex:1;border-radius:999px;position:relative;overflow:hidden;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--hairline);
}
.strand i::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--done);transform:scaleX(0);transform-origin:left;
}
.strand i.fill::after{transform:scaleX(1);animation:strand-fill .55s var(--ease-spring) backwards}
.strand.mini{width:66px;height:5px;gap:3px;margin:0}
.strand.settle{height:10px;margin:20px 0 4px}
.strand.settle i:nth-child(1).fill::after{animation-delay:.05s}
.strand.settle i:nth-child(2).fill::after{animation-delay:.13s}
.strand.settle i:nth-child(3).fill::after{animation-delay:.21s}
.strand.settle i:nth-child(4).fill::after{animation-delay:.29s}
@keyframes strand-fill{from{transform:scaleX(0)}}

/* preview — hairline rows, done rows fill latex white */
.preview{margin:20px -10px 0;border-top:1px solid var(--hairline)}
.preview-row{
  display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;
  padding:13px 10px;border-bottom:1px solid var(--hairline);border-radius:12px;
}
.preview-row .seq{color:var(--muted);font-size:13px}
.preview-row b{font-weight:600;font-size:16px}
.preview-row em{font-style:normal;color:var(--muted);font-size:13px}
.preview-row.done{background:var(--band-white);border-color:transparent}
.preview-row.done .seq,.preview-row.done b,.preview-row.done em{color:var(--ink-dark)}
.preview-row.done em{opacity:.7}
/* band-up nudge — an open row that already earned the next band */
.preview-row .up{color:var(--accent)}

/* export / backup / settings --------------------------------------------------- */
.export{margin-top:16px;color:var(--muted)}
.export summary{
  cursor:pointer;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;font-weight:600;padding:8px 0;
}
.export-actions{display:flex;gap:8px;flex-wrap:wrap;padding:8px 0 2px}
.export-actions button,.file-label,.restore-btn{
  border:1px solid var(--line);background:var(--surface-1);color:var(--ink);
  border-radius:999px;padding:9px 14px;font-size:12px;font-weight:600;cursor:pointer;
}
.restore-row{display:grid;gap:8px;padding:10px 0 4px;justify-items:start}
.file-label{display:inline-block}
.file-label input[type="file"]{display:none}
.restore-row textarea{
  width:100%;resize:vertical;min-height:52px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--surface-2);color:var(--ink);padding:10px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
}
.check-row{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;
}
.check-row input[type="checkbox"]{
  width:18px;height:18px;margin:0;accent-color:var(--band-lgrey);cursor:pointer;
}
.date-card.slim{padding:12px 14px;margin:8px 0 2px}
.backup-nudge{margin:14px 0 0;color:var(--muted);font-size:12px}

/* burger menu — settings + backup on their own screen ------------------------- */
.topbar-actions{display:flex;gap:8px;align-items:center}
.chip-btn.icon{display:inline-flex;align-items:center;padding:8px 10px;line-height:0}
.menu .day-title{font-size:clamp(30px,9vw,44px);margin-top:14px}
.menu-group{margin-top:24px;padding-top:14px;border-top:1px solid var(--hairline);color:var(--muted)}
.menu-group > .kicker{margin-bottom:6px}

/* push/pull start-day segments carry their meaning color when pressed */
.date-card .seg{padding:4px}
.date-card .seg-btn{min-height:38px;font-size:13px}
.start-day-seg .seg-btn[data-day="push"][aria-pressed="true"]{color:var(--push);box-shadow:0 0 0 1px var(--push)}
.start-day-seg .seg-btn[data-day="pull"][aria-pressed="true"]{color:var(--pull);box-shadow:0 0 0 1px var(--pull)}

/* day switching + custom-day editor -------------------------------------------- */
.day-switch .seg{margin:8px 0 4px}
.template-row{display:flex;gap:8px;align-items:center;padding:5px 0}
.template-apply{
  flex:1;min-width:0;display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--line);background:var(--surface-1);color:var(--ink);
  border-radius:999px;padding:9px 14px;font-size:12px;cursor:pointer;text-align:left;
}
.template-apply b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.template-apply em{font-style:normal;color:var(--muted);flex-shrink:0}
input[type="text"]{
  height:48px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface-2);color:var(--ink);padding:0 12px;
  font-family:var(--font-body);font-size:15px;
}
.day-edit .day-title{font-size:clamp(30px,9vw,44px);margin-top:14px}
.pick-group{margin:16px 0 6px}
.pick-list{display:grid;gap:6px}
.pick-row{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface-1);
  color:var(--ink);padding:9px 12px;font-size:14px;font-weight:600;cursor:pointer;text-align:left;
}
.pick-order{
  flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center;
  border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--hairline);
  color:var(--muted);font-size:12px;
}
.pick-row.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pick-row.picked .pick-order{background:var(--accent);color:var(--ink-dark);box-shadow:none}
.add-exercise-row{display:flex;gap:8px;align-items:center;margin-top:16px}
.add-exercise-row input{flex:1;min-width:0}
.add-exercise-row .restore-btn{flex-shrink:0}
.extra-entries{margin-top:18px}
.extra-entries .preview{margin-top:6px}
.preview-row.done .delete-chip{color:var(--ink-dark);border-color:rgba(0,0,0,.25);margin-left:8px}

/* workout ---------------------------------------------------------------------- */
.workout{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.workout-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:36px}
.exercise-strip{
  display:flex;gap:8px;overflow-x:auto;
  padding:12px 2px;margin:2px -2px 0;
  overscroll-behavior-x:contain;scrollbar-width:none;
}
.exercise-strip::-webkit-scrollbar{display:none}
.ex-tab{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;
}
.ex-tab .numeral{font-size:11px}
.ex-tab.active{color:var(--ink);border-color:var(--band-lgrey);background:var(--surface-2);box-shadow:0 0 0 1px var(--band-lgrey)}
.ex-tab.done{background:var(--band-white);color:var(--ink-dark);border-color:transparent}
.ex-tab.done.active{box-shadow:0 0 0 2px var(--void),0 0 0 3.5px var(--band-lgrey)}

.edge-nav{
  position:absolute;top:50%;translate:0 -50%;z-index:5;
  width:38px;height:60px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:14px;background:rgba(12,12,14,.82);
  color:var(--ink);font-size:24px;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.edge-nav.prev{left:6px}
.edge-nav.next{right:6px}
.edge-nav[hidden]{display:none}
@media(hover:none){.edge-nav{display:none}}

#exercise-pane{flex:1;display:flex;flex-direction:column;min-height:0}
.exercise-head{margin:8px 0 12px}
.exercise-head h1{font-size:clamp(34px,9.4vw,46px);line-height:.95;margin:6px 0 8px}
.last-line{margin:0;color:var(--muted);font-size:13px}
.delete-chip{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:999px;padding:4px 10px;margin-left:10px;
  font-size:11px;font-weight:600;cursor:pointer;
}

/* the tension-gauge drums ------------------------------------------------------ */
.drums{display:grid;grid-template-columns:1.55fr 1fr;gap:10px;align-items:start}
.drum-block{border-radius:calc(var(--radius) + 2px)}
.drum-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin:0 4px 7px;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;color:var(--muted);
}
.zone-tag{color:var(--accent);font-size:11px}
.drum{
  position:relative;height:var(--drum-h,230px);border-radius:var(--radius);
  background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--hairline);
  overflow:hidden;perspective:640px;
  touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;
  cursor:grab;outline-offset:3px;
}
.drum[data-state="dragging"]{cursor:grabbing}
.drum[data-state="dragging"],.drum[data-state="flinging"],.drum[data-state="settling"]{box-shadow:inset 0 0 0 1px var(--line)}
/* centerline detent window */
.drum::before{
  content:"";position:absolute;left:12px;right:16px;top:50%;
  height:var(--wheel-item-height,46px);translate:0 -50%;z-index:1;pointer-events:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
/* barrel shading */
.drum::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,var(--surface-1),transparent 26%,transparent 74%,var(--surface-1));
}
.wheel{--wheel-progress:0}
.wheel-track{position:absolute;left:0;right:0;top:0;transform-style:preserve-3d;z-index:0}
.wheel-item{
  --wheel-offset:8;
  --dist:max(var(--wheel-offset,8),calc(-1 * var(--wheel-offset,8)));
  height:var(--wheel-item-height,46px);
  display:grid;place-items:center;line-height:1;
  font-family:"Archivo",var(--font-body);
  font-variation-settings:"wdth" 75,"wght" 640;
  font-variant-numeric:tabular-nums;
  color:var(--band-dgrey);
  transform:rotateX(calc(var(--wheel-offset,8) * -15deg)) scale(clamp(.7,max(calc(1.42 - var(--dist) * .48),calc(1.02 - var(--dist) * .055)),1.5));
  opacity:clamp(0,calc(1.08 - var(--dist) * .3),1);
}
.wheel-item.in-zone{color:var(--band-white)}
.drum.full{--wheel-item-height:46px;--drum-h:230px}
.drum.full .wheel-item{font-size:31px}
.drum.partial{--wheel-item-height:46px;--drum-h:230px}
.drum.partial .wheel-item{font-size:21px;color:var(--band-lgrey)}

/* the etched gauge rail — 15–40 progression zone */
.wheel-gauge{
  position:absolute;top:12px;bottom:12px;right:7px;width:3px;z-index:3;border-radius:2px;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.16) 0 1px,rgba(255,255,255,.04) 1px calc(100% / 16));
}
.gauge-zone{
  position:absolute;left:0;right:0;border-radius:2px;
  top:var(--zone-from,0%);height:calc(var(--zone-to,100%) - var(--zone-from,0%));
  background:color-mix(in srgb,var(--accent) 60%,transparent);
}
.gauge-thumb{
  position:absolute;left:-2.5px;width:8px;height:8px;border-radius:50%;
  top:calc(var(--wheel-progress,0) * 100%);translate:0 -50%;
  background:var(--band-white);box-shadow:0 0 0 2px var(--surface-1);
}

.zone-hint{margin:10px 4px 0;font-size:12px;font-weight:600;color:var(--band-lgrey)}
.zone-hint[data-band="white"]{color:var(--band-white)}
.zone-hint[data-band="light-grey"]{color:var(--band-lgrey)}
.zone-hint[data-band="dark-grey"]{color:var(--band-dgrey)}
.zone-hint[data-band="black"]{color:var(--muted)}
.zone-hint[data-band="elite"]{color:var(--band-elite)}
.zone-hint[hidden]{display:none}

/* band selector — actual material swatches, 3×2 ladder-ordered grid */
.bands{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.band-chip{
  position:relative;overflow:hidden;
  height:52px;border-radius:14px;border:none;cursor:pointer;
  font-size:12px;font-weight:650;opacity:.5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 3px rgba(0,0,0,.22);
}
.band-chip.ultra-light{background:linear-gradient(180deg,#FFC9A3,#F79E6B);color:var(--ink-dark)}
.band-chip.white{background:linear-gradient(180deg,#FFFDF6,#E9E7DE);color:var(--ink-dark)}
.band-chip.light-grey{background:linear-gradient(180deg,#C8C8CA,#A9A9AD);color:var(--ink-dark)}
.band-chip.dark-grey{background:linear-gradient(180deg,#7B7B80,#5F5F65);color:var(--band-white)}
.band-chip.black{background:linear-gradient(180deg,#242428,#111114);color:var(--band-lgrey);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.08)}
.band-chip.elite{background:linear-gradient(180deg,#F06A1D,#C74A08);color:var(--band-white)}
.band-chip.selected{
  opacity:1;transform:scale(1.05);
  box-shadow:0 0 0 2px var(--void),0 0 0 3.5px var(--band-white),inset 0 1px 0 rgba(255,255,255,.25);
}
.band-chip.black.selected{box-shadow:0 0 0 2px var(--void),0 0 0 3.5px var(--band-white),inset 0 0 0 1px var(--line)}

/* physical variants — the chip embodies what tapping it would log */
.band-chip.short{width:82%;justify-self:center}
.band-chip.performance::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    repeating-linear-gradient(55deg,rgba(255,255,255,.20) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(-55deg,rgba(0,0,0,.16) 0 1px,transparent 1px 5px);
  -webkit-mask-image:linear-gradient(180deg,#000 20%,rgba(0,0,0,.25));
  mask-image:linear-gradient(180deg,#000 20%,rgba(0,0,0,.25));
}

/* make / length toggles — pill segments below the chip grid */
.band-variant{display:flex;gap:8px;margin-top:10px}
.seg{
  flex:1;display:flex;gap:4px;padding:3px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface-1);
}
.seg.off{visibility:hidden;pointer-events:none}
.seg-btn{
  flex:1;min-height:32px;border:none;border-radius:999px;background:transparent;
  color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;padding:0 8px;
}
.seg-btn[aria-pressed="true"]{color:var(--ink);background:var(--surface-2);box-shadow:0 0 0 1px var(--band-lgrey)}

/* variant suffix on band labels — unmarked = latex regular */
.band-var{
  font-family:"Archivo",var(--font-body);
  font-variation-settings:"wdth" 78,"wght" 650;
  font-size:.6em;line-height:0;vertical-align:.5em;letter-spacing:.04em;
}

.save-dock{
  position:sticky;bottom:0;margin-top:auto;z-index:6;
  display:grid;gap:6px;justify-items:center;
  padding:14px 0 calc(8px + var(--safe-bottom));
  background:linear-gradient(180deg,transparent,var(--void) 38%);
}
.save-dock .save{width:100%}
.done-link{border:none;background:transparent;color:var(--muted);padding:6px 12px}

/* PR moment — gold, only for records */
.pr-flash{animation:pr-flash .9s var(--ease-out)}
@keyframes pr-flash{
  0%{box-shadow:0 0 0 0 rgba(255,211,77,0)}
  16%{box-shadow:0 0 0 3px var(--pr),0 0 46px -4px var(--pr)}
  100%{box-shadow:0 0 0 0 rgba(255,211,77,0)}
}
.pr-tag{
  font-style:normal;display:inline-block;margin-left:8px;padding:3px 8px;
  border-radius:999px;vertical-align:2px;
  background:color-mix(in srgb,var(--pr) 16%,transparent);color:var(--pr);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
}

/* complete ---------------------------------------------------------------------- */
.summary{margin:22px -10px 0;border-top:1px solid var(--hairline)}
.summary-row{
  width:calc(100% - 0px);display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:15px 10px;border:none;border-bottom:1px solid var(--hairline);
  background:transparent;color:var(--ink);text-align:left;cursor:pointer;border-radius:12px;
  font-size:16px;
}
.summary-row b{font-weight:600}
.summary-row em{font-style:normal;color:var(--muted);font-size:13px;flex-shrink:0}

/* ledger — progress heat-map ------------------------------------------------------ */
.ledger .day-title{font-size:clamp(30px,9vw,44px);margin-top:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 8px}
.stat{padding:12px 0 10px;border-top:1px solid var(--hairline)}
.stat strong{display:block;font-size:34px;line-height:1.1;font-weight:650}
.stat span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.stat.gold strong{color:var(--pr)}
.heatmap{
  display:grid;grid-template-columns:auto repeat(7,1fr);gap:5px;
  align-items:center;margin:14px 0 12px;
}
.week-label{font-size:10px;color:var(--muted);padding-right:5px}
.heat-cell{
  aspect-ratio:1;border:none;border-radius:7px;padding:0;cursor:pointer;
  background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--hairline);
}
.heat-cell.push{background:color-mix(in srgb,var(--push) 17%,var(--surface-1));box-shadow:none}
.heat-cell.pull{background:color-mix(in srgb,var(--pull) 17%,var(--surface-1));box-shadow:none}
.heat-cell.custom{background:color-mix(in srgb,var(--custom) 17%,var(--surface-1));box-shadow:none}
.heat-cell.rest{background:var(--surface-1)}
/* done = latex-white dot on a deepened day tint — completion never hides the day type */
.heat-cell.done{box-shadow:none;background-image:radial-gradient(circle,var(--done) 0 3.5px,transparent 4px)}
.heat-cell.push.done{background-color:color-mix(in srgb,var(--push) 42%,var(--surface-1))}
.heat-cell.pull.done{background-color:color-mix(in srgb,var(--pull) 42%,var(--surface-1))}
.heat-cell.custom.done{background-color:color-mix(in srgb,var(--custom) 42%,var(--surface-1))}
.heat-cell.now{outline:1px solid var(--band-white);outline-offset:2px}
.ledger-legend{
  display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 12px;
  color:var(--muted);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
}
.ledger-legend span{display:inline-flex;align-items:center;gap:6px}
.legend-dot{width:10px;height:10px;border-radius:3px;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line)}
.legend-dot.push{background:color-mix(in srgb,var(--push) 17%,var(--surface-1));box-shadow:none}
.legend-dot.pull{background:color-mix(in srgb,var(--pull) 17%,var(--surface-1));box-shadow:none}
.legend-dot.custom{background:color-mix(in srgb,var(--custom) 17%,var(--surface-1));box-shadow:none}
.legend-dot.rest{background:var(--surface-1)}
.legend-dot.done{background-image:radial-gradient(circle,var(--done) 0 2px,transparent 2.5px)}

/* progress tabs — Ledger / Stats / PR log panes under the stat tiles.
   flex:none overrides .seg's flex:1, which would stretch vertically here
   (the screen is a flex column and short panes leave leftover space). */
.ledger-tabs{flex:none;margin:14px 0 4px}
#ledgerPane{min-height:0}
.totals{margin:14px 0 2px;color:var(--muted);font-size:12px}

/* per-exercise sparkline cards */
.ex-cards{margin-top:8px}
.ex-card{border-top:1px solid var(--hairline);padding:12px 0 10px}
.ex-card-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:8px;font-size:14px;
}
.ex-card-head b{font-weight:600}
.ex-card-head em{font-style:normal;color:var(--muted);font-size:12px;flex-shrink:0}
.ex-empty{margin:0;color:var(--muted);font-size:12px}
.spark{width:100%;height:auto;display:block}
.spark-zone{fill:rgba(255,255,255,.05)}
.spark-line{fill:none;stroke:var(--band-lgrey);stroke-width:1.5}

/* PR log */
.pr-log{margin-top:8px;color:var(--muted)}
.pr-empty{margin:18px 0 0;color:var(--muted);font-size:13px;max-width:34ch}
.pr-row{
  display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--hairline);
  color:var(--ink);font-size:13px;
}
.pr-row b{font-weight:600}
.pr-row .pr-date{color:var(--muted);font-size:11px}
.pr-row em{font-style:normal;color:var(--muted);font-size:12px}

/* toast — lives on <body>, survives screen swaps ---------------------------------- */
#toast{
  position:fixed;left:50%;bottom:calc(22px + var(--safe-bottom));z-index:60;
  translate:-50% 18px;opacity:0;pointer-events:none;
  max-width:min(88vw,400px);text-align:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  padding:12px 18px;border-radius:14px;font-weight:600;font-size:14px;
  transition:opacity var(--dur-2) var(--ease-out),translate var(--dur-3) var(--ease-spring);
}
#toast.show{opacity:1;translate:-50% 0}
#toast.pr{
  border-color:color-mix(in srgb,var(--pr) 55%,transparent);
  background:color-mix(in srgb,var(--pr) 12%,var(--surface-2));
  color:var(--pr);
  box-shadow:0 0 34px -8px color-mix(in srgb,var(--pr) 55%,transparent);
}

/* responsive ---------------------------------------------------------------------- */
@media(max-height:760px){
  .drum.full,.drum.partial{--drum-h:184px}
  .drum.full .wheel-item{font-size:27px}
  .exercise-head h1{font-size:clamp(30px,8.4vw,38px)}
  .exercise-head{margin:4px 0 8px}
  .band-chip{height:40px}
  .bands{gap:6px;margin-top:10px}
  .band-variant{margin-top:8px}
  .seg{padding:2px}
  .seg-btn{min-height:28px}
}
@media(max-height:700px){
  .drum.full,.drum.partial{--drum-h:150px}
  .drum.full .wheel-item{font-size:24px}
}
@media(max-width:360px){
  .screen{padding-inline:14px}
  .day-title{font-size:clamp(50px,17vw,64px)}
  .drums{gap:8px}
  .band-chip{font-size:11px}
  .pr-row{grid-template-columns:46px 1fr auto;gap:8px}
  .ex-card-head{font-size:13px}
  .export-actions{gap:6px}
}
@media(min-width:700px){
  body{padding:28px 0}
  .shell{min-height:0}
  .screen{
    min-height:840px;border-radius:28px;
    border:1px solid var(--line);
    background:linear-gradient(180deg,var(--surface-1),var(--void) 72%);
    padding:22px 24px 20px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}