/* Restored Word — a quiet place to meet with God.

   System: bottom tab bar (native iOS/Android feel), refined serif for
   Scripture, deep charcoal surfaces, warm gold accent, intentional
   dark mode. Design tokens are the ground layer — every visual choice
   downstream reads from :root. */

:root {
  /* ---- Palette --------------------------------------------------
     Deep charcoal ground, elevated surfaces at two heights, a single
     warm-gold accent (used sparingly), forest and navy for
     contextual tones (mornings, evenings, walks). Ivory text on a
     short ramp to a muted gray. */
  --bg:               #0F1115;
  --bg-elev:          #171A20;
  --bg-elev-2:        #1B1E24;
  --bg-muted:         #14171C;
  --bg-grad:          linear-gradient(180deg, #0F1115 0%, #131519 100%);

  --ink:              #F4F0E8;
  --ink-2:            #EEEAE1;
  --ink-3:            #A8A8A8;
  --ink-soft:         #9B9DA3;

  --rule:             rgba(255, 255, 255, .06);
  --rule-strong:      rgba(255, 255, 255, .10);

  /* Warm gold — restrained. Never bright yellow. */
  --accent:           #C8A96B;
  --accent-2:         #D1B477;
  --accent-soft:      rgba(200, 169, 107, .10);
  --accent-glow:      rgba(200, 169, 107, .22);
  --accent-warm:      #C8A96B;   /* alias for older callers */

  /* Contextual tones. Forest for daytime/walk moods; navy for evening. */
  --forest:           #3F6252;
  --navy:             #172033;
  --navy-2:           #111827;

  /* Semantic. Muted so they never shout. */
  --good:             #7FB08A;
  --bad:              #B58585;

  /* Legacy neutrals kept so any lingering caller still resolves. */
  --slate-1:          #A8A8A8;
  --slate-2:          #6B6D74;

  /* ---- Surfaces & shadows -------------------------------------- */
  --hero-grad:        linear-gradient(155deg, #171A20 0%, #1F232B 50%, #171A20 100%);
  --hero-glow:        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(200,169,107,.10) 0%, transparent 70%);
  --shadow-sm:        0 1px 2px rgba(0,0,0,.5);
  --shadow:           0 2px 10px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.03) inset;
  --shadow-lg:        0 14px 44px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-glow:      0 0 0 1px rgba(200,169,107,.32), 0 4px 22px rgba(200,169,107,.16);

  /* ---- Radius scale -------------------------------------------- */
  --radius-xs:        6px;
  --radius-sm:        10px;
  --radius:           16px;
  --radius-md:        20px;
  --radius-lg:        24px;
  --radius-xl:        32px;
  --radius-pill:      999px;

  /* ---- Spacing scale (multiples of 4) -------------------------- */
  --sp-xs:            4px;
  --sp-sm:            8px;
  --sp:               16px;
  --sp-md:            20px;
  --sp-lg:            24px;
  --sp-xl:            32px;
  --sp-2xl:           48px;
  --sp-3xl:           64px;

  /* ---- Type scale ---------------------------------------------- */
  --fs-caption:       12px;
  --fs-body-sm:       14px;
  --fs-body:          16px;
  --fs-body-lg:       18px;
  --fs-h3:            20px;
  --fs-h2:            24px;
  --fs-h1:            32px;
  --fs-display:       44px;

  /* ---- Motion -------------------------------------------------- */
  --ease:             cubic-bezier(.2, .8, .2, 1);
  --ease-out:         cubic-bezier(.16, 1, .3, 1);
  --dur-instant:      120ms;
  --dur-fast:         200ms;
  --dur:              320ms;
  --dur-slow:         600ms;

  /* ---- Layout -------------------------------------------------- */
  --maxw:             760px;
  --maxw-read:        640px;
  --maxw-chat:        720px;
  --tabbar-h:         68px;

  /* ---- z-index scale (single source of truth) ------------------ */
  --z-nav:            50;
  --z-audio:          60;
  --z-toast:          70;
  --z-sheet:          80;
  --z-modal:          90;
  --z-critical:       100;

  /* ---- Fonts ---------------------------------------------------
     Inter for interface & body copy; Cormorant Garamond for Scripture
     and display headings — an elegant, readable serif that carries
     the sacred weight of the text without feeling old-fashioned. */
  --font-sans:        Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-serif:       "Cormorant Garamond", "Iowan Old Style", Charter, "Apple Garamond", Georgia, ui-serif, serif;
  --font-display:     "Cormorant Garamond", ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
}

/* prefers-color-scheme override removed — Aurora is dark by default
   regardless of OS setting. If a light variant is desired later, this
   is where it would live. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }

body {
  background: var(--bg-grad);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-feature-settings: "cv11", "ss01", "ss03";  /* Inter refinements */
  /* 100dvh churns during scroll on iOS Safari as the URL bar shows
     and hides. That churn was resizing the layout viewport under the
     scroll and dragging the position:fixed tabbar along with the
     page. 100lvh (the "large" viewport, URL bar hidden) is stable
     across scroll positions, so the tabbar stays glued to the
     bottom edge. Fallback to 100vh for older browsers where lvh
     is unsupported. */
  min-height: 100vh;
  min-height: 100lvh;
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Kill browser zoom entirely — no double-tap zoom, no pinch zoom.
     App is a single fixed scale. `touch-action: manipulation` shuts
     down the 300ms double-tap gesture; the viewport meta locks scale
     to 1.0 for pinch. Boot code also cancels iOS Safari's gesture
     events since iOS 10+ ignores `user-scalable=no`. Users who want
     bigger reading text use Settings → Reading text size. */
  touch-action: manipulation;
}

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Cormorant Garamond has real optical sizes — let the browser pick. */
.serif, .scripture, .display, h1, h2, h3 { font-optical-sizing: auto; }

/* Respect the OS "reduce motion" preference. We fade instead of
   sliding, and skip the fade-up on tab change. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid var(--rule);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex; align-items: center;
  padding: 10px 18px;
  gap: 12px;
}
a.brand {
  display: flex; align-items: center; gap: 10px;
  color: inherit;
  flex: 1;
  min-width: 0;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background-image: url('/logo.jpg');
  background-size: 220% auto;
  background-position: 50% 38%;   /* crop to the book area */
  background-repeat: no-repeat;
  background-color: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; white-space: nowrap; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.3px;
  color: var(--ink);
}
.brand-tag {
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 3px;
  font-weight: 600;
}
.top-action {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background .15s var(--ease);
}
.top-action:hover, .top-action:active { background: var(--rule); }

/* ---------- layout ---------- */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 18px 32px;
}
.tab { display: block; animation: fadeUp .35s var(--ease); }
.tab.hidden { display: none; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.muted { color: var(--ink-3); }
.muted.small { font-size: 13px; }
.hidden { display: none !important; }

/* ---------- buttons ----------
   Primary = warm gold (the "meaningful action" — start a Pause, begin
   a study, save a reflection). Ghost = quiet secondary. Accent kept
   as an alias so older markup keeps working while Phase 4+ updates
   individual surfaces. */
.btn-primary {
  background: var(--accent);
  color: #1A140A;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1px;
  display: inline-flex; align-items: center; gap: 8px;
  transition:
    background var(--dur-fast) var(--ease),
    transform var(--dur-instant) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: progress; transform: none; }

.btn-accent {
  background: var(--accent);
  color: #1A140A;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--shadow-glow);
  transition:
    background var(--dur-fast) var(--ease),
    transform var(--dur-instant) var(--ease);
}
.btn-accent:hover { background: var(--accent-2); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule-strong);
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.btn-ghost:hover { background: var(--bg-muted); border-color: var(--ink-soft); color: var(--ink); }

.btn-step {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 40px; height: 40px;
  font-size: 18px; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-step:hover { background: var(--bg-muted); border-color: var(--rule-strong); }
.btn-step.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- TODAY (redesigned) ---------- */
.today-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 4px 4px 12px;
  gap: 12px;
}
.today-greeting {
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 30px);
  line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--ink);
  font-weight: 600;
}
.today-name {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 4px;
}
.today-head-actions { display: flex; gap: 8px; align-items: center; }
.streak-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-2);
  box-shadow: var(--shadow-sm);
  transition: transform .12s var(--ease);
}
.streak-chip:active { transform: scale(.95); }
.streak-chip svg { color: var(--accent); }

/* Verse of the Day — hero card with photo background + glass action bar */
.vod-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 0 18px;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
  background: var(--hero-grad);
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.vod-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: opacity .4s var(--ease);
}
.vod-photo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,15,31,0.20) 0%, rgba(10,15,31,0.0) 25%, rgba(10,15,31,0.45) 70%, rgba(10,15,31,0.85) 100%);
}
.vod-content {
  position: relative;
  padding: 18px 22px 14px;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.vod-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  color: rgba(243, 226, 196, 0.85);
  font-weight: 700;
  margin-bottom: 6px;
}
.vod-ref {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #fbf6ea;
  margin-bottom: 8px;
  letter-spacing: -.3px;
}
.vod-text {
  font-family: var(--font-display);
  font-size: clamp(16px, 3.6vw, 19px);
  line-height: 1.4;
  color: #fbf6ea;
  font-weight: 400;
  letter-spacing: -.1px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vod-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 10px 8px;
  background: rgba(8, 12, 26, 0.40);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.vod-act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #fbf6ea;
  background: transparent;
  padding: 4px 4px;
  transition: opacity .15s var(--ease), transform .12s var(--ease);
}
.vod-act svg { width: 20px; height: 20px; }
.vod-act:hover { opacity: .85; }
.vod-act:active { transform: scale(.92); }
.vod-act .vod-count {
  font-size: 11px;
  font-weight: 600;
  opacity: .82;
  letter-spacing: .2px;
}
.vod-act.reacted svg { fill: #ef4444; stroke: #ef4444; }

/* Section rails on Today */
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 4px 12px;
}
.rail-head h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.3px;
  color: var(--ink);
  margin: 0;
}
.continue-rail { margin: 8px 0 18px; }
.continue-track {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 4px 4px 12px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.continue-track::-webkit-scrollbar { display: none; }
.continue-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.continue-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.continue-card .cc-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent-2); font-weight: 700; margin-bottom: 6px;
}
.continue-card .cc-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.continue-card .cc-meta {
  margin-top: 8px;
  font-size: 12px; color: var(--ink-soft);
}

/* Discover ("More for you") */
.discover { margin: 16px 0 8px; }
.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.dscv {
  text-align: left;
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 18px 18px;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
  position: relative;
}
.dscv:hover { transform: translateY(-2px); border-color: var(--rule-strong); box-shadow: var(--shadow); }
.dscv-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2.4px;
  color: var(--accent); font-weight: 700; margin-bottom: 4px;
}
.dscv-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  color: var(--ink); line-height: 1.3; margin-bottom: 4px;
}
.dscv-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }

/* Daily verse — legacy fallback (kept for compatibility) */
.daily-card {
  position: relative;
  background: var(--hero-grad);
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  margin: 8px 0 24px;
  overflow: hidden;
  isolation: isolate;
}
.daily-card {
  position: relative;
  background: var(--hero-grad);
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  margin: 8px 0 24px;
  overflow: hidden;
  isolation: isolate;
}
.daily-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--hero-glow);
  z-index: -1;
}
.daily-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.daily-ref {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: rgba(243, 226, 196, .8);
  margin-bottom: 12px;
  letter-spacing: .2px;
}
.daily-text {
  font-family: var(--font-display);
  font-size: clamp(20px, 4.5vw, 26px);
  line-height: 1.45;
  color: #fbf6ea;
  font-weight: 400;
  letter-spacing: -.2px;
}
.daily-actions {
  margin-top: 22px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.daily-actions button {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(243, 226, 196, .25);
  color: #fbf6ea;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  transition: background .15s var(--ease);
}
.daily-actions button:hover { background: rgba(255,255,255,.16); }

/* Quick action cards */
.quickgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.quick {
  text-align: left;
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.quick::after {
  content: '→';
  position: absolute;
  top: 18px; right: 18px;
  color: var(--ink-soft);
  font-size: 18px;
  transition: transform .2s var(--ease), color .15s var(--ease);
}
.quick:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--rule-strong);
}
.quick:hover::after { transform: translateX(4px); color: var(--accent); }
.quick-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2.4px;
  color: var(--accent); font-weight: 700;
}
.quick-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  padding-right: 28px;
}
.quick-sub { font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* ---------- READ ---------- */
/* Toolbar reorganized into two rows so nothing overflows on narrow
   phones. Row 1 (nav) = book + chapter stepper, the primary
   navigation. Row 2 (actions) = icon buttons + version selector,
   which used to push the whole page off-screen when there was no
   room. Belt-and-suspenders overflow lock lives on .tab further
   down so no future addition can ever slide the page again. */
.read-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 16px;
  position: sticky;
  top: calc(env(safe-area-inset-top) + 64px);
  z-index: 5;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.read-toolbar-nav {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.read-toolbar-actions {
  display: flex; align-items: center; justify-content: space-around; gap: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
  min-width: 0;
}
.read-toolbar-actions > button {
  flex: 1 1 0;
  min-width: 0;
}

/* Selects in Settings blocks — matches the field styling used
   elsewhere (subtle bg, hairline border, chevron on the right). */
.settings-select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  padding: 10px 32px 10px 14px;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  cursor: pointer;
}
.settings-select:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
.read-toolbar select {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0;
  padding: 10px 26px 10px 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 14px 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.read-toolbar #book-select { flex: 1 1 auto; min-width: 0; }
.chapter-stepper { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }

/* Never let a tab's contents force horizontal page scroll — the
   only thing that should ever pan side to side is a rail that
   opts in with its own overflow-x rules. Kept scoped to .tab (never
   main) because iOS Safari has a known bug where overflow: clip on
   an in-flow parent detaches position: fixed siblings — the bottom
   tab bar was intermittently rendering at document-bottom instead
   of viewport-bottom. */
.tab { min-width: 0; overflow-x: clip; }
main { min-width: 0; }

.chapter {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 32px 28px 36px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--rule);
}
.chapter-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 36px);
  font-weight: 600;
  letter-spacing: -.5px;
  margin: 0 0 22px;
  color: var(--ink);
}
/* ---------- Explore (curated topics + plans) ---------- */
.explore-head { margin-bottom: 16px; }
.explore-head h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 6px;
}
.explore-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.explore-tile {
  position: relative;
  border-radius: 16px;
  padding: 18px 16px 16px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  text-align: left;
  background-size: cover;
  background-position: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.explore-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.explore-tile-topic {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}
.explore-tile-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .85;
}
.explore-tile-progress {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 8px;
  border-radius: 999px;
  text-shadow: none;
}
.explore-plan-cover {
  height: 180px;
  border-radius: 14px;
  margin-bottom: 14px;
  background: var(--bg-muted);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.explore-plan-topic {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
}
.explore-plan-days {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.explore-plan-days li {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.explore-plan-days li.done { opacity: .55; }
.explore-plan-days li.current {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
.explore-plan-days .epd-theme { flex: 1; min-width: 0; }
.explore-plan-days .epd-day {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}
.explore-day-passages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.explore-day-passages .epp-chip {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.explore-day-passages .epp-chip:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.explore-day-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  white-space: pre-wrap;
}
.explore-day-talk {
  margin-top: 18px;
  background: var(--accent-soft);
  border-radius: 14px;
  padding: 14px 16px;
}
.explore-day-talk.hidden { display: none; }
.explore-day-talk-eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 6px;
}

/* ---------- Split-view notes pad on the Read tab ---------- */
.notes-pad {
  margin-top: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notes-pad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.notes-pad-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.notes-pad-eyebrow {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent-2); font-weight: 700;
}
.notes-pad-title #notes-pad-ref {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notes-pad-tabs {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.notes-pad-tab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
}
.notes-pad-tab.active {
  background: var(--accent-soft);
  color: var(--accent-2);
}
#notes-pad-text {
  width: 100%;
  min-height: 180px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
  font-family: var(--font-sans);
}
.notes-pad-ai-view {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  min-height: 180px;
}
.notes-pad-ai-view.hidden { display: none; }
.notes-pad-ai-view.empty { color: var(--ink-soft); font-style: italic; }
.notes-pad-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.notes-pad-actions .btn-primary {
  padding: 10px 18px;
  font-size: 13px;
}

/* When the notes pad is open, the chapter scrolls inside its own area
   so both halves stay visible without scrolling the whole page. */
body.notes-split #chapter {
  max-height: 48vh;
  overflow: auto;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 18px 18px 6px;
  background: var(--bg-elev);
}
body.notes-split #chapter-heading { margin-top: 0; }

.chapter-body {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink);
  letter-spacing: .1px;
}

/* Reading text size — scale only the verse body, not the toolbar,
   nav, headings, or anything else. Controlled by a select in
   Settings ("Reading text size"), persisted to localStorage. Class
   toggled on <body> at boot. sm/md/lg/xl. */
body.rsz-sm .chapter-body { font-size: 17px; }
body.rsz-md .chapter-body { font-size: 19px; }   /* default */
body.rsz-lg .chapter-body { font-size: 22px; }
body.rsz-xl .chapter-body { font-size: 26px; }
body.rsz-xl .verse-num,
body.rsz-lg .verse-num { font-size: .68em; }

/* ---------- Reading preferences (Phase 5) ----------
   Theme, typeface, and line spacing are scoped to the #chapter surface
   only — the rest of the app stays dark. Line-height moved off the
   size classes onto its own scale so the two are independent. */
.chapter-body { line-height: 1.75; }
#chapter.read-lh-cozy    .chapter-body { line-height: 1.55; }
#chapter.read-lh-normal  .chapter-body { line-height: 1.75; }
#chapter.read-lh-relaxed .chapter-body { line-height: 2.05; }

#chapter.read-font-serif .chapter-body,
#chapter.read-font-serif .chapter-heading { font-family: var(--font-serif); }
#chapter.read-font-sans  .chapter-body,
#chapter.read-font-sans  .chapter-heading { font-family: var(--font-sans); letter-spacing: 0; }

/* Sepia — warm paper. */
#chapter.read-sepia {
  background: #F3EAD6;
  border-color: #E4D7B8;
}
#chapter.read-sepia .chapter-heading { color: #2C2416; }
#chapter.read-sepia .chapter-body { color: #3B3222; }
#chapter.read-sepia .verse-num { color: #A07C3C; }
#chapter.read-sepia .verse.selected .verse-text { background: rgba(160,124,60,.18); }

/* Light — clean white page. */
#chapter.read-light {
  background: #FBFAF7;
  border-color: #E6E3DC;
}
#chapter.read-light .chapter-heading { color: #1B1B1D; }
#chapter.read-light .chapter-body { color: #26262A; }
#chapter.read-light .verse-num { color: #B08A45; }
#chapter.read-light .verse.selected .verse-text { background: rgba(200,169,107,.20); }

/* Highlights need solid pastels with dark text on light/sepia pages
   (the default dark theme uses translucent tints defined later). */
#chapter:is(.read-light, .read-sepia) .verse[data-hl] .verse-text { color: #2A2418; }
#chapter:is(.read-light, .read-sepia) .verse[data-hl="amber"]  .verse-text { background: #fde68a; }
#chapter:is(.read-light, .read-sepia) .verse[data-hl="yellow"] .verse-text { background: #fef08a; }
#chapter:is(.read-light, .read-sepia) .verse[data-hl="green"]  .verse-text { background: #bbf7d0; }
#chapter:is(.read-light, .read-sepia) .verse[data-hl="blue"]   .verse-text { background: #bfdbfe; }
#chapter:is(.read-light, .read-sepia) .verse[data-hl="pink"]   .verse-text { background: #fbcfe8; }
#chapter:is(.read-light, .read-sepia) .verse[data-hl="purple"] .verse-text { background: #e9d5ff; }

/* Comfortable reading measure — cap the line length on wide screens so
   the eye doesn't have to travel too far. */
@media (min-width: 768px) {
  .chapter-body { max-width: var(--maxw-read); margin: 0 auto; }
  .chapter-heading { max-width: var(--maxw-read); margin-left: auto; margin-right: auto; }
}

/* Reading-preferences sheet segments. */
.rp-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  margin: 2px 0 16px;
}
.rp-group { margin-bottom: 18px; }
.rp-label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
  margin-bottom: 8px;
}
.rp-seg {
  display: flex; gap: 6px;
  background: var(--bg-muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.rp-opt {
  flex: 1;
  padding: 9px 8px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rp-opt:hover { color: var(--ink-2); }
.rp-opt.active {
  background: var(--accent);
  color: #1A140A;
  font-weight: 600;
}

.verse { display: inline; }
.verse-num {
  font-family: var(--font-sans);
  font-size: 10px;
  vertical-align: super;
  color: var(--accent-2);
  font-weight: 700;
  margin-right: 5px;
  user-select: none;
  letter-spacing: .5px;
}
.verse-text { padding: 2px 3px; border-radius: 4px; cursor: text; transition: background .15s var(--ease); }
.verse.selected .verse-text { background: var(--accent-soft); }

/* ---------- SEARCH ---------- */
.search-bar {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-elev);
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--rule);
  margin-bottom: 16px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search-bar:focus-within {
  border-color: var(--ink-soft);
  box-shadow: var(--shadow);
}
.search-bar input[type=search] {
  flex: 1;
  background: transparent; border: 0; outline: 0;
  padding: 12px 4px;
  font-size: 16px;
  min-width: 0;
}
.search-bar select {
  background: var(--bg-muted);
  border: 0;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.search-bar .btn-primary { padding: 11px 18px; }
.search-meta { color: var(--ink-soft); font-size: 13px; margin: 4px 6px 12px; font-weight: 500; }
.search-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.search-result {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .12s var(--ease), border-color .15s var(--ease);
}
.search-result:hover {
  transform: translateY(-1px);
  border-color: var(--rule-strong);
}
.search-result .ref {
  font-size: 11px;
  color: var(--accent-2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.search-result .txt {
  font-family: var(--font-display);
  font-size: 16px; line-height: 1.5; color: var(--ink);
}
.search-result mark {
  background: var(--accent-soft); color: inherit;
  padding: 0 3px; border-radius: 3px;
  font-weight: 500;
}

/* ---------- CHAT ---------- */
.chat-intro { margin-bottom: 16px; padding: 20px 4px 8px; }
.chat-intro-mark {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.chat-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 6vw, 34px);
  margin: 0 0 10px;
  letter-spacing: -.4px;
  font-weight: 600;
}
.chat-intro p { color: var(--ink-3); margin: 0 0 18px; line-height: 1.55; max-width: 52ch; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
}
.chip:hover { background: var(--bg-muted); border-color: var(--rule-strong); transform: translateY(-1px); }

.chat-log { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 16px; }
.bubble {
  max-width: 88%;
  padding: 14px 18px;
  border-radius: 22px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 15.5px;
  animation: bubbleIn .25s var(--ease);
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.bubble.user {
  align-self: flex-end;
  background: var(--ink-2);
  color: var(--bg);
  border-bottom-right-radius: 8px;
  font-weight: 500;
}
.bubble.assistant {
  align-self: flex-start;
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-bottom-left-radius: 8px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.65;
  box-shadow: var(--shadow-sm);
}
.bubble.assistant strong { color: var(--accent); font-weight: 700; }
/* The enriched assistant answer wraps its text in .msg-content so the
   actions row can sit beneath it. Preserve line breaks. */
.bubble.assistant .msg-content { white-space: pre-wrap; }
/* Inline Scripture reference — reads as a quiet gold link, opens the
   reader at that passage on tap. */
.scripture-link {
  display: inline;
  color: var(--accent);
  font-weight: 600;
  font-family: var(--font-sans);
  font-size: .92em;
  border-bottom: 1px solid var(--accent-soft);
  padding: 0;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.scripture-link:hover { border-bottom-color: var(--accent); }
/* Per-answer actions — subtle, appear once the answer is complete. */
.msg-actions {
  display: flex; gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.msg-act {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.msg-act:hover { background: var(--bg-muted); color: var(--ink-2); }
.bubble.error {
  background: #fee2e2; color: var(--bad);
  border: 1px solid #fecaca;
  font-family: var(--font-sans); font-size: 14px;
}
.bubble.error { background: rgba(255,122,138,.12); border-color: rgba(255,122,138,.30); color: var(--bad); }
.typing {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 14px;
  padding: 6px 2px;
  display: inline-flex; align-items: center; gap: 4px;
}
.typing::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.chat-form {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h));
  padding: 12px 18px 14px;
  background: linear-gradient(180deg, transparent, var(--bg) 30%);
  display: flex; gap: 10px; align-items: flex-end;
  max-width: var(--maxw); margin: 0 auto;
  z-index: 10;
}
.chat-form textarea {
  flex: 1;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 13px 18px;
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  max-height: 180px;
  outline: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.chat-form textarea:focus { border-color: var(--ink-soft); box-shadow: var(--shadow); }
.chat-form .btn-primary {
  padding: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Make space below chat log for the fixed composer */
.tab[data-tab="chat"] { padding-bottom: 88px; }

/* ---------- STUDY ---------- */
.study-builder {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--rule);
  margin-bottom: 20px;
}
.study-builder h2 {
  font-family: var(--font-display);
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -.4px;
  font-weight: 600;
}
.study-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.field input {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 15px;
  outline: 0;
  transition: border-color .15s var(--ease);
}
.field input:focus { border-color: var(--ink-soft); }
.day-picker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px;
}
.day-picker > span { color: var(--ink-3); font-weight: 600; margin-right: 6px; }
.day-picker label {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.day-picker label:has(input:checked) {
  background: var(--ink-2);
  color: var(--bg);
  border-color: var(--ink-2);
}
.day-picker input[type=radio] { display: none; }

.study-status {
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  display: flex; align-items: center; gap: 12px;
}
.study-status::before {
  content: ''; width: 16px; height: 16px;
  border: 2px solid var(--rule-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.study-output {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--rule);
}
.study-output h2 {
  font-family: var(--font-display);
  margin: 0 0 6px;
  font-size: 28px;
  letter-spacing: -.5px;
  color: var(--ink);
  font-weight: 600;
}
.study-output .topic { color: var(--ink-3); font-size: 14px; margin-bottom: 20px; }
.study-day {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.study-day:first-of-type { border-top: 0; padding-top: 4px; }
.study-day h3 {
  font-family: var(--font-display);
  font-size: 22px; margin: 4px 0 6px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.3px;
}
.study-day .day-meta {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent-2); font-weight: 700;
}
.study-day .passage-text {
  font-family: var(--font-display); font-size: 17px; line-height: 1.65;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  border-radius: 0 14px 14px 0;
  margin: 12px 0 16px;
  color: var(--ink-2);
}
.study-day h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--ink-soft); margin: 18px 0 6px; font-weight: 700;
}
.study-day p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.study-day .memory {
  display: inline-block; margin-top: 12px;
  background: var(--accent-soft); color: var(--accent-2);
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
}

.my-studies { margin-top: 28px; }
.my-studies h3 {
  font-family: var(--font-display);
  font-size: 20px; margin: 0 0 12px;
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: -.3px;
}
.study-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.study-list li {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  transition: border-color .15s var(--ease);
}
.study-list li:hover { border-color: var(--rule-strong); }
.study-list .title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.study-list .meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.study-list .actions { display: flex; gap: 6px; flex: 0 0 auto; }
.study-list button {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background .15s var(--ease);
}
.study-list button:hover { background: var(--bg-muted); }

/* ---------- SETTINGS ---------- */
section[data-tab="settings"] h2 {
  font-family: var(--font-display);
  font-size: 28px;
  margin: 0 0 18px;
  letter-spacing: -.4px;
  font-weight: 600;
}
.setting-block {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--rule);
}
.setting-block h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
}
.billing-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0;
}
.billing-actions input[type=email] {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  outline: 0;
  transition: border-color .15s var(--ease);
}
.billing-actions input[type=email]:focus { border-color: var(--ink-soft); }

/* ---------- BOTTOM TAB BAR ---------- */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid var(--rule);
  z-index: 25;
  padding-bottom: env(safe-area-inset-bottom);
  /* iOS Safari momentum-scroll bug: position: fixed elements visually
     drift during inertial scroll unless they live on their own GPU
     layer. Force compositing so the bar stays glued to the bottom. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tabbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--tabbar-h);
}
.tabbtn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Muted but legible — the earlier ghost-text idle state was a real
     complaint, so we stay at --ink-3 (#A8A8A8), never dimmer. */
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  transition: color .15s var(--ease), transform .15s var(--ease);
  padding: 6px 4px 4px;
}
.tabbtn svg {
  width: 24px; height: 24px;
  stroke-width: 2;
  transition: transform var(--dur-fast) var(--ease);
}
.tabbtn:active { transform: scale(.94); }
.tabbtn.active { color: var(--accent); }
.tabbtn.active svg { stroke-width: 2.1; }
.tabbtn .label {
  opacity: 1;
}
.tabbtn.active .label { color: var(--accent); }
/* Very subtle active indicator — a small gold dot beneath the label. */
.tabbtn::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%) scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.tabbtn.active::after { transform: translateX(-50%) scale(1); }

/* Small red count badge overlaying a tab icon (Community tab today,
   more later). Positioned relative to the tab button. Auto-sizes for
   1-digit vs 2-digit counts. */
.tabbtn-badge {
  position: absolute;
  top: 4px;
  right: 30%;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

/* Home banner shown when the visitor has pending friend requests. */
.friend-requests-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 0 0 14px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
  transition: transform .12s var(--ease), background .12s var(--ease);
}
.friend-requests-banner:hover { transform: translateY(-1px); }
.frb-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.frb-body { flex: 1; min-width: 0; }
.frb-title {
  font-weight: 700; font-size: 14.5px; line-height: 1.2;
}
.frb-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.frb-chevron { color: var(--accent); flex: 0 0 auto; }

/* ---------- QUIZ ---------- */
.quiz-picker h2 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.4px;
  margin: 0 0 4px;
  font-weight: 600;
}
.quiz-picker > p { color: var(--ink-3); margin: 0 0 18px; }
.quiz-controls {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.quiz-meta { display: flex; gap: 14px; flex-wrap: wrap; }
.quiz-meta .field { flex: 1; min-width: 130px; }
.quiz-meta select {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  outline: 0;
}
.quiz-topic-search {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 22px;
}
.quiz-topic-search input {
  flex: 1;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 15px;
  outline: 0;
  min-width: 0;
}
.quiz-topic-search input:focus { border-color: var(--ink-soft); }
.quiz-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--ink-soft); font-weight: 700;
  margin: 0 0 12px;
}
.quiz-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.quiz-topic {
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
  cursor: pointer;
}
.quiz-topic:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--rule-strong);
}
.quiz-topic .qt-cat {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--accent-2); font-weight: 700;
}
.quiz-topic .qt-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

/* Quiz runner */
.quiz-runner { animation: fadeUp .3s var(--ease); }
.quiz-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.quiz-progress { flex: 1; }
.quiz-progress-text { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.quiz-progress-bar {
  margin-top: 6px;
  height: 6px;
  background: var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
#quiz-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width .35s var(--ease);
  border-radius: 3px;
}
.quiz-card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}
.quiz-question {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -.2px;
  color: var(--ink);
  margin-bottom: 22px;
  font-weight: 500;
}
.quiz-choices {
  display: flex; flex-direction: column; gap: 10px;
}
.quiz-choice {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.4;
  display: flex; align-items: center; gap: 12px;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
  cursor: pointer;
}
.quiz-choice:hover { background: var(--bg-muted); border-color: var(--rule-strong); transform: translateX(2px); }
.quiz-choice .qc-letter {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.quiz-choice[data-state="correct"] {
  background: rgba(22,101,52,.10);
  border-color: var(--good);
  color: var(--good);
  font-weight: 600;
}
.quiz-choice[data-state="correct"] .qc-letter { background: var(--good); color: #fff; }
.quiz-choice[data-state="wrong"] {
  background: rgba(185,28,28,.10);
  border-color: var(--bad);
  color: var(--bad);
}
.quiz-choice[data-state="wrong"] .qc-letter { background: var(--bad); color: #fff; }
.quiz-choice[data-state="dim"] { opacity: .55; pointer-events: none; }
.quiz-choice:disabled { cursor: default; transform: none; }
.quiz-feedback {
  margin-top: 18px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  animation: fadeUp .2s var(--ease);
}
.quiz-feedback-head {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
.quiz-feedback-head[data-correct="1"] { color: var(--good); }
.quiz-feedback-head[data-correct="0"] { color: var(--bad); }
.quiz-feedback-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.quiz-feedback-ref {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-2);
  cursor: pointer;
}
.quiz-feedback-ref:hover { color: var(--ink); }
.quiz-actions {
  margin-top: 18px;
  display: flex; justify-content: flex-end;
}

/* Result */
.quiz-result {
  text-align: center;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  box-shadow: var(--shadow);
  animation: fadeUp .35s var(--ease);
}
.quiz-score-ring {
  width: 140px; height: 140px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--hero-grad);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: #fbf6ea;
  box-shadow: 0 6px 30px rgba(26,39,72,.18);
}
.quiz-result h2 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.4px;
  margin: 0 0 6px;
  font-weight: 600;
}
.quiz-result-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 18px;
}
.quiz-review-list { margin-top: 24px; text-align: left; display: grid; gap: 10px; }
.quiz-review-item {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 16px;
}
.quiz-review-q { font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: 15px; }
.quiz-review-meta { font-size: 13px; color: var(--ink-3); }
.quiz-review-meta strong { color: var(--good); }
.quiz-review-meta em { color: var(--bad); font-style: normal; }

/* Loading */
.quiz-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-3);
}
.quiz-loading-spinner {
  width: 36px; height: 36px;
  margin: 0 auto 16px;
  border: 3px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ---------- VIDEO RAIL (From the team) ---------- */
.video-rail { margin: 8px 0 18px; }
.video-rail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 4px 10px;
}
.video-rail-head h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0;
}
.video-rail-track {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.video-rail-track::-webkit-scrollbar { display: none; }
.video-card {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.video-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.video-card .video-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000 center/cover no-repeat;
  position: relative;
}
.video-card .video-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.35) 100%);
}
.video-card .play-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: transform .2s var(--ease);
}
.video-card:hover .play-overlay { transform: translate(-50%, -50%) scale(1.06); }
.video-card .play-overlay::before {
  content: '';
  width: 0; height: 0;
  border-left: 14px solid var(--ink-2);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.video-card .video-meta { padding: 12px 14px 14px; }
.video-card .video-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card .video-date {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--ink-soft); font-weight: 600;
  margin-top: 4px;
}

.video-modal-panel { max-width: 760px; }
.video-modal-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}
.video-modal-frame iframe {
  width: 100%; height: 100%;
  display: block;
  border: 0;
}

/* ---------- INSTALL INSTRUCTIONS POPUP ---------- */
.install-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.install-steps li { margin-bottom: 8px; }
.install-steps strong { color: var(--ink); font-weight: 700; }
.install-icon {
  display: inline-block;
  width: 16px; height: 16px;
  vertical-align: -3px;
  margin: 0 1px;
}

/* ---------- SHARE CARD MODAL ---------- */
.card-modal {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  /* Keep the whole panel — including its top-right close X — clear of
     the status bar / Dynamic Island and the home indicator. Without the
     safe-area insets the X landed under the status bar on iPhones and
     the system swallowed the tap, so the modal couldn't be closed. */
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.card-modal:not(.hidden) { pointer-events: auto; }
.card-modal-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 14, 26, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.card-modal:not(.hidden) .card-modal-scrim { opacity: 1; }
.card-modal-panel {
  position: relative;
  background: var(--bg-elev);
  border-radius: 24px;
  padding: 22px;
  padding-top: 56px;     /* room for the close X above content */
  max-width: 460px;
  width: 100%;
  /* Subtract the safe-area insets too so a full-height panel doesn't
     grow back under the status bar it was just padded away from. */
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  box-shadow: var(--shadow-lg);
  /* Fade-in only — NO transform. `transform` (including
     `transform: scale(1)`) turns the panel into a containing block
     for its fixed-positioned descendants (per CSS Transforms spec),
     which meant our .card-close `position: fixed` was being anchored
     to the panel and env(safe-area-inset-top) pushed it right into
     the content on iPhones with a Dynamic Island. Opacity-only keeps
     the X anchored to the viewport where it belongs. */
  opacity: 0;
  transition: opacity .2s var(--ease);
  display: flex;
  flex-direction: column;
}
.card-modal:not(.hidden) .card-modal-panel { opacity: 1; }
.card-close {
  /* Absolute-anchored to the panel's top-right — the panel is now
     transform-free so a plain position:absolute stays put across
     scroll (per browser layout, absolute descendants of the
     scroll-container don't move with the scrolled content). Sits in
     the padding-top gutter we reserved on .card-modal-panel so it
     never overlaps the title or body text. */
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.card-close:hover { background: var(--rule); }
.card-modal-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  margin: 0 0 16px;
  padding-right: 40px;
  letter-spacing: -.3px;
}
.card-preview {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-muted);
  margin-bottom: 14px;
}
#card-canvas {
  display: block;
  width: 100%; height: 100%;
}
.card-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  background: var(--bg-muted);
  font-size: 13px;
  transition: opacity .2s var(--ease);
}
.card-loading.hidden { opacity: 0; pointer-events: none; }
.card-themes {
  display: flex; gap: 6px; overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.card-themes::-webkit-scrollbar { display: none; }
.card-theme {
  flex: 0 0 auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.card-theme:hover { background: var(--bg-muted); color: var(--ink-2); }
.card-theme.active {
  background: var(--ink-2);
  color: var(--bg);
  border-color: var(--ink-2);
}
.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
  margin-bottom: 10px;
}
.card-actions button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
}
.card-credit {
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  margin: 0;
  letter-spacing: .2px;
}
.card-credit a { color: var(--ink-3); text-decoration: underline; }

/* ---------- VERSE HIGHLIGHTS + NOTES ---------- */
.verse[data-hl="amber"]  .verse-text { background: #fde68a; }
.verse[data-hl="yellow"] .verse-text { background: #fef08a; }
.verse[data-hl="green"]  .verse-text { background: #bbf7d0; }
.verse[data-hl="blue"]   .verse-text { background: #bfdbfe; }
.verse[data-hl="pink"]   .verse-text { background: #fbcfe8; }
.verse[data-hl="purple"] .verse-text { background: #e9d5ff; }
.verse[data-hl="amber"]  .verse-text { background: rgba(253,230,138,.20); color: #fde68a; }
.verse[data-hl="yellow"] .verse-text { background: rgba(254,240,138,.20); color: #fef08a; }
.verse[data-hl="green"]  .verse-text { background: rgba(187,247,208,.18); color: #bbf7d0; }
.verse[data-hl="blue"]   .verse-text { background: rgba(191,219,254,.18); color: #bfdbfe; }
.verse[data-hl="pink"]   .verse-text { background: rgba(251,207,232,.18); color: #fbcfe8; }
.verse[data-hl="purple"] .verse-text { background: rgba(233,213,255,.18); color: #e9d5ff; }
.verse[data-note="1"] .verse-num::after {
  content: '•';
  color: var(--accent);
  margin-left: 1px;
  font-size: 16px;
  vertical-align: -1px;
}

/* ---------- VERSE ACTION SHEET ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-end;
  pointer-events: none;
}
.sheet:not(.hidden) { pointer-events: auto; }
.sheet-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 14, 26, .35);
  opacity: 0;
  transition: opacity .25s var(--ease);
  backdrop-filter: blur(2px);
}
.sheet:not(.hidden) .sheet-scrim { opacity: 1; }
.sheet-panel {
  position: relative;
  background: var(--bg-elev);
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  border-radius: 24px 24px 0 0;
  padding: 8px 22px calc(env(safe-area-inset-bottom) + 22px);
  box-shadow: var(--shadow-lg);
  transform: translateY(110%);
  transition: transform .32s var(--ease);
}
.sheet:not(.hidden) .sheet-panel { transform: translateY(0); }
@media (min-width: 768px) {
  .sheet-panel { border-radius: 24px; margin-bottom: 24px; max-width: 480px; }
}
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--rule-strong);
  border-radius: 2px;
  margin: 0 auto 14px;
}
.sheet-ref {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent-2); font-weight: 700;
}
.sheet-quote {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 6px 0 16px;
  max-height: 6em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-section { margin-bottom: 14px; }
.sheet-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--ink-soft); font-weight: 700;
  margin-bottom: 8px;
}
.hl-row {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.hl {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  cursor: pointer;
  transition: transform .12s var(--ease), border-color .12s var(--ease);
}
.hl:hover { transform: scale(1.1); }
.hl.active { border-color: var(--ink-2); transform: scale(1.1); }
.hl-clear {
  background: transparent;
  position: relative;
}
.hl-clear::after {
  content: ''; position: absolute; inset: 50% 4px auto 4px;
  height: 2px; background: var(--ink-3); transform: rotate(-45deg) translateY(-1px);
  border-radius: 1px;
}
.sheet-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.sheet-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.sheet-btn:hover { background: var(--bg-muted); border-color: var(--rule-strong); }
.sheet-btn[data-active="1"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
}
.note-editor {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 10px;
  animation: fadeUp .2s var(--ease);
}
.note-editor textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
  outline: 0;
}
.note-editor textarea:focus { border-color: var(--ink-soft); }
.note-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ---------- FRIENDS / COMMUNITY ---------- */
.friends-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}

/* Social sub-nav (Community / Add friends / Invite) */
.social-nav {
  display: flex;
  gap: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 18px;
}
.social-nav-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  background: transparent;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
  position: relative;
}
.social-nav-btn:hover { color: var(--ink); }
.social-nav-btn.active {
  background: var(--bg);
  color: var(--accent-2);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.social-nav-badge {
  display: inline-block;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}
.social-section { min-width: 0; }

/* Community feed */
.community-composer {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 16px;
}
.cc-kind-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cc-kind {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--rule);
  cursor: pointer;
}
.cc-kind.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.community-composer textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  resize: vertical;
  min-height: 60px;
}
.cc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.community-feed { display: grid; gap: 10px; }
.cpost {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  transition: transform .1s var(--ease), border-color .12s var(--ease);
}
.cpost:hover { border-color: var(--rule-strong); }
.cpost-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.cpost-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.cpost-who { flex: 1; min-width: 0; }
.cpost-name { font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.cpost-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-3);
}
.cpost-kind {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--bg-muted);
}
.cpost-kind.kind-prayer   { color: #a78bfa; background: rgba(167,139,250,.14); }
.cpost-kind.kind-praise   { color: #fbbf24; background: rgba(251,191,36,.14); }
.cpost-kind.kind-question { color: #7dd3fc; background: rgba(125,211,252,.14); }
.cpost-kind.kind-general  { color: var(--ink-3); background: var(--bg-muted); }
.cpost-time { color: var(--ink-soft); }
.cpost-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.cpost-body-detail { font-size: 16px; padding: 4px 0 12px; }
.cpost-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.cpost-act {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.cpost-act:hover { background: var(--bg-muted); color: var(--ink); }
.cpost-act.liked { color: var(--accent); }
.cpost-del { margin-left: auto; padding: 6px 10px; font-size: 14px; }

.community-post-detail { padding-bottom: 12px; }
.community-comments {
  display: grid; gap: 10px;
  margin-bottom: 12px;
  max-height: 40vh;
  overflow-y: auto;
}
.ccomment {
  display: flex; gap: 10px;
}
.ccomment-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.ccomment-body { flex: 1; min-width: 0; }
.ccomment-name { font-size: 12.5px; font-weight: 700; }
.ccomment-name .ccomment-time { font-weight: 500; color: var(--ink-soft); margin-left: 4px; font-size: 11px; }
.ccomment-text {
  font-size: 14px;
  color: var(--ink);
  margin-top: 2px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.community-comment-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.community-comment-form textarea {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 8px 12px;
  font: inherit;
  color: var(--ink);
  resize: vertical;
  min-height: 40px;
}
.friends-head h2 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.4px;
  font-weight: 600;
  margin: 0;
}
.friends-empty {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 30px 24px 28px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.friends-empty h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.3px;
  margin: 0 0 8px;
}
.friends-empty p {
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 16px;
}
.friends-empty-avatars {
  position: absolute;
  top: 24px; right: 24px;
  display: flex;
}
.friends-empty-avatars span {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--slate-1), var(--ink-2));
  border: 2px solid var(--bg-elev);
}
.friends-empty-avatars span:nth-child(2) {
  margin-left: -10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.friends-empty-avatars span:nth-child(3) {
  margin-left: -10px;
  background: linear-gradient(135deg, var(--slate-2), var(--slate-1));
}

/* ---- Friends search / requests / nudges (revamp) ---- */
/* Top-of-page pair of "Add friends" affordances — Invite-by-link
   (people who don't have the app) and Search (people who do). Both
   rendered as tap cards so the two paths are obvious side by side. */
.friends-actions { display: grid; gap: 8px; margin: 0 0 6px; }
.friend-action-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.friend-action-card:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.friend-action-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.friend-action-body { flex: 1; min-width: 0; }
.friend-action-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.friend-action-sub   { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }
.friend-action-chevron { color: var(--ink-3); flex: 0 0 auto; }

.friends-search { margin: 0 0 14px; position: relative; }
.friends-search-input-wrap {
  position: relative;
}
.friends-search-icon {
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.friends-search input[type="search"] {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px 12px 40px;
  font: inherit;
  color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.friends-search input[type="search"]:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
.friends-search-results {
  display: grid; gap: 6px;
  margin-top: 8px;
}
.friends-search-empty { margin-top: 8px; }
.user-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 10px 12px;
}
.user-row .ur-info { flex: 1; min-width: 0; }
.user-row .ur-name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.user-row .ur-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; word-break: break-all; }
.user-row .ur-action {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
}
.user-row .ur-action:hover { background: var(--accent); color: var(--bg); }
.user-row .ur-action[disabled] { opacity: .6; pointer-events: none; }
.user-row .ur-action-ghost {
  background: transparent;
  color: var(--ink-3);
  border-color: var(--rule);
}

.friends-section-title {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 22px 0 10px;
}
.friends-requests, .friends-nudges { display: block; }
#friends-incoming, #friends-outgoing, #friends-nudges-list {
  display: grid; gap: 6px;
}

.nudge-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
}
.nudge-row .nr-emoji { font-size: 22px; line-height: 1; }
.nudge-row .nr-text { flex: 1; min-width: 0; font-size: 14px; }
.nudge-row .nr-name { font-weight: 600; }
.nudge-row .nr-when { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.nudge-row.unread { background: var(--accent-soft); border-color: var(--rule-strong); }

.nudge-choices { display: grid; gap: 8px; }
.nudge-choice {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  font: inherit; color: var(--ink);
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.nudge-choice:hover { background: var(--accent-soft); border-color: var(--accent); }
.nudge-choice .nc-emoji { font-size: 24px; line-height: 1; }
.nudge-choice .nc-label { font-weight: 600; }

.friends-list { display: grid; gap: 8px; }
.friend-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.friend-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--slate-1), var(--ink-2));
  color: #fbf6ea;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  flex: 0 0 auto;
}
.friend-info { flex: 1; min-width: 0; }
.friend-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 2px;
}
.friend-meta {
  font-size: 12px;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.friend-streak {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--accent-2);
  font-weight: 700;
}

.invites-pending { margin-top: 24px; }
.invite-row {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.invite-row .invite-row-info { flex: 1; min-width: 0; font-size: 14px; }
.invite-row .invite-row-meta { font-size: 12px; color: var(--ink-soft); }

.invite-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.invite-banner-text { flex: 1; min-width: 200px; color: var(--ink-2); font-size: 14px; }
.invite-banner-actions { display: flex; gap: 8px; }
.invite-banner { background: var(--accent-soft); border-color: rgba(125,211,252,.30); }

/* ---------- DAILY PAUSE + WALKS + BREATHS ---------- */
.pause-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.pause-card {
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg-elev);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  min-height: 148px;   /* room for the photo to breathe */
}
.pause-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pause-card.done { opacity: .6; }
.pause-card.done .pause-card-cta svg { display: none; }
.pause-card-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2.4px;
  font-weight: 700; color: var(--accent);
}
.pause-card-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pause-card-ref {
  font-size: 11px; color: var(--ink-soft); font-weight: 600;
}
.pause-card-cta {
  margin-top: auto;                /* pins CTA to the bottom over the photo */
  display: flex; align-items: center; gap: 4px;
  color: var(--ink-2);
  font-size: 13px; font-weight: 700;
}

/* Once the daily nature photo has loaded (applyPauseCardCover adds
   .has-cover), swap the palette to something that reads on top of
   the scrim: crisp white type with a light shadow for legibility,
   and the accent stays warm so the eyebrow still pops. */
.pause-card.has-cover .pause-card-eyebrow,
.pause-card.has-cover .pause-card-title,
.pause-card.has-cover .pause-card-ref,
.pause-card.has-cover .pause-card-cta {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.pause-card.has-cover .pause-card-eyebrow { color: var(--accent-2); }
.pause-card.has-cover .pause-card-ref     { color: rgba(255,255,255,.85); }

/* Parallel translation rendering on Read tab */
.parallel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.parallel-row:last-child { border-bottom: 0; }
.parallel-cell {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
}
.parallel-cell .pv-num {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 700;
  color: var(--accent-2);
  letter-spacing: .5px;
  margin-right: 4px;
  vertical-align: super;
}
.parallel-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--ink-soft); font-weight: 700;
  margin-bottom: 4px;
  text-align: center;
}
.parallel-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 6px;
}
@media (max-width: 520px) {
  .parallel-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .parallel-row .parallel-cell:last-child { padding-left: 12px; border-left: 3px solid var(--rule); color: var(--ink-3); }
  .parallel-header { grid-template-columns: 1fr 1fr; }
}

/* Prayer journal rows */
.prayer-row {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
.prayer-row.answered { opacity: .7; }
.prayer-row .pr-kind {
  flex: 0 0 auto;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
  font-weight: 700;
  padding: 4px 8px; border-radius: 6px;
}
.prayer-row .pr-kind.request    { background: rgba(199,154,94,.15); color: var(--accent-2); }
.prayer-row .pr-kind.gratitude  { background: rgba(22,101,52,.12); color: var(--good); }
.prayer-row .pr-kind.confession { background: rgba(122,141,176,.16); color: var(--slate-1); }
.prayer-row .pr-kind.lament     { background: rgba(185,28,28,.10); color: var(--bad); }
.prayer-row .pr-body { flex: 1; min-width: 0; }
.prayer-row .pr-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.prayer-row .pr-text { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-top: 4px; }
.prayer-row .pr-meta { font-size: 11px; color: var(--ink-soft); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.prayer-row .pr-actions { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.prayer-row .pr-actions button {
  background: transparent; border: 1px solid var(--rule);
  border-radius: 999px; padding: 5px 10px;
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  cursor: pointer;
}
.prayer-row .pr-actions button:hover { background: var(--bg); color: var(--ink-2); }
.prayer-row .pr-answer {
  margin-top: 8px;
  background: rgba(22,101,52,.08); border: 1px solid rgba(22,101,52,.25);
  border-radius: 10px; padding: 8px 12px;
  font-size: 13px; line-height: 1.45; color: var(--good);
}

.prayer-filter.active {
  background: var(--ink-2); color: var(--bg); border-color: var(--ink-2);
}

/* Today's reading plan card */
.plan-today {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  margin: 0 0 16px;
  box-shadow: var(--shadow-sm);
}
.plan-today-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2.4px;
  color: var(--accent-2); font-weight: 700;
}
.plan-today-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 4px;
}
.plan-today-readings {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 14px;
}
.plan-today-readings .reading-chip {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s var(--ease);
}
.plan-today-readings .reading-chip:hover { background: var(--bg-muted); }
.plan-today-actions { display: flex; gap: 8px; }
.plan-today-actions .btn-ghost { flex: 1; padding: 9px 14px; font-size: 13px; }
.plan-today-actions .btn-primary { flex: 1; padding: 9px 14px; font-size: 13px; }

.walks-rail { margin: 6px 0 18px; }
.walks-rail .rail-head { margin-bottom: 10px; }
.rail-more {
  background: transparent; border: 0;
  font-size: 12px; font-weight: 700;
  color: var(--accent-2);
  letter-spacing: .3px;
  cursor: pointer;
}
.walks-track {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 4px 4px 12px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.walks-track::-webkit-scrollbar { display: none; }
.walk-tile {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.walk-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.walk-tile-cover {
  width: 100%; aspect-ratio: 16/9;
  background: var(--hero-grad);
  background-size: cover; background-position: center;
}
.walk-tile-body { padding: 12px 14px 14px; }
.walk-tile-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: var(--ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.walk-tile-meta {
  font-size: 11px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 1.4px;
  font-weight: 700; margin-top: 4px;
}
.walk-tile-progress { color: var(--accent-2); }

/* Walk detail modal */
.walk-cover {
  width: 100%; aspect-ratio: 16/9;
  background: var(--hero-grad);
  background-size: cover; background-position: center;
  border-radius: 14px;
  margin-bottom: 16px;
}
.walk-days { padding-left: 22px; margin: 0; max-height: 280px; overflow-y: auto; }
.walk-days li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.walk-days li.done { color: var(--good); font-weight: 600; }
.walk-days li.current { color: var(--accent-2); font-weight: 700; }
.walk-days .wd-ref { font-size: 11px; color: var(--ink-soft); margin-left: 6px; }

/* Breath verses */
.breaths-list {
  list-style: none; padding: 0; margin: 0;
  max-height: 60vh; overflow-y: auto;
  display: grid; gap: 8px;
}
.breaths-list li {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
}
.breaths-list .b-text {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; line-height: 1.4;
  color: var(--ink);
}
.breaths-list .b-ref {
  font-size: 11px; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: 1.4px;
  font-weight: 700; margin-top: 4px;
}

/* Pause player — full screen, photo background */
.pause-modal {
  position: fixed; inset: 0; z-index: 95;
  background: #0a0f1f;
  display: flex; align-items: center; justify-content: center;
}
.pause-modal.hidden { display: none; }
.pause-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity .5s var(--ease);
  z-index: 0;
}
.pause-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at center, rgba(8,12,26,0) 0%, rgba(8,12,26,.65) 100%),
    linear-gradient(180deg, rgba(8,12,26,.55) 0%, rgba(8,12,26,.35) 30%, rgba(8,12,26,.55) 70%, rgba(8,12,26,.85) 100%);
  z-index: 1;
}
.pause-close {
  position: absolute; top: calc(env(safe-area-inset-top) + 16px); right: 16px;
  z-index: 3;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 0; border-radius: 50%;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fbf6ea;
  cursor: pointer;
}
.pause-content {
  position: relative; z-index: 2;
  max-width: 560px;
  padding: 60px 28px calc(env(safe-area-inset-bottom) + 40px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  color: #fbf6ea;
  min-height: 100dvh;
}
.pause-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 3px;
  color: rgba(243,226,196,.85); font-weight: 700;
}
.pause-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5.5vw, 32px); font-weight: 700;
  color: #fbf6ea; margin: 8px 0 6px;
  letter-spacing: -.3px;
}
.pause-ref {
  font-size: 13px; color: rgba(243,226,196,.7);
  font-weight: 600; letter-spacing: .5px;
}
.pause-stage {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-display);
  font-size: clamp(18px, 4vw, 22px);
  line-height: 1.55;
  color: #fbf6ea;
  padding: 28px 8px;
  max-width: 32ch;
  white-space: pre-wrap;
  text-align: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(243,226,196,.35) transparent;
}
.pause-stage::-webkit-scrollbar { width: 4px; }
.pause-stage::-webkit-scrollbar-thumb {
  background: rgba(243,226,196,.3);
  border-radius: 2px;
}
.pause-breath {
  font-family: var(--font-display);
  font-size: 14px; font-style: italic;
  color: rgba(243,226,196,.65);
  margin-bottom: 16px;
  min-height: 20px;
  text-align: center;
}
.pause-progress {
  display: flex; gap: 8px; margin-bottom: 18px;
}
.pause-prog-dot {
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  font-weight: 700;
  color: rgba(243,226,196,.4);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(243,226,196,.15);
}
.pause-prog-dot.active { color: var(--accent); border-color: var(--accent); background: rgba(199,154,94,.08); }
.pause-prog-dot.done { color: rgba(243,226,196,.6); }
.pause-controls {
  display: flex; align-items: center; gap: 16px;
}
.pause-btn {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: #fbf6ea;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s var(--ease), transform .12s var(--ease);
}
.pause-btn:hover { background: rgba(255,255,255,.16); }
.pause-btn:active { transform: scale(.92); }
.pause-play-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1207;
  width: 72px; height: 72px;
}
.pause-play-btn:hover { background: var(--accent-2); color: #fff; }
/* ---------- Pause states (Phase 4) ---------- */

/* Evening Pauses: deep navy wash over the photo. */
.pause-modal.pause-evening { background: #0B1020; }
.pause-modal.pause-evening .pause-scrim {
  background:
    radial-gradient(ellipse 80% 60% at center, rgba(17,24,39,.10) 0%, rgba(11,16,32,.72) 100%),
    linear-gradient(180deg, rgba(17,24,39,.62) 0%, rgba(17,24,39,.42) 30%, rgba(17,24,39,.62) 70%, rgba(11,16,32,.90) 100%);
}

/* While narration plays, secondary controls recede so Scripture holds
   the room. They return the moment playback pauses. */
.pause-secondary { transition: opacity var(--dur-slow) var(--ease); }
.pause-modal.is-playing .pause-secondary { opacity: .35; }
.pause-modal.is-playing .pause-secondary:hover,
.pause-modal.is-playing .pause-secondary:focus-within { opacity: 1; }

/* Stage text cross-fade between Scripture → meditation → prayer. */
.pause-stage { transition: opacity .18s var(--ease); }
.pause-stage.stage-fading { opacity: 0; }

/* Completion: controls fade out entirely; "Amen." settles in. */
.pause-modal.is-complete .pause-controls,
.pause-modal.is-complete .pause-progress,
.pause-modal.is-complete .pause-stage,
.pause-modal.is-complete .pause-breath { display: none; }
/* .pause-secondary carries an inline display:flex, so the stylesheet
   needs !important to win when the Pause completes. */
.pause-modal.is-complete .pause-secondary { display: none !important; }

.pause-complete {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: auto 0;   /* centers in the space the stage text vacated */
  animation: pause-amen-in .9s var(--ease-out);
}
.pause-complete.hidden { display: none; }
@keyframes pause-amen-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.pause-amen {
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 44px);
  font-weight: 500;
  color: #fbf6ea;
  margin-bottom: 6px;
}
.pause-reflect-label {
  font-size: 13px;
  color: rgba(243,226,196,.75);
  letter-spacing: .3px;
}
#pause-reflection {
  width: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  color: #fbf6ea;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
}
#pause-reflection::placeholder { color: rgba(243,226,196,.4); }
#pause-reflection:focus { outline: none; border-color: rgba(243,226,196,.5); }
.pause-complete-actions {
  display: flex; gap: 10px;
  margin-top: 6px;
}
.pause-done-btn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fbf6ea;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.pause-done-btn:hover { background: rgba(255,255,255,.20); }
.pause-open-passage {
  margin-top: 4px;
  background: none;
  color: rgba(243,226,196,.8);
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px;
}
.pause-open-passage:hover { color: #fbf6ea; }

/* ---------- AUDIO PLAYER ---------- */
.verse.now-speaking .verse-text {
  background: rgba(125, 211, 252, 0.16);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.45);
  border-radius: 4px;
}

.audio-player {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 8px);
  background: var(--bg-elev);
  border: 1px solid var(--rule-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 10px 14px;
  /* Wrap so the control cluster never overflows the bar off-screen —
     on a phone the title takes the first row and the controls (incl.
     the close X) drop to a second row where they fit fully. */
  display: flex; align-items: center; gap: 10px 8px;
  flex-wrap: wrap;
  z-index: var(--z-audio);
  max-width: var(--maxw);
  margin: 0 auto;
  animation: audio-slide-up .25s var(--ease);
}
@keyframes audio-slide-up { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
.audio-info { flex: 1 1 130px; min-width: 130px; }
.audio-controls { flex-wrap: wrap; justify-content: flex-end; }
/* The close X sits at the end and gets a faint outline so it reads as
   the "dismiss" affordance, never lost among the transport controls. */
#audio-close {
  border: 1px solid var(--rule-strong);
  margin-left: 2px;
}
#audio-close:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.audio-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.audio-meta {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: .3px;
  margin-top: 2px;
}
.audio-controls { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.audio-btn {
  background: transparent;
  border: 0;
  color: var(--ink-2);
  padding: 8px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s var(--ease), transform .1s var(--ease);
  cursor: pointer;
}
.audio-btn:active { transform: scale(.92); }
.audio-btn:hover { background: var(--bg-muted); }
.audio-play-btn {
  background: var(--ink-2);
  color: var(--bg);
  width: 44px; height: 44px;
  border-radius: 50%;
}
.audio-play-btn:hover { background: var(--ink); }
.audio-speed {
  background: var(--bg-muted);
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  appearance: none; -webkit-appearance: none;
}

/* When audio is active, give the chapter body extra bottom padding
   so the sticky player doesn't cover the last verses */
body.audio-active main { padding-bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 90px); }

/* ---------- TOAST ---------- */
.toast {
  position: fixed; left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 16px);
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 100;
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 520px) {
  .quickgrid { grid-template-columns: 1fr; }
  .chapter { padding: 28px 22px 32px; }
  .study-output { padding: 24px 20px; }
  .topbar-inner { padding: 8px 14px; }
  main { padding: 14px 14px 32px; }
  .daily-card { padding: 28px 22px 22px; }
  /* Four top actions leave no room for the tagline on phones. */
  .brand-tag { display: none; }
  .brand-name { font-size: 19px; }
  /* The audio transport + voice/speed/gain/close cluster is wider than
     a phone. Drop it onto its own full-width row beneath the title so
     its buttons wrap within the bar — keeping the close X on-screen. */
  .audio-controls { flex-basis: 100%; justify-content: flex-end; margin-top: 6px; }
}
/* Tablet: the bar floats as a rounded pill. */
@media (min-width: 768px) {
  .tabbar { border-radius: 22px; bottom: 16px; left: 16px; right: 16px; border: 1px solid var(--rule); box-shadow: var(--shadow-lg); }
  .tabbar-inner { height: 60px; }
  body { padding-bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 24px); }
  .toast { bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 32px); }
  .chat-form { bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 28px); border-radius: 22px; margin: 0 16px; width: calc(100% - 32px); max-width: calc(var(--maxw) - 32px); left: 50%; transform: translateX(-50%); }
}

/* Desktop: the same nav markup becomes a restrained left sidebar.
   --tabbar-h collapses to 0 so every bottom-offset calc (body padding,
   audio player, toast, chat form) resolves itself; body padding-left
   pushes the sticky topbar and centered main into the remaining
   width automatically. */
@media (min-width: 1024px) {
  :root { --sidebar-w: 236px; --tabbar-h: 0px; }
  body { padding-left: var(--sidebar-w); }

  .tabbar {
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--sidebar-w);
    border-radius: 0;
    border: 0; border-right: 1px solid var(--rule);
    box-shadow: none;
    background: var(--bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 20px 12px calc(env(safe-area-inset-bottom) + 16px);
    overflow-y: auto;
  }
  .tabbar-inner {
    display: flex; flex-direction: column;
    height: auto; max-width: none;
    gap: 4px;
  }
  /* Quiet wordmark at the top of the sidebar; the topbar brand hides
     so the name doesn't appear twice side by side. */
  .tabbar-inner::before {
    content: 'Restored Word';
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.2px;
    padding: 6px 14px 18px;
  }
  .topbar .brand { display: none; }
  .topbar-inner { justify-content: flex-end; }

  .tabbtn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 500;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .tabbtn svg { width: 21px; height: 21px; }
  .tabbtn:hover { background: var(--bg-muted); color: var(--ink-2); }
  .tabbtn:active { transform: none; }
  .tabbtn.active { background: var(--accent-soft); color: var(--accent); }
  .tabbtn::after { display: none; }
  .tabbtn-badge { top: 50%; transform: translateY(-50%); right: 12px; }

  .audio-player { left: calc(var(--sidebar-w) + 12px); }
  /* Toast centers via translateX(-50%), so shifting its left by half
     the sidebar re-centers it in the content area. */
  .toast { left: calc(50% + var(--sidebar-w) / 2); }
  /* The composer centers via margin:auto inside its left..right band.
     Reset the tablet (768px) rule's transform/width/margin, which would
     otherwise leak in and skew it off-center. */
  .chat-form {
    left: var(--sidebar-w); right: 0;
    transform: none;
    width: auto;
    margin: 0 auto;
    max-width: var(--maxw);
  }
}

/* Hide selects' native chevron consistency */
select { font-family: inherit; }

/* ==================== Games hub ==================== */
.games-hub h2 { margin: 0 0 4px; }
.games-hub > .muted { margin: 0 0 16px; }
.games-hub-grid { display: grid; gap: 10px; }
.game-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #2a1a4a, #5a3a9a);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  min-height: 96px;
  box-shadow: var(--shadow-sm);
}
.game-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.game-card-wordle      { background: linear-gradient(135deg, #143b3f, #2e7f86); }
.game-card-connections { background: linear-gradient(135deg, #3b2c1a, #8a6b3a); }
.game-card-trivia      { background: linear-gradient(135deg, #1f2a4d, #3a4a78); }
.game-card-eyebrow {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; opacity: .8;
}
.game-card-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin: 4px 0 4px;
}
.game-card-sub { font-size: 13px; opacity: .9; line-height: 1.4; }

.game-panel { padding: 0; }
.game-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 16px;
  flex-wrap: wrap;
}
.game-panel-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  flex: 1; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.game-info-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-3);
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
  line-height: 1;
  padding: 0;
}
.game-info-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* How-to-play modal body */
.game-info-body { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.game-info-body p { margin: 0 0 10px; }
.game-info-body ul, .game-info-body ol { margin: 0 0 10px 20px; padding: 0; }
.game-info-body li { margin-bottom: 6px; }
.game-info-body strong { color: var(--ink); }
.gi-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
  transform: translateY(-1px);
}
.gi-swatch.wt-green  { background: #4ade80; }
.gi-swatch.wt-yellow { background: #facc15; }
.gi-swatch.wt-gray   { background: #3f3f46; }

/* ---- Featured "Read the Bible in a Year" card on Study tab ---- */
.year-plan-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 22px 20px;
  margin: 0 0 20px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #1f2a4d, #3a4a78);
  background-size: cover;
  background-position: center;
  min-height: 148px;
  box-shadow: var(--shadow);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.year-plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.year-plan-eyebrow {
  font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-2);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.year-plan-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  line-height: 1.15;
  margin: 6px 0 8px;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.year-plan-sub {
  font-size: 13.5px;
  line-height: 1.45;
  opacity: .95;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  max-width: 34em;
}
.year-plan-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700;
  color: #fff;
  padding-top: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.game-panel-status {
  font-size: 12px; color: var(--ink-3);
  min-width: 100px; text-align: right;
}
.game-back { padding: 6px 12px; font-size: 13px; }

/* ---- Wordle ---- */
.wordle-board {
  display: grid; grid-template-rows: repeat(6, 1fr);
  gap: 6px;
  max-width: 340px;
  margin: 0 auto 16px;
}
.wordle-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.wordle-tile {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--rule-strong);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 26px; font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  background: transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.wordle-tile.filled { border-color: var(--ink-3); }
.wordle-tile.wt-green  { background: #4ade80; border-color: #4ade80; color: #0a0b0d; }
.wordle-tile.wt-yellow { background: #facc15; border-color: #facc15; color: #0a0b0d; }
.wordle-tile.wt-gray   { background: #3f3f46; border-color: #3f3f46; color: #d4d4d8; }
.wordle-msg {
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
  min-height: 18px;
  margin: 6px 0 12px;
}
.wordle-hint {
  background: var(--accent-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--ink);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.4;
  text-align: left;
  margin-bottom: 8px;
}
.game-hint-row {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
}
.game-hint-btn {
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 999px;
}
.game-hint-btn[disabled] {
  opacity: .5;
  cursor: default;
}
.conn-hint {
  background: var(--accent-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 6px;
  font-size: 13px;
  text-align: center;
  color: var(--ink);
}
.conn-hint strong { color: var(--accent); }

/* ---- Strands ---- */
.game-card-strands { background: linear-gradient(135deg, #0f3a2e, #2f7d5a); }

.strands-theme {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.strands-board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  gap: 5px;
  max-width: 360px;
  margin: 0 auto 12px;
}
.strand-cell {
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(15px, 4.2vw, 20px);
  font-weight: 800;
  cursor: pointer;
  transition: background .12s var(--ease), transform .1s var(--ease), box-shadow .12s var(--ease);
  text-transform: uppercase;
  padding: 0;
}
.strand-cell:hover { background: var(--rule-strong); }
.strand-cell.selected {
  background: var(--ink-2);
  color: var(--bg);
  transform: scale(.95);
  box-shadow: 0 0 0 3px var(--accent-2);
}
.strand-cell.word-solved {
  background: rgba(125, 211, 252, .35);
  color: var(--ink);
  cursor: default;
}
.strand-cell.spangram-solved {
  background: rgba(251, 191, 36, .55);
  color: #1a1207;
  cursor: default;
}
.strand-cell.hinted {
  animation: strand-hint-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, .75);
}
@keyframes strand-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(251, 191, 36, .55); }
  50%      { box-shadow: 0 0 0 5px rgba(251, 191, 36, .95); }
}
.strands-current {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent-2);
  min-height: 24px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.strands-msg {
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
  min-height: 18px;
  margin: 4px 0 12px;
}
.strands-actions {
  display: flex; gap: 8px; justify-content: center;
}
.strands-actions button { flex: 1 1 0; }
.wordle-keyboard {
  display: grid; gap: 6px; max-width: 500px; margin: 0 auto;
}
.wordle-kb-row {
  display: flex; gap: 4px; justify-content: center;
}
.wordle-key {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  border: 0;
  border-radius: 6px;
  background: var(--bg-muted);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.wordle-key:hover { background: var(--rule-strong); }
.wordle-key.wt-green  { background: #4ade80; color: #0a0b0d; }
.wordle-key.wt-yellow { background: #facc15; color: #0a0b0d; }
.wordle-key.wt-gray   { background: #3f3f46; color: #a1a1aa; }
.wordle-key-wide { flex: 1.6 1 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }

/* ---- Connections ---- */
.connections-solved { display: grid; gap: 6px; margin-bottom: 8px; }
.connections-solved-bar {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
}
.connections-solved-bar .cs-name {
  font-weight: 700; font-size: 13px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.connections-solved-bar .cs-items {
  margin-top: 4px; font-size: 13px; color: var(--ink);
}
.connections-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.conn-tile {
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  background: var(--bg-muted);
  color: var(--ink);
  font-weight: 700; font-size: 11px;
  padding: 4px;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  word-break: break-word;
  transition: background .12s var(--ease), transform .1s var(--ease);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.conn-tile:hover { background: var(--rule-strong); }
.conn-tile.selected {
  background: var(--ink-2); color: var(--bg);
  transform: scale(.96);
}
.conn-tile[disabled] { opacity: .5; cursor: default; }
.connections-msg {
  min-height: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.conn-reveal { text-align: left; line-height: 1.5; font-size: 13px; }
.connections-actions {
  display: flex; gap: 8px; justify-content: center;
}
.connections-actions button { flex: 1 1 0; }

/* ---- Friend profile modal ---- */
.fp-hero {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 14px;
}
.fp-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.fp-hero-info { flex: 1; min-width: 0; }
.fp-name {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  line-height: 1.15;
}
.fp-meta {
  font-size: 13px; color: var(--ink-3);
  margin-top: 4px;
}
.fp-stats { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fp-actions {
  display: flex; gap: 8px;
  margin: 6px 0 18px;
}
.fp-actions button { flex: 1 1 0; }
.fp-like-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.fp-like-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.fp-like-btn.active svg { fill: var(--accent); }
.fp-section-title {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 6px 0 10px;
}
.fp-plans { display: grid; gap: 8px; }
.fp-plan-row {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 10px 14px;
}
.fp-plan-kind {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.fp-plan-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  margin: 3px 0 2px;
}
.fp-plan-progress {
  font-size: 12px;
  color: var(--ink-3);
}

/* ---- Profile picture ---------------------------------------------- */
/* Any avatar container that gets an <img> child fills it edge-to-edge
   using object-fit: cover, so the initials fallback and photo swap in
   place without layout thrash. */
.friend-avatar img,
.cpost-avatar img,
.ccomment-avatar img,
.fp-avatar img,
.you-avatar img,
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.avatar-preview {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.avatar-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.avatar-prompt-preview {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  margin: 6px auto 12px;
  overflow: hidden;
}

/* ============================================================
   Design system utilities (Phase 2)
   -----------------------------------------------------------
   Adopted incrementally by later phases. Existing styles above
   still resolve because tokens (colors, radii, motion) were
   renamed only when compatible — every `--accent` in the wild
   now paints warm gold, and every `--font-display` now resolves
   to Cormorant Garamond, which was the point.
   ============================================================ */

/* ---- Typography helpers ---- */
.t-display,
.t-scripture {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.t-display  { font-size: clamp(28px, 6.5vw, var(--fs-display)); }
.t-h1       { font-family: var(--font-display); font-size: clamp(24px, 5.5vw, var(--fs-h1)); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.t-h2       { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
.t-h3       { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; }
.t-body-lg  { font-size: var(--fs-body-lg); line-height: 1.6; }
.t-body     { font-size: var(--fs-body); line-height: 1.55; }
.t-body-sm  { font-size: var(--fs-body-sm); line-height: 1.55; }
.t-caption  { font-size: var(--fs-caption); line-height: 1.4; color: var(--ink-3); letter-spacing: 0.02em; }
.t-eyebrow  {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.t-scripture {
  /* Verse pull quote — italic when class="scripture italic". */
  font-size: clamp(20px, 4.2vw, 26px);
  line-height: 1.45;
  color: var(--ink);
}
.t-scripture.italic { font-style: italic; }

/* ---- Card shells ---- */
.rw-card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow);
}
.rw-card-flat {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp);
}
.rw-card-quiet {
  background: var(--bg-muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp);
}

/* ---- Divider ---- */
.rw-rule { height: 1px; background: var(--rule); margin: var(--sp-lg) 0; border: 0; }

/* ---- Loading skeleton ----
   Calmer than a spinner. Use for lists, cards, chapter shells while
   data streams in. Motion is paused automatically for reduced-motion. */
.rw-skel {
  background: linear-gradient(
    90deg,
    var(--bg-elev) 0%,
    var(--bg-elev-2) 40%,
    var(--bg-elev) 80%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: rw-skel-shimmer 1.6s var(--ease) infinite;
}
.rw-skel-line { height: 12px; border-radius: 999px; margin: 8px 0; }
.rw-skel-line.sm { height: 10px; }
.rw-skel-block { height: 140px; border-radius: var(--radius); }
.rw-skel-circle { width: 44px; height: 44px; border-radius: 50%; }
@keyframes rw-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Empty / error state ---- */
.rw-empty,
.rw-error {
  text-align: center;
  padding: var(--sp-2xl) var(--sp-lg);
  color: var(--ink-3);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.rw-empty-icon,
.rw-error-icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--sp);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.rw-empty-title,
.rw-error-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--ink);
  margin: 0 0 var(--sp-sm);
  font-weight: 600;
}

/* ---- Focus ring refinement ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- BlackRidge attribution (subtle, secondary) ---- */
.built-by { margin-top: 10px; }
.built-by a {
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.built-by a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   App shell (Phase 3): Home Pause CTA · Pause tab · You hub
   ============================================================ */

/* ---- Home: time-aware Pause CTA ---- */
.home-pause-cta {
  width: 100%;
  display: flex; align-items: center; gap: 16px;
  text-align: left;
  background: var(--hero-grad);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  margin: 2px 0 18px;
  box-shadow: var(--shadow);
  transition: transform var(--dur-instant) var(--ease), border-color var(--dur-fast) var(--ease);
}
.home-pause-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--hero-glow);
  pointer-events: none;
}
.home-pause-cta:active { transform: scale(.99); }
.home-pause-cta:hover { border-color: var(--rule-strong); }
.home-pause-cta.evening {
  background: linear-gradient(155deg, var(--navy-2) 0%, var(--navy) 55%, var(--navy-2) 100%);
}
.hpc-text { flex: 1; min-width: 0; position: relative; }
.hpc-eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.hpc-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 7px;
}
.hpc-meta { font-size: 12.5px; color: var(--ink-3); }
.hpc-play {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--accent);
  color: #1A140A;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  box-shadow: var(--shadow-glow);
}
.hpc-play svg { margin-left: 3px; }

/* ---- Pause tab ---- */
.pause-tab-head { padding: 6px 4px 18px; }
.pause-tab-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 34px);
  font-weight: 600;
  margin: 6px 0 4px;
  letter-spacing: -.01em;
}
.pause-tab-sub { margin: 0; font-size: 14.5px; }

/* ---- You hub ---- */
.you-profile {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 4px 22px;
}
.you-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.you-info { flex: 1; min-width: 0; }
.you-name {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.you-sub {
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 5px;
  line-height: 1.5;
}
/* Spiritual habits — calm summary, no XP / levels / badges. */
.you-habits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 0 8px;
}
.habit {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 6px 12px;
  text-align: center;
}
.habit-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
.habit-label {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 5px;
  line-height: 1.25;
}

.you-group-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 20px 4px 8px;
}
.you-list {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.you-row {
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  padding: 13px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.you-row + .you-row { border-top: 1px solid var(--rule); }
.you-row:hover, .you-row:active { background: var(--bg-muted); }
.you-row-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.you-row-label { flex: 1; min-width: 0; }
.you-row-chev { color: var(--ink-soft); flex: 0 0 auto; }
.you-row-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

/* ============================================================
   Home (Phase 4): stillness line · continue-reading card
   ============================================================ */
.today-stillness {
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-3);
  padding: 0 4px 16px;
  max-width: 46ch;
}
.today-stillness .stillness-ref {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.cr-card {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 18px;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cr-card:hover { background: var(--bg-elev-2); border-color: var(--rule-strong); }
.cr-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.cr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-eyebrow {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.cr-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.cr-sub { font-size: 12.5px; color: var(--ink-3); }
.cr-chev { color: var(--ink-soft); flex: 0 0 auto; }