/* ==========================================================================
   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 { width: 100%; }
.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; }

/* 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 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-header { display: none; }
  .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;
  }
  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 { 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; }