/*
 * ════════════════════════════════════════════════════════════════════════
 * overlays.css
 * ════════════════════════════════════════════════════════════════════════
 *
 * Floating elements, bottom-sheets, and context-specific modal content.
 * These are fixed-position layers that sit above the main content flow.
 *
 * NOTE — related rules that live elsewhere by convention:
 *   • .verse-btn          → components.cards.responses.css
 *     (it is a button inside the question card ref bar)
 *   • .likert-popup-overlay / .likert-popup
 *                         → components.cards.responses.css
 *     (the Likert scale and its popup are self-contained there)
 *   • Close button animations (.verse-modal-close span etc.)
 *                         → components.nav.css
 *     (shared animation rules for all close buttons live there)
 *
 * 01. Shared keyframes    – fadeIn and slideUp used by all bottom-sheets
 * 02. Verse modal         – Bottom-sheet for NET Bible passage text
 * 03. QA / Gen callout    – Inline "Common Misunderstanding" card
 * 04. QA modal            – Bottom-sheet for misunderstanding explanation
 * 05. Go Deeper question  – additional question when the user taps button
 * 06. Modal close footer  – Shared ✕ footer button inside bottom-sheets
 * 07. Onboarding overlay  – Full-screen first-run intro slides
 * 08. Search overlay      – Full-screen search input and results
 * 09. GPU compositing     – will-change hints for overlay elements
 * 10. Info Trigger Popups – First time documentation & hints 
 *
 * ── DARK MODE ───────────────────────────────────────────────────────────
 * 11. Dark mode           – body.dark-mode overrides for all rules above
 *
 * ── MULTILINGUAL / RTL ──────────────────────────────────────────────────
 * 12. RTL overrides       – Mirrors layout for Arabic, Hebrew, Urdu
 * 13. Script overrides    – Per-script resets grouped by script family:
 *                           A. Arabic script   — ar, ur
 *                           B. Hebrew script   — he
 *                           C. Devanagari      — ne, hi
 *                           D. Myanmar         — my
 *                           E. CJK             — zh (zh-CN), ja
 *                           F. Hangul          — ko
 *                           G. Cyrillic        — ru, uk  (chrome labels only)
 *                           H. Greek           — el       (chrome labels only)
 *
 * ════════════════════════════════════════════════════════════════════════
 */


/* ── 01. SHARED KEYFRAMES ───────────────────────────────────────────────── */
/* fadeIn and slideUp are used by every bottom-sheet modal in this file,
   and also referenced by .likert-popup-overlay in components.cards.responses.css.
   Defining them here (in the first file that needs them) ensures they are
   always available — provided overlays.css is linked before components files. */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ── 02. VERSE MODAL ────────────────────────────────────────────────────── */
/* Bottom-sheet modal that displays a NET Bible passage when the user taps
   a .verse-btn inside a question card ref bar. */

.verse-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44,36,22,0.55);
  z-index: var(--z-modal);
  align-items: flex-end;
  justify-content: center;
}
.verse-modal-overlay.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}
.verse-modal {
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 20px 20px 36px;
  max-width: 480px;
  width: 100%;
  max-height: 75vh;
  overflow-y: auto;
  animation: slideUp 0.25s ease;
}

/* Title bar: scripture reference label left, close button right */
.verse-modal-ref {
  font-family: var(--font-stack-mono);
  font-size: 10px;         /* UI chrome — stays px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emphasis);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.verse-modal-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 18px;         /* UI chrome — stays px */
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
/* ── Speak buttons inside modal title bars ──────────────────────────────── */
/* Override the absolute positioning from components.cards.display.css
   so the button sits inline within the flex title row instead. */
#verseModalSpeakBtn,
#qaModalSpeakBtn {
  position: static;
  flex-shrink: 0;
  margin-inline-start: auto;   /* was margin-left — pushes to inline-end, before close button */
  margin-inline-end: 8px;         /* was margin-right */
  opacity: 0.6;
}

/* Passage body text */
.verse-modal-text {
  font-family: var(--main-font-family);
  font-size: 0.906rem;     /* was 14.5px — scales */
  color: var(--text);
  line-height: 1.8;
}
/* Footnote superscript links in NET Bible text */
.verse-modal-text sup a {
  color: var(--emphasis);
  text-decoration: none;
  font-family: var(--font-stack-mono);
  font-size: 9px;          /* footnote superscript — stays px */
}

/* Attribution footer with link to full passage */
.verse-modal-footer {
  margin-top: 16px;
  font-family: var(--font-stack-mono);
  font-size: 10px;         /* UI chrome — stays px */
  color: var(--text-faint);
  text-align: end;             /* was text-align: right */
}
.verse-modal-footer a {
  color: var(--emphasis);
  text-decoration: underline;
}

/* ── Translation tabs ───────────────────────────────────────────────────── */
/* Pill-strip of translation buttons (e.g. 1979 · CLV · SRK · NET) that      */
/* appears between the title bar and passage text when multiple translations  */
/* are available. One button per translation; .active marks the visible one.  */
/* Class names as rendered by openVerseModal() in modals.js:                  */
/*   container → .verse-trans-tab-row   button → .verse-trans-btn             */
.verse-trans-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.verse-trans-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-faint);
  font-family: var(--font-stack-mono);
  font-size: 10px;         /* UI chrome — stays px */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.6;
}
.verse-trans-btn:hover {
  background: var(--surface-mid);
  border-color: var(--text-faint);
  color: var(--text);
}
.verse-trans-btn.active {
  background: var(--emphasis);
  border-color: var(--emphasis);
  color: var(--surface);
}


/* ── 03. QA / GEN CALLOUT ───────────────────────────────────────────────── */
/* Inline card rendered within chapter content to flag a common
   misunderstanding (.qa-callout-card) or general note (.gen-callout-card).
   Uses the dark nav palette (--text background) so it reads as an
   authoritative aside distinct from the parchment card surfaces. */

.qa-callout-card,
.gen-callout-card {
  background: var(--text);
  margin: 16px var(--content-margin) 4px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px var(--shadow);
}
.qa-callout-eyebrow,
.gen-callout-eyebrow {
  background: var(--emphasis);
  padding: 6px 14px;
  font-family: var(--font-stack-mono);
  font-size: 10px;         /* UI chrome — stays px */
  font-weight: bold;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--surface);
}
.qa-callout-body,
.gen-callout-body {
  padding: 14px 16px 16px;
}
.qa-callout-term,
.gen-callout-term {
  font-family: var(--font-stack-heading);
  font-size: 20px;         /* display heading — stays px */
  font-style: italic;
  color: var(--accent-light);
  margin-bottom: 8px;
}
.qa-callout-question,
.gen-callout-question {
  font-family: var(--main-font-family);
  font-size: 0.875rem;     /* was 14px — scales */
  color: rgba(245,240,232,0.75);
  line-height: 1.65;
  margin-bottom: 12px;
}
.qa-callout-question ul, .qa-callout-question ol,
.gen-callout-question ul, .gen-callout-question ol {
  padding-inline-start: 1.0rem;   /* was padding-left */
  margin: 4px 0;
}
/* "Read explanation →" button that opens the QA modal */
.qa-callout-btn,
.gen-callout-btn {
  background: none;
  border: 1px solid rgba(184,146,42,0.5);
  color: var(--accent-light);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--font-stack-mono);
  font-size: 10px;         /* UI chrome — stays px */
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.qa-callout-btn:hover,
.gen-callout-btn:hover {
  background: rgba(184,146,42,0.12);
  border-color: var(--accent-light);
}
/* ── List indentation inside callout cards ──────────────────────────────── */
.gen-callout-question ul,
.gen-callout-question ol,
.gen-callout-answer ul,
.gen-callout-answer ol,
.qa-callout-question ul,
.qa-callout-question ol,
.qa-callout-answer ul,
.qa-callout-answer ol {
  padding-inline-start: 1.4em;   /* was padding-left */
  margin: 8px 0;
}
.gen-callout-question li,
.gen-callout-answer li,
.qa-callout-question li,
.qa-callout-answer li {
  margin-bottom: 4px;
  line-height: 1.65;
}

/* ── 04. QA MODAL ───────────────────────────────────────────────────────── */
/* Bottom-sheet that expands the full misunderstanding explanation when
   the user taps the callout button. */

.qa-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44,36,22,0.6);
  z-index: var(--z-modal);
  align-items: flex-end;
  justify-content: center;
}
.qa-modal-overlay.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}
.qa-modal {
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 24px 20px 40px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.25s ease;
}
.qa-modal-eyebrow {
  font-family: var(--font-stack-mono);
  font-size: 10px;         /* UI chrome — stays px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emphasis);
  margin-bottom: 6px;
}
/* Term heading row — title left, close button right */
.qa-modal-term {
  font-family: var(--font-stack-heading);
  font-size: 22px;         /* display heading — stays px */
  font-style: italic;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.qa-modal-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 18px;         /* UI chrome — stays px */
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  margin-inline-start: 12px;   /* was margin-left */
}
.qa-modal-text {
  font-family: var(--main-font-family);
  font-size: 0.9375rem;    /* was 15px — scales */
  color: var(--text);
  line-height: 1.8;
}
.qa-modal-text p + p {
  margin-top: 12px;
}
.qa-modal-text ul,
.qa-modal-text ol {
  padding-inline-start: 1.0rem;   /* was padding-left */
  margin: 4px 0;
}

/* ── 05. DEEPER QUESTION MODAL ─────────────────────────────────────────── */
/* Bottom-sheet that shows an additional reflective question when the user
   taps "(go deeper ↗)" within a question card. Read-only — no answer field. */

.deeper-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44,36,22,0.6);
  z-index: var(--z-modal);
  align-items: flex-end;
  justify-content: center;
}
.deeper-modal-overlay.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}
.deeper-modal {
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 24px 20px 40px;
  max-width: 480px;
  width: 100%;
  max-height: 75vh;
  overflow-y: auto;
  animation: slideUp 0.25s ease;
}
.deeper-modal-eyebrow {
  font-family: var(--font-stack-mono);
  font-size: 10px;         /* UI chrome — stays px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emphasis);
  margin-bottom: 14px;
}
.deeper-modal-body {
  font-family: var(--main-font-family);
  font-size: 1rem;
  color: var(--text);
  line-height: 1.75;
}
.deeper-modal-body p + p { margin-top: 12px; }

/* ── 06. MODAL CLOSE FOOTER ─────────────────────────────────────────────── */
/* A centred ✕ Close button rendered at the foot of bottom-sheet modals
   as an alternative to the top-right close button, for thumb reachability. */

.modal-close-footer {
  margin-top: 20px;
  text-align: center;
}
.modal-close-footer-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  border-radius: 20px;
  padding: 8px 24px;
  font-family: var(--font-stack-mono);
  font-size: 11px;         /* UI chrome — stays px */
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.modal-close-footer-btn:hover {
  background: var(--surface-mid);
  color: var(--text);
}


/* ── 07. ONBOARDING OVERLAY ─────────────────────────────────────────────── */
/* Full-screen first-run intro slide deck. Shown once on first launch,
   controlled by JS via the .onboarding-overlay element's display state.
   Uses the dark nav palette (--text background) for a focused experience. */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-onboarding);
  background: var(--text);
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.1s ease;
  overflow: hidden;
}

/* Sliding panel that holds all slides side-by-side;
   JS translates it horizontally to advance between slides */
.onboarding-slides {
  flex: 1;
  display: flex;
  position: relative;
  width: 100%;
  transition: transform 0.35s ease;
  min-height: 0;
}
.onboarding-slide {
  min-width: 100%;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 48px 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
}
.onboarding-icon {
  font-size: 52px;         /* emoji — stays px */
  margin-bottom: 24px;
  line-height: 1;
}
.onboarding-eyebrow {
  font-family: var(--font-stack-mono);
  font-size: 10px;         /* UI chrome — stays px */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.onboarding-heading {
  font-family: var(--font-stack-heading);
  font-size: 28px;         /* display heading — stays px */
  line-height: 1.2;
  color: var(--surface);
  margin-bottom: 16px;
}
.onboarding-body {
  font-family: var(--main-font-family);
  font-size: 0.9375rem;    /* was 15px — scales */
  color: rgba(245,240,232,0.75);
  line-height: 1.75;
}
.onboarding-body em {
  color: var(--accent-light);
  font-style: normal;      /* em used for accent colour, not italics */
}

/* Footer: progress dots + Next / Skip buttons */
.onboarding-footer {
  padding: 16px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
.onboarding-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245,240,232,0.25);
  transition: background 0.25s, transform 0.25s;
}
.onboarding-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}
.onboarding-next-btn {
  background: var(--accent);
  color: var(--text);
  border: none;
  border-radius: 10px;
  padding: 16px 24px;
  font-family: var(--font-stack-heading);
  font-size: 17px;         /* UI chrome — stays px */
  cursor: pointer;
  width: 100%;
  transition: background 0.2s, transform 0.1s;
}
.onboarding-next-btn:active { transform: scale(0.98); }
.onboarding-next-btn:hover  { background: var(--accent-light); }

.onboarding-skip-btn {
  background: none;
  border: none;
  color: rgba(245,240,232,0.35);
  font-family: var(--font-stack-mono);
  font-size: 11px;         /* UI chrome — stays px */
  letter-spacing: 0.08em;
  cursor: pointer;
  text-align: center;
  padding: 4px;
  transition: color 0.2s;
}
.onboarding-skip-btn:hover { color: rgba(245,240,232,0.6); }

/* Compact layout for short screens (e.g. landscape phone) */
@media (max-height: 600px) {
  .onboarding-slide {
    padding: 24px 28px 16px;
  }
  .onboarding-icon {
    font-size: 36px;
    margin-bottom: 14px;
  }
  .onboarding-heading {
    font-size: 22px;
    margin-bottom: 10px;
  }
  .onboarding-footer {
    padding: 10px 24px 20px;
  }
}
.onboarding-body ol,
.onboarding-body ul {
  padding-inline-start: 1.5em;   /* was padding-left */
}

/* ── 08. SEARCH OVERLAY ─────────────────────────────────────────────────── */
/* Full-screen search panel that slides down from below the top nav.
   var(--z-search) keeps it below modals (var(--z-modal)) but above page content. */

/* Base hidden state — no animation here to prevent initial flash */
.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-search);
  top: calc(52px + env(safe-area-inset-top)) !important;
  height: calc(100vh - (52px + env(safe-area-inset-top))) !important;
  background: var(--text);
  flex-direction: column;
  opacity: 0;
  transform: translateY(-50%);
}
/* Opening state — slide down animation */
.search-overlay.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  animation: slideDownSearch 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* slideDownSearch is distinct from chrome.css's slideDown (chapter menu).
   This version uses a springier cubic-bezier curve for the search panel.
   Renamed to avoid the cascade conflict that would occur if both keyframe
   definitions loaded in the same stylesheet context. */
@keyframes slideDownSearch {
  from { transform: translateY(-50%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: 1px solid rgba(245,240,232,0.08);
}
.search-input {
  flex: 1;
  background: rgba(245,240,232,0.08);
  border: 1px solid rgba(245,240,232,0.15);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--main-font-family);
  font-size: 0.9375rem;    /* was 15px — scales */
  color: var(--surface);
  outline: none;
  transition: border-color 0.2s;
}
.search-input::placeholder {
  color: rgba(245,240,232,0.3);
}
.search-input:focus {
  border-color: var(--accent);
}
.search-cancel-btn {
  background: none;
  border: none;
  color: rgba(245,240,232,0.5);
  font-family: var(--font-stack-mono);
  font-size: 11px;         /* UI chrome — stays px */
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  padding: 4px;
  transition: color 0.2s;
}
.search-cancel-btn:hover { color: var(--surface); }

.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
/* Empty state and "Did you mean" container */
.search-empty {
  text-align: center;
  padding: 48px 24px;
  font-family: var(--main-font-family);
  font-size: 0.9375rem;    /* was 15px — scales */
  color: rgba(245,240,232,0.35);
  line-height: 1.7;
}
.search-empty b {
  color: var(--card-bg);   /* highlights the "Did you mean X?" suggestion */
}

/* Section labels e.g. "Questions", "Did you mean…" */
.search-section-label {
  font-family: var(--font-stack-mono);
  font-size: 9px;          /* UI chrome — stays px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 16px 16px 6px;
}
.search-result-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(245,240,232,0.06);
  cursor: pointer;
  transition: background 0.15s;
}
.search-result-item:hover {
  background: rgba(245,240,232,0.06);
}
.search-result-meta {
  font-family: var(--font-stack-mono);
  font-size: 9px;          /* UI chrome — stays px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.search-result-text {
  font-family: var(--main-font-family);
  font-size: 0.875rem;     /* was 14px — scales */
  color: rgba(245,240,232,0.75);
  line-height: 1.6;
}
/* Highlighted match within result text */
.search-result-text mark {
  background: rgba(184,146,42,0.35);
  color: var(--accent-light);
  border-radius: 2px;
  padding: 0 1px;
}
/* Snippet of the user's saved answer, shown below the question text */
.search-result-answer {
  margin-top: 6px;
  font-family: var(--main-font-family);
  font-size: 0.8125rem;    /* was 13px — scales */
  color: rgba(245,240,232,0.45);
  line-height: 1.55;
  font-style: italic;
}


/* ── 09. GPU COMPOSITING ────────────────────────────────────────────────── */
/* will-change hints for overlay elements that animate or are fixed-position.
   Nav elements (.save-bar, .toast) carry their own hints in components.nav.css. */

.verse-modal-overlay,
.qa-modal-overlay,
.search-overlay,
.onboarding-overlay {
  will-change: transform;
  transform: translateZ(0);
}

/* ── 10. INFO TRIGGER POPUPS ────────────────────────────────────────────── */
/* Trigger icon button — no chrome, just the icon */
.info-trigger-btn {
  background: none;
  border: none;
  padding: 0;
  margin-inline-start: 6px;    /* was margin-left */
  cursor: pointer;
  color: var(--color-accent);
  opacity: 0.7;
  vertical-align: middle;
  line-height: 1;
}
.info-trigger-btn:hover {
  opacity: 1;
}

/* Footer row inside the info modal */
.info-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.2em;
  gap: 1em;
}
.info-modal-show-again {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.9em;
  cursor: pointer;
}

#info-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44,36,22,0.6);
  z-index: var(--z-modal);
  align-items: flex-end;
  justify-content: center;
}
#info-modal-overlay.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}

/* Card — matches the bottom-sheet pattern used by verse/QA/deeper modals */
.info-modal {
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 24px 20px 40px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.25s ease;
}

/* Title row: heading left, close button right */
.info-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.info-modal-title {
  font-family: var(--font-stack-heading);
  font-size: 20px;
  color: var(--text);
  line-height: 1.2;
}
.info-modal-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  margin-inline-start: 12px;   /* was margin-left */
}

/* Body text */
.info-modal-body {
  font-family: var(--main-font-family);
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.8;
}
.info-modal-body p + p { margin-top: 10px; }

.info-modal-body ul,
.info-modal-body ol,
.info-modal ul,
.info-modal ol {
  padding-inline-start: 1.2rem;   /* was padding-left */
  margin: 4px 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   11. DARK MODE
   body.dark-mode overrides for all rules in this file, gathered here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Verse modal ── */
body.dark-mode .verse-modal {
  background: var(--dm-raised);
}
body.dark-mode .verse-modal-text {
  color: var(--dm-text);
}
body.dark-mode .verse-modal-ref {
  color: var(--emphasis-light);
}
body.dark-mode .verse-trans-btn {
  border-color: var(--dm-border);
  color: var(--dm-text-faint, rgba(245,240,232,0.45));
}
body.dark-mode .verse-trans-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
  color: var(--dm-text);
}
body.dark-mode .verse-trans-btn.active {
  background: var(--emphasis);
  border-color: var(--emphasis);
  color: var(--surface);
}

/* ── QA / Gen callout ── */
body.dark-mode .qa-callout-card,
body.dark-mode .gen-callout-card {
  background: var(--dm-base);
}

/* ── QA modal ── */
body.dark-mode .qa-modal {
  background: var(--dm-raised);
}
body.dark-mode .qa-modal-text {
  color: var(--dm-text);
}
body.dark-mode .qa-modal-term {
  color: var(--dm-text);
  border-bottom-color: var(--dm-border);
}
body.dark-mode .qa-modal-eyebrow {
  color: var(--emphasis-light);
}

/* ── Onboarding overlay ──
   No overrides needed — uses --text background palette by design,
   which is already dark regardless of colour mode. */

/* ── Search overlay ── */
body.dark-mode .search-overlay {
  background: var(--dm-base);
}
body.dark-mode .search-input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--dm-text);
}
body.dark-mode .search-result-item:hover {
  background: rgba(255,255,255,0.04);
}

/* ── Go Deeper modal ── */
body.dark-mode .deeper-modal       { background: var(--dm-raised); }
body.dark-mode .deeper-modal-body  { color: var(--dm-text); }
body.dark-mode .deeper-modal-eyebrow { color: var(--emphasis-light); }

/* ── Info modal ── */
body.dark-mode .info-modal        { background: var(--dm-raised); }
body.dark-mode .info-modal-title  { color: var(--dm-text); }
body.dark-mode .info-modal-body   { color: var(--dm-text); }
body.dark-mode .info-modal-header { border-bottom-color: var(--dm-border); }

/* ══════════════════════════════════════════════════════════════════════════
   12. RTL OVERRIDES  (dir="rtl" on <html> set by the JS language switcher)
   Applies to Arabic (ar), Urdu (ur), and Hebrew (he).
   border-inline-start / padding-inline-* logical properties used throughout
   handle element-level mirroring automatically. The two cases below need
   explicit attention:

   1. .verse-modal-footer uses text-align: end (already logical), so the
      attribution line correctly aligns to the inline-end edge in both LTR
      and RTL without a further override here.

   2. All bottom-sheets use border-radius: 16px 16px 0 0 (symmetric top
      corners) — these are the same in LTR and RTL and need no override.

   3. The speak buttons (#verseModalSpeakBtn, #qaModalSpeakBtn) use
      margin-inline-start: auto which already pushes them to the correct
      end in RTL.

   No structural overrides are therefore needed in this file beyond the
   logical property conversions already applied in the base rules above.
   ══════════════════════════════════════════════════════════════════════════ */

/* No rules needed here. Logical properties in the base rules above handle
   RTL layout automatically once dir="rtl" is set on <html> by JS. */


/* ══════════════════════════════════════════════════════════════════════════
   13. SCRIPT-SPECIFIC OVERRIDES
   ──────────────────────────────────────────────────────────────────────────
   See 01-fonts.css section 04 for the canonical rationale on each script
   family's requirements (letter-spacing, text-transform, font-style,
   font-family, line-height).

   This file has three categories of elements:

   CHROME LABELS — monospace, all-caps, letter-spaced UI labels:
     .verse-modal-ref, .qa-callout-eyebrow, .gen-callout-eyebrow,
     .qa-modal-eyebrow, .deeper-modal-eyebrow, .onboarding-eyebrow,
     .onboarding-skip-btn, .search-cancel-btn, .search-section-label,
     .search-result-meta, .modal-close-footer-btn
     → Reset: letter-spacing: 0; text-transform: none
     Note: .qa-callout-eyebrow and .gen-callout-eyebrow share the same
     rule block so they are listed together.

   DISPLAY HEADINGS — use --font-stack-heading (Playfair Display / italic):
     .qa-callout-term, .gen-callout-term (also italic),
     .qa-modal-term (also italic),
     .onboarding-heading, .onboarding-next-btn, .info-modal-title
     → Reset: font-family: var(--main-font-family); font-style: normal

   CONTENT / BODY TEXT — uses --main-font-family:
     .verse-modal-text, .qa-callout-question, .gen-callout-question,
     .qa-modal-text, .deeper-modal-body, .onboarding-body,
     .search-empty, .search-result-text, .search-result-answer (italic),
     .info-modal-body
     → line-height adjusted per script; font-style: normal on italic elements
   ══════════════════════════════════════════════════════════════════════════ */


/* ── A. Arabic script — ar, ur ────────────────────────────────────────── */

:lang(ar) .verse-modal-ref,
:lang(ur) .verse-modal-ref,
:lang(ar) .qa-callout-eyebrow,
:lang(ur) .qa-callout-eyebrow,
:lang(ar) .gen-callout-eyebrow,
:lang(ur) .gen-callout-eyebrow,
:lang(ar) .qa-modal-eyebrow,
:lang(ur) .qa-modal-eyebrow,
:lang(ar) .deeper-modal-eyebrow,
:lang(ur) .deeper-modal-eyebrow,
:lang(ar) .onboarding-eyebrow,
:lang(ur) .onboarding-eyebrow,
:lang(ar) .onboarding-skip-btn,
:lang(ur) .onboarding-skip-btn,
:lang(ar) .search-cancel-btn,
:lang(ur) .search-cancel-btn,
:lang(ar) .search-section-label,
:lang(ur) .search-section-label,
:lang(ar) .search-result-meta,
:lang(ur) .search-result-meta,
:lang(ar) .modal-close-footer-btn,
:lang(ur) .modal-close-footer-btn {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ar) .qa-callout-term,
:lang(ur) .qa-callout-term,
:lang(ar) .gen-callout-term,
:lang(ur) .gen-callout-term,
:lang(ar) .qa-modal-term,
:lang(ur) .qa-modal-term,
:lang(ar) .onboarding-heading,
:lang(ur) .onboarding-heading,
:lang(ar) .onboarding-next-btn,
:lang(ur) .onboarding-next-btn,
:lang(ar) .info-modal-title,
:lang(ur) .info-modal-title {
  font-family: var(--main-font-family);
  font-style: normal;
}

:lang(ar) .verse-modal-text,
:lang(ur) .verse-modal-text,
:lang(ar) .qa-callout-question,
:lang(ur) .qa-callout-question,
:lang(ar) .gen-callout-question,
:lang(ur) .gen-callout-question,
:lang(ar) .qa-modal-text,
:lang(ur) .qa-modal-text,
:lang(ar) .deeper-modal-body,
:lang(ur) .deeper-modal-body,
:lang(ar) .onboarding-body,
:lang(ur) .onboarding-body,
:lang(ar) .search-empty,
:lang(ur) .search-empty,
:lang(ar) .search-result-text,
:lang(ur) .search-result-text,
:lang(ar) .search-result-answer,
:lang(ur) .search-result-answer,
:lang(ar) .info-modal-body,
:lang(ur) .info-modal-body {
  line-height: 2;
  font-style: normal;
}


/* ── B. Hebrew script — he ────────────────────────────────────────────── */

:lang(he) .verse-modal-ref,
:lang(he) .qa-callout-eyebrow,
:lang(he) .gen-callout-eyebrow,
:lang(he) .qa-modal-eyebrow,
:lang(he) .deeper-modal-eyebrow,
:lang(he) .onboarding-eyebrow,
:lang(he) .onboarding-skip-btn,
:lang(he) .search-cancel-btn,
:lang(he) .search-section-label,
:lang(he) .search-result-meta,
:lang(he) .modal-close-footer-btn {
  letter-spacing: 0;
  text-transform: none;
}

:lang(he) .qa-callout-term,
:lang(he) .gen-callout-term,
:lang(he) .qa-modal-term,
:lang(he) .onboarding-heading,
:lang(he) .onboarding-next-btn,
:lang(he) .info-modal-title {
  font-family: var(--main-font-family);
  font-style: normal;
}

:lang(he) .verse-modal-text,
:lang(he) .qa-callout-question,
:lang(he) .gen-callout-question,
:lang(he) .qa-modal-text,
:lang(he) .deeper-modal-body,
:lang(he) .onboarding-body,
:lang(he) .search-empty,
:lang(he) .search-result-text,
:lang(he) .search-result-answer,
:lang(he) .info-modal-body {
  line-height: 1.9;
  font-style: normal;
}


/* ── C. Devanagari — ne (Nepali), hi (Hindi) ─────────────────────────── */

:lang(ne) .verse-modal-ref,
:lang(hi) .verse-modal-ref,
:lang(ne) .qa-callout-eyebrow,
:lang(hi) .qa-callout-eyebrow,
:lang(ne) .gen-callout-eyebrow,
:lang(hi) .gen-callout-eyebrow,
:lang(ne) .qa-modal-eyebrow,
:lang(hi) .qa-modal-eyebrow,
:lang(ne) .deeper-modal-eyebrow,
:lang(hi) .deeper-modal-eyebrow,
:lang(ne) .onboarding-eyebrow,
:lang(hi) .onboarding-eyebrow,
:lang(ne) .onboarding-skip-btn,
:lang(hi) .onboarding-skip-btn,
:lang(ne) .search-cancel-btn,
:lang(hi) .search-cancel-btn,
:lang(ne) .search-section-label,
:lang(hi) .search-section-label,
:lang(ne) .search-result-meta,
:lang(hi) .search-result-meta,
:lang(ne) .modal-close-footer-btn,
:lang(hi) .modal-close-footer-btn {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ne) .qa-callout-term,
:lang(hi) .qa-callout-term,
:lang(ne) .gen-callout-term,
:lang(hi) .gen-callout-term,
:lang(ne) .qa-modal-term,
:lang(hi) .qa-modal-term,
:lang(ne) .onboarding-heading,
:lang(hi) .onboarding-heading,
:lang(ne) .onboarding-next-btn,
:lang(hi) .onboarding-next-btn,
:lang(ne) .info-modal-title,
:lang(hi) .info-modal-title {
  font-family: var(--main-font-family);
  font-style: normal;
}

:lang(ne) .verse-modal-text,
:lang(hi) .verse-modal-text,
:lang(ne) .qa-callout-question,
:lang(hi) .qa-callout-question,
:lang(ne) .gen-callout-question,
:lang(hi) .gen-callout-question,
:lang(ne) .qa-modal-text,
:lang(hi) .qa-modal-text,
:lang(ne) .deeper-modal-body,
:lang(hi) .deeper-modal-body,
:lang(ne) .onboarding-body,
:lang(hi) .onboarding-body,
:lang(ne) .search-empty,
:lang(hi) .search-empty,
:lang(ne) .search-result-text,
:lang(hi) .search-result-text,
:lang(ne) .search-result-answer,
:lang(hi) .search-result-answer,
:lang(ne) .info-modal-body,
:lang(hi) .info-modal-body {
  line-height: 2;
  font-style: normal;
}


/* ── D. Myanmar script — my (Burmese) ───────────────────────────────── */

:lang(my) .verse-modal-ref,
:lang(my) .qa-callout-eyebrow,
:lang(my) .gen-callout-eyebrow,
:lang(my) .qa-modal-eyebrow,
:lang(my) .deeper-modal-eyebrow,
:lang(my) .onboarding-eyebrow,
:lang(my) .onboarding-skip-btn,
:lang(my) .search-cancel-btn,
:lang(my) .search-section-label,
:lang(my) .search-result-meta,
:lang(my) .modal-close-footer-btn {
  letter-spacing: 0;
  text-transform: none;
}

:lang(my) .qa-callout-term,
:lang(my) .gen-callout-term,
:lang(my) .qa-modal-term,
:lang(my) .onboarding-heading,
:lang(my) .onboarding-next-btn,
:lang(my) .info-modal-title {
  font-family: var(--main-font-family);
  font-style: normal;
}

:lang(my) .verse-modal-text,
:lang(my) .qa-callout-question,
:lang(my) .gen-callout-question,
:lang(my) .qa-modal-text,
:lang(my) .deeper-modal-body,
:lang(my) .onboarding-body,
:lang(my) .search-empty,
:lang(my) .search-result-text,
:lang(my) .search-result-answer,
:lang(my) .info-modal-body {
  line-height: 2.2;
  font-style: normal;
}


/* ── E. CJK — zh (Chinese Simplified, zh-CN), ja (Japanese) ──────────── */

:lang(zh) .verse-modal-ref,
:lang(ja) .verse-modal-ref,
:lang(zh) .qa-callout-eyebrow,
:lang(ja) .qa-callout-eyebrow,
:lang(zh) .gen-callout-eyebrow,
:lang(ja) .gen-callout-eyebrow,
:lang(zh) .qa-modal-eyebrow,
:lang(ja) .qa-modal-eyebrow,
:lang(zh) .deeper-modal-eyebrow,
:lang(ja) .deeper-modal-eyebrow,
:lang(zh) .onboarding-eyebrow,
:lang(ja) .onboarding-eyebrow,
:lang(zh) .onboarding-skip-btn,
:lang(ja) .onboarding-skip-btn,
:lang(zh) .search-cancel-btn,
:lang(ja) .search-cancel-btn,
:lang(zh) .search-section-label,
:lang(ja) .search-section-label,
:lang(zh) .search-result-meta,
:lang(ja) .search-result-meta,
:lang(zh) .modal-close-footer-btn,
:lang(ja) .modal-close-footer-btn {
  letter-spacing: 0;
  text-transform: none;
}

:lang(zh) .qa-callout-term,
:lang(ja) .qa-callout-term,
:lang(zh) .gen-callout-term,
:lang(ja) .gen-callout-term,
:lang(zh) .qa-modal-term,
:lang(ja) .qa-modal-term,
:lang(zh) .onboarding-heading,
:lang(ja) .onboarding-heading,
:lang(zh) .onboarding-next-btn,
:lang(ja) .onboarding-next-btn,
:lang(zh) .info-modal-title,
:lang(ja) .info-modal-title {
  font-family: var(--main-font-family);
  font-style: normal;
}

:lang(zh) .verse-modal-text,
:lang(ja) .verse-modal-text,
:lang(zh) .qa-callout-question,
:lang(ja) .qa-callout-question,
:lang(zh) .gen-callout-question,
:lang(ja) .gen-callout-question,
:lang(zh) .qa-modal-text,
:lang(ja) .qa-modal-text,
:lang(zh) .deeper-modal-body,
:lang(ja) .deeper-modal-body,
:lang(zh) .onboarding-body,
:lang(ja) .onboarding-body,
:lang(zh) .search-empty,
:lang(ja) .search-empty,
:lang(zh) .search-result-text,
:lang(ja) .search-result-text,
:lang(zh) .search-result-answer,
:lang(ja) .search-result-answer,
:lang(zh) .info-modal-body,
:lang(ja) .info-modal-body {
  line-height: 1.6;
  font-style: normal;
}


/* ── F. Hangul — ko (Korean) ─────────────────────────────────────────── */

:lang(ko) .verse-modal-ref,
:lang(ko) .qa-callout-eyebrow,
:lang(ko) .gen-callout-eyebrow,
:lang(ko) .qa-modal-eyebrow,
:lang(ko) .deeper-modal-eyebrow,
:lang(ko) .onboarding-eyebrow,
:lang(ko) .onboarding-skip-btn,
:lang(ko) .search-cancel-btn,
:lang(ko) .search-section-label,
:lang(ko) .search-result-meta,
:lang(ko) .modal-close-footer-btn {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ko) .qa-callout-term,
:lang(ko) .gen-callout-term,
:lang(ko) .qa-modal-term,
:lang(ko) .onboarding-heading,
:lang(ko) .onboarding-next-btn,
:lang(ko) .info-modal-title {
  font-family: var(--main-font-family);
  font-style: normal;
}

:lang(ko) .verse-modal-text,
:lang(ko) .qa-callout-question,
:lang(ko) .gen-callout-question,
:lang(ko) .qa-modal-text,
:lang(ko) .deeper-modal-body,
:lang(ko) .onboarding-body,
:lang(ko) .search-empty,
:lang(ko) .search-result-text,
:lang(ko) .search-result-answer,
:lang(ko) .info-modal-body {
  line-height: 1.7;
  font-style: normal;
}


/* ── G. Cyrillic — ru (Russian), uk (Ukrainian) ─────────────────────── */
/* Only the letter-spacing on monospace chrome labels is reset.
   Cyrillic has case and italic, so text-transform, font-style, and
   font-family are left unchanged. */

:lang(ru) .verse-modal-ref,
:lang(uk) .verse-modal-ref,
:lang(ru) .qa-callout-eyebrow,
:lang(uk) .qa-callout-eyebrow,
:lang(ru) .gen-callout-eyebrow,
:lang(uk) .gen-callout-eyebrow,
:lang(ru) .qa-modal-eyebrow,
:lang(uk) .qa-modal-eyebrow,
:lang(ru) .deeper-modal-eyebrow,
:lang(uk) .deeper-modal-eyebrow,
:lang(ru) .onboarding-eyebrow,
:lang(uk) .onboarding-eyebrow,
:lang(ru) .onboarding-skip-btn,
:lang(uk) .onboarding-skip-btn,
:lang(ru) .search-cancel-btn,
:lang(uk) .search-cancel-btn,
:lang(ru) .search-section-label,
:lang(uk) .search-section-label,
:lang(ru) .search-result-meta,
:lang(uk) .search-result-meta,
:lang(ru) .modal-close-footer-btn,
:lang(uk) .modal-close-footer-btn {
  letter-spacing: 0;
}


/* ── H. Greek — el ───────────────────────────────────────────────────── */
/* Same light-touch treatment as Cyrillic. */

:lang(el) .verse-modal-ref,
:lang(el) .qa-callout-eyebrow,
:lang(el) .gen-callout-eyebrow,
:lang(el) .qa-modal-eyebrow,
:lang(el) .deeper-modal-eyebrow,
:lang(el) .onboarding-eyebrow,
:lang(el) .onboarding-skip-btn,
:lang(el) .search-cancel-btn,
:lang(el) .search-section-label,
:lang(el) .search-result-meta,
:lang(el) .modal-close-footer-btn {
  letter-spacing: 0;
}