/* ============================================================
   BibleTools — Bible circuit (dual-pane: reading + resources)
   Loaded by Bible/lay_Bible.cfm via #Application.CSSURL#bible20260717.css.
   Pairs with js/bible20260714.js.

   Mobile-first. The Lookup + Resources panels are bottom sheets on
   mobile and a static left sidebar on desktop (one DOM instance, no
   duplicate ids). The reading pane shows the chapter (HTMX) with the
   current verse highlighted; a Verse/Chapter toggle isolates the verse.
   Relies on the --bt-* CSS variables defined in responsive20260717.css.

   20260717: reading experience pass.
   - Scripture set in the screen serif (--bt-serif) at 17px/1.7 with
     the line length capped (~68ch) for comfortable measure.
   - .bt-bible-main is one white card holding the reading pane AND the
     selected-resource content (page bg is the warm off-white --bt-bg);
     the reading pane is set off inside it by its border and a
     page-tone header band.
   - desktop sidebar panels (Lookup / Resources) become white cards.
   - panel headings pin the sans stack (legacy layout.css H3 rule is
     24pt italic Times and was leaking through).
   ============================================================ */

/* Custom easing for press/hover feedback (stronger than the CSS built-ins) */
:root{ --bt-ease-out:cubic-bezier(0.23,1,0.32,1); }

/* ---------- Layout ---------- */
.bt-bible{ display:block; }
/* One white card around the reading pane + selected-resource content */
.bt-bible-main{ min-width:0; background:var(--bt-surface,#fff); border:1px solid var(--bt-line,#e3e3e3); border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:14px; }

/* ---------- Reading pane ---------- */
/* Nested inside the main card: set off by its own border and the
   page-tone header band (no shadow — it isn't floating). */
.bt-reading{ background:var(--bt-surface,#fff); border:1px solid var(--bt-line,#e3e3e3); border-radius:12px; overflow:hidden; margin-bottom:18px; }
.bt-reading-head{ display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--bt-line,#e3e3e3); background:var(--bt-bg,#f6f4ef); }
.bt-reading-ref{ font-family:var(--bt-serif,Georgia,"Times New Roman",serif); font-size:1.25rem; font-weight:700; line-height:1.2; flex:1 1 100%; }
.bt-reading-version{ padding:6px 9px; border:1px solid var(--bt-line,#e3e3e3); border-radius:7px; font-size:.85rem; }
.bt-toggle{ display:inline-flex; border:1px solid var(--bt-line,#e3e3e3); border-radius:8px; overflow:hidden; }
.bt-toggle button{ border:none; background:#fff; cursor:pointer; padding:7px 12px; font-size:.8rem; font-weight:600; color:#6b6b6b; font-family:var(--bt-sans,inherit); }
.bt-toggle button.active{ background:#000; color:#fff; }
.bt-compare{ font-size:.85rem; }

/* Scripture text: serif, 17px, generous leading (see header comment) */
.bt-bible-chapter{ height:320px; overflow-y:auto; padding:6px 14px 0; font-family:var(--bt-serif,Georgia,"Times New Roman",serif); font-size:1.0625rem; color:#1a1a1a; }

/* ---------- Chapter verses (dsp_ChapterHTMX) ---------- */
/* One block per verse; the gap between verses stays under a line-height
   so the chapter reads as one passage. Line length is capped so full
   chapters stay readable at desktop pane widths (~90+ chars uncapped). */
.bt-verse{ margin:0; padding:.3em .25em; line-height:1.7; max-width:68ch; }
.bt-verse.current-verse{ background-color:#fffde7; }
/* Verse number: small superscript link, no parentheses */
.bt-vnum{ font-size:.7em; font-weight:700; line-height:1; vertical-align:super; color:var(--bt-accent,#0488cd); text-decoration:none; margin-right:1px; }
.bt-vnum:hover{ text-decoration:underline; }
/* Section title/heading (versions that carry them, e.g. NKJV pericopes).
   Named bt-chapter-* — bt-section-title is a different, site-wide page-title
   class in circuit20260717.css. */
.bt-chapter-title{ margin:10px 0 2px; font-weight:bold; font-size:1em; color:#333; max-width:68ch; }
.bt-chapter-heading{ margin:10px 0 2px; font-weight:bold; font-style:italic; font-size:1.2em; color:#444; max-width:56ch; }

/* Annotation (cross-ref/footnote) marker: display:inline (not inline-block)
   so the preceding   binds it to the verse text — atomic inlines get a
   wrap opportunity even after a no-break space and can orphan onto their own
   line. Padding enlarges the tap target without affecting line layout. */
.annot-btn{ display:inline; font-size:.7em; font-weight:700; line-height:1; vertical-align:super; padding:7px 9px; margin:0 -7px 0 -5px; border:none; border-radius:4px; background:none; color:#3a6ea5; font-family:inherit; font-style:normal; cursor:pointer; transition:background .15s,color .15s; }
.annot-btn:hover, .annot-btn.active{ background:#3a6ea5; color:#fff; }
/* Expanding annotation panel (sits directly after its verse in the DOM) */
.annot-row{ max-width:68ch; }
.annot-inner{ max-height:0; overflow:hidden; transition:max-height .3s ease; background:#f8f9fa; border-left:3px solid #3a6ea5; margin-left:8px; }
.annot-row.open .annot-inner{ max-height:2000px; }
.annot-content{ padding:5px 10px; }

/* Chapter mode: render the whole chapter inline, no internal scrollbar (page scrolls) */
.bt-bible-chapter.bt-mode-chapter{ height:auto; max-height:none; overflow:visible; }
/* Verse mode: collapse the chapter to just the highlighted verse */
.bt-bible-chapter.bt-mode-verse{ height:auto; max-height:none; overflow:visible; }
.bt-bible-chapter.bt-mode-verse .bt-verse{ display:none; }
.bt-bible-chapter.bt-mode-verse .annot-row{ display:none; }
.bt-bible-chapter.bt-mode-verse .bt-verse.current-verse{ display:block; }
/* keep the current verse's annotation panel (NKJV/NET cross-refs & footnotes)
   available in Verse mode — it immediately follows its verse in the DOM */
.bt-bible-chapter.bt-mode-verse .bt-verse.current-verse + .annot-row{ display:block; }
.bt-bible-copyright{ margin-top:12px; padding:8px 14px 10px; font-size:.78em; color:#888; border-top:1px solid #e0e0e0; }

/* ---------- Mobile resource selector → opens the Resources sheet ---------- */
.bt-res-selector-wrap{ margin-bottom:20px; }
.bt-res-selector{ width:100%; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; border:1px solid var(--bt-line,#e3e3e3); border-radius:12px; background:#fff; padding:11px 14px; box-shadow:0 1px 4px rgba(0,0,0,.05); font-family:inherit; transition:border-color 150ms var(--bt-ease-out), transform 160ms var(--bt-ease-out); }
.bt-res-selector:hover{ border-color:var(--bt-accent,#0488cd); }
.bt-res-selector:active{ transform:scale(.98); }
.bt-rs-icon{ width:34px; height:34px; flex:0 0 auto; border-radius:8px; background:#f7f7f7; display:flex; align-items:center; justify-content:center; color:var(--bt-accent,#0488cd); }
.bt-rs-icon svg{ width:18px; height:18px; }
.bt-rs-text{ display:flex; flex-direction:column; min-width:0; }
.bt-rs-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#6b6b6b; }
.bt-rs-value{ font-weight:700; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bt-rs-caret{ margin-left:auto; color:#6b6b6b; font-size:1.1rem; flex:0 0 auto; }

/* ---------- Selected-resource (commentary) content ---------- */
/* Serif/size/line-height come from .bt-option-content in responsive20260717.css;
   cap the measure here to match the reading pane. */
.bt-option-content{ margin-bottom:8px; max-width:72ch; }
/* Keep legacy commentary images/tables (e.g. Barnes data tables) responsive */
.bt-option-content img{ max-width:100%; height:auto; }
@media (max-width:919px){
  .bt-option-content table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ---------- Library excerpts (/opt/lib, and /opt/comm with no Forerunner entry) ---------- */
/* Verbatim quotations from another document, so they are marked up as quotations
   and styled as such. Replaces the nested <blockquote> that used to indent this
   block; nothing in css/ styles blockquote, so reset the UA margin here.

   20260925: the reference and the attribution pin the sans stack, as every other
   label in this file does. They inherited the body serif before, so at nearly the
   same size and only a tint apart they read as the opening and closing lines of
   the quotation rather than as chrome around it. The left rule moves onto the
   blockquote so that it marks the quotation itself, with the label above and the
   attribution below hanging outside it. */
.bt-excerpt{ margin:32px 0 0; }
/* Which verses the excerpt covers — the scanning key when several are stacked.
   Same label idiom as .bt-res-group h4. Qualified by .bt-excerpt because it is a
   <p>, and responsive20260922.css's `.bt-main p{font:inherit;font-weight:normal}`
   outranks a lone class and would drop it back to the body serif. */
.bt-excerpt .bt-excerpt-ref{ margin:0 0 7px; font-family:var(--bt-sans,sans-serif); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#6b6b6b; }
.bt-excerpt blockquote{ margin:0; padding:0 0 0 14px; border-left:3px solid var(--bt-line,#e3e3e3); }
.bt-excerpt blockquote > p:first-child{ margin-top:0; }
.bt-excerpt blockquote > p:last-child{ margin-bottom:0; }
/* Attribution trails the quotation, as attribution does. */
.bt-excerpt-source{ margin:9px 0 0; font-family:var(--bt-sans,sans-serif); font-size:.85rem; color:#6b6b6b; }
.bt-excerpt-source cite{ font-style:normal; }

/* ---------- Lookup + Resources panels ---------- */
/* Mobile: bottom sheets. Desktop: sidebar cards (see media query). */
.bt-sheet-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:80; }
.bt-sheet-overlay.open{ opacity:1; visibility:visible; }
.bt-panel{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:#fff; border-radius:18px 18px 0 0; transform:translateY(100%); transition:transform .3s cubic-bezier(.22,1,.36,1); max-height:82vh; overflow-y:auto; box-shadow:0 -8px 40px rgba(0,0,0,.2); }
.bt-panel.open{ transform:translateY(0); }
.bt-panel-grip{ width:42px; height:5px; background:#d4d4d4; border-radius:3px; margin:10px auto 4px; }
.bt-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 18px 12px; border-bottom:1px solid var(--bt-line,#e3e3e3); position:sticky; top:0; background:#fff; }
/* Pin the sans stack — the legacy layout.css H3 rule (italic Times) leaks in otherwise */
.bt-panel-head h3{ margin:0; font-family:var(--bt-sans,sans-serif); font-style:normal; font-size:1.25rem; font-weight:700; }
.bt-panel-close{ background:none; border:none; font-size:26px; line-height:1; color:#6b6b6b; cursor:pointer; }
.bt-panel-body{ padding:16px 18px 24px; }
.bt-panel-body img{ max-width:100%; height:auto; }

/* ---------- Verse lookup form (dsp_VerseInput) ---------- */
.bt-lookup{ margin:0; }
.bt-field{ margin-bottom:14px; }
.bt-field-label{ display:block; font-size:.875rem; font-weight:600; color:#3a3a3a; margin-bottom:6px; }
/* width:100% controls include their padding/border (they overflow the
   padded panel cards otherwise — no global border-box reset here) */
.bt-input, .bt-select, .bt-btn{ box-sizing:border-box; }
/* font-size:16px is deliberate — keeps iOS from zooming the field on focus */
.bt-input{ width:100%; padding:11px 12px; font-size:16px; border:1px solid var(--bt-line,#e3e3e3); border-radius:8px; transition:border-color 150ms var(--bt-ease-out), box-shadow 150ms var(--bt-ease-out); }
.bt-hint{ font-size:.8125rem; color:#6b6b6b; margin:6px 0 0; }
.bt-or{ display:flex; align-items:center; gap:10px; color:#6b6b6b; font-size:.75rem; margin:14px 0; }
.bt-or::before, .bt-or::after{ content:""; flex:1; height:1px; background:var(--bt-line,#e3e3e3); }
.bt-selects{ display:flex; flex-direction:column; gap:8px; }
.bt-selects-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bt-select{ width:100%; padding:10px 8px; font-size:15px; border:1px solid var(--bt-line,#e3e3e3); border-radius:8px; background:#fff; }
.bt-btn{ display:inline-block; cursor:pointer; border:none; color:#fff; background:var(--bt-accent,#0488cd); padding:11px 22px; border-radius:8px; font-size:.9375rem; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.12); font-family:inherit; transition:transform 160ms var(--bt-ease-out), background 160ms var(--bt-ease-out); }
.bt-btn:hover{ background:#0477b4; }
.bt-btn:active{ transform:scale(.97); }
.bt-btn-block{ width:100%; margin-top:14px; }

/* One accent focus ring for every interactive control in the sidebar */
.bt-input:focus-visible, .bt-select:focus-visible, .bt-btn:focus-visible, .bt-res-group a:focus-visible{ outline:none; border-color:var(--bt-accent,#0488cd); box-shadow:0 0 0 3px rgba(4,136,205,.25); }

/* ---------- Resource list (dsp_VerseResources) — grouped, V3 panel look ---------- */
.bt-res-group{ margin-bottom:24px; }
.bt-res-group:last-child{ margin-bottom:0; }
.bt-res-group h4{ margin:0 0 8px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#6b6b6b; }
.bt-res-group ul{ list-style:none; margin:0; padding:0; }
.bt-res-group li{ padding:7px 0; }
.bt-res-group a{ font-size:.9375rem; color:var(--bt-accent,#0488cd); text-decoration:none; transition:color 150ms var(--bt-ease-out); }
.bt-res-group a:hover{ text-decoration:underline; }
.bt-res-group a.active{ font-weight:700; color:#1a1a1a; text-decoration:none; }
.bt-res-group a.active::before{ content:"\25B8 "; color:var(--bt-accent,#0488cd); }

/* ---------- Mobile bottom action bar (black, matches the top nav) ---------- */
.bt-action-bar{ position:fixed; left:0; right:0; bottom:0; z-index:55; display:flex; background:#000; box-shadow:0 -3px 16px rgba(0,0,0,.25); }
.bt-action-bar button{ flex:1; border:none; background:none; cursor:pointer; padding:9px 6px 8px; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color:#fff; font-weight:600; font-family:inherit; }
.bt-action-bar button svg{ width:22px; height:22px; }
.bt-action-bar button:active{ background:#161616; }
/* current verse shown under the centered Resources action */
.bt-ab-verse{ font-size:10px; font-weight:400; color:#9aa0a6; line-height:1; margin-top:1px; }

/* Leave room for the fixed action bar on mobile */
@media (max-width:919px){
  body{ padding-bottom:72px; }
}

/* ============================================================
   DESKTOP (>= 920px): two-column; panels become sidebar cards
   ============================================================ */
@media (min-width:920px){
  .bt-bible{ display:grid; grid-template-columns:290px 1fr; gap:24px; align-items:start; }
  .bt-bible-main{ padding:18px 20px; }
  /* The sidebar pins as one unit and scrolls as a whole column when it
     is taller than the viewport. Both cards keep their natural height —
     previously the Resources card was squeezed into the space left under
     the Lookup card, leaving a tiny internal scroll area on laptops. */
  .bt-bible-side{ position:sticky; top:120px; max-height:calc(100vh - 120px - 24px); overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:18px; padding-right:6px; }

  /* Sidebar cards: white surface on the warm page background.
     flex:none — they must never be compressed by the column's max-height */
  .bt-panel{ position:static; transform:none; flex:0 0 auto; max-height:none; overflow:visible; z-index:auto; background:var(--bt-surface,#fff); border:1px solid var(--bt-line,#e3e3e3); border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:14px 16px 16px; }
  .bt-panel-grip, .bt-panel-close{ display:none; }
  .bt-panel-head{ position:static; background:none; border-bottom:none; padding:0 0 8px; }
  .bt-panel-head h3{ font-size:1.125rem; font-weight:700; text-transform:none; letter-spacing:normal; color:#1a1a1a; }
  .bt-panel-body{ padding:8px 0 0; }

  .bt-res-selector-wrap, .bt-action-bar, .bt-sheet-overlay{ display:none; }
}