/* ============================================================
   Overload — styles
   Contrast note: --text-dim and --text-muted are chosen to clear
   WCAG 1.4.3 (4.5:1) against both --bg and --surface. --border-strong
   clears 1.4.11 (3:1) against all three of --bg, --surface and
   --surface-hover, and is used for interactive control boundaries;
   --border is decorative only.
   ============================================================ */
:root {
  --bg:#0C0C0C; --surface:#141414; --surface-hover:#1e1e1e;
  --border:#2A2A2A; --border-strong:#6A6A6A;
  /* --accent marks the primary action and the app's own chrome (wordmark,
     active tab, focus, the weight you are about to lift). A selected state
     inside a control inverts to --text instead, so the yellow on any screen
     always points at the thing to press next. */
  --accent:#F0E040; --accent-dim:rgba(240,224,64,0.1);
  --accent-border:rgba(240,224,64,0.35);
  --success:#4ADE80; --fail:#F87171; --warn:#FBBF24;
  --text:#F5F5F5; --text-muted:#A5A5A5; --text-dim:#8C8C8C;
  --nav-h:calc(56px + max(12px, env(safe-area-inset-bottom)));
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sans:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display:'Bebas Neue', Impact, sans-serif;

  /* Type scale. Text sits in --fs-1..6, the display face in --fs-6..11.
     Nothing in this file sets a raw px font-size. */
  --fs-1:11px;  --fs-2:12px;  --fs-3:13px;  --fs-4:15px;
  --fs-5:16px;  --fs-6:20px;  --fs-7:24px;  --fs-8:28px;
  --fs-9:36px;  --fs-10:44px; --fs-11:60px;

  /* Spacing, on a 4px grid. --sp-0 is the optical nudge under a label. */
  --sp-0:2px;  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;

  /* Radii: badge, control, card, dialog. */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px;

  /* Tracking, always relative so it scales with the size it sits on. */
  --tr-label:0.12em; --tr-wide:0.1em; --tr-mid:0.08em; --tr-tight:0.04em;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  overflow-x:hidden; overscroll-behavior-y:contain;
}
button{font-family:inherit;cursor:pointer;touch-action:manipulation;}
#app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs);}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.hidden{display:none !important;}

.noscript-msg{max-width:480px;margin:0 auto;padding:var(--sp-9) var(--sp-6);font-family:var(--sans);}
.noscript-msg h1{font-family:var(--display);font-size:var(--fs-9);color:var(--accent);margin-bottom:var(--sp-3);}
.noscript-msg p{color:var(--text-muted);line-height:1.6;}

/* ── boot failure ── */
.boot-error{padding:var(--sp-8) var(--sp-6);text-align:center;}
.boot-error h2{font-family:var(--display);font-size:var(--fs-8);color:var(--fail);margin-bottom:var(--sp-3);letter-spacing:var(--tr-tight);}
.boot-error p{font-size:var(--fs-4);color:var(--text-muted);line-height:1.6;margin-bottom:var(--sp-4);}
.boot-error pre{
  font-family:var(--mono);font-size:var(--fs-1);color:var(--text-dim);text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:var(--sp-3);overflow-x:auto;white-space:pre-wrap;word-break:break-word;
}

/* ── storage warning ── */
.storage-warning{
  background:rgba(248,113,113,0.12);border:1px solid var(--fail);border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4);margin:0 var(--sp-6) var(--sp-1);font-size:var(--fs-3);color:var(--fail);line-height:1.5;flex-shrink:0;
  display:flex;gap:var(--sp-3);align-items:flex-start;
}
.storage-warning-text{flex:1;}
.storage-warning-close{
  background:none;border:1px solid var(--fail);border-radius:var(--r-sm);color:var(--fail);
  font-family:var(--sans);font-size:var(--fs-1);padding:var(--sp-2) var(--sp-3);min-height:34px;flex-shrink:0;
}

/* ── header ── */
.header{padding:var(--sp-4) var(--sp-6) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-shrink:0;}
.header-left{display:flex;align-items:center;gap:var(--sp-3);min-width:0;}
.header-logo{flex-shrink:0;}
.header-title{font-family:var(--display);font-size:var(--fs-8);color:var(--accent);letter-spacing:var(--tr-tight);line-height:1;font-weight:400;}
.header-sessions{font-size:var(--fs-2);color:var(--text-dim);font-family:var(--sans);}
.header-settings{
  width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--surface-hover);color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.header-settings:hover{color:var(--text);border-color:var(--border-strong);}

.content{
  padding:var(--sp-6) var(--sp-6) var(--sp-4);
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
}
#app:has(.nav:not(.hidden)) .content{padding-bottom:0;}
.content:focus{outline:none;}

/* ── nav ── */
.nav{
  flex-shrink:0;margin-top:var(--sp-4);background:var(--surface);
  border-top:1px solid var(--border);display:flex;justify-content:space-around;
  padding:var(--sp-3) 0;padding-bottom:max(12px, env(safe-area-inset-bottom));
}
.nav button{
  background:none;border:none;font-size:var(--fs-3);font-family:var(--sans);letter-spacing:var(--tr-tight);
  padding:var(--sp-2) var(--sp-5);min-height:44px;color:var(--text-dim);touch-action:manipulation;
}
.nav button.active{color:var(--accent);font-weight:700;}

/* ── shared bits ── */
.section-label{font-size:var(--fs-2);letter-spacing:var(--tr-label);color:var(--text-muted);text-transform:uppercase;font-family:var(--sans);margin-bottom:var(--sp-3);font-weight:400;}
.empty-msg{text-align:center;padding:var(--sp-10) var(--sp-5);color:var(--text-dim);font-family:var(--sans);line-height:1.6;}
.stack-sm{margin-bottom:var(--sp-5);}

/* ── install nudge ── */
/* Deliberately not the storage-warning's red: nothing is wrong, and a standing
   red banner on the home screen would teach the lifter to ignore the real one. */
.install-note{
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);
  padding:var(--sp-4);margin-bottom:var(--sp-5);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
}
.install-note-text{flex:1 1 100%;font-size:var(--fs-3);color:var(--text-muted);line-height:1.55;}
.install-note-text strong{color:var(--text);font-weight:600;}
.install-note-how{flex:1;font-size:var(--fs-2);color:var(--text-dim);font-family:var(--sans);}
.install-note-go{
  background:var(--accent);border:1px solid var(--accent);border-radius:var(--r-sm);color:var(--bg);
  font-family:var(--sans);font-size:var(--fs-3);font-weight:700;padding:var(--sp-2) var(--sp-5);min-height:44px;
}
.install-note-close{
  background:none;border:1px solid var(--border-strong);border-radius:var(--r-sm);color:var(--text-muted);
  font-family:var(--sans);font-size:var(--fs-2);padding:var(--sp-2) var(--sp-4);min-height:44px;margin-left:auto;
}
.install-note-close:hover{color:var(--text);border-color:var(--text);}

/* ── dashboard ── */
.dash-head{margin-bottom:var(--sp-6);}
.next-workout-row{display:flex;align-items:center;gap:var(--sp-3);}
.next-workout-title{font-family:var(--display);font-size:var(--fs-10);letter-spacing:var(--tr-tight);margin-bottom:var(--sp-1);font-weight:400;}
.swap-btn{
  width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--surface-hover);color:var(--text-muted);font-size:var(--fs-5);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.swap-btn:hover{color:var(--text);}
.last-trained{font-size:var(--fs-2);font-family:var(--sans);color:var(--text-dim);margin-top:var(--sp-2);}
.weights-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--sp-3);gap:var(--sp-3);}
.weights-hint{font-size:var(--fs-1);color:var(--text-dim);font-family:var(--sans);}
.weight-row{
  display:flex;justify-content:space-between;align-items:center;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);margin-bottom:var(--sp-2);border:1px solid var(--border);background:var(--surface);gap:var(--sp-3);
}
.weight-row.next{border-color:var(--border-strong);box-shadow:inset 3px 0 0 var(--accent);}
.weight-row .name{font-size:var(--fs-4);flex:1;min-width:0;}
.weight-row.next .name{color:var(--text);font-weight:600;}
.weight-row:not(.next) .name{color:var(--text-muted);}
.weight-meta{font-size:var(--fs-1);font-family:var(--sans);color:var(--warn);display:block;margin-top:var(--sp-0);}
.weight-controls{display:flex;align-items:center;gap:var(--sp-3);}
.weight-val{font-family:var(--mono);font-size:var(--fs-5);font-weight:700;min-width:64px;text-align:center;background:none;border:none;color:var(--text);padding:var(--sp-2) var(--sp-0);}
.weight-val:hover{color:var(--accent);}
.weight-row:not(.next) .weight-val{color:var(--text-muted);}
.adj-btn{
  width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--surface-hover);color:var(--text);font-size:var(--fs-6);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
}
.dash-actions{margin-top:var(--sp-4);}
.start-btn{
  width:100%;padding:var(--sp-5);border-radius:var(--r-md);border:none;background:var(--accent);color:var(--bg);
  font-family:var(--display);font-size:var(--fs-7);letter-spacing:var(--tr-wide);box-shadow:0 0 40px var(--accent-dim);margin-top:var(--sp-2);
}
.secondary-btn{
  width:100%;padding:var(--sp-4);border-radius:var(--r-md);border:1px solid var(--border-strong);
  background:var(--surface-hover);color:var(--text);font-size:var(--fs-4);font-family:var(--sans);margin-top:var(--sp-3);
}

/* ── workout ── */
.wo-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-6);gap:var(--sp-3);}
.wo-cancel{background:none;border:none;color:var(--text-muted);font-size:var(--fs-4);font-family:var(--sans);padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;min-height:44px;min-width:44px;}
.wo-label{font-family:var(--sans);font-size:var(--fs-2);font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-dim);}
.dots{display:flex;gap:var(--sp-2);justify-content:center;margin-bottom:var(--sp-7);}
.dot{
  width:36px;height:36px;border-radius:50%;border:none;background:none;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.dot-inner{width:10px;height:10px;border-radius:50%;background:var(--border-strong);display:block;transition:all 0.3s;}
.dot.active .dot-inner{background:var(--accent);width:12px;height:12px;}
.dot.done .dot-inner{background:var(--success);}
.dot.skipped .dot-inner{background:var(--text-dim);}
.exercise-name{font-family:var(--display);font-size:var(--fs-9);letter-spacing:var(--tr-tight);text-align:center;margin-bottom:var(--sp-2);font-weight:400;}
.exercise-weight{font-family:var(--display);font-size:var(--fs-11);color:var(--accent);text-align:center;letter-spacing:var(--tr-tight);line-height:1.1;}
.exercise-scheme{font-size:var(--fs-4);color:var(--text-muted);text-align:center;margin-top:var(--sp-2);font-family:var(--sans);}
.last-time{font-size:var(--fs-2);color:var(--text-dim);text-align:center;margin-top:var(--sp-3);font-family:var(--sans);line-height:1.5;}
.last-time b{color:var(--text-muted);font-weight:400;font-family:var(--mono);}
.sets-row{display:flex;gap:var(--sp-3);justify-content:center;margin:var(--sp-7) 0 var(--sp-4);flex-wrap:wrap;}
.set-btn{
  width:56px;height:56px;border-radius:var(--r-md);border:2px solid var(--border-strong);
  background:var(--surface);font-size:var(--fs-6);font-weight:700;font-family:var(--mono);
  display:flex;align-items:center;justify-content:center;transition:all 0.15s ease;color:var(--text-muted);
}
.set-btn.complete{border-color:var(--success);background:rgba(74,222,128,0.13);color:var(--success);}
.set-btn.partial{border-color:var(--warn);background:rgba(251,191,36,0.13);color:var(--warn);}
.set-btn.fail{border-color:var(--fail);background:rgba(248,113,113,0.13);color:var(--fail);}
/* A set that was never attempted. Dashed and dim so it reads as absent rather
   than as a result, and never as the red of a set that was missed. */
.set-btn.unlogged{border-style:dashed;border-color:var(--border-strong);background:transparent;color:var(--text-dim);}
.sets-hint{text-align:center;font-size:var(--fs-2);color:var(--text-dim);font-family:var(--sans);margin-bottom:var(--sp-7);line-height:1.6;}
.next-btn{width:100%;padding:var(--sp-4);border-radius:var(--r-md);border:none;font-family:var(--display);font-size:var(--fs-6);letter-spacing:var(--tr-mid);margin-top:var(--sp-4);}
.next-btn.ready{background:var(--accent);color:var(--bg);}
.next-btn.waiting{background:var(--border);color:var(--text-muted);cursor:not-allowed;}
.skip-lift-btn{width:100%;padding:var(--sp-3);border-radius:var(--r-md);border:none;background:transparent;color:var(--text-dim);font-size:var(--fs-3);font-family:var(--sans);margin-top:var(--sp-2);}

/* ── rest picker ── */
.rest-picker{margin-top:var(--sp-6);text-align:center;}
.rest-picker-label{font-size:var(--fs-2);letter-spacing:var(--tr-wide);color:var(--text-dim);text-transform:uppercase;font-family:var(--sans);margin-bottom:var(--sp-4);}
.rest-picker-btns{display:flex;gap:var(--sp-3);justify-content:center;margin-bottom:var(--sp-3);}
.rest-btn{
  flex:1;padding:var(--sp-4) var(--sp-2);border-radius:var(--r-md);border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);font-family:var(--display);font-size:var(--fs-7);
  letter-spacing:var(--tr-tight);min-height:56px;
}
.rest-btn:active{background:var(--surface-hover);}
.rest-skip-btn{width:100%;padding:var(--sp-3);border-radius:var(--r-md);border:none;background:transparent;color:var(--text-dim);font-size:var(--fs-3);font-family:var(--sans);}

/* ── rest bar (non-modal) ── */
.rest-bar{
  position:fixed;left:0;right:0;bottom:var(--nav-h);
  max-width:480px;margin:0 auto;background:var(--surface);border-top:1px solid var(--accent-border);
  border-bottom:1px solid var(--accent-border);padding:var(--sp-3) var(--sp-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);z-index:60;
}
.rest-bar.workout-mode{bottom:0;padding-bottom:max(12px, env(safe-area-inset-bottom));}
.rest-bar-main{display:flex;align-items:baseline;gap:var(--sp-3);min-width:0;}
.rest-bar-label{font-size:var(--fs-1);letter-spacing:var(--tr-mid);color:var(--text-dim);text-transform:uppercase;font-family:var(--sans);}
.rest-bar-time{font-family:var(--mono);font-size:var(--fs-7);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.rest-bar-time.urgent{color:var(--accent);}
.rest-bar-actions{display:flex;gap:var(--sp-2);flex-shrink:0;}
.rest-bar-btn{
  padding:var(--sp-3) var(--sp-3);min-height:44px;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--surface-hover);color:var(--text);font-size:var(--fs-3);font-family:var(--sans);
}
.rest-bar-btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600;}

/* ── warmups ── */
.warmup-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-1) var(--sp-4);margin:var(--sp-4) 0 var(--sp-6);}
.warmup-row{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) 0;border-bottom:1px solid var(--border);gap:var(--sp-3);}
.warmup-row:last-child{border-bottom:none;}
.warmup-label{font-family:var(--mono);font-size:var(--fs-2);color:var(--text-muted);}
.warmup-weight{font-family:var(--mono);font-size:var(--fs-4);font-weight:700;color:var(--text);}
.warmup-scheme{font-family:var(--mono);font-size:var(--fs-1);color:var(--text-dim);}
/* Today-only weight change on the load-the-bar screen. Sits under the big
   number it changes, quiet enough not to compete with "Bar is loaded". */
.today-adjust{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-bottom:var(--sp-2);}
.today-adjust-label{font-size:var(--fs-2);color:var(--text-dim);font-family:var(--sans);letter-spacing:var(--tr-tight);}
.today-adjust-note{text-align:center;font-size:var(--fs-2);color:var(--text-muted);font-family:var(--sans);margin-bottom:var(--sp-4);}
.today-adjust-reset{
  background:none;border:none;padding:0;font-family:inherit;font-size:inherit;
  color:var(--accent);text-decoration:underline;text-underline-offset:3px;
}

.warmup-title{font-size:var(--fs-1);letter-spacing:var(--tr-mid);color:var(--text-dim);text-transform:uppercase;font-family:var(--sans);margin:var(--sp-5) 0 0;}

/* ── plate screen ── */
.plate-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-1) var(--sp-5);margin:var(--sp-4) 0 var(--sp-6);}
.plate-list-row{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) 0;border-bottom:1px solid var(--border);}
.plate-list-row:last-child{border-bottom:none;}
.plate-list-weight{font-family:var(--display);font-size:var(--fs-8);letter-spacing:var(--tr-tight);color:var(--text);}
.plate-list-unit{font-size:var(--fs-3);color:var(--text-muted);margin-left:var(--sp-1);font-family:var(--sans);}
.plate-list-qty{font-family:var(--mono);font-size:var(--fs-6);font-weight:700;color:var(--text);}
.plate-bar-note{font-size:var(--fs-2);color:var(--text-dim);font-family:var(--sans);text-align:center;padding:var(--sp-5) 0;}
.plate-instruction{font-size:var(--fs-2);letter-spacing:var(--tr-wide);color:var(--text-dim);text-transform:uppercase;font-family:var(--sans);text-align:center;margin-bottom:var(--sp-3);}
.plate-warning{font-size:var(--fs-2);font-family:var(--sans);color:var(--warn);text-align:center;margin-top:var(--sp-3);line-height:1.5;}

/* ── summary ── */
.summary-title{font-family:var(--display);font-size:var(--fs-10);letter-spacing:var(--tr-tight);text-align:center;color:var(--text);margin-bottom:var(--sp-2);font-weight:400;}
.summary-sub{text-align:center;font-family:var(--sans);font-size:var(--fs-2);color:var(--text-dim);margin-bottom:var(--sp-7);}
.summary-row{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) 0;border-bottom:1px solid var(--border);gap:var(--sp-3);}
.summary-name{font-size:var(--fs-4);color:var(--text);}
.summary-detail{font-family:var(--sans);font-size:var(--fs-2);color:var(--text-dim);display:block;margin-top:var(--sp-1);}
.summary-change{font-family:var(--mono);font-size:var(--fs-3);font-weight:700;text-align:right;flex-shrink:0;}
.summary-change.up{color:var(--success);}
.summary-change.down{color:var(--fail);}
.summary-change.flat{color:var(--text-muted);}
.pr-badge{
  display:inline-block;font-family:var(--sans);font-size:var(--fs-1);letter-spacing:var(--tr-wide);
  background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border);
  border-radius:var(--r-xs);padding:var(--sp-0) var(--sp-1);margin-left:var(--sp-2);vertical-align:middle;
}

/* ── history ── */
.history-card{padding:var(--sp-5);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);margin-bottom:var(--sp-3);width:100%;text-align:left;display:block;}
button.history-card{border-color:var(--border-strong);}
button.history-card:hover{background:var(--surface-hover);}
.history-top{display:flex;justify-content:space-between;margin-bottom:var(--sp-3);gap:var(--sp-3);align-items:baseline;}
.history-type{font-family:var(--display);font-size:var(--fs-6);letter-spacing:var(--tr-tight);color:var(--text);}
.history-date{font-size:var(--fs-3);color:var(--text-muted);font-family:var(--sans);font-variant-numeric:tabular-nums;}
.history-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-2);gap:var(--sp-3);}
.history-exname{font-size:var(--fs-3);color:var(--text-muted);}
.history-right{display:flex;align-items:center;gap:var(--sp-3);}
.history-weight{font-size:var(--fs-4);font-weight:600;font-family:var(--mono);color:var(--text);}
.history-sets{font-size:var(--fs-2);font-family:var(--mono);}
.history-sets.ok{color:var(--success);}
.history-sets.bad{color:var(--fail);}
.history-sets.skipped{color:var(--text-dim);}
/* Cut short: work was done, nothing was missed. Amber, not red -- red on the
   Log means a missed rep, which is the thing that eventually deloads you. */
.history-sets.partial{color:var(--warn);}
.history-note{font-size:var(--fs-2);color:var(--text-dim);margin-top:var(--sp-3);line-height:1.5;font-style:italic;}
.history-foot{font-family:var(--sans);font-size:var(--fs-1);color:var(--text-dim);margin-top:var(--sp-3);}

/* ── stats strip ── */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-bottom:var(--sp-6);}
.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3);text-align:center;}
.stat-box-n{font-family:var(--mono);font-size:var(--fs-6);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.stat-box-l{font-family:var(--sans);font-size:var(--fs-1);letter-spacing:var(--tr-wide);color:var(--text-dim);text-transform:uppercase;margin-top:var(--sp-1);}

/* ── filters ── */
.filter-row{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-5);flex-wrap:wrap;}
.filter-btn{
  padding:var(--sp-2) var(--sp-4);min-height:40px;border-radius:var(--r-lg);border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text-muted);font-family:var(--sans);font-size:var(--fs-2);
}
.filter-btn.active{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:700;}

/* ── charts ── */
.chart-block{margin-bottom:var(--sp-7);}
.chart-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--sp-3);gap:var(--sp-3);}
.chart-name{font-size:var(--fs-5);font-weight:600;}
.chart-current{font-size:var(--fs-4);color:var(--text-muted);font-family:var(--mono);}
.chart-wrap{background:var(--surface);border-radius:var(--r-md);padding:var(--sp-4);border:1px solid var(--border);}
.chart-legend{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-2);color:var(--text-dim);font-family:var(--sans);margin-bottom:var(--sp-5);}
.chart-legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.chart-legend-dot.missed{background:var(--fail);box-shadow:0 0 0 2px var(--surface);}

.chart-table-toggle{
  background:none;border:none;color:var(--text-dim);font-family:var(--sans);font-size:var(--fs-1);
  margin-top:var(--sp-1);padding:var(--sp-2) 0;min-height:36px;text-decoration:underline;
}
.chart-table{width:100%;border-collapse:collapse;margin-top:var(--sp-2);font-family:var(--mono);font-size:var(--fs-2);}
.chart-table caption{text-align:left;color:var(--text-dim);font-size:var(--fs-1);padding-bottom:var(--sp-2);}
.chart-table th,.chart-table td{text-align:left;padding:var(--sp-2) var(--sp-2);border-bottom:1px solid var(--border);color:var(--text-muted);}
.chart-table th{color:var(--text);font-weight:600;}
.chart-scroll{overflow-x:auto;}

/* ── data tab ── */
.data-section{margin-bottom:var(--sp-8);}
.data-section-title{font-size:var(--fs-2);letter-spacing:var(--tr-label);color:var(--text-muted);text-transform:uppercase;font-family:var(--sans);margin-bottom:var(--sp-4);font-weight:400;}
.del-card{padding:var(--sp-4) var(--sp-4);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);margin-bottom:var(--sp-2);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);}
.del-card-info{flex:1;min-width:0;}
/* The body-weight rows make this half a button (tap to load the entry into the
   form above); the restore-point rows leave it a div. Both have to read the
   same, so the button is stripped back to the div's presentation. */
button.del-card-info{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-0);
  background:none;border:none;padding:0;text-align:left;font-family:inherit;color:inherit;
  min-height:44px;justify-content:center;
}
button.del-card-info:hover .del-card-type{color:var(--accent);}
.del-card.editing{border-color:var(--accent-border);box-shadow:inset 3px 0 0 var(--accent);}
.del-card-type{font-size:var(--fs-4);font-weight:600;margin-bottom:var(--sp-0);font-variant-numeric:tabular-nums;}
.del-card-date{font-size:var(--fs-2);color:var(--text-muted);font-family:var(--sans);font-variant-numeric:tabular-nums;}
.del-card-detail{font-size:var(--fs-1);color:var(--text-dim);font-family:var(--sans);margin-top:var(--sp-0);}
.del-btn{
  width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--surface-hover);color:var(--fail);font-size:var(--fs-5);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.del-btn:hover{background:rgba(248,113,113,0.15);border-color:var(--fail);}
.show-more-btn{width:100%;padding:var(--sp-3);border-radius:var(--r-md);border:1px dashed var(--border-strong);background:transparent;color:var(--text-muted);font-family:var(--sans);font-size:var(--fs-2);margin-top:var(--sp-1);}

/* ── forms ── */
.form-group{margin-bottom:var(--sp-4);}
.form-label{display:block;font-size:var(--fs-2);letter-spacing:var(--tr-mid);color:var(--text-muted);text-transform:uppercase;font-family:var(--sans);margin-bottom:var(--sp-2);}
.form-input{
  width:100%;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);font-size:var(--fs-5);font-family:var(--mono);
}
.form-input:focus{border-color:var(--accent);}
.form-select{
  width:100%;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);font-size:var(--fs-5);font-family:var(--sans);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23A5A5A5' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.form-select:focus{border-color:var(--accent);}
.form-row{display:flex;gap:var(--sp-3);}
.form-row .form-group{flex:1;}
.form-hint{font-size:var(--fs-1);color:var(--text-dim);font-family:var(--sans);margin-top:var(--sp-2);line-height:1.5;}
.weight-input-row{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-3);border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--border);margin-bottom:var(--sp-2);}
.weight-input-row .exname{font-size:var(--fs-3);color:var(--text-muted);flex:1;min-width:0;}
.weight-input-row .sets-label{font-size:var(--fs-1);color:var(--text-dim);font-family:var(--mono);min-width:36px;text-align:right;}
.data-stepper{display:flex;align-items:center;gap:var(--sp-2);}
.data-stepper-btn{
  width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--surface-hover);color:var(--text);font-size:var(--fs-6);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);flex-shrink:0;
}
.data-stepper-val{font-family:var(--mono);font-size:var(--fs-4);font-weight:700;min-width:56px;text-align:center;color:var(--text);}

/* Per-lift "not performed" toggle in the session editor. Off it reads as an
   available action; on it reads as the row's current state, which is why it
   takes the dim treatment rather than the accent. */
.skip-toggle{
  background:none;border:1px solid var(--border-strong);border-radius:var(--r-xs);
  color:var(--text-dim);font-family:var(--sans);font-size:var(--fs-1);letter-spacing:var(--tr-tight);
  padding:var(--sp-2) var(--sp-3);min-height:34px;flex-shrink:0;
}
.skip-toggle:hover{color:var(--text);border-color:var(--text);}
.skip-toggle.on{background:var(--surface-hover);border-color:var(--text);color:var(--text);font-weight:700;}
.weight-input-row.is-skipped .exname,
.weight-input-row.is-skipped .data-stepper-val{color:var(--text-dim);text-decoration:line-through;}
.add-btn{width:100%;padding:var(--sp-4);border-radius:var(--r-md);border:none;background:var(--accent);color:var(--bg);font-family:var(--display);font-size:var(--fs-6);letter-spacing:var(--tr-mid);margin-top:var(--sp-2);}
.add-btn:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed;}
.success-toast{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);background:rgba(74,222,128,0.15);border:1px solid var(--success);color:var(--success);font-size:var(--fs-3);font-family:var(--sans);text-align:center;margin-bottom:var(--sp-4);}

/* ── backup ── */
.backup-row{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-3);flex-wrap:wrap;}
.backup-btn{
  flex:1;min-width:130px;padding:var(--sp-3);border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--surface-hover);color:var(--text);font-size:var(--fs-4);font-family:var(--sans);
}
.backup-btn:hover{border-color:var(--text-muted);}
.backup-btn.danger{color:var(--fail);border-color:rgba(248,113,113,0.5);}
.backup-note{font-size:var(--fs-2);color:var(--text-dim);line-height:1.6;margin-top:var(--sp-1);}
.backup-status{font-size:var(--fs-2);font-family:var(--sans);margin-top:var(--sp-3);min-height:16px;}
.backup-status:empty{margin-top:0;min-height:0;}
.backup-status.ok{color:var(--success);}
.backup-status.err{color:var(--fail);}
.backup-age{font-size:var(--fs-2);font-family:var(--sans);margin:var(--sp-3) 0;padding:var(--sp-3);border-radius:var(--r-sm);}
.backup-age.stale{background:rgba(251,191,36,0.12);border:1px solid var(--warn);color:var(--warn);}
.backup-age.fresh{color:var(--text-dim);}

/* ── settings ── */
.set-group{margin-bottom:var(--sp-7);}
.set-group-title{font-size:var(--fs-2);letter-spacing:var(--tr-label);color:var(--text-muted);text-transform:uppercase;font-family:var(--sans);margin-bottom:var(--sp-4);}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:var(--sp-2);}
.set-row-label{font-size:var(--fs-4);color:var(--text);flex:1;min-width:0;}
.set-row-hint{font-size:var(--fs-1);color:var(--text-dim);font-family:var(--sans);display:block;margin-top:var(--sp-1);line-height:1.5;}
.seg{display:flex;gap:0;border:1px solid var(--border-strong);border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;}
.seg button{padding:var(--sp-3) var(--sp-4);min-height:44px;border:none;background:var(--surface-hover);color:var(--text-muted);font-family:var(--sans);font-size:var(--fs-3);}
.seg button.active{background:var(--text);color:var(--bg);font-weight:700;}
.plate-toggle-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.plate-toggle{
  padding:var(--sp-3) var(--sp-3);min-height:44px;min-width:56px;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text-muted);font-family:var(--mono);font-size:var(--fs-3);
}
.plate-toggle.on{background:var(--surface-hover);border-color:var(--text);color:var(--text);font-weight:700;}

/* ── dialogs ── */
.dlg{
  padding:var(--sp-7);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border-strong);
  max-width:340px;width:calc(100% - 40px);color:var(--text);margin:auto;
}
.dlg::backdrop{background:rgba(0,0,0,0.85);}
.dlg-title{font-size:var(--fs-6);font-weight:700;margin-bottom:var(--sp-2);text-align:center;font-family:var(--sans);}
.dlg-msg{font-size:var(--fs-3);color:var(--text-muted);margin-bottom:var(--sp-6);line-height:1.5;text-align:center;}
.dlg-check{
  display:flex;flex-direction:column;gap:var(--sp-1);margin-top:var(--sp-4);text-align:left;
  padding:var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg);
}
.dlg-check-label{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-3);color:var(--text);cursor:pointer;min-height:34px;}
.dlg-check-label input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0;}
.dlg-check-detail{font-size:var(--fs-1);color:var(--text-dim);font-family:var(--sans);line-height:1.5;}

.dlg-actions{display:flex;gap:var(--sp-3);}
.dlg-cancel{flex:1;padding:var(--sp-4) var(--sp-3);min-height:52px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface-hover);color:var(--text);font-size:var(--fs-4);font-family:var(--sans);}
.dlg-go{flex:1;padding:var(--sp-4) var(--sp-3);min-height:52px;border-radius:var(--r-sm);border:none;background:var(--fail);color:#fff;font-size:var(--fs-4);font-weight:600;font-family:var(--sans);}
.dlg-go.safe{background:var(--accent);color:var(--bg);}
.reps-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin-bottom:var(--sp-5);}
.reps-btn{
  width:52px;height:52px;border-radius:var(--r-md);border:2px solid var(--border-strong);
  background:var(--surface-hover);color:var(--text);font-family:var(--mono);font-size:var(--fs-6);font-weight:700;
}
.reps-btn:hover{border-color:var(--accent);}
.reps-btn.wide{width:auto;flex:1 0 100%;height:auto;padding:var(--sp-3);font-family:var(--sans);font-size:var(--fs-3);font-weight:400;color:var(--text-muted);}

/* ── welcome / onboarding ── */
.welcome-wrap{display:flex;flex-direction:column;justify-content:center;min-height:75vh;padding:0 var(--sp-2);}
.welcome-logo{margin-bottom:var(--sp-4);display:block;}
.welcome-title{font-family:var(--display);font-size:var(--fs-10);color:var(--accent);letter-spacing:var(--tr-tight);line-height:1;margin-bottom:var(--sp-4);font-weight:400;}
.welcome-copy{font-size:var(--fs-5);color:var(--text-muted);line-height:1.7;max-width:320px;margin-bottom:var(--sp-7);}
.welcome-step-title{font-family:var(--display);font-size:var(--fs-9);letter-spacing:var(--tr-tight);margin-bottom:var(--sp-2);font-weight:400;}
.welcome-step-copy{font-size:var(--fs-4);color:var(--text-muted);line-height:1.6;margin-bottom:var(--sp-6);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}
@media (forced-colors:active){
  .set-btn{border:2px solid ButtonText;}
  .set-btn.complete{border-color:Highlight;}
  .set-btn.fail,.set-btn.partial{border-style:dashed;}
  .set-btn.unlogged{border-style:dotted;}
  .dot-inner{border:2px solid ButtonText;}
  .dot.active .dot-inner{background:Highlight;}
  .nav button.active{text-decoration:underline;}
  .filter-btn.active,.plate-toggle.on,.seg button.active,.skip-toggle.on{border:2px solid Highlight;}
}