/* ==========================================================================
   UECF.NET Woman's Study Bible — NKJV
   Forked from the sibling UECF.NET reading app (same layout skeleton,
   theming and toolbar conventions). Header uses a rose/burgundy accent
   for this edition; study notes, portraits, and charts render in the
   notes panel, distinct from Scripture.
   ========================================================================== */

:root {
  /* UECF.NET brand tokens (from public_html/index.html) */
  --ink: #101B31;
  --ink-soft: #2C3E60;
  --gold: #C79A3D;
  --gold-soft: #E4C685;
  --maroon: #8B3A42;
  --rose: #3F1F2E;
  --rose-soft: #6B3A4D;
  --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;

  --note-kicker: var(--rose);
  --note-feature: #6B3A4D;
  --note-footnote: var(--teal);
  --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;
  --rose: #2A141C;
  --rose-soft: #8A5368;
  --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(--rose); 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-brand-text .sb-brand-edition { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(228,198,133,.9); 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; }

.sb-other-bibles-menu { position: relative; }
.sb-other-bibles-trigger {
  background: none; border: none; color: #fff; font-size: .88rem; font-weight: 600;
  padding: 8px 10px; border-radius: 5px; cursor: pointer; font-family: inherit;
}
.sb-other-bibles-trigger:hover { background: rgba(228,198,133,.15); color: var(--gold-soft); }
.sb-other-bibles-drop {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px; min-width: 240px;
  box-shadow: var(--shadow-lg); z-index: 80;
}
.sb-other-bibles-drop.show { display: block; }
.sb-other-bibles-drop a {
  display: block; padding: 9px 12px; border-radius: 5px; color: var(--text); font-size: .88rem; font-weight: 500;
}
.sb-other-bibles-drop a:hover { background: var(--paper-2); text-decoration: none; color: var(--maroon); }

.sb-notice { background: var(--gold-soft); color: var(--ink); border-bottom: 1px solid var(--gold); }
.sb-notice-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 8px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; font-size: .85rem;
}
.sb-notice a { color: var(--ink); font-weight: 700; text-decoration: underline; }
.sb-notice button { background: none; border: none; color: var(--ink); cursor: pointer; font-size: 1rem; line-height: 1; padding: 4px; }
.sb-notice[hidden] { display: 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 { width: 100%; }
.sb-search-btn { width: 100%; text-align: left; cursor: pointer; }
.sb-search-btn kbd {
  float: right; font-size: .72rem; font-weight: 600; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px; color: var(--text-3);
}
.sb-btn-quiet { font-size: .88rem; }
.sb-btn:disabled { opacity: .45; cursor: default; }
.sb-book-intro { margin: 0 0 1.2em; }
.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-verse.has-note .sb-vnum::after { content: "·"; color: var(--rose-soft); font-size: 1.35em; margin-left: 1px; }
.sb-verse-empty .sb-vtext { opacity: .45; }
.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; }

/* book-opening material (best-effort, raw captured text -- see intros/) */
.sb-intro-card {
  font-family: var(--font-body); background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 18px; margin: 0 0 1.4em;
}
.sb-intro-card h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rose-soft); margin-bottom: 8px; }
[data-theme="dark"] .sb-intro-card h2 { color: var(--gold-soft); }
.sb-intro-card h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin: 1em 0 .35em; }
.sb-intro-card p { font-size: .92em; line-height: 1.6; color: var(--text-2); margin: 0 0 .7em; }
.sb-intro-card p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- Study notes
   Verse notes, portraits, charts, and NKJV text notes render in the
   side panel — distinct from Scripture, never mixed into the verse text. */
.sb-note-card {
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--note-kicker);
  border-radius: 0 8px 8px 0; padding: 10px 12px;
}
.sb-note-card[data-kind="feature"],
.sb-note-card[data-kind="portrait"],
.sb-note-card[data-kind="chart"] { border-left-color: var(--gold); }
.sb-note-card[data-kind="footnote"] { border-left-color: var(--note-footnote); }
.sb-note-card-kicker {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: var(--rose-soft); margin-bottom: 2px;
}
.sb-note-card[data-kind="feature"] .sb-note-card-kicker,
.sb-note-card[data-kind="portrait"] .sb-note-card-kicker,
.sb-note-card[data-kind="chart"] .sb-note-card-kicker { color: var(--maroon); }
.sb-note-card[data-kind="footnote"] .sb-note-card-kicker { color: var(--teal); }
.sb-note-card-ref { font-family: var(--font-display); font-weight: 600; font-size: .95em; margin-bottom: 4px; }
.sb-note-card-text { font-family: var(--font-body); font-size: .88em; line-height: 1.6; color: var(--text-2); margin: 0; }

.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: 12px; font-size: .88rem; }
.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-result-kind { display: inline-block; background: var(--rose-soft); color: #fff; border-radius: 8px; padding: 0 6px; font-size: .72em; margin-right: 4px; }
.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); }
.sb-footer-other { opacity: .9; }

.about-wrap { max-width: 760px; margin: 0 auto; padding: 40px 20px 80px; }
.about-wrap h1 { font-size: 1.8rem; }
.about-wrap h2 { font-size: 1.15rem; margin-top: 2em; color: var(--teal); }
.about-wrap p, .about-wrap li { color: var(--text-2); line-height: 1.75; font-size: 1rem; }
.about-wrap ul { padding-left: 1.3em; }
.about-wrap .callout {
  background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: 6px; padding: 16px 20px; margin: 1.5em 0;
}
.sb-mtop-back-fallback { display: none; }
@media (max-width: 760px) {
  .sb-mtop-back-fallback {
    display: block; position: sticky; top: 0; z-index: 75; background: var(--ink); color: #fff;
    padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
    font-weight: 600; font-size: .92rem; border-bottom: 3px solid var(--gold);
  }
  .sb-mtop-back-fallback:hover { text-decoration: underline; 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 span:first-child { font-size: 1.2rem; line-height: 1; }
.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); }

/* -------------------------------------------------------------- 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); }
  .sb-xref-panel-col { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* App-shell mode: swap the full church header for the compact home/title/
     more bar, and move primary navigation to a fixed bottom tab bar -- see
     .sb-mobile-bar / .sb-bottom-tabs above. Frees real vertical space for
     the actual Scripture text on a phone screen. */
  .sb-search-btn kbd { display: none; }
  .sb-header { display: none; }
  .sb-notice { display: none; }
  .sb-mobile-bar {
    display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 210;
    background: var(--rose); border-bottom: 3px solid var(--gold); padding: 8px 10px;
  }
  html { scroll-padding-top: 6.5rem; }
  .sb-verse, .sb-side, .sb-xref-panel-col { scroll-margin-top: 6.5rem; }

  .sb-layout { grid-template-columns: 1fr; padding-top: 12px; padding-bottom: 84px; }
  .sb-side, .sb-xref-panel-col { position: static; max-height: none; }
  .sb-side, .sb-xref-panel-col { display: none; }
  .sb-side.sb-open, .sb-xref-panel-col.sb-open { display: block; }

  .sb-bottom-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
    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: 78px; }
  .sb-to-top { bottom: 78px; }

  .sb-toolbar { top: 52px; }
  .sb-toolbar-inner { padding: 6px 10px; }
  .sb-select, .sb-input, .sb-btn { min-height: 38px; padding: 6px 9px; font-size: .85rem; }
  .sb-brand-text small { display: none; }
}
/* 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, .sb-notice { 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; }
}

/* 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; }