/* ShowStrong web — coral theme, dark + light.
   One rationed accent (coral). Theme is driven by html[data-theme="dark"|"light"];
   theme.js resolves System / Light / Dark / Sunrise-Sunset and sets that attribute. */

/* ---------- DARK (default) ---------- */
:root, html[data-theme="dark"] {
  --volt: #FF5A3C;          /* coral accent, tuned bright for near-black */
  --on-volt: #FFFFFF;       /* text on the accent */
  --bg: #0B0B0C;
  --surface: #161617;
  --surface-2: #202022;
  --on-bg: #F4F4F2;
  --muted: #9A9A93;
  --amber: #E0A100;
  --red: #E0563B;
  --good: #6FBF73;          /* calm green for a good readiness band — distinct from the accent */
  --cardio: #3fa9a0;        /* kept semantic cardio accent (teal) — coral stays rationed */
  /* chrome tokens (were hardcoded) */
  --app-bg: #050506;
  --line: #1c1c1e;
  --line-2: #2a2a2c;
  --hover: #101011;
  --nav-bg: #0d0d0e;
  --shadow: 0 0 0 1px #1c1c1e, 0 24px 80px rgba(0,0,0,.6);
  --nav-h: 64px;
  --maxw: 440px;
  /* depth/elevation — lifts cards off the page so the app stops reading as a flat slab */
  --surface-top: #1e1d20;   /* slightly warmer, lighter top edge for the card gradient (subtle bevel) */
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 22px -10px rgba(0,0,0,.8);
  --shadow-card-lg: 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px -16px rgba(0,0,0,.85);
  --shadow-cta: 0 8px 22px -12px rgba(0,0,0,.7);   /* neutral elevation (was a coral bloom — migraine-safe, reads as a solid object) */
  --shadow-nav: 0 -12px 28px -18px rgba(0,0,0,.9);
  --hero-glow: radial-gradient(120% 70% at 50% -8%, rgba(255,90,60,.06), transparent 60%);
}

/* ---------- LIGHT ---------- */
html[data-theme="light"] {
  --volt: #E0481F;          /* deeper coral so white button text stays AA on light */
  --on-volt: #FFFFFF;
  --bg: #F4F1EA;
  --surface: #FFFFFF;
  --surface-2: #EFEADF;
  --on-bg: #1A1A18;
  --muted: #8A8578;
  --amber: #B57400;
  --red: #C2402A;
  --good: #4E9A56;
  --cardio: #2f8079;        /* deeper teal so white button text stays AA on the light surface */
  --app-bg: #E7E2D6;
  --line: #E8E3D7;
  --line-2: #E0DACB;
  --hover: #F3EFE6;
  --nav-bg: #FBF9F4;
  --shadow: 0 0 0 1px #e4dfd2, 0 24px 80px rgba(120,110,80,.18);
  --surface-top: #FFFFFF;
  --shadow-card: 0 1px 2px rgba(120,110,80,.06), 0 10px 26px -14px rgba(120,110,80,.28);
  --shadow-card-lg: 0 2px 4px rgba(120,110,80,.08), 0 18px 42px -18px rgba(120,110,80,.32);
  --shadow-cta: 0 8px 20px -12px rgba(120,110,80,.4);   /* neutral elevation (was a coral bloom) */
  --shadow-nav: 0 -12px 28px -20px rgba(120,110,80,.3);
  --hero-glow: radial-gradient(120% 70% at 50% -8%, rgba(224,72,31,.05), transparent 60%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--app-bg);
  color: var(--on-bg);
  font-family: 'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.35;
}

/* phone-width column, centered for desktop UI dev */
#app {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  height: 100dvh;            /* bound the app column so #screen scrolls INTERNALLY and the nav sits below it */
  overflow: hidden;          /* (instead of the body growing + the sticky nav overlapping the last card) */
  background: var(--hero-glow), var(--bg);   /* faint warm glow behind the hero adds depth */
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
/* Pad the scroll area by the nav height so the sticky bottom nav never clips the last card
   (the column grows past the viewport, so content scrolls under the pinned nav without this). */
#screen { flex: 1; overflow-y: auto; padding-bottom: 0; }   /* nav is a flex sibling below — no overlap, no pad hack */

/* DESKTOP ONLY: frame the phone column as a real device on an ambient backdrop (mobile/TWA unaffected) */
@media (min-width: 480px) {
  body { background:
      radial-gradient(90% 60% at 50% -5%, rgba(255,90,60,.05), transparent 55%),
      radial-gradient(120% 90% at 50% 110%, #131215, var(--app-bg) 60%); }
  html[data-theme="light"] body { background:
      radial-gradient(90% 60% at 50% -5%, rgba(224,72,31,.05), transparent 55%),
      radial-gradient(120% 90% at 50% 110%, #efe9dc, var(--app-bg) 60%); }
  #app {
    margin: 22px auto;
    height: calc(100dvh - 44px);
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid var(--line-2);
    box-shadow: 0 0 0 6px rgba(255,255,255,.015), 0 36px 90px -28px rgba(0,0,0,.8);
  }
  html[data-theme="light"] #app { box-shadow: 0 0 0 6px rgba(0,0,0,.02), 0 36px 90px -30px rgba(120,110,80,.35); }
}
.scr { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
/* Onboarding's primary CTA stays pinned to the bottom of the scroll so the form never reads as bottomless. */
.pf-cta { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg) 70%, transparent); padding: 10px 0 6px; margin: 0 -20px -32px; padding-left: 20px; padding-right: 20px; z-index: 2; }

/* typography */
.eyebrow { text-transform: uppercase; color: var(--muted); font-size: 12px; letter-spacing: 2px; font-weight: 600; }
.h1 { font-size: 30px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.seclabel { text-transform: uppercase; color: var(--muted); font-size: 11px; letter-spacing: 1.2px; font-weight: 700; margin-top: 16px;
  display: flex; align-items: center; gap: 8px; }
.seclabel::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.muted { color: var(--muted); }
.volt { color: var(--on-bg); }   /* accent is rationed to actions/active nav, not body text */

/* cards / surfaces — gradient + hairline + soft shadow so cards lift off the page (kills the flat slab) */
.card { background: linear-gradient(180deg, var(--surface-top), var(--surface)); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px; box-shadow: var(--shadow-card); }
.card.tight { padding: 14px; }
/* an elevated/feature card for the primary surface on a screen (e.g. today's workout) */
.card.raise { box-shadow: var(--shadow-card-lg); border-color: var(--line-2); }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; }
.grow { flex: 1; }
.pill { display: inline-block; border-radius: 20px; padding: 6px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill.volt { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-2); }   /* status, not action — coral rationed to CTAs + active nav */
.pill.ghost { background: var(--surface); color: var(--on-bg); }
html[data-theme="light"] .pill.ghost { border: 1px solid var(--line); }

/* buttons */
.btn { border: 0; cursor: pointer; font-family: inherit; border-radius: 16px; font-weight: 800; font-size: 17px;
  height: 54px; width: 100%; display: flex; align-items: center; justify-content: center; }
.btn.primary { background: linear-gradient(180deg, #ff6a4e, var(--volt)); color: var(--on-volt); box-shadow: var(--shadow-cta); }
html[data-theme="light"] .btn.primary { background: linear-gradient(180deg, #e85730, var(--volt)); }
.btn.outline { background: transparent; color: var(--on-bg); border: 1px solid var(--line-2); font-weight: 600; }   /* one neutral secondary spec */
.btn:active { filter: brightness(.94); transform: translateY(1px); }
.tbtn { background: none; border: 0; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 15px; color: var(--muted); padding: 12px 8px; border-radius: 8px; }

/* exercise list */
.exrow { padding: 12px 20px; cursor: pointer; border-bottom: 1px solid var(--line); }
.exrow:hover { background: var(--hover); }
.exrow .nm { font-size: 16px; font-weight: 600; }
.cathdr { color: var(--muted); font-size: 12px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; padding: 18px 20px 6px;
  display: flex; align-items: center; gap: 8px; }
/* Keep the search + category filters pinned so narrowing the 115-move library is always one tap away. */
.exfilter { position: sticky; top: 0; z-index: 3; background: var(--bg); padding-top: 4px; }
.cathdr::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
/* One metadata-badge token (Heavy load, ACTIVE): tonal fill + 1px keyline + uppercase letter-spaced muted text. */
.badge { background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 6px; padding: 3px 8px; border: 1px solid var(--line-2); }
.search { width: 100%; background: var(--surface); border: 1px solid var(--line-2); color: var(--on-bg); border-radius: 10px;
  padding: 12px 14px; font-family: inherit; font-size: 15px; }
.search:focus { outline: none; border-color: var(--volt); }

/* segmented (readiness etc.) */
.seg { display: flex; gap: 3px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 3px; flex: 1; }
html[data-theme="light"] .seg { background: var(--surface-2); }
.seg button { flex: 1; border: 0; background: transparent; color: var(--muted); font-family: inherit; font-weight: 600;
  font-size: 13px; padding: 8px 4px; border-radius: 6px; cursor: pointer; }
.seg button.on { background: var(--on-bg); color: var(--bg); }   /* neutral inverted "selected" (readiness pills, mode toggles) */

/* bottom nav */
.nav { position: sticky; bottom: 0; height: var(--nav-h); display: flex; background: var(--nav-bg); border-top: 1px solid var(--line); box-shadow: var(--shadow-nav); }
.nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none; font-size: 11px; cursor: pointer; }
.nav a.on { color: var(--volt); }
.nav svg { width: 22px; height: 22px; }

.empty { color: var(--muted); font-size: 14px; padding-top: 8px; }

/* body-area dots on the Today workout card (semantic taxonomy colours — adds at-a-glance info + life) */
.area-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; box-shadow: 0 0 0 2px var(--surface); }

/* small toggle pills (settings, intake) */
.seg-mini { border: 0; background: var(--surface-2); color: var(--muted); font-family: inherit; font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.seg-mini.on { background: var(--on-bg); color: var(--bg); }   /* neutral inverted "selected" — coral reserved for actions */
.navact { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; font-weight: 700; }   /* header nav actions use the display token */
.chip { border: 1px solid var(--muted); background: var(--surface); color: var(--on-bg); font-family: inherit; font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 20px; cursor: pointer; }
.chip.on { background: var(--on-bg); color: var(--bg); border-color: var(--on-bg); }   /* neutral inverted "selected" */
.flowrow { display: flex; flex-wrap: wrap; gap: 8px; }
.stepbtn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--on-bg); font-size: 26px; font-weight: 800; cursor: pointer; display: grid; place-items: center; }   /* tonal-fill control (matches the chip/card surface language); the value is the dominant element */

/* profile form fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { color: var(--muted); font-size: 12px; }
.tin { width: 100%; background: var(--surface); border: 1px solid var(--line-2); color: var(--on-bg); border-radius: 10px;
  padding: 12px 14px; font-family: inherit; font-size: 15px; }
.tin:focus { outline: none; border-color: var(--volt); }

/* keyboard focus rings (a11y) — coral ring on keyboard focus only; mouse/touch stays clean via :focus-visible */
.btn:focus-visible, .tbtn:focus-visible, .seg button:focus-visible, .seg-mini:focus-visible, .chip:focus-visible,
.chipn:focus-visible, .cal-nav:focus-visible, .stepbtn:focus-visible, .nav a:focus-visible {
  outline: 2px solid var(--volt); outline-offset: 2px;
}
.search:focus-visible, .tin:focus-visible { outline: 2px solid var(--volt); outline-offset: 1px; border-color: var(--volt); }

/* toast */
.toast { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--surface-2); color: var(--on-bg);
  padding: 10px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.3); z-index: 9;
  opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 80%; text-align: center; }

/* progress: mastery / balance / weekly-review bars (coral fill on a --line track) */
.mbar { height: 8px; border-radius: 5px; background: var(--line); overflow: hidden; }
.mbar-fill { height: 100%; border-radius: 5px; background: var(--muted); transition: width .2s; }   /* data-viz off action-coral */
/* dashed "this week's review" card */
.review-link { border: 1.5px dashed var(--line-2); background: transparent; }
.review-link:hover { background: var(--hover); }

/* player */
.player { display: flex; flex-direction: column; height: 100%; }
.prow { display: flex; align-items: center; gap: 2px; padding: 4px 10px; }
.pbar { height: 6px; background: var(--surface); margin: 0 12px; border-radius: 3px; overflow: hidden; }
.pbar > div { height: 100%; background: var(--volt); transition: width .2s; }
.rail { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.chipn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--surface); color: var(--muted); flex-shrink: 0; cursor: pointer; }
.chipn.done { background: var(--volt); color: var(--on-volt); }
.chipn.partial, .chipn.passed { background: var(--amber); color: #fff; }
.chipn.skip { background: transparent; border: 2px solid var(--red); color: var(--red); }
.chipn.cur { background: var(--surface); border: 2.5px solid var(--volt); color: var(--volt); }
.pbody { flex: 1; overflow-y: auto; padding: 4px 20px 12px; display: flex; flex-direction: column; gap: 12px; }
.pfoot { border-top: 1px solid var(--line); padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.cheer { align-self: center; background: var(--volt); color: var(--on-volt); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 20px; }
.fillbar { flex: 1; height: 8px; border-radius: 5px; background: var(--line); }
.fillbar.on { background: var(--muted); }    /* completed = mid graphite */
.fillbar.cur { background: var(--on-bg); }   /* current = the darkest neutral step (no competing coral outline); upcoming = ghost track */
.centerbox { display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: 28px; }

/* history month calendar (frame 16) — body-part dots + legend. Area colours come from window.TAX inline. */
.cal-head { margin-top: 2px; }
.cal-nav { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--on-bg); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; flex: none; display: grid; place-items: center; }
.cal-nav:active { filter: brightness(.94); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }   /* minmax(0,..) so a wide cell (dots + "+N") can't blow the 7 columns past the container */
.cal-dows { margin-bottom: 2px; }
.cal-dow { text-align: center; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 2px 0; text-transform: uppercase; }
.cal-cell { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; padding: 7px 2px 2px; min-height: 0; }
.cal-cell.empty-cell { background: transparent; }
.cal-cell.has { cursor: pointer; }
.cal-cell.has:hover { background: var(--hover); }
.cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--volt); }
.cal-num { font-size: 13px; font-weight: 600; color: var(--on-bg); }
.cal-cell:not(.has) .cal-num { color: var(--muted); font-weight: 500; }
.cal-dots { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: auto; margin-bottom: 4px; min-height: 9px; flex-wrap: nowrap; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.cal-more { font-size: 10px; font-weight: 700; color: var(--muted); line-height: 1; margin-left: 2px; white-space: nowrap; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 2px; margin-top: 2px; }
.cal-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 500; }

/* rest-day awareness (frame 3) — calm, non-punishing; the calm green edge/eyebrow, never coral. */
.rest-card { border-left: 4px solid var(--good); }
.rest-moon { font-size: 20px; line-height: 1; color: var(--good); }

/* cardio / zone-2 (frames 30/31/32) — teal is the kept semantic cardio accent (NOT coral). */
.cardio-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
/* the Start / End / talk-test buttons use the teal accent, not the rationed coral */
.cardio-btn { background: var(--cardio); color: #fff; }
.cardio-chip.on { background: var(--cardio); color: #fff; border-color: var(--cardio); }
.cardio-play .pbody { align-items: center; }
.cardio-tag { font-weight: 700; font-size: 14px; padding: 8px 6px; }
.cardio-clock { font-size: 64px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.cardio-bar { width: 100%; max-width: 320px; height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; }
.cardio-bar-fill { height: 100%; border-radius: 6px; transition: width .3s; }
.cardio-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 320px; }
.cardio-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.cardio-pip.on { background: var(--cardio); }
.cardio-cue { max-width: 340px; }

/* next-time autoregulation nudge (frame 13) — on the session-complete screen. Coral edge, reading copy. */
.nudge { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--line-2);
  border-left: 3px solid var(--volt); border-radius: 12px; padding: 12px 14px; margin: 0 auto 16px; text-align: left; }
.nudge-ex { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.nudge-msg { font-size: 15px; font-weight: 500; line-height: 1.35; margin-top: 3px; color: var(--on-bg); }

/* resume prompt (frame 4) — reuses the centered card pattern; coral primary CTA. */
.resume-card { width: 100%; max-width: 340px; text-align: center; }
.resume-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.resume-title { font-size: 24px; font-weight: 800; margin: 6px 0 4px; }
.resume-sub { font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 18px; }

/* joint-aware autoregulation (DESIGN-SPEC §Joint check-in + in-set twinge).
   Readiness/joint trims use AMBER. The twinge sheet uses a CORAL border as a SEMANTIC caution (per spec —
   intentional, not a rationing violation). Cue copy is sentence case (reading text). Migraine-safe (no motion). */

/* Today "How are your joints today?" affordance */
.jc-card:hover { background: var(--hover); }

/* joint chips — amber when flagged (NEVER coral, so the readiness palette reads consistently) */
.jc-chip.on { background: var(--amber); color: #fff; border-color: var(--amber); }

/* resolved swap/trim preview rows in the check-in sheet */
.jc-prev { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.jc-prev:last-child { border-bottom: 0; }
.jc-from { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.jc-arrow { color: var(--amber); font-weight: 700; }
.jc-to { color: var(--on-bg); font-weight: 600; }

/* in-player "range trimmed" overlay note — amber tag + pain-free-range cue */
.trim-note { border-left: 3px solid var(--amber); }
.trim-tag { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--amber); }

/* "Felt a twinge?" affordance in the player body (muted, low-key — not a coral CTA) */
.twinge-link { align-self: flex-start; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding-left: 0; }

/* twinge sheet — CORAL border = semantic caution (per spec) */
.twinge-card { width: 100%; max-width: 360px; border: 2px solid var(--volt); }
.twinge-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.twinge-act { justify-content: flex-start; text-align: left; padding: 0 16px; height: 52px; }

/* tweak my plan (frame 8) — seed chips are quiet suggestion cards; coral is rationed to the Re-plan primary only */
.tweak-chip { text-align: left; cursor: pointer; font-weight: 500; line-height: 1.35; color: var(--on-bg); }
.tweak-chip:active { filter: brightness(.96); }
.tweak-area { resize: none; line-height: 1.4; }
.tweak-link { align-self: flex-start; color: var(--muted); padding-left: 0; font-weight: 600; }

/* encrypted backup (frame 29) — local, end-to-end encrypted export/restore. Coral is rationed to the primary
   action button only (.btn.primary). The recovery-code card is a calm, neutral surface — the code is the hero,
   not an accent. Error copy is sentence case (reading text) in the semantic red. */
.backup-code-card { background: linear-gradient(180deg, var(--surface-top), var(--surface)); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); align-items: center; text-align: center; }
.backup-eyebrow { text-transform: uppercase; color: var(--muted); font-size: 11px; letter-spacing: 1.5px; font-weight: 700; }
.backup-code { font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; font-size: 28px;
  font-weight: 800; letter-spacing: .08em; color: var(--on-bg); user-select: all; word-break: break-all; }
.backup-code-in { font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.backup-err { color: var(--red); font-size: 13px; font-weight: 600; line-height: 1.45; }

/* honor OS reduce-motion (migraine-safe) */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .btn:active, .cal-nav:active { transform: none !important; } }
/* in-app reduce-motion toggle (migraine-critical) — set by app.js from the profile pref */
html[data-reduce-motion] *, html[data-reduce-motion] *::before, html[data-reduce-motion] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
html[data-reduce-motion] .btn:active, html[data-reduce-motion] .cal-nav:active { transform: none !important; }

/* paired exercises — overview pair card + player note (neutral: the accent stays on Start / Done set) */
.ov-move { gap: 10px; }
.ov-n { width: 18px; flex: none; color: var(--muted); font-weight: 700; font-size: 14px; }
.ov-rule { height: 1px; background: var(--line); margin: 10px 0; }
.ov-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; font-size: 13px; }
.pair-card { gap: 8px; border: 1.5px solid var(--on-bg); }
.pair-card .seg { flex: none; margin-top: 4px; }
.pair-card .seg button { min-height: 44px; }
.pair-note { color: var(--on-bg); }