/* ==========================================================================
   UECF.NET Life Lessons Study Bible — NKJV
   Forked from the sibling /study-bible/ reading app (same UECF.NET palette,
   layout skeleton, theming and toolbar conventions) and extended with a
   Life Lessons card system: each margin box in the source (Situation /
   Observation / Inspiration / Application / Exploration) gets its own
   accent color so a reader can tell at a glance which kind of note they're
   looking at, and Life Lessons content stays visually distinct from the
   Bible text itself at all times -- never inlined into the Scripture
   column, never restyled to look like Scripture.
   ========================================================================== */

: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;

  /* Life Lessons section accents -- one hue per subsection so Situation /
     Observation / Inspiration / Application / Exploration read as
     distinct at a glance, without competing with the reading palette. */
  --ll-situation: #2F5D62;   /* teal   -- context: what's going on */
  --ll-observation: #8B3A42; /* maroon -- what the passage shows */
  --ll-inspiration: #C79A3D; /* gold   -- a real-life story/example */
  --ll-application: #3D6E9E; /* blue   -- questions for the reader */
  --ll-exploration: #6B4E8E; /* violet -- related verses to explore */
  --ll-default: var(--teal);
  --ll-card-bg: #FBF8EF;
  --ll-card-border: var(--line-2);
  --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;

  --ll-situation: #5EA8AE;
  --ll-observation: #D98A93;
  --ll-inspiration: #E8C765;
  --ll-application: #7FB0E0;
  --ll-exploration: #B49BD6;
  --ll-default: var(--ll-situation);
  --ll-card-bg: #1A1712;
  --ll-card-border: var(--line-2);
}

*, *::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-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-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; }

/* 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(--teal); margin-bottom: 8px; }
[data-theme="dark"] .sb-intro-card h2 { color: var(--gold-soft); }
.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; }

/* ------------------------------------------------------- Life Lessons
   Each margin box in the source pairs a Scripture reading range with up
   to five labeled subsections (Situation / Observation / Inspiration /
   Application / Exploration). Rendered here as a titled card with one
   colored accent strip per subsection -- distinct from Scripture at a
   glance, and never mixed into the verse text itself. */
.sb-ll-card {
  background: var(--ll-card-bg); border: 1px solid var(--ll-card-border); border-radius: var(--radius);
  padding: 14px 16px; margin: 1.2em 0; box-shadow: var(--shadow);
}
.sb-ll-card-title {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600;
  font-size: 1.02em; color: var(--text); margin-bottom: 2px;
}
.sb-ll-card-title .sb-ll-icon { font-size: 1.1em; }
.sb-ll-card-range { font-size: .78rem; color: var(--text-3); margin-bottom: 10px; }
.sb-ll-section { border-left: 4px solid var(--ll-default); border-radius: 0 8px 8px 0; padding: 8px 12px; margin-bottom: 8px; background: rgba(0,0,0,.015); }
[data-theme="dark"] .sb-ll-section { background: rgba(255,255,255,.02); }
.sb-ll-section:last-child { margin-bottom: 0; }
.sb-ll-section[data-label="situation"] { border-color: var(--ll-situation); }
.sb-ll-section[data-label="observation"] { border-color: var(--ll-observation); }
.sb-ll-section[data-label="inspiration"] { border-color: var(--ll-inspiration); }
.sb-ll-section[data-label="application"] { border-color: var(--ll-application); }
.sb-ll-section[data-label="exploration"] { border-color: var(--ll-exploration); }
.sb-ll-section-label {
  display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  padding: 1px 8px; border-radius: 10px; margin-bottom: 5px; color: #fff;
  background: var(--ll-default);
}
.sb-ll-section[data-label="situation"] .sb-ll-section-label { background: var(--ll-situation); }
.sb-ll-section[data-label="observation"] .sb-ll-section-label { background: var(--ll-observation); }
.sb-ll-section[data-label="inspiration"] .sb-ll-section-label { background: var(--ll-inspiration); color: var(--ink); }
.sb-ll-section[data-label="application"] .sb-ll-section-label { background: var(--ll-application); }
.sb-ll-section[data-label="exploration"] .sb-ll-section-label { background: var(--ll-exploration); }
.sb-ll-section-text { font-family: var(--font-body); font-size: .92em; line-height: 1.6; color: var(--text-2); margin: 0; }
.sb-ll-marker {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #fff; background: var(--ll-inspiration);
  border-radius: 10px; padding: 2px 9px; margin: .3em 0; cursor: pointer; border: none;
}
[data-theme="dark"] .sb-ll-marker { color: var(--ink); }
.sb-ll-marker:hover { filter: brightness(1.08); }

/* Life Lessons side panel (reuses the sibling site's xref-panel column) */
.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; }
.sb-xref-list .sb-ll-card { margin: 0; padding: 10px 12px; }
.sb-xref-list .sb-ll-card-title { font-size: .92em; }
.sb-xref-list .sb-ll-section-text { font-size: .87em; }

/* 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(--ll-inspiration); color: var(--ink); 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(--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, .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; }