/* ============================================================
   Reprogram Within — design tokens
   Night-first: near-black with four soft pastels. Gold is the one signature
   light (orb, glow, primary actions). Black is the default on every screen;
   the light theme exists only when a person turns it on in Settings.
   Fully offline: system font stacks only, no webfonts.
   ============================================================ */
:root {
  --bg:        #0B0A10;
  --surface:   #15131D;
  --surface-2: #1E1B29;
  --bar:       #0F0E15;
  --line:      #2A2638;
  --text:      #F3EEE6;
  --text-2:    #A49FB8;
  --text-read: #DDD8E6;
  --ink:       #1E1B29;   /* text on a pastel fill */

  --gold:      #E9C97E;  --gold-hi: #F5DEA3;  --gold-deep: #C9A24E;
  --purple:    #C8B3F5;
  --turquoise: #8FDDD6;
  --mint:      #B9EBD0;
  --danger:    #D96A5B;

  --glow-gold: rgba(233,201,126,0.22);
  --glow-purple: rgba(200,179,245,0.18);
  --glow-turq: rgba(143,221,214,0.16);
  --glow-mint: rgba(185,235,208,0.14);

  --font-display: ui-serif, Georgia, 'New York', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --r-s: 12px; --r-m: 16px; --r-l: 24px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar: 76px;
}
:root[data-theme="light"] {
  --bg: #F8F5FB; --surface: #FFFFFF; --surface-2: #F1ECF7; --bar: #FFFFFF; --line: #E4DEF0;
  --text: #2E2B45; --text-2: #6E6886; --text-read: #3B3752; --ink: #1E1B29;
  --glow-gold: rgba(233,201,126,0.35); --glow-purple: rgba(200,179,245,0.3); --glow-turq: rgba(143,221,214,0.28); --glow-mint: rgba(185,235,208,0.26);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.5;
  min-height: 100dvh; overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font: inherit; color: var(--text); }
a { color: var(--purple); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- ambient glows (the signature light) ---------- */
#glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#glow::before, #glow::after { content: ''; position: absolute; border-radius: 50%; }
#glow::before { left: -140px; top: -160px; width: 440px; height: 440px; background: radial-gradient(circle, var(--glow-purple), transparent 68%); }
#glow::after  { left: 50%; bottom: -220px; width: 620px; height: 420px; margin-left: -310px; background: radial-gradient(ellipse at center, var(--glow-gold), transparent 70%); opacity: 0.8; transition: opacity 1.5s ease; }
body.is-playing #glow::after { animation: breathe 7s ease-in-out infinite; opacity: 1; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.is-playing #glow::after { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- shell ---------- */
#app { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: calc(var(--safe-top) + 14px) 20px calc(var(--safe-bottom) + var(--tabbar) + 16px); }
#topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; min-height: 44px; }
.avatar-btn { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text-2); font-size: 0.95rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-block; position: relative; flex: 0 0 36px; }
.avatar.purple { background: var(--purple); } .avatar.gold { background: var(--gold); } .avatar.turquoise { background: var(--turquoise); } .avatar.mint { background: var(--mint); }
.avatar.little::after { content: ''; position: absolute; right: -4px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--purple); border: 2px solid var(--bg); }
.pill-link { font-size: 0.85rem; color: var(--gold); border: 1px solid rgba(233,201,126,0.5); border-radius: 999px; padding: 6px 14px; min-height: 34px; display: inline-flex; align-items: center; }

main h1 { font-family: var(--font-display); font-weight: 400; font-size: 1.65rem; line-height: 1.2; margin-bottom: 6px; }
main h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin: 22px 0 10px; }
.sub { color: var(--text-2); font-size: 0.95rem; margin-bottom: 16px; line-height: 1.45; }
.eyebrow { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.eyebrow.gold { color: var(--gold); } .eyebrow.purple { color: var(--purple); } .eyebrow.turquoise { color: var(--turquoise); } .eyebrow.mint { color: var(--mint); }
.serif { font-family: var(--font-display); }
.read { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.65; color: var(--text-read); }
.read p { margin-bottom: 1em; } .read strong { color: var(--text); } .read table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 0.9rem; } .read td, .read th { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

/* ---------- cards & controls ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-bottom: 12px; }
.card.tappable:active { background: var(--surface-2); }
.card.gold { border-color: rgba(233,201,126,0.45); background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.card.turq { border-color: rgba(143,221,214,0.45); background: linear-gradient(135deg, rgba(143,221,214,0.18), rgba(143,221,214,0.05)); }
.card.mint { border-color: rgba(185,235,208,0.45); background: linear-gradient(135deg, rgba(185,235,208,0.18), rgba(185,235,208,0.05)); }
.card.purple { border-color: rgba(200,179,245,0.45); background: linear-gradient(135deg, rgba(200,179,245,0.18), rgba(200,179,245,0.05)); }
.row { display: flex; align-items: center; gap: 12px; }
.row .grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.title { font-weight: 600; }
.meta { color: var(--text-2); font-size: 0.85rem; line-height: 1.4; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; }
.dot svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 2; }
.dot.gold { background: var(--gold); } .dot.purple { background: var(--purple); } .dot.turquoise { background: var(--turquoise); } .dot.mint { background: var(--mint); } .dot.plain { background: var(--surface-2); } .dot.plain svg { stroke: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); font-weight: 600; font-size: 0.95rem; color: var(--text);
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.primary:active { background: var(--gold-deep); }
.btn.turq { background: var(--turquoise); border-color: var(--turquoise); color: var(--ink); }
.btn.mint { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.btn.purple { background: var(--purple); border-color: var(--purple); color: var(--ink); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: rgba(217,106,91,0.4); background: transparent; }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: 0.85rem; }
.btn.block { width: 100%; }
.btn.big { min-height: 56px; font-size: 1.05rem; }
.btn:disabled { opacity: 0.45; cursor: default; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.icon-btn svg { width: 18px; height: 18px; fill: var(--gold); }
.icon-btn.playing { background: var(--gold); } .icon-btn.playing svg { fill: var(--ink); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: 0.85rem; color: var(--text-2); }
.field input[type="text"], .field input[type="password"], .field select, .field input[type="time"], .field input[type="number"], .field textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; min-height: 48px; width: 100%;
}
.field textarea { min-height: 120px; line-height: 1.5; }
.field input[type="range"] { accent-color: var(--gold); min-height: 32px; width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; min-height: 40px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 0.9rem; }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 600; }
.chip.purple[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); }
.chip.turq[aria-pressed="true"] { background: var(--turquoise); border-color: var(--turquoise); }
.chip.mint[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); }
.chip.muted { color: var(--text-2); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; }
.badge.gold { background: rgba(233,201,126,0.18); color: var(--gold); } .badge.purple { background: rgba(200,179,245,0.18); color: var(--purple); }
.badge.turq { background: rgba(143,221,214,0.18); color: var(--turquoise); } .badge.mint { background: rgba(185,235,208,0.18); color: var(--mint); }
.badge.fill-gold { background: var(--gold); color: var(--ink); } .badge.fill-mint { background: var(--mint); color: var(--ink); } .badge.fill-purple { background: var(--purple); color: var(--ink); } .badge.fill-turq { background: var(--turquoise); color: var(--ink); }
.empty { text-align: center; color: var(--text-2); padding: 32px 16px; border: 1px dashed var(--line); border-radius: 18px; }

/* the orb: idle / playing (breathing) / recording */
.orb { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 45% 40%, var(--gold-hi), var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 60px rgba(233,201,126,0.5); margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.orb.small { width: 48px; height: 48px; box-shadow: 0 0 28px rgba(233,201,126,0.5); }
.orb.turq { background: radial-gradient(circle at 45% 40%, #C9F1ED, var(--turquoise) 55%, #5FB8B0); box-shadow: 0 0 60px rgba(143,221,214,0.45); }
.orb svg { width: 44px; height: 44px; fill: var(--ink); }
body.is-playing .orb.live { animation: orb 4.4s ease-in-out infinite; }
@keyframes orb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.orb.rec { animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 50% { transform: scale(1.06); box-shadow: 0 0 80px rgba(143,221,214,0.6); } }

/* mixer */
.mixer { display: flex; flex-direction: column; gap: 12px; }
.mixer .row label { width: 72px; font-size: 0.9rem; }
.mixer input[type="range"] { flex: 1; accent-color: var(--gold); min-height: 32px; }
.mixer .meta { min-width: 92px; text-align: right; }

/* big begin button */
.begin { width: 100%; min-height: 60px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 600; font-size: 1.1rem; box-shadow: 0 8px 40px rgba(233,201,126,0.28); display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 14px; }
.begin svg { width: 24px; height: 24px; fill: var(--ink); }

/* teleprompter */
.prompter { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.7; background: var(--surface); border-radius: 18px; border: 1px solid var(--line); padding: 22px; max-height: 44dvh; overflow-y: auto; white-space: pre-wrap; margin-bottom: 16px; color: var(--text-read); }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--turquoise); animation: recblink 1.2s infinite; }
@keyframes recblink { 50% { opacity: 0.25; } }
.rec-time { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.meter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.meter { flex: 1; height: 10px; border-radius: 999px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.meter-fill { width: 100%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--turquoise), var(--mint)); transform: scaleX(0); transform-origin: left center; transition: transform 90ms linear; }
.meter-row .meta.ok { color: var(--mint); }
.card.just-saved { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }

.env-banner, .warn { border: 1px solid rgba(217,106,91,0.45); background: rgba(217,106,91,0.12); border-radius: 18px; padding: 12px 14px; margin-bottom: 16px; font-size: 0.9rem; line-height: 1.5; }
.env-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.env-banner strong, .warn { color: var(--danger); }
.env-banner code { word-break: break-all; font-size: 0.82rem; color: var(--gold); }
.support { border: 1px solid rgba(143,221,214,0.5); background: linear-gradient(135deg, rgba(143,221,214,0.16), rgba(143,221,214,0.04)); border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.support .title { color: var(--turquoise); }
.support ul { list-style: none; margin-top: 10px; } .support li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.95rem; }

.story-body { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.8; white-space: pre-wrap; color: var(--text-read); }
.script-lines .line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.45; }
.script-lines .line:last-child { border-bottom: none; }

/* progress dots / stars */
.dots { display: flex; gap: 6px; flex-wrap: wrap; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); display: inline-block; }
.dots i.off { background: var(--line); }

/* ---------- tab bar ---------- */
#tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--bar); border-top: 1px solid var(--line); padding: 8px 6px calc(var(--safe-bottom) + 10px); display: flex; justify-content: space-around; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.7rem; color: var(--text-2); min-width: 56px; min-height: 48px; justify-content: center; }
.tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.tab[aria-current="page"] { color: var(--gold); }

/* ---------- modal / sheet ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 120; background: rgba(5,4,10,0.72); display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--surface); border-radius: var(--r-l) var(--r-l) 0 0; border: 1px solid var(--line); border-bottom: none; width: 100%; max-width: 720px; max-height: 90dvh; overflow-y: auto; padding: 22px 18px calc(var(--safe-bottom) + 22px); }
.modal h2 { margin-top: 0; }
@media (min-width: 700px) { .modal-wrap { align-items: center; } .modal { border-radius: var(--r-l); border-bottom: 1px solid var(--line); } }

/* ============================================================
   NIGHT SCREEN — dim, red-shifted, child-safe. No blues, no whites.
   ============================================================ */
#night { position: fixed; inset: 0; z-index: 100; background: #0A0305; color: #DC6E52; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.night-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 24px; width: 100%; max-width: 420px; }
.night-glow { width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(190,70,48,0.55), rgba(190,70,48,0.1) 60%, transparent 72%); }
body.is-playing .night-glow { animation: nbreathe 8s ease-in-out infinite; }
@keyframes nbreathe { 0%,100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.12); opacity: 1; } }
.night-story { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.35; text-align: center; }
.night-status { font-size: 0.95rem; color: #C0604A; min-height: 1.2em; padding: 6px 14px; border-radius: 999px; }
.night-status:not(:empty) { border: 1px solid rgba(220,110,82,0.35); }
.night-toggle { width: 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(220,110,82,0.6); display: flex; align-items: center; justify-content: center; }
.night-toggle svg { width: 40px; height: 40px; fill: #DC6E52; }
.night-toggle .ic-play { display: none; }
#night.paused .ic-play { display: block; } #night.paused .ic-pause { display: none; }
.night-timer { font-variant-numeric: tabular-nums; font-size: 1rem; color: #C0604A; min-height: 1.2em; }
.night-exit { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.9rem; color: #C0604A; }
.night-exit.armed { color: #DC6E52; }
.exit-ring { width: 46px; height: 46px; transform: rotate(-90deg); }
.exit-ring circle { fill: none; stroke-width: 2.5; }
.ring-track { stroke: rgba(220,110,82,0.35); }
.ring-fill { stroke: #DC6E52; stroke-dasharray: 100.5; stroke-dashoffset: 100.5; }
.night-exit.armed .ring-fill { transition: stroke-dashoffset 8s linear; stroke-dashoffset: 0; }
.night-confirm { display: flex; gap: 10px; margin-top: 4px; }
.night-btn { min-height: 48px; padding: 12px 20px; border-radius: 999px; border: 1px solid #DC6E52; color: #DC6E52; font-size: 1rem; }
.night-btn.ghost { border-color: rgba(220,110,82,0.4); color: #C0604A; }
.voice-pick { text-align: left; padding: 0; min-width: 0; }
.voice-pick .title, .voice-pick .meta { overflow-wrap: anywhere; }

/* ---------- kid screen ---------- */
#kid { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 28px; text-align: center; }
#kid .orb { width: 200px; height: 200px; box-shadow: 0 0 70px rgba(233,201,126,0.5); } #kid .orb svg { width: 72px; height: 72px; }
#kid h1 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; }
#kid .line { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.45; max-width: 320px; }

/* ---------- breath overlay ---------- */
#breath { position: fixed; inset: 0; z-index: 95; background: rgba(11,10,16,0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px; text-align: center; }
#breath .orb { transition: transform 2.5s ease-in-out; }
#breath .cue { font-family: var(--font-display); font-size: 1.5rem; }

/* ---------- toast ---------- */
#toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + var(--tabbar) + 12px); transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--line); color: var(--text); padding: 12px 18px; border-radius: var(--r-s); z-index: 200; max-width: 90vw; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,0.4); font-size: 0.9rem; }

/* offer sheet */
.offer { position: fixed; left: 16px; right: 16px; bottom: calc(var(--safe-bottom) + var(--tabbar) + 12px); z-index: 70; background: var(--surface); border: 1px solid rgba(233,201,126,0.5); border-radius: 18px; padding: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }

/* ---------- native controls in the dark palette ---------- */
select { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 8px 32px 8px 12px; min-height: 40px; font-size: 0.9rem; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A49FB8' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; max-width: 100%; }
select option { background: var(--surface-2); color: var(--text); }
input[type="time"], input[type="date"] { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; min-height: 40px; color-scheme: dark; }
:root[data-theme="light"] input[type="time"] { color-scheme: light; }
input[type="checkbox"] { accent-color: var(--gold); width: 20px; height: 20px; }
.btn.small { white-space: nowrap; }
.row.wrap { flex-wrap: wrap; }
.mixer .row { flex-wrap: wrap; }
.mixer .row input[type="range"] { flex: 1 1 120px; min-width: 100px; }
.mixer .row select { flex: 0 1 auto; }
textarea, input[type="text"], input[type="password"], input[type="number"] { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; min-height: 48px; width: 100%; line-height: 1.5; }
textarea::placeholder, input::placeholder { color: var(--text-2); opacity: 0.8; }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 18px; }
.btn.primary svg, .btn.turq svg, .btn.mint svg, .btn.purple svg { fill: var(--ink); }
.begin svg { width: 24px; height: 24px; }
.card.block { display: block; width: 100%; }
/* Programmatic focus on the main region (for screen readers) must not draw a ring in WebKit. */
#view:focus, #view:focus-visible, main:focus { outline: none; }
#topbar:empty { display: none; }