/* ============================================================
   Milestone 2 · Bible UX Polish Sprint (v1.5) — additive styles.
   These layer on top of bible.css / my-walk.css and target the
   specific issues in the sprint brief:
     • Issue 1 — verse rendering + selection improvements
     • Issue 2 — keyboard-aware bottom sheets
     • Issue 3 — vertically scrollable chapter picker
     • Issue 4 — clean prev/next chapter navigation
     • Issue 5 — high-contrast current-location header
     • Issue 6 — audio "unavailable" row (disabled button + copy)
     • Issue 7 — Save toast with destination line
     • Issue 8 — Favorites section in My Walk
   Base styles in bible.css and my-walk.css remain unchanged.
   ============================================================ */

/* ─── Issue 1 — Verse rendering & readability ────────────────
   Verse numbers now render as prominent clay-red badges so users
   can scan the chapter quickly on any translation (YouVersion or
   offline). Extra vertical rhythm between verses so each verse
   reads as its own row on iPhone. */
.bible-verses { gap: 1.35rem; }
.bible-verse {
  padding: 0.65rem 0.75rem 0.75rem 0.35rem;
  align-items: baseline;
}
.bible-verse-text {
  font-size: 1.06rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.bible-verse-num {
  min-width: 2rem;
  padding: 0.05rem 0.4rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-clay-500, #B5591A);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.bible-verse.is-selected {
  border-color: rgba(24, 53, 41, 0.2);
  background: rgba(24, 53, 41, 0.06);
  box-shadow: 0 0.25rem 0.6rem rgba(24, 53, 41, 0.05);
}

/* ─── Issue 5 — Current-location header prominence ───────────
   The h1 stays "Psalms 23"; a new subtitle underneath surfaces
   the full translation name so the user always knows which
   version they're reading. Both sit on cream with forest ink
   for AA-level contrast. */
.bible-chapter-head { align-items: flex-start; }
.bible-chapter-head-text { min-width: 0; }
.bible-chapter-subtitle {
  margin: 0.15rem 0 0;
  font-family: var(--font-serif, "Fraunces", "Playfair Display", serif);
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(24, 53, 41, 0.72);
  line-height: 1.3;
}
.bible-chapter-subtitle-short {
  font-style: normal;
  font-weight: 600;
  color: var(--color-clay-500, #7A3A0E);
  letter-spacing: 0.03em;
}

/* ─── Issue 6 — Audio "unavailable" row ──────────────────────
   Persistent disabled button + copy, so the audio surface never
   disappears. Semantically disabled (aria-disabled + disabled)
   so screen readers announce state and taps are ignored. */
.bible-audio-unavailable-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.35rem 1rem 0.75rem;
  padding: 0.75rem 0.9rem;
  background: rgba(24, 53, 41, 0.04);
  border: 1px solid rgba(24, 53, 41, 0.08);
  border-radius: 999px;
}
.bible-audio-listen {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 0;
  background: rgba(24, 53, 41, 0.12);
  color: rgba(24, 53, 41, 0.55);
  font: inherit;
  font-weight: 600;
  cursor: not-allowed;
  min-height: 2.5rem;
}
.bible-audio-listen svg { width: 1rem; height: 1rem; }
.bible-audio-listen[disabled] { opacity: 0.7; }
.bible-audio-unavailable-note {
  font-size: 0.85rem;
  color: rgba(24, 53, 41, 0.65);
  line-height: 1.35;
  font-style: italic;
}

/* ─── Issue 4 — Prev/Next chapter navigation ─────────────────
   Two large tap targets (56px minimum), each showing arrow +
   destination label ("Psalms 22"). No overlap, no truncation. */
.bible-chapter-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 1.1rem 0 0.5rem;
}
.bible-chapter-nav-btn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  min-height: 3.5rem;
  border: 1px solid rgba(24, 53, 41, 0.14);
  background: #fff;
  color: var(--color-forest-900);
  font: inherit;
  font-weight: 500;
  border-radius: 1rem;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
  text-align: left;
}
.bible-chapter-nav-btn.is-next { justify-content: flex-end; text-align: right; }
.bible-chapter-nav-btn:hover:not([disabled]) { background: rgba(24, 53, 41, 0.03); }
.bible-chapter-nav-btn:active:not([disabled]) { transform: translateY(1px); }
.bible-chapter-nav-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.bible-chapter-nav-arrow {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-clay-500, #7A3A0E);
  flex: 0 0 auto;
}
.bible-chapter-nav-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.bible-chapter-nav-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(24, 53, 41, 0.55);
  font-weight: 600;
}
.bible-chapter-nav-label {
  font-family: var(--font-serif, "Fraunces", "Playfair Display", serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-forest-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Issue 3 — Chapter picker (grid, scrollable) ────────────
   Matches the reference Bible-app design: 5-column grid of
   boxed chapter numbers, scrollable inside the sheet so every
   chapter of every book is reachable (Genesis 50 · Psalms 150
   · Revelation 22). Active chapter renders as a solid dark
   box with white text; the rest render as light-grey outlined
   pills. Grid gaps sized for comfortable thumb-taps on iPhone. */
.bible-picker-chapters {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.55rem;
  overflow-y: auto;
  max-height: 62vh;
  min-height: 15rem;
  padding: 0.35rem 0.15rem 0.5rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.bible-picker-chapter-item {
  appearance: none;
  aspect-ratio: 1 / 1;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(24, 53, 41, 0.14);
  background: #fff;
  border-radius: 0.85rem;
  font: inherit;
  font-family: var(--font-serif, "Fraunces", "Playfair Display", serif);
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-forest-900);
  cursor: pointer;
  transition: transform 90ms ease, background-color 120ms ease;
  padding: 0;
}
.bible-picker-chapter-item:hover:not(.is-active) {
  background: rgba(24, 53, 41, 0.05);
}
.bible-picker-chapter-item:active { transform: scale(0.96); }
.bible-picker-chapter-item.is-active {
  background: var(--color-forest-900);
  color: #fff;
  border-color: var(--color-forest-900);
}

/* Sprint v1.5 also bumps the shared bible-picker sheet up so it
   doesn't clip on tall lists; base bible.css caps at 78vh. */
.bible-picker { max-height: 86vh; }

/* ─── Issue 2 — Keyboard-aware bottom sheets ─────────────────
   Two-pronged fix:
     1) On Capacitor native (iOS/Android) the Keyboard plugin
        already sets `resize: 'body'` and exposes the CSS var
        `--keyboard-inset-height` on modern engines. We reserve
        `env(keyboard-inset-height, 0)` below the sheet content.
     2) On the browser (Emergent preview, non-Capacitor devices)
        the JS in app.js listens to `visualViewport.resize` and
        writes a CSS custom property `--rooted-keyboard-inset`
        onto <html>. Sheets respect the max of the two so the
        text field AND action buttons stay visible above the
        keyboard. */
:root { --rooted-keyboard-inset: 0px; }
html.rooted-keyboard-open .bible-picker,
.bible-picker {
  padding-bottom: calc(
    1rem
    + env(safe-area-inset-bottom)
    + max(env(keyboard-inset-height, 0px), var(--rooted-keyboard-inset, 0px))
  );
  transition: padding-bottom 200ms ease;
}

/* Sprint v1.5.1 — When the keyboard is open, LIFT the entire sheet
   backdrop up by the keyboard inset. In Capacitor with `Keyboard.resize
   = 'body'` the WebView itself shrinks so the sheet is naturally above
   the keyboard; in browser fallback (preview + non-native devices) the
   viewport doesn't shrink, so we translate the flex-end column up by
   the JS-published inset. Both mechanisms compose safely — the max()
   ensures we use the larger of the two. */
.bible-picker-backdrop {
  padding-bottom: max(env(keyboard-inset-height, 0px), var(--rooted-keyboard-inset, 0px));
  transition: padding-bottom 180ms ease;
}

/* Sprint v1.5.1 — Note & Reflect sheets are now flex columns:
     [ title ] flex 0 0 auto
     [ scrollable textarea + existing notes ] flex 1 1 auto
     [ action buttons ] flex 0 0 auto
   The scrollable region shrinks to accommodate the keyboard, and
   the action buttons remain pinned to the bottom of the sheet's
   visible area. On iPhone Capacitor WKWebView both env(keyboard-
   inset-height) and the JS-managed --rooted-keyboard-inset feed
   the sheet's max-height so Save/Cancel are ALWAYS reachable. */
.bible-picker.bible-note-sheet {
  display: flex;
  flex-direction: column;
  max-height: calc(
    100dvh
    - max(env(keyboard-inset-height, 0px), var(--rooted-keyboard-inset, 0px))
    - 1rem
  );
  min-height: 0;
}
.bible-picker.bible-note-sheet .bible-picker-title { flex: 0 0 auto; }
.bible-picker.bible-note-sheet .bible-reflect-hint { flex: 0 0 auto; }
.bible-picker.bible-note-sheet textarea {
  flex: 1 1 auto;
  min-height: 5.5rem;
  max-height: 100%;
  resize: none;
  overflow-y: auto;
}
.bible-picker.bible-note-sheet .bible-note-existing {
  flex: 0 1 auto;
  overflow-y: auto;
  max-height: 30vh;
}
.bible-picker.bible-note-sheet .bible-note-actions {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: inherit;
  padding-top: 0.5rem;
  margin-bottom: 0;
}

/* ─── Issue 7 — Toast detail line ────────────────────────────
   Second line shows destination (e.g. "Saved to: My Walk → Saved
   Verses"). Wider width, softer edges, still floats above bottom
   nav. */
.bible-toast {
  min-width: 12rem;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: 0.75rem 1.1rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.bible-toast.has-detail { padding: 0.85rem 1.15rem 0.75rem; }
.bible-toast-line { font-weight: 600; }
.bible-toast-detail {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.01em;
}