/* ==========================================================================
   UECF.NET Recovery Version Bible
   Same reading-app stylesheet as the Study Bible and Matthew Henry commentary:
   navy / gold / cream, Fraunces + Source Sans 3 + Merriweather.
   ==========================================================================
   UECF.NET Study Bible — NKJV Study Bible
   Reading-app stylesheet. Follows UECF.NET's site palette (navy / gold /
   cream / maroon / teal, Fraunces + Source Sans 3) and the reading-app
   conventions already established by /parallel-bible/ and /books/study-bible-te/
   (sticky toolbar, dark/light theme via [data-theme], font-size stepping,
   printable, verse-anchored deep links).
   ========================================================================== */

:root {
  /* UECF.NET brand tokens (from public_html/index.html) */
  --ink: #101B31;
  --ink-soft: #2C3E60;
  --gold: #C79A3D;
  --gold-soft: #E4C685;
  --maroon: #8B3A42;
  --teal: #2F5D62;

  /* Reading surface (light) */
  --paper: #FAF6EC;
  --paper-2: #F0E7D5;
  --paper-3: #E9DFC8;
  --text: #201A10;
  --text-2: #4A4239;
  --text-3: #7A6F61;
  --line: #E2D8C0;
  --line-2: #CFC2A0;
  --note-bg: #F3ECDA;
  --note-border: var(--teal);
  --xref-bg: #F7EFE0;
  --focus: #1d4ed8;
  --shadow: 0 1px 2px rgba(16,27,49,.08), 0 8px 24px rgba(16,27,49,.10);
  --shadow-lg: 0 4px 12px rgba(16,27,49,.14), 0 24px 56px rgba(16,27,49,.20);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-scripture: 'Merriweather', 'Noto Serif', Georgia, 'Times New Roman', serif;
  --fs: 1.0625rem;
  --wrap: 1280px;
  --radius: 10px;
  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #12100C;
  --paper-2: #1A1712;
  --paper-3: #241F17;
  --text: #EFE8D8;
  --text-2: #C9BFA9;
  --text-3: #978C77;
  --line: #35301F;
  --line-2: #443C28;
  --note-bg: #1D2620;
  --xref-bg: #211C13;
  --gold-soft: #E8C765;
  --ink: #0B1220;
  --ink-soft: #182238;
  --focus: #93c5fd;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.55), 0 24px 56px rgba(0,0,0,.55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 7.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }
a { color: var(--maroon); }
[data-theme="dark"] a { color: var(--gold-soft); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: 10px 18px; z-index: 300; font-weight: 700; border-radius: 0 0 6px 0; }
.skip-link:focus { left: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .4em; line-height: 1.2; color: var(--text); }
button { font: inherit; }

/* ---------------------------------------------------------------- header */
.sb-header { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 200; border-bottom: 3px solid var(--gold); }
.sb-header-inner { display: flex; align-items: center; gap: 16px; justify-content: space-between; max-width: var(--wrap); margin: 0 auto; padding: 8px 16px; }
.sb-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.sb-brand:hover { text-decoration: none; }
.sb-brand img { width: 38px; height: 38px; flex: none; }
.sb-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.sb-brand-text strong { font-family: var(--font-display); font-size: 1.05rem; }
.sb-brand-text small { color: var(--gold-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.sb-header-nav { display: flex; align-items: center; gap: 4px; font-size: .88rem; }
.sb-header-nav a { color: #fff; padding: 8px 10px; border-radius: 5px; }
.sb-header-nav a:hover { background: rgba(228,198,133,.15); color: var(--gold-soft); text-decoration: none; }

/* ------------------------------------------------------- mobile app bar
   Replaces .sb-header on narrow viewports (see the 760px breakpoint below):
   a single Home icon instead of the full brand row, the current chapter
   title, and a "More" menu for the sister Bible editions -- app-shell
   chrome instead of a website header, so the reading area gets the space. */
.sb-mobile-bar { display: none; }
.sb-mobile-home {
  flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff; border-radius: 8px; text-decoration: none;
}
.sb-mobile-home:hover { background: rgba(228,198,133,.15); text-decoration: none; }
.sb-mobile-title {
  flex: 1; min-width: 0; text-align: center; font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-mobile-more {
  flex: none; width: 36px; height: 36px; border-radius: 8px; border: none; background: none;
  color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.sb-mobile-more:hover, .sb-mobile-more[aria-expanded="true"] { background: rgba(228,198,133,.15); color: var(--gold-soft); }

/* --------------------------------------------------------------- toolbar */
.sb-toolbar { background: var(--paper-2); border-bottom: 1px solid var(--line); position: sticky; top: 55px; z-index: 190; }
.sb-toolbar-inner { max-width: var(--wrap); margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sb-select, .sb-input {
  font-family: var(--font-body); font-size: .9rem; color: var(--text);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 7px;
  padding: 8px 10px; min-height: 40px;
}
.sb-select:focus, .sb-input:focus { border-color: var(--gold); }
.sb-nav-btns { display: flex; gap: 4px; }
.sb-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--text); border-radius: 7px; padding: 8px 12px;
  cursor: pointer; min-height: 40px; min-width: 40px; justify-content: center;
}
.sb-btn:hover { border-color: var(--gold); color: var(--maroon); }
.sb-btn[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.sb-search-wrap { position: relative; flex: 1 1 220px; min-width: 180px; }
.sb-search-wrap input, .sb-search-wrap .sb-search-btn { width: 100%; }
.sb-search-btn { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-2); text-align: left; }
.sb-search-btn kbd { margin-left: auto; font-size: .7rem; border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; font-family: var(--font-body); }
.sb-search-icon { flex: none; }
.sb-toolbar-jump { display: flex; align-items: center; gap: 6px; }
.sb-mobile-only { display: none; }
.sb-tool-group { display: flex; gap: 4px; margin-left: auto; }
.sb-progress { height: 3px; background: var(--paper-3); }
.sb-progress span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .1s linear; }

/* ----------------------------------------------------------------- layout */
.sb-layout { max-width: var(--wrap); margin: 0 auto; padding: 20px 16px 80px; display: grid; grid-template-columns: 260px minmax(0,1fr) 300px; gap: 24px; align-items: start; }
.sb-side { position: sticky; top: 116px; max-height: calc(100vh - 132px); overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.sb-side h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 10px; }
.sb-book-list { display: grid; gap: 2px; }
.sb-book-list a, .sb-book-list button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 7px 8px; border-radius: 6px; color: var(--text-2); font-size: .92rem; cursor: pointer; }
.sb-book-list a:hover, .sb-book-list button:hover { background: var(--paper-2); text-decoration: none; color: var(--text); }
.sb-book-list a[aria-current="true"], .sb-book-list button[aria-current="true"] { background: var(--gold-soft); color: var(--ink); font-weight: 600; }
.sb-testament-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--maroon); margin: 12px 0 4px; }
.sb-testament-label:first-child { margin-top: 0; }
.sb-chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px,1fr)); gap: 4px; margin-top: 8px; }
.sb-chapter-grid a { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 6px; background: var(--paper-2); color: var(--text-2); font-size: .85rem; border: 1px solid var(--line); }
.sb-chapter-grid a:hover { border-color: var(--gold); color: var(--maroon); text-decoration: none; }
.sb-chapter-grid a[aria-current="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 700; }

.sb-main { min-width: 0; }
.sb-chapter-head { text-align: center; padding-bottom: 12px; border-bottom: 2px solid var(--line); margin-bottom: 18px; }
.sb-chapter-head .kicker { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); font-weight: 700; }
.sb-chapter-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: .2em 0; }
.sb-chapter-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; }
.sb-chapter-nav .sb-btn { flex: none; }

.sb-scripture { font-family: var(--font-scripture); font-size: 1.08em; line-height: 1.85; color: var(--text); }
.sb-scripture.reading-mode { max-width: 46rem; margin: 0 auto; }
.sb-verse { display: block; margin-bottom: .15em; scroll-margin-top: 8rem; border-radius: 6px; }
.sb-verse:target, .sb-verse.sb-verse-highlight { background: var(--gold-soft); animation: sb-flash 2.4s ease-out; }
[data-theme="dark"] .sb-verse:target, [data-theme="dark"] .sb-verse.sb-verse-highlight { background: #4a3a12; }
@keyframes sb-flash { from { background: var(--gold-soft); } to { background: transparent; } }
.sb-vnum { font-family: var(--font-body); font-weight: 700; color: var(--maroon); font-size: .78em; vertical-align: super; margin-right: .15em; cursor: pointer; }
[data-theme="dark"] .sb-vnum { color: var(--gold-soft); }
.sb-vtext { }
.sb-section-heading { font-family: var(--font-display); font-weight: 600; color: var(--teal); font-size: 1.05em; margin: 1.4em 0 .5em; }
.sb-section-heading:first-child { margin-top: 0; }
.sb-superscription { font-style: italic; color: var(--ink-soft, #6b6258); font-size: .92em; margin: 0 0 1em; }
.sb-note-marker { display: inline-flex; align-items: center; justify-content: center; width: 1.05em; height: 1.05em; font-size: .65em; border-radius: 50%; background: var(--teal); color: #fff; vertical-align: super; margin-left: .1em; cursor: pointer; text-decoration: none; }
.sb-note-marker:hover { background: var(--maroon); text-decoration: none; }

/* study notes, distinctly styled from Scripture text */
.sb-note {
  font-family: var(--font-body); font-size: .92em; line-height: 1.55; color: var(--text-2);
  background: var(--note-bg); border-left: 4px solid var(--note-border);
  border-radius: 0 8px 8px 0; padding: 10px 14px; margin: .4em 0 1em;
}
.sb-note .sb-note-ref { font-weight: 700; color: var(--teal); margin-right: .4em; }
[data-theme="dark"] .sb-note .sb-note-ref { color: var(--gold-soft); }
.sb-note-label { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--teal); background: rgba(47,93,98,.12); padding: 1px 7px; border-radius: 10px; margin-bottom: 4px; }
.sb-chapter-footnotes { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.sb-chapter-footnotes-title { font-size: 1.1rem; margin: 0 0 1rem; color: var(--ink-muted); font-weight: 600; }
.sb-footnotes-panel { margin-top: 1rem; }
.sb-footnotes-list .sb-note { margin-bottom: .85rem; }
body.rv-footnotes-off .sb-note-marker,
body.rv-footnotes-off .sb-note,
body.rv-footnotes-off .sb-chapter-footnotes { display: none !important; }

/* cross references panel */
.sb-xref-panel { background: var(--xref-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.sb-xref-panel h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--maroon); margin-bottom: 8px; }
.sb-xref-list { display: grid; gap: 6px; font-size: .88rem; }
.sb-xref-list a { display: flex; gap: 6px; color: var(--text-2); }
.sb-xref-list a::before { content: "→"; color: var(--gold); font-weight: 700; }
.sb-xref-list a:hover { color: var(--maroon); }
.sb-xref-list a[data-unavailable="true"] { color: var(--text-3); cursor: default; }
.sb-xref-list a[data-unavailable="true"]:hover { text-decoration: none; }
.sb-xref-empty { color: var(--text-3); font-size: .88rem; font-style: italic; }

/* book intro / outline */
.sb-intro-grid { display: grid; gap: 10px; margin: 1em 0; }
.sb-intro-field { border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.sb-intro-field h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 4px; }
.sb-intro-field p { margin: 0; color: var(--text-2); line-height: 1.6; }
.sb-outline-list { margin: 0; padding-left: 1.2em; color: var(--text-2); }
.sb-outline-list li { margin-bottom: .35em; }

/* study images: maps / charts / tables */
.sb-figure { margin: 1.4em 0; text-align: center; }
.sb-figure img { border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.sb-figure figcaption { font-size: .85rem; color: var(--text-3); margin-top: 6px; }

/* verse action bar */
.sb-verse-actions { position: fixed; left: 50%; transform: translate(-50%, 8px); bottom: 20px; background: var(--ink); color: #fff; border-radius: 30px; padding: 6px; display: flex; gap: 4px; box-shadow: var(--shadow-lg); z-index: 150; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.sb-verse-actions.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.sb-verse-actions button { background: none; border: none; color: #fff; padding: 8px 12px; border-radius: 20px; font-size: .82rem; cursor: pointer; }
.sb-verse-actions button:hover { background: rgba(228,198,133,.2); color: var(--gold-soft); }

/* search modal */
.sb-modal { position: fixed; inset: 0; background: rgba(16,27,49,.55); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px; z-index: 400; }
.sb-modal[hidden] { display: none; }
.sb-modal-panel { background: var(--paper); border-radius: var(--radius); max-width: 640px; width: 100%; max-height: 78vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.sb-modal-field { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.sb-modal-field input { flex: 1; border: none; background: none; font-size: 1.05rem; color: var(--text); outline: none; }
.sb-modal-status { padding: 8px 14px; font-size: .82rem; color: var(--text-3); }
.sb-modal-results { overflow-y: auto; padding: 0 6px 10px; }
.sb-modal-results li { list-style: none; }
.sb-modal-results a { display: block; padding: 10px 10px; border-radius: 8px; color: var(--text); }
.sb-modal-results a:hover { background: var(--paper-2); text-decoration: none; }
.sb-modal-results .where { font-size: .76rem; color: var(--teal); font-weight: 700; margin-bottom: 2px; }
.sb-modal-results .snippet { font-size: .9rem; color: var(--text-2); }
.sb-modal-results mark { background: var(--gold-soft); color: var(--ink); border-radius: 2px; }

/* back to top */
.sb-to-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--ink); border: none; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s ease; font-size: 1.1rem; z-index: 140; }
.sb-to-top.show { opacity: 1; pointer-events: auto; }

/* footer */
.sb-footer { background: var(--ink); color: #E1E6F0; padding: 28px 16px; text-align: center; font-size: .85rem; }
.sb-footer a { color: var(--gold-soft); }

/* ------------------------------------------------ fixed bottom app tab bar
   Mobile-only, thumb-reachable navigation (Books / Cross Refs / More),
   replacing the old inline pills that used to push the Scripture text down
   the page. Hidden on desktop, where the sidebar and xref panel are always
   visible and the header nav already lists the sister editions. */
.sb-bottom-tabs { display: none; }
.sb-tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; color: var(--text-2); padding: 7px 4px 6px;
  font-family: var(--font-body); font-size: .68rem; cursor: pointer;
}
.sb-tab-btn .sb-tab-ic { font-size: 1.15rem; line-height: 1; }
.rv-jump-mobile { display: none; gap: 6px; padding: 0 0 10px; margin-bottom: 4px; }
.rv-jump-mobile .sb-input { flex: 1 1 auto; min-width: 0; width: auto; }
body.rv-panel-open { overflow: hidden; }
.sb-tab-btn[aria-expanded="true"], .sb-tab-btn.sb-tab-active { color: var(--maroon); }
[data-theme="dark"] .sb-tab-btn[aria-expanded="true"], [data-theme="dark"] .sb-tab-btn.sb-tab-active { color: var(--gold-soft); }

/* "More" bottom sheet: sister Bible editions + Home, opened from either the
   mobile app bar's ⋯ or the bottom tab bar's ⋯ (same panel, two triggers). */
.sb-sheet-backdrop { position: fixed; inset: 0; background: rgba(16,27,49,.5); z-index: 420; }
.sb-sheet-backdrop[hidden] { display: none; }
.sb-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 430; max-width: var(--wrap); margin: 0 auto;
  background: var(--paper); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg);
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0));
}
.sb-sheet[hidden] { display: none; }
.sb-sheet-handle { width: 36px; height: 4px; background: var(--line-2); border-radius: 2px; margin: 4px auto 14px; }
.sb-sheet h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 8px; }
.sb-sheet-links { display: grid; gap: 2px; margin-bottom: 14px; }
.sb-sheet-links a, .sb-sheet-current {
  display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 8px; font-size: .98rem;
}
.sb-sheet-links a { color: var(--text); }
.sb-sheet-links a:hover { background: var(--paper-2); text-decoration: none; }
.sb-sheet-current { color: var(--text-3); }
.sb-sheet-current small { color: var(--text-3); }

/* Study column (cross refs + footnotes): only on chapter read, and only if there is content */
body[data-view="home"] .sb-xref-panel-col,
body[data-view="book"] .sb-xref-panel-col { display: none !important; }
body[data-view="home"] .sb-chapter-nav,
body[data-view="book"] .sb-chapter-nav { display: none; }
body[data-view="home"] #chapterKicker { display: none; }
body[data-view="home"] .sb-layout,
body[data-view="book"] .sb-layout { grid-template-columns: 260px minmax(0, 1fr); }
.sb-xref-panel-col[hidden] { display: none !important; }

/* -------------------------------------------------------------- reading modes */
body.sb-reading-mode .sb-side,
body.sb-reading-mode .sb-xref-panel-col { display: none; }
body.sb-reading-mode .sb-layout { grid-template-columns: 1fr; }
body.sb-reading-mode .sb-scripture { max-width: 46rem; margin: 0 auto; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .sb-layout { grid-template-columns: 240px minmax(0,1fr); }
  body[data-view="home"] .sb-layout,
  body[data-view="book"] .sb-layout { grid-template-columns: 240px minmax(0, 1fr); }
  body[data-view="read"] .sb-xref-panel-col:not([hidden]) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* App-shell (Matthew Henry pattern): one sticky top bar, toolbar scrolls away,
     Books panel is a bottom sheet, primary actions on fixed bottom tabs. */
  .sb-header { display: none; }
  .sb-mobile-only { display: block; }
  .rv-jump-mobile { display: flex; }
  .sb-desktop-only { display: none !important; }
  .sb-mobile-bar {
    display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 210;
    background: var(--ink); border-bottom: 3px solid var(--gold);
    padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top, 0));
  }
  html { scroll-padding-top: 4.5rem; }
  .sb-verse { scroll-margin-top: 4.5rem; }

  .sb-toolbar { position: static; top: auto; z-index: 1; }
  body[data-view="home"] .sb-toolbar { display: none; }
  .sb-toolbar-inner { padding: 8px 12px; gap: 6px; }
  .sb-select { flex: 1 1 130px; max-width: none; min-width: 0; }
  .sb-search-wrap { flex: 1 1 100%; min-width: 0; order: 10; }
  .sb-search-btn kbd { display: none; }

  .sb-layout { grid-template-columns: 1fr; padding: 12px 12px calc(84px + env(safe-area-inset-bottom, 0)); }
  .sb-xref-panel-col { display: none !important; }
  .sb-side {
    display: block !important; position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-height: min(78vh, 100%); z-index: 230; margin: 0; pointer-events: none;
    transform: translateY(102%); transition: transform .26s ease;
    border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg);
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .sb-side.sb-open { transform: translateY(0); pointer-events: auto; }
  .sb-side .sb-sheet-handle { display: block; width: 40px; height: 4px; background: var(--line-2); border-radius: 3px; margin: 2px auto 10px; }
  #sideSheetBackdrop { z-index: 225; }
  #sideSheetBackdrop:not([hidden]) { display: block; }

  .sb-bottom-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
    background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(16,27,49,.1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .sb-verse-actions { bottom: calc(72px + env(safe-area-inset-bottom, 0)); max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: center; }
  .sb-to-top { bottom: calc(72px + env(safe-area-inset-bottom, 0)); }
  .rv-toast { bottom: calc(80px + env(safe-area-inset-bottom, 0)); }

  .sb-select, .sb-input, .sb-btn { min-height: 38px; padding: 6px 9px; font-size: .85rem; }
  .sb-chapter-head { padding-bottom: 8px; margin-bottom: 12px; }
  .sb-chapter-head h1 { font-size: 1.45rem; }
  .sb-chapter-nav { flex-wrap: wrap; gap: 6px; }
  .sb-chapter-nav .sb-btn { flex: 1 1 auto; min-width: 0; font-size: .82rem; padding: 6px 8px; }
  .sb-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0)); }

  .sb-modal { padding: 0; align-items: stretch; }
  .sb-modal-panel { max-width: none; width: 100%; height: 100%; max-height: 100vh; border-radius: 0; }
  .rv-bookgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  body.sb-reading-mode .sb-side { display: none !important; transform: translateY(102%); }
}
/* Note: .sb-header itself (brand logo/name + nav links: UECF.NET, KJV Study
   Bible, Telugu-English Parallel Bible, Telugu Study Bible) is only ever
   shown above the 760px breakpoint -- see ".sb-header { display: none; }"
   above -- so it no longer needs its own phone-width wrapping rules; the
   compact .sb-mobile-bar / .sb-bottom-tabs app-shell takes over below that. */

/* ------------------------------------------------------------------ print */
@media print {
  .sb-header, .sb-mobile-bar, .sb-toolbar, .sb-side, .sb-xref-panel-col, .sb-verse-actions, .sb-to-top, .sb-footer, .sb-bottom-tabs, .sb-sheet, .sb-sheet-backdrop { display: none !important; }
  .sb-layout { grid-template-columns: 1fr; padding: 0; max-width: none; }
  .sb-scripture { font-size: 12pt; }
  a { color: inherit; text-decoration: none; }
  body { background: #fff; color: #000; }
}

/* Recovery Version additions: contents home, bookmarks, search filters, toast.
   Layout, type, and color stay on the Study Bible / Matthew Henry reader. */
.rv-home, .rv-book { font-family: var(--font-body); }
.rv-kicker { letter-spacing: .08em; text-transform: uppercase; color: var(--teal); font-size: .78rem; margin: 0 0 .4rem; }
.rv-home h1, .rv-book h1 { font-family: var(--font-display); font-weight: 650; line-height: 1.15; margin: 0 0 .6rem; }
.rv-lede { font-size: 1.05rem; max-width: 42rem; }
.rv-actions, .rv-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.rv-actions a, .rv-quick a, .rv-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .75rem;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper-2); color: var(--text); text-decoration: none;
}
.rv-group { margin: 1.4rem 0 .4rem; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.rv-bookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .45rem; }
.rv-bookgrid a {
  display: flex; justify-content: space-between; gap: .5rem; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); color: var(--text); text-decoration: none;
}
.rv-bookgrid small { color: var(--text-3); }
.rv-note { background: var(--note-bg); border-left: 3px solid var(--teal); padding: .75rem .9rem; border-radius: 8px; }
.rv-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.rv-filters button[aria-pressed="true"] { background: var(--ink); color: #fff; }
[data-theme="dark"] .rv-filters button[aria-pressed="true"] { background: var(--gold); color: #1a1408; }
.rv-toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: .55rem .9rem; border-radius: 999px; z-index: 500; display: none;
}
.rv-toast.show { display: block; }
.sb-verse.is-selected { outline: 2px solid var(--gold); outline-offset: 2px; background: var(--paper-3); border-radius: 4px; }
html[data-width="narrow"] .sb-scripture { max-width: 34rem; margin-left: auto; margin-right: auto; }
html[data-width="wide"] .sb-scripture { max-width: 52rem; }
html[data-spacing="compact"] .sb-scripture { line-height: 1.45; }
html[data-spacing="relaxed"] .sb-scripture { line-height: 2.05; }
html[data-density="compact"] .sb-verse { padding: 0; }
body { overflow-x: hidden; }
.sb-side-tabs { display: flex; gap: .35rem; margin-bottom: .8rem; }
.sb-side-tabs button { flex: 1; min-height: 36px; border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 8px; cursor: pointer; }
.sb-side-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
[data-theme="dark"] .sb-side-tabs button[aria-selected="true"] { background: var(--gold); color: #1a1408; }

/* review-flag banner for uncertain/garbled source content */
.sb-flag { background: #fdf6e3; border: 1px solid #e3ca8f; color: #6b551f; border-radius: 6px; padding: 8px 12px; font-size: .82rem; margin: .6em 0; }
[data-theme="dark"] .sb-flag { background: #2b2410; border-color: #6b551f; color: #e8c765; }

.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; }
.sb-verse { scroll-margin-top: 5.5rem; }
.sb-verse-anchor { position: absolute; width: 1px; height: 1px; overflow: hidden; }