/* Wide Sky — design system
   Register: product (dark-only, dusk-horizon identity)
   Mood: last light over open land — sky gone deep, one warm band on the horizon. */

/* ---------- tokens ---------- */
:root {
  /* surfaces (twilight blue-slate) */
  --sky-zenith: oklch(0.145 0.030 268);
  --sky-low:    oklch(0.195 0.040 260);
  --surface:    oklch(0.215 0.035 262);
  --surface-2:  oklch(0.255 0.035 262);
  --hairline:   oklch(0.32 0.030 262);
  --hairline-soft: oklch(0.27 0.030 262);
  --control-edge: oklch(0.55 0.026 260); /* 3:1+ boundary for text-label controls (WCAG 1.4.11) */

  /* ink */
  --ink:        oklch(0.930 0.012 255);
  --ink-soft:   oklch(0.760 0.022 258);
  --ink-faint:  oklch(0.620 0.025 260); /* large text / non-essential only */

  /* horizon glow — the one warm color */
  --glow:       oklch(0.800 0.125 68);
  --glow-bright:oklch(0.860 0.130 72);
  --glow-dim:   oklch(0.700 0.110 62);
  --glow-ink:   oklch(0.220 0.050 60);  /* text on glow */
  --glow-tint:  oklch(0.800 0.125 68 / 0.12);
  --glow-line:  oklch(0.800 0.125 68 / 0.35);

  /* rose — dusk secondary, decoration of the sky only, never UI state */
  --dusk-rose:  oklch(0.640 0.075 20 / 0.20);

  --ok:         oklch(0.780 0.100 150);

  /* type */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-prose: "Newsreader", Georgia, "Times New Roman", serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 2rem;
  --text-cue: clamp(1.5rem, 2.2vw + 1.1rem, 2.1rem);

  /* space */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4.5rem;

  --radius: 10px;
  --radius-lg: 16px;

  /* z scale */
  --z-nav: 10; --z-overlay: 20; --z-toast: 30;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 240ms;

  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink);
  background: var(--sky-zenith);
  min-height: 100dvh;
}

/* the dusk sky: deep zenith down to a faint warm horizon band */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to bottom,
      var(--sky-zenith) 0%,
      var(--sky-low) 62%,
      oklch(0.230 0.048 285) 82%,
      oklch(0.270 0.055 45 / 0.9) 97%,
      oklch(0.320 0.075 55) 100%
    );
}

img, svg, canvas { display: block; max-width: 100%; }

button, input, select { font: inherit; color: inherit; }

a { color: var(--glow); text-decoration: none; }
a:hover { color: var(--glow-bright); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--glow-tint); }

h1, h2, h3 {
  font-family: var(--font-prose);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- app shell ---------- */
.shell {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-8) + env(safe-area-inset-bottom));
}

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}

.wordmark {
  font-family: var(--font-prose);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.wordmark:hover { color: var(--ink); text-decoration: none; }
.wordmark .horizon {
  display: inline-block;
  width: 1.15em; height: 2px;
  margin: 0 0.45em 0.22em 0;
  vertical-align: baseline;
  background: linear-gradient(to right, var(--glow), transparent);
  border-radius: 1px;
}

/* primary nav — top row on wide screens, bottom bar on small */
.nav {
  display: flex;
  gap: var(--sp-2);
}
.nav a {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.nav a:hover { color: var(--ink); text-decoration: none; background: var(--surface); }
.nav a[aria-current="page"] { color: var(--glow); }

@media (max-width: 40rem) {
  .masthead { margin-bottom: var(--sp-6); }
  .nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-nav);
    justify-content: space-around;
    padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
    background: oklch(0.175 0.035 264 / 0.92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--hairline-soft);
  }
  .nav a { flex: 1; text-align: center; }
  body.immersed .nav { display: none; }
}

/* ---------- common ---------- */
.lede {
  font-family: var(--font-prose);
  font-size: var(--text-lg);
  color: var(--ink-soft);
  max-width: 34rem;
  text-wrap: pretty;
}

.section { margin-top: var(--sp-7); }
.section > h2 { margin-bottom: var(--sp-4); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.65rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 550;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--ink);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--hairline-soft); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }

.btn-primary { background: var(--glow); color: var(--glow-ink); }
.btn-primary:hover { background: var(--glow-bright); }

.btn-ghost { background: transparent; border-color: var(--hairline); color: var(--ink-soft); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }

.btn-quiet { background: transparent; color: var(--ink-soft); }
.btn-quiet:hover { background: var(--surface); color: var(--ink); }

/* list rows (lessons, sessions, exercises) */
.rows { list-style: none; }
.rows li + li { border-top: 1px solid var(--hairline-soft); }
.row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-2);
  color: var(--ink);
  border-radius: var(--radius);
  transition: background var(--t-fast) var(--ease-out);
}
a.row:hover, button.row:hover { background: var(--surface); text-decoration: none; }
.row .row-body { flex: 1; min-width: 0; }
.row .row-title { font-size: var(--text-md); font-weight: 550; }
.row .row-sub { font-size: var(--text-sm); color: var(--ink-soft); margin-top: 2px; text-wrap: pretty; }
.row .row-meta {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* completion mark: a small horizon that has "set" */
.mark {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline);
  position: relative;
}
.mark.done { border-color: var(--glow-dim); background: var(--glow-tint); }
.mark.done::after {
  content: "";
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: var(--glow);
}

/* module heading inside Learn */
.module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: var(--sp-7) 0 var(--sp-2);
}
.module-head:first-of-type { margin-top: var(--sp-6); }
.module-head .count { font-size: var(--text-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- prose (lessons) ---------- */
.prose {
  font-family: var(--font-prose);
  font-size: 1.155rem;
  line-height: 1.72;
  max-width: 62ch;
  text-wrap: pretty;
}
.prose p + p { margin-top: 1em; }
.prose h1 { margin-bottom: 0.6em; }
.prose h2 { font-size: var(--text-xl); margin: 1.6em 0 0.5em; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 1em 0; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote {
  margin: 1.4em 0;
  padding-left: 1.2em;
  color: var(--ink-soft);
  font-style: italic;
}
.prose .try {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.6;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  margin: 1.5em 0;
}
.prose .try b { color: var(--glow); font-weight: 600; }

.lesson-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline-soft);
}

.crumb {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--sp-5);
  display: inline-block;
}

/* ---------- home ---------- */
.today {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
}
.today .k {
  font-size: var(--text-sm);
  color: var(--glow);
  margin-bottom: var(--sp-2);
}
.today h2 { margin-bottom: var(--sp-2); }
.today p { color: var(--ink-soft); max-width: 36rem; text-wrap: pretty; }
.today .btn { margin-top: var(--sp-4); }

.quiet-stats {
  margin-top: var(--sp-5);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.quiet-stats span { color: var(--ink); font-variant-numeric: tabular-nums; }

/* last 7 days: presence, not a streak counter */
.week-dots { display: flex; gap: 10px; margin-top: var(--sp-3); }
.week-dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hairline-soft);
}
.week-dots i.on { background: var(--glow); }

/* ---------- just sit ---------- */
.just-sit {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.just-sit .js-body { flex: 1 1 18rem; }
.just-sit h2 { margin-bottom: var(--sp-2); }
.just-sit p { color: var(--ink-soft); font-size: var(--text-sm); max-width: 32rem; text-wrap: pretty; }
.just-sit .js-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ---------- session player ---------- */
.player {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background-color: var(--sky-zenith);
  background-image:
    linear-gradient(
      to bottom,
      var(--sky-zenith) 0%,
      var(--sky-low) 60%,
      oklch(0.225 0.045 300) 84%,
      oklch(0.270 0.060 50) 100%
    );
}

.player-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-5);
}
.player-top .session-name { font-size: var(--text-sm); color: var(--ink-faint); }

.player-cue {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-6);
  text-align: center;
}
.cue-text {
  font-family: var(--font-prose);
  font-size: var(--text-cue);
  font-weight: 450;
  line-height: 1.45;
  max-width: 24em;
  color: var(--ink);
  text-wrap: balance;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}
.cue-text.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cue-text { transition-duration: 200ms; }
}

.player-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
}
.player-controls { display: flex; align-items: center; gap: var(--sp-3); }

/* clock and playback speed share one row, so the transport stays the last tier */
.player-meta { display: flex; align-items: center; gap: var(--sp-4); }

/* playback-speed control — filled so it reads as tappable, 44px touch target */
.speed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius);
  border: 1px solid var(--control-edge);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.speed-btn:hover { background: var(--surface); color: var(--ink); }
.speed-btn.active { color: var(--glow); border-color: var(--glow-line); background: var(--glow-tint); }

/* progress: a thin horizon line that brightens left→right */
.player-progress {
  width: min(60vw, 20rem);
  height: 2px;
  border-radius: 1px;
  background: var(--hairline-soft);
  overflow: hidden;
}
.player-progress > div {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--glow-dim), var(--glow));
  transition: width 1s linear;
}
.player-clock {
  font-size: var(--text-xs);
  color: var(--ink-soft); /* persistent readout — ink-faint is large/non-essential only */
  font-variant-numeric: tabular-nums;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--surface); color: var(--ink); }
.icon-btn.primary {
  width: 60px; height: 60px;
  background: var(--glow);
  border-color: transparent;
  color: var(--glow-ink);
}
.icon-btn.primary:hover { background: var(--glow-bright); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.primary svg { width: 26px; height: 26px; }

/* session complete */
.player-done {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  text-align: center;
}
.player-done h2 { font-size: var(--text-xl); }
.player-done p { color: var(--ink-soft); max-width: 30rem; }

/* ---------- trainer ---------- */
.trainer-stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--sky-zenith);
  overflow: hidden;
}
.trainer-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.trainer-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  text-align: center;
  background: oklch(0.145 0.030 268 / 0.86);
  backdrop-filter: blur(6px);
  transition: opacity var(--t-med) var(--ease-out);
}
.trainer-veil[hidden] { display: none; }
.trainer-veil h2 { font-size: var(--text-xl); }
.trainer-veil p {
  color: var(--ink-soft);
  max-width: 32rem;
  font-size: var(--text-md);
  text-wrap: pretty;
}

.trainer-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-5);
}
.trainer-hud .hint { font-size: var(--text-sm); color: var(--ink-faint); }

.trainer-footer {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
}

/* ---------- settings ---------- */
.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-2);
}
.setting + .setting { border-top: 1px solid var(--hairline-soft); }
.setting .s-body { flex: 1; }
.setting .s-title { font-weight: 550; }
.setting .s-sub { font-size: var(--text-sm); color: var(--ink-soft); margin-top: 2px; }

.switch {
  position: relative;
  width: 46px; height: 27px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--ink-soft);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--glow); border-color: transparent; }
.switch[aria-checked="true"]::after { transform: translateX(19px); background: var(--glow-ink); }

select.control, input[type="range"].control {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  max-width: 14rem;
}
input[type="range"].control { padding: 0; height: 27px; accent-color: var(--glow); }

/* ---------- footer ---------- */
.site-foot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline-soft);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  line-height: 1.7;
}
.site-foot a { color: var(--ink-soft); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
}