/* Archivo (SIL OFL 1.1, archivo-OFL.txt): an athletic grotesk with a width axis — headings run slightly expanded */
@font-face {
  font-family: "Archivo"; src: url("./archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* offday.club — light pearl theme (Claude, 2026-10-28).
   Loaded last: restyles the existing components through their current selectors. No layout hooks, IDs or behaviour
   change. Pearly page with a soft aurora, frosted white cards, sans headings, dark pill actions, white pill choices.
   Phones get no backdrop blur and no animated light (smooth WebKit scrolling first). */
:root {
  color-scheme: light;
  /* the app's shared tokens, flipped to light: --ink is the page, --paper the text */
  --ink: #f4f4f9;
  --paper: #181922;
  --muted: #646879;
  --line: rgba(32, 38, 80, .10);
  --coral: #3a68f5;
  --lime: #1f7a4d;
  /* theme */
  --od-text: #181922;
  --od-soft: #646879;
  --od-faint: #63677a;                 /* AA on the page (4.6:1+) */
  --od-accent-text: #2a52d4;           /* accent for small text on light fills */
  --od-card: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .62) 100%);
  --od-card-solid: #ffffff;
  --od-edge: rgba(255, 255, 255, .8);
  --od-hair: rgba(32, 38, 80, .09);
  --od-field: #ffffff;
  --od-field-line: #d8dae6;
  --od-dark: #16171f;
  --od-accent: #3a68f5;
  --od-accent-soft: #eaefff;
  --od-good: #1f7a4d;
  --od-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(25, 30, 60, .04), 0 16px 36px -18px rgba(45, 60, 130, .24);
  --od-shadow-lift: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .4), 0 2px 4px rgba(25, 30, 60, .05), 0 24px 48px -20px rgba(45, 60, 130, .32);
  /* the key card's wash: cool pearl, one family of blues and lilacs (no rainbow) */
  --od-iri: linear-gradient(140deg, rgba(255, 255, 255, .9) 0%, rgba(239, 242, 255, .78) 45%, rgba(231, 233, 255, .72) 100%);
  --od-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --od-body: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* bottom navigation tokens (main-navigation.css) */
  --nav-surface: rgba(255, 255, 255, .94);
  --nav-selected: #eef0fb;
  --nav-text: #16171f;
  --nav-muted: #5d6174;
  --nav-border: rgba(255, 255, 255, 1);
}
html { background: #eef0f7; }
body { background: transparent; color: var(--od-text); font-family: var(--od-body); font-stretch: 100%; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
/* the aurora: one fixed layer behind everything (no background-attachment: fixed, which repaints on iOS) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 55% at 0% 0%, rgba(176, 194, 255, .55), transparent 65%),
    radial-gradient(70% 50% at 100% 30%, rgba(214, 206, 255, .45), transparent 65%),
    radial-gradient(90% 60% at 40% 110%, rgba(196, 214, 255, .5), transparent 70%),
    linear-gradient(180deg, #f5f6fb 0%, #edf0f8 100%);
}

/* ---------- type ---------- */
h1, h2, h3,
.hero h1, .session-copy h2, .section-heading h2, .page-intro h1, .exercise-main h3, .plan-builder-heading h2,
.club-panel h2, .leaderboard-heading h2, .onboarding-card h2, .swap-card h2, .day-card h3, .sport-grid h3 {
  font-family: var(--od-display); font-weight: 600; font-stretch: 112%; letter-spacing: -.02em; color: var(--od-text); text-transform: none;
}
h1 em, h2 em, .page-intro em { font-style: normal; color: var(--od-soft); }
.eyebrow, .hero-copy .eyebrow, .session-copy .eyebrow, .workout-section .eyebrow, .plan-builder .eyebrow, .setting-kicker {
  color: var(--od-faint); letter-spacing: .12em; font-weight: 600;
}
.welcome-line { font-weight: 500; }
.welcome-line, .hero-note, .session-meta, .session-description p, .page-intro > p:last-child, .plan-builder-heading > p,
.difficulty-note, .club-panel p, .club-backup, .exercise-main p, .exercise-prescription span, .day-card p, .sport-grid p,
.toggle-list small, .history-item span, .empty-history, .leaderboard-heading > span, footer > p, .footer-meta small {
  color: var(--od-soft);
}
#todayRemaining, .exercise-prescription b { color: var(--od-text); }
a { color: var(--od-accent); }

/* ---------- header ---------- */
.site-header { background: rgba(246, 246, 251, .82); border-bottom: 1px solid var(--od-hair); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); }
.brand-name, .footer-wordmark { color: var(--od-text); }
.o-ring { stroke: var(--od-text); }
.o-gap { stroke: var(--od-accent); }
.sound-button, .profile-button {
  background: var(--od-card-solid); border: 1px solid var(--od-edge); color: var(--od-text); box-shadow: var(--od-shadow);
}
.profile-button span { background: var(--od-dark); color: #fff; }
.profile-button b { color: var(--od-text); }

/* ---------- buttons ---------- */
.button { border-radius: 999px; font-weight: 600; letter-spacing: -.005em; transition: background-color .2s, box-shadow .2s, transform .2s; }
.button.primary { background: var(--od-dark); color: #fff; border-color: var(--od-dark); box-shadow: 0 10px 22px -12px rgba(22, 23, 31, .55); }
.button.primary:hover { background: #262836; }
.button.ghost, .hero-actions .button.ghost { background: var(--od-card-solid); color: var(--od-text); border: 1px solid var(--od-field-line); box-shadow: 0 1px 2px rgba(25, 30, 60, .04); }
.button.ghost:hover { background: #f6f7fc; }
.text-button { color: var(--od-soft); }
button:focus-visible, a:focus-visible, .focus-orbit:focus-visible { outline: 2px solid var(--od-accent); outline-offset: 3px; }

/* ---------- Today ---------- */
.hero { position: relative; }
.today-session {
  position: relative; background: var(--od-iri); border: 1px solid var(--od-edge); border-radius: 30px; box-shadow: var(--od-shadow-lift);
}
.today-session::before {                                   /* soft colour bloom in the corner, like the reference's light */
  content: ""; position: absolute; inset: auto -12% -40% auto; width: 70%; height: 90%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 170, 255, .32), rgba(200, 190, 255, .16) 55%, transparent);
}
.session-copy { position: relative; }
.session-copy .eyebrow { color: var(--od-accent-text); }
/* a fine connector from the greeting to the session card, as in the reference's linked cards */
.hero-copy { position: relative; }
.hero-copy::after {
  content: ""; position: absolute; left: 34px; bottom: -32px; width: 1px; height: 30px; pointer-events: none;
  background: linear-gradient(var(--od-hair), rgba(58, 104, 245, .45));
}
.today-session::after {
  content: ""; position: absolute; left: 30px; top: -5px; width: 9px; height: 9px; border-radius: 50%; pointer-events: none;
  background: #fff; box-shadow: 0 0 0 2px rgba(58, 104, 245, .45), 0 0 12px rgba(58, 104, 245, .35);
}
/* the 3D model is retired from the card (Kenneth); the element stays in the DOM for app.js and the tests */
.today-session { grid-template-columns: minmax(0, 1fr); }
.today-session .focus-orbit { display: none; }
.session-copy h2 { padding-right: 0; }
.stat-strip > div, .history-summary, .level-rules > div {
  background: var(--od-card); border: 1px solid var(--od-edge); box-shadow: var(--od-shadow);
}
.stat-strip strong, .history-summary strong { color: var(--od-text); font-weight: 600; }
.stat-strip span, .history-summary span, .level-rules span { color: var(--od-soft); }
.level-rules b { color: var(--od-text); }
.progress-track { background: #e3e5f0; border-radius: 999px; overflow: hidden; }
.progress-track i { background: linear-gradient(90deg, #3a68f5, #9a7bff); }

.exercise-card {
  background: var(--od-card); border: 1px solid var(--od-edge); border-radius: 26px; box-shadow: var(--od-shadow); color: var(--od-text);
}
.exercise-card:hover { background: rgba(255, 255, 255, .92); box-shadow: var(--od-shadow-lift); }
.exercise-card.done { background: linear-gradient(160deg, #ffffff, #eef2ff); border-color: rgba(58, 104, 245, .35); }
.exercise-card.done h3 { color: var(--od-text); }
/* liquid colour tiles (after Rainbrand): the number badge becomes a small art tile. Two oversized colour layers drift and
   turn behind it. transform only, so it runs on the compositor with no repaint; four palettes rotate through the workout;
   reduced motion gets a still tile */
.exercise-number {
  --c0: #1f44d6; --c1: #ff7a2f; --c2: #7cc4ff; --c3: #ffffff;
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-start;
  width: 100%; height: 92px; padding: 10px 14px; border-radius: 20px; background: var(--c0);
  color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; text-shadow: 0 1px 10px rgba(0, 0, 0, .25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 10px 22px -14px rgba(30, 40, 110, .55);
}
.exercise-number::before, .exercise-number::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
}
.exercise-number::before {
  inset: -60% -35%;
  background:
    radial-gradient(34% 9% at 34% 42%, var(--c3) 0 30%, transparent 62%),          /* a fine streak */
    radial-gradient(30% 20% at 30% 40%, var(--c1) 0 62%, transparent 68%),         /* tighter edges read as liquid */
    radial-gradient(14% 34% at 62% 58%, var(--c2) 0 60%, transparent 67%),
    radial-gradient(9% 14% at 48% 28%, var(--c1) 0 58%, transparent 66%),
    conic-gradient(from 40deg at 52% 48%, var(--c0), color-mix(in srgb, var(--c1) 55%, var(--c0)), var(--c0) 40%, color-mix(in srgb, var(--c2) 60%, var(--c0)), var(--c0) 80%);
  will-change: transform; animation: od-flow-a 17s ease-in-out infinite alternate;
}
.exercise-number::after {
  inset: -45% -30%; opacity: .75;
  background:
    radial-gradient(26% 7% at 66% 34%, var(--c2) 0 40%, transparent 64%),
    radial-gradient(20% 12% at 70% 30%, var(--c1) 0 58%, transparent 66%),
    radial-gradient(10% 26% at 24% 70%, var(--c2) 0 58%, transparent 66%);
  transform: translate(-4%, 3%) rotate(-12deg);                      /* static: one moving layer per tile is enough */
}
@keyframes od-flow-a { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(28deg) scale(1.12) translate(4%, -3%); } to { transform: rotate(-18deg) scale(1.05) translate(-5%, 4%); } }
.exercise-card:nth-child(4n+2) .exercise-number { --c0: #c7f05a; --c1: #9e8bff; --c2: #f2e65a; --c3: #ffffff; color: #16171f; text-shadow: none; }
.exercise-card:nth-child(4n+3) .exercise-number { --c0: #d42c20; --c1: #ff9b3d; --c2: #1d4ae0; --c3: #7fd8ff; }
.exercise-card:nth-child(4n+4) .exercise-number { --c0: #6f5cf0; --c1: #8ee3c8; --c2: #2440d8; --c3: #ffd0e6; }
.exercise-card.done .exercise-number { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--od-accent), 0 10px 22px -14px rgba(30, 40, 110, .55); }
.od-scrolling .exercise-number::before { animation-play-state: paused; }   /* theme-motion.js: still while scrolling */
@media (prefers-reduced-motion: reduce) { .exercise-number::before, .exercise-number::after { animation: none; } }
.demo-button, .demo-button.watched { background: var(--od-card-solid); color: var(--od-text); border: 1px solid var(--od-field-line); border-radius: 999px; }
.demo-button:hover { background: var(--od-dark); color: #fff; border-color: var(--od-dark); }
.demo-button.watched { border-color: rgba(58, 104, 245, .5); }
.complete-check { background: #fff; border-color: #c4c8d8; color: var(--od-text); }
.exercise-card.done .complete-check { background: var(--od-accent); border-color: var(--od-accent); color: #fff; }
.save-move, .collection-card button { background: var(--od-card-solid); color: var(--od-text); border: 1px solid var(--od-field-line); border-radius: 999px; }
.save-move:hover, .collection-card button:hover { border-color: var(--od-text); }
.save-move[aria-pressed=true] { color: var(--od-accent); border-color: var(--od-accent); background: var(--od-accent-soft); }
.workout-empty { background: var(--od-card); border-color: var(--od-edge); color: var(--od-text); }
.health-note { background: rgba(255, 255, 255, .55); border: 1px solid var(--od-edge); border-radius: 18px; color: var(--od-soft); }
.health-note b { color: var(--od-text); }
.finish-button { background: var(--od-card); color: var(--od-soft); border: 1px solid var(--od-edge); border-radius: 999px; box-shadow: var(--od-shadow); }
.finish-button.ready { background: var(--od-dark); color: #fff; box-shadow: 0 14px 30px -14px rgba(22, 23, 31, .6); }
.finish-button.ready b { color: #fff; }

/* rest timer (workout-tools.css markup) */
.rest-timer { color: var(--od-text); }
.rest-timer input, #restDuration { background: var(--od-field); color: var(--od-text); border: 1px solid var(--od-field-line); border-radius: 14px; }
.rest-timer p { color: var(--od-soft); }

/* ---------- Timer (workout-timer.js): Rest · Stopwatch · Intervals in one glass instrument ---------- */
.workout-timer {
  margin: 1.5rem 0; padding: 22px; border: 1px solid var(--od-edge); border-radius: 30px; background: var(--od-card); box-shadow: var(--od-shadow); color: var(--od-text);
  scroll-margin-top: 100px;
}
.workout-timer > h2 { margin: 0 0 14px; font-size: clamp(1.6rem, 6vw, 2.2rem); }
.workout-timer .rest-timer, .workout-timer .timer-panel { margin: 0; padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
/* each panel keeps its heading for screen readers; the mode switch already says it on screen */
.workout-timer .rest-timer h3, .timer-panel h3 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.workout-timer .rest-timer > p:first-of-type { margin: 14px 0 0; }
.rest-dial .timer-readout, .rest-dial .timer-readout.timer-readout { top: 50%; font-size: clamp(2.4rem, 12vw, 3.2rem); }
.workout-timer-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(226, 229, 241, .7); box-shadow: inset 0 1px 2px rgba(25, 30, 60, .08); }
.workout-timer-modes button {
  min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--od-soft); font: inherit; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s;
}
.workout-timer-modes button[aria-pressed="true"] { background: #fff; color: var(--od-text); box-shadow: 0 1px 2px rgba(25, 30, 60, .08), 0 6px 14px -8px rgba(45, 60, 130, .35); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.workout-timer-modes button:focus-visible { outline: 2px solid var(--od-accent); outline-offset: 2px; }

/* the dial: a frosted glass disc (static CSS light, no filters) with SVG ticks, ring and sweep hand */
.timer-dial {
  position: relative; width: min(74vw, 290px); aspect-ratio: 1; margin: 18px auto 10px; border-radius: 50%;
  background: radial-gradient(120% 120% at 28% 18%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .7) 38%, rgba(232, 236, 252, .55) 70%, rgba(214, 220, 248, .6) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .95), inset 0 -10px 24px rgba(120, 135, 220, .14), inset 0 0 0 1px rgba(255, 255, 255, .8),
    0 1px 2px rgba(25, 30, 60, .06), 0 26px 50px -24px rgba(45, 60, 140, .45);
}
.timer-dial::after {                                     /* the specular highlight across the glass */
  content: ""; position: absolute; inset: 7% 18% 58% 14%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); opacity: .55;
}
.dial-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dial-face { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1.2; }
.dial-ticks line { stroke: #c3c8da; stroke-width: 1.1; stroke-linecap: round; }
.dial-ticks line.major { stroke: #6f748a; stroke-width: 2; }
.dial-track { fill: none; stroke: rgba(205, 211, 234, .7); stroke-width: 8; }
.dial-ring { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.interval-dial[data-phase="rest"] .dial-ring { stroke: #2fb48a; }
.dial-hand { transform-box: view-box; transform-origin: 50% 50%; will-change: transform; }
.dial-hand line { stroke: var(--od-dark); stroke-width: 2.4; stroke-linecap: round; }
.dial-hand .hub { fill: var(--od-dark); stroke: #fff; stroke-width: 2; }
.dial-hand .tip { fill: var(--od-accent); }
.timer-readout { font-family: var(--od-display); font-weight: 600; font-stretch: 112%; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--od-text); }
.timer-dial .timer-readout { position: absolute; left: 0; right: 0; top: 60%; transform: translateY(-50%); text-align: center; font-size: clamp(2rem, 10vw, 2.7rem); pointer-events: none; }
.interval-display { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; pointer-events: none; }
.interval-display .timer-readout { position: static; transform: none; font-size: clamp(2.4rem, 12vw, 3.2rem); }
.interval-phase { padding: 4px 12px; border-radius: 999px; background: var(--od-dark); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.interval-phase[data-phase="rest"] { background: #1d7a5c; }
.interval-phase[data-phase="done"] { background: #2a52d4; }
.interval-round { color: var(--od-soft); font-size: .85rem; font-weight: 500; }
.interval-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.interval-fields label { display: grid; gap: 6px; color: var(--od-soft); font-size: .8rem; font-weight: 500; }
.interval-fields input { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--od-field-line); border-radius: 14px; background: #fff; color: var(--od-text); font: inherit; font-size: max(16px, 1rem); font-variant-numeric: tabular-nums; }
.interval-fields input:disabled { color: var(--od-soft); background: rgba(255, 255, 255, .6); }
.workout-timer .rest-timer-actions { justify-content: center; }
.timer-panel .rest-timer-actions button:first-child, .workout-timer #restStart { background: var(--od-dark); color: #fff; border-color: var(--od-dark); min-width: 8.5rem; }
.timer-laps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; max-height: 18rem; overflow-y: auto; }
.timer-laps li { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--od-edge); font-variant-numeric: tabular-nums; }
.timer-laps span { color: var(--od-soft); font-weight: 500; }
.timer-laps em { margin-left: 8px; font-style: normal; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.timer-laps b { font-family: var(--od-display); font-weight: 600; color: var(--od-text); }
.timer-laps small { color: var(--od-soft); }
.timer-laps li.fastest em { color: #1d7a5c; }
.timer-laps li.slowest em { color: #b3261e; }
#stopwatchStatus, #intervalStatus { min-height: 1.5rem; margin: 10px 0 0; color: var(--od-soft); text-align: center; }
@media (prefers-reduced-motion: reduce) { .workout-timer-modes button { transition: none; } }

/* ---------- Progress ---------- */
.day-card { background: var(--od-card); border: 1px solid var(--od-edge); border-radius: 24px; box-shadow: var(--od-shadow); color: var(--od-text); }
.day-card.today { background: var(--od-iri); color: var(--od-text); border-color: rgba(58, 104, 245, .35); }
.day-card.today p, .day-card .day-name { color: var(--od-soft); }
.day-card.today .day-action, .day-action { color: var(--od-text); border-color: var(--od-field-line); background: #fff; }
.day-card.today .day-action { background: var(--od-dark); color: #fff; border-color: var(--od-dark); }
.day-card.complete::after, .day-card.today.complete::after { color: var(--od-accent); }
.history-item { border-color: var(--od-hair); color: var(--od-text); }
.history-item b { color: var(--od-text); }
.plan-builder, .account-settings, .account-achievements, .club-panel, .leaderboard-panel, .sports-panel {
  background: var(--od-card); border: 1px solid var(--od-edge); border-radius: 28px; box-shadow: var(--od-shadow); color: var(--od-text);
}
fieldset { border-color: var(--od-hair); }
legend { color: var(--od-text); }
.profile-fields label, .onboard-field, .club-form label, .club-backup label { color: var(--od-soft); }
.profile-fields input, .profile-fields select, .onboard-field input, .onboard-field select, .club-form input, .club-form select {
  background: var(--od-field); color: var(--od-text); border: 1px solid var(--od-field-line); border-radius: 14px;
}
.profile-fields input:focus, .profile-fields select:focus, .onboard-field input:focus, .onboard-field select:focus, .club-form input:focus, .club-form select:focus {
  border-color: var(--od-accent); outline: 2px solid rgba(58, 104, 245, .25); outline-offset: 0;
}
::placeholder { color: #9599aa; }
.segmented span, .check-grid span { background: var(--od-card-solid); color: var(--od-text); border: 1px solid var(--od-field-line); border-radius: 999px; }
.segmented input:checked + span, .check-grid input:checked + span { background: var(--od-dark); color: #fff; border-color: var(--od-dark); }
.segmented input:focus-visible + span, .check-grid input:focus-visible + span, .difficulty-grid input:focus-visible + span { outline: 2px solid var(--od-accent); outline-offset: 2px; }
.toggle-list label { border-color: var(--od-hair); }
.toggle-list b { color: var(--od-text); }
.toggle-list input { background: #dfe2ec; }
.toggle-list input::before { background: #fff; box-shadow: 0 1px 3px rgba(20, 25, 50, .25); }
.toggle-list input:checked { background: var(--od-accent); }
.save-message, #planSaveMessage, #accountSaveMessage, #authMessage, #libraryMessage { color: var(--od-good); }
.difficulty-grid span { background: var(--od-card-solid); border: 1px solid var(--od-field-line); color: var(--od-text); }
.difficulty-grid i, .difficulty-grid small, .difficulty-grid em { color: var(--od-soft); }
.difficulty-grid b { color: var(--od-text); }
.difficulty-grid input:checked + span, .difficulty-grid label:last-child input:checked + span { background: var(--od-dark); border-color: var(--od-dark); color: #fff; }
.difficulty-grid input:checked + span b, .difficulty-grid input:checked + span i, .difficulty-grid input:checked + span small, .difficulty-grid input:checked + span em,
.difficulty-grid label:last-child input:checked + span b, .difficulty-grid label:last-child input:checked + span i { color: #fff; }

/* ---------- Account ---------- */
.club-panel h2, .club-panel h3, .collection-heading { color: var(--od-text); }
.collection-card { border-color: var(--od-hair); }
.club-panel :focus-visible { outline-color: var(--od-accent); }
.rank-row > div, .badge { background: var(--od-card-solid); border: 1px solid var(--od-field-line); color: var(--od-text); }
.rank-row span, .badge span { color: var(--od-soft); }
.rank-row strong, .badge b { color: var(--od-text); }
.badge.earned { background: var(--od-iri); border-color: rgba(58, 104, 245, .35); }
.badge.earned i { color: var(--od-accent); }
.leaderboard-row, .leaderboard-row.rank-1, .leaderboard-row.rank-2, .leaderboard-row.rank-3 { background: var(--od-card-solid); border-color: var(--od-hair); color: var(--od-text); }
.leaderboard-row div b, .leaderboard-row.rank-1 div b { color: var(--od-text); }
.leaderboard-row div span, .leaderboard-row > span { color: var(--od-soft); }
.leaderboard-row > strong { color: var(--od-text); }
.leaderboard-row > strong i, .badge i { color: var(--od-faint); }
.leaderboard-row mark { background: var(--od-accent-soft); color: var(--od-accent); }
.leaderboard-row button { background: #fff; color: var(--od-text); border-color: var(--od-field-line); }
.sport-grid article { background: var(--od-card-solid); border: 1px solid var(--od-field-line); box-shadow: none; }
.sport-grid i { color: var(--od-soft); }
.sport-grid b { background: var(--od-accent-soft); color: var(--od-accent-text); border-color: transparent; }

/* ---------- dialogs and overlays ---------- */
.onboarding, .video-modal { background: rgba(236, 238, 247, .9); }
.onboarding-card, .swap-card, .video-shell {
  background: var(--od-card-solid); color: var(--od-text); border: 1px solid var(--od-edge); border-radius: 30px; box-shadow: 0 30px 80px -30px rgba(40, 50, 110, .35);
}
.onboarding-copy, .age-note, .video-description, .backup-label, .video-shell .eyebrow, .video-clip-info, .video-status,
.youtube-notice, .health-note-light { color: var(--od-soft); }
.video-close { background: #f1f2f8; color: var(--od-text); border-color: var(--od-field-line); }
.video-shell .xp-badge { color: var(--od-accent-text); border-color: transparent; background: var(--od-accent-soft); border-radius: 999px; font-weight: 600; }
.video-shell .xp-badge.locked { color: var(--od-soft); border-color: var(--od-field-line); background: #f4f5fa; }
.video-modes button { background: #fff; color: var(--od-text); border: 1px solid var(--od-field-line); border-radius: 999px; }
.video-modes button[aria-pressed="true"] { background: var(--od-dark); color: #fff; border-color: var(--od-dark); }
.video-original { color: var(--od-accent); }
.playback-console { background: #f4f5fa; border-color: var(--od-hair); }
.playback-key, .speed-select button, .segment-tools button, .video-choice { background: #fff; color: var(--od-text); border-color: var(--od-field-line); }
.playback-key:hover, .speed-select button:hover, .segment-tools button:hover { background: #eef0f8; }
.speed-select button.active, .video-choice.active { background: var(--od-dark); color: #fff; border-color: var(--od-dark); }
.video-scrubber, .speed-select > span, .segment-tools div span, .segment-tools div small { color: var(--od-soft); }
.segment-tools div b { color: var(--od-text); }
.swap-choice { background: #fff; color: var(--od-text); border: 1px solid var(--od-field-line); border-radius: 18px; font-weight: 600; letter-spacing: .01em; }
.swap-choice:hover, .swap-choice.current { background: var(--od-iri); color: var(--od-text); border-color: rgba(58, 104, 245, .45); }
.swap-choice.current { box-shadow: inset 0 0 0 1px rgba(58, 104, 245, .45); }
.swap-choice:first-child { background: var(--od-dark); color: #fff; border-color: var(--od-dark); border-radius: 999px; }
.swap-choices { gap: 10px; }
.swap-modal { background: rgba(236, 238, 247, .94); }
.anon-choice { color: var(--od-soft); }
.celebration { background: rgba(240, 241, 250, .96); color: var(--od-text); }
.celebration p { color: var(--od-accent); }
.reward-burst { color: var(--od-text); }
.reward-burst strong { color: var(--od-accent); }

/* ---------- footer ---------- */
footer { background: transparent; border-top: 1px solid var(--od-hair); }
footer a { color: var(--od-text); }
/* the links are 44px tap targets; centre the dots on them and keep underlines close to the text */
.footer-meta nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; column-gap: 12px; }
.footer-meta nav > span { color: var(--od-faint); }
.footer-meta a { border: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(24, 25, 34, .3); font-weight: 500; }
.footer-meta a:hover { text-decoration-color: currentColor; }
@media (max-width: 860px) { .footer-meta { justify-self: start; text-align: left; } .footer-meta nav { justify-content: flex-start; } }

/* ---------- weights and case: the base stylesheet's 800–950 weights and wide capitals belong to the old dark theme ---------- */
h1 em, h2 em, h3 em { font-family: inherit; font-weight: inherit; }
legend, .settings-grid legend { font-family: var(--od-display); font-weight: 600; letter-spacing: -.01em; color: var(--od-text); }
.profile-fields label, .onboard-field, .club-form label { font-weight: 500; }
.profile-fields input, .profile-fields select, .onboard-field input, .onboard-field select, .club-form input, .club-form select, .rest-timer input { font-weight: 400; }
.segmented span, .check-grid span { font-weight: 500; }
.demo-button, .day-action, .playback-key, .segment-tools button, .speed-select button { font-weight: 600; letter-spacing: .01em; text-transform: none; }
.day-card .day-name { font-weight: 600; letter-spacing: .1em; }
.day-card span { font-weight: 600; letter-spacing: .01em; text-transform: none; }
.eyebrow, .setting-kicker { font-weight: 600; }
.sound-button, .profile-button span { font-weight: 700; }
.difficulty-grid i, .difficulty-grid em, .sport-grid i, .leaderboard-row mark, .leaderboard-row em { font-weight: 600; }
.day-card.complete::after { font-weight: 700; }
.leaderboard-row em { color: var(--od-good); }
.leaderboard-row mark { border-color: transparent; }

/* ---------- soft shapes for the old square tiles ---------- */
.rank-row { gap: 10px; border: 0; background: transparent; }
.rank-row > div, .badge { border: 1px solid var(--od-field-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(25, 30, 60, .04); }
.badge-shelf { gap: 10px; }
.rest-move, .rest-timer-actions button { border-radius: 999px; background: var(--od-card-solid); color: var(--od-text); border: 1px solid var(--od-field-line); }

/* ---------- phones: no blur, a touch more opaque surfaces ---------- */
@media (max-width: 860px) {
  .site-header { background: rgba(246, 246, 251, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header nav.main-navigation { box-shadow: 0 18px 40px -16px rgba(45, 55, 120, .35), 0 1px 2px rgba(25, 30, 60, .06); }
  .exercise-card, .stat-strip > div, .day-card, .rest-timer { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7)); }
  .hero-copy::after { left: 30px; }
  .club-panel { margin-left: 20px; margin-right: 20px; }               /* panels never touch the screen edge */
  .week-grid { padding-left: 20px; padding-right: 20px; scroll-padding-inline: 20px; }
  .course-entry { padding-left: 20px; padding-right: 20px; }
  .today-session::after { left: 26px; }
}
@media (min-width: 861px) {
  .today-session, .exercise-card, .stat-strip > div, .day-card, .rest-timer, .plan-builder, .account-settings, .account-achievements,
  .club-panel, .leaderboard-panel, .sports-panel, .history-summary {
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .button, .exercise-card { transition: none; }
}

/* screen-reader-only text (e.g. "opens in a new tab") */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }