/* offday.club — dark theme (Claude, 2026-10-29), after Kenneth's "unslopped" run-app reference.
   Linked with media="(prefers-color-scheme: dark)", so it applies only when the device is in dark mode and light-mode
   visitors never wait for it. The light pearl theme (theme.css) stays the default and is not changed.
   Near-black page with a faint dot grid and one plum light; matte dark cards with hairline edges; deep colour tiles
   (cobalt, ember, magenta) for stats; dot-matrix numerals (Doto) for big numbers; small monospace labels;
   dotted progress with a white knob. Same selectors, no markup or behaviour change. */

/* Doto (SIL OFL 1.1, doto-OFL.txt): dot-matrix numerals, subset to digits and % / : . - + X P (1.6 KB); ":" and "." are left to Archivo */
@font-face {
  font-family: "Doto"; src: url("./doto.woff2") format("woff2"); font-weight: 500 900; font-display: swap;
  unicode-range: U+20, U+25, U+2B, U+2D, U+2F-39, U+50, U+58;   /* ":" and "." fall back to Archivo: Doto draws them as crosses */
}

:root {
  color-scheme: dark;
  --ink: #0a0a0d;
  --paper: #f2f2f5;
  --muted: #a3a5b2;
  --line: rgba(255, 255, 255, .08);
  --coral: #7d93ff;
  --lime: #6fd8a8;
  --od-text: #f2f2f5;
  --od-soft: #a3a5b2;
  --od-faint: #8f92a1;
  --od-accent-text: #a9b6ff;
  --od-card: linear-gradient(180deg, #16161c 0%, #111116 100%);
  --od-card-solid: #17171d;
  --od-edge: rgba(255, 255, 255, .07);
  --od-hair: rgba(255, 255, 255, .08);
  --od-field: #0f0f14;
  --od-field-line: rgba(255, 255, 255, .14);
  --od-dark: #f2f2f5;                      /* "dark" actions invert: white pills with near-black text */
  --od-accent: #7d93ff;
  --od-accent-soft: rgba(125, 147, 255, .16);
  --od-good: #6fd8a8;
  --od-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px -22px rgba(0, 0, 0, .9);
  --od-shadow-lift: inset 0 1px 0 rgba(255, 255, 255, .07), 0 26px 56px -24px rgba(0, 0, 0, .95);
  --od-iri: radial-gradient(120% 90% at 50% 120%, rgba(190, 70, 150, .55) 0%, rgba(110, 40, 110, .28) 38%, transparent 70%), linear-gradient(180deg, #17151c 0%, #120f17 100%);
  --od-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --od-dots: "Doto", var(--od-display);
  --nav-surface: rgba(20, 20, 26, .94);
  --nav-selected: rgba(255, 255, 255, .08);
  --nav-text: #f2f2f5;
  --nav-muted: #a3a5b2;
  --nav-border: rgba(255, 255, 255, .08);
}
html { background: #0a0a0d; }
body::before {                                 /* one plum light at the top and a fine dot grid, like the reference */
  background:
    radial-gradient(70% 40% at 50% -6%, rgba(120, 45, 110, .38), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 1px, transparent 1.4px) 0 0 / 14px 14px,
    linear-gradient(180deg, #0d0b10 0%, #0a0a0d 40%);
}

/* type: small monospace labels, as in the reference ("WED, 28 OCT · 7:12") */
.eyebrow, .hero-copy .eyebrow, .session-copy .eyebrow, .workout-section .eyebrow, .plan-builder .eyebrow, .setting-kicker, .session-meta {
  font-family: var(--od-mono); font-weight: 500; letter-spacing: .08em; color: var(--od-faint);
}
.session-copy .eyebrow { color: #d9a6cf; }
a { color: var(--od-accent-text); }

/* header and buttons */
.site-header { background: rgba(10, 10, 13, .82); }
.profile-button span { color: #0a0a0d; }
.button.primary { color: #0a0a0d; box-shadow: 0 10px 24px -14px rgba(255, 255, 255, .35); }
.button.primary:hover { background: #ffffff; }
.button.ghost:hover { background: #1e1e25; }
.demo-button:hover, .finish-button.ready, .finish-button.ready b, .segmented input:checked + span, .check-grid input:checked + span,
.difficulty-grid input:checked + span, .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,
.difficulty-grid label:last-child input:checked + span b, .difficulty-grid label:last-child input:checked + span i,
.day-card.today .day-action, .video-modes button[aria-pressed="true"], .speed-select button.active, .video-choice.active,
.swap-choice:first-child, .timer-panel .rest-timer-actions button:first-child, .workout-timer #restStart { color: #0a0a0d; }
.finish-button.ready { box-shadow: 0 14px 30px -16px rgba(255, 255, 255, .3); }

/* Today: the session card glows magenta from below, like the reference's distance card */
.today-session { border-color: rgba(255, 255, 255, .08); }
.today-session::before { background: radial-gradient(closest-side, rgba(200, 80, 160, .22), transparent); }
.today-session::after { background: #fff; box-shadow: 0 0 0 2px rgba(220, 120, 190, .5), 0 0 14px rgba(220, 120, 190, .45); }
.hero-copy::after { background: linear-gradient(var(--od-hair), rgba(220, 120, 190, .5)); }

/* stats: deep colour tiles with dot-matrix numerals */
.stat-strip > div { position: relative; overflow: hidden; border-radius: 24px; }
.stat-strip strong { font-family: var(--od-dots); font-weight: 700; font-size: 1.9rem; letter-spacing: .02em; line-height: 1.1; }
.stat-strip span { font-family: var(--od-mono); font-size: .68rem; letter-spacing: .06em; text-transform: lowercase; color: var(--od-soft); }
.stat-strip > div:nth-child(1) { background: radial-gradient(120% 110% at 0% 0%, #3d4cff 0%, #1d2380 34%, #121218 72%); }        /* cobalt, like Pace */
.stat-strip > div:nth-child(4) { background: radial-gradient(120% 110% at 100% 100%, #c8461a 0%, #7a2914 36%, #141216 74%); }   /* ember, like Heart rate */
.stat-strip > div:nth-child(1) span, .stat-strip > div:nth-child(4) span { color: #ffffff; }
/* text inside the glowing cards is a step lighter so it holds AA over the colour */
.today-session, .day-card.today { --od-soft: #cfd1db; --od-faint: #c6c8d3; }
/* progress: a dotted track with a white knob, like the reference's weekly goal */
.progress-track { position: relative; height: 10px; margin-top: 16px; overflow: visible; border-radius: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .28) 1.1px, transparent 1.6px) 0 50% / 7px 10px repeat-x; }
.progress-track i { position: relative; height: 10px; border-radius: 0;
  background: radial-gradient(circle, #ffffff 1.3px, transparent 1.8px) 0 50% / 7px 10px repeat-x; }
.progress-track i::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #cfd2dd); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08), 0 4px 10px rgba(0, 0, 0, .6); }

/* exercise cards: matte, the liquid colour tiles stay */
.exercise-card:hover { background: linear-gradient(180deg, #1a1a21, #14141a); }
.exercise-card.done { background: linear-gradient(160deg, #1a1b26, #121218); border-color: rgba(125, 147, 255, .35); }
.exercise-number { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 24px -14px rgba(0, 0, 0, .9); }
.exercise-card.done .exercise-number { box-shadow: inset 0 0 0 2px #0a0a0d, 0 0 0 2px var(--od-accent), 0 12px 24px -14px rgba(0, 0, 0, .9); }
.complete-check { background: #0f0f14; border-color: rgba(255, 255, 255, .22); }
.exercise-card.done .complete-check { color: #0a0a0d; }
.health-note { background: rgba(255, 255, 255, .03); }

/* Timer: a smoked-glass dial with a ticked rim (like the reference's heart-rate ring) and the light theme's Archivo readouts (Kenneth) */
.workout-timer-modes { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.workout-timer-modes button[aria-pressed="true"] { background: #f2f2f5; color: #0a0a0d; box-shadow: 0 6px 16px -8px rgba(255, 255, 255, .25); }
.timer-dial {
  background: radial-gradient(110% 110% at 30% 15%, #24242c 0%, #15151b 45%, #0e0e12 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -18px 40px rgba(120, 45, 110, .18), 0 30px 60px -28px rgba(0, 0, 0, .95);
}
.timer-dial::after { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); opacity: .6; }
.dial-face { stroke: rgba(255, 255, 255, .06); }
.dial-ticks line { stroke: rgba(255, 255, 255, .22); }
.dial-ticks line.major { stroke: rgba(255, 255, 255, .7); }
.dial-track { stroke: rgba(255, 255, 255, .07); }
.dial-hand .hub { stroke: #0a0a0d; }
.dial-hand .tip { fill: #ff7a45; }
.interval-phase { color: #0a0a0d; }
.interval-phase[data-phase="rest"] { background: #6fd8a8; }
.interval-phase[data-phase="done"] { background: #a9b6ff; }
.interval-fields input { background: var(--od-field); }
.interval-fields input:disabled { background: rgba(255, 255, 255, .03); }
.timer-laps li { background: rgba(255, 255, 255, .035); }
.timer-laps li.fastest em { color: #6fd8a8; }
.timer-laps li.slowest em { color: #ff8a70; }

/* Progress and Account */
.day-card.today { border-color: rgba(220, 120, 190, .35); }
.day-action { background: #1b1b22; }
.toggle-list input { background: #2a2a33; }
.toggle-list input::before { background: #f2f2f5; }
::placeholder { color: #6f7281; }
.badge.earned { border-color: rgba(220, 120, 190, .35); }
.leaderboard-row button, .leaderboard-row.rank-1, .leaderboard-row.rank-2, .leaderboard-row.rank-3 { background: var(--od-card-solid); }
.leaderboard-row button { background: #1b1b22; }

/* dialogs */
.onboarding, .video-modal { background: rgba(6, 6, 9, .9); }
.swap-modal { background: rgba(6, 6, 9, .94); }
.onboarding-card, .swap-card, .video-shell { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .95); }
.video-close, .playback-console, .video-shell .xp-badge.locked { background: #1b1b22; }
.video-modes button, .playback-key, .speed-select button, .segment-tools button, .video-choice, .swap-choice { background: #1b1b22; }
.playback-key:hover, .speed-select button:hover, .segment-tools button:hover { background: #24242c; }
.celebration { background: rgba(10, 10, 13, .96); }

/* footer */
.footer-meta a { text-decoration-color: rgba(242, 242, 245, .35); }

@media (max-width: 860px) {
  .site-header { background: rgba(10, 10, 13, .96); }
  .site-header nav.main-navigation { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .06); }
  .exercise-card, .day-card, .rest-timer { background: linear-gradient(180deg, #16161c, #111116); }
  .stat-strip > div:not(:nth-child(1)):not(:nth-child(4)) { background: linear-gradient(180deg, #16161c, #111116); }
}
.hero-actions .button.primary span { background: #0a0a0d; color: #f2f2f5; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }