/* =========================================================================
   Training Protocol — mobile-first stylesheet
   Palette + base lifted from the original workoutplan.html, then rebuilt
   for phones: bigger touch targets, sticky header, category filter,
   animated SVG demos. Motion is CSS-only so it respects reduce-motion.
   ========================================================================= */

:root {
  --primary: #2c3e50;
  --secondary: #4ca1af;
  --accent: #e67e22;
  --bg-color: #e9eef1;
  --text-main: #232b31;
  --text-light: #5a6670;
  --text-muted: #6b7680;
  --white: #ffffff;
  --border: #e1e8ed;
  --card-bg: #ffffff;

  /* category accents (match the tags) */
  --c-warm: #8a97a0;
  --c-lower: #1f9d57;
  --c-upper: #2980b9;
  --c-core: #8e44ad;

  --primary-700: #22303d;
  --primary-600: #34495e;
  --accent-600: #d96d10;
  --surface: #ffffff;
  --surface-2: #f4f7f8;
  --bg-tint: #e9eef1;

  --radius: 14px;
  --radius-sm: 10px;
  /* layered elevation ramp (replaces the single flat shadow) */
  --shadow-sm: 0 1px 2px rgba(16,33,49,.06), 0 1px 3px rgba(16,33,49,.10);
  --shadow: 0 2px 4px rgba(16,33,49,.05), 0 6px 16px rgba(16,33,49,.09);
  --shadow-md: 0 2px 4px rgba(16,33,49,.06), 0 8px 20px rgba(16,33,49,.10);
  --shadow-lg: 0 12px 30px rgba(16,33,49,.16), 0 3px 8px rgba(16,33,49,.08);
  /* modular type scale */
  --fs-xs: .72rem; --fs-sm: .82rem; --fs-base: .95rem; --fs-lg: 1.14rem; --fs-xl: 1.4rem; --fs-2xl: 1.75rem;
  --maxw: 760px;
  --tempo: 7s; /* 3s down · 1s hold · 3s up — the master pace */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-color);
  color: var(--text-main);
  line-height: 1.55;
  margin: 0;
  padding: 0 0 calc(48px + env(safe-area-inset-bottom, 0));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 14px; }

/* ---------- Sticky header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--primary);
  color: var(--white);
  padding: calc(12px + env(safe-area-inset-top, 0)) 14px 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.site-header .container { padding: 0; }
.site-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-header .sub {
  margin: 2px 0 0;
  font-size: 0.82rem;
  opacity: 0.78;
  font-weight: 400;
}
.header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

/* motion toggle */
.motion-toggle {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.motion-toggle:active { transform: scale(0.96); }
.motion-toggle .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6ee7a8; box-shadow: 0 0 0 3px rgba(110,231,168,0.2);
}
body.motion-off .motion-toggle .dot { background: #f0a35e; box-shadow: 0 0 0 3px rgba(240,163,94,0.2); }

/* ---------- Filter chips ---------- */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg-color);
  padding: 12px 0 6px;
  margin: 0 -14px;
}
.filter-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 14px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-light);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip.warm[aria-pressed="true"] { background: var(--c-warm); border-color: var(--c-warm); }
.chip.lower[aria-pressed="true"] { background: var(--c-lower); border-color: var(--c-lower); }
.chip.upper[aria-pressed="true"] { background: var(--c-upper); border-color: var(--c-upper); }
.chip.core[aria-pressed="true"] { background: var(--c-core); border-color: var(--c-core); }

/* ---------- Info boxes ---------- */
.rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 4px;
}
.rule {
  background: var(--white);
  border-radius: var(--radius);
  padding: 13px 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--text-light);
}
.rule strong { display: block; color: var(--primary); font-size: 0.74rem; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; }
.rule.pre { border-left: 4px solid var(--secondary); }
.rule.post { border-left: 4px solid var(--accent); }

.tempo-banner {
  background: linear-gradient(135deg, var(--primary), #1b2733);
  color: var(--white);
  text-align: center;
  padding: 14px;
  border-radius: var(--radius);
  margin: 12px 0 4px;
  box-shadow: var(--shadow);
}
.tempo-banner .big {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 1px;
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  color: #ffd9a8;
}
.tempo-banner .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; opacity: .7; }
.tempo-banner .desc { font-size: 0.8rem; opacity: .85; margin-top: 4px; }

.section-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-light);
  font-weight: 700;
  margin: 22px 4px 2px;
}

/* ---------- Exercise grid ---------- */
.exercise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 620px) {
  .exercise-grid { grid-template-columns: 1fr 1fr; }
}

.exercise-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.exercise-card.is-hidden { display: none; }

/* demo (animated svg) holder */
.demo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: radial-gradient(120% 120% at 50% 18%, #ffffff 0%, #f1f5f6 70%, #e7eef0 100%);
  border-bottom: 1px solid var(--border);
}
.demo { display: block; width: 100%; height: 100%; }
.cat-flag {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #fff;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--c-warm);
}
.flag-warm { background: var(--c-warm); }
.flag-lower { background: var(--c-lower); }
.flag-upper { background: var(--c-upper); }
.flag-core { background: var(--c-core); }

.card-content { padding: 15px 16px 17px; }
.card-content h3 { margin: 0 0 11px; color: var(--primary); font-size: 1.18rem; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.stat-item { background: #f6f8f9; padding: 9px 11px; border-radius: 9px; border: 1px solid #eaeef1; }
.stat-label { display: block; font-size: 0.68rem; color: #7a858d; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }
.stat-value { display: block; font-size: 1rem; color: var(--primary); font-weight: 700; margin-top: 1px; }

.focus {
  background: #fff5ea;
  padding: 11px 12px;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  font-size: 0.88rem;
  color: #b15400;
}
.focus strong { display: block; margin-bottom: 3px; color: #934600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .5px; }

footer {
  text-align: center;
  color: var(--text-light);
  font-size: 0.78rem;
  margin: 30px 14px 0;
  opacity: .8;
}

/* =========================================================================
   SVG FIGURE — shared drawing styles
   ========================================================================= */
.demo .seg { fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.demo .seg.thin { stroke-width: 6; }
.demo .joint { fill: var(--primary); }
.demo .head { fill: #fff; stroke: var(--primary); stroke-width: 6; }
.demo .floor { stroke: #c4d0d6; stroke-width: 7; stroke-linecap: round; }
.demo .prop { fill: #d7e0e4; stroke: #b9c6cc; stroke-width: 2; }   /* box / bench / frame */
.demo .equip { fill: var(--accent); stroke: #c96d18; stroke-width: 2; }  /* weights */
.demo .equip-line { stroke: var(--accent); stroke-width: 6; stroke-linecap: round; fill: none; }
.demo .band { stroke: #c0392b; stroke-width: 5; stroke-linecap: round; fill: none; }
.demo .cable { stroke: #5a6770; stroke-width: 4; fill: none; }
.demo .accent-fill { fill: var(--accent); }

/* limbs that animate share a view-box transform context */
.demo [class*="anim-"] { transform-box: view-box; }

/* =========================================================================
   ANIMATIONS  (per exercise).  Tempo lifts use 0 / 42.86% / 57.14% / 100%
   to map onto 3s eccentric · 1s hold · 3s concentric of the 7s loop.
   Origins are the figure's joints in viewBox units (0 0 300 200).
   ========================================================================= */

/* 1 · DEAD BUGS — opposite arm + leg reach out and back (~4.5s) */
.ex-deadbug .anim-armA { transform-origin: 88px 150px;  animation: db-a 4.5s ease-in-out infinite; }
.ex-deadbug .anim-legA { transform-origin: 168px 150px; animation: db-b 4.5s ease-in-out infinite; }
.ex-deadbug .anim-armB { transform-origin: 88px 150px;  animation: db-b 4.5s ease-in-out infinite; }
.ex-deadbug .anim-legB { transform-origin: 168px 150px; animation: db-a 4.5s ease-in-out infinite; }
@keyframes db-a { 0%,100% { transform: rotate(0deg); }   45% { transform: rotate(-66deg); } }   /* arm: up -> overhead */
@keyframes db-b { 0%,100% { transform: rotate(-66deg); } 45% { transform: rotate(0deg); } }
/* legs reuse the same two phases but rotate the other way (set per-leg below) */
.ex-deadbug .anim-legA { animation-name: db-legA; }
.ex-deadbug .anim-legB { animation-name: db-legB; }
@keyframes db-legA { 0%,100% { transform: rotate(0deg); }  45% { transform: rotate(60deg); } }   /* leg: tabletop -> extended */
@keyframes db-legB { 0%,100% { transform: rotate(60deg); } 45% { transform: rotate(0deg); } }

/* 2 · PRONE Y-RAISES — both arms lift off floor into a Y, 2s hold at top (~5s) */
.ex-yraise .anim-armA { transform-origin: 180px 150px; animation: y-a 5s ease-in-out infinite; }
.ex-yraise .anim-armB { transform-origin: 180px 150px; animation: y-b 5s ease-in-out infinite; }
@keyframes y-a { 0%,100% { transform: rotate(0deg); } 30%,70% { transform: rotate(-36deg); } }
@keyframes y-b { 0%,100% { transform: rotate(0deg); } 30%,70% { transform: rotate(-22deg); } }

/* 3 · BOX SQUATS — sit to box and stand, 3-1-3-0 (chained ankle->knee->hip) */
.ex-squat .anim-shin  { transform-origin: 150px 190px; animation: sq-shin  var(--tempo) ease-in-out infinite; }
.ex-squat .anim-thigh { transform-origin: 150px 140px; animation: sq-thigh var(--tempo) ease-in-out infinite; }
.ex-squat .anim-torso { transform-origin: 150px 96px;  animation: sq-torso var(--tempo) ease-in-out infinite; }
@keyframes sq-shin  { 0%,100% { transform: rotate(0deg); }  42.86%,57.14% { transform: rotate(15deg); } }
@keyframes sq-thigh { 0%,100% { transform: rotate(0deg); }  42.86%,57.14% { transform: rotate(-78deg); } }
@keyframes sq-torso { 0%,100% { transform: rotate(0deg); }  42.86%,57.14% { transform: rotate(72deg); } }

/* 4 · RDL — hip hinge, stop early, 3-1-3-0 */
.ex-rdl .anim-torso { transform-origin: 150px 100px; animation: rdl-torso var(--tempo) ease-in-out infinite; }
.ex-rdl .anim-arms  { transform-origin: 150px 56px;  animation: rdl-arms  var(--tempo) ease-in-out infinite; }
@keyframes rdl-torso { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(60deg); } }
@keyframes rdl-arms  { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(-56deg); } }

/* 5 · DB FLOOR PRESS — supine 2-bone arm, presses up; elbow stops at floor (start at top) */
.ex-press .anim-upper { transform-origin: 110px 150px; animation: pr-upper var(--tempo) ease-in-out infinite; }
.ex-press .anim-fore  { transform-origin: 140px 150px; animation: pr-fore  var(--tempo) ease-in-out infinite; }
@keyframes pr-upper { 0%,100% { transform: rotate(-66deg); } 42.86%,57.14% { transform: rotate(0deg); } }
@keyframes pr-fore  { 0%,100% { transform: rotate(30deg); }  42.86%,57.14% { transform: rotate(0deg); } }

/* 6 · SEATED CABLE ROW — elbow drives back, forearm folds to torso, 3-1-3-0 (start extended) */
.ex-row .anim-upper { transform-origin: 104px 100px; animation: row-upper var(--tempo) ease-in-out infinite; }
.ex-row .anim-fore  { transform-origin: 150px 112px; animation: row-fore  var(--tempo) ease-in-out infinite; }
.ex-row .anim-cable { transform-origin: 288px 120px; animation: row-cable var(--tempo) ease-in-out infinite; }
@keyframes row-upper { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(88deg); } }
@keyframes row-fore  { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(-115deg); } }
@keyframes row-cable { 0%,100% { transform: scaleX(1); }   42.86%,57.14% { transform: scaleX(1.7); } }

/* 7 · ZERCHER HOLD — isometric: subtle brace + sweeping timer ring */
.ex-zercher .anim-brace { animation: zr-brace 4s ease-in-out infinite; transform-box: view-box; transform-origin: 150px 150px; }
@keyframes zr-brace { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } }
.ex-zercher .timer-ring { stroke-dasharray: 113; stroke-dashoffset: 113; animation: zr-ring 6s linear infinite; }
@keyframes zr-ring { from { stroke-dashoffset: 113; } to { stroke-dashoffset: 0; } }

/* 8 · PALLOF PRESS — forearm extends straight out (anti-rotation); band stretches */
.ex-pallof .anim-arms { transform-origin: 150px 92px; animation: pf-arms 4s ease-in-out infinite; }
.ex-pallof .anim-band { transform-origin: 15px 96px;  animation: pf-band 4s ease-in-out infinite; }
@keyframes pf-arms { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(2.3); } }
@keyframes pf-band { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.22); } }

/* =========================================================================
   REDUCE MOTION — OS preference OR manual toggle freezes to a clean pose
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .demo * { animation: none !important; }
}
body.motion-off .demo * { animation: none !important; }

/* When frozen, hint that the figure is static */
body.motion-off .demo, .demo { }

/* =========================================================================
   APP UI — toolbar, cards, guided session, swap sheet, generator
   ========================================================================= */
.demo-slot { position: absolute; inset: 0; }
.demo.no-equip .equip { display: none; }
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }   /* beat the flex/fixed display on overlays */

/* toolbar */
.toolbar { display: flex; gap: 8px; margin: 14px 0 2px; }
.btn {
  appearance: none; border: 1.5px solid var(--border); background: var(--white);
  color: var(--primary); font-size: 0.95rem; font-weight: 700; border-radius: 12px;
  padding: 13px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { flex: 1 1 auto; background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 10px rgba(230,126,34,0.28); }
.btn-ghost { flex: 0 0 auto; color: var(--text-light); }
.btn-block { width: 100%; margin-top: 14px; padding: 15px; font-size: 1rem; }

/* card additions */
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-top h3 { margin: 0; }
.swap-btn {
  flex: 0 0 auto; border: 1.5px solid var(--secondary); color: var(--secondary); background: #eef8fa;
  border-radius: 999px; padding: 6px 11px; font-size: 0.76rem; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.swap-btn:active { transform: scale(0.95); }
.group-tag { font-size: 0.72rem; color: #8a949c; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin: 3px 0 11px; }

/* ---- guided session ---- */
.guided { position: fixed; inset: 0; z-index: 50; background: var(--bg-color); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.guided-inner { max-width: 520px; margin: 0 auto; padding: calc(58px + env(safe-area-inset-top,0)) 18px calc(28px + env(safe-area-inset-bottom,0)); }
.overlay-close {
  position: fixed; top: calc(10px + env(safe-area-inset-top,0)); right: 12px; z-index: 60;
  width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(44,62,80,0.9); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.overlay-close.sm { position: static; width: 34px; height: 34px; font-size: 1.3rem; background: #eef2f1; color: var(--text-light); box-shadow: none; }
.g-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.g-count { font-size: 0.95rem; font-weight: 800; color: var(--primary); }
.g-dots { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.g-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d4dde1; }
.g-dots i.on { background: var(--accent); transform: scale(1.25); }
.g-dots i.past { background: var(--secondary); }
.g-demo { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 120% at 50% 18%, #fff 0%, #f1f5f6 70%, #e7eef0 100%);
  border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer; }
.g-demo .demo-slot { position: absolute; inset: 0; }
.g-name { font-size: 1.6rem; margin: 16px 0 10px; color: var(--primary); text-align: center; }
.g-stats { display: flex; gap: 12px; }
.g-stats span { flex: 1; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; font-size: 0.74rem; color: #7a858d; text-transform: uppercase; letter-spacing: .4px; }
.g-stats b { display: block; font-size: 1.1rem; color: var(--primary); text-transform: none; letter-spacing: 0; margin-bottom: 2px; }
.g-focus { margin: 14px 0; font-size: 0.95rem; }
.g-tempo { text-align: center; font-size: 0.85rem; color: var(--text-light); margin-bottom: 18px; }
.g-tempo b { color: var(--accent); font-family: ui-monospace, Menlo, monospace; }
.g-actions { display: flex; gap: 10px; }
.g-actions button { flex: 1; border-radius: 12px; padding: 15px 10px; font-size: 1rem; font-weight: 800; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.g-prev { background: #e7edf0; color: var(--text-light); }
.g-prev:disabled { opacity: .4; }
.g-swap { background: #eef8fa; color: var(--secondary); flex: 0 0 auto !important; padding: 15px 16px; }
.g-next { background: var(--accent); color: #fff; box-shadow: 0 4px 10px rgba(230,126,34,0.3); }
.g-hint { text-align: center; font-size: 0.78rem; color: #9aa4ab; margin: 12px 0 0; }
.guided-inner.done { text-align: center; padding-top: 70px; }
.done-check { width: 88px; height: 88px; border-radius: 50%; background: var(--c-lower); color: #fff; font-size: 3rem; line-height: 88px; margin: 0 auto 18px; box-shadow: 0 8px 20px rgba(31,157,87,.35); }
.guided-inner.done h2 { color: var(--primary); margin: 0 0 8px; }
.guided-inner.done p { color: var(--text-light); margin: 0 auto 22px; max-width: 320px; }
.g-restart { background: var(--accent); color: #fff; }
.g-close2 { background: #e7edf0; color: var(--text-light); }

/* ---- bottom sheets (swap + generate) ---- */
.sheet-wrap { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; }
.backdrop { position: absolute; inset: 0; background: rgba(20,30,40,0.5); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: relative; width: 100%; max-width: 620px; margin: 0 auto; background: var(--bg-color);
  border-radius: 18px 18px 0 0; max-height: 86vh; display: flex; flex-direction: column; animation: slideup .25s ease; box-shadow: 0 -8px 30px rgba(0,0,0,.25); }
@keyframes slideup { from { transform: translateY(100%); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.sheet-head h3 { margin: 0; color: var(--primary); font-size: 1.15rem; }
.sheet-body { padding: 0 16px calc(20px + env(safe-area-inset-bottom,0)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet-note { font-size: 0.88rem; color: var(--text-light); margin: 4px 0 14px; }
.alt-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--white);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin-bottom: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.alt-row:active { transform: scale(0.99); background: #f3f8f9; }
.alt-fig { position: relative; flex: 0 0 88px; width: 88px; aspect-ratio: 3/2; border-radius: 8px; overflow: hidden; background: #f1f5f6; border: 1px solid var(--border); }
.alt-fig .demo-slot { position: absolute; inset: 0; }
.alt-meta { flex: 1 1 auto; min-width: 0; }
.alt-name { display: block; font-weight: 700; color: var(--primary); font-size: 1rem; }
.alt-stats { display: block; font-size: 0.82rem; color: var(--text-light); margin-top: 2px; }
.alt-go { flex: 0 0 auto; color: var(--accent); font-weight: 700; font-size: 0.85rem; }

/* ---- generator ---- */
.preset-row { display: flex; gap: 8px; margin-bottom: 16px; }
.preset { flex: 1; border: 1.5px solid var(--border); background: var(--white); border-radius: 12px; padding: 12px 6px; font-size: 0.86rem; font-weight: 700; color: var(--primary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.preset:active { transform: scale(0.97); background: #eef8fa; }
.kit-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .6px; color: #8a949c; font-weight: 700; margin-bottom: 8px; }
.kit-box { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-chip { border: 1.5px solid var(--border); background: var(--white); color: var(--text-light); border-radius: 999px; padding: 9px 14px; font-size: 0.86rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kit-chip.on { background: var(--secondary); border-color: var(--secondary); color: #fff; }

/* ---- toast ---- */
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom,0)); transform: translateX(-50%) translateY(20px);
  background: var(--primary); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 70; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================================
   ANIMATIONS — the 7 new figures
   ========================================================================= */
/* split squat (front-leg chain, shallower than the box squat) */
.ex-splitsquat .anim-fshin  { transform-origin: 180px 190px; animation: ss-shin  var(--tempo) ease-in-out infinite; }
.ex-splitsquat .anim-fthigh { transform-origin: 182px 150px; animation: ss-thigh var(--tempo) ease-in-out infinite; }
.ex-splitsquat .anim-fbody  { transform-origin: 152px 122px; animation: ss-body  var(--tempo) ease-in-out infinite; }
@keyframes ss-shin  { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(10deg); } }
@keyframes ss-thigh { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(-44deg); } }
@keyframes ss-body  { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(42deg); } }

/* hip thrust (bridge — hips rise) */
.ex-hipthrust .anim-torso { transform-origin: 88px 148px; animation: ht-torso var(--tempo) ease-in-out infinite; }
.ex-hipthrust .anim-thigh { transform-origin: 150px 150px; animation: ht-thigh var(--tempo) ease-in-out infinite; }
@keyframes ht-torso { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(-26deg); } }
@keyframes ht-thigh { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(30deg); } }

/* lat pulldown (2-bone: pull bar down to clavicle) */
.ex-pulldown .anim-upper { transform-origin: 150px 88px; animation: pd-upper var(--tempo) ease-in-out infinite; }
.ex-pulldown .anim-fore  { transform-origin: 150px 54px; animation: pd-fore  var(--tempo) ease-in-out infinite; }
.ex-pulldown .anim-cable { transform-origin: 150px 18px; animation: pd-cable var(--tempo) ease-in-out infinite; }
@keyframes pd-upper { 0%,100% { transform: rotate(0deg); }  42.86%,57.14% { transform: rotate(108deg); } }
@keyframes pd-fore  { 0%,100% { transform: rotate(0deg); }  42.86%,57.14% { transform: rotate(165deg); } }
@keyframes pd-cable { 0%,100% { transform: scaleY(1); }     42.86%,57.14% { transform: scaleY(4.4); } }

/* suitcase carry (steady, slight walking bob) */
.ex-carry .anim-bob { transform-box: view-box; animation: cr-bob 2.4s ease-in-out infinite; }
@keyframes cr-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* push-up (plank dips toward floor) */
.ex-pushup .anim-body { transform-origin: 64px 176px; animation: pu-body var(--tempo) ease-in-out infinite; }
@keyframes pu-body { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(7deg); } }

/* bent-over row (drive the elbow up) */
.ex-bentrow .anim-arm { transform-origin: 120px 88px; animation: br-arm var(--tempo) ease-in-out infinite; }
@keyframes br-arm { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(-54deg); } }

/* side plank (anti-sag hip lift) */
.ex-sideplank .anim-hips { transform-box: view-box; animation: sp-hips 3s ease-in-out infinite; }
@keyframes sp-hips { 0%,100% { transform: translateY(3px); } 50% { transform: translateY(-2px); } }

/* overhead press (2-bone: rack -> full overhead lockout) */
.ex-ohp .anim-ohpU { transform-origin: 150px 92px; animation: ohpU var(--tempo) ease-in-out infinite; }
.ex-ohp .anim-ohpF { transform-origin: 170px 104px; animation: ohpF var(--tempo) ease-in-out infinite; }
@keyframes ohpU { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(-100deg); } }
@keyframes ohpF { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(120deg); } }

/* lateral / front raise (arm up to shoulder height) */
.ex-raise .anim-arm { transform-origin: 150px 58px; animation: raise-arm var(--tempo) ease-in-out infinite; }
@keyframes raise-arm { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(-78deg); } }

/* biceps curl (forearm flexes up) */
.ex-curl .anim-fore { transform-origin: 150px 98px; animation: curl-fore var(--tempo) ease-in-out infinite; }
@keyframes curl-fore { 0%,100% { transform: rotate(0deg); } 42.86%,57.14% { transform: rotate(-140deg); } }

/* calf raise (rise onto toes) */
.ex-calf .anim-rise { transform-box: view-box; animation: calf-rise 2.6s ease-in-out infinite; }
@keyframes calf-rise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* hide the box/bench prop on variants that don't use it */
.demo.no-prop .prop { display: none; }

/* =========================================================================
   V2 UI — profiles, day tabs, migraine filter, catalogue, weight log, history
   ========================================================================= */
.header-btns { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: 0 0 auto; }
.pill-btn { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 7px 12px; font-size: 0.74rem; font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.pill-btn:active { transform: scale(0.96); }

.day-tabs { display: flex; gap: 6px; background: #e3e9ec; padding: 4px; border-radius: 12px; margin: 14px 0 6px; }
.day-tab { flex: 1; border: none; background: transparent; padding: 11px; border-radius: 9px; font-weight: 700; color: var(--text-light); font-size: 0.95rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.day-tab.on { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
.day-label { text-align: center; font-size: 0.8rem; color: var(--text-light); margin: 0 0 6px; font-weight: 600; }

.opt-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0 2px; }
.opt-toggle { border: 1.5px solid var(--border); background: #fff; color: var(--text-light); border-radius: 999px; padding: 8px 13px; font-size: 0.82rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.opt-toggle.on { background: #e9f7ef; border-color: var(--c-lower); color: #1b7a44; }
.opt-link { background: none; border: none; color: var(--secondary); font-weight: 700; font-size: 0.85rem; cursor: pointer; padding: 8px 4px; }

.warn-badge { display: inline-block; background: #fde7e1; color: #c0501c; border: 1px solid #f5cdba; border-radius: 999px; padding: 1px 7px; font-size: 0.64rem; font-weight: 700; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.logged { font-size: 0.6rem; background: #e9f7ef; color: #1b7a44; border-radius: 4px; padding: 1px 5px; font-weight: 700; vertical-align: middle; text-transform: none; letter-spacing: 0; margin-left: 4px; }

.card-remove { position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(44,62,80,0.45); color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer; opacity: 0.55; -webkit-tap-highlight-color: transparent; }
.card-remove:active { opacity: 1; transform: scale(0.92); }

.cat-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .6px; color: #8a949c; font-weight: 800; margin: 16px 0 6px; }
.alt-row.is-disabled { opacity: 0.5; cursor: default; }
.alt-name .warn-badge { font-size: 0.58rem; }

/* weight log input in guided mode */
.g-log { margin: 10px 0 6px; }
.g-log label { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .5px; color: #7a858d; font-weight: 700; margin-bottom: 5px; }
.g-weight { width: 100%; padding: 13px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 1.05rem; font-weight: 700; color: var(--primary); text-align: center; background: #fff; }
.g-weight:focus { outline: none; border-color: var(--accent); }
.g-name .warn-badge { font-size: 0.62rem; vertical-align: middle; }
.g-viewhist { background: #eef8fa; color: var(--secondary); }

/* profiles */
.profile-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.profile-pick { flex: 1; text-align: left; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 14px; font-weight: 700; color: var(--primary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.profile-row.active .profile-pick { border-color: var(--secondary); background: #f1fbfc; }
.profile-del { width: 46px; flex: 0 0 auto; border: 1.5px solid var(--border); background: #fff; border-radius: 12px; font-size: 1rem; cursor: pointer; }
.profile-add { display: flex; gap: 8px; margin: 14px 0; }
.profile-add input { flex: 1; min-width: 0; padding: 13px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 1rem; }
.profile-add .btn { flex: 0 0 auto; }

/* history */
.hist-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.hist-item summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 14px; cursor: pointer; font-weight: 700; color: var(--primary); list-style: none; font-size: 0.92rem; }
.hist-item summary::-webkit-details-marker { display: none; }
.hist-meta { font-size: 0.76rem; color: var(--text-light); font-weight: 600; white-space: nowrap; }
.hist-body { padding: 0 14px 12px; }
.hist-line { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-light); }
.hist-line span:last-child { font-weight: 700; color: var(--primary); }

/* ---- guided: progression · sets · rest timer · notes ---- */
.g-prog { text-align: center; font-size: 0.9rem; color: var(--text-light); margin: 8px 0 4px; }
.g-prog b { color: var(--primary); }
.prog-bump { background: #fff4e6; color: #b15400; border: 1.5px solid #f3d2ab; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 0.85rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.prog-bump:active { transform: scale(0.96); }

.g-sets { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; }
.g-sets-lbl { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .5px; color: #7a858d; font-weight: 700; flex: 1 1 100%; }
.set-dots { display: flex; gap: 8px; flex: 1; }
.set-dot { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--secondary); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.set-dot:active { transform: scale(0.92); }
.set-dot.done { background: var(--c-lower); border-color: var(--c-lower); }
.set-dot.done::after { content: '✓'; color: #fff; font-weight: 800; font-size: 1.05rem; }
.rest-btn { flex: 0 0 auto; background: var(--primary); color: #fff; border: none; border-radius: 10px; padding: 9px 15px; font-weight: 700; font-size: 0.9rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.rest-panel { background: linear-gradient(135deg, var(--primary), #1b2733); color: #fff; border-radius: 14px; padding: 16px; text-align: center; margin: 8px 0 12px; box-shadow: var(--shadow); }
.rest-time { font-size: 2.6rem; font-weight: 800; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; line-height: 1; }
.rest-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.rest-actions button { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 9px; padding: 9px 18px; font-weight: 700; font-size: 0.92rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rest-skip { background: var(--accent) !important; border-color: var(--accent) !important; }
.rest-default { font-size: 0.72rem; opacity: 0.7; margin-top: 10px; }

.g-notes { margin: 14px 0; }
.g-notes label { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .5px; color: #7a858d; font-weight: 700; margin-bottom: 5px; }
.g-note { width: 100%; padding: 11px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 0.95rem; font-family: inherit; resize: vertical; color: var(--text-main); background: #fff; }
.g-note:focus { outline: none; border-color: var(--accent); }
.note-dot { font-size: 0.8rem; margin-left: 4px; vertical-align: middle; }

/* =========================================================================
   POLISH LAYER — depth, premium typography, a11y, micro-interactions
   (appended so it wins the cascade; informed by the Claude + Gemini audits)
   ========================================================================= */

/* a11y P0 — visible focus for keyboard users (tap-highlight was removed everywhere) */
:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; border-radius: 8px; }
.btn:focus-visible, .chip:focus-visible, .pill-btn:focus-visible, .day-tab:focus-visible { outline-offset: 3px; }

/* premium headings — slightly tighter */
.site-header h1, .g-name, .card-content h3, .sheet-head h3 { letter-spacing: -0.01em; }
.card-content h3 { font-size: var(--fs-lg); line-height: 1.15; }

/* sticky header — gradient + inner highlight, real elevation */
.site-header { background: linear-gradient(180deg, var(--primary-600), var(--primary)); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 14px rgba(0,0,0,.20); }
.site-header .sub { opacity: 1; color: #c5cfd6; }

/* cards — layered shadow, hairline border, gentle entrance */
.exercise-card { border: 1px solid rgba(20,40,60,.06); box-shadow: var(--shadow-md); transition: box-shadow .16s ease, transform .08s ease; animation: card-in .32s ease both; }
.exercise-card:active { transform: translateY(1px); }
@keyframes card-in { from { opacity: 0; transform: translateY(7px); } }
.demo-wrap { background: radial-gradient(120% 120% at 50% 14%, #ffffff 0%, #eef4f5 72%, #e4ecee 100%); }
.stat-item { background: var(--surface-2); border: 1px solid rgba(20,40,60,.05); }
.focus { background: #fff7ee; color: #a85c12; border-left-color: #f0a35e; }
.focus strong { color: #8a4a08; }

/* primary button — subtle gradient + depth */
.btn-primary { background: linear-gradient(180deg, #ef8b35, var(--accent)); border-color: var(--accent-600); box-shadow: var(--shadow-md); }
.btn-primary:active { background: linear-gradient(180deg, var(--accent), var(--accent-600)); }
.btn, .chip, .kit-chip, .swap-btn, .seg-btn, .opt-toggle, .pill-btn, .day-tab, .alt-row { transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease; }

/* day tabs — clearer active surface */
.day-tabs { background: #dde5ea; }
.day-tab.on { box-shadow: var(--shadow-sm); }

/* set dots — satisfying pop on complete */
.set-dot { transition: transform .12s ease, background .12s ease, border-color .12s ease; }
.set-dot.done { animation: dot-pop .2s ease; }
@keyframes dot-pop { 50% { transform: scale(1.22); } }

/* tap targets — expand hit areas to ~44px without bloating the visual */
.card-remove { width: 30px; height: 30px; background: rgba(34,48,61,.5); }
.card-remove::after { content: ''; position: absolute; inset: -10px; }
.overlay-close.sm { width: 40px; height: 40px; }

/* muted text contrast bumps */
.g-hint { color: var(--text-muted); }
.rest-default { opacity: 1; color: rgba(255,255,255,.78); }

/* reduced-motion / manual pause also calms overlay + card motion */
@media (prefers-reduced-motion: reduce) { .backdrop, .sheet, .toast, .exercise-card, .set-dot.done { animation: none !important; } }
body.motion-off .backdrop, body.motion-off .sheet, body.motion-off .exercise-card { animation: none !important; }

/* empty states */
.empty-state { text-align: center; padding: 44px 22px; color: var(--text-muted); }
.empty-ico { font-size: 2.4rem; margin-bottom: 10px; }
.empty-state h3 { color: var(--primary); margin: 0 0 6px; }
.empty-state p { margin: 0 auto; max-width: 290px; line-height: 1.5; }

/* opt-row actions */
.opt-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.opt-link { white-space: nowrap; }

/* add/remove sheet — in-plan state */
.alt-row.in-plan { border-color: var(--c-lower); background: #f1fbf5; }
.alt-row.in-plan .alt-go { color: var(--c-lower); }

/* weekly schedule */
.sched-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.sched-row:first-of-type { border-top: none; }
.sched-day { font-weight: 700; color: var(--primary); font-size: 0.92rem; }
.seg { display: flex; gap: 4px; background: #eef2f4; padding: 3px; border-radius: 10px; }
.seg-btn { border: none; background: transparent; padding: 7px 11px; border-radius: 8px; font-size: 0.78rem; font-weight: 700; color: var(--text-light); cursor: pointer; }
.seg-btn.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

/* progress charts */
.prog-card { background: var(--surface); border: 1px solid rgba(20,40,60,.06); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.prog-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.prog-delta { font-size: 0.8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.prog-delta.up { background: #e9f7ef; color: #1b7a44; }
.prog-delta.down { background: #fdecec; color: #c0392b; }
.spark { width: 100%; height: 72px; display: block; }
.prog-foot { font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; }

/* profile tools */
.profile-tools { display: flex; gap: 8px; margin-top: 10px; }
.profile-tools .btn { flex: 1; font-size: 0.86rem; padding: 12px 8px; }

/* print */
.print-area { display: none; }
@media print {
  body { background: #fff; }
  body > *:not(.print-area) { display: none !important; }
  .print-area { display: block !important; padding: 0; color: #000; }
  .print-area h1 { font-size: 18pt; margin: 0 0 4px; }
  .pp-sub { color: #555; margin: 0 0 16px; font-size: 10pt; }
  .print-area table { width: 100%; border-collapse: collapse; font-size: 11pt; }
  .print-area th, .print-area td { border: 1px solid #bbb; padding: 8px 10px; text-align: left; vertical-align: top; }
  .print-area th { background: #eee; }
  .print-area td:first-child, .print-area th:first-child { width: 24px; text-align: center; }
}

/* =========================================================================
   WAVE-3 — video, dark mode, hands-free, work timer, metrics/symptoms/warm-up
   ========================================================================= */
.header-toggles { display: flex; gap: 6px; align-items: center; }
.icon-toggle { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.icon-toggle:active { transform: scale(0.94); }

.demo-vid { width: 100%; height: 100%; object-fit: cover; display: block; background: #eef4f5; }

.voice-btn { position: fixed; top: calc(10px + env(safe-area-inset-top,0)); left: 12px; z-index: 60; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(44,62,80,.9); color: #fff; font-size: 1.05rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.voice-btn.on { background: var(--accent); }

/* guided: weight / reps / RPE row */
.g-log3 { display: flex; gap: 8px; margin: 12px 0 6px; }
.g-fld { flex: 1; min-width: 0; }
.g-fld.wide { flex: 2; }
.g-fld label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .5px; color: #7a858d; font-weight: 700; margin-bottom: 4px; }
.g-fld input { width: 100%; padding: 12px 6px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 1.02rem; font-weight: 700; color: var(--primary); text-align: center; background: #fff; }
.g-fld input:focus { outline: none; border-color: var(--accent); }

.g-prog .prog-flag { color: var(--accent); }
.work-btn { flex: 1; background: var(--primary); color: #fff; border: none; border-radius: 10px; padding: 11px; font-weight: 700; font-size: 0.92rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rest-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; opacity: .72; margin-bottom: 4px; }

/* warm-up */
.warm-head { font-weight: 800; color: var(--primary); margin: 13px 0 2px; font-size: 0.9rem; }
.warm-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 0.92rem; color: var(--text-light); }
.warm-row span:first-child { font-weight: 700; color: var(--primary); flex: 0 0 auto; }

/* inline add (metrics) + symptom form */
.inline-add { display: flex; gap: 8px; margin: 10px 0 14px; }
.inline-add input { flex: 1; min-width: 0; padding: 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 1rem; }
.sym-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.sym-add select, .sym-add input { flex: 1 1 130px; min-width: 0; padding: 11px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 0.95rem; background: #fff; color: var(--text-main); }
.sym-add .btn, .inline-add .btn { flex: 0 0 auto; }

/* profile tools as a wrap-grid */
.profile-tools { flex-wrap: wrap; }
.profile-tools .btn { flex: 1 1 28%; }

/* =========================================================================
   DARK THEME — body.dark (demo-wrap stays light so the SVG figures read)
   ========================================================================= */
body.dark {
  --bg-color: #10171d; --surface: #1a232b; --surface-2: #212c35; --card-bg: #1a232b;
  --text-main: #e7edf1; --text-light: #aab4bd; --text-muted: #93a0aa; --border: #2b3741;
}
body.dark .exercise-card, body.dark .rule, body.dark .alt-row, body.dark .prog-card, body.dark .hist-item,
body.dark .btn, body.dark .chip, body.dark .kit-chip, body.dark .stat-item { background: var(--surface); border-color: var(--border); }
body.dark .btn { color: var(--text-main); }
body.dark .btn-primary { color: #fff; }
body.dark .card-content h3, body.dark .g-name, body.dark .sheet-head h3, body.dark .prog-head,
body.dark .stat-value, body.dark .sched-day, body.dark .empty-state h3, body.dark .warm-head,
body.dark .warm-row span:first-child, body.dark .g-count, body.dark .hist-item summary,
body.dark .hist-line span:last-child, body.dark .alt-name, body.dark .day-tab.on { color: var(--text-main); }
body.dark .stat-item { background: var(--surface-2); }
body.dark .g-weight, body.dark .g-fld input, body.dark .g-note, body.dark .inline-add input,
body.dark .sym-add select, body.dark .sym-add input, body.dark .profile-add input { background: #131b21; color: var(--text-main); border-color: var(--border); }
body.dark .day-tabs { background: #131b21; }
body.dark .day-tab.on { background: var(--surface); box-shadow: var(--shadow-sm); }
body.dark .seg { background: #131b21; }
body.dark .seg-btn.on { background: var(--surface); color: var(--text-main); }
body.dark .focus { background: #2a2117; color: #e6ad6b; border-left-color: #b9772f; }
body.dark .focus strong { color: #f0c089; }
body.dark .filter-bar { background: var(--bg-color); }
body.dark .chip[aria-pressed="true"] { color: #fff; }
body.dark .stat-label, body.dark .group-tag, body.dark .section-label, body.dark .g-fld label,
body.dark .g-notes label, body.dark .kit-label, body.dark .cat-head { color: var(--text-muted); }
body.dark .demo-wrap { background: radial-gradient(120% 120% at 50% 14%, #f2f6f7 0%, #e6edee 75%, #dbe4e6 100%); }
body.dark .pill-btn, body.dark .icon-toggle { background: rgba(255,255,255,0.10); }
body.dark .empty-state, body.dark .prog-foot, body.dark .alt-stats, body.dark .hist-meta { color: var(--text-muted); }

/* =========================================================================
   WAVE-4 — bespoke identity: display type, "Today" hero, bottom tab bar
   (pulled from Hevy/Strong/Fitbod patterns to shed the generic look)
   ========================================================================= */
:root { --display: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif; }

/* athletic condensed display type on headings, numbers, CTAs */
.site-header h1, .card-content h3, .g-name, .sheet-head h3, .section-label, .rest-time,
.tempo-banner .big, .stat-value, .day-tab, .btn, .prog-head, .prog-delta, .warm-head,
.hero-greet, .hstat b, .g-count, .done-check, .g-stats b, .g-fld input, .g-weight {
  font-family: var(--display);
}
.site-header h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: .3px; }
.card-content h3, .g-name, .sheet-head h3 { font-weight: 800; letter-spacing: .2px; }
.stat-value, .g-stats b { font-weight: 700; }
.btn, .day-tab { font-weight: 700; letter-spacing: .3px; }

/* room for the fixed tab bar */
body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)); }

/* "Today" hero — data-forward, like a real training app */
.hero { background: linear-gradient(135deg, var(--primary-600), var(--primary)); color: #fff; border-radius: 18px; padding: 16px 18px; margin: 14px 0 6px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(230,126,34,.25), transparent 70%); pointer-events: none; }
.hero-greet { font-family: var(--display); font-size: 1.6rem; font-weight: 800; letter-spacing: .3px; line-height: 1.05; }
.hero-rec { font-size: .9rem; opacity: .88; margin-top: 3px; }
.hero-rec b { color: #ffd9a8; }
.hero-stats { display: flex; gap: 9px; margin-top: 14px; }
.hstat { flex: 1; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; padding: 9px 6px; text-align: center; }
.hstat b { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; }
.hstat span { font-size: .64rem; text-transform: uppercase; letter-spacing: .6px; opacity: .72; }

/* bottom tab bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -2px 14px rgba(16,33,49,.07); }
.tab { flex: 1; border: none; background: none; padding: 8px 4px 9px; font-size: .64rem; font-weight: 700; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; letter-spacing: .3px; }
.tabi { font-size: 1.3rem; line-height: 1; filter: grayscale(.3); transition: transform .12s; }
.tab.on { color: var(--accent); }
.tab.on .tabi { filter: none; transform: translateY(-1px) scale(1.06); }
.tab:active .tabi { transform: scale(.9); }
body.dark .tabbar { background: rgba(16,23,29,.92); border-color: var(--border); }