@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* surfaces -- the dawn gradient is the page, per the approved system */
  --bg-app: linear-gradient(168deg,#FFF6F0 0%,#F6EDF8 46%,#EDE6FB 100%);
  --bg-page: #FBF3F4;                    /* flat fallback: modal sheets only */
  --bg-card: rgba(255,255,255,0.72);
  --bg-card-soft: rgba(255,255,255,0.50);
  --border-card: rgba(255,255,255,0.90); /* the card's own edge */
  --border: rgba(46,38,80,0.10);         /* hairline / divider */
  --border-strong: rgba(46,38,80,0.16);  /* outlined controls */
  /* type */
  --text-primary: #2E2650;
  --text-secondary: #6E6588;
  --text-muted: #6E6588;                 /* retired: #A69ECB failed the small-text rule */
  /* accents */
  --accent: #6B3FC4;
  --accent-dark: #4A2E8C;
  --accent-signal: #C2521F;              /* signal TEXT */
  --accent-signal-mark: #E0673C;         /* signal FILLS / MARKS */
  --accent-success: #4E8C6E;
  --danger: #B22A2A;
  --cta-bg: #2E2650;
  --cta-text: #FFF6F0;
  --range-track: rgba(46,38,80,0.12);
  --nav-bg: rgba(255,255,255,0.66);
  --nav-icon: #8A81AE;
  --hero-gradient-1: #FFF6F0;
  --hero-gradient-2: #F0D9C4;
  --hero-text: #2E2650;
  --hero-text-muted: rgba(46,38,80,0.65);
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

[data-theme="dark"] {
  --bg-app: linear-gradient(168deg,#6B3FC4 0%,#4A2E8C 52%,#241847 100%);
  --bg-page: #241847;
  --bg-card: rgba(255,255,255,0.09);
  --bg-card-soft: rgba(255,255,255,0.06);
  --border-card: rgba(255,255,255,0.16);
  --border: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.22);
  --text-primary: #F6F2FF;
  --text-secondary: rgba(237,234,247,0.72);
  --text-muted: rgba(237,234,247,0.72);
  --accent: #C4AFFF;
  --accent-dark: #D3C4FF;
  --accent-signal: #FFA07A;
  --accent-signal-mark: #F2754A;
  --accent-success: #7FBFA0;
  --danger: #FF8C8C;
  --cta-bg: #FFF6F0;
  --cta-text: #2E2650;
  --range-track: rgba(255,255,255,0.16);
  --nav-bg: rgba(36,24,71,0.60);
  --nav-icon: rgba(237,234,247,0.60);
  --hero-gradient-1: #5A73B8;
  --hero-gradient-2: #35407A;
  --hero-text: #EDEAF7;
  --hero-text-muted: rgba(237,234,247,0.7);
}

html { transition: background-color 0.3s ease; }
body, .card, .modal-sheet { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

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

html, body {
  height: 100%;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea {
  font-family: var(--font-sans);
}

.screen {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(calc(20px + var(--safe-top)), 48px) 20px calc(96px + var(--safe-bottom));
  background: var(--bg-app);
  animation: fadein 0.25s ease;
}
.screen.active { display: block; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 400;
}

h1 { font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--text-primary); }
h2 { font-size: 19px; font-weight: 600; color: var(--text-primary); }
p.lead { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

.divider {
  width: 36px;
  height: 2px;
  background: var(--accent);
  margin: 14px 0;
  border: none;
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px;
}
.card + .card { margin-top: 12px; }

.label-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 400;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  transition: transform 0.1s ease, opacity 0.1s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--cta-bg); color: var(--cta-text); }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-sm { width: auto; padding: 8px 14px; font-size: 13px; }
.btn:disabled { opacity: 0.4; }

/* Onboarding */
.progress-dots {
  display: flex; gap: 6px; margin-bottom: 24px;
}
.progress-dots span {
  height: 4px; flex: 1; border-radius: 2px; background: var(--border);
}
.progress-dots span.done { background: var(--accent); }

.chip-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0;
}
.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 9px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chip.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.06);
}
.chip:active { transform: scale(0.94); }

textarea, .text-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-primary);
  resize: vertical;
  outline: none;
}
/* native time/date pickers can render wider than their container on some mobile
   browsers regardless of width:100% -- this forces them to respect it */
input[type="time"], input[type="date"] {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
textarea:focus, .text-input:focus { border-color: var(--accent); }
textarea::placeholder, .text-input::placeholder { color: var(--text-muted); }

.hint-box {
  background: var(--bg-card-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}
.hint-box strong { color: var(--accent-dark); font-weight: 600; }

.symbol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.symbol-btn {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.symbol-btn.selected { background: var(--accent); border-color: var(--accent); }

.onboarding-nav {
  display: flex; gap: 10px; margin-top: 24px;
}

/* Top bar (home) */
.topbar {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;
}
.streak-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex; align-items: center; gap: 5px;
}

.field-card {
  position: relative;
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  height: 150px;
  overflow: hidden;
  cursor: pointer;
}
#field-canvas {
  width: 100%; height: 100%; display: block;
}
.field-label {
  position: absolute; bottom: 10px; left: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.field-sublabel {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
}
.field-tap-hint {
  position: absolute; bottom: 10px; right: 14px;
  font-family: var(--font-mono); font-size: 10px; color: var(--accent);
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.action-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: left;
}
.action-card .label-mono { display: block; margin-bottom: 6px; }
.action-card .title { font-size: 13px; font-weight: 600; color: var(--text-primary); }

.session-card {
  display: flex; align-items: center; justify-content: space-between;
}
.play-btn {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #fff; font-size: 16px;
}

/* Bottom nav */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-around;
  padding: 9px 6px calc(7px + var(--safe-bottom));
  z-index: 10;
}
.nav-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text-secondary); font-size: 9.5px; font-weight: 400;
  font-family: var(--font-mono);
}
.nav-btn .icon { font-size: 16px; line-height: 1; color: var(--nav-icon); }
.nav-btn.active { color: var(--accent); font-weight: 700; }
.nav-btn.active .icon { color: var(--accent); }

/* Meditation player */
.player-overlay {
  position: fixed; inset: 0; background: linear-gradient(168deg,#FFF6F0 0%,#F6EDF8 46%,#EDE6FB 100%); z-index: 100;
  display: none; flex-direction: column;
  padding: calc(20px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* long captions were getting clipped by the
     screen edge with no way to reach the rest -- this was the actual bug, not a font-size issue.
     overflow-x:hidden is required here, not optional: setting overflow-y:auto alone makes the
     browser also treat overflow-x as auto (per spec), and the decorative .pl-wash glow is
     intentionally wider than the screen -- without this line that turns into real, draggable
     horizontal scroll. */
}
.player-overlay.active { display: flex; }

.player-header {
  display: flex; justify-content: space-between; align-items: center;
}
.narration-badge {
  /* sits under the progress line, centred -- the header slot belongs to the
     phase count now, and the two were painting on top of each other */
  position: absolute; top: calc(80px + var(--safe-top)); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
  background: var(--bg-card); border: 1px solid var(--border-strong);
  padding: 4px 10px; border-radius: 100px; display: flex; align-items: center; gap: 5px;
  z-index: 5; animation: narration-pulse 1.4s ease-in-out infinite;
}
@keyframes narration-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.player-progress-track {
  height: 3px; background: var(--border); border-radius: 2px; margin: 20px 0 0;
  overflow: hidden;
}
.player-progress-fill {
  height: 100%; background: var(--accent); width: 0%; transition: width 1s linear;
}

.player-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 24px;
}

/* Breath circle, verbatim construction from #28a: a radial halo behind a bordered
   ring, with the cue word inside. Three separate animations on the same clock --
   --breath is the phase length, set per session. */
.breath-circle {
  position: relative; width: 238px; height: 238px; flex: none;
  display: flex; align-items: center; justify-content: center;
  --breath: 4s;
}
.bc-halo {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%,
              var(--bc-wash, rgba(136,88,224,.14)) 62%, transparent 100%);
  animation: breathhalo var(--breath) ease-in-out infinite;
}
.bc-ring {
  position: absolute; inset: 14px; border-radius: 50%;
  border: 1px solid var(--bc-edge, rgba(107,63,196,.28));
  background: rgba(255,255,255,.5);
  box-shadow: 0 22px 44px -28px rgba(46,38,80,.6);
  display: flex; align-items: center; justify-content: center;
  animation: breathcircle var(--breath) ease-in-out infinite;
}
.bc-word {
  font-family: var(--font-mono); font-size: 13px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  animation: breathword var(--breath) ease-in-out infinite;
}
@keyframes breathhalo{ 0%{transform:scale(.9);opacity:.35} 40%{transform:scale(1.12);opacity:.8}
  60%{transform:scale(1.12);opacity:.8} 100%{transform:scale(.9);opacity:.35} }
@keyframes breathcircle{ 0%{transform:scale(.82)} 40%{transform:scale(1)}
  60%{transform:scale(1)} 100%{transform:scale(.82)} }
@keyframes breathword{ 0%,36%{opacity:1} 44%,96%{opacity:.25} 100%{opacity:1} }

/* the ambient wash each session sits on */
.pl-wash{ position:absolute; width:440px; height:440px; pointer-events:none;
  left:-25%; top:120px; border-radius:50%;
  background:radial-gradient(circle, var(--pl-wash, rgba(242,117,74,.13)) 0%, transparent 68%); }
.palette-calm .pl-wash{ left:auto; right:-30%; top:150px; width:480px; height:480px;
  --pl-wash:rgba(111,160,196,.24); }
.palette-fire .pl-wash{ --pl-wash:rgba(242,117,74,.2); }
.palette-night .pl-wash{ --pl-wash:rgba(92,74,158,.18); }
.palette-lighthouse .pl-wash{ left:50%; margin-left:-210px; top:34%; width:420px; height:420px;
  --pl-wash:rgba(255,243,214,.5); }

/* per-session breath timing and hue, from #28a / #30b / #30e */
.palette-morning .breath-circle{ --breath:4s; --bc-wash:rgba(136,88,224,.14);
  --bc-edge:rgba(107,63,196,.28); }
.palette-calm .breath-circle{ --breath:6s; width:200px; height:200px;
  --bc-wash:rgba(111,160,196,.2); --bc-edge:rgba(62,110,146,.3); }
.palette-night .breath-circle{ --breath:5.5s; width:206px; height:206px;
  --bc-wash:rgba(92,74,158,.18); --bc-edge:rgba(92,74,158,.3); }
.palette-fire .breath-circle{ --breath:.62s; width:52px; height:52px;
  --bc-wash:rgba(242,117,74,.24); --bc-edge:rgba(194,82,31,.42); }
.palette-fire .bc-ring{ inset:8px; }
.palette-fire .bc-word{ display:none; }

/* the body centres its content, per every approved variant */
.player-body{ justify-content:center; }

@media (prefers-reduced-motion: reduce){
  .bc-halo, .bc-ring, .bc-word{ animation:none !important; }
}
.breath-circle.expand { transform: scale(1.15); }
.breath-circle.talking { animation: talk-pulse 2.4s ease-in-out infinite; }

.lh-dot { opacity: 0.15; transition: opacity 0.6s ease; }
.lh-dot.lit { opacity: 1; }
.lh-glow { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 0.8s ease; }
.lh-glow.lit { opacity: 0.4; }
.lh-glow.current { animation: lh-glow-pulse 5s ease-in-out infinite; }
@keyframes lh-glow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.9); opacity: 0.65; }
}
@keyframes lh-beam-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
#lh-beam.spinning { animation: lh-beam-spin 6s linear infinite; }
@keyframes talk-pulse {
  0%, 100% { transform: scale(0.9); }
  50% { transform: scale(1.04); }
}

@keyframes fire-pulse-anim {
  0%, 100% { transform: scale(0.9); }
  50% { transform: scale(1.08); }
}
.breath-circle.fire-pulse {
  animation: fire-pulse-anim 0.35s ease-in-out infinite;
  border-color: var(--accent-signal-mark);
  font-size: 11px;
  padding: 0 22px;
}

/* morning, fire and reset all sit on dawn -- the session owns its time of day,
   so there is no day/night twin of a player. Each keeps its own signal colour. */
/* LOCKED: a session owns its time of day. These values are literal on purpose --
   never var(--bg-app), which flips with the device theme. Each light session also
   carries its own tint: morning dawn, fire warm, reset cool. */
.player-overlay.palette-fire{ background:linear-gradient(168deg,#FFF6F0 0%,#FBEDE8 46%,#F6E6F2 100%); }
.player-overlay.palette-calm{ background:linear-gradient(168deg,#FFF6F0 0%,#EEF1FA 48%,#E6ECFB 100%); }
.player-overlay.palette-morning,
.player-overlay.palette-calm,
.player-overlay.palette-fire {
  background-color: #FFF6F0;
  --text-primary: #2E2650;
  --text-secondary: #6E6588;
  --text-muted: #6E6588;
  --accent: #6B3FC4;
  --accent-dark: #4A2E8C;
  --bg-card: rgba(255,255,255,0.72);
  --bg-card-soft: rgba(255,255,255,0.5);
  --border-card: rgba(255,255,255,0.9);
  --border: rgba(46,38,80,0.10);
  --border-strong: rgba(46,38,80,0.16);
  --range-track: rgba(46,38,80,0.12);
  --cta-bg: #2E2650;
  --cta-text: #FFF6F0;
}
.player-overlay.palette-morning{ background:linear-gradient(168deg,#FFF6F0 0%,#F6EDF8 46%,#EDE6FB 100%); }
.player-overlay.palette-fire { --accent: #C2521F; --accent-dark: #942F0D; }
.player-overlay.palette-calm { --accent: #3E7093; --accent-dark: #2C5C78; }

/* Reading order differs per session -- set with flex order so the DOM stays put.
   morning: label, circle, timer, guidance
   fire:    label, line bar, circle, timer
   reset:   label, circle, guidance, timer
   lighthouse / night: focal, label, guidance, line bar, crumb, timer */
.player-body{ display:flex; flex-direction:column; align-items:center; }
.palette-morning .player-phase-label{ order:1 }
.palette-morning .breath-circle{ order:2 }
.palette-morning .player-timer-row{ order:3 }
.palette-morning .player-prompt{ order:4 }
.palette-morning .pl-linebar{ order:5 }
.palette-morning .pl-hint{ order:6 }

.palette-fire .player-phase-label{ order:1 }
.palette-fire .pl-linebar{ order:2 }
.palette-fire .pl-hint{ order:3 }
.palette-fire .breath-circle{ order:4 }
.palette-fire .player-timer-row{ order:5 }
.palette-fire .player-prompt{ order:6 }

.palette-calm .player-phase-label{ order:1 }
.palette-calm .breath-circle{ order:2 }
.palette-calm .player-prompt{ order:3 }
.palette-calm .player-timer-row{ order:4 }
.palette-calm .pl-linebar{ order:5 }
.palette-calm .pl-hint{ order:6 }

.palette-lighthouse #lighthouse-illustration{ order:1 }
.palette-lighthouse .player-phase-label{ order:2 }
.palette-lighthouse .player-prompt{ order:3 }
.palette-lighthouse .pl-linebar{ order:4 }
.palette-lighthouse .pl-hint{ order:5 }
.palette-lighthouse .player-timer-row{ order:6 }

.palette-night .player-phase-label{ order:1 }
.palette-night .breath-circle{ order:2 }
.palette-night .player-prompt{ order:3 }
.palette-night .pl-linebar{ order:4 }
.palette-night .pl-hint{ order:5 }
.palette-night .player-timer-row{ order:6 }
.readalong-note{ order:9 }

/* Lighthouse owns a dusk gradient of its own -- not dawn, not the night palette.
   The base has to stay dark: the tower SVG is #FFFFFF and unlit chakra dots sit at
   opacity .15, both of which disappear on a pastel ground. */
.player-overlay.palette-lighthouse {
  background:
    radial-gradient(circle at 50% 34%, rgba(255,243,214,.5) 0%, rgba(255,243,214,0) 66%),
    linear-gradient(168deg, #FFF6F0 0%, #F6EDF8 46%, #EDE6FB 100%);
  --text-primary: #2E2650;
  --text-secondary: #6E6588;
  --text-muted: #6E6588;
  --accent: #5B4B8A;
  --accent-dark: #4A2E8C;
  --bg-card: rgba(255,255,255,0.72);
  --bg-card-soft: rgba(255,255,255,0.5);
  --border-card: rgba(255,255,255,0.9);
  --border: rgba(46,38,80,0.12);
  --border-strong: rgba(46,38,80,0.16);
  --range-track: rgba(46,38,80,0.12);
  --cta-bg: #2E2650;
  --cta-text: #FFF6F0;
}




/* Session picker */
.session-type-card {
  background: var(--bg-card-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 10px;
  cursor: pointer;
}
.session-type-card:first-of-type { margin-top: 4px; }

.player-phase-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase;
}
.player-timer {
  font-family: var(--font-mono); font-size: 32px; color: var(--text-primary); font-weight: 700;
}
.player-prompt {
  font-size: 16px; color: var(--text-primary); line-height: 1.6; max-width: 320px;
}
.player-anchor {
  font-size: 22px; font-weight: 600; color: var(--accent-dark);
}
.player-emotions {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}

.player-footer {
  display: flex; gap: 10px; padding-top: 20px;
}

/* Journal */
.state-slider-wrap { margin: 16px 0; }
input[type="range"] {
  width: 100%; accent-color: var(--accent); height: 4px;
}
.slider-labels {
  display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted);
  font-family: var(--font-mono); margin-top: 4px;
}

.entry-item {
  border-bottom: 0.5px solid var(--border);
  padding: 14px 0;
}
.entry-item:last-child { border-bottom: none; }
.entry-top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.entry-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.entry-score {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--bg-card-soft); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 2px 7px;
}
.entry-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.entry-sign {
  font-size: 12px; color: var(--accent-signal); margin-top: 4px;
}

.tab-row { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-btn {
  font-family: var(--font-mono); font-size: 11px; padding: 7px 12px;
  border-radius: 8px; border: 1px solid var(--border-strong); color: var(--text-secondary);
  flex-shrink: 0; white-space: nowrap;
}
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.entry-delete-btn {
  font-size: 15px; color: var(--text-muted); line-height: 1; padding: 2px 4px;
}
.entry-delete-btn:active { color: var(--danger); }

.chart-wrap { margin: 4px 0 4px; }

.empty-state {
  text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px;
}

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(46, 38, 80, 0.35);
  display: none; align-items: flex-end; justify-content: center; z-index: 200;
}
.modal-overlay.active { display: flex; }
.modal-sheet {
  background: var(--bg-page); width: 100%; max-width: 480px;
  border-radius: 24px 24px 0 0; padding: 24px 20px calc(24px + var(--safe-bottom));
  max-height: 85vh; overflow-y: auto;
}

/* Settings */
.settings-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 0.5px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row .label { font-size: 14px; color: var(--text-primary); }
.settings-row .value { font-size: 13px; color: var(--text-muted); }

.toast {
  position: fixed; bottom: calc(90px + var(--safe-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--text-primary); color: #fff; font-size: 13px;
  padding: 10px 18px; border-radius: 20px; z-index: 300;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.toast.show { opacity: 1; }

/* Future self card */
.future-self-card {
  margin-top: 12px;
  background: var(--bg-card-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.future-self-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  margin-top: 6px;
  font-family: var(--font-voice, var(--font-sans));
  font-style: italic;
}

/* Celebration overlays */
.celebration-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: linear-gradient(168deg,#FFF6F0 0%,#F6EDF8 46%,#EDE6FB 100%);
  display: none; align-items: center; justify-content: center;
  flex-direction: column;
}
.celebration-overlay.active { display: flex; }
#burst-canvas, #milestone-burst-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.celebration-content {
  position: relative; z-index: 2;
  text-align: center; padding: 0 32px;
  display: flex; flex-direction: column; align-items: center;
}
.celebration-symbol {
  display: flex; justify-content: center; margin-bottom: 16px;
  animation: pop-in 0.5s ease;
}
@keyframes pop-in {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.celebration-line {
  font-size: 20px; font-weight: 600; color: var(--text-primary);
}
.celebration-sub {
  font-size: 13px; color: var(--text-secondary); margin-top: 8px; max-width: 280px;
}

/* Proof wall */
.proof-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.proof-tile {
  background: var(--bg-card-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.proof-tile .entry-date { display: block; margin-bottom: 6px; }
.proof-tile .entry-sign { margin-top: 0; font-size: 13px; color: var(--text-primary); }

/* Recap card */
.recap-card {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 18px 16px;
}
.recap-title {
  font-size: 17px; font-weight: 600; color: var(--text-primary); margin-top: 6px;
}
.recap-stats {
  display: flex; gap: 16px; margin-top: 12px;
}
.recap-stat { font-family: var(--font-mono); }
.recap-stat .n { font-size: 20px; color: var(--accent); font-weight: 700; }
.recap-stat .l { font-size: 10px; color: var(--text-muted); display: block; }

::-webkit-scrollbar { display: none; }

/* Home screen guided tour */
.tour-overlay {
  position: fixed; inset: 0; z-index: 350;
  display: none;
  pointer-events: none;
}
.tour-overlay.active { display: block; }

.spotlight-ring {
  position: fixed;
  border-radius: 18px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(46,38,80,0.6);
  pointer-events: none;
  transition: top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
  z-index: 351;
}

.tour-bubble {
  position: fixed;
  z-index: 352;
  width: min(280px, calc(100vw - 40px));
  background: var(--bg-card);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(46,38,80,0.3);
  transition: top 0.35s ease, left 0.35s ease;
  pointer-events: auto;
}
.tour-bubble-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tour-step-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.tour-bubble-text { font-size: 14px; line-height: 1.5; color: var(--text-primary); min-height: 42px; }
.tour-bubble-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.tour-skip { font-size: 12px; color: var(--text-secondary); }
.tour-next {
  font-size: 12px; font-weight: 600; color: #fff; background: var(--accent);
  padding: 7px 14px; border-radius: 8px;
}

/* Explainer overlay — Spark-narrated slide carousel */
.explainer-overlay {
  position: fixed; inset: 0; background: var(--bg-app); z-index: 400;
  display: none; flex-direction: column;
  padding: 0;
}
.explainer-overlay.active { display: flex; }
.spark-character {
  position: relative;
  display: inline-block;
}
.spark-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  animation: spark-breathe 4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes spark-breathe {
  0%, 100% { transform: scale(0.94); }
  50% { transform: scale(1.05); }
}
.spark-dot {
  position: absolute;
  width: 14%; height: 14%;
  border-radius: 50%;
  background: var(--accent-signal-mark);
  animation: spark-materialize 4s ease-in-out infinite;
}
.spark-dot.sd1 { top: 6%; left: 2%; animation-delay: 0s; }
.spark-dot.sd2 { top: 30%; right: -6%; animation-delay: 1s; }
.spark-dot.sd3 { top: 22%; right: -2%; width: 10%; height: 10%; animation-delay: 2s; }
.spark-dot.sd4 { bottom: 20%; left: -4%; width: 11%; height: 11%; animation-delay: 3s; }
@keyframes spark-materialize {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 0.9; transform: scale(1); }
}

.explainer-slides {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
/* Journal prompt card */
.prompt-card {
  background: var(--bg-card-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 16px;
}
.prompt-text {
  font-size: 14px; color: var(--text-primary); line-height: 1.5;
  margin-top: 6px; font-style: italic;
}
.prompt-cta {
  font-family: var(--font-mono); font-size: 11px; color: var(--accent);
  margin-top: 10px;
}

/* Voice recorder */
.voice-recorder { text-align: center; }
.voice-timer {
  font-family: var(--font-mono); font-size: 28px; color: var(--text-primary);
}
#voice-record-btn.recording {
  background: var(--danger); color: #fff; border-color: var(--danger);
}

/* ---- first-launch scene: DAY (dawn) is the base, night is the dark theme ---- */
/* One markup, one layout. Only surface + text colours change between themes, which
   is why the day/night decorations both live in the DOM and are toggled here. */
.intro-scene{
  position:relative; overflow:hidden;
  min-height:100%; box-sizing:border-box;
  /* NO display here -- `.screen{display:none}` must still win when inactive.
     The flex layout comes from `.screen.intro-scene.active` below. */
  flex-direction:column;
  padding:max(calc(var(--safe-top) + 24px), 52px) 26px max(calc(var(--safe-bottom) + 24px), 30px);
  /* the launch screen now has BOTH a dawn and a night variant (handoff 41a / 41b).
     Day is the default; the night lab is applied under [data-theme="dark"] below. */
  background:linear-gradient(168deg,#FFF6F0 0%,#F6EDF8 46%,#EDE6FB 100%);
}
.intro-scene > *:not(.in-stars):not(.in-glow):not(.in-bloom){ position:relative; }

/* day decorations */
.intro-scene .in-bloom{ position:absolute; width:420px; height:420px; pointer-events:none; }
.intro-scene .in-bloom-warm{
  left:-20%; top:60px;
  background:radial-gradient(circle,rgba(242,117,74,.16) 0%,rgba(242,117,74,0) 68%);
}
.intro-scene .in-bloom-cool{
  right:-25%; top:220px;
  background:radial-gradient(circle,rgba(136,88,224,.16) 0%,rgba(136,88,224,0) 68%);
}
/* night decorations -- hidden by default, shown in the dark theme */
.intro-scene .in-stars, .intro-scene .in-glow{ display:none; }

.in-eyebrow{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#6E6588;
}
.in-body{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:26px; }

.in-spark-wrap{ position:relative; align-self:center; }
.in-spark-halo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:210px; height:210px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 70%);
}

.in-h1{
  margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:38px; line-height:1.12; letter-spacing:-.02em; color:#2E2650;
}
.in-h1 strong{ font-weight:700; }
.in-lead{
  margin:14px 0 0; max-width:290px;
  font-size:14.5px; line-height:1.6; color:#6E6588; text-wrap:pretty;
}
.in-def{
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  border-radius:18px; padding:16px 18px; backdrop-filter:blur(14px);
  box-shadow:0 16px 34px -24px rgba(46,38,80,.45);
}
.in-def-head{ font-family:var(--font-mono); font-weight:700; font-size:15px; color:#2E2650; }
.in-def-head span{ font-weight:400; font-size:10px; color:#6B3FC4; }
.in-def-body{ font-size:12.5px; line-height:1.6; color:#6E6588; margin-top:8px; }

.in-foot{ display:flex; flex-direction:column; gap:14px; }
.in-cta{
  width:100%; border:none; border-radius:100px; padding:18px;
  background:#2E2650; color:#FFF6F0;
  font-family:var(--font-sans); font-weight:600; font-size:15px; cursor:pointer;
  box-shadow:0 14px 30px -16px rgba(46,38,80,.8);
  transition:background .18s, transform .15s;
}
.in-cta:active{ transform:scale(.98); }
.in-login{
  text-align:center; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.04em; color:#6E6588;
}
.in-login span{ color:#2E2650; text-decoration:underline; cursor:pointer; }

/* ---- first-launch scene: NIGHT (dark theme only) ----
   Every rule below is scoped to [data-theme="dark"]. Unscoped, they made the
   launch screen night-only and there was no way to add the dawn variant. */
[data-theme="dark"] .intro-scene{
  background:linear-gradient(168deg,#6B3FC4 0%,#4A2E8C 52%,#241847 100%);
}
[data-theme="dark"] .intro-scene .in-bloom{ display:none; }
[data-theme="dark"] .intro-scene .in-stars{
  display:block; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:46px 62px;
  animation:in-twinkle 7s ease-in-out infinite;
}
[data-theme="dark"] .intro-scene .in-glow{
  display:block; position:absolute; left:50%; top:130px; width:440px; height:440px;
  transform:translateX(-50%); filter:blur(6px); pointer-events:none;
  background:radial-gradient(circle,rgba(179,157,238,.55) 0%,rgba(179,157,238,0) 65%);
}
[data-theme="dark"] .intro-scene .in-spark-halo{ display:none; }
[data-theme="dark"] .in-eyebrow{ color:rgba(237,234,247,.55); }
[data-theme="dark"] .intro-scene .in-h1{ color:#fff; }
[data-theme="dark"] .intro-scene .in-lead{ color:rgba(237,234,247,.72); }
[data-theme="dark"] .intro-scene .in-def{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18); box-shadow:none;
}
[data-theme="dark"] .intro-scene .in-def-head{ color:#fff; }
[data-theme="dark"] .intro-scene .in-def-head span{ color:#F2916A; }
[data-theme="dark"] .intro-scene .in-def-body{ color:rgba(237,234,247,.78); }
[data-theme="dark"] .intro-scene .in-cta{
  background:#fff; color:#3A2470; box-shadow:0 12px 30px -14px rgba(0,0,0,.7);
}
[data-theme="dark"] .intro-scene .in-login{ color:rgba(237,234,247,.6); }
[data-theme="dark"] .intro-scene .in-login span{ color:#fff; }

/* Spark hero: theme-independent, defined once. Wrapper MUST keep the art ratio. */
/* aspect-ratio and the lid percentages below are tuned to assets/spark-3d.png.
   The lids are a visual trick -- two lens-coloured ellipses that flash to fake a
   blink -- so they are measured against one exact image and do NOT survive an
   asset swap without re-measuring. Values here come from the 3D render's real
   lens centres (29.0% / 71.1% across, 61.3% down, 24.1% wide). */
.spark-blink{
  position:relative; height:170px; aspect-ratio:1241 / 1754;
  /* NOTE: no width here on purpose. Setting width alongside aspect-ratio makes
     the ratio inert, which broke the 52px header Spark (it stayed 120px wide and
     pushed the streak and gear off a 320px screen). The old-iOS fallback lives in
     the @supports block at the end of this file instead. */
  /* NO drop-shadow in light mode: the clay render already carries its own baked
     contact shadow, and the old CSS one (tuned for the flat cutout) stacked on
     top of it and made Spark look heavy. Dark mode keeps a glow, which is a
     light source rather than a second shadow, so it doesn't double up. */
  animation:in-breathe 6s ease-in-out infinite;
}
[data-theme="dark"] .spark-blink{ filter:drop-shadow(0 0 34px rgba(196,175,255,.6)); }
.spark-blink img{ width:100%; height:100%; object-fit:contain; display:block; }
/* The idle blink is back to the lid overlay. The frame-swap version was a hard
   cut between two rendered images, which read as a flicker rather than an eyelid.
   These ellipses fade on an eased curve, so the blink is soft. Geometry is
   measured against assets/spark-3d.png's real lens centres. */
.spark-blink .sb-lid{
  position:absolute; top:55.3%; width:18%; height:12%;
  background:#9658F2; border-radius:50%;
  animation:in-blink 5.4s ease-in-out infinite;
}
.spark-blink .sb-lid-l{ left:20%; }
.spark-blink .sb-lid-r{ left:62.1%; }
.spark-blink .sb-lid i{
  position:absolute; left:0; right:0; top:44%;
  height:14%; min-height:2px; background:#3E1B8C; border-radius:2px;
}

@keyframes in-breathe{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-5px) scale(1.03)} }
@keyframes in-blink{ 0%,93.4%,100%{opacity:0} 94.6%,97.4%{opacity:1} }
@keyframes in-twinkle{ 0%,100%{opacity:.25} 50%{opacity:.9} }

@media (prefers-reduced-motion:reduce){
  .spark-blink,.spark-blink .sb-lid,
  .intro-scene .in-stars,
  [data-theme="dark"] .intro-scene .in-stars{ animation:none; }
  .spark-blink .sb-lid{ opacity:0; }
}

/* ---- explainer: 3-slide carousel (day) ---- */
/* NOTE: flex-basis + scroll-snap-align are additions to the handoff -- .ex-slide sits
   inside the existing flex/scroll-snap carousel, so without them it collapses to
   content width and stops snapping. height:100% replaces min-height:100vh for the
   same reason the app body uses dvh: 100vh overflows under mobile browser chrome. */
.ex-slide{
  position:relative; overflow:hidden;
  flex:0 0 100%; scroll-snap-align:center;
  height:100%; box-sizing:border-box;
  display:flex; flex-direction:column;
  padding:max(calc(var(--safe-top) + 24px), 52px) 0 max(calc(var(--safe-bottom) + 24px), 30px);
  background:var(--bg-app);
}
.ex-slide::before{ /* warm bloom; slides 01/02 left, 03 right */
  content:''; position:absolute; left:-18%; top:70px; width:400px; height:400px;
  pointer-events:none;
  background:radial-gradient(circle,rgba(242,117,74,.13) 0%,rgba(242,117,74,0) 68%);
}
.ex-slide--reps::before{
  left:auto; right:-22%; top:auto; bottom:120px;
  background:radial-gradient(circle,rgba(136,88,224,.14) 0%,rgba(136,88,224,0) 68%);
}
.ex-slide > *{ position:relative; }

.ex-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 26px 12px; border-bottom:1px solid rgba(46,38,80,.1);
}
.ex-crumb{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#6E6588;
}
/* back arrow: kept in the layout even on slide 01 (visibility, not display) so the
   crumb doesn't jump sideways between slides */
.ex-back{
  font-family:var(--font-sans); font-size:17px; line-height:1;
  color:#2E2650; cursor:pointer; padding:2px 8px 2px 0; margin-left:-2px;
  background:none; border:none;
}
.ex-back.is-hidden{ visibility:hidden; pointer-events:none; }
.ex-skip{ font-size:12px; font-weight:500; color:#2E2650; cursor:pointer; }

.ex-body{ flex:1; display:flex; flex-direction:column; padding:0 26px; }
.ex-spark{ display:flex; justify-content:center; padding:30px 0 26px; }
.ex-slide--reps .ex-spark{ padding:26px 0 22px; }

.ex-h2{
  margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:29px; line-height:1.24; letter-spacing:-.025em;
  color:#2E2650; text-wrap:pretty;
}
.ex-h2 strong{ font-weight:700; }
.ex-slide--reps .ex-h2{ font-size:30px; line-height:1.22; }
.ex-rule{ height:1px; background:rgba(46,38,80,.12); margin:22px 0 18px; }
.ex-p{ margin:0; font-size:13.5px; line-height:1.7; color:#6E6588; text-wrap:pretty; }

/* slide 01 — traveling signal, 6s breath clock */
.ex-signal{ margin-top:34px; }
.ex-signal-labels{
  display:flex; justify-content:space-between; margin-bottom:12px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#6E6588;
}
.ex-signal-labels .is-end{ color:#6B3FC4; }
.ex-track{ position:relative; height:26px; }
.ex-track-dashes{
  position:absolute; left:0; right:0; top:11px; height:2px;
  background:repeating-linear-gradient(90deg,#CFC2F2 0 6px,transparent 6px 12px);
}
.ex-track-fill{
  position:absolute; left:0; top:11px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#8858E0,#6B3FC4);
  animation:ex-fillline 6s cubic-bezier(.4,.7,.3,1) infinite;
}
.ex-track-dot{
  position:absolute; top:3px; width:18px; height:18px; margin-left:-9px;
  border-radius:50%; background:#F2754A; box-shadow:0 0 0 6px rgba(242,117,74,.16);
  animation:ex-travel 6s cubic-bezier(.4,.7,.3,1) infinite;
}
@keyframes ex-travel{ 0%,8%{left:0%} 92%,100%{left:100%} }
@keyframes ex-fillline{ 0%,8%{width:0%} 92%,100%{width:100%} }

/* slide 02 — numbered method lines, staggered once */
.ex-steps{ margin-top:18px; display:flex; flex-direction:column; }
.ex-step{
  display:flex; align-items:baseline; gap:14px; padding:13px 0;
  border-top:1px solid rgba(46,38,80,.12);
}
.ex-step:last-child{ border-bottom:1px solid rgba(46,38,80,.12); }
.ex-step-n{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:#8858E0;
}
.ex-step-w{
  font-family:var(--font-sans); font-weight:700; font-size:25px; line-height:1;
  letter-spacing:-.02em; color:#2E2650;
}
.ex-p--late{ margin-top:22px; }

/* slide 03 — ghost repeats */
.ex-ghosts{ margin-top:6px; display:flex; flex-direction:column; gap:2px; }
.ex-ghost-solid,
.ex-ghost span{
  display:block; font-family:var(--font-sans); font-weight:700;
  font-size:46px; line-height:1; letter-spacing:-.035em;
}
.ex-ghost-solid{ color:#2E2650; }
.ex-ghost span{ color:#6B3FC4; opacity:var(--go); }

/* NOTE: addition to the handoff. All three slides are built at once, so an
   unscoped one-shot animation would burn off while its slide is still off-screen
   and the reveal would be over before you ever swiped to it. Gate on .is-active. */
.ex-step, .ex-p--late, .ex-ghost{ opacity:0; }
.ex-slide.is-active .ex-step{ animation:ex-fade .7s ease both; }
.ex-slide.is-active .ex-step:nth-child(1){ animation-delay:.30s }
.ex-slide.is-active .ex-step:nth-child(2){ animation-delay:.75s }
.ex-slide.is-active .ex-step:nth-child(3){ animation-delay:1.20s }
.ex-slide.is-active .ex-p--late{ animation:ex-fade .8s ease 1.6s both; }
.ex-slide.is-active .ex-ghost{ animation:ex-fade .9s ease var(--gd) both; }

.ex-foot{ padding:0 26px; display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.ex-segs{ display:flex; gap:8px; }
.ex-segs span{ flex:1; height:3px; border-radius:2px; background:#DCD2F4; transition:background .3s; }
.ex-segs span.is-on{ background:#2E2650; }
.ex-cta{
  width:100%; border:none; border-radius:100px; padding:18px;
  background:#2E2650; color:#FFF6F0;
  font-family:var(--font-sans); font-weight:600; font-size:15px; cursor:pointer;
  box-shadow:0 14px 30px -16px rgba(46,38,80,.8);
  transition:background .18s, transform .15s;
}
.ex-cta:active{ transform:scale(.98); }

/* small Spark: blink only, no breathing (breathing belongs to the launch screen) */
.spark-blink--sm{ height:96px; animation:none; filter:drop-shadow(0 16px 26px rgba(46,38,80,.14)); }
.ex-slide--reps .spark-blink--sm{ height:82px; }
.spark-blink--sm .sb-lid{ animation:ex-slowblink 10s ease-in-out infinite; }
@keyframes ex-slowblink{ 0%,96.6%,100%{opacity:0} 97.6%,99%{opacity:1} }
@keyframes ex-fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ---- explainer: night theme — same DOM, colors only ---- */
[data-theme="dark"] .ex-slide::before,
[data-theme="dark"] .ex-slide--reps::before{
  left:0; right:auto; top:0; bottom:auto; width:100%; height:100%;
  background-image:radial-gradient(rgba(255,255,255,.32) 1px,transparent 1px);
  background-size:46px 62px; background-repeat:repeat; opacity:.45;
  animation:ex-twinkle 8s ease-in-out infinite;
}
@keyframes ex-twinkle{ 0%,100%{opacity:.25} 50%{opacity:.55} }

[data-theme="dark"] .ex-head{ border-bottom-color:rgba(255,255,255,.16); }
[data-theme="dark"] .ex-crumb{ color:rgba(237,234,247,.62); }
[data-theme="dark"] .ex-skip{ color:rgba(237,234,247,.85); }
[data-theme="dark"] .ex-back{ color:rgba(237,234,247,.85); }
[data-theme="dark"] .ex-h2{ color:#fff; }
[data-theme="dark"] .ex-rule{ background:rgba(255,255,255,.18); }
[data-theme="dark"] .ex-p{ color:rgba(237,234,247,.72); }

/* 01 */
[data-theme="dark"] .ex-signal-labels{ color:rgba(237,234,247,.6); }
[data-theme="dark"] .ex-signal-labels .is-end{ color:#D3C4FF; }
[data-theme="dark"] .ex-track-dashes{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 6px,transparent 6px 12px);
}
[data-theme="dark"] .ex-track-fill{ background:linear-gradient(90deg,#B39DEE,#fff); }
[data-theme="dark"] .ex-track-dot{ background:#D3C4FF; box-shadow:0 0 18px 6px rgba(179,157,238,.45); }

/* 02 */
[data-theme="dark"] .ex-step{ border-top-color:rgba(255,255,255,.18); }
[data-theme="dark"] .ex-step:last-child{ border-bottom-color:rgba(255,255,255,.18); }
[data-theme="dark"] .ex-step-n{ color:#C4AFFF; }
[data-theme="dark"] .ex-step-w{ color:#fff; }

/* 03 */
[data-theme="dark"] .ex-ghost-solid{ color:#fff; }
[data-theme="dark"] .ex-ghost span{ color:#D3C4FF; }

/* chrome */
[data-theme="dark"] .ex-segs span{ background:rgba(255,255,255,.28); }
[data-theme="dark"] .ex-segs span.is-on{ background:#fff; }
[data-theme="dark"] .ex-cta{
  background:#fff; color:#3A2470; box-shadow:0 12px 30px -14px rgba(0,0,0,.7);
}
[data-theme="dark"] .spark-blink--sm{ filter:drop-shadow(0 0 32px rgba(196,175,255,.8)); }

/* ---- explainer: reduced motion ---- */
/* NOTE: selectors mirror the .is-active gating above, otherwise the gated rules
   out-specify these and the animations survive the media query. */
@media (prefers-reduced-motion:reduce){
  .ex-track-fill{ animation:none; width:100%; }
  .ex-track-dot{ animation:none; left:100%; }
  .ex-step, .ex-p--late, .ex-ghost,
  .ex-slide.is-active .ex-step,
  .ex-slide.is-active .ex-p--late,
  .ex-slide.is-active .ex-ghost{ animation:none; opacity:1; transform:none; }
  .ex-ghost span{ opacity:var(--go); }
  .ex-slide::before,
  [data-theme="dark"] .ex-slide::before,
  [data-theme="dark"] .ex-slide--reps::before{ animation:none; }
  .spark-blink--sm .sb-lid{ animation:none; opacity:0; }
}

/* ---- onboarding shell (day) ---- */
/* NOTE: `.screen.active{display:block}` out-specifies a bare `.ob`, so the shell is
   scoped `.screen.ob.active` — the launch scene needs the same treatment. */
.screen.ob.active, .screen.intro-scene.active{ display:flex; }
.ob{
  position:relative; overflow:hidden;
  min-height:100%; box-sizing:border-box;
  flex-direction:column;
  padding:max(calc(var(--safe-top) + 24px), 52px) 0 max(calc(var(--safe-bottom) + 24px), 30px);
  background:var(--bg-app);
}
.ob::before{
  content:''; position:absolute; left:-18%; top:70px; width:400px; height:400px;
  pointer-events:none;
  background:radial-gradient(circle,rgba(242,117,74,.13) 0%,rgba(242,117,74,0) 68%);
}
.ob--alt::before{
  left:auto; right:-22%; top:170px;
  background:radial-gradient(circle,rgba(136,88,224,.14) 0%,rgba(136,88,224,0) 68%);
}
.ob > *{ position:relative; }

.ob-crumbrow{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 26px 12px; border-bottom:1px solid rgba(46,38,80,.1);
  flex-shrink:0;
}
.ob-crumb{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#6E6588;
}

/* NOTE: addition to the handoff. `.ob` sets overflow:hidden to clip the bloom, which
   also kills the scroll `.screen` normally provides. Step 1 and step 3 are taller than
   a small phone, so the body scrolls internally instead — this also keeps the crumb
   row and the footer buttons pinned, which is better than scrolling them away. */
.ob-body{
  flex:1; display:flex; flex-direction:column; padding:0 26px;
  min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
}

/* companion Spark + headline */
.ob-head{ display:flex; align-items:center; gap:14px; padding:22px 0 18px; flex-shrink:0; }
.ob-h2{
  margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:26px; line-height:1.24; letter-spacing:-.025em;
  color:#2E2650; text-wrap:pretty;
}
.ob-h2 strong{ font-weight:700; }
.spark-blink--co{
  height:60px; animation:none;
  filter:drop-shadow(0 12px 20px rgba(46,38,80,.14));
  flex:none;
}
.spark-blink--co .sb-lid{ animation:ob-slowblink 10s ease-in-out infinite; }
@keyframes ob-slowblink{ 0%,96.6%,100%{opacity:0} 97.6%,99%{opacity:1} }

.ob-lead{ margin:0; font-size:13.5px; line-height:1.7; color:#6E6588; text-wrap:pretty; }
.ob-label{
  font-family:var(--font-mono); font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:#2E2650;
}
.ob-hint{ margin:8px 0 0; font-size:12.5px; line-height:1.6; color:#6E6588; text-wrap:pretty; }
.ob-rule{ height:1px; background:rgba(46,38,80,.12); margin:24px 0 18px; flex-shrink:0; }

/* the brief note used on step 2 */
.ob-note{
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  border-radius:16px; padding:14px 16px; flex-shrink:0;
  box-shadow:0 14px 30px -24px rgba(46,38,80,.45);
}
.ob-note p{ margin:0; font-size:12.5px; line-height:1.65; color:#6E6588; text-wrap:pretty; }
.ob-note strong{ font-weight:700; color:#2E2650; }

/* fields */
.ob-input, .ob-textarea{
  width:100%; box-sizing:border-box; flex-shrink:0;
  border:1px solid rgba(46,38,80,.16); background:rgba(255,255,255,.72);
  border-radius:14px; padding:17px 16px;
  font-family:var(--font-sans); font-size:16px; color:#2E2650; outline:none;
}
.ob-textarea{
  flex:1; min-height:150px; resize:none; border-radius:16px; padding:16px;
  font-size:14.5px; line-height:1.65;
}
.ob-input--sm{ padding:14px 16px; font-size:13.5px; background:rgba(255,255,255,.66); }
.ob-input:focus, .ob-textarea:focus{ border-color:#8858E0; background:#fff; }
.ob input::placeholder, .ob textarea::placeholder{ color:#6E6588; opacity:1; }

/* emotion chips (step 1) */
.ob-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; flex-shrink:0; }
.ob-chip{
  border-radius:100px; padding:10px 15px;
  font-family:var(--font-sans); font-weight:500; font-size:13px; cursor:pointer;
  background:rgba(255,255,255,.66); color:#2E2650; border:1px solid rgba(46,38,80,.14);
  transition:background .16s, color .16s, border-color .16s;
}
.ob-chip.selected{ background:#8858E0; color:#fff; border-color:#8858E0; }

/* symbol tiles (step 3) — 4 columns; 8 in one row cannot clear the 44px target */
.ob-syms{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:12px; flex-shrink:0; }
.ob-sym{
  min-height:52px; border-radius:14px;
  font-family:var(--font-sans); font-size:21px; cursor:pointer;
  background:transparent; color:#6E6588; border:1px solid rgba(46,38,80,.16);
  transition:background .16s, color .16s, border-color .16s;
}
.ob-sym.selected{ background:#2E2650; color:#FFF6F0; border-color:#2E2650; }

/* the live anchor card (step 3) */
.ob-anchor-card{
  background:#2E2650; border-radius:22px; padding:24px 22px; flex-shrink:0;
  box-shadow:0 24px 44px -28px rgba(46,38,80,.8);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.ob-anchor-sym{ font-family:var(--font-sans); font-size:40px; line-height:1; color:#C4AFFF; }
.ob-anchor-text{
  font-family:var(--font-sans); font-weight:600; font-size:21px; line-height:1.3;
  color:#FFF6F0; text-align:center; text-wrap:pretty;
}

/* footer */
.ob-foot{ padding:0 26px; display:flex; flex-direction:column; gap:16px; margin-top:18px; flex-shrink:0; }
.ob-segs{ display:flex; gap:8px; }
.ob-segs span{ flex:1; height:3px; border-radius:2px; background:#DCD2F4; }
.ob-segs span.is-on{ background:#2E2650; }
.ob-nav{ display:flex; gap:12px; align-items:center; }
.ob-back{
  border:1px solid rgba(46,38,80,.18); background:transparent; border-radius:100px;
  padding:17px 24px; color:#6E6588;
  font-family:var(--font-sans); font-weight:600; font-size:14px; cursor:pointer;
  transition:background .18s;
}
.ob-back:hover{ background:rgba(46,38,80,.06); }
.ob-next{
  flex:1; border:none; border-radius:100px; padding:18px;
  background:rgba(46,38,80,.28); color:#FFF6F0;
  font-family:var(--font-sans); font-weight:600; font-size:15px; cursor:pointer;
  transition:background .2s, transform .15s;
}
.ob-next.is-ready{ background:#2E2650; }
.ob-next:active{ transform:scale(.98); }
.ob-next--full{ flex:none; width:100%; }

/* account extras */
.ob-or{ display:flex; align-items:center; gap:10px; margin:20px 0; flex-shrink:0; }
.ob-or span:first-child, .ob-or span:last-child{ flex:1; height:1px; background:rgba(46,38,80,.14); }
.ob-or em{ font-family:var(--font-mono); font-style:normal; font-size:11px; color:#6E6588; }
.ob-provider{
  width:100%; border:1px solid rgba(46,38,80,.18); border-radius:100px; padding:16px;
  background:rgba(255,255,255,.72); color:#2E2650; flex-shrink:0;
  font-family:var(--font-sans); font-weight:600; font-size:14.5px; cursor:pointer;
  transition:background .18s;
}
.ob-provider:hover{ background:#fff; }
/* an escape hatch on every onboarding step -- someone who already has an account
   should never have to redo onboarding to reach the login screen */
.ob-login{ margin-top:14px; text-align:center; font-size:12px; color:#6E6588; }
.ob-login span{ color:#6B3FC4; font-weight:600; cursor:pointer;
  text-decoration:underline; padding:8px 4px; display:inline-block; }
[data-theme="dark"] .ob-login{ color:rgba(237,234,247,.72); }
[data-theme="dark"] .ob-login span{ color:#C4AFFF; }

.ob-links{ padding:16px 26px 0; display:flex; flex-direction:column; gap:8px; align-items:center; flex-shrink:0; }
.ob-links span{ font-size:12px; color:#6E6588; cursor:pointer; }
.ob-links b{ color:#6B3FC4; font-weight:600; }
.ob-forgot{ text-align:right; font-size:12px; color:#6E6588; margin:8px 0 0; cursor:pointer; }
[data-theme="dark"] .ob-forgot{ color:rgba(237,234,247,.72); }

/* ---- onboarding: night theme — same DOM, colors only ---- */
[data-theme="dark"] .ob::before,
[data-theme="dark"] .ob--alt::before{
  left:0; right:auto; top:0; width:100%; height:100%;
  background-image:radial-gradient(rgba(255,255,255,.32) 1px,transparent 1px);
  background-size:46px 62px; opacity:.4;
  animation:ob-twinkle 8s ease-in-out infinite;
}
@keyframes ob-twinkle{ 0%,100%{opacity:.25} 50%{opacity:.5} }

[data-theme="dark"] .ob-crumbrow{ border-bottom-color:rgba(255,255,255,.16); }
[data-theme="dark"] .ob-crumb{ color:rgba(237,234,247,.62); }
[data-theme="dark"] .ob-h2{ color:#fff; }
[data-theme="dark"] .ob-lead, [data-theme="dark"] .ob-hint{ color:rgba(237,234,247,.72); }
[data-theme="dark"] .ob-label{ color:#fff; }
[data-theme="dark"] .ob-rule{ background:rgba(255,255,255,.18); }
[data-theme="dark"] .spark-blink--co{ filter:drop-shadow(0 0 26px rgba(196,175,255,.75)); }

[data-theme="dark"] .ob-note{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(12px); box-shadow:none;
}
[data-theme="dark"] .ob-note p{ color:rgba(237,234,247,.76); }
[data-theme="dark"] .ob-note strong{ color:#fff; }

[data-theme="dark"] .ob-input, [data-theme="dark"] .ob-textarea{
  border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.10); color:#fff;
}
[data-theme="dark"] .ob-input--sm{ border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.08); }
[data-theme="dark"] .ob-input:focus, [data-theme="dark"] .ob-textarea:focus{
  border-color:#D3C4FF; background:rgba(255,255,255,.16);
}
[data-theme="dark"] .ob input::placeholder,
[data-theme="dark"] .ob textarea::placeholder{ color:rgba(237,234,247,.72); opacity:1; }

[data-theme="dark"] .ob-chip{
  background:rgba(255,255,255,.10); color:#EDEAF7; border-color:rgba(255,255,255,.24);
}
[data-theme="dark"] .ob-chip.selected{ background:#fff; color:#3A2470; border-color:#fff; }

[data-theme="dark"] .ob-sym{
  background:rgba(255,255,255,.10); color:rgba(237,234,247,.85); border-color:rgba(255,255,255,.24);
}
[data-theme="dark"] .ob-sym.selected{ background:#fff; color:#3A2470; border-color:#fff; }

/* card stays DARK at night on purpose: the meditation player is dark too,
   so the preview keeps telling the truth about where the phrase appears */
[data-theme="dark"] .ob-anchor-card{
  background:#1E1240; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 44px -28px rgba(0,0,0,.9);
}
[data-theme="dark"] .ob-anchor-text{ color:#fff; }

[data-theme="dark"] .ob-segs span{ background:rgba(255,255,255,.28); }
[data-theme="dark"] .ob-segs span.is-on{ background:#fff; }
[data-theme="dark"] .ob-back{ border-color:rgba(255,255,255,.3); color:rgba(237,234,247,.85); }
[data-theme="dark"] .ob-back:hover{ background:rgba(255,255,255,.12); }
[data-theme="dark"] .ob-next{ background:rgba(255,255,255,.30); color:rgba(255,255,255,.75); }
[data-theme="dark"] .ob-next.is-ready{ background:#fff; color:#3A2470; }

[data-theme="dark"] .ob-or span:first-child,
[data-theme="dark"] .ob-or span:last-child{ background:rgba(255,255,255,.2); }
[data-theme="dark"] .ob-or em{ color:rgba(237,234,247,.7); }
[data-theme="dark"] .ob-provider{
  border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.10); color:#fff;
}
[data-theme="dark"] .ob-provider:hover{ background:rgba(255,255,255,.2); }
[data-theme="dark"] .ob-links span{ color:rgba(237,234,247,.72); }
[data-theme="dark"] .ob-links b{ color:#fff; }

@media (prefers-reduced-motion:reduce){
  .spark-blink--co .sb-lid, .ob::before,
  [data-theme="dark"] .ob::before,
  [data-theme="dark"] .ob--alt::before{ animation:none; }
  .spark-blink--co .sb-lid{ opacity:0; }
}

/* gate hints: explain why a primary button is still inert */
.ob-gatehint{ margin-top:12px; color:#8858E0; flex-shrink:0; }
[data-theme="dark"] .ob-gatehint{ color:#D3C4FF; }
.ob-gatehint.is-hidden{ display:none; }

/* ---- home scene (day base, night below) ---- */
/* `.screen` stays the scroller here — it already carries the bottom padding that
   clears the tab bar, so this doesn't become its own flex/overflow container. */
.home-scene{
  background:var(--bg-app);
  padding-left:22px; padding-right:22px;
}
.home-scene .hs-bloom{ position:fixed; width:420px; height:420px; pointer-events:none; z-index:0; }
.home-scene .hs-bloom-warm{ left:-24%; top:40px;
  background:radial-gradient(circle,rgba(242,117,74,.14) 0%,rgba(242,117,74,0) 68%); }
.home-scene .hs-bloom-cool{ right:-28%; top:300px;
  background:radial-gradient(circle,rgba(136,88,224,.14) 0%,rgba(136,88,224,0) 68%); }
.home-scene > *:not(.hs-bloom){ position:relative; z-index:1; }

.hs-head{ display:flex; justify-content:space-between; align-items:center; }
.hs-head-right{ display:flex; align-items:center; gap:12px; }
.hs-crumb{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#6E6588;
}
.hs-greet{
  margin:3px 0 0; font-family:var(--font-sans); font-weight:300;
  font-size:24px; line-height:1.2; letter-spacing:-.025em; color:#2E2650;
}
.hs-greet strong{ font-weight:700; }
.hs-streak{
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  border-radius:100px; padding:7px 12px;
  font-family:var(--font-mono); font-weight:700; font-size:12px; color:#2E2650;
}
.hs-streak-dot{ width:7px; height:7px; border-radius:50%; background:#F2754A; flex:none; }

.hs-sec-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#6E6588; margin-top:26px;
}
.hs-sec-sub{ margin:3px 0 14px; font-size:11px; color:#6E6588; }

/* the lab */
.hs-lab{ display:flex; gap:14px; }
.hs-rail{ width:14px; display:flex; flex-direction:column; align-items:center; flex-shrink:0; padding-top:8px; }
.hs-rail-dot{ width:12px; height:12px; border-radius:50%; flex:none; }
.hs-rail-dot.is-done{ background:#4E8C6E; }
.hs-rail-dot.is-live{ background:#F2754A; }
.hs-rail-dot.is-upcoming{ width:11px; height:11px; border:2px solid #C9BEEE; box-sizing:border-box; }
.hs-rail-line{ width:2px; flex:1; margin:5px 0;
  background:repeating-linear-gradient(to bottom,#C9BEEE 0 4px,transparent 4px 8px); }
.hs-lab-cards{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }

.hs-done-row{
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9);
  border-radius:16px; padding:14px 16px; opacity:.8;
}
/* upcoming is an outline, not a filled card -- it hasn't happened yet */
.hs-next-row{
  background:transparent; border:1px dashed rgba(46,38,80,.22);
  border-radius:16px; padding:14px 16px;
}
.hs-row-head{ display:flex; justify-content:space-between; align-items:baseline; }
.hs-row-tag{ font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#6E6588; }
.hs-row-tag.is-done{ color:#4E8C6E; }
.hs-row-when{ font-family:var(--font-mono); font-size:10px; color:#6E6588; }
.hs-row-title{ margin-top:4px; font-size:14px; font-weight:600; color:#2E2650; }

.hs-session{
  background:#2E2650; border-radius:20px; padding:18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer; box-shadow:0 20px 38px -26px rgba(46,38,80,.85);
}
.hs-session-eyebrow{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.78); }
.hs-session-title{ margin-top:4px; font-size:19px; font-weight:700; color:#FFF6F0; letter-spacing:-.02em; }
.hs-session-len{ margin-top:3px; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.72); }
.hs-play{
  width:44px; height:44px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.18); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}

.hs-actions{ display:flex; gap:10px; margin-top:14px; }
.hs-action{
  flex:1; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.9);
  border-radius:16px; padding:14px;
  display:flex; flex-direction:column; gap:4px;
}
.hs-action-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:#6E6588; }
.hs-action-title{ font-family:var(--font-sans); font-size:14px; font-weight:600; color:#2E2650; }

/* identity card */
.hs-identity{
  display:flex; gap:16px; align-items:flex-start;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  border-radius:20px; padding:18px;
  box-shadow:0 16px 34px -26px rgba(46,38,80,.45);
}
.hs-mandala{ flex:none; width:132px; text-align:center; cursor:pointer; }
.hs-mandala-disc{
  width:132px; height:132px; border-radius:50%;
  background:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
}
.hs-mandala-disc canvas{ width:74%; height:74%; display:block; }
.hs-mandala-sub{ margin-top:8px; font-family:var(--font-mono); font-size:10px; color:#6E6588; }
.hs-identity-body{ flex:1; min-width:0; }
.hs-mini-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:#6E6588; }
.hs-anchor{ margin-top:5px; font-family:var(--font-sans); font-size:17px; font-weight:700;
  color:#2E2650; letter-spacing:-.02em; text-wrap:pretty; }
.hs-hair{ height:1px; background:rgba(46,38,80,.12); margin:14px 0; }
.hs-feelings{ margin-top:6px; font-size:13px; color:#6E6588; line-height:1.5; }

.hs-note{
  margin-top:14px; border-radius:18px; padding:16px 18px;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
}
.hs-note-text{ margin-top:7px; font-size:13px; line-height:1.6; color:#6E6588; text-wrap:pretty; }

.hs-entries{
  margin-top:12px; border-radius:18px; padding:6px 4px;
  background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.9);
}
.hs-howto{ margin-top:22px; text-align:center; }
.hs-howto span{ font-family:var(--font-mono); font-size:11px; color:#6B3FC4;
  text-decoration:underline; cursor:pointer; }

/* ---- home scene: night ---- */
[data-theme="dark"] .home-scene .hs-bloom{ display:none; }
[data-theme="dark"] .hs-crumb,
[data-theme="dark"] .hs-sec-label,
[data-theme="dark"] .hs-sec-sub,
[data-theme="dark"] .hs-mini-label,
[data-theme="dark"] .hs-row-tag,
[data-theme="dark"] .hs-row-when,
[data-theme="dark"] .hs-action-tag,
[data-theme="dark"] .hs-mandala-sub{ color:rgba(237,234,247,.7); }
[data-theme="dark"] .hs-row-tag.is-done{ color:#7FBFA0; }
[data-theme="dark"] .hs-greet,
[data-theme="dark"] .hs-anchor,
[data-theme="dark"] .hs-row-title,
[data-theme="dark"] .hs-action-title{ color:#fff; }
[data-theme="dark"] .hs-feelings,
[data-theme="dark"] .hs-note-text{ color:rgba(237,234,247,.72); }
[data-theme="dark"] .hs-streak,
[data-theme="dark"] .hs-done-row,
[data-theme="dark"] .hs-action,
[data-theme="dark"] .hs-identity,
[data-theme="dark"] .hs-note,
[data-theme="dark"] .hs-entries{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16); box-shadow:none;
}
[data-theme="dark"] .hs-streak{ color:#fff; }
[data-theme="dark"] .hs-hair{ background:rgba(255,255,255,.16); }
/* upcoming stays an outline at night as well -- dashed lilac, same as the
   journal's empty slot, because a dark dash vanishes on a dark surface */
[data-theme="dark"] .hs-next-row{
  background:transparent; border:1px dashed rgba(196,175,255,.45); box-shadow:none;
}
[data-theme="dark"] .hs-rail-dot.is-upcoming{ border-color:rgba(196,175,255,.5); }
[data-theme="dark"] .hs-rail-line{
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.35) 0 4px,transparent 4px 8px); }
/* a purple CTA disappears on a purple surface — the session card flips to light */
[data-theme="dark"] .hs-session{ background:#FFF6F0; box-shadow:0 20px 38px -26px rgba(0,0,0,.8); }
[data-theme="dark"] .hs-session-eyebrow,
[data-theme="dark"] .hs-session-len{ color:#6E6588; }
[data-theme="dark"] .hs-session-title{ color:#2E2650; }
[data-theme="dark"] .hs-play{ background:rgba(46,38,80,.12); color:#2E2650; }
[data-theme="dark"] .hs-mandala-disc{ background:rgba(255,255,255,.06); }
[data-theme="dark"] .hs-howto span{ color:#C4AFFF; }

/* ---- settings scene (day base, night below) ---- */
.st-scene{
  background:var(--bg-app);
  padding-left:22px; padding-right:22px;
}
.st-scene .st-bloom{
  position:fixed; left:-24%; top:60px; width:420px; height:420px; pointer-events:none; z-index:0;
  background:radial-gradient(circle,rgba(242,117,74,.13) 0%,rgba(242,117,74,0) 68%);
}
.st-scene > *:not(.st-bloom){ position:relative; z-index:1; }

.st-head{ display:flex; align-items:center; gap:14px; }
.st-title{
  margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:26px; letter-spacing:-.025em; color:#2E2650;
}
.st-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#6E6588; margin:26px 0 10px;
}
.st-card{
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  border-radius:18px; padding:4px 16px;
  box-shadow:0 16px 34px -26px rgba(46,38,80,.45);
}
.st-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:15px 0; cursor:pointer;
}
.st-row--switch{ align-items:flex-start; cursor:default; }
.st-stack{ padding:15px 0; }
.st-hair{ height:1px; background:rgba(46,38,80,.12); }
.st-row-label{ font-family:var(--font-sans); font-size:14px; font-weight:600; color:#2E2650; }
.st-row-val{
  font-family:var(--font-mono); font-size:12px; color:#6E6588;
  text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.st-row-val em{ font-style:normal; color:#6B3FC4; }
.st-help{ margin:4px 0 0; font-size:11.5px; line-height:1.5; color:#6E6588; max-width:230px; }
.st-time{
  border:1px solid rgba(46,38,80,.16); background:rgba(255,255,255,.7);
  border-radius:10px; padding:7px 10px;
  font-family:var(--font-mono); font-size:13px; color:#2E2650;
}

/* segmented look for the chips the JS already renders */
.st-seg{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

/* real 46x28 switch -- the checkbox stays in the DOM so existing JS reads .checked */
.st-switch{ position:relative; width:46px; height:28px; flex:none; cursor:pointer; }
.st-switch input{ position:absolute; opacity:0; width:0; height:0; }
.st-switch span{
  position:absolute; inset:0; border-radius:100px;
  background:rgba(46,38,80,.20); transition:background .2s;
}
.st-switch span::after{
  content:''; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:#fff; transition:transform .2s;
  box-shadow:0 2px 6px rgba(46,38,80,.3);
}
.st-switch input:checked + span{ background:#6B3FC4; }
.st-switch input:checked + span::after{ transform:translateX(18px); }

.st-danger{ margin-top:26px; display:flex; flex-direction:column; gap:10px; }
.st-logout, .st-reset{
  width:100%; border-radius:100px; padding:15px; cursor:pointer;
  font-family:var(--font-sans); font-weight:600; font-size:14px;
}
.st-logout{ border:1px solid rgba(46,38,80,.18); background:rgba(255,255,255,.7); color:#2E2650; }
.st-reset{ border:1px solid rgba(178,42,42,.3); background:transparent; color:#B22A2A; }
.st-about{
  margin:18px 0 0; font-size:11.5px; line-height:1.6; color:#6E6588; text-wrap:pretty;
}

/* ---- settings scene: night ---- */
[data-theme="dark"] .st-scene .st-bloom{ display:none; }
[data-theme="dark"] .st-title, [data-theme="dark"] .st-row-label{ color:#fff; }
[data-theme="dark"] .st-label, [data-theme="dark"] .st-help,
[data-theme="dark"] .st-row-val, [data-theme="dark"] .st-about{ color:rgba(237,234,247,.72); }
[data-theme="dark"] .st-row-val em{ color:#C4AFFF; }
[data-theme="dark"] .st-card{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16); box-shadow:none;
}
[data-theme="dark"] .st-hair{ background:rgba(255,255,255,.16); }
[data-theme="dark"] .st-time{
  border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.10); color:#fff;
}
[data-theme="dark"] .st-switch span{ background:rgba(255,255,255,.26); }
[data-theme="dark"] .st-switch input:checked + span{ background:#C4AFFF; }
[data-theme="dark"] .st-switch input:checked + span::after{ background:#3A2470; }
[data-theme="dark"] .st-logout{
  border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.10); color:#fff;
}
[data-theme="dark"] .st-reset{ border-color:rgba(255,140,140,.45); color:#FF8C8C; }

/* ---- journal scene (day base, night below) ---- */
.jr-scene{
  background:var(--bg-app);
  padding-left:22px; padding-right:22px;
}
.jr-scene .jr-bloom{
  position:fixed; right:-26%; top:120px; width:420px; height:420px; pointer-events:none; z-index:0;
  background:radial-gradient(circle,rgba(136,88,224,.13) 0%,rgba(136,88,224,0) 68%);
}
.jr-scene > *:not(.jr-bloom){ position:relative; z-index:1; }

.jr-head{ display:flex; align-items:center; gap:14px; }
.jr-head .spark-blink{ height:60px; flex:none;
  filter:drop-shadow(0 12px 20px rgba(46,38,80,.14)); }
[data-theme="dark"] .jr-head .spark-blink{
  filter:drop-shadow(0 0 26px rgba(196,175,255,.75)); }
.jr-title{ margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:26px; letter-spacing:-.025em; color:#2E2650; }
.jr-sub{ margin:5px 0 0; font-size:12.5px; color:#6E6588; }
.jr-label{ display:block; margin-top:26px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:#6E6588; }
.jr-record-head .jr-label{ margin-top:0; }
.jr-mini{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:#6E6588; }

/* mandala marks -- same vocabulary as the legend */
.jr-mark{ display:block; margin:0 auto 8px; }
.jr-mark--petal{ width:11px; height:17px; background:#6B3FC4;
  border-radius:50% 50% 50% 50%/64% 64% 36% 36%; }
.jr-mark--leaf{ width:9px; height:15px; background:#8858E0; border-radius:100px; }
.jr-mark--drop{ width:9px; height:9px; background:#E0673C; border-radius:50%; margin-top:4px; margin-bottom:12px; }
.jr-mark--ring{ width:12px; height:12px; border:1.6px solid #4A2E8C; border-radius:50%;
  box-sizing:border-box; margin-top:3px; margin-bottom:11px; }

.jr-slots{ display:flex; gap:10px; margin-top:12px; }
.jr-slot{
  flex:1; min-width:0; text-align:left; cursor:pointer; padding:13px 12px;
  border-radius:16px; background:transparent;
  border:1px dashed rgba(46,38,80,.26);
  transition:background .16s;
}
/* a filled slot is a real card; an empty one stays an outline and IS the button */
.jr-slot.is-filled{ background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 14px 30px -26px rgba(46,38,80,.5); }
.jr-slot:hover{ background:rgba(255,255,255,.5); }
.jr-slot .jr-mark{ margin:0; }
.jr-slot-label{ margin-top:9px; font-family:var(--font-mono); font-size:9px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#6E6588; }
.jr-slot--state.is-filled .jr-slot-label{ color:#6B3FC4; }
.jr-slot--sign.is-filled .jr-slot-label{ color:#C2521F; }
.jr-slot-val{ margin-top:3px; font-family:var(--font-sans); font-size:13px;
  font-weight:600; color:#2E2650; }
/* the empty reflection slot shows a dashed ghost of the mark it would add */
.jr-slot:not(.is-filled) .jr-mark{ background:none; border:1.6px dashed rgba(46,38,80,.4); }
[data-theme="dark"] .jr-slot{ border-color:rgba(196,175,255,.45); }
[data-theme="dark"] .jr-slot.is-filled{ background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16); box-shadow:none; }
[data-theme="dark"] .jr-slot:not(.is-filled) .jr-mark{ border-color:rgba(196,175,255,.5); }
[data-theme="dark"] .jr-slot--state.is-filled .jr-slot-label{ color:#C4AFFF; }
[data-theme="dark"] .jr-slot--sign.is-filled .jr-slot-label{ color:#FFA07A; }
[data-theme="dark"] .jr-slot-val{ color:#fff; }

/* the prompt is the brightest thing on the screen */
.jr-prompt{
  margin-top:10px; border-radius:18px; padding:16px 18px; cursor:pointer;
  background:#2E2650; border:none; box-shadow:none;
}
.jr-prompt .jr-mini{ color:#FFA07A; font-weight:700; font-size:9.5px; letter-spacing:.14em; }
.jr-prompt-text{ margin:8px 0 0; font-family:var(--font-sans); font-size:14.5px;
  line-height:1.55; color:#FFF6F0; text-wrap:pretty; }
.jr-prompt-cta{ display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-top:12px; }
.jr-prompt-cta span:first-child{ font-family:var(--font-sans); font-size:12.5px;
  font-weight:600; color:#FFF6F0; cursor:pointer; }
.jr-speak{ font-family:var(--font-mono); font-size:10px;
  color:rgba(255,246,240,.7); cursor:pointer; }

.jr-record-head{ display:flex; justify-content:space-between; align-items:baseline;
  margin-top:28px; }
.jr-count{ font-family:var(--font-mono); font-size:10px; color:#6E6588; }
.jr-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; margin-bottom:14px; }
.jr-filter{
  border-radius:100px; padding:8px 14px; cursor:pointer;
  font-family:var(--font-sans); font-size:11.5px; font-weight:500;
  background:rgba(255,255,255,.66); border:1px solid rgba(46,38,80,.12); color:#2E2650;
  transition:background .16s, color .16s, border-color .16s;
}
.jr-filter.selected{ background:#2E2650; color:#FFF6F0; border-color:#2E2650; }

/* ---- journal scene: night ---- */
[data-theme="dark"] .jr-scene .jr-bloom{ display:none; }
[data-theme="dark"] .jr-title, [data-theme="dark"] .jr-slot-val{ color:#fff; }
[data-theme="dark"] .jr-sub, [data-theme="dark"] .jr-label, [data-theme="dark"] .jr-mini,
[data-theme="dark"] .jr-slot-label, [data-theme="dark"] .jr-count{ color:rgba(237,234,247,.72); }
[data-theme="dark"] .jr-slot{ background:rgba(255,255,255,.09); border-color:rgba(196,175,255,.45); }
[data-theme="dark"] .jr-slot.is-filled{ border-color:rgba(255,255,255,.16); }
/* the prompt card inverts to warm light -- it should stay the brightest thing */
[data-theme="dark"] .jr-prompt{ background:#FFF6F0; }
[data-theme="dark"] .jr-prompt .jr-mini{ color:#C2521F; }
[data-theme="dark"] .jr-prompt-text{ color:#2E2650; }
[data-theme="dark"] .jr-prompt-cta span:first-child{ color:#2E2650; }
[data-theme="dark"] .jr-speak{ color:#6E6588; }
[data-theme="dark"] .jr-mini{ color:#6E6588; }
[data-theme="dark"] .jr-prompt-cta span:first-child{ color:#6B3FC4; }
[data-theme="dark"] .jr-speak{ color:#6E6588; }
[data-theme="dark"] .jr-filter{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); color:#EDEAF7; }
[data-theme="dark"] .jr-filter.selected{ background:#fff; color:#3A2470; border-color:#fff; }
[data-theme="dark"] .jr-mark--petal{ background:#8858E0; }
[data-theme="dark"] .jr-mark--leaf{ background:#A98BE7; }
[data-theme="dark"] .jr-mark--drop{ background:#F2754A; }
[data-theme="dark"] .jr-mark--ring{ border-color:#C4AFFF; }

/* entries carry their mandala mark, so the record reads like the pattern it feeds */
.entry-item{ display:flex; gap:12px; align-items:flex-start; }
.entry-item > .jr-mark{ margin:6px 0 0; flex:none; }
.entry-item > .entry-main{ flex:1; min-width:0; }

/* ---- mandala detail (day base, night below) ---- */
.mdx{
  background:var(--bg-app);
  flex-direction:column;
  /* the 420px blooms sit outside the viewport on purpose -- clip them on x, or the
     whole overlay gains a horizontal scrollbar */
  overflow-x:hidden; overflow-y:auto;
  align-items:stretch;   /* base overlay centres children; the top row needs full width */
  padding:max(calc(var(--safe-top) + 20px), 52px) 26px calc(var(--safe-bottom) + 30px);
}
.mdx.active{ display:flex; }
.mdx .mdx-bloom{ position:fixed; width:420px; height:420px; pointer-events:none; }
.mdx .mdx-bloom-warm{ left:-24%; top:40px;
  background:radial-gradient(circle,rgba(242,117,74,.14) 0%,rgba(242,117,74,0) 68%); }
.mdx .mdx-bloom-cool{ right:-26%; top:280px;
  background:radial-gradient(circle,rgba(136,88,224,.14) 0%,rgba(136,88,224,0) 68%); }
.mdx > *:not(.mdx-bloom){ position:relative; }

.mdx-top{ display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.mdx-day{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#6E6588; }
.mdx-close{ font-size:24px; line-height:1; color:#6E6588; cursor:pointer; padding:0 4px; }

.mdx-body{ text-align:center; margin-top:14px; }
/* on day the canvas needs a surface, or fine marks vanish into the gradient */
.mdx-disc{
  width:300px; height:300px; max-width:100%; margin:0 auto; border-radius:50%;
  background:rgba(255,255,255,.72);
  display:flex; align-items:center; justify-content:center;
}
.mdx-disc canvas{ width:74%; height:74%; display:block; }
.mdx-h2{ margin:22px 0 0; font-family:var(--font-sans); font-weight:300;
  font-size:26px; letter-spacing:-.025em; color:#2E2650; }
.mdx-h2 strong{ font-weight:700; }
.mdx-lead{ margin:10px auto 0; max-width:300px; font-size:13px; line-height:1.6;
  color:#6E6588; text-wrap:pretty; }

.mdx-legend{
  margin-top:26px; border-radius:18px; padding:6px 16px;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
}
.mdx-row{ display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px solid rgba(46,38,80,.1); }
.mdx-row:last-child{ border-bottom:none; }
.mdx-row-label{ display:flex; align-items:center; gap:12px;
  font-family:var(--font-sans); font-size:13.5px; color:#2E2650; }
.mdx-row-label .jr-mark{ margin:0; }
.mdx-row-n{ font-family:var(--font-mono); font-weight:700; font-size:13px; color:#2E2650; }
.mdx-row--ghost{ font-family:var(--font-mono); font-size:11px; color:#6E6588; gap:12px;
  justify-content:flex-start; }
.mdx-ghost{ width:12px; height:12px; border-radius:50%; flex:none;
  border:1.5px dashed rgba(46,38,80,.35); }

/* ---- mandala detail: night ---- */
[data-theme="dark"] .mdx .mdx-bloom{ display:none; }
[data-theme="dark"] .mdx-disc{ background:transparent; }
[data-theme="dark"] .mdx-h2, [data-theme="dark"] .mdx-row-label,
[data-theme="dark"] .mdx-row-n{ color:#fff; }
[data-theme="dark"] .mdx-day, [data-theme="dark"] .mdx-close,
[data-theme="dark"] .mdx-lead, [data-theme="dark"] .mdx-row--ghost{ color:rgba(237,234,247,.72); }
[data-theme="dark"] .mdx-legend{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16); }
[data-theme="dark"] .mdx-row{ border-bottom-color:rgba(255,255,255,.16); }
[data-theme="dark"] .mdx-ghost{ border-color:rgba(196,175,255,.6); }

/* ---- player: sound pill + read-along (#29a / #29b) ---- */
.player-header{ gap:10px; }
.sound-pill{
  display:inline-flex; align-items:center; gap:6px; margin-left:auto; margin-right:10px;
  border:1px solid currentColor; background:transparent; border-radius:100px;
  padding:6px 12px; cursor:pointer;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-secondary); opacity:.85;
}
.sound-pill:active{ transform:scale(.97); }

.player-timer-row{ display:flex; align-items:center; justify-content:center; gap:12px; }
/* timer is the quietest element but never lighter than #6E6588 */
.player-timer{ color:var(--text-secondary); }

/* the small cue that replaces the breath circle in read-along */
.breath-cue{ display:none; width:14px; height:14px; border-radius:50%;
  background:currentColor; opacity:.5; flex:none;
  animation:cue-breathe 6s ease-in-out infinite; }
@keyframes cue-breathe{ 0%,100%{transform:scale(.7);opacity:.35} 50%{transform:scale(1);opacity:.75} }

/* read-along: the guidance becomes the screen */
.player-overlay.is-readalong .breath-circle{ display:none !important; }
.player-overlay.is-readalong .breath-cue{ display:block; }
.player-overlay.is-readalong .player-prompt{
  font-size:22px; line-height:1.4; font-weight:500; max-width:320px;
  color:var(--text-primary); margin-top:18px;
}
.readalong-note{
  display:none; margin-top:16px; max-width:280px; text-align:center;
  font-family:var(--font-mono); font-size:11px; line-height:1.6;
  color:var(--text-secondary); opacity:.85;
}

/* night runs on its own dark gradient -- unlike every other player, this one
   stays dark always, since it's the last thing you see before sleep. it never
   follows the device clock. darkened further per the Claude Design handoff
   (dc "31c"/"38c") -- was #5C4A7E->#3E3159, now near-black at the bottom. */
.player-overlay.palette-night{
  background:linear-gradient(168deg,#241847 0%,#170F30 52%,#0A0518 100%);
  --text-primary:#E8E4F5;
  --text-secondary:#B0A8CC;
  --text-muted:#8A81AE;
  --accent:#9C8FD9;
  --accent-dark:#7A6BC0;
  --bg-card:#4A3D6B;
  --bg-card-soft:#4A3D6B;
  --border-card:rgba(255,255,255,.16);
  --border:#3C3164;
  --border-strong:#4A3D75;
  --range-track:rgba(255,255,255,.14);
  --cta-bg:#F6F2FF;
  --cta-text:#241847;
}


/* ================= meditations library (#35b) =================
   Each practice owns a sigil whose shape IS its breath: morning three petals,
   fire bars on the real 0.62s pulse, reset the box-breathing square, lighthouse
   seven points lit bottom-up, night a ring split 4-7-8 by arc. The card is
   tinted in that practice's hue and the sigil bleeds off the right edge. */
.ml-scene{ padding-left:22px; padding-right:22px; }
.ml-head{ display:flex; align-items:center; gap:14px; }
.ml-head .spark-blink{ height:60px; flex:none;
  filter:drop-shadow(0 12px 20px rgba(46,38,80,.14)); }
.ml-title{ margin:0; font-family:var(--font-sans); font-weight:300; font-size:24px;
  line-height:1.2; letter-spacing:-.025em; color:var(--text-primary); }
.ml-sub{ margin:4px 0 0; font-size:11px; line-height:1.5; color:var(--text-secondary); }

.ml-filters{ display:flex; gap:7px; margin-top:20px; flex-wrap:wrap; }
.ml-filter{
  border-radius:100px; padding:7px 13px; cursor:pointer;
  background:rgba(255,255,255,.66); border:1px solid var(--border);
  color:var(--text-primary); font-family:var(--font-mono); font-size:11px; font-weight:400;
}
.ml-filter.is-on{ background:var(--cta-bg); color:var(--cta-text); font-weight:700;
  border-color:var(--cta-bg); }

.ml-cards{ margin-top:14px; display:flex; flex-direction:column; gap:12px; }
.ml-card{
  --sigil-ink:var(--ink-day);
  --sigil-tint:var(--tint-day);
  position:relative; overflow:hidden; border-radius:22px; padding:18px;
  border:1px solid var(--border-card);
  background:linear-gradient(120deg,var(--sigil-tint),rgba(255,255,255,.72) 62%);
  box-shadow:0 16px 34px -26px rgba(46,38,80,.5);
}
.ml-card-body{ position:relative; max-width:63%; }
.ml-tags{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ml-kind{ font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sigil-ink); }
.ml-done{ font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#4E8C6E; }
.ml-name{ margin-top:6px; font-size:19px; font-weight:700; line-height:1.2;
  letter-spacing:-.02em; color:var(--text-primary); text-wrap:pretty; }
.ml-desc{ margin:7px 0 0; font-size:12px; line-height:1.55; color:var(--text-secondary);
  text-wrap:pretty; }

.ml-controls{ position:relative; display:flex; align-items:center; gap:10px; margin-top:14px; }
.ml-durations{ display:flex; background:rgba(255,255,255,.72); border:1px solid var(--border);
  border-radius:100px; padding:3px; }
.ml-dur{ border-radius:100px; padding:7px 12px; cursor:pointer;
  font-family:var(--font-sans); font-size:12px; font-weight:500; color:var(--text-primary);
  background:none; border:none; }
.ml-dur.is-on{ background:var(--cta-bg); color:var(--cta-text); font-weight:600; }
.ml-dur-unit{ align-self:center; padding:0 10px 0 4px;
  font-family:var(--font-mono); font-size:11px; color:var(--text-secondary); }
.ml-play{ width:42px; height:42px; border-radius:50%; flex:none; cursor:pointer;
  background:var(--cta-bg); color:var(--cta-text); border:none;
  display:flex; align-items:center; justify-content:center; font-size:14px; }
.ml-how{ position:relative; margin-top:10px; }
.ml-how span{ font-size:11px; color:var(--text-secondary); cursor:pointer; }

/* ---- the five sigils ---- */
.ml-sigil{ position:absolute; top:50%; transform:translateY(-50%); pointer-events:none; }

.sig-morning{ right:-22px; width:104px; height:104px; opacity:.9; }
.sig-morning i{ position:absolute; left:50%; bottom:26px; width:17px; height:30px;
  margin-left:-8.5px; transform-origin:50% 100%; background:var(--sigil-ink);
  border-radius:50% 50% 50% 50%/64% 64% 36% 36%; }
.sig-morning i:nth-child(1){ transform:rotate(-38deg); opacity:.34; }
.sig-morning i:nth-child(2){ transform:rotate(-19deg); opacity:.5; }
.sig-morning i:nth-child(3){ height:36px; animation:sigilrise 6s ease-in-out infinite; }
.sig-morning i:nth-child(4){ transform:rotate(19deg); opacity:.5; }
.sig-morning i:nth-child(5){ transform:rotate(38deg); opacity:.34; }
.sig-morning i:nth-child(6){ bottom:20px; width:10px; height:10px; margin-left:-5px;
  border-radius:50%; }

.sig-fire{ right:2px; display:flex; align-items:flex-end; gap:7px; height:92px; }
.sig-fire i{ width:7px; border-radius:4px; background:var(--sigil-ink);
  transform-origin:50% 100%; animation:firepulse .62s ease-in-out infinite; }
.sig-fire i:nth-child(1){ height:34px; opacity:.55; }
.sig-fire i:nth-child(2){ height:64px; opacity:.75; animation-delay:.1s; }
.sig-fire i:nth-child(3){ height:46px; opacity:.65; animation-delay:.2s; }
.sig-fire i:nth-child(4){ height:80px; animation-delay:.3s; }

.sig-reset{ right:-14px; width:92px; height:92px; }
.sig-reset i:nth-child(1){ position:absolute; left:50%; top:50%; width:74px; height:74px;
  margin:-37px 0 0 -37px; border:3px solid var(--sigil-ink); border-radius:12px; opacity:.85; }
.sig-reset i:nth-child(2){ position:absolute; left:50%; top:50%; width:44px; height:44px;
  margin:-22px 0 0 -22px; border-radius:8px; background:var(--sigil-ink);
  animation:boxbreath 8s ease-in-out infinite; }

.sig-lighthouse{ right:16px; display:flex; flex-direction:column-reverse;
  align-items:center; gap:5px; }
.sig-lighthouse i{ width:7px; height:7px; border-radius:50%; background:var(--sigil-ink); }
.sig-lighthouse i:nth-child(1){ width:13px; height:13px;
  box-shadow:0 0 18px rgba(176,114,30,.7); animation:beamsweep 3.4s ease-in-out infinite; }
.sig-lighthouse i:nth-child(2){ opacity:.28; }
.sig-lighthouse i:nth-child(3){ opacity:.42; }
.sig-lighthouse i:nth-child(4){ opacity:.58; }
.sig-lighthouse i:nth-child(5){ opacity:.74; }
.sig-lighthouse i:nth-child(6){ opacity:.88; }

.sig-night{ right:-12px; width:96px; height:96px; }
.sig-night i{ position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from -90deg,#4A2E8C 0 19%,transparent 19% 22%,
    #8858E0 22% 55%,transparent 55% 58%,#C9BEEE 58% 97%,transparent 97% 100%);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);
  mask:radial-gradient(circle,transparent 62%,#000 63%); }

@keyframes sigilrise{ 0%,100%{transform:translateY(1px)} 50%{transform:translateY(-2px)} }
@keyframes firepulse{ 0%,100%{transform:scale(.9);opacity:.85} 50%{transform:scale(1.07);opacity:1} }
@keyframes boxbreath{ 0%,100%{transform:scale(.5)} 25%,50%{transform:scale(1)} }
@keyframes beamsweep{ 0%,100%{opacity:.25} 50%{opacity:.7} }

/* ---- library: night ---- */
[data-theme="dark"] .ml-card{
  /* swap the practice's hue to its night value once, here -- the sigil and the kind
     label both read --sigil-ink, so they follow automatically. This has to live in
     the stylesheet, not inline, or the inline value would win. */
  --sigil-ink:var(--ink-night);
  --sigil-tint:var(--tint-night);
  background:linear-gradient(120deg,var(--sigil-tint),rgba(255,255,255,.09) 62%);
  border-color:rgba(255,255,255,.16); box-shadow:none;
}
[data-theme="dark"] .ml-name{ color:#fff; }
[data-theme="dark"] .ml-done{ color:#7FBFA0; }
[data-theme="dark"] .ml-filter{ background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.16); color:#F6F2FF; }
[data-theme="dark"] .ml-durations{ background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.16); }
[data-theme="dark"] .ml-dur{ color:#F6F2FF; }
/* the selected pill is a cream surface -- it needs ink, and these two rules have to
   out-specify the plain dark .ml-dur / .ml-filter rules above */
[data-theme="dark"] .ml-dur.is-on{ background:var(--cta-bg); color:var(--cta-text); }
[data-theme="dark"] .ml-filter.is-on{ background:var(--cta-bg); color:var(--cta-text);
  border-color:var(--cta-bg); }

@media (prefers-reduced-motion: reduce){
  .sig-morning i, .sig-fire i, .sig-reset i, .sig-lighthouse i{ animation:none !important; }
}

/* ================= progress (#37a day / #37b night) ================= */
.pg-scene{ padding-left:22px; padding-right:22px; }
.pg-head{ display:flex; align-items:center; gap:14px; }
.pg-head .spark-blink{ height:60px; flex:none;
  filter:drop-shadow(0 12px 20px rgba(46,38,80,.14)); }
.pg-title{ margin:0; font-family:var(--font-sans); font-weight:300; font-size:24px;
  line-height:1.2; letter-spacing:-.025em; color:var(--text-primary); }
.pg-sub{ margin:4px 0 0; font-size:11px; line-height:1.5; color:var(--text-secondary); }

.pg-label{ font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary); }
.pg-note{ margin:5px 0 0; font-size:11.5px; line-height:1.55;
  color:var(--text-secondary); text-wrap:pretty; }

.pg-card{
  margin-top:12px; padding:18px; border-radius:20px;
  background:var(--bg-card); border:1px solid var(--border-card);
  box-shadow:0 14px 30px -24px rgba(46,38,80,.45);
}
.pg-stats{ display:flex; gap:10px; margin-top:22px; }
.pg-stats > *{ flex:1; margin-top:0; }
/* the streak card is already the accent, so it does not invert at night -- it
   only softens to a translucent wash (#37b) */
.pg-streak{
  padding:18px; border-radius:20px;
  background:linear-gradient(150deg,#8858E0 0%,#6B3FC4 100%);
  box-shadow:0 22px 40px -24px rgba(107,63,196,.9);
}
.pg-streak .pg-stat-label{ font-weight:400; letter-spacing:.12em;
  color:rgba(255,255,255,.78); }
.pg-streak .pg-stat-n{ color:#fff; }
.pg-streak .pg-stat-foot{ color:rgba(255,255,255,.78); }
.pg-stat-label{ font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); }
.pg-stat-n{ font-family:var(--font-mono); font-size:34px; font-weight:700;
  color:var(--text-primary); margin-top:6px; line-height:1; }
.pg-stat-foot{ margin-top:4px; font-size:11px; color:var(--text-secondary); }

.pg-week{ display:flex; gap:6px; margin-top:12px; }
.pg-week span{ flex:1; min-height:34px; aspect-ratio:1; border-radius:8px; }
.pg-week span.is-done{ background:var(--accent); }
.pg-week span.is-missed{ border:1px solid var(--border-strong); }
.pg-week span.is-today{ border:1px dashed rgba(46,38,80,.24); }

.pg-trend{ position:relative; height:64px; margin-top:14px; }
.pg-trend svg{ width:100%; height:100%; overflow:visible; display:block; }
.pg-trend-empty{ font-family:var(--font-mono); font-size:10px;
  color:var(--text-secondary); padding-top:24px; text-align:center; }
.pg-trend-foot{ display:flex; justify-content:space-between; margin-top:6px; }
.pg-trend-start{ font-family:var(--font-mono); font-size:10px; color:var(--text-secondary); }
.pg-trend-word{ font-family:var(--font-mono); font-size:10px; font-weight:700;
  color:var(--accent); }

.pg-heat{ display:flex; flex-wrap:wrap; gap:4px; margin-top:14px; }
.pg-heat span{ width:15px; height:15px; border-radius:4px; }

.pg-signs-head{ display:flex; align-items:center; gap:10px; }
.pg-signs-head .jr-mark{ margin:0; flex:none; }
.pg-signs-head .pg-stat-n{ margin-top:8px; }

.pg-recap{ margin-top:12px; padding:20px; border-radius:20px; background:#2E2650; }
.pg-recap-label{ font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#FFA07A; }
.pg-recap-title{ margin-top:8px; font-size:18px; font-weight:600; line-height:1.3;
  color:#FFF6F0; text-wrap:pretty; }
.pg-recap-stats{ display:flex; gap:22px; margin-top:16px; }
.pg-recap-n{ font-family:var(--font-mono); font-size:20px; font-weight:700; color:#C4AFFF; }
.pg-recap-k{ margin-top:2px; font-size:10.5px; color:rgba(255,246,240,.7); }
.pg-recap-cta{
  width:100%; margin-top:16px; border-radius:100px; padding:13px; cursor:pointer;
  font-family:var(--font-sans); font-size:13px; font-weight:600; color:#FFF6F0;
  border:1px solid rgba(196,175,255,.5); background:rgba(196,175,255,.14);
}

/* ---- progress: night ---- */
[data-theme="dark"] .pg-head .spark-blink{
  filter:drop-shadow(0 0 26px rgba(196,175,255,.75)); }
[data-theme="dark"] .pg-streak{
  background:linear-gradient(150deg,rgba(196,175,255,.28) 0%,rgba(136,88,224,.22) 100%);
  border:1px solid rgba(255,255,255,.18); box-shadow:none;
}
[data-theme="dark"] .pg-card{ box-shadow:none; }
[data-theme="dark"] .pg-week span.is-today{ border-color:rgba(196,175,255,.45); }
[data-theme="dark"] .pg-recap{ background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16); }
[data-theme="dark"] .pg-recap-title{ color:#F6F2FF; }
[data-theme="dark"] .pg-recap-k{ color:rgba(237,234,247,.72); }
/* at night everything else is an outline, so a solid CTA is what stands out */
[data-theme="dark"] .pg-recap-cta{ border:none; background:#FFF6F0; color:#2E2650; }

/* ================= completion celebration (#38a/b/c/d) =================
   The mandala mark landing replaces the confetti. The overlay inherits whichever
   palette the just-finished session ran on -- night gets the bedtime gradient,
   never the standard app-night one (locked player rule). */
/* same locked rule as the player: the celebration inherits the session's palette,
   not the device theme */
.cx{ padding:70px 26px calc(30px + var(--safe-bottom)); align-items:stretch;
  --text-primary:#2E2650; --text-secondary:#6E6588; --accent:#6B3FC4;
  --accent-signal:#C2521F; --bg-card:rgba(255,255,255,.72);
  --border-card:rgba(255,255,255,.9); --range-track:rgba(46,38,80,.12);
  --cta-bg:#2E2650; --cta-text:#FFF6F0; }
.cx.active{ display:flex; }
.cx-inner{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
  align-items:center; width:100%; max-width:420px; margin:0 auto; }
.cx-stars{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.cx-stars i{ position:absolute; border-radius:50%; animation:cx-twinkle 2.6s ease-in-out infinite; }
@keyframes cx-twinkle{ 0%,100%{opacity:.25} 50%{opacity:.9} }

.cx-disc{ position:relative; width:150px; height:150px; border-radius:50%; flex:none;
  background:#2E2650; overflow:hidden; box-shadow:0 26px 50px -26px rgba(46,38,80,.85); }
.cx-disc canvas{ position:absolute; inset:9%; width:82%; height:82%; }
.cx-disc::before{ content:''; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); width:88%; height:88%; border-radius:50%;
  background:radial-gradient(circle,rgba(196,175,255,.22) 0%,rgba(196,175,255,0) 70%); }
.cx--quick .cx-disc{ width:104px; height:104px; }

/* the mark that just landed, solidifying in */
.cx-newmark{ position:absolute; left:50%; bottom:50%; margin-left:-7.5px;
  animation:cx-solidify 1.1s ease-out both; }
.cx-newmark.is-petal{ width:15px; height:25px; margin-bottom:19px;
  transform-origin:50% 100%; background:#F2754A;
  box-shadow:0 0 16px rgba(242,117,74,.7);
  border-radius:50% 50% 50% 50%/64% 64% 36% 36%; }
.cx-newmark.is-leaf{ width:9px; height:9px; margin-left:-4.5px; bottom:auto; top:50%;
  margin-top:-4.5px; border-radius:50%; background:#8858E0;
  box-shadow:0 0 12px rgba(136,88,224,.7); }
.cx-newmark.is-ring{ width:13px; height:13px; margin-left:-6.5px; bottom:auto; top:50%;
  margin-top:-6.5px; border-radius:50%; border:1.6px solid #C4AFFF; box-sizing:border-box;
  box-shadow:0 0 14px rgba(196,175,255,.8); }
@keyframes cx-solidify{
  0%,44%{ opacity:0; transform:rotate(var(--rot,0deg)) scale(.7) }
  70%,100%{ opacity:1; transform:rotate(var(--rot,0deg)) scale(1) }
}

.cx-added{ display:flex; align-items:center; gap:6px; margin-top:12px; }
.cx-added-dot{ width:7px; height:7px; border-radius:50%; background:#F2754A; flex:none; }
.cx-added-dot.is-ring{ background:none; border:1.6px solid #C4AFFF; box-sizing:border-box; }
.cx-added-dot.is-leaf{ width:6px; height:6px; background:#8858E0; }
.cx-added-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-secondary); }

.cx-line{ margin-top:22px; font-size:27px; font-weight:700; line-height:1.25;
  letter-spacing:-.02em; text-align:center; color:var(--text-primary); text-wrap:pretty; }
.cx--quick .cx-line{ font-size:24px; margin-top:18px; }
.cx-sub{ margin:8px 0 0; font-size:13.5px; line-height:1.6; text-align:center;
  color:var(--text-secondary); text-wrap:pretty; }

.cx-rating{ width:100%; margin-top:26px; padding:18px; border-radius:20px;
  background:var(--bg-card); border:1px solid var(--border-card);
  box-shadow:0 14px 30px -24px rgba(46,38,80,.45); }
.cx-rating-q{ font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.cx-rating-n{ font-family:var(--font-mono); font-size:32px; font-weight:700;
  color:var(--text-primary); margin-top:8px; text-align:center; line-height:1; }
.cx-rating-ends{ display:flex; justify-content:space-between; margin-top:6px; }
.cx-rating-ends span{ font-family:var(--font-mono); font-size:10px; color:var(--text-secondary); }

.cx-cta{ width:100%; margin-top:auto; border:none; border-radius:100px; padding:18px;
  cursor:pointer; background:var(--cta-bg); color:var(--cta-text);
  font-family:var(--font-sans); font-size:15px; font-weight:600;
  box-shadow:0 14px 30px -16px rgba(46,38,80,.8); }
/* the quick variant drops the `margin-top:auto` that pins 38a's CTA to the bottom,
   so its content has to be centred instead of stacking at the top (#38d) */
.cx--quick .cx-inner{ justify-content:center; }
.cx--quick .cx-cta{ margin-top:24px; padding:16px; font-size:14.5px; box-shadow:none; }

/* night sessions finish on the bedtime palette, with the outline CTA */
.cx.is-bedtime{ background:linear-gradient(168deg,#241847 0%,#170F30 52%,#0A0518 100%);
  --text-primary:#F6F2FF; --text-secondary:rgba(237,234,247,.72);
  --accent:#C4AFFF; --bg-card:rgba(255,255,255,.09); --border-card:rgba(255,255,255,.16); }
.cx.is-bedtime .cx-disc{ background:#160D2E;
  box-shadow:inset 0 0 0 1px rgba(196,175,255,.18),0 0 40px rgba(169,139,231,.35); }
.cx.is-bedtime .cx-cta{ background:rgba(196,175,255,.14); color:#F6F2FF;
  border:1px solid rgba(196,175,255,.5); box-shadow:none; }

/* ---- milestone (#38b) ---- */
.cx--milestone .cx-inner{ justify-content:center; }
.cx-eyebrow{ font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-signal); }
.cx-discwrap{ position:relative; width:196px; height:196px; flex:none; margin-top:18px;
  display:flex; align-items:center; justify-content:center;
  animation:cx-pop .6s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes cx-pop{ 0%{transform:scale(.4);opacity:0} 62%{transform:scale(1.08);opacity:1} 100%{transform:scale(1);opacity:1} }
.cx-ring{ position:absolute; width:196px; height:196px; border-radius:50%;
  border:2.5px solid rgba(242,117,74,.55); animation:cx-ringpulse 2s ease-out infinite; }
.cx-ring:nth-child(2){ border-color:rgba(107,63,196,.4); animation-delay:.45s; }
.cx-ring:nth-child(3){ animation-delay:.9s; }
@keyframes cx-ringpulse{ 0%{transform:scale(.72);opacity:0} 30%{opacity:.55} 100%{transform:scale(1.12);opacity:0} }
.cx-disc--lg{ width:164px; height:164px; box-shadow:0 32px 58px -26px rgba(46,38,80,.9); }
/* one anchor, rotation-only spread -- the earlier three-offset build read lopsided */
.cx-petal{ position:absolute; left:50%; bottom:53%; width:17px; margin-left:-8.5px;
  transform-origin:50% 100%; background:#F2754A;
  border-radius:50% 50% 50% 50%/64% 64% 36% 36%; animation:cx-solidify 1s ease-out both; }
.cx-petal--l{ --rot:-24deg; height:28px; opacity:.55; animation-delay:.5s;
  box-shadow:0 0 16px rgba(242,117,74,.6); }
.cx-petal--c{ height:32px; animation-delay:.68s; box-shadow:0 0 20px rgba(242,117,74,.85); }
.cx-petal--r{ --rot:24deg; height:28px; opacity:.55; animation-delay:.86s;
  box-shadow:0 0 16px rgba(242,117,74,.6); }
.cx-petal-seed{ position:absolute; left:50%; bottom:50%; width:9px; height:9px;
  margin-left:-4.5px; border-radius:50%; background:#F2754A;
  box-shadow:0 0 14px rgba(242,117,74,.9); animation:cx-solidify 1s ease-out .86s both; }
.cx-streak{ display:flex; align-items:baseline; gap:9px; margin-top:24px; }
.cx-streak-n{ font-family:var(--font-mono); font-size:54px; font-weight:700;
  letter-spacing:-.01em; color:var(--text-primary); }
.cx-streak-w{ font-size:23px; font-weight:700; letter-spacing:-.01em; color:var(--text-primary); }
.cx--milestone .cx-cta{ margin-top:30px; }

@media (prefers-reduced-motion: reduce){
  .cx-stars i, .cx-ring, .cx-newmark, .cx-petal, .cx-petal-seed, .cx-discwrap{
    animation:none !important; }
}

/* ================= the ink slider, shared by #38a and #39a ================= */
.ink-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:4px;
  margin-top:12px; background:var(--range-track); outline:none; cursor:pointer;
}
.ink-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%; border:none;
  background:var(--cta-bg); box-shadow:0 4px 10px rgba(46,38,80,.4); cursor:pointer;
}
.ink-range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; border:none;
  background:var(--cta-bg); box-shadow:0 4px 10px rgba(46,38,80,.4); cursor:pointer;
}
[data-theme="dark"] .ink-range::-webkit-slider-thumb,
.cx.is-bedtime .ink-range::-webkit-slider-thumb{ background:#F6F2FF; }
[data-theme="dark"] .ink-range::-moz-range-thumb,
.cx.is-bedtime .ink-range::-moz-range-thumb{ background:#F6F2FF; }

/* ================= bottom sheets (#39a-f) ================= */
.modal-sheet.ms{
  background:#FFFDFB; border-radius:26px 26px 0 0;
  padding:14px 24px calc(30px + var(--safe-bottom));
  box-shadow:0 -20px 50px rgba(46,38,80,.25);
}
[data-theme="dark"] .modal-sheet.ms{ background:#2A1B54;
  box-shadow:0 -20px 50px rgba(12,6,28,.4); }
.ms-grab{ width:36px; height:4px; border-radius:3px; background:rgba(46,38,80,.16);
  margin:0 auto 18px; }
[data-theme="dark"] .ms-grab{ background:rgba(255,255,255,.2); }

.ms-head{ display:flex; align-items:center; gap:10px; }
.ms-mark{ width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; }
.ms-mark--leaf{ background:rgba(136,88,224,.14); }
.ms-mark--leaf span{ width:9px; height:15px; background:#8858E0;
  border-radius:50% 50% 50% 50%/64% 64% 36% 36%; }
.ms-mark--drop{ background:rgba(224,103,60,.14); }
.ms-mark--drop span{ width:9px; height:9px; border-radius:50%; background:#E0673C; }
.ms-mark--ring{ background:rgba(74,46,140,.13); }
.ms-mark--ring span{ width:16px; height:16px; border-radius:50%;
  border:1.6px solid #4A2E8C; box-sizing:border-box; }
[data-theme="dark"] .ms-mark--leaf{ background:rgba(196,175,255,.16); }
[data-theme="dark"] .ms-mark--leaf span{ background:#A98BE7; }
[data-theme="dark"] .ms-mark--drop{ background:rgba(242,117,74,.18); }
[data-theme="dark"] .ms-mark--drop span{ background:#F2754A; }
[data-theme="dark"] .ms-mark--ring{ background:rgba(196,175,255,.16); }
[data-theme="dark"] .ms-mark--ring span{ border-color:#C4AFFF; }

.ms-adds{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#8858E0; }
.ms-mark--drop ~ div .ms-adds{ color:var(--accent-signal); }
.ms-mark--ring ~ div .ms-adds{ color:#4A2E8C; }
[data-theme="dark"] .ms-adds,
[data-theme="dark"] .ms-mark--ring ~ div .ms-adds{ color:#C4AFFF; }
[data-theme="dark"] .ms-mark--drop ~ div .ms-adds{ color:#FFA07A; }
.ms-title{ margin:1px 0 0; font-size:18px; font-weight:600; color:var(--text-primary); }
.ms-lead{ margin:14px 0 0; font-size:13px; line-height:1.6;
  color:var(--text-secondary); text-wrap:pretty; }
.ms-slider{ margin-top:18px; }
.ms-input{
  width:100%; box-sizing:border-box; margin-top:16px; border-radius:14px;
  border:1px solid var(--border-strong); background:var(--bg-card-soft);
  padding:12px 14px; font-family:var(--font-sans); font-size:13px;
  color:var(--text-primary); resize:none;
}
.ms-actions{ display:flex; gap:10px; margin-top:16px; }
.ms-btn{ flex:1; border-radius:100px; padding:15px; cursor:pointer;
  font-family:var(--font-sans); font-size:14px; font-weight:600; }
.ms-btn--ghost{ background:transparent; border:1px solid var(--border-strong);
  color:var(--text-primary); }
.ms-btn--solid{ background:var(--cta-bg); color:var(--cta-text); border:none; }

/* voice: 64px record button and a live waveform instead of the plain timer */
.ms-rec{ display:flex; flex-direction:column; align-items:center; margin-top:20px; }
.ms-wave{ display:flex; align-items:center; gap:3px; height:28px; }
.ms-wave i{ width:3px; border-radius:2px; background:var(--accent); }
.ms-wave i:nth-child(1){ height:10px; } .ms-wave i:nth-child(2){ height:20px; }
.ms-wave i:nth-child(3){ height:14px; } .ms-wave i:nth-child(4){ height:24px; }
.ms-wave i:nth-child(5){ height:16px; } .ms-wave i:nth-child(6){ height:22px; }
.ms-wave i:nth-child(7){ height:12px; }
.ms-wave.is-live i{ animation:firepulse .9s ease-in-out infinite; }
.ms-wave.is-live i:nth-child(2){ animation-delay:.1s; }
.ms-wave.is-live i:nth-child(3){ animation-delay:.2s; }
.ms-wave.is-live i:nth-child(4){ animation-delay:.3s; }
.ms-wave.is-live i:nth-child(5){ animation-delay:.4s; }
.ms-wave.is-live i:nth-child(6){ animation-delay:.5s; }
.ms-wave.is-live i:nth-child(7){ animation-delay:.6s; }
.ms-rec-timer{ font-family:var(--font-mono); font-size:20px; font-weight:700;
  color:var(--text-primary); margin-top:10px; }
.ms-rec-btn{ width:64px; height:64px; border-radius:50%; border:none; margin-top:14px;
  background:var(--accent-signal); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 26px -12px rgba(194,82,31,.7); }
.ms-rec-btn span{ width:20px; height:20px; border-radius:4px; background:#FFF6F0;
  display:block; transition:border-radius .18s, width .18s, height .18s; }
.ms-rec-btn.is-idle span{ border-radius:50%; width:22px; height:22px; }
.ms-transcript{ margin-top:18px; border-radius:14px; padding:13px 14px;
  background:rgba(107,63,196,.08); border:1px dashed rgba(107,63,196,.3); }
[data-theme="dark"] .ms-transcript{ background:rgba(196,175,255,.1);
  border-color:rgba(196,175,255,.35); }
.ms-transcript-label{ font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.ms-transcript-text{ margin:7px 0 0; font-size:12.5px; line-height:1.55;
  color:var(--text-primary); text-wrap:pretty; }
.ms-fine{ margin:10px 0 0; font-size:10px; line-height:1.5; color:var(--text-secondary); }

/* voice: text / audio / both */
.vc-row{ display:flex; gap:8px; margin-top:10px; }
.vc-opt{ flex:1; display:flex; flex-direction:column; gap:2px; cursor:pointer;
  border-radius:14px; padding:12px 10px; text-align:left;
  background:var(--bg-card); border:1px solid var(--border-strong); }
.vc-opt:disabled{ opacity:.4; cursor:default; }
.vc-opt-name{ font-family:var(--font-sans); font-size:13px; font-weight:600;
  color:var(--text-primary); }
.vc-opt-sub{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-secondary); }

/* ================= first-run meditations intro (#36b) =================
   Three panels in the explainer shell, so the app teaches the same way twice:
   crumb + skip, narrator Spark, one illustration per panel. */
.mi-scene{ padding:0; display:none; overflow:hidden; }
.mi-scene.active{ display:block; }
.mi-track{ display:flex; height:100%; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; }
.mi-track::-webkit-scrollbar{ display:none; }
.mi-panel{ position:relative; flex:0 0 100%; scroll-snap-align:center;
  height:100%; box-sizing:border-box; display:flex; flex-direction:column;
  overflow:hidden; }
.mi-wash{ position:absolute; width:400px; height:400px; pointer-events:none; }
.mi-wash--coral{ left:-18%; top:70px;
  background:radial-gradient(circle,rgba(242,117,74,.13) 0%,rgba(242,117,74,0) 68%); }
.mi-wash--violet{ right:-22%; bottom:120px;
  background:radial-gradient(circle,rgba(136,88,224,.14) 0%,rgba(136,88,224,0) 68%); }

.mi-head{ position:relative; display:flex; justify-content:space-between; align-items:center;
  padding:max(calc(var(--safe-top) + 24px), 56px) 26px 12px;
  border-bottom:1px solid var(--border); flex:none; }
.mi-crumb{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-secondary); }
.mi-skip{ font-size:12px; font-weight:500; color:var(--text-primary); cursor:pointer; }

.mi-body{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column;
  padding:22px 26px 8px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* Spark is out of the intro entirely -- three panels of copy plus a 96px narrator
   overflowed the shorter phones, and the crumb already says who is talking. */
.mi-spark{ display:none; }
.mi-spark .spark-blink{ height:96px; filter:drop-shadow(0 16px 26px rgba(46,38,80,.14)); }
.mi-panel[data-panel="2"] .mi-spark{ padding:26px 0 22px; }
.mi-panel[data-panel="2"] .mi-spark .spark-blink{ height:82px; }
[data-theme="dark"] .mi-spark .spark-blink{ filter:drop-shadow(0 0 32px rgba(196,175,255,.8)); }

.mi-h2{ margin:0; font-family:var(--font-sans); font-weight:300; font-size:26px;
  line-height:1.24; letter-spacing:-.025em; color:var(--text-primary); text-wrap:pretty; }
.mi-h2 strong{ font-weight:700; }
.mi-rule{ height:1px; background:var(--border); margin:22px 0 18px; }
.mi-p{ margin:0; font-size:13.5px; line-height:1.7; color:var(--text-secondary);
  text-wrap:pretty; }
.mi-p--close{ margin-top:16px; font-size:13px; }
.mi-panel[data-panel="2"] .mi-p{ margin-top:10px; font-size:13px; }

/* panel 01: a session plants a petal in the mandala the user already grows */
.mi-figure{ flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; padding:18px 0; }
.mi-disc{ position:relative; width:158px; height:158px; border-radius:50%;
  background:#2E2650; overflow:hidden; flex:none; }
.mi-guide{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; border:1px dashed rgba(196,175,255,.34); }
.mi-guide--out{ width:132px; height:132px; }
.mi-guide--in{ width:86px; height:86px; border-color:rgba(196,175,255,.24); }
.mi-petal{ position:absolute; left:50%; bottom:50%; width:13px; height:22px;
  margin-left:-6.5px; margin-bottom:16px; transform-origin:50% 100%;
  background:#8858E0; border-radius:50% 50% 50% 50%/64% 64% 36% 36%;
  animation:cx-solidify 5s ease-in-out infinite; }
.mi-seed{ position:absolute; left:50%; top:50%; width:12px; height:12px;
  margin:-6px 0 0 -6px; border-radius:50%; background:#F2754A;
  box-shadow:0 0 14px rgba(242,117,74,.8); }
.mi-caption{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-secondary); text-align:center; }

/* panels 02 + 03: practice cards */
.mi-card{ display:flex; gap:14px; align-items:flex-start; border-radius:18px; }
.mi-card--hero{ margin-top:24px; padding:16px;
  background:var(--bg-card); border:1px solid var(--border-card);
  box-shadow:0 14px 30px -24px rgba(46,38,80,.45); }
.mi-card--soft{ padding:14px 16px; background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.7); }
.mi-card--tool{ align-items:center; padding:14px 16px;
  background:var(--bg-card); border:1px solid var(--border-card);
  box-shadow:0 14px 30px -26px rgba(46,38,80,.45); }
[data-theme="dark"] .mi-card--soft{ background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12); }
.mi-card-body{ flex:1; min-width:0; }
.mi-card-top{ display:flex; align-items:baseline; gap:8px; }
.mi-card-name{ font-size:15px; font-weight:700; color:var(--text-primary); }
.mi-card-name--sm{ font-size:14.5px; }
.mi-card-desc{ margin:5px 0 0; font-size:12.5px; line-height:1.6;
  color:var(--text-secondary); text-wrap:pretty; }
.mi-pill{ font-family:var(--font-mono); font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#6B3FC4;
  background:rgba(107,63,196,.13); border-radius:100px; padding:3px 8px; }
[data-theme="dark"] .mi-pill{ color:#C4AFFF; background:rgba(196,175,255,.16); }
.mi-then{ text-align:center; margin:10px 0; font-size:11px; color:var(--text-secondary); }
.mi-tools{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }

/* the five sigils again, at 44-56px in a tinted disc */
.mi-sigil{ position:relative; width:44px; height:44px; border-radius:50%; flex:none;
  transform:none; top:auto; right:auto; opacity:1; }
.mi-card--hero .mi-sigil{ width:56px; height:56px; }
.mi-sigil.sig-morning{ background:rgba(107,63,196,.13); --sigil-ink:#6B3FC4; }
.mi-sigil.sig-morning i{ bottom:15px; width:10px; height:17px; margin-left:-5px; }
.mi-sigil.sig-morning i:nth-child(3){ height:20px; }
.mi-sigil.sig-morning i:nth-child(6){ bottom:11px; width:6px; height:6px; margin-left:-3px; }
.mi-sigil.sig-night{ background:rgba(74,46,140,.13); }
.mi-sigil.sig-night i{ inset:auto; left:50%; top:50%; width:25px; height:25px;
  margin:-12.5px 0 0 -12.5px;
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 57%);
  mask:radial-gradient(circle,transparent 56%,#000 57%); }
.mi-sigil.sig-fire{ width:46px; height:46px; background:rgba(224,103,60,.14);
  --sigil-ink:#E0673C; display:flex; align-items:flex-end; justify-content:center;
  gap:3px; padding-bottom:15px; box-sizing:border-box; }
.mi-sigil.sig-fire i{ width:3.5px; opacity:1; }
.mi-sigil.sig-fire i:nth-child(1){ height:8px; }
.mi-sigil.sig-fire i:nth-child(2){ height:16px; }
.mi-sigil.sig-fire i:nth-child(3){ height:12px; }
.mi-sigil.sig-fire i:nth-child(4){ height:18px; }
.mi-sigil.sig-reset{ width:46px; height:46px; background:rgba(62,112,147,.13);
  --sigil-ink:#3E7093; }
.mi-sigil.sig-reset i:nth-child(1){ width:21px; height:21px; margin:-10.5px 0 0 -10.5px;
  border-width:1.6px; border-radius:4px; }
.mi-sigil.sig-reset i:nth-child(2){ width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border-radius:3px; }
.mi-sigil.sig-lighthouse{ width:46px; height:46px; background:rgba(176,114,30,.13);
  --sigil-ink:#B0721E; display:flex; flex-direction:column-reverse; align-items:center;
  justify-content:center; gap:2px; }
.mi-sigil.sig-lighthouse i{ width:3px; height:3px; }
.mi-sigil.sig-lighthouse i:nth-child(1){ width:5px; height:5px; box-shadow:none; }
[data-theme="dark"] .mi-sigil.sig-morning{ --sigil-ink:#C4AFFF; }
[data-theme="dark"] .mi-sigil.sig-fire{ --sigil-ink:#F2754A; }
[data-theme="dark"] .mi-sigil.sig-reset{ --sigil-ink:#8FC0E0; }
[data-theme="dark"] .mi-sigil.sig-lighthouse{ --sigil-ink:#E0B06A; }

/* clears the fixed tab bar, which stays visible on this interstitial */
.mi-foot{ position:relative; flex:none;
  padding:0 26px calc(90px + var(--safe-bottom)); display:flex;
  flex-direction:column; gap:16px; }
.mi-bars{ display:flex; gap:8px; }
.mi-bars span{ flex:1; height:3px; border-radius:2px; background:#DCD2F4; }
.mi-bars span.is-on{ background:var(--cta-bg); }
[data-theme="dark"] .mi-bars span{ background:rgba(255,255,255,.2); }
.mi-cta{ width:100%; border:none; border-radius:100px; padding:18px; cursor:pointer;
  background:var(--cta-bg); color:var(--cta-text);
  font-family:var(--font-sans); font-size:15px; font-weight:600;
  box-shadow:0 14px 30px -16px rgba(46,38,80,.8); }

/* ================= meditation player shell (#28a / #29a-b / #30a-e) =================
   One shell, per-session content. Reading order is fixed: header (session + count,
   sound pill, close) -> 2px progress -> focal element -> phase label -> guidance
   -> line bar -> crumb -> timer -> footer. */
.pl-crumb{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-secondary); }
.pl-head-right{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.pl-close{ font-size:22px; line-height:1; color:var(--text-primary); }

/* guidance is the loudest thing on the screen after the focal element */
/* sized down from 22px: a full session-open line at the old size filled the whole
   screen and pushed pause/next off the bottom. this fits the longest real caption
   we have with the footer still visible. */
.player-prompt{ margin:22px 0 0; font-family:var(--font-sans); font-weight:300;
  font-size:17px; line-height:1.5; letter-spacing:-.005em; text-align:center;
  color:var(--text-primary); text-wrap:pretty; max-width:320px; }
/* morning's guidance is the quieter one -- it sits under the timer, not above it */
.palette-morning .player-prompt{ margin-top:14px; max-width:270px;
  font-weight:400; font-size:14.5px; line-height:1.6; letter-spacing:0; }
.palette-night .player-prompt{ font-size:17px; line-height:1.5; }
.player-phase-label{ margin-top:18px; }

/* progress within the phase -- lines spoken, or points visited */
.pl-linebar{ width:170px; height:2px; border-radius:2px; margin-top:24px;
  background:var(--border); display:none; }
.pl-linebar.is-on{ display:block; }
.pl-linebar i{ display:block; height:100%; width:0%; border-radius:2px;
  background:var(--accent); transition:width .4s ease; }
.pl-hint{ margin-top:12px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-secondary);
  text-align:center; min-height:12px; }

.player-timer{ font-family:var(--font-mono); font-weight:400; font-size:20px;
  --x:0;
  letter-spacing:.02em; color:var(--text-secondary); }
.player-timer-row{ margin-top:20px; }
.palette-morning .player-timer{ font-size:26px; }
.palette-morning .player-timer-row{ margin-top:30px; }

.player-footer{ display:flex; gap:10px; }
.pl-btn{ flex:1; border-radius:100px; padding:16px; cursor:pointer;
  font-family:var(--font-sans); font-size:14px; font-weight:600; }
.pl-btn--ghost{ background:rgba(255,255,255,.6); color:var(--text-primary);
  border:1px solid var(--border-strong); }
.pl-btn--solid{ background:var(--cta-bg); color:var(--cta-text); border:none;
  box-shadow:0 14px 30px -16px rgba(46,38,80,.8); }
/* every player is light now, so they all share one footer treatment */

/* sound pill: a filled chip, and it reads as pressed when sound is off */
.sound-pill{ margin-left:0; margin-right:0; min-height:32px;
  background:rgba(46,38,80,.06); border:1px solid var(--border-strong);
  color:var(--text-primary); }
.player-overlay.is-muted .sound-pill{ background:rgba(46,38,80,.1); }
#player-captions-pill.is-off{ opacity:.55; }
/* two pills plus the close button on one row is genuinely tight on a 390px screen --
   the crumb was wrapping to two lines and the "narrating" badge was landing on top
   of it. tighter padding/gap buys the room back without shrinking the tap targets. */
.pl-head-right{ flex-wrap:nowrap; justify-content:flex-end; gap:8px; }
.pl-head-right .sound-pill{ padding:6px 10px; letter-spacing:.04em; gap:4px; }
#player-captions-pill{ font-size:9.5px; }
#player-sound-pill{ font-size:9.5px; }


/* read-along (#29b): the guidance becomes the screen and the circle shrinks to a cue */
/* read-along is deliberately text-first, so it stays the largest -- just not so
   large that a long line overflows, which is the same bug in a different mode */
.player-overlay.is-readalong .player-prompt{ font-size:19px; font-weight:500;
  line-height:1.45; margin-top:18px; }

/* ================= accessibility pass (@ui / @ux) =================
   Fixes from the contrast + tap-target audit. Every value here was measured, not
   guessed: the ratios quoted are what the audit computed against the real backdrop. */

/* --- tap targets. All of these were under 40px; the visual size is unchanged,
       the hit area grows via padding and is pulled back with negative margin. --- */
.pl-close{ min-width:44px; min-height:44px; display:inline-flex;
  align-items:center; justify-content:center; margin:-11px 0; }
.entry-delete-btn{ min-width:40px; min-height:40px; flex:none; display:inline-flex;
  align-items:center; justify-content:center; margin:-10px 0; }
.mi-skip, .ex-skip{ display:inline-flex; align-items:center; min-height:44px;
  padding:0 0 0 16px; margin:-14px 0; }
.ex-back{ min-width:44px; min-height:44px; display:inline-flex;
  align-items:center; justify-content:flex-start; margin:-11px 0 -11px -8px;
  padding-left:8px; }
.ml-how span, .jr-prompt-cta span{ display:inline-flex; align-items:center;
  min-height:40px; }
.ml-dur{ min-height:40px; display:inline-flex; align-items:center;
  justify-content:center; }
.ml-filter, .jr-filter{ min-height:40px; display:inline-flex; align-items:center; }
.chip{ min-height:40px; display:inline-flex; align-items:center; }
/* the slider track is 6px but the thumb is what you grab -- give the input real height */
.ink-range{ height:24px; background-clip:content-box; padding:9px 0; }

/* --- contrast. Each of these measured below 4.5:1 on small text. --- */
/* fire's phase label was 4.36:1 on its warm ground */
.palette-fire .player-phase-label{ color:#C2521F; }
.palette-morning .player-phase-label{ color:#6B3FC4; }
.palette-calm .player-phase-label{ color:#3E6E92; }
.palette-night .player-phase-label{ color:#5C4A9E; }
.palette-calm{ --accent:#3E6E92; }
.palette-night{ --accent:#5C4A9E; }
/* the lit chakra names the point you are on, in that chakra's own hue */
.palette-lighthouse .player-phase-label{ color:#3F7A46; }
/* milestone eyebrow was 4.07:1 */
.cx-eyebrow{ color:#A8441A; }
/* a sign in the home entry list was 4.07:1 */
.entry-sign{ color:#A8441A; }
/* the explainer step number was 4.07:1 on the dawn ground */
.ex-step-n{ color:#6B3FC4 !important; }
/* the journal prompt eyebrow was 4.36:1 against the inverted night card */
[data-theme="dark"] .jr-prompt .jr-mini{ color:#B23F14; }
/* worst offender: white on the accent chip in dark settings, 1.92:1 */
[data-theme="dark"] .chip.selected{ background:#C4AFFF; color:#241847; border-color:#C4AFFF; }

/* dark variants for the three fixes above -- the darker inks I used to lift the
   light-mode ratio are themselves too dark on a night ground */
[data-theme="dark"] .entry-sign{ color:#FFA07A; }
[data-theme="dark"] .ex-step-n{ color:#C4AFFF !important; }
.cx.is-bedtime .cx-eyebrow{ color:#FFA07A; }

/* remaining tap targets from the second audit pass */
.sound-pill{ min-height:40px; }
.mdx-close{ min-width:44px; min-height:44px; display:inline-flex;
  align-items:center; justify-content:center; margin:-11px 0; }
.hs-howto span{ display:inline-flex; align-items:center; min-height:40px; }
.st-time{ min-height:40px; }
/* the range input's visible track stays 6px; the grab area is the full 40px */
.ink-range{ height:40px; padding:17px 0; }

/* the milestone ring burst animates past its own box on purpose -- it is
   decorative and absolutely positioned, so let it paint outside */
.cx-discwrap{ overflow:visible; }

/* build stamp on the launch screen -- lets a stuck user see and clear a stale build */
.in-build{ text-align:center; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.06em; color:#6E6588; opacity:.65; cursor:pointer; margin-top:2px; }
[data-theme="dark"] .intro-scene .in-build{ color:rgba(237,234,247,.5); }

.boot-error{
  display:none; position:fixed; left:8px; right:8px; bottom:8px; z-index:9999;
  background:#B22A2A; color:#fff; border-radius:10px; padding:10px 12px;
  font-family:var(--font-mono); font-size:10.5px; line-height:1.45;
}

.ghost-shield{ position:fixed; inset:0; z-index:99998; background:transparent; }

.diag-panel{
  position:fixed; inset:12px; z-index:100000; overflow:auto;
  background:#111; color:#0f0; border-radius:10px; padding:12px;
  font-family:var(--font-mono); font-size:10px; line-height:1.5;
}
.diag-panel button{ margin-top:8px; padding:8px 12px; font-size:11px; }

/* ===================== SPARK / REALITY COACH =====================
   Values taken verbatim from design 42a (day) and 42b (night). The screen owns
   the full viewport height and ONLY .ck-thread scrolls, so the header and
   composer stay put while typing -- that's what makes it read as a chat app
   rather than a document. */
.ck-scene{
  display:none; flex-direction:column;
  height:100vh;            /* fallback: iOS < 15.4 ignores dvh entirely */
  height:100dvh;
  overflow:hidden;
  padding:0; box-sizing:border-box;
  background:linear-gradient(168deg,#FFF6F0 0%,#F6EDF8 46%,#EDE6FB 100%);
}
.screen.ck-scene.active{ display:flex; }
[data-theme="dark"] .ck-scene{
  background:linear-gradient(168deg,#6B3FC4 0%,#4A2E8C 52%,#241847 100%);
}

/* ---- header ---- */
.ck-head{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:calc(var(--safe-top) + 14px) 22px 16px;
  border-bottom:1px solid rgba(46,38,80,.08);
}
[data-theme="dark"] .ck-head{ border-bottom-color:rgba(255,255,255,.1); }
.ck-head-av{
  width:56px; height:56px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#FFF6F0,#EDE6FB);
  box-shadow:0 4px 12px rgba(46,38,80,.12);
}
[data-theme="dark"] .ck-head-av{ background:rgba(255,255,255,.12); box-shadow:none; }
.ck-head-av img{ width:44px; height:44px; object-fit:contain; }
.ck-head-text{ flex:1; min-width:0; }
.ck-title{ font-family:var(--font-sans); font-weight:600; font-size:16px; color:#2E2650; }
[data-theme="dark"] .ck-title{ color:#fff; }
.ck-sub{
  font-family:var(--font-mono); font-size:11px; color:#8A81A0;
  display:flex; align-items:center; gap:5px; margin-top:1px;
}
[data-theme="dark"] .ck-sub{ color:rgba(237,234,247,.6); }
.ck-dot{ width:6px; height:6px; border-radius:50%; background:#3FBF7F; flex:none; }
[data-theme="dark"] .ck-dot{ background:#5CE0A0; }
.ck-reset{
  flex:none; border:1px solid rgba(46,38,80,.18); background:transparent;
  color:#6E6588; font-family:var(--font-mono); font-weight:600; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:8px 13px; border-radius:100px; cursor:pointer;
}
[data-theme="dark"] .ck-reset{ border-color:rgba(255,255,255,.28); color:rgba(237,234,247,.8); }
.ck-reset:active{ transform:scale(.97); }

/* ---- thread ---- */
.ck-thread{
  flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:3px; padding:16px 18px 10px;
}
/* once the thread outgrows the screen, flex-end would clip the top of the
   history, so growth flips to normal top-down flow */
.ck-thread.is-full{ justify-content:flex-start; }

.ck-daymark{
  align-self:center; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.04em; color:#A08FAF; margin-bottom:6px;
}
[data-theme="dark"] .ck-daymark{ color:rgba(237,234,247,.45); }

.ck-row{ display:flex; gap:8px; align-items:flex-end; max-width:86%; margin-top:6px; }
.ck-row--first{ margin-top:14px; }
.ck-av{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; background:#EDE6FB;
}
[data-theme="dark"] .ck-av{ background:rgba(255,255,255,.14); }
.ck-av img{ width:26px; height:26px; object-fit:contain; }
/* keeps stacked bubbles aligned when the avatar is only on the first of a group */
.ck-av--spacer{ width:34px; flex:none; background:none; }

.ck-bubble{
  background:#fff; border-radius:18px 18px 18px 4px; padding:11px 15px;
  box-shadow:0 6px 16px -10px rgba(46,38,80,.3);
  font-family:var(--font-sans); font-size:14.5px; line-height:1.5;
  color:#2E2650; overflow-wrap:anywhere; white-space:pre-wrap;
}
[data-theme="dark"] .ck-bubble{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; box-shadow:none;
}
.ck-bubble strong{ font-weight:700; }

.ck-mine{
  align-self:flex-end; display:flex; flex-direction:column; align-items:flex-end;
  gap:4px; max-width:86%; margin-top:14px;
}
.ck-mine .ck-bubble{
  background:#2E2650; color:#FFF6F0; border-radius:18px 18px 4px 18px;
  padding:11px 16px; box-shadow:none; border:none;
}
[data-theme="dark"] .ck-mine .ck-bubble{
  background:#fff; color:#3A2470; -webkit-backdrop-filter:none; backdrop-filter:none;
}
.ck-meta{
  font-family:var(--font-mono); font-size:10px; color:#A08FAF; padding-right:4px;
}
[data-theme="dark"] .ck-meta{ color:rgba(237,234,247,.45); }

.ck-err{
  align-self:center; max-width:100%; text-align:center; margin-top:10px;
  font-size:12.5px; color:var(--danger);
}

/* typing dots, shown before each reply lands */
.ck-typing{ display:flex; gap:5px; align-items:center; padding:13px 16px; }
.ck-typing span{
  width:7px; height:7px; border-radius:50%; background:#B9AFD1;
  animation:coachdot 1.1s ease-in-out infinite;
}
[data-theme="dark"] .ck-typing span{ background:rgba(255,255,255,.55); }
.ck-typing span:nth-child(2){ animation-delay:.15s; }
.ck-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes coachdot{
  0%,60%,100%{ transform:translateY(0); opacity:.5 }
  30%{ transform:translateY(-4px); opacity:1 }
}

/* ---- quick replies: never face a blank input ---- */
.ck-quick{
  flex:none; display:flex; gap:8px; overflow-x:auto; padding:0 18px 8px;
  scrollbar-width:none;
}
.ck-quick::-webkit-scrollbar{ display:none; }
.ck-quick:empty{ display:none; }
.ck-chip{
  flex:none; white-space:nowrap; cursor:pointer;
  border:1px solid rgba(46,38,80,.16); background:rgba(255,255,255,.6);
  color:#2E2650; font-family:var(--font-sans); font-weight:500; font-size:12px;
  padding:9px 14px; border-radius:100px;
}
[data-theme="dark"] .ck-chip{
  border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.08); color:#fff;
}
.ck-chip:active{ transform:scale(.98); }

.ck-disclosure{
  flex:none; margin:0; text-align:center; padding-bottom:8px;
  font-family:var(--font-sans); font-size:10px; color:#A08FAF;
}
[data-theme="dark"] .ck-disclosure{ color:rgba(237,234,247,.5); }

/* ---- composer ---- */
.ck-composer{
  flex:none; display:flex; gap:10px; align-items:flex-end;
  padding:0 18px calc(78px + var(--safe-bottom));
}
.ck-input{
  flex:1; resize:none; max-height:130px; border:none;
  background:#fff; border-radius:22px; padding:14px 18px;
  font-family:var(--font-sans); font-size:14px; line-height:1.4; color:#2E2650;
  box-shadow:0 4px 14px rgba(46,38,80,.08);
}
.ck-input::placeholder{ color:#A08FAF; }
.ck-input:focus{ outline:none; }
[data-theme="dark"] .ck-input{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  color:#fff; box-shadow:none;
}
[data-theme="dark"] .ck-input::placeholder{ color:rgba(237,234,247,.55); }
.ck-send{
  flex:none; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:#2E2650; color:#FFF6F0;
  box-shadow:0 8px 18px -8px rgba(46,38,80,.7);
}
[data-theme="dark"] .ck-send{ background:#fff; color:#3A2470; box-shadow:none; }
.ck-send:disabled{ opacity:.4; cursor:default; }
.ck-send:not(:disabled):active{ transform:scale(.95); }

/* ============ NAV: raised coach button + settings gear on home ============
   Coach is the paid feature, so it gets the centre slot and real emphasis
   instead of being one of five equal tabs. Settings moved out of the nav into
   a gear on the home header to free the slot -- it's a twice-ever destination,
   journal is a daily one, so journal keeps the tab. */
.nav-btn--coach{ position:relative; }
/* "halo" treatment (option 4). Depth comes from the sphere shading plus two soft
   coral rings that separate it from the bar -- not from gloss, which dates fast.
   The radial gradient puts the light source top-left, matching every other lit
   surface in the app. */
.coach-fab{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; line-height:1;
  /* pulls the circle up out of the bar so it reads as raised, not just coloured */
  margin-top:-21px; margin-bottom:1px;
  color:#fff;
  background:radial-gradient(circle at 34% 28%, #FF9A6B 0%, #F2754A 48%, #CF5A26 100%);
  box-shadow:0 6px 14px rgba(194,82,31,.4),
             0 0 0 4px rgba(242,117,74,.18),
             0 0 0 9px rgba(242,117,74,.09),
             inset 0 -2px 4px rgba(120,40,10,.3);
  transition:transform .12s ease;
}
.nav-btn--coach:active .coach-fab{ transform:scale(.93); }
.nav-btn--coach.active{ color:var(--accent-signal); font-weight:700; }
/* the generic .nav-btn.active rule recolours .icon; the fab carries its own
   gradient, so the active state shows in the label instead */

/* dark mode: coral on deep purple loses contrast fast, so the rings get stronger
   and a real glow is added -- otherwise the halo sinks into the gradient */
[data-theme="dark"] .coach-fab{
  box-shadow:0 6px 14px rgba(0,0,0,.45),
             0 0 0 4px rgba(242,117,74,.28),
             0 0 0 9px rgba(242,117,74,.14),
             0 0 24px rgba(242,117,74,.6),
             inset 0 -2px 4px rgba(120,40,10,.35);
}

/* the rings extend ~9px past the circle, so nothing in the chain may clip them */
.nav-btn--coach{ overflow:visible; }

/* the raised circle overflows the bar, so the bar can't clip it */
.bottom-nav{ overflow:visible; }

.hs-gear{
  width:34px; height:34px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.55); border:1px solid var(--border-card);
  color:var(--text-secondary); font-size:15px; line-height:1; cursor:pointer;
}
.hs-gear:active{ transform:scale(.95); }
[data-theme="dark"] .hs-gear{ background:rgba(255,255,255,.12); color:var(--text-primary); }


/* expression frames: hard cut, never a fade. a blink that cross-dissolves reads
   as a ghost rather than an eyelid. */
.spark-blink img{ transition:none; }

/* the lid ellipses are drawn for the neutral face, so they must not blink over a
   rendered expression (see sparkExpress) */
.spark-blink.is-expressing .sb-lid{ opacity:0 !important; animation:none !important; }


/* ---- older-iOS safety net ----
   Progressive enhancement for devices below iOS 15. These fallbacks cost nothing
   on modern browsers (the modern property simply wins) but stop the layout from
   collapsing entirely on an older phone. */
@supports not (height: 100dvh) {
  body, .ck-scene { height: 100vh; }
}
@supports not (aspect-ratio: 1 / 1) {
  /* proportional to each instance's height, so the header Spark stays small */
  .spark-blink { width: 120px; }
  .spark-blink--co { width: 37px; }
  .ck-head-av .spark-blink { width: 40px; }
  .pg-week span { min-height: 34px; }
  .breath-circle { width: 206px; height: 206px; }
}