:root {
  --font-family-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family: var(--font-family-serif);
  --font-size: 18px;
  --line-height: 1.7;
  --page-padding: 24px;
  /* Reading measure tracks the user's text-size setting (~66-72 characters
     per line at any size). 38 x 18px default = 684px, matching the old fixed
     680px. Computed from --font-size (not em) so .lsb-copyright, which has a
     smaller font, still gets the same column width as the text. */
  --column-width: calc(var(--font-size) * 38);
  --paragraph-spacing: 1rem;
  --pericope-spacing: 3rem;

  --bg: #FAF9F6;
  --fg: #1A1A1A;
  --fg-secondary: #666666;
  --fg-tertiary: #999999;
  --verse-num: #888888;
  --pericope-title: #333333;
  --pericope-subhead: #6d1a1a;
  --ui-chrome: #E8E6E1;
  --ui-chrome-hover: #D8D6D1;
  --ui-chrome-border: #D1D1D1;
  --highlight: rgba(0, 0, 0, 0.08);
  --overlay-bg: #FFFFFF;
  --overlay-backdrop: rgba(0, 0, 0, 0.5);
  --input-bg: #FFFFFF;
  --input-border: #D1D1D1;
  --button-primary: #0066CC;
  --button-primary-hover: #0055AA;
  --button-primary-fg: #FFFFFF;
  --button-danger: #DC3545;
  --slider-track: #D1D1D1;
  --slider-thumb: #0066CC;
  --toggle-off: #D1D1D1;
  --toggle-on: #0066CC;

  /* Job speaker identification (JOB-SPEAKERS 2026-08-28). Owner-picked:
     God red, Job blue (owner swap 2026-08-28 msg 69d843d8), Zophar green
     (owner 2026-08-29 msg b8cdd0c1), Eliphaz orange, Bildad yellow
     (readable gold on paper-white). The devil is olive (owner msg
     432e5146: grey read like body text, brown like the pericope
     headings - olive is the one hue family nothing else uses, and the
     devil never shares a page with gold Bildad or green Zophar). The
     rest are ours: Elihu purple, Job's wife magenta, the messengers
     teal. */
  --spk-god: #c62828;
  --spk-job: #1565c0;
  --spk-satan: #667d16;
  --spk-eliphaz: #e65100;
  --spk-bildad: #b8860b;
  --spk-zophar: #2e7d32;
  --spk-elihu: #6a1b9a;
  --spk-wife: #ad1457;
  --spk-messenger: #00695c;

  /* Song of Solomon speakers (SOS-SPEAKERS, owner order ae54365d
     2026-08-29): the king purple, the woman pink, the chorus green, the
     brothers orange - the owner's picks, reusing the Job palette's exact
     inks so the two books read as one system. */
  --spk-king: #6a1b9a;
  --spk-woman: #ad1457;
  --spk-chorus: #2e7d32;
  --spk-brothers: #e65100;

  --gutter-width: 12vw;
  --top-zone-height: 64px;
  --overlay-header-height: 56px;

  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-out;
}

[data-theme="dark"] {
  --bg: #2C2C2E;
  --fg: #E5E5E7;
  --fg-secondary: #AEAEB2;
  --fg-tertiary: #8E8E93;
  --verse-num: #8E8E93;
  --pericope-title: #AEAEB2;
  --pericope-subhead: #D89A9A;
  --ui-chrome: #3A3A3C;
  --ui-chrome-hover: #4A4A4C;
  --ui-chrome-border: #4A4A4C;
  --highlight: rgba(255, 255, 255, 0.1);
  --overlay-bg: #1A1A1C;
  --overlay-backdrop: rgba(0, 0, 0, 0.7);
  --input-bg: #3A3A3C;
  --input-border: #4A4A4C;
  --button-danger: #E04050;
  --slider-track: #4A4A4C;
  --spk-god: #ef5350;
  --spk-job: #64b5f6;
  --spk-satan: #b5cc3a;
  --spk-eliphaz: #ffa726;
  --spk-bildad: #e0c060;
  --spk-zophar: #66bb6a;
  --spk-elihu: #ce93d8;
  --spk-wife: #f06292;
  --spk-messenger: #4db6ac;
  --spk-king: #ce93d8;
  --spk-woman: #f06292;
  --spk-chorus: #66bb6a;
  --spk-brothers: #ffa726;
}

[data-theme="oled"] {
  --bg: #000000;
  --fg: #EBEBF5;
  --fg-secondary: #AEAEB2;
  --fg-tertiary: #636366;
  --verse-num: #636366;
  --pericope-title: #8E8E93;
  --pericope-subhead: #DCA3A3;
  --ui-chrome: #1C1C1E;
  --ui-chrome-hover: #2C2C2E;
  --ui-chrome-border: #3A3A3C;
  --highlight: rgba(255, 255, 255, 0.08);
  --overlay-bg: #000000;
  --overlay-backdrop: rgba(0, 0, 0, 0.85);
  --input-bg: #1C1C1E;
  --input-border: #3A3A3C;
  --button-danger: #E04050;
  --slider-track: #3A3A3C;
  --spk-god: #ef5350;
  --spk-job: #64b5f6;
  --spk-satan: #bfd545;
  --spk-eliphaz: #ffa726;
  --spk-bildad: #e0c060;
  --spk-zophar: #6fca74;
  --spk-elihu: #ce93d8;
  --spk-wife: #f06292;
  --spk-messenger: #4db6ac;
  --spk-king: #ce93d8;
  --spk-woman: #f06292;
  --spk-chorus: #6fca74;
  --spk-brothers: #ffa726;
}

/* ---------------------------------------------------------------------------
   Alias tokens. These names were already used throughout this file (and were
   silently invalid because nothing defined them). Values are chosen to match
   the previous rendered appearance exactly - they FIX broken declarations
   (e.g. transparent concordance buttons) without changing anything that
   already worked. Keep new rules on this vocabulary.
--------------------------------------------------------------------------- */
:root {
  --accent: var(--button-primary);
  --accent-rgb: 0, 102, 204;
  --accent-bg: var(--button-primary);
  --accent-fg: var(--button-primary-fg);
  --accent-color: #8b7355;        /* warm accent used by TTS controls */
  --accent-warm: var(--accent-color);
  --text-primary: var(--fg);
  --text-secondary: var(--fg-secondary);
  --text-tertiary: var(--fg-tertiary);
  --fg-primary: var(--fg);
  --border: var(--ui-chrome-border);
  --border-light: rgba(128, 128, 128, 0.25);
  --ui-chrome-subtle: rgba(0, 0, 0, 0.08);
  --bg-elevated: rgba(0, 0, 0, 0.04);
  --surface-elevated: var(--ui-chrome);
  --button-primary-text: var(--button-primary-fg);
  --topbar-height: 48px;
}

[data-theme="dark"] {
  --accent-color: #a89070;
  --ui-chrome-subtle: rgba(255, 255, 255, 0.08);
  --bg-elevated: rgba(255, 255, 255, 0.06);
}

[data-theme="oled"] {
  --accent-color: #a89070;
  --ui-chrome-subtle: rgba(255, 255, 255, 0.06);
  --bg-elevated: rgba(255, 255, 255, 0.05);
}

/* ---------------------------------------------------------------------------
   Scale tokens (Phase 5-6). Tokens only - no rule changes in this block.
   Components convert to these opportunistically whenever a deploy already
   touches them; never as a mass find/replace.
--------------------------------------------------------------------------- */
:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* z-index ladder as verified in this codebase */
  --z-gutter: 10;
  --z-topbar: 50;
  --z-picker: 100;
  --z-nav: 1000;
  --z-overlay: 3000;
  --z-overlay-high: 3100;
  --z-sheet: 4000;
  --z-toast: 10000;
  --z-sidecar: 10500;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Keyboard users always get a visible focus ring (mouse clicks don't). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--fg);
  background-color: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
}

.gutter-zone {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--gutter-width);
  z-index: 10;
  touch-action: pan-y;
  pointer-events: auto;
  cursor: default;
}

#gutter-left {
  left: 0;
}

#gutter-right {
  right: 0;
}

/* ---------------------------------------------------------------------------
   Header verse picker + TTS (Phase 4.1). The old fixed 64px "VERSE PICKER"
   band was merged into the 48px topbar: the chapter title itself is now the
   picker trigger. #gutter-top-center keeps its id/testid contract but lives
   inside .app-topbar as a normal flex child.
--------------------------------------------------------------------------- */
.gutter-top-center {
  position: static;
  top: auto;
  bottom: auto;
  height: 100%;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Wide gap: the picker label and the play button are both 40px-tall tap
     targets; at 4px apart, choosing a chapter often started playback. */
  gap: 20px;
  background: none;
  border: none;
  z-index: auto;
}

.verse-picker-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  height: 40px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--fg);
  font-family: var(--font-family-serif);
  /* Smaller on phones so the (abbreviated) book name never clips in the
     crowded top bar; full desktop size restored at >=900px below. */
  font-size: 0.875rem;
  font-weight: 700;
}

@media (min-width: 900px) {
  .verse-picker-label { font-size: 1rem; padding: 0 10px; }
}

.verse-picker-label:hover {
  background: var(--highlight);
}

.verse-picker-label .picker-chevron {
  flex: 0 0 auto;
  color: var(--fg-tertiary);
}

.chapter-indicator {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

/* The topbar picker button is always space-constrained, so it uses the
   ABBREVIATED book name (Ezek, Matt, 1 Cor...) on phones and tablets. The
   full name is restored only on real desktops (>=900px) where there is
   room - below that the full name was truncating to "Eze..." on wider
   phones/small tablets (>=600px) that the old 600px threshold let through. */
.chapter-indicator .ch-name-full { display: none; }

@media (min-width: 900px) {
  .chapter-indicator .ch-name-full { display: inline; }
  .chapter-indicator .ch-name-abbr { display: none; }
}

.app-topbar .verse-picker-tts.tts-button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-secondary);
  box-shadow: none;
  animation: none;
}

.app-topbar .verse-picker-tts.tts-button:hover {
  background: var(--highlight);
  color: var(--fg);
}

.app-topbar .verse-picker-tts.tts-button:active {
  transform: none;
}

.app-topbar .verse-picker-tts.tts-button.playing {
  color: var(--accent-color);
  background: var(--bg-elevated);
  border: none;
  animation: none;
  box-shadow: none;
}

/* Auto-hide reading header (Phase 4.2). JS toggles body.chrome-hidden on
   scroll; body.chrome-zen (the "Auto-hide reading header" setting) also
   tucks it away after stillness. Keyboard focus always reveals it. */
.app-topbar {
  transition: transform 200ms ease;
}

body.chrome-hidden .app-topbar {
  transform: translateY(-100%);
}

body.chrome-hidden .app-topbar:focus-within {
  transform: none;
}

.app-content {
  transition: margin-top 200ms ease;
}

body.chrome-hidden.desktop-mode .app-content {
  margin-top: 0;
}

body.chrome-hidden.desktop-mode .app-content.desktop-split .reader-wrapper,
body.chrome-hidden.desktop-mode .desktop-right-panel {
  height: 100vh;
  height: 100dvh;
}

/* Legacy ambient TTS pill — retired; dock is the listening UI */
.tts-bar { display: none !important; }

body.tts-active .reader,
body.tts-dock-open .reader {
  /* B-2: tracks the dock's real height (+ home-indicator inset - the dock
     floats above it); static fallback for no-JS */
  padding-bottom: calc(var(--ttsd-h, 6.75rem) + 0.75rem + env(safe-area-inset-bottom, 0px));
}

/* Keep sermon/commentary text above the dock (scrollable) */
body.tts-dock-open .overlay.active .overlay-body,
body.tts-dock-open .content-overlay.active .overlay-body,
body.tts-dock-open #content-overlay.active .overlay-body,
body.tts-dock-open #overlay-body,
body.tts-dock-open .overlay.active {
  /* room for the dock so the last lines aren't hidden under it */
  scroll-padding-bottom: 7.5rem;
}

/* B-2: the padding tracks the dock's REAL height (--ttsd-h set by
   tts-dock.js on show/mode-toggle/resize); the var() fallback keeps the
   old static value as the no-JS behavior. */
body.tts-dock-open .overlay.active .overlay-body,
body.tts-dock-open .content-body {
  padding-bottom: calc(var(--ttsd-h, 6.75rem) + 0.75rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── TTS Dock (full listening player) ─────────────────────────────────── */
/* Above content/word overlays (3000–3100) so sermons don't cover the player;
   still below sheets/modals (4000) and toasts (10000). */
.tts-dock {
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(0);
  width: min(720px, calc(100vw - 16px));
  z-index: 3200;
  font-family: var(--font-family-sans);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.tts-dock.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(18px);
  pointer-events: none;
  visibility: hidden;
}

.tts-dock:not(.hidden) {
  pointer-events: auto;
  visibility: visible;
}

.ttsd-shell {
  position: relative;
  border-radius: 20px;
  background: color-mix(in srgb, var(--overlay-bg) 88%, transparent);
  border: 1px solid var(--ui-chrome-border);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  overflow: hidden;
}

[data-theme="dark"] .ttsd-shell,
[data-theme="oled"] .ttsd-shell {
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.ttsd-glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-color, #8b7355) 30%,
    var(--button-primary) 50%,
    var(--accent-color, #8b7355) 70%,
    transparent 100%
  );
  opacity: 0.35;
  transition: opacity 300ms ease;
}

.tts-dock.is-playing .ttsd-glow {
  opacity: 0.9;
  animation: ttsd-shimmer 2.8s ease-in-out infinite;
}

@keyframes ttsd-shimmer {
  0%, 100% { opacity: 0.55; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.15); }
}

.ttsd-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 10px;
}

.ttsd-transport,
.ttsd-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.ttsd-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 120ms ease;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.ttsd-btn:hover:not(:disabled) {
  background: var(--highlight);
  color: var(--fg);
}

.ttsd-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.ttsd-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.ttsd-btn.hidden {
  display: none;
}

.ttsd-btn.on {
  color: var(--accent-color, #8b7355);
  background: color-mix(in srgb, var(--accent-color, #8b7355) 14%, transparent);
}

.ttsd-play-main {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--accent-color, #8b7355);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color, #8b7355) 40%, transparent);
}

.ttsd-play-main:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-color, #8b7355) 88%, #000);
  color: #fff;
}

.ttsd-play-main.is-playing {
  animation: ttsd-pulse 2.2s ease-in-out infinite;
}

@keyframes ttsd-pulse {
  0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color, #8b7355) 40%, transparent); }
  50% { box-shadow: 0 4px 22px color-mix(in srgb, var(--accent-color, #8b7355) 60%, transparent); }
}

.ttsd-mid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}

.ttsd-titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ttsd-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.ttsd-badge {
  flex-shrink: 0;
  font-size: 0.7rem; /* B-8: legibility */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--fg-secondary);
  border: 1px solid var(--ui-chrome-border);
}

.ttsd-badge.is-stream {
  color: #2d6a4f;
  background: color-mix(in srgb, #52b788 18%, transparent);
  border-color: color-mix(in srgb, #52b788 35%, transparent);
}

.ttsd-badge.is-neural {
  color: #5a3d8a;
  background: color-mix(in srgb, #9b72cf 18%, transparent);
  border-color: color-mix(in srgb, #9b72cf 35%, transparent);
}

.ttsd-badge.is-basic {
  color: var(--fg-tertiary);
}

[data-theme="dark"] .ttsd-badge.is-stream,
[data-theme="oled"] .ttsd-badge.is-stream {
  color: #95d5b2;
}

[data-theme="dark"] .ttsd-badge.is-neural,
[data-theme="oled"] .ttsd-badge.is-neural {
  color: #cbb2fe;
}

.ttsd-status {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--fg-tertiary);
  white-space: nowrap;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms ease;
}

.ttsd-status.is-flash {
  color: var(--accent-color, #8b7355);
  font-weight: 600;
  /* the flash text carries the tap affordance - never ellipsize it away
     (the title beside it already truncates gracefully). Review. */
  max-width: none;
  cursor: pointer;
}

.ttsd-subline.is-flash {
  color: var(--accent-color, #8b7355);
  font-weight: 600;
  cursor: pointer;
}

.ttsd-seekrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ttsd-cur,
.ttsd-dur {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-tertiary);
  min-width: 2.4em;
}

.ttsd-dur { text-align: right; }

.ttsd-seek-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* B-10: a 28px hit area with the 4px track drawn inside it — a thumb in a
   car can actually land on it. */
.ttsd-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.ttsd-seek:disabled {
  opacity: 0.4;
  cursor: default;
}

.ttsd-seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--slider-track, var(--ui-chrome-border));
}

.ttsd-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px; /* center on the 4px track */
  border-radius: 50%;
  background: var(--accent-color, #8b7355);
  border: 2px solid var(--overlay-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 120ms ease;
}

@media (pointer: coarse) {
  .ttsd-seek::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -8px;
  }

  .ttsd-seek::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}

.ttsd-seek:not(:disabled):hover::-webkit-slider-thumb {
  transform: scale(1.15);
}

.ttsd-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-color, #8b7355);
  border: 2px solid var(--overlay-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.ttsd-seek::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--slider-track, var(--ui-chrome-border));
}

.ttsd-speed {
  width: auto;
  min-width: 40px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: -0.02em;
}

.ttsd-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 10px;
}

.ttsd-progress.hidden { display: none; }

.ttsd-progress-track {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: var(--ui-chrome-border);
  overflow: hidden;
}

.ttsd-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-color, #8b7355), var(--button-primary));
  transition: width 200ms linear;
}

.ttsd-progress-text {
  font-size: 0.7rem;
  color: var(--fg-secondary);
  white-space: nowrap;
}

/* ── B-2: mini bar / expanded card, hairline, subline, popover ───────── */

.ttsd-hairline {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 1;
  pointer-events: none;
}

.ttsd-hairline-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-color, #8b7355), var(--button-primary));
  transition: width 300ms linear;
}

/* Compact buttons in the title row (chevron + close) */
.ttsd-titlerow .ttsd-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
  flex-shrink: 0;
}

@media (pointer: coarse) {
  .ttsd-titlerow .ttsd-btn {
    /* spec B-2: all targets ≥44px on coarse pointers */
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}

/* Full card: let a long sermon title wrap to two lines (spec B-2) */
.tts-dock:not(.mini) .ttsd-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ttsd-mode svg {
  transition: transform 200ms ease;
}

.tts-dock.mini .ttsd-mode svg {
  transform: rotate(180deg);
}

.ttsd-subline {
  font-size: 0.72rem;
  color: var(--fg-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ttsd-subline[hidden] {
  display: none;
}

/* Mini: one slim row — play, title + subline, chevron, close */
.tts-dock.mini .ttsd-bar {
  padding: 6px 10px 6px 8px;
  gap: 8px;
}

.tts-dock.mini .ttsd-prev,
.tts-dock.mini .ttsd-back,
.tts-dock.mini .ttsd-fwd,
.tts-dock.mini .ttsd-next,
.tts-dock.mini .ttsd-seekrow,
.tts-dock.mini .ttsd-tools,
.tts-dock.mini .ttsd-status,
.tts-dock.mini .ttsd-badge {
  display: none;
}

.tts-dock.mini .ttsd-play-main {
  width: 44px;
  height: 44px;
  min-width: 44px;
}

.tts-dock.mini .ttsd-mid {
  cursor: pointer;
  gap: 1px;
}

/* B-9: the speed popover sits above the dock (the shell clips overflow,
   so it lives on the dock element itself) */
.ttsd-speed-pop {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--overlay-bg) 94%, transparent);
  border: 1px solid var(--ui-chrome-border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ttsd-speed-pop.hidden {
  display: none;
}

.ttsd-speed-opt {
  min-height: 44px;
  min-width: 84px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--fg);
  cursor: pointer;
  padding: 0 16px;
  text-align: left;
}

.ttsd-speed-opt:hover {
  background: var(--highlight);
}

.ttsd-speed-opt.on {
  color: var(--accent-color, #8b7355);
  font-weight: 700;
  background: color-mix(in srgb, var(--accent-color, #8b7355) 14%, transparent);
}

/* Desktop split: center dock over the reading column */
body.desktop-mode:has(#desktop-right-panel.active) .tts-dock {
  left: 25%;
  width: min(560px, calc(50vw - 24px));
}

/* Narrow phones: stack tools, keep transport prominent */
@media (max-width: 560px) {
  .tts-dock {
    width: calc(100vw - 12px);
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .ttsd-bar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
  }

  .ttsd-transport {
    order: 1;
    width: 100%;
    justify-content: center;
    gap: 6px;
  }

  .ttsd-mid {
    order: 0;
    width: 100%;
    padding: 0 2px;
  }

  .ttsd-tools {
    order: 2;
    width: 100%;
    justify-content: space-between;
    padding: 0 4px 2px;
  }

  .ttsd-btn {
    width: 42px;
    height: 42px;
  }

  .ttsd-play-main {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }

  /* B-2: the mini bar stays ONE row on phones — undo the 3-row wrap */
  .tts-dock.mini .ttsd-bar {
    flex-wrap: nowrap;
    padding: 6px 10px 6px 8px;
  }

  .tts-dock.mini .ttsd-transport {
    order: 0;
    width: auto;
  }

  .tts-dock.mini .ttsd-mid {
    order: 1;
    width: auto;
    flex: 1 1 auto;
  }

  body.tts-active .reader,
  body.tts-dock-open .reader {
    padding-bottom: calc(var(--ttsd-h, 9.75rem) + 0.75rem + env(safe-area-inset-bottom, 0px));
  }

  /* The wrapped 3-row phone dock is ~160px tall; the desktop base rule is
     !important, so this override must be too (spec A-12). --ttsd-h tracks
     the REAL dock height (mini ≈ 56px, expanded ≈ 160px) with the static
     value as the no-JS fallback (B-2). */
  body.tts-dock-open .overlay.active .overlay-body,
  body.tts-dock-open .content-body {
    padding-bottom: calc(var(--ttsd-h, 9.75rem) + 0.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tts-dock,
  .ttsd-play-main.is-playing,
  .tts-dock.is-playing .ttsd-glow {
    animation: none;
    transition: none;
  }
}


.reader {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 4rem var(--page-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reader-content {
  width: 100%;
  max-width: var(--column-width);
  /* Win the hit test against the fixed page-turn gutters, which are wider
     than the margin on phones/tablets and overlapped the first/last ~21-69px
     of every line: taps meant for a word were turning the page instead, and
     long-press (word study) never fired there. .verse-num already had this
     same escape hatch; .w did not. Gutters still work in the true margins. */
  position: relative;
  z-index: 11;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* End-of-chapter flow card (Phase 4.4) */
.chapter-nav-card {
  display: flex;
  justify-content: center;
  margin: 3rem 0 0;
}

.chapter-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  min-height: 44px;
  border: 1px solid var(--ui-chrome-border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--fg);
  font-family: var(--font-family-sans);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.chapter-next-btn:hover {
  background: var(--highlight);
}

/* Desktop margin chevrons: visible pointer affordance for the gutter
   chapter-tap zones (Phase 4.4). Hover-capable devices >=1024px only. */
@media (hover: hover) and (min-width: 1024px) {
  .gutter-zone { cursor: pointer; }
  #gutter-left::after,
  #gutter-right::after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    background-color: var(--fg-tertiary);
    opacity: 0;
    transition: opacity var(--transition-fast);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>') center/28px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>') center/28px no-repeat;
  }
  #gutter-left::after { left: 8px; }
  #gutter-right::after { right: 8px; transform: scaleX(-1); }
  #gutter-left:hover::after,
  #gutter-right:hover::after { opacity: 0.6; }
}

.lsb-copyright {
  width: 100%;
  max-width: var(--column-width);
  margin-top: 4rem;
  padding: 2rem 0;
  border-top: 1px solid var(--ui-chrome);
  text-align: center;
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--fg-tertiary);
}

.lsb-copyright p {
  margin: 0.25rem 0;
}

.lsb-copyright .copyright-title {
  font-size: 0.8125rem;
  color: var(--fg-secondary);
  margin-bottom: 0.5rem;
}

.lsb-copyright .copyright-trademark,
.lsb-copyright .copyright-permissions {
  margin-top: 0.75rem;
}

.lsb-copyright a {
  color: var(--fg-secondary);
  text-decoration: none;
}

.lsb-copyright a:hover {
  text-decoration: underline;
}

.chapter-name {
  text-align: center;
  font-family: var(--font-family);
  font-size: 1.5em;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0 0 1.5rem 0;
  padding: 0;
}

.chapter-name.hidden {
  display: none;
}

.pericope-title {
  font-family: var(--font-family);
  font-size: 1.05em;
  font-weight: 600;
  color: var(--pericope-title);
  margin: 0 0 0.75rem 0;
  padding: 0;
}

.pericope-title.hidden {
  display: none;
}

/* An LSB section title printed mid-pericope, between verses (api/pericope.php
   `subheadings`, kind "title"): same look and same Pericope Titles toggle as
   .pericope-title, plus breathing room above since a verse sits before it. */
.pericope-title-mid {
  margin-top: 1.25rem;
}

/* Hebrew acrostic letter label ("Beth" before Psalm 25:2; kind "letter").
   Small, italic, quiet - a strophe marker you glance at, not a heading. Not
   part of the titles toggle; aria-hidden in the markup so TTS skips it. */
.acrostic-letter {
  font-size: 0.8em;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--pericope-subhead, inherit);
  margin: 0.9rem 0 0.25rem;
  user-select: none;
}

/* Our authored pericope heading (PERICOPE-HEADINGS-PLAN-2026-08-28): a
   sub-heading under .pericope-title, visually subordinate - smaller and
   italic, distinct --pericope-subhead color (maroon / warm rose). */
.pericope-subhead {
  font-family: var(--font-family);
  font-size: 0.95em;
  font-weight: 600;
  font-style: italic;
  color: var(--pericope-subhead);
  margin: 0 0 0.75rem 0;
  padding: 0;
}

.pericope-subhead.hidden {
  display: none;
}

/* Brackets are display-only (owner order 2026-08-28): pseudo-content keeps
   them out of the DOM text so TTS never speaks them and copy/paste stays
   clean, and future headings need no data change. */
.pericope-subhead::before {
  content: "[";
}

.pericope-subhead::after {
  content: "]";
}

/* When the LSB heading above it is actually visible, close the gap so the
   pair reads as one heading block. :not(.hidden):not(.fmt-hidden) matters:
   display:none siblings still match `+`, and pulling the subhead up under a
   collapsed h3 would eat its own top spacing. */
.pericope-title:not(.hidden):not(.fmt-hidden) + .pericope-subhead {
  margin-top: -0.45rem;
}

.verse {
  margin-bottom: var(--paragraph-spacing);
}

/* Job speaker identification (JOB-SPEAKERS 2026-08-28, owner msgs 773c00f5 +
   3411f0b8): .spk wraps only the actual speech inside a verse - narration
   around it stays plain. The label ("Job: ") is aria-hidden, so TTS never
   speaks it, and every copy/share path strips .spk-label by class. Color
   rides the .spk-colored modifier, present only while the COLOR chip is on;
   with it off the labels stand in the normal text color. */
.spk-label {
  font-weight: 700;
  font-style: normal;
  /* Grok verify 2026-08-29: app copy/share strips the label by class, but a
     native browser selection (Allow Copying on) still grabbed "Job: " -
     user-select:none keeps hand-selection Scripture-only. nowrap keeps
     "[ God: ]" one token; the bracket pseudo-elements live inside the span,
     so a 390px phone no longer splits "[ God:" from "]". */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
}

/* Brackets around speaker labels (owner order 2026-08-28, msg 8fcc4e6e:
   "[ Job: ]" style). Pseudo-content like the pericope-subhead brackets, so
   TTS and copy/share never see them. The span's own text is "Job: " with a
   trailing space, so ::before's inner space mirrors it and ::after supplies
   the gap before the speech text. */
.spk-label::before {
  content: "[ ";
}

.spk-label::after {
  content: "] ";
}

.spk-colored.spk-god { color: var(--spk-god); }
.spk-colored.spk-job { color: var(--spk-job); }
.spk-colored.spk-satan { color: var(--spk-satan); }
.spk-colored.spk-eliphaz { color: var(--spk-eliphaz); }
.spk-colored.spk-bildad { color: var(--spk-bildad); }
.spk-colored.spk-zophar { color: var(--spk-zophar); }
.spk-colored.spk-elihu { color: var(--spk-elihu); }
.spk-colored.spk-wife { color: var(--spk-wife); }
.spk-colored.spk-messenger { color: var(--spk-messenger); }
.spk-colored.spk-king { color: var(--spk-king); }
.spk-colored.spk-woman { color: var(--spk-woman); }
.spk-colored.spk-chorus { color: var(--spk-chorus); }
.spk-colored.spk-brothers { color: var(--spk-brothers); }

.verse-num {
  font-family: var(--font-family-sans);
  font-size: 0.75em;
  font-weight: 600;
  color: var(--verse-num);
  /* Raised via relative offset, NOT vertical-align:super - super inflates
     the line box of every verse-starting line, causing uneven leading. */
  top: -0.35em;
  /* Generous padding = ~40px tap target for the app's primary gesture;
     vertical padding on an inline span never affects line height, and the
     negative margins keep the visible position identical. */
  margin: 0 -0.05em 0 -0.3em;
  padding: 0.9em 0.5em;
  opacity: 0.8;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  /* pan-y, not none: a swipe that began on a verse number used to refuse to
     scroll the page. Long-press still works (the JS timer is unaffected). */
  touch-action: pan-y;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.verse-num.hidden {
  display: none;
}

.verse-num.highlight {
  background-color: var(--highlight);
  border-radius: 6px;
}

.verse.verse-highlight,
.interlinear-verse.verse-highlight {
  background-color: rgba(0, 102, 204, 0.15);
  border-radius: 4px;
  padding: 4px 8px;
  margin-left: -8px;
  margin-right: -8px;
  animation: verse-flash 2s ease-out forwards;
}

[data-theme="dark"] .verse.verse-highlight,
[data-theme="dark"] .interlinear-verse.verse-highlight,
[data-theme="oled"] .verse.verse-highlight,
[data-theme="oled"] .interlinear-verse.verse-highlight {
  background-color: rgba(0, 102, 204, 0.25);
}

@keyframes verse-flash {
  0% { background-color: rgba(0, 102, 204, 0.3); }
  100% { background-color: transparent; }
}

.w {
  cursor: default;
  border-radius: 2px;
  transition: background-color var(--transition-fast);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Words with an available word study. The faint dotted underline is a HOVER
   affordance - it hints "there's more here" on a device with a pointer, and
   strengthens on hover. On touch screens there is no hover, so the always-on
   dotting is just noise scattered through the text (word studies are reached
   by press-and-hold there, taught by the coach marks). So the mark is shown
   only where hover exists; the word stays fully interactive everywhere. */
.w.has-study {
  cursor: pointer;
}

@media (hover: hover) {
  .w.has-study {
    text-decoration: underline dotted;
    text-decoration-color: color-mix(in srgb, var(--fg-tertiary) 55%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
  }

  .w.has-study:hover {
    text-decoration-color: var(--fg-secondary);
  }
}

.w.highlight,
.interlinear-word.highlight {
  background-color: var(--highlight);
}

.overlay-backdrop {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  z-index: 3000;
}

.overlay-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.overlay {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-bg);
  z-index: 3001;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
}

.overlay.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.overlay-header {
  min-height: var(--overlay-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  border-bottom: 1px solid var(--ui-chrome);
  gap: 0.5rem;
  flex-shrink: 0;
}

.overlay-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  border-radius: 8px;
  transition: background-color var(--transition-fast);
}

.overlay-close:hover {
  background-color: var(--ui-chrome);
}

.overlay-title {
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
  flex: 1;
  min-width: 0;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .overlay-title {
    font-size: 1rem;
  }
}

.overlay-external {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-secondary);
  border-radius: 8px;
  transition: background-color var(--transition-fast);
  text-decoration: none;
}

.overlay-external:hover {
  background-color: var(--ui-chrome);
}

.overlay-external.hidden {
  visibility: hidden;
}

/* Overlay header right section - groups external link and edit button */
.overlay-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.content-pericope-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  flex-shrink: 0;
  background: var(--bg);
}

.content-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--ui-chrome);
  background: var(--bg);
  color: var(--fg-secondary);
  font-size: 0.85rem;
  font-family: var(--font-family-sans);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.content-nav-btn:hover {
  background: var(--highlight);
  color: var(--fg);
  border-color: var(--fg-tertiary);
}

.content-nav-btn:active {
  transform: scale(0.98);
}

.content-nav-btn svg {
  flex-shrink: 0;
}

.overlay-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.overlay-body iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.overlay-body .fallback-content {
  padding: 2rem var(--page-padding);
  font-family: var(--font-family-sans);
}

.fallback-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--fg);
}

.fallback-content dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem 1rem;
}

.fallback-content dt {
  font-weight: 500;
  color: var(--fg-secondary);
}

.fallback-content dd {
  color: var(--fg);
}

.fallback-content .not-found {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--ui-chrome);
  border-radius: 8px;
  color: var(--fg-secondary);
}

.word-study-content {
  padding: 1.5rem var(--page-padding);
  font-family: var(--font-family-sans);
  line-height: 1.7;
}

.word-study-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--fg);
}

.word-study-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem 0;
  color: var(--fg);
}

.word-study-content p {
  margin-bottom: 1rem;
  color: var(--fg);
}

.word-study-content em {
  font-style: italic;
}

.word-study-content strong {
  font-weight: 600;
}

.word-study-content ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.word-study-content li {
  margin-bottom: 0.5rem;
  color: var(--fg);
}

.word-loading {
  padding: 2rem var(--page-padding);
  text-align: center;
  color: var(--fg-secondary);
  font-family: var(--font-family-sans);
}

.word-error {
  padding: 2rem var(--page-padding);
  text-align: center;
  color: var(--fg-secondary);
  font-family: var(--font-family-sans);
}

.word-error p {
  margin-bottom: 0.5rem;
}

.settings-body {
  padding: 1.5rem var(--page-padding);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 60px);
}

.settings-section {
  margin-bottom: 2rem;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-label {
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-secondary);
  margin-bottom: 0.75rem;
  display: block;
}

.settings-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.settings-option {
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  padding: 0.625rem 1rem;
  background: var(--ui-chrome);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.settings-option:hover {
  background: var(--ui-chrome-hover);
}

.settings-option.active {
  background: var(--button-primary);
  color: var(--button-primary-fg);
}

.settings-slider {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.settings-slider-label {
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  color: var(--fg-tertiary);
  min-width: 3rem;
  text-align: center;
}

.settings-slider input[type="range"] {
  flex: 1;
  height: 4px;
  background: var(--slider-track);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.settings-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--slider-thumb);
  border-radius: 50%;
  cursor: pointer;
}

.settings-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--slider-thumb);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}

.settings-toggle-label {
  font-family: var(--font-family-sans);
  font-size: 1rem;
  color: var(--fg);
}

.toggle-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  width: 51px;
  min-width: 51px;
  height: 31px;
  min-height: 31px;
  background-color: #D1D1D1;
  border-radius: 15.5px;
  cursor: pointer;
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.toggle-checkbox:checked {
  background-color: #0066CC;
  background-color: var(--toggle-on, #0066CC);
}

.toggle-checkbox::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background-color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.toggle-checkbox:checked::before {
  transform: translateX(20px);
}

/* Free TTS Settings */
.settings-tts-section {
  background: var(--surface-elevated);
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid var(--ui-chrome);
}

.settings-tts-row {
  margin-bottom: 1rem;
}

.settings-tts-row:last-of-type {
  margin-bottom: 1.25rem;
}

.settings-tts-label {
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  color: var(--fg-secondary);
  margin-bottom: 0.5rem;
  display: block;
}

.settings-tts-select {
  width: 100%;
  font-family: var(--font-family-sans);
  font-size: 1rem;
  padding: 0.625rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 6px;
  color: var(--fg);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.settings-tts-select:focus {
  outline: none;
  border-color: var(--accent);
}

.settings-tts-value {
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  color: var(--fg-secondary);
  min-width: 3rem;
  text-align: right;
  display: inline-block;
  margin-left: 0.5rem;
}

.settings-tts-buttons {
  display: flex;
  gap: 0.75rem;
}

.settings-tts-btn {
  flex: 1;
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  padding: 0.625rem 1rem;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.settings-tts-btn:hover {
  opacity: 0.9;
}

.settings-tts-btn.secondary {
  background: transparent;
  border: 1px solid var(--ui-chrome);
  color: var(--fg);
}

.settings-tts-btn.secondary:hover {
  background: var(--surface-elevated);
}

.settings-reset {
  width: 100%;
  font-family: var(--font-family-sans);
  font-size: 1rem;
  padding: 0.875rem;
  background: transparent;
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: 2rem;
}

.settings-reset:hover {
  background: var(--ui-chrome);
}

.settings-account-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ui-chrome);
}

.settings-account-buttons {
  display: flex;
  gap: 0.75rem;
}

.settings-account-btn {
  flex: 1;
  font-family: var(--font-family-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  background: var(--button-primary);
  border: none;
  border-radius: 8px;
  color: var(--button-primary-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.settings-account-btn:hover {
  opacity: 0.9;
}

.settings-account-btn.secondary {
  background: transparent;
  border: 1px solid var(--ui-chrome);
  color: var(--fg);
}

.settings-account-btn.secondary:hover {
  background: var(--ui-chrome);
}

.settings-account-info {
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  color: var(--fg-secondary);
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.nav-body {
  padding: 0.75rem var(--page-padding);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  overflow: hidden;
}

.nav-search {
  position: relative;
}

.nav-search input {
  width: 100%;
  height: 36px;
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  padding: 0 0.75rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  color: var(--fg);
  outline: none;
  transition: border-color var(--transition-fast);
}

.nav-search input:focus {
  border-color: var(--button-primary);
}

.nav-search input::placeholder {
  color: var(--fg-tertiary);
}

.nav-tabs {
  display: flex;
  border-bottom: 1px solid var(--ui-chrome);
}

.nav-tab {
  flex: 1;
  font-family: var(--font-family-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.5rem 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nav-tab:hover {
  color: var(--fg);
}

.nav-tab.active {
  color: var(--fg);
  border-bottom-color: var(--button-primary);
}

.nav-books {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.375rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

@media (min-width: 600px) {
  .nav-books {
    grid-template-columns: repeat(5, 1fr);
  }
}

.nav-book {
  font-family: var(--font-family-sans);
  font-size: 0.8125rem;
  padding: 0.5rem;
  min-height: 2.5rem;
  background: var(--ui-chrome);
  border: none;
  border-radius: 6px;
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.nav-book:hover {
  background: var(--ui-chrome-hover);
}

.nav-book.active {
  background: var(--button-primary);
  color: var(--button-primary-fg);
}

.nav-overlay.chapters-view .overlay-header {
  height: 40px;
  min-height: 40px;
  border-bottom: none;
}

.nav-overlay.chapters-view .overlay-close {
  width: 36px;
  height: 36px;
}

.nav-body.chapters-view {
  padding: 2px;
  gap: 0;
}

.nav-chapters {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  align-content: stretch;
}

@media (min-width: 600px) {
  .nav-chapters {
    grid-template-columns: repeat(10, 1fr);
  }
}

.nav-chapter {
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-chrome);
  border: none;
  border-radius: 3px;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.nav-chapter:hover {
  background: var(--ui-chrome-hover);
}

.nav-back {
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  background: var(--ui-chrome);
  border: none;
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.nav-back:hover {
  background: var(--ui-chrome-hover);
}

.nav-section-label {
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

/* Skeleton chapter: shown by app.js only when a load takes >120ms, so fast
   (prefetch-warmed) navigations never flash. */
.chapter-skeleton {
  max-width: var(--column-width);
  margin: 0 auto;
  padding: var(--page-padding);
}

.skeleton-title {
  width: 45%;
  height: calc(var(--font-size) * 1.5);
  margin: calc(var(--font-size) * 1.5) auto;
}

.skeleton-line {
  height: calc(var(--font-size) * 0.85);
  margin: calc(var(--font-size) * (var(--line-height) - 0.85)) 0;
}

.skeleton-title,
.skeleton-line {
  border-radius: 4px;
  background: var(--highlight);
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.skeleton-line:nth-child(3n) { width: 96%; }
.skeleton-line:nth-child(3n+1) { width: 88%; }
.skeleton-line:nth-child(3n+2) { width: 92%; }
.skeleton-line:last-child { width: 60%; }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-title,
  .skeleton-line { animation: none; }
}

/* Chapter cross-fade via the View Transitions API (used when available) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
}

.loading-indicator {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.loading-indicator.active {
  opacity: 1;
  visibility: visible;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ui-chrome);
  border-top-color: var(--button-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .w.highlight {
    background-color: var(--highlight);
  }
}

@media (min-width: 768px) {
  :root {
    --gutter-width: 14vw;
    --page-padding: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-padding: 48px;
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ui-chrome);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ui-chrome-hover);
}

::selection {
  background: rgba(0, 102, 204, 0.2);
}

/* Pericope structure */
.pericope-block {
  margin-bottom: var(--pericope-spacing);
}

/* "Open Explanation Here" chip (owner order 46f1be57): one per pericope,
   under the Bible text. The large bottom margin is the point - the chip
   belongs to the passage ABOVE it, and the next passage starts far below. */
.pericope-explain-row {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.6em 0 4.5em;
}
.pericope-explain-chip {
  font-family: var(--font-family-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--fg-secondary);
  background: transparent;
  border: 1px solid var(--border-color, rgba(128,128,128,0.35));
  border-radius: 999px;
  padding: 0.45em 1.1em;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.pericope-explain-chip:hover,
.pericope-explain-chip:active {
  color: var(--fg-primary, inherit);
  border-color: var(--fg-tertiary, currentColor);
}

.pericope-text {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

/* Action Sheet */
.action-sheet {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.action-sheet.active {
  opacity: 1;
  visibility: visible;
}

.action-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-backdrop);
}

.action-sheet-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 0.5rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--transition-normal);
  /* The sheet can be taller than the viewport (especially in landscape, and
     since the STUDY/SAVE/NOTES grouping): let it scroll instead of putting
     Commentary/Sermon/Timeline off-screen with no way to reach them. */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Grouped verse action sheet (Phase 5-6 deploy 4). Scoped to #action-sheet -
   the five other sheets keep their flat markup and styling. */
#action-sheet .action-sheet-title {
  border-radius: var(--radius-lg);
  border-bottom: none;
}

.action-sheet-group {
  margin-top: var(--space-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--overlay-bg);
}

.action-sheet-group-label {
  font-family: var(--font-family-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  padding: var(--space-2) var(--space-4) 0;
}

.action-sheet-group .action-sheet-button + .action-sheet-button {
  border-top: 1px solid var(--ui-chrome);
}

.action-sheet-pill-row {
  display: flex;
  gap: 1px;
  background: var(--ui-chrome);
}

.action-sheet-pill-row .action-sheet-button {
  flex: 1;
}

.action-sheet-pill-row + .action-sheet-button {
  border-top: 1px solid var(--ui-chrome);
}

.action-sheet.active .action-sheet-container {
  transform: translateY(0);
}

.action-sheet-title {
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-secondary);
  text-align: center;
  padding: 0.5rem 1rem;
  background: var(--overlay-bg);
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--ui-chrome);
}

.action-sheet-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  font-family: var(--font-family-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--button-primary);
  background: var(--overlay-bg);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.action-sheet-button:first-of-type {
  border-radius: 0;
}

.action-sheet-button:last-of-type:not(.action-sheet-cancel) {
  border-radius: 0 0 12px 12px;
}

.action-sheet-button:hover {
  background: var(--ui-chrome);
}

.action-sheet-button:active {
  background: var(--ui-chrome-hover);
}

.action-sheet-button svg {
  color: var(--button-primary);
}

.action-sheet-cancel {
  margin-top: 0.375rem;
  border-radius: 12px;
  color: var(--fg);
  font-weight: 600;
}

/* Reader switch (I2): the word-study chooser (READER-SWITCH-PLAN §0.2). A tap
   on an English chunk behind two or more original words lists them here, one
   row each: the original word, its transliteration, the English gloss. Phone
   width first (the sheet is the same 400px-max container as the other
   sheets); desktop-mode places it in the right panel like #action-sheet. */
.chunk-chooser .action-sheet-title {
  border-radius: 12px 12px 0 0;
}

.chunk-chooser-rows {
  background: var(--overlay-bg);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.chunk-chooser-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "ol check" "tr check" "gl check" "badge check";
  justify-items: start;
  text-align: left;
  gap: 0 0.75rem;
  padding: 0.625rem 1rem;
  color: var(--fg);
  min-height: 48px; /* a comfortable touch target */
}

.chunk-chooser-row + .chunk-chooser-row {
  border-top: 1px solid var(--ui-chrome);
}

.chunk-chooser-ol {
  grid-area: ol;
  font-family: 'SBL Greek', 'SBL Hebrew', 'Times New Roman', serif; /* the reader's own OL face */
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--fg);
}

.chunk-chooser-tr {
  grid-area: tr;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--fg-secondary);
}

.chunk-chooser-gl {
  grid-area: gl;
  font-size: 0.875rem;
  color: var(--fg-tertiary);
}

.chunk-chooser-badge {
  grid-area: badge;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.chunk-chooser-row.is-empty .chunk-chooser-ol {
  color: var(--fg-secondary);
}

.chunk-chooser-check {
  grid-area: check;
  align-self: center;
  font-size: 1.125rem;
  color: var(--button-primary);
}

.chunk-chooser-row.is-read {
  background: color-mix(in srgb, var(--overlay-bg) 88%, var(--button-primary));
}

/* Content overlay body styling */
.content-summary-banner {
  color: var(--fg-secondary);
  padding: 0 0 1rem 0;
  font-size: 0.95rem;
  font-style: italic;
  text-align: left;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.content-body {
  padding: 1.5rem var(--page-padding);
  font-family: var(--font-family-serif);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4,
.content-body h5,
.content-body h6 {
  font-family: var(--font-family-sans);
  color: var(--fg);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.content-body h1 { font-size: 1.75rem; font-weight: 700; }
.content-body h2 { font-size: 1.5rem; font-weight: 600; }
.content-body h3 { font-size: 1.25rem; font-weight: 600; }
.content-body h4 { font-size: 1.125rem; font-weight: 500; }

.content-body p {
  margin-bottom: 1em;
}

.content-body ul,
.content-body ol {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.content-body li {
  margin-bottom: 0.5em;
}

.content-body blockquote {
  margin: 1.5em 0 !important;
  padding: 1em !important;
  border-left: 3px solid var(--button-primary) !important;
  background-color: var(--bg-elevated, rgba(0, 0, 0, 0.03)) !important;
  border-radius: 0 6px 6px 0 !important;
  color: var(--fg-secondary) !important;
  font-style: italic;
}

[data-theme="dark"] .content-body blockquote {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--fg) !important;
}

[data-theme="oled"] .content-body blockquote {
  background-color: #1a1a1a !important;
  color: var(--fg) !important;
}

/* Sermon questions: OWNER DECISION 2026-07-29 - hide the auto-generated
   study questions a Replit job inserted into every sermon. Display-only;
   the content itself is untouched, so this is reversible by deleting this
   rule (the old theming rules for the block live in git history). */
.sermon-questions {
  display: none !important;
}

.content-body a {
  color: var(--button-primary);
  text-decoration: none;
}

.content-body a:hover {
  text-decoration: underline;
}

.content-body::after {
  content: "Legacy Standard Bible - LSB\A Copyright \00a9  2021 by The Lockman Foundation\A A Corporation Not for Profit, La Habra, California\A All Rights Reserved\A\A The \"Legacy Standard Bible\" and \"LSB\" are trademarks registered in the United States Patent and Trademark Office by The Lockman Foundation.\A\A https://www.lockman.org\A\A Managed in Partnership with Three Sixteen Publishing, Inc.\A www.316Publishing.com\A\A Requests for quotations, reprints, or other permission requests, must be directed to and approved in writing by Three Sixteen Publishing, www.316publishing.com";
  display: block;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ui-chrome);
  text-align: center;
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--fg-tertiary);
  white-space: pre-wrap;
}

/* Creeds/catechism explanations carry no LSB copyright block (owner
   f2b89762): the notice accompanies Bible text and Bible explanations
   only. app.js toggles .ds-content per overlay open. */
.content-body.ds-content::after {
  content: none;
}

.content-error {
  text-align: center;
  padding: 3rem 1rem;
}

.content-error h3 {
  font-family: var(--font-family-sans);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 1rem;
}

.content-error p {
  font-family: var(--font-family-sans);
  font-size: 1rem;
  color: var(--fg-secondary);
  margin-bottom: 1.5rem;
}

.content-error a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  color: var(--button-primary);
  text-decoration: none;
}

.content-error a:hover {
  text-decoration: underline;
}

/* Interlinear styles */
.settings-hint {
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  color: var(--fg-tertiary);
  margin-top: 0.5rem;
  padding-left: 0;
}

.interlinear-verse {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0.5rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.interlinear-verse.interlinear-rtl {
  flex-direction: row-reverse;
  justify-content: flex-start;
  position: relative;
  padding-right: 1.5rem;
}

.interlinear-verse.interlinear-rtl .verse-num {
  position: absolute;
  right: 0;
  top: 0;
}

/* Hebrew text size increase (OT books) */
.interlinear-verse.is-hebrew .interlinear-greek {
  font-size: 2.0em;
  font-weight: normal;
}
.interlinear-verse.is-hebrew .greek-text {
  font-size: 2.0em;
  font-weight: normal;
}
.interlinear-verse.is-hebrew .reverse-greek {
  font-size: 2.0em;
  font-weight: normal;
}
.mode-interlinear .interlinear-verse.is-hebrew .greek-text {
  font-size: 2.0em;
  font-weight: normal;
}
.mode-reverse .interlinear-verse.is-hebrew .greek-text {
  font-size: 2.0em;
  font-weight: normal;
}
.mode-reverse .interlinear-verse.is-hebrew .reverse-greek {
  font-size: 2.0em;
  font-weight: normal;
}

.interlinear-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.interlinear-word:active {
  background: var(--highlight);
  border-radius: 4px;
}

.interlinear-greek {
  font-family: 'SBL Hebrew', 'SBL Greek', 'Times New Roman', serif;
  font-size: 1.3em;
  color: var(--fg);
  font-weight: 500;
}

.interlinear-translit {
  font-family: var(--font-family-sans);
  font-size: 0.65em;
  color: var(--fg-tertiary);
  font-style: italic;
}

.interlinear-lsb {
  font-family: var(--font-family);
  font-size: 0.85em;
  color: var(--fg-secondary);
}

.interlinear-verse .verse-num {
  align-self: flex-start;
  margin-right: 0.25rem;
}

/* Reverse Interlinear styles (LSB on top, Greek underneath) */
.interlinear-verse {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.35rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.reverse-interlinear-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.reverse-interlinear-word:active {
  background: var(--highlight);
  border-radius: 4px;
}

.reverse-interlinear-word.highlight {
  background: var(--highlight);
  border-radius: 4px;
}

.reverse-lsb {
  font-family: var(--font-family);
  font-size: 1em;
  color: var(--fg);
}

.reverse-greek {
  font-family: 'SBL Hebrew', 'SBL Greek', 'Times New Roman', serif;
  font-size: 1.4em;
  color: var(--fg-secondary);
}

.reverse-translit {
  font-family: var(--font-family-sans);
  font-size: 0.6em;
  color: var(--fg-tertiary);
  font-style: italic;
}

.interlinear-verse .verse-num {
  align-self: flex-start;
  margin-right: 0.25rem;
}

/* Anchor-based segment alignment styles */
.aligned-segment {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-right: 0.25rem;
  margin-bottom: 0.5rem;
  vertical-align: top;
}

.anchor-segment {
  background: rgba(128, 128, 128, 0.08);
  border-radius: 4px;
  padding: 0.15rem 0.25rem;
}

.filler-segment {
  background: rgba(128, 128, 128, 0.04);
  border-radius: 4px;
  padding: 0.15rem 0.25rem;
  opacity: 0.85;
}

.segment-eng {
  display: block;
  font-family: var(--font-family);
  font-size: 1em;
  color: var(--fg);
  line-height: 1.3;
}

.eng-word {
  cursor: pointer;
}

.eng-word:active {
  background: var(--highlight);
  border-radius: 4px;
}

.segment-greek {
  display: block;
  min-height: 1.4em;
}

.greek-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  padding: 2px 6px;
  margin: 0;
  border-radius: 4px;
}

/* Subtle vertical divider between Greek words */
.greek-word + .greek-word {
  border-left: 1px solid var(--border-light, rgba(128, 128, 128, 0.25));
  margin-left: 2px;
  padding-left: 8px;
}

/* Hebrew inside a segment must read right-to-left. The verse-level
   row-reverse only ordered the segment BOXES; the words inside each box were
   still laid out left-to-right, so every multi-word Hebrew phrase (68.9% of
   OT verses have one) painted backwards. direction:rtl makes the inline
   .greek-word boxes flow right-to-left; isolate keeps the bidi context from
   leaking. Applies in both interlinear and reverse mode; NT (Greek) is
   untouched because is-hebrew is set only for OT books. */
.interlinear-verse.is-hebrew .segment-greek {
  direction: rtl;
  unicode-bidi: isolate;
}

/* In RTL flow the divider between words sits on the other side. */
.interlinear-verse.is-hebrew .greek-word + .greek-word {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
  border-right: 1px solid var(--border-light, rgba(128, 128, 128, 0.25));
  margin-right: 2px;
  padding-right: 8px;
}

.greek-word:hover {
  background: var(--highlight);
}

.greek-word:hover .greek-text,
.greek-word:hover .greek-translit {
  color: var(--accent);
}

.greek-word:active {
  background: var(--accent-bg);
}

.greek-text {
  font-family: 'SBL Greek', 'Times New Roman', serif;
  font-size: 1.05em;
  color: var(--fg-secondary);
}

.greek-translit {
  font-family: var(--font-family-sans);
  font-size: 0.65em;
  color: var(--fg-tertiary);
  font-style: italic;
}

.implied-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  color: var(--fg-tertiary);
  opacity: 0.4;
  cursor: help;
}

.implied-marker::before {
  content: "—";
  font-size: 1.05em;
  line-height: 1.2;
}

.implied-marker::after {
  content: "\00a0";
  font-size: 0.65em;
  line-height: 1;
}

.mode-interlinear .implied-marker::before {
  font-size: 1.4em;
  line-height: 1.2;
}

.mode-interlinear .implied-marker::after {
  font-size: 0.7em;
}

.mode-reverse .implied-marker::before {
  font-size: 1.4em;
  line-height: 1.2;
}

.mode-reverse .implied-marker::after {
  font-size: 0.65em;
}

/* Implied segments: English words with no Greek/Hebrew equivalent */
.implied-segment {
  opacity: 0.7;
}

.implied-segment .segment-eng {
  font-style: italic;
}

.implied-segment .eng-word {
  color: var(--fg-tertiary);
}

.mode-interlinear .implied-segment {
  display: none !important;
}

.mode-reverse .implied-segment .segment-eng {
  font-style: italic;
  color: var(--fg-secondary);
}

/* Regular interlinear mode: Greek bold on top, English subdued below */
.mode-interlinear .greek-text {
  font-size: 1.4em;
  font-weight: normal;
  color: var(--fg);
}

.mode-interlinear .greek-translit {
  font-size: 0.7em;
  color: var(--fg-secondary);
}

.mode-interlinear .segment-eng {
  font-size: 0.75em;
  color: var(--fg-tertiary);
  line-height: 1.2;
}

/* Reverse interlinear mode: English prominent on top, Greek subdued below */
.mode-reverse .segment-eng {
  font-size: 1em;
  color: var(--fg);
}

.mode-reverse .greek-text {
  font-size: 1.4em;
  color: var(--fg-secondary);
}

/* Timeline styles */
.timeline-overlay {
  display: flex;
  flex-direction: column;
}

.timeline-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--ui-chrome);
  border-bottom: 1px solid var(--input-border);
}

.timeline-zoom-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--overlay-bg);
  color: var(--fg);
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.timeline-zoom-btn:hover {
  background: var(--ui-chrome-hover);
}

.timeline-zoom-level {
  font-size: 0.875rem;
  color: var(--fg-secondary);
  min-width: 80px;
  text-align: center;
  font-weight: 500;
}

.timeline-container {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
}

/* Timeline Search Panel */
.overlay-action-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--fg);
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--transition-fast);
}

.overlay-action-btn:hover {
  background: var(--ui-chrome-hover);
}

.overlay-action-btn.active {
  background: var(--accent-bg);
  color: var(--accent-fg);
}

.timeline-search-overlay {
  display: flex;
  flex-direction: column;
}

.timeline-search-panel {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--ui-chrome);
  border-bottom: 1px solid var(--input-border);
}

.timeline-search-panel.active {
  display: flex;
}

.timeline-search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 0 0.5rem;
}

.timeline-search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.625rem 0.5rem;
  font-size: 1rem;
  color: var(--fg);
  outline: none;
}

.timeline-search-input::placeholder {
  color: var(--fg-tertiary);
}

.timeline-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: var(--fg-tertiary);
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.timeline-search-clear:hover {
  background: var(--ui-chrome-hover);
  color: var(--fg);
}

.timeline-search-results-info {
  padding: 0.5rem 1rem;
  background: var(--accent-bg);
  color: var(--accent-fg);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timeline-search-results-info button {
  background: transparent;
  border: none;
  color: var(--accent-fg);
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.875rem;
}

.timeline-search-examples-container {
  padding: 0.5rem 1rem;
  text-align: center;
}

.timeline-search-examples {
  margin: 0;
  color: var(--fg-tertiary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.timeline-track {
  position: relative;
  min-height: 100%;
  padding-bottom: 2rem;
}

/* Date axis at top */
.timeline-axis {
  position: sticky;
  top: 0;
  left: 0;
  height: 50px;
  background: var(--overlay-bg);
  border-bottom: 3px solid var(--fg);
  z-index: 100;
}

.timeline-marker {
  position: absolute;
  top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg);
  transform: translateX(-50%);
  white-space: nowrap;
}

.timeline-marker::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--fg-tertiary);
  margin-top: 4px;
}

/* Entries container */
.timeline-entries {
  position: relative;
  margin-top: 10px;
}

/* Each entry is a wrapper for bar, connector, summary - all absolutely positioned */
.timeline-entry {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.timeline-entry:hover {
  z-index: 50;
}

.timeline-entry:hover .timeline-entry-summary {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* The summary box - all boxes use same neutral style */
.timeline-entry-summary {
  position: absolute;
  width: 130px;
  padding: 0.5rem;
  border-radius: 6px;
  border: 2px solid rgba(100, 116, 139, 0.5);
  background: rgba(100, 116, 139, 0.1);
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.35;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
}

[data-theme="dark"] .timeline-entry-summary,
[data-theme="oled"] .timeline-entry-summary {
  border-color: rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.15);
}

.timeline-entry-date {
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.timeline-entry.selected .timeline-entry-summary {
  border-color: #DC2626;
  background: rgba(100, 116, 139, 0.1);
}

[data-theme="dark"] .timeline-entry.selected .timeline-entry-summary,
[data-theme="oled"] .timeline-entry.selected .timeline-entry-summary {
  border-color: #EF4444;
  background: rgba(148, 163, 184, 0.15);
}

.timeline-entry-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.timeline-entry-ref {
  font-size: 0.65rem;
  margin-top: 4px;
  font-weight: 600;
  opacity: 0.8;
}

.timeline-era-label {
  position: absolute;
  top: 60px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--button-primary);
  background: var(--overlay-bg);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  z-index: 5;
  opacity: 0.8;
}

.timeline-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  gap: 1rem;
}

.timeline-loading p {
  color: var(--fg-secondary);
}

.timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  text-align: center;
  padding: 2rem;
}

.timeline-empty h3 {
  color: var(--fg);
  margin-bottom: 0.5rem;
}

.timeline-empty p {
  color: var(--fg-secondary);
  max-width: 300px;
}

.timeline-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--overlay-bg);
  z-index: 10;
}

.timeline-sort-toggle {
  display: flex;
  gap: 0.5rem;
}

.timeline-sort-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
}

.timeline-sort-btn.active {
  background: var(--button-primary);
  color: #fff;
  border-color: var(--button-primary);
}

.timeline-count {
  font-size: 0.75rem;
  color: var(--fg-secondary);
}

.timeline-list-table {
  display: flex;
  flex-direction: column;
}

.timeline-list-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  align-items: start;
}

.timeline-list-row:hover:not(.header) {
  background: rgba(100, 116, 139, 0.1);
}

.timeline-list-row.selected {
  background: rgba(37, 99, 235, 0.15);
  border-left: 3px solid var(--button-primary);
}

.timeline-list-row.header {
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--fg-secondary);
  cursor: default;
  position: sticky;
  top: var(--topbar-height);
  background: var(--overlay-bg);
  z-index: 9;
}

.timeline-col {
  font-size: 0.75rem;
  line-height: 1.4;
}

.timeline-col.date {
  font-weight: 600;
  color: var(--fg);
  font-size: 0.7rem;
}

.timeline-col.summary {
  color: var(--button-primary);
}

.timeline-col.passage {
  font-weight: 500;
  color: var(--fg-secondary);
  text-align: right;
  font-size: 0.7rem;
}

@media (max-width: 400px) {
  .timeline-list-row {
    grid-template-columns: 65px 1fr 80px;
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
  }

  .timeline-col {
    font-size: 0.7rem;
  }

  .timeline-col.date,
  .timeline-col.passage {
    font-size: 0.65rem;
  }
}

.timeline-detail-overlay {
  z-index: 3001;
}

/* Bookmarks Tab Styles */
.bookmarks-wrapper {
  display: none;
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 10;
  overflow-y: auto;
}

.bookmarks-wrapper.active {
  display: block;
}

.bookmarks-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.bookmarks-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px;
}

.bookmarks-header {
  margin-bottom: 24px;
  text-align: center;
}

.bookmarks-header h2 {
  font-family: var(--font-family);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px 0;
}

.bookmarks-header p {
  font-size: 0.9rem;
  color: var(--fg-secondary);
  margin: 0;
}

.bookmarks-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.bookmarks-empty-state svg {
  color: var(--fg-tertiary);
  margin-bottom: 16px;
}

.bookmarks-empty-state h3 {
  font-size: 1.1rem;
  color: var(--fg);
  margin: 0 0 8px 0;
}

.bookmarks-empty-state p {
  font-size: 0.9rem;
  color: var(--fg-secondary);
  margin: 0;
}

.bookmarks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bookmark-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--ui-chrome);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.bookmark-item:hover {
  background: var(--ui-chrome-hover);
}

.bookmark-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.bookmark-date-range {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bookmark-summary {
  font-weight: 500;
  color: var(--accent);
  font-size: 0.95rem;
}

.bookmark-reference {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--fg-secondary);
}

.bookmark-delete {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--fg-tertiary);
  border-radius: 4px;
}

.bookmark-delete:hover {
  color: #CC3333;
  background: rgba(204, 51, 51, 0.1);
}

.bookmark-reorder-buttons {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 8px;
  flex-shrink: 0;
}

.bookmark-move-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg-tertiary);
  cursor: pointer;
  border-radius: 4px;
  -webkit-user-select: none;
  user-select: none;
}

.bookmark-move-btn:hover:not(:disabled) {
  background: var(--surface-elevated);
  color: var(--fg-secondary);
}

.bookmark-move-btn:active:not(:disabled) {
  background: var(--accent);
  color: var(--bg);
}

.bookmark-move-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Bookmarks Sub-tabs */
.bookmarks-subtabs {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--ui-chrome);
  background: var(--bg);
}

.bookmarks-subtab {
  flex: 1;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 500px) {
  .bookmarks-subtab {
    padding: 12px 14px;
    font-size: 13px;
  }
}

.bookmarks-subtab:hover {
  color: var(--fg);
}

.bookmarks-subtab.active {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

.bookmarks-subtab-content {
  display: none;
}

.bookmarks-subtab-content.active {
  display: block;
}

/* Bookmarks Settings Panel */
.bookmarks-settings {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px;
}

.bookmarks-settings h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px 0;
}

.bookmarks-settings .settings-description {
  font-size: 0.9rem;
  color: var(--fg-secondary);
  margin: 0 0 24px 0;
}

.bookmarks-settings .settings-section {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--ui-chrome);
  border-radius: 8px;
}

.bookmarks-settings .settings-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px 0;
}

.bookmarks-settings .settings-section p {
  font-size: 0.85rem;
  color: var(--fg-secondary);
  margin: 0 0 12px 0;
}

.bookmark-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--ui-chrome-hover);
  border-radius: 6px;
  cursor: pointer;
}

.bookmark-select:focus {
  outline: none;
  border-color: var(--button-primary);
}

.clear-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.clear-bookmark-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--ui-chrome-hover);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.clear-bookmark-btn:hover {
  background: rgba(204, 51, 51, 0.1);
  border-color: #CC3333;
  color: #CC3333;
}

/* Help Tab Styles */
.help-wrapper {
  display: none;
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 10;
  overflow-y: auto;
}

.help-wrapper.active {
  display: block;
}

/* (The old max-width/padding .help-container rule was removed: it fought the
   flex layout declared later in this file and squeezed the help text into a
   ~350px column on large screens.) */

.help-header {
  margin-bottom: 24px;
  text-align: center;
}

.help-header h2 {
  font-family: var(--font-family);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px 0;
}

.help-header p {
  font-size: 0.9rem;
  color: var(--fg-secondary);
  margin: 0;
}

/* Provenance notice at the top of Help — owner's wording verbatim
   (d91bcb4a). Quiet by design: the reading column's manner, not a banner. */
.help-provenance {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-left: 3px solid var(--accent-color, #8b7355);
  background: var(--bg-secondary);
  border-radius: 0 6px 6px 0;
}

.help-provenance p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--fg-secondary);
}

.help-section {
  margin-bottom: 24px;
}

.help-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-chrome);
}

.help-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-section li {
  padding: 8px 0;
  color: var(--fg-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.help-section li strong {
  color: var(--fg);
}

/* Toast Messages */
.toast-message {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--fg);
  color: var(--bg);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.toast-message.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Reading-progress hairline (Phase 7.3). z-index 1500 sits above the topbar
   (1000, notes.css) and below every overlay tier (2000+), so overlays dim it
   with the rest of the page. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-color);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 1500;
  pointer-events: none;
}

/* ============================================ */
/* CONCORDANCE STYLES                          */
/* ============================================ */

.concordance-overlay,
.concordance-search-overlay,
.concordance-word-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 3100;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.concordance-overlay.active,
.concordance-search-overlay.active,
.concordance-word-overlay.active {
  opacity: 1;
  visibility: visible;
}

.concordance-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  background: var(--bg);
  flex-shrink: 0;
}

.concordance-toolbar-left,
.concordance-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.concordance-toolbar h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
}

.concordance-toolbar button {
  background: none;
  border: none;
  color: var(--fg-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.concordance-toolbar button:hover {
  background: var(--ui-chrome);
  color: var(--fg);
}

.concordance-main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

.concordance-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.concordance-loading p {
  color: var(--fg-secondary);
  margin-top: 16px;
}

.concordance-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.concordance-empty h3 {
  color: var(--fg);
  margin: 0 0 8px;
}

.concordance-empty p {
  color: var(--fg-secondary);
  margin: 0;
}

.concordance-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.concordance-content {
  min-height: 100%;
}

.concordance-header {
  text-align: center;
  padding: 12px 16px 8px;
}

.concordance-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 2px;
}

.concordance-subtitle {
  font-size: 0.8rem;
  color: var(--fg-secondary);
  margin: 0;
}

.concordance-testament-filter {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
}

.concordance-filter-btn {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--fg-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.concordance-filter-btn:hover {
  background: var(--ui-chrome-hover);
  color: var(--fg);
}

.concordance-filter-btn.active {
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border-color: var(--button-primary);
}

.concordance-alphabet {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 8px 12px 16px;
}

.concordance-letter-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--ui-chrome);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.concordance-letter-btn:hover {
  background: var(--ui-chrome);
  border-color: var(--accent);
}

.concordance-letter-btn .letter {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1;
}

.concordance-letter-btn .count {
  font-size: 0.65rem;
  color: var(--fg-secondary);
  margin-top: 2px;
}

.concordance-words-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

.concordance-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.concordance-back-btn:hover {
  background: var(--ui-chrome);
}

.concordance-letter-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  flex: 1;
}

.concordance-word-count {
  font-size: 0.85rem;
  color: var(--fg-secondary);
}

.concordance-words-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--ui-chrome);
  position: sticky;
  top: 0;
  z-index: 10;
}

.concordance-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px 0;
}

.concordance-letter-title {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

.concordance-word-list {
  padding: 8px 0;
}

.concordance-word-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid var(--ui-chrome-subtle);
}

.concordance-word-item:hover {
  background: var(--ui-chrome);
}

.concordance-word-item .word-text {
  font-size: 1rem;
  color: var(--fg);
  font-weight: 500;
}

.concordance-word-item .word-count {
  font-size: 0.85rem;
  color: var(--fg-secondary);
}

/* Concordance: English / Greek & Hebrew tabs (P2) */
.concordance-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ui-chrome-subtle);
}

.concordance-tab {
  flex: 1 1 0;
  padding: 12px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-secondary);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.concordance-tab:hover {
  color: var(--fg);
}

.concordance-tab.active {
  color: var(--fg);
  font-weight: 600;
  border-bottom-color: var(--accent, #2b6cb0);
}

.concordance-ol-search {
  padding: 12px 16px 0;
}

.concordance-ol-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--fg);
  background: var(--ui-chrome);
  border: 1px solid var(--ui-chrome-subtle);
  border-radius: 8px;
}

.concordance-ol-results:not(:empty) {
  margin-top: 8px;
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--ui-chrome-subtle);
  border-radius: 8px;
}

.concordance-ol-heading {
  margin: 18px 0 0;
  padding: 0 16px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

/* Greek and Hebrew need a face that actually has the glyphs, and a little
   more size than Latin at the same nominal point size. */
.conc-ol-word {
  font-family: "Gentium Plus", "SBL Greek", "Cardo", "Times New Roman", serif;
  font-size: 1.15rem;
}

.conc-ol-translit,
.occurrence-ol-form {
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--fg-secondary);
  font-style: italic;
}

.occurrence-ol-form {
  margin-left: 8px;
  font-style: normal;
}

/* The Strong's key beside a Hebrew headword. Greek sends none, so this only
   ever renders on the Hebrew side. */
.conc-ol-strongs {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--fg-secondary);
  border: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.35));
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}

/* Book filter on the occurrences view. One component, both tabs.
   Collapsed it is a single row that still says something useful, because at
   375px a filter that costs a row without paying for it is worse than none. */
.conc-book-filter {
  margin: 8px 0 4px;
  border: 1px solid var(--ui-chrome-border, rgba(128, 128, 128, 0.3));
  border-radius: 8px;
  overflow: hidden;
}

.conc-book-filter.filtered {
  border-color: var(--accent, #3b6ea5);
}

.conc-book-filter-toggle {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.conc-book-filter-label {
  font-weight: 600;
  white-space: nowrap;
}

.conc-book-filter-caret {
  color: var(--fg-secondary);
}

/* The preview truncates rather than wrapping: the collapsed strip is one row
   by definition, and a two-row "collapsed" state is not collapsed. */
.conc-book-filter-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.82rem;
  color: var(--fg-secondary);
}

.conc-book-filter-body {
  padding: 0 10px 10px;
}

.conc-book-filter-tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.conc-book-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.conc-book-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--ui-chrome-border, rgba(128, 128, 128, 0.3));
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: inherit;
  cursor: pointer;
}

.conc-book-chip-count {
  font-size: 0.74rem;
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
}

.conc-book-chip.selected {
  border-color: var(--accent, #3b6ea5);
  background: var(--accent, #3b6ea5);
  color: #fff;
}

.conc-book-chip.selected .conc-book-chip-count {
  color: rgba(255, 255, 255, 0.85);
}

.conc-books-all.active {
  border-color: var(--accent, #3b6ea5);
}

/* --- By book: one book's whole vocabulary, ranked ---------------------- */

.conc-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
  padding: 0 10px 12px;
}

.conc-book-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--ui-chrome-border, rgba(128, 128, 128, 0.3));
  border-radius: 8px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.conc-book-pick-name {
  font-weight: 600;
}

.conc-book-pick-count {
  font-size: 0.74rem;
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
}

.conc-bybook-tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 10px 8px;
}

.conc-bybook-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.conc-bybook-rank {
  flex: 0 0 auto;
  min-width: 2.2em;
  font-size: 0.74rem;
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Display only: the share of the book's commonest word. It sits between the
   word and its count and never replaces either, so nothing here is the only
   place a number appears. */
.conc-bybook-bar {
  flex: 0 0 64px;
  height: 6px;
  border-radius: 3px;
  background: var(--ui-chrome-border, rgba(128, 128, 128, 0.25));
  overflow: hidden;
}

.conc-bybook-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent, #3b6ea5);
}

/* The chapter row. Psalms has 150 chapters, so it scrolls sideways rather
   than wrapping into a wall of chips above the list it is meant to filter. */
.conc-chapter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 0 10px 8px;
  scrollbar-width: thin;
}

.conc-chapter-chip {
  flex: 0 0 auto;
  min-width: 2.4em;
  justify-content: center;
}

.conc-chapter-chip.active {
  border-color: var(--accent, #3b6ea5);
  background: var(--accent, #3b6ea5);
  color: #fff;
}

.conc-bybook-note {
  margin: 0 0 8px;
  padding: 0 10px;
  font-size: 0.78rem;
  color: var(--fg-secondary);
}

/* A long word pushes the bar and the count onto the next line rather than
   being squeezed beside them: the bar and the count are fixed-width, so a
   word that has to share their line ends up a column two characters wide.
   The min-width is what decides "long" - below it the row stays on one line,
   which is where almost every word sits. */
.conc-bybook-item {
  flex-wrap: wrap;
}

.conc-bybook-item .word-text {
  flex: 1 1 auto;
  min-width: 12ch;
}

/* 375px: the bar is the first thing to go - the count carries the meaning. */
@media (max-width: 380px) {
  .conc-bybook-bar {
    flex-basis: 38px;
  }
  .conc-book-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }
}

/* Concordance Word Overlay */
.concordance-word-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Word page filter buttons */
.concordance-word-filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 2;
}

.concordance-word-filter-btn {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--fg-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.concordance-word-filter-btn:hover {
  background: var(--ui-chrome-hover);
  color: var(--fg);
}

.concordance-word-filter-btn.active {
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border-color: var(--button-primary);
}

.concordance-occurrences-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-chrome);
}

.concordance-occurrence-count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--fg-secondary);
}

.concordance-occurrence-count .count-separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg-tertiary);
}

.concordance-occurrence-count .count-total {
  font-weight: 600;
  color: var(--fg);
}

.concordance-occurrences-list {
  padding: 8px 0;
}

.concordance-occurrence {
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid var(--ui-chrome-subtle);
}

.concordance-occurrence:hover {
  background: var(--ui-chrome);
}

.occurrence-ref {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
}

.occurrence-text {
  font-size: 0.95rem;
  color: var(--fg-secondary);
  font-style: italic;
  line-height: 1.5;
}

.occurrence-text .highlight,
.occurrence-text b,
.occurrence-text strong {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--fg);
  font-weight: 800;
  font-style: normal;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Concordance Search */
.concordance-search-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  background: var(--bg);
}

.concordance-search-input-wrapper {
  flex: 1;
  position: relative;
}

.concordance-search-input-wrapper input {
  width: 100%;
  padding: 10px 40px 10px 12px;
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 1rem;
  outline: none;
}

.concordance-search-input-wrapper input:focus {
  border-color: var(--accent);
}

.concordance-search-input-wrapper input::placeholder {
  color: var(--fg-tertiary);
}

.concordance-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--fg-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.concordance-search-results {
  flex: 1 1 0;
  min-height: 0;
  height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.concordance-search-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.concordance-search-hint p {
  color: var(--fg-tertiary);
  font-size: 0.95rem;
}

.concordance-search-result-list {
  padding: 8px 0;
}

.concordance-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid var(--ui-chrome-subtle);
}

.concordance-search-result:hover {
  background: var(--ui-chrome);
}

.concordance-search-result .word-text {
  font-size: 1rem;
  color: var(--fg);
  font-weight: 500;
}

.concordance-search-result .word-count {
  font-size: 0.85rem;
  color: var(--fg-secondary);
}

/* Concordance Load More */
.concordance-load-more {
  padding: 16px;
  text-align: center;
}

.concordance-load-more-btn {
  padding: 12px 24px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.concordance-load-more-btn:hover {
  opacity: 0.9;
}

.concordance-load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================
   HELP SYSTEM - Award-Winning Design
   ============================================ */

/* Help Wrapper - Only show when active */
.help-wrapper.active {
  display: flex;
  flex-direction: column;
  /* No height:100% - the wrapper is already pinned top+bottom, and adding a
     height made the browser ignore `bottom`, clipping the page's last 48px. */
  overflow: hidden;
  background: var(--bg);
}

.help-container {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* Help Navigation Sidebar */
.help-nav {
  width: 280px;
  min-width: 280px;
  background: var(--overlay-bg);
  border-right: 1px solid var(--ui-chrome);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.help-nav-header {
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--ui-chrome);
}

.help-nav-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 4px 0;
}

.help-nav-subtitle {
  font-size: 0.85rem;
  color: var(--fg-secondary);
  margin: 0;
}

.help-nav-list {
  list-style: none;
  padding: 12px 8px;
  margin: 0;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.help-nav-list li {
  margin-bottom: 2px;
}

.help-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--fg-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.help-nav-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.help-nav-link:hover {
  background: var(--highlight);
  color: var(--fg);
}

.help-nav-link:hover svg {
  opacity: 1;
}

.help-nav-link.active {
  background: var(--button-primary);
  color: white;
}

.help-nav-link.active svg {
  opacity: 1;
}

/* Help Content Area */
.help-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px 60px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Help Sections */
.help-section {
  max-width: 800px;
  margin: 0 auto 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--ui-chrome);
}

.help-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.help-section-header {
  margin-bottom: 28px;
}

.help-section-header h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.help-section-subtitle {
  font-size: 1rem;
  color: var(--fg-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Quick Start Grid */
.help-quickstart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.help-quickstart-card {
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.help-quickstart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .help-quickstart-card:hover,
[data-theme="oled"] .help-quickstart-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.help-quickstart-number {
  width: 36px;
  height: 36px;
  background: var(--button-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 auto 12px;
}

.help-quickstart-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px 0;
}

.help-quickstart-card p {
  font-size: 0.85rem;
  color: var(--fg-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Interface Demo */
.help-demo-container {
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
}

.help-demo-container h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 16px 0;
}

.help-interface-demo {
  background: var(--bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
  overflow: hidden;
}

.help-demo-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--ui-chrome);
  border-bottom: 1px solid var(--ui-chrome-hover);
}

.help-demo-tabs {
  display: flex;
  gap: 4px;
}

.help-demo-tab {
  padding: 6px 12px;
  font-size: 0.75rem;
  color: var(--fg-secondary);
  background: transparent;
  border-radius: 4px;
}

.help-demo-tab.active {
  background: var(--bg);
  color: var(--fg);
}

.help-demo-icons {
  display: flex;
  gap: 8px;
}

.help-demo-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--fg-secondary);
  background: var(--bg);
  border-radius: 4px;
}

.help-demo-reader {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  min-height: 160px;
}

.help-demo-gutter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--highlight);
  padding: 8px;
}

.help-demo-label {
  font-size: 0.65rem;
  color: var(--fg-tertiary);
  text-align: center;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.help-demo-gutter-right .help-demo-label {
  transform: none;
}

.help-demo-content {
  padding: 20px;
  position: relative;
}

.help-demo-verse-picker {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: var(--fg-tertiary);
  background: var(--highlight);
  padding: 4px 8px;
  border-radius: 4px;
}

.help-demo-text {
  font-family: var(--font-family-serif);
  font-size: 0.9rem;
  color: var(--fg);
  line-height: 1.8;
  margin-top: 16px;
}

.help-demo-versenum {
  font-size: 0.65rem;
  color: var(--verse-num);
  vertical-align: super;
  margin-right: 2px;
}

.help-demo-longpress-hint {
  font-size: 0.7rem;
  color: var(--button-primary);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--ui-chrome);
  text-align: center;
}

/* Feature Blocks */
.help-feature-block {
  margin-bottom: 24px;
}

.help-feature-block h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 12px 0;
}

.help-feature-block p {
  font-size: 0.95rem;
  color: var(--fg);
  line-height: 1.6;
  margin: 0 0 12px 0;
}

/* Help Phase 0 (2026-08-29): the real control, inline in the sentence that
   names it. The svg is copied from index.php / tts-dock.js and inherits
   currentColor, so it is correct in light, dark and OLED with no second asset.
   Sized in em so it tracks the reader's font-size setting. */
.help-glyph {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.15em;
  margin: 0 0.15em;
}

.help-glyph svg {
  width: 1.1em;
  height: 1.1em;
}

/* Screenshots for what a glyph cannot place: a whole panel, a sheet, or where
   a control sits. width/height are emitted server-side so the box is reserved
   before the lazy image lands (no layout shift); max-width keeps a 375px
   capture inside a narrower help pane. */
.help-shot {
  margin: 12px 0;
}

.help-shot-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}


.help-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-feature-list li {
  position: relative;
  padding: 8px 0 8px 24px;
  font-size: 0.95rem;
  color: var(--fg);
  line-height: 1.5;
  border-bottom: 1px solid var(--ui-chrome);
}

.help-feature-list li:last-child {
  border-bottom: none;
}

.help-feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  background: var(--button-primary);
  border-radius: 50%;
}

.help-feature-list li strong {
  color: var(--fg);
}

/* Ordered lists in feature blocks */
ol.help-feature-list {
  counter-reset: feature-counter;
}

ol.help-feature-list li {
  counter-increment: feature-counter;
}

ol.help-feature-list li::before {
  content: counter(feature-counter);
  width: 20px;
  height: 20px;
  background: var(--button-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  top: 10px;
}

/* Navigation Demo */
.help-navigation-demo {
  margin: 24px 0;
}

.help-nav-demo-screen {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--ui-chrome);
  border-radius: 12px;
  height: 240px;
  overflow: hidden;
}

.help-nav-zone {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--fg-secondary);
  font-size: 0.75rem;
  background: var(--highlight);
  transition: background 0.2s;
}

.help-nav-zone:hover {
  background: rgba(0, 102, 204, 0.1);
  color: var(--button-primary);
}

.help-nav-zone-left {
  left: 0;
  top: 40px;
  bottom: 0;
  width: 80px;
}

.help-nav-zone-right {
  right: 0;
  top: 40px;
  bottom: 0;
  width: 80px;
}

.help-nav-zone-top {
  top: 0;
  left: 80px;
  right: 80px;
  height: 40px;
  flex-direction: row;
  background: var(--ui-chrome);
}

.help-nav-demo-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem;
  color: var(--fg-tertiary);
}

/* Action Sheet Demo */
.help-action-sheet-demo {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.help-action-demo-trigger {
  font-family: var(--font-family-serif);
  font-size: 1rem;
  color: var(--fg);
  padding: 16px 24px;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
}

.help-action-demo-trigger sup {
  font-size: 0.7rem;
  color: var(--button-primary);
  cursor: pointer;
}

.help-action-demo-sheet {
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 16px 16px 0 0;
  padding: 16px;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .help-action-demo-sheet,
[data-theme="oled"] .help-action-demo-sheet {
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.help-action-demo-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-chrome);
  margin-bottom: 8px;
}

.help-action-demo-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  font-size: 0.9rem;
  color: var(--fg);
  border-radius: 8px;
  transition: background 0.15s;
}

.help-action-demo-option:hover {
  background: var(--highlight);
}

.help-action-demo-option svg {
  color: var(--fg-secondary);
}

/* Interlinear Demo */
.help-interlinear-demo {
  margin: 24px 0;
}

.help-interlinear-example {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  padding: 24px;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 12px;
}

.help-interlinear-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.help-il-english {
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg);
}

.help-il-translit {
  font-size: 0.8rem;
  color: var(--fg-secondary);
  font-style: italic;
}

.help-il-original {
  font-size: 1.1rem;
  color: var(--button-primary);
}

/* Tips and Highlights */
.help-tip {
  background: rgba(0, 102, 204, 0.08);
  border-left: 4px solid var(--button-primary);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
  font-size: 0.9rem;
  color: var(--fg);
  line-height: 1.5;
}

.help-tip strong {
  color: var(--button-primary);
}

[data-theme="dark"] .help-tip,
[data-theme="oled"] .help-tip {
  background: rgba(0, 102, 204, 0.15);
}

.help-highlight-box {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 102, 204, 0.05) 100%);
  border: 1px solid rgba(0, 102, 204, 0.2);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 20px 0;
}

.help-highlight-box h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--button-primary);
  margin: 0 0 8px 0;
}

.help-highlight-box p {
  font-size: 0.95rem;
  color: var(--fg);
  margin: 0;
  line-height: 1.5;
}

/* Instruction Steps */
.help-instruction-steps {
  margin: 16px 0;
}

.help-step {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ui-chrome);
}

.help-step:last-child {
  border-bottom: none;
}

.help-step-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: var(--button-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
}

.help-step-content {
  flex: 1;
  font-size: 0.95rem;
  color: var(--fg);
  line-height: 1.5;
}

.help-step-content strong {
  color: var(--fg);
}

/* Code Examples */
.help-code-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.help-code-example {
  background: var(--ui-chrome);
  border-radius: 8px;
  padding: 12px;
}

.help-code-example code {
  display: block;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.8rem;
  color: var(--fg);
  margin-bottom: 4px;
}

.help-code-example code:last-child {
  margin-bottom: 0;
}

.help-code-example.help-code-large {
  grid-column: 1 / -1;
}

.help-code-large code {
  margin-bottom: 8px;
}

/* Keyboard Shortcuts Grid */
.help-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.help-shortcut-group {
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 12px;
  padding: 20px;
}

.help-shortcut-group h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-chrome);
}

.help-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-chrome);
}

.help-shortcut:last-child {
  border-bottom: none;
}

.help-shortcut kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: var(--bg);
  border: 1px solid var(--ui-chrome-hover);
  border-radius: 4px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.75rem;
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.help-shortcut span {
  font-size: 0.85rem;
  color: var(--fg-secondary);
}

/* Inline KBD styling */
.help-feature-block kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--ui-chrome);
  border: 1px solid var(--ui-chrome-hover);
  border-radius: 3px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.7rem;
  color: var(--fg);
  margin: 0 2px;
  vertical-align: middle;
}

/* Help Footer */
.help-footer {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 40px;
}

.help-footer-content {
  text-align: center;
  padding: 32px;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 16px;
}

.help-footer-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px 0;
}

.help-footer-content > p {
  font-size: 0.95rem;
  color: var(--fg-secondary);
  margin: 0 0 24px 0;
}

.help-footer-info {
  padding-top: 20px;
  border-top: 1px solid var(--ui-chrome);
}

.help-footer-info p {
  font-size: 0.85rem;
  color: var(--fg-secondary);
  margin: 4px 0;
}

.help-copyright {
  font-size: 0.75rem !important;
  color: var(--fg-tertiary) !important;
  margin-top: 12px !important;
}

/* Mobile Responsive */
@media (max-width: 900px) {
  .help-wrapper.active {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .help-container {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .help-nav {
    width: 100%;
    min-width: 100%;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--ui-chrome);
    flex-shrink: 0;
  }

  .help-nav-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .help-nav-list li {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .help-nav-link {
    padding: 8px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .help-nav-link svg {
    display: none;
  }

  .help-content {
    padding: 20px 16px 40px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .help-section-header h2 {
    font-size: 1.4rem;
  }

  .help-quickstart-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .help-quickstart-card {
    padding: 16px;
  }

  .help-demo-reader {
    grid-template-columns: 60px 1fr 60px;
  }

  .help-demo-label {
    font-size: 0.55rem;
  }

  .help-shortcuts-grid {
    grid-template-columns: 1fr;
  }

  .help-interlinear-example {
    gap: 16px;
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .help-quickstart-grid {
    grid-template-columns: 1fr;
  }

  .help-nav-header {
    display: none;
  }

  .help-code-examples {
    grid-template-columns: 1fr;
  }

  .help-action-sheet-demo {
    width: 100%;
  }

  .help-action-demo-sheet {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   HELP REWRITE (2026-07) - additions only.
   The layout rules above are load-bearing and were fixed deliberately:
   .help-container must stay flex (no max-width), and .help-wrapper.active must
   NOT get a height. Nothing below touches either.
--------------------------------------------------------------------------- */

/* Screen-reader-only label */
.help-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Zero-size anchors that keep the old help-* deep links alive */
.help-anchor {
  display: block;
  height: 0;
  overflow: hidden;
}

/* Search / filter box in the help sidebar */
.help-search {
  padding: 12px 12px 0;
  flex-shrink: 0;
}

.help-search-field {
  position: relative;
  display: block;
}

.help-search-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 36px 10px 12px;
  font-family: inherit;
  /* 16px keeps iOS Safari from zooming the whole page on focus */
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--ui-chrome-hover);
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
}

.help-search-field input::-webkit-search-cancel-button,
.help-search-field input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.help-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--fg-secondary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.help-search-clear:hover {
  background: var(--highlight);
  color: var(--fg);
}

.help-search-status {
  max-width: 800px;
  margin: 0 auto 28px;
  padding: 14px 16px;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--fg-secondary);
}

.help-link-btn {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--button-primary);
  text-decoration: underline;
  cursor: pointer;
}

/* Body copy inside a section */
.help-block {
  margin: 0 0 32px;
}

.help-block:last-child {
  margin-bottom: 0;
}

.help-block p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--fg);
  margin: 0 0 12px;
}

.help-block p:last-child {
  margin-bottom: 0;
}

.help-section h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
  margin: 20px 0 6px;
}

.help-block kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--ui-chrome);
  border: 1px solid var(--ui-chrome-hover);
  border-radius: 3px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.75rem;
  color: var(--fg);
  margin: 0 2px;
  vertical-align: middle;
}

/* "Where is this?" line */
.help-where {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin: 0 0 14px;
  padding: 9px 12px;
  background: var(--ui-chrome);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--fg-secondary);
}

.help-where strong {
  color: var(--fg);
  font-weight: 600;
}

/* Inline gesture diagrams (drawn in code - currentColor, so every theme works) */
.help-gestures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 18px 0 20px;
}

.help-gesture {
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 12px;
  padding: 14px;
  color: var(--fg);
}

.help-gesture-art {
  display: block;
  width: 100%;
  height: auto;
  color: var(--fg);
}

.help-gesture-caption {
  margin: 12px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fg-secondary);
}

.help-gesture-caption strong {
  color: var(--fg);
}

/* Symptom -> what to do */
.help-fixes {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-fixes li {
  padding: 14px 0;
  border-bottom: 1px solid var(--ui-chrome);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-secondary);
}

.help-fixes li:last-child {
  border-bottom: none;
}

.help-fixes b {
  display: block;
  color: var(--fg);
  font-weight: 600;
  margin-bottom: 4px;
}

/* What's new */
.help-news {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.help-news li {
  position: relative;
  padding: 9px 0 9px 20px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg);
}

.help-news li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--button-primary);
}

.help-news-date {
  margin-top: 28px;
}

/* Collapsible extras - native <details>, so keyboard and screen readers work */
.help-block details {
  border: 1px solid var(--ui-chrome);
  border-radius: 10px;
  background: var(--overlay-bg);
  padding: 0 14px;
  margin: 12px 0;
}

.help-block details[open] {
  padding-bottom: 12px;
}

.help-block summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
}

.help-block details p {
  margin-bottom: 0;
  color: var(--fg-secondary);
}

/* Focus states you can actually see */
.help-nav-link:focus-visible,
.help-search-field input:focus-visible,
.help-search-clear:focus-visible,
.help-block summary:focus-visible,
.help-content a:focus-visible,
.help-content button:focus-visible {
  outline: 2px solid var(--button-primary);
  outline-offset: 2px;
}

.help-section-header h2:focus {
  outline: none;
}

@media (max-width: 900px) {
  /* The audience set their Bible to 24px for a reason - the help must not be
     smaller than the app it explains. */
  .help-nav-link {
    font-size: 0.875rem;
    padding: 10px 14px;
  }

  .help-search {
    padding: 10px 10px 0;
  }

  .help-block p,
  .help-fixes li,
  .help-news li,
  .help-feature-list li {
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  .help-gestures {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  /* Help opened inside the desktop right-hand panel. That panel is only about
     half the window wide, so the 280px sidebar left a phone-width reading
     column on a big monitor. Stack it the way the phone layout does and give
     the text the whole panel. Scoped to .desktop-split, so the full-screen
     help layout above is untouched. */
  .app-content.desktop-split .help-wrapper .help-container {
    flex-direction: column;
  }

  .app-content.desktop-split .help-wrapper .help-nav {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--ui-chrome);
    flex-shrink: 0;
  }

  .app-content.desktop-split .help-wrapper .help-nav-header {
    display: none;
  }

  .app-content.desktop-split .help-wrapper .help-nav-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .app-content.desktop-split .help-wrapper .help-nav-list li {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .app-content.desktop-split .help-wrapper .help-nav-link {
    white-space: nowrap;
    padding: 8px 12px;
  }

  .app-content.desktop-split .help-wrapper .help-nav-link svg {
    display: none;
  }

  .app-content.desktop-split .help-wrapper .help-content {
    padding: 24px 24px 48px;
  }
}

/* TTS Button Styles - Elegant ghost button design */
.tts-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid var(--text-tertiary);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
}

.tts-button:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.tts-button:active {
  transform: scale(0.95);
}

.tts-button.playing {
  border-color: var(--accent-color, #8b7355);
  background: var(--accent-color, #8b7355);
  color: #fff;
  animation: tts-pulse 2s ease-in-out infinite;
}

@keyframes tts-pulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(139, 115, 85, 0.4);
  }
  50% { 
    box-shadow: 0 0 0 6px rgba(139, 115, 85, 0);
  }
}

.tts-icon {
  pointer-events: none;
  width: 16px;
  height: 16px;
}

.overlay-header-right .tts-button {
  margin-right: 0;
}

.overlay-header-right .copy-btn {
  margin-right: 0;
}

/* Override for overlay context */
.tts-button.overlay-action-btn {
  width: 36px;
  height: 36px;
}

.tts-button.overlay-action-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* Dark mode adjustments */
.dark .tts-button.playing,
[data-theme="dark"] .tts-button.playing {
  border-color: var(--accent-color, #a89070);
  background: var(--accent-color, #a89070);
}

/* OLED mode adjustments */
[data-theme="oled"] .tts-button {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="oled"] .tts-button:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="oled"] .tts-button.playing {
  border-color: var(--accent-color, #a89070);
  background: var(--accent-color, #a89070);
  color: #000;
}

/* Copy Button Styles - Matches TTS button design */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--ui-chrome-border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none;
}

.copy-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.copy-btn:active {
  transform: scale(0.95);
}

.copy-btn .check-icon {
  color: var(--accent-color, #8b7355);
}

/* Dark mode adjustments */
[data-theme="dark"] .copy-btn .check-icon,
.dark .copy-btn .check-icon {
  color: var(--accent-color, #a89070);
}

/* OLED mode adjustments */
[data-theme="oled"] .copy-btn {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="oled"] .copy-btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="oled"] .copy-btn .check-icon {
  color: var(--accent-color, #a89070);
}

/* Bible Reader TTS Button (now integrated into verse picker bar, see .verse-picker-tts) */

/* Re-enable keyboard focus rings on inputs whose mouse-click ring is
   suppressed above (placed last so it wins equal-specificity ties). */
.settings-slider input[type="range"]:focus-visible,
.toggle-checkbox:focus-visible,
.settings-tts-select:focus-visible,
.nav-search input:focus-visible,
.timeline-search-input:focus-visible,
.bookmark-select:focus-visible,
.concordance-search-input-wrapper input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Honest failure states (Phase 5-6 deploy 6) */
.load-error {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-4) 0;
  text-align: center;
  color: var(--fg-secondary);
  font-family: var(--font-family-sans);
}

.load-error h3 {
  font-size: var(--text-lg);
  color: var(--fg);
  margin-bottom: var(--space-2);
}

.retry-btn {
  margin-top: var(--space-3);
  min-height: 40px;
  padding: var(--space-2) var(--space-6);
  background: var(--accent-bg);
  color: var(--accent-fg);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  cursor: pointer;
}

/* Opt-in selectable scripture (Phase 5-6 deploy 10, owner-approved).
   Verse numbers stay unselectable so their long-press menu keeps priority. */
html.text-selectable .reader-content,
html.text-selectable .reader-content .w {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

html.text-selectable .reader-content .verse-num {
  -webkit-user-select: none;
  user-select: none;
}

/* Instant "Go to John 3:16" row in Bible search (Phase 7.5) */
.bible-search-goto .bible-search-result-ref {
  color: var(--accent);
  font-weight: 600;
}

/* '?' keyboard shortcuts overlay (Phase 7.6). z-index 3200: above the
   standard overlay tier (3000/3100), below the action sheets (4000). */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--overlay-backdrop);
  padding: var(--space-4);
}

.shortcuts-overlay.active {
  display: flex;
}

.shortcuts-card {
  width: 100%;
  max-width: 420px;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  font-family: var(--font-family-sans);
}

.shortcuts-card h3 {
  font-size: var(--text-lg);
  color: var(--fg);
  margin-bottom: var(--space-4);
}

.shortcuts-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-4);
  align-items: center;
}

.shortcuts-grid kbd {
  justify-self: start;
  background: var(--ui-chrome);
  border: 1px solid var(--ui-chrome-border);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-family: var(--font-family-sans);
  font-size: 0.8125rem;
  color: var(--fg);
  white-space: nowrap;
}

.shortcuts-grid span {
  font-size: var(--text-sm);
  color: var(--fg-secondary);
}

/* ---------------------------------------------------------------------------
   Print stylesheet (Phase 7.7): a chapter prints like a page from a book -
   clean black-on-white scripture, no app chrome, in every screen theme.
   notes.css loads after this file, so !important is used throughout.
   LICENSE NOTE: .lsb-copyright is deliberately kept visible - the Lockman
   copyright block must accompany printed LSB text. Do not hide it.
--------------------------------------------------------------------------- */
@media print {
  .app-topbar,
  .gutter-zone,
  #gutter-top-center,
  .loading-indicator,
  .toast-message,
  .reading-progress,
  .action-sheet,
  .overlay-backdrop,
  .overlay,
  .settings-overlay,
  #desktop-right-panel,
  .notes-wrapper,
  .bookmarks-wrapper,
  .help-wrapper,
  .bible-search-overlay,
  .cross-refs-overlay,
  .bible-sidecar,
  .tts-bar,
  .shortcuts-overlay,
  .chapter-nav-card,
  .auth-modal-backdrop,
  .command-palette-backdrop,
  .editor-toast {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .app-content,
  .reader-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  .reader {
    padding: 1rem 0 !important;
    min-height: auto !important;
  }

  .reader-content {
    max-width: 42em;
    margin: 0 auto;
  }

  .verse-num {
    color: #666 !important;
  }

  .w.has-study {
    text-decoration: none !important;
    border-bottom: none !important;
  }

  .lsb-copyright {
    display: block !important;
    font-size: 9pt;
    color: #444;
    page-break-inside: avoid;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }
}

/* Overlays open below a hidden header; keep the header in place while any
   overlay is up so a strip of Bible text cannot show through the gap. */
body:has(.overlay.active, .overlay-backdrop.active, .word-overlay.active, .cross-refs-overlay.active) .app-topbar {
  transform: none;
}

/* === Concordance word insights (skyline, chips, compare) ================= */
.conc-insights {
  margin: 4px 16px 14px;
  padding: 12px;
  border: 1px solid var(--ui-chrome-border);
  border-radius: 10px;
  background: var(--ui-chrome);
  font-family: var(--font-family-sans);
}

.conc-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.conc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--ui-chrome-border);
  border-radius: 13px;
  background: var(--overlay-bg, var(--bg));
  color: var(--fg-secondary);
  font-size: 0.78rem;
  font-family: inherit;
  line-height: 1.3;
}

button.conc-chip { cursor: pointer; }
button.conc-chip:hover { background: var(--highlight, rgba(128, 128, 128, 0.12)); }

.conc-chip-rarity { font-weight: 600; color: var(--fg); }
.conc-chip-rarity.rare {
  border-color: var(--accent, #2b6cb0);
  color: var(--accent, #2b6cb0);
}

.conc-skyline {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 74px;
  margin: 12px 0 2px;
}

.conc-sky-slot {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 1px;
}

.conc-sky-slot.nt-start {
  border-left: 1px dashed var(--fg-tertiary, #999);
  padding-left: 2px;
  margin-left: 1px;
}

.conc-sky-bar {
  flex: 1;
  min-width: 0;
  border-radius: 2px 2px 0 0;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.conc-sky-bar:hover { filter: brightness(1.25); }
.conc-sky-bar.empty { cursor: default; }

.conc-sky-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--fg-tertiary, #999);
  margin-bottom: 10px;
}

.conc-actions { margin-top: 2px; }

.conc-legend { color: var(--fg); }
.conc-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.conc-compare-remove {
  border: none;
  background: none;
  color: var(--fg-tertiary, #999);
  font-size: 0.95rem;
  line-height: 1;
  margin-left: 6px;
  padding: 0 2px;
  border-left: 1px solid var(--ui-chrome-border);
  cursor: pointer;
}
.conc-compare-remove:hover { color: var(--fg); }

.conc-occ-flash {
  animation: concOccFlash 1.5s ease;
}
@keyframes concOccFlash {
  0%, 60% { background: var(--highlight, rgba(43, 108, 176, 0.18)); }
}

/* === Timeline axis (wow build) =========================================== */
.timeline-axis-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ui-chrome);
  font-family: var(--font-family-sans);
  /* Owner report 2026-08-17: the bar lives INSIDE the scrolling list
     container, and opening the timeline auto-scrolls to the current
     passage — so the List/Axis chips scrolled off the top and were
     "usually hidden". Pin the bar to the top of the scroll area. The
     solid background stops list rows showing through while stuck. */
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}

.timeline-view-toggle, .timeline-axis-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.timeline-axis-chip {
  padding: 6px 12px;
  border: 1px solid var(--ui-chrome-border);
  border-radius: 15px;
  background: transparent;
  color: var(--fg-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  min-height: 30px;
}
.timeline-axis-chip:hover { background: var(--highlight, rgba(128,128,128,0.1)); }
.timeline-axis-chip.active {
  background: var(--accent, #2b6cb0);
  border-color: var(--accent, #2b6cb0);
  color: #fff;
}

.timeline-axis-wrap {
  position: relative;
  flex: 1;
  min-height: 300px;
  overflow: hidden;
}

#timeline-axis-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
#timeline-axis-canvas:active { cursor: grabbing; }

.timeline-axis-popup {
  position: absolute;
  z-index: 12;
  max-height: 60%;
  overflow-y: auto;
  background: var(--overlay-bg, var(--bg, #fff));
  border: 1px solid var(--ui-chrome-border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  font-family: var(--font-family-sans);
  font-size: 0.85rem;
  padding: 6px 0;
}
.tl-pop-head {
  padding: 6px 12px 8px;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid var(--ui-chrome);
}
.tl-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--ui-chrome);
}
.tl-pop-row:hover { background: var(--highlight, rgba(128,128,128,0.08)); }
.tl-pop-summary { flex: 1; min-width: 0; color: var(--fg); line-height: 1.35; }
.tl-pop-ref { flex: none; color: var(--fg-tertiary, #999); font-size: 0.75rem; white-space: nowrap; }
.tl-pop-bible {
  flex: none;
  border: 1px solid var(--ui-chrome-border);
  background: transparent;
  color: var(--accent, #2b6cb0);
  border-radius: 7px;
  min-width: 30px;
  min-height: 28px;
  cursor: pointer;
  font-size: 0.95rem;
}
.tl-pop-bible:hover { background: var(--highlight, rgba(128,128,128,0.1)); }
.tl-pop-more {
  padding: 7px 12px;
  color: var(--fg-tertiary, #999);
  font-size: 0.78rem;
}
.tl-pop-chrono {
  display: block;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: var(--accent, #2b6cb0);
  color: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.timeline-play-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 11;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: min(520px, calc(100% - 24px));
  padding: 10px 16px;
  background: var(--overlay-bg, var(--bg, #fff));
  border: 1px solid var(--ui-chrome-border);
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  font-family: var(--font-family-sans);
  pointer-events: none;
}
.tl-play-date { font-size: 0.72rem; font-weight: 700; color: var(--accent, #2b6cb0); }
.tl-play-summary { font-size: 0.9rem; color: var(--fg); line-height: 1.4; }
.tl-play-summary i { color: var(--fg-tertiary, #999); font-style: normal; font-size: 0.78rem; }

.chrono-chip {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Above the TTS listening dock's zone, below the overlay tier. */
  bottom: calc(122px + env(safe-area-inset-bottom));
  z-index: 2900;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--overlay-bg, var(--bg, #fff));
  border: 1px solid var(--accent, #2b6cb0);
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  font-family: var(--font-family-sans);
  font-size: 0.82rem;
  color: var(--fg);
  cursor: pointer;
  max-width: calc(100% - 32px);
}
.chrono-chip b { color: var(--accent, #2b6cb0); }
.chrono-chip-x {
  border: none;
  background: none;
  color: var(--fg-tertiary, #999);
  font-size: 1.05rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}

/* ===== Margin notes (Notes Phase 1) ===================================== */
/* The soft dot at the end of a verse your own notes mention. Injected by
   app.js VerseNotesDots; data-note-verse (never data-verse). */
.verse-note-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color, #8b7355) 28%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-color, #8b7355) 55%, transparent);
  color: var(--accent-color, #8b7355);
  font-family: var(--font-family-sans);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.verse-note-dot:hover,
.verse-note-dot:focus-visible {
  background: color-mix(in srgb, var(--accent-color, #8b7355) 45%, transparent);
}
/* Settings toggle "Show My Notes Beside Verses" off */
.margin-notes-off .verse-note-dot { display: none; }

.verse-notes-popover {
  position: fixed;
  z-index: 2500;
  max-height: min(50vh, 340px);
  overflow-y: auto;
  background: var(--overlay-bg, var(--bg, #fff));
  border: 1px solid var(--ui-chrome-border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
  font-family: var(--font-family-sans);
  padding: 4px 0 6px;
}
.vnp-title {
  padding: 8px 14px 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg-secondary, var(--fg));
  border-bottom: 1px solid var(--ui-chrome);
}
.vnp-row {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--ui-chrome);
}
.vnp-row:last-child { border-bottom: none; }
.vnp-row:hover, .vnp-row:focus-visible {
  background: color-mix(in srgb, var(--accent-color, #8b7355) 10%, transparent);
}
.vnp-note-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fg);
}
.vnp-snippet {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--fg-secondary, var(--fg));
}
.vnp-date {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  color: var(--fg-tertiary, #999);
}

/* ---------------------------------------------------------------------------
   Under-verse cross references (Settings → Cross References Under Verses)

   A compact wrapped line of reference labels beneath each verse, plus one
   shared fixed-position tooltip (#verse-xref-tip) that shows the target
   passage's text and the explanation on hover/tap. Injected by the
   VerseCrossRefs module in app.js; nothing renders when the toggle is off.
--------------------------------------------------------------------------- */

.verse-xrefs {
  margin: 0.1rem 0 0.9rem;
  font-family: var(--font-family-sans);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--fg-tertiary);
}

.verse-xref {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--fg-secondary);
  cursor: pointer;
  border-radius: 3px;
}

.verse-xref:hover,
.verse-xref:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* Comma-separated like a printed reference chain */
.verse-xref:not(:last-child)::after {
  content: ',';
  color: var(--fg-tertiary);
  margin-right: 0.35em;
}

/* The quiet line shows the top few; heavy verses fold the rest behind
   "+K more" (no global .hidden helper on index.php — rule lives here). */
.verse-xref-overflow.hidden {
  display: none;
}

.verse-xref-more {
  color: var(--accent);
  font-style: italic;
}

#verse-xref-tip {
  position: fixed;
  z-index: 4000;
  display: none;
  max-width: min(360px, calc(100vw - 16px));
  padding: 0.6rem 0.75rem;
  background: var(--overlay-bg);
  color: var(--fg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  font-family: var(--font-family-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  pointer-events: none;   /* the tip must never trap the mouse */
}

#verse-xref-tip.visible {
  display: block;
}

.xref-tip-ref {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.xref-tip-text {
  margin-bottom: 0.35rem;
}

.xref-tip-expl {
  font-style: italic;
  color: var(--fg-secondary);
}

.xref-tip-loading {
  color: var(--fg-tertiary);
}

/* ---------------------------------------------------------------------------
   "Add to Canvas" chooser (verse action sheet → pick a canvas)
--------------------------------------------------------------------------- */

#canvas-chooser {
  position: fixed;
  left: 50%;
  bottom: max(2rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 4100;   /* above action sheets (4000), below toasts */
  width: min(340px, calc(100vw - 24px));
  padding: 6px;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  font-family: var(--font-family-sans);
}

.canvas-chooser-title {
  padding: 8px 12px 6px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-tertiary);
}

.canvas-chooser-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

.canvas-chooser-item:hover {
  background: var(--highlight);
}

.canvas-chooser-meta {
  font-size: 0.75rem;
  color: var(--fg-tertiary);
}

.canvas-chooser-new {
  color: var(--accent);
}

.canvas-chooser-cancel {
  color: var(--fg-secondary);
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Local-first notes mode (signed out; notes live on this device)
--------------------------------------------------------------------------- */

/* One canvas per device, no folders locally — hide their create buttons */
.local-notes-mode #btn-new-folder,
.local-notes-mode #canvas-new-btn {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Mouse-class word affordance: on devices with a real pointer, words that
   have a study get the classic quiet cue — a pointer cursor and a faint
   dotted underline on hover. No icons, no toolbars.
--------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .reader-content .w.has-study,
  .reader-content .greek-word,
  .reader-content .aligned-segment,
  .reader-content .interlinear-word,
  .reader-content .reverse-interlinear-word {
    cursor: pointer;
  }

  .reader-content .w.has-study:hover {
    text-decoration: underline dotted;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
  }
}

/* ==== Recordings library (polish-spec Deploy C) ========================== */

/* C-2: "Audio Available" pill — warm audio accent, help-tip tone. A span,
   never a button (no touch trap). */
.audio-available-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color) 32%, transparent);
}
.audio-available-pill[hidden] { display: none; }

.study-count-chip { color: var(--fg-secondary); font-weight: 400; }

/* C-3: the shelf overlay reuses the standard .overlay shell. */
.recordings-overlay { display: flex; flex-direction: column; }
.recordings-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
}
.rec-empty {
  text-align: center;
  color: var(--fg-secondary);
  padding: 48px 24px;
}
.rec-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin: 8px 4px 6px;
}
.rec-book-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 4px 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ui-chrome-border);
  font-weight: 600;
}
.rec-playall {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-color);
  background: none;
  border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 32px;
  cursor: pointer;
}
.rec-coverage {
  font-size: 0.8rem;
  color: var(--fg-secondary);
  margin: 2px 4px 0;
}
.rec-missing { margin: 4px 4px 8px; font-size: 0.8rem; color: var(--fg-secondary); }
.rec-missing summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.rec-missing-list { padding: 6px 0 4px 12px; line-height: 1.7; }
.rec-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-chrome-border) 55%, transparent);
}
.rec-row:last-child { border-bottom: none; }
.rec-open, .rec-continue-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-align: left;
  background: none;
  border: none;
  color: var(--fg);
  font: inherit;
  padding: 10px 4px;
  min-height: 56px;
  cursor: pointer;
}
.rec-continue-row {
  display: flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  padding: 4px 6px 4px 14px;
  margin-bottom: 8px;
}
.rec-continue-main {
  flex-direction: row;
  align-items: center;
  padding: 6px 0;
}
.rec-continue-main .rec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rec-dismiss {
  flex: none;
  width: 40px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fg-secondary);
  font-size: 1.05rem;
  cursor: pointer;
  border-radius: 8px;
}
.rec-dismiss:hover { background: var(--highlight, rgba(128, 128, 128, 0.1)); }
.rec-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.rec-title.rec-raw { font-family: monospace; font-size: 0.85rem; }
.rec-sub { font-size: 0.8rem; color: var(--fg-secondary); display: block; }
.rec-resume { color: var(--accent-color); font-weight: 600; }
.rec-play {
  flex: none;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--accent-color);
  font-size: 1.1rem;
  cursor: pointer;
  min-height: 56px;
}
.rec-play-ico { color: var(--accent-color); flex: none; margin-left: 10px; }

/* C-7: shared-timestamp banner at the top of a sermon/commentary overlay. */
.audio-share-banner { margin: 0 0 14px; }
.audio-share-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  background: var(--accent-color);
  color: #fff;
}

/* Review fix: on narrow phones the overlay header cannot fit the pill —
   the retitled "Play the audio" button carries the message there. */
@media (max-width: 430px) {
  .overlay-header-right .audio-available-pill { display: none; }
}

/* Recommended links (backlog #6): admin-curated section appended below
   explanation/commentary content in the overlay. Chrome, not sermon text —
   the editor strips .recommended-links before any save. */
.recommended-links {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-family);
}
.recommended-links-title {
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-secondary, var(--text-primary));
  margin: 0 0 0.6rem 0;
}
.recommended-links-list {
  margin: 0;
  padding-left: 1.2rem;
}
.recommended-links-list li {
  /* Multi-line rows (preacher — passage · title (date)) need clear air
     between entries or they read as one block (owner 5812ca6e). */
  margin-bottom: 1.1rem;
  line-height: 1.45;
}
.recommended-links-list li:last-child { margin-bottom: 0.2rem; }
.recommended-links-empty {
  color: var(--fg-secondary, var(--text-primary));
  font-style: italic;
  margin: 0 0 0.5rem 0;
}
.recommended-links-hint {
  font-size: 0.85em;
  color: var(--fg-secondary, var(--text-primary));
  margin: 0 0 0.4rem 0;
}
.recommended-links-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family-sans, sans-serif);
  font-size: 0.9em;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--overlay-bg, transparent);
  color: var(--text-primary);
}
.recommended-links-actions { margin-top: 0.5rem; }
.recommended-links-edit,
.recommended-links-save,
.recommended-links-cancel {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font-family-sans, sans-serif);
  font-size: 0.85em;
}