/* 🔴 RESKINNED 2026-10-16 (`Evolution App 02`): the "Lapis" direction Shams chose, after a panel of UI
   Designer, Brand Guardian and Accessibility Auditor. Same navy, gold and cream brand, deepened toward
   a lapis blue, with a night theme that follows the phone's own setting. Gold is for fills and large
   ornament ONLY; words in gold use --gold-text (the plain gold measures 2.2:1 on cream, the AA floor is
   4.5). Contrast checked on every pair: see DECISION_LOG.md 2026-10-16. Body text 18px; small text 14px
   or more; 44px touch targets.

   The Living Blueprint — shared visual system.
   Palette and shapes match the reference screen Shams shared 2026-09-25: deep navy for
   "presence" surfaces (today's practice, the tracker), warm cream for reading surfaces
   (journal, voice notes), gold for the one accent color everything else defers to. */

:root {
  color-scheme: light dark;
  --navy: #2d3a8c;
  --navy-deep: #1d2655;
  --gold: #c9a45c;
  --gold-soft: #e3cd9a;
  --gold-text: #8a6a22;
  --cream: #f6f3ea;
  --cream-card: #fffdf8;
  --ink: #1d2140;
  --ink-soft: #545a7a;
  --accent: #2d3a8c;
  --edge: #7f84a8;
  --on-navy: #faf6ec;
  --on-navy-soft: #cfd3ee;
  --danger-text: #8a3324;
  --danger-bg: #fbe9e7;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-pill: 999px;
  font-size: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --navy: #2b2f66;
    --cream: #0f1230;
    --cream-card: #181c45;
    --ink: #ece8dc;
    --ink-soft: #b6b8d4;
    --accent: #c9a45c;
    --gold-text: #c9a45c;
    --edge: #7479a8;
    --danger-text: #f3b8ab;
    --danger-bg: #3a1f26;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.serif { font-family: Georgia, "Times New Roman", serif; }

.screen {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 18px 96px;
}

/* ── header ─────────────────────────────────────────────────────────── */
.lb-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}
.lb-header .brand {
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.lb-header h1 {
  font-family: Georgia, serif;
  font-size: 26px;
  margin: 4px 0 2px;
}
.lb-header .sub { color: var(--ink-soft); font-style: italic; font-size: 14px; }
.lb-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream-card);
  border: 1px solid var(--edge);
}

/* ── generic card ───────────────────────────────────────────────────── */
.card {
  background: var(--cream-card);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(30, 25, 10, 0.06);
}
.card.navy {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--on-navy);
}
.card.navy .eyebrow { color: var(--gold-soft); }
.card.navy .ink-soft { color: var(--on-navy-soft); }

.eyebrow {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}

/* Joanna's ask, `Members App 20`, 2026-10-01: the daily check-in's own title stands out more
   than an ordinary section label — larger, bolder, normal case rather than the small uppercase
   eyebrow style every other section header uses. */
.eyebrow-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--accent);
  margin: 0 0 10px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.row-link { text-decoration: none; color: inherit; }
.row .chev { color: var(--gold-text); font-size: 18px; }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-outline { background: transparent; border: 1.5px solid var(--edge); color: var(--ink); }
.btn-block { display: block; width: 100%; }

/* ── progress ───────────────────────────────────────────────────────── */
.progress-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}
.card.navy .progress-track { background: rgba(255,255,255,0.14); }
.progress-fill { height: 100%; background: var(--gold); }

/* ── mood row (journal) ─────────────────────────────────────────────── */
.mood-row { display: flex; gap: 10px; margin: 10px 0 14px; }
.mood { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--edge);
        background: var(--cream); display: flex; align-items: center; justify-content: center;
        font-size: 18px; }

.quote-box {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 10px 14px;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

/* ── voice note row ─────────────────────────────────────────────────── */
.voice-note { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.voice-note .play { width: 34px; height: 34px; border-radius: 50%; background: var(--gold);
  color: var(--navy-deep); display: flex; align-items: center; justify-content: center; }
.voice-note .meta { flex: 1; }
.voice-note .time { color: var(--ink-soft); font-size: 14px; }
/* The Read/transcript block sits BELOW `.voice-note` (a flex row), not inside it — see
   `renderVoiceNote`'s own comment, 2026-10-02 — so its `.time` text needs this pairing too. */
.voice-note-block .time { color: var(--ink-soft); font-size: 14px; }

.record-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--gold);
  color: var(--navy-deep); display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin: 6px auto; border: none; }

/* Recording state — Joanna's phone test, 2026-09-26: she couldn't tell whether it had
   started recording, since the button only swapped its icon. Pulses red while live. */
.record-btn.recording { background: #e5484d; animation: rec-pulse 1.3s ease-in-out infinite; }
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0.55); }
  50% { box-shadow: 0 0 0 16px rgba(229,72,77,0); }
}

/* Busy/transcribing state — Joanna's own follow-up feedback, `Members App 18`, 2026-09-30: the
   button used to stay red (still looking like it was recording) through the whole gap between
   her tap and the upload finishing. A distinct, non-pulsing color makes "stopped, now
   processing" visually different from both idle and live. The separate amplitude-bar
   visualizer below the button (this file's own prior fix for "couldn't tell if it started") is
   retired on her same note — redundant now that the button itself changes color while live. */
.record-btn.busy { background: var(--ink-soft); animation: none; }

/* ── segmented toggle ───────────────────────────────────────────────── */
.segmented { display: flex; background: rgba(255,255,255,0.1); border-radius: var(--radius-pill);
  padding: 3px; width: fit-content; }
.segmented button { border: none; background: transparent; padding: 6px 16px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; color: var(--on-navy); cursor: pointer; }
.segmented button.active { background: var(--gold); color: var(--navy-deep); }

/* ── horizontal scroller (meditations) ─────────────────────────────── */
.hscroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.hcard { min-width: 150px; border-radius: var(--radius-md); overflow: hidden; background: var(--navy);
  color: var(--on-navy); padding: 14px; flex-shrink: 0; }
.hcard .tag { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-soft); }
.hcard .title { font-family: Georgia, serif; margin: 6px 0; font-size: 15px; }
.hcard .len { font-size: 14px; color: var(--on-navy-soft); }

/* ── bottom nav ─────────────────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 480px; margin: 0 auto;
  background: var(--cream-card);
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex; justify-content: space-around;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-soft); font-size: 14px; text-decoration: none; }
.tab.active { color: var(--accent); font-weight: 700; }
.tab .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0; }
.tab.active .dot { opacity: 1; }

/* ── the daily check-in (practice.html) ────────────────────────────────
   🔴 `Members App 20`, 2026-10-01: redesigned from a 1-5 tap scale to a plain, unranked list
   of described options (reuses `.choice-btn` below) — see `practice.py`'s own docstring for
   why. `.tap-scale`/`.tap-dot` below are now used only by `questionnaire.html`. */
.spine-item { margin-bottom: 18px; }
.spine-item .stem { font-size: 16px; margin-bottom: 8px; }
.tap-scale { display: flex; gap: 8px; }
.tap-dot { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--edge);
  background: var(--cream); display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.tap-dot.selected { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }

/* ── choosing prompt (practice.html) ──────────────────────────────────── */
.choice-btn { display: block; width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 10px;
  border-radius: var(--radius-md); border: 1.5px solid var(--edge); background: var(--cream);
  font-size: 14px; color: var(--ink); cursor: pointer; }
.choice-btn.selected { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); font-weight: 600; }
.breath-pause { text-align: center; padding: 30px 0; color: var(--ink-soft); font-style: italic; }

/* ── open journal entry list (journal.html) ──────────────────────────── */
.journal-entry { border-bottom: 1px solid rgba(0,0,0,0.06); padding: 12px 0; }
.journal-entry .when { font-size: 14px; color: var(--ink-soft); margin-bottom: 4px; }
.journal-entry .text { font-size: 14px; white-space: pre-wrap; }
.journal-entry .del { color: var(--ink-soft); font-size: 14px; text-decoration: underline;
  cursor: pointer; background: none; border: none; padding: 4px 0 0; }

/* ── e-reader passage toolbar (reader.html) ───────────────────────────── */
.passage { position: relative; margin-bottom: 18px; padding: 4px 4px 4px 12px; border-left: 3px solid transparent; }
.passage.highlighted { border-left-color: var(--gold); background: rgba(201,164,92,0.08); }
.passage-toolbar { display: flex; gap: 14px; margin-top: 6px; font-size: 14px; }
.passage-toolbar button { background: none; border: none; color: var(--ink-soft); cursor: pointer;
  font-size: 14px; padding: 0; }
.passage-toolbar button.active { color: var(--gold-text); font-weight: 700; }
.passage-note { font-size: 14px; color: var(--ink-soft); margin-top: 6px; font-style: italic; }
.disabled-note { font-size: 14px; color: var(--ink-soft); }

/* ── auth screens ───────────────────────────────────────────────────── */
.auth-wrap { max-width: 380px; margin: 12vh auto 0; padding: 0 24px; }
.field { display: block; width: 100%; padding: 13px 16px; margin-bottom: 12px;
  border: 1.5px solid var(--edge); border-radius: var(--radius-md); font-size: 17px;
  background: var(--cream-card); color: var(--ink); }
.field:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.auth-note { text-align: center; color: var(--ink-soft); font-size: 14px; margin-top: 14px; }
.auth-note a { color: var(--accent); font-weight: 600; }
.error-banner { background: var(--danger-bg); color: var(--danger-text); border-radius: var(--radius-md);
  padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }

/* Password show/hide — Joanna's phone test, 2026-09-26. */
.field-wrap { position: relative; margin-bottom: 12px; }
.field-wrap .field { margin-bottom: 0; padding-right: 44px; }
.field-wrap .toggle-visibility { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; font-size: 18px; padding: 8px; cursor: pointer; line-height: 1; }

/* ── the standing global care route — every surface where she writes freely ────────────
   Extends the business's own already-ruled "global-route-on-every-surface" law
   (see wp-pseo/partnerships/reference/VERIFIED_CARE_ROUTES.md) to this app, added
   `Members App 09`, 2026-09-27, closing the live gap `Members App 08` found: her own
   words could already be quoted back to her with no door beside them. Permanent, quiet,
   shown to every reader regardless of what she wrote, so its presence carries zero
   information about her. No analytics on it — ever. */
.care-line { font-size: 14px; color: var(--ink-soft); text-align: center;
  line-height: 1.5; margin: 18px 0 6px; }
.care-line a { color: inherit; text-decoration: underline; }

/* Added 2026-10-15 (`Evolution App 01`), from the independent accessibility audit: a visible
   keyboard focus ring that meets 3:1 on the cream cards, and 44px minimum touch targets. */
.btn:focus-visible, .tab:focus-visible, a:focus-visible, .field:focus-visible,
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.btn, .tab { min-height: 44px; }

/* Recording stays obvious without the pulse for anyone who asked their phone for less motion. */
@media (prefers-reduced-motion: reduce) {
  .record-btn.recording { animation: none; }
}

/* How Evolution shows (Lapis direction): gold edges on the cards and a gold hairline under the title. */
body.evolution .card { border-top: 3px solid var(--gold); }
body.evolution .lb-header h1::after { content: ""; display: block; width: 56px; height: 2px;
  background: var(--gold); margin-top: 8px; }