/* t636 Scroll mode (scrollmode.js): the Bible as one running text. Same font, size and colours as the normal reader (.rd-text),
   in both the dark and the light theme. Nothing here shows a verse, chapter, title or paragraph boundary. */
.rd-text.sm-on .sm-flow { margin: .4rem 0 0; padding: 0; text-indent: 0; text-align: left; white-space: normal; overflow-wrap: break-word; hyphens: manual; }
.rd-text.sm-on .sm-ch, .rd-text.sm-on .sm-v { display: inline; margin: 0; padding: 0; border: 0; background: none; text-indent: 0; }
.rd-text.sm-on .sm-v i { font-style: italic; }
.rd-text.sm-on .sm-v.sm-flash { animation: sm-flash 3.4s ease-out; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@keyframes sm-flash { 0%, 45% { background: rgba(214, 178, 92, .34); } 100% { background: rgba(214, 178, 92, 0); } }
@media (prefers-reduced-motion: reduce) { .rd-text.sm-on .sm-v.sm-flash { animation-duration: 3.4s; animation-timing-function: steps(1, end); } }
.rd-text.sm-on .sm-end { min-height: 2.5rem; margin: 1.2rem 0 2rem; color: var(--ink-soft, #7a6a55); font-size: .85rem; font-family: var(--sans, system-ui, sans-serif); line-height: 1.4; }
.rd-text.sm-on .sm-end:empty::before { content: ""; }
/* the chapter arrows and Previous/Next only exist for chapter-by-chapter reading */
#bible-view.sm-view .rd-nav, #bible-view.sm-view .rd-foot { display: none; }
#bible-view.sm-view #rd-ch:disabled { opacity: .55; }
/* the text is kept in place by scrollmode.js when more is added above; the browser's own scroll anchoring would move it twice */
html.sm-mode, html.sm-mode body { overflow-anchor: none; }
/* book-sep (29 Oct 2026): where a new book starts, a generous gap, a thin gold rule and the book's name (Cormorant, gold). The only
   mark in the running text; chapters and verses inside a book stay unmarked. */
.rd-text.sm-on .sm-book { display: block; margin: 3.4rem 0 1.5rem; padding: 0; text-align: center; text-indent: 0; line-height: 1; }
.rd-text.sm-on .sm-flow > .sm-ch:first-child > .sm-book { margin-top: 1.2rem; }
.rd-text.sm-on .sm-book-rule { display: block; width: 7rem; max-width: 50%; height: 1px; margin: 0 auto 1.1rem; background: linear-gradient(90deg, rgba(217, 179, 106, 0), var(--gold, #d9b36a), rgba(217, 179, 106, 0)); }
.rd-text.sm-on .sm-book-name { display: block; font-family: "Cormorant", var(--serif, Georgia, serif); font-weight: 600; font-size: 1.75rem; line-height: 1.15; letter-spacing: .04em; color: var(--gold, #d9b36a); }
html.light .rd-text.sm-on .sm-book-rule { background: linear-gradient(90deg, rgba(154, 116, 40, 0), #9a7428, rgba(154, 116, 40, 0)); }
html.light .rd-text.sm-on .sm-book-name { color: #8a6420; }
/* sm-exit (29 Oct 2026): in Scroll mode the app header stays pinned at the top (as Josh asked: "the header that everything else
   has"), the reader toolbar pinned under it (theme.css already places .rd-tools at top: var(--hdrH)); scrollmode.js sets --hdrH. */
html.sm-hdr:root body { height: auto; min-height: 100%; } /* body is height:100%; a pinned header can only stay pinned inside a body as tall as the text */
html.sm-hdr:root body header.app-header { position: sticky; top: 0; z-index: 50; }
html.sm-hdr:root body .rd-tools { top: var(--hdrH, 0px); }
/* pinned over the text: solid backgrounds so the words don't show through */
html.sm-hdr:root:not(.light) body header.app-header { background: linear-gradient(180deg, #221d12, #1d1910); }
html.sm-hdr.light:root body header.app-header { background: linear-gradient(180deg, #fffaf0, #f4ecd8); }
html.sm-hdr.light:root body .rd-tools { background: #faf3e3; }
/* first-time Scroll mode card */
.sm-intro-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.2rem calc(1.2rem + env(safe-area-inset-right, 0px)) calc(1.2rem + env(safe-area-inset-bottom, 0px)) calc(1.2rem + env(safe-area-inset-left, 0px)); background: rgba(5, 4, 3, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sm-intro { box-sizing: border-box; width: 100%; max-width: 24rem; margin: 0; padding: 1.6rem 1.4rem 1.3rem; text-align: center; background: #0e0b08; color: #efe7d8; border: 1px solid rgba(217, 179, 106, .45); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.sm-intro-rule { display: block; width: 5rem; height: 1px; margin: 0 auto 1rem; background: linear-gradient(90deg, rgba(217, 179, 106, 0), #d9b36a, rgba(217, 179, 106, 0)); }
.sm-intro h2 { margin: 0 0 .7rem; font: 600 1.85rem/1.1 "Cormorant", "Iowan Old Style", Georgia, serif; letter-spacing: .03em; color: #d9b36a; }
.sm-intro p { margin: 0 0 .8rem; font-size: .95rem; line-height: 1.5; color: #e6dccb; }
.sm-intro-ok { margin-top: .5rem; min-width: 8rem; min-height: 44px; padding: .55rem 1.4rem; border-radius: 999px; border: 1px solid #d9b36a; background: linear-gradient(180deg, #f0d69e, #d9b36a); color: #1a140c; font: 600 1rem/1 "Inter", -apple-system, sans-serif; cursor: pointer; }
.sm-intro-ok:focus-visible { outline: 2px solid #f0d69e; outline-offset: 3px; }

/* sm-loc2 (Josh 29 Oct): where the top line is ("John 3:16"), muted gold, at the bottom of the pinned toolbar just above its
   rule. The row is always there in Scroll mode (fixed height), so updating the words never moves the text.
   smloc-tap (Josh 30 Oct, pt775u): bigger (~15.5px) and a real button that opens the passage picker. 44px tall touch target; the
   negative margins eat the toolbar gap and bottom padding so the toolbar only grows a little. */
#bible-view .rd-smloc { display: block; align-self: center; box-sizing: border-box; max-width: 100%; height: 44px; min-height: 44px; margin: -.4rem auto -.35rem;
  padding: 0 1.1rem; border: 0; border-radius: 999px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font: 600 .97rem/44px var(--sans); letter-spacing: .04em;
  color: #8a6420; opacity: .9; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .12s ease, opacity .12s ease; }
html:not(.light) #bible-view .rd-smloc { color: #d9b36a; opacity: .8; }
#bible-view .rd-smloc:active { background: rgba(138, 100, 32, .12); opacity: 1; }
html:not(.light) #bible-view .rd-smloc:active { background: rgba(217, 179, 106, .14); }
@media (hover: hover) { #bible-view .rd-smloc:hover { opacity: 1; } }
#bible-view .rd-smloc:focus { outline: none; }
#bible-view .rd-smloc:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }