/* ===== Color tokens ===== */
    :root {
        --bg-page: #f0e9d8;
        --bg-card: #f4ecd8;
        --bg-card-hover: #ede4cc;
        --border-soft: #e0d4b3;
        --border-strong: #cfbf94;
        --text-primary: #1a1612;
        --text-secondary: #5e564b;
        --accent: #952004;
        --accent-soft: #fdf6f4;
        --woj: #b8341c;
        --link: #2c5aa0;
    }

    /* ===== Reading typography ===== */
    body, .passage-text, .std-text, .passage-content {
        font-family: Georgia, "Iowan Old Style", "Charter", "Source Serif Pro", serif !important;
        -webkit-font-smoothing: antialiased;
        color: var(--text-primary);
    }

	/* Reading column.
	   A hard `max-width: 68ch` here caps the *text* while the card stays full
	   width, which just strands the column between two empty gutters. Width is
	   reclaimed by trimming the card's padding instead (see .passage-box).
	   To cap the measure anyway, set --measure to e.g. 72ch. */
    .passage-content,
    .version-NIV, .version-ESV, .version-NIVUK,
    [class*="version-"],
    .std-text {
        max-width: var(--measure, none) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Passage text is sized in rem, never px. BibleGateway's Font Size control
       works by setting an inline font-size on <html> (10px default, up to 14px
       at X-Large) and sizing all passage copy in rem. An absolute px value here
       — especially with !important — overrides that and the control does
       nothing. 1.7rem = 17px at the default root, so the look is unchanged. */
    .passage-text p, .std-text p {
        font-family: Georgia, "Iowan Old Style", "Charter", "Source Serif Pro", serif !important;
        font-size: 1.7rem !important;
        line-height: 1.75 !important;
        margin: 0 0 0.75em !important;
        color: var(--text-primary);
        letter-spacing: 0;
    }

    /* Section headings.
       .std-text h3 matches NOTHING on a passage page — the real headings are
       plain `.passage-text h3`, which meant they kept BG's default of
       system-ui 15px bold: SMALLER than the 17px body text they introduce.
       2rem = 20px, so they now read as headings at 1.18x body. */
    .std-text h3,
    .passage-text h3 {
        font-family: Georgia, "Iowan Old Style", "Charter", serif !important;
        font-size: 2rem !important;
        font-weight: 700 !important;
        font-style: italic;
        color: var(--text-primary) !important;
        margin: 1.1em 0 0.5em !important;
        text-transform: none;
        letter-spacing: 0;
        border-bottom: none;
        padding-bottom: 0;
    }
    /* "Footnotes" / "Cross-references" section labels sit below the passage */
    .passage-text h4 {
        font-family: Georgia, "Iowan Old Style", "Charter", serif !important;
        font-size: 1.7rem !important;
        font-weight: 700 !important;
        font-style: italic;
        color: var(--text-secondary) !important;
        margin: 1.4em 0 0.4em !important;
    }

    /* ===== Verse numbers ===== */
    .versenum {
        font-family: Georgia, serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--accent) !important;
        vertical-align: super;
        margin-right: 3px;
        opacity: 0.8;
    }

    .woj { color: var(--woj) !important; }

    /* ===== Inline links inside passage ===== */
    .passage-text a, .std-text a {
        color: var(--link) !important;
        text-decoration: none !important;
        border-bottom: 1px solid transparent;
        transition: border-color 0.15s;
    }
    .passage-text a:hover, .std-text a:hover {
        border-bottom-color: var(--link);
    }

    /* ===== Page background (every page) ===== */
    html, body {
        background: var(--bg-page) !important;
    }
    body, .page-col, .content, .passage-resources-container {
        background: var(--bg-page) !important;
    }
    /* Non-reading pages that render their own content shell — the Passage
       Lookup/Keyword Search/Topical Index forms at /passage/, /keyword/,
       /topical/, the quicksearch results page, /devotionals/, and
       /reading-plans/ — each wrap their content in a differently-named
       plain-white div (BG doesn't reuse one class across these templates):
       .content-section + .serp-filters for the lookup/search pages,
       .all-premium-devos + .non-premium-devos for the devotionals index,
       .basic-intro for the reading-plans browse intro blurb. Every other
       surface on the site is the cream page colour or the parchment card
       colour; a bright white panel in the middle of either read as visually
       broken rather than as a page that just hadn't been reached yet. Same
       fix, added per page template as they turn up rather than guessed at
       up front — there isn't one shared wrapper class to hook once for all
       of them. */
    .content-section, .serp-filters,
    .all-premium-devos, .non-premium-devos,
    .basic-intro {
        background: var(--bg-page) !important;
    }
    /* One level deeper on /devotionals/: each individual subscription card
       (.plan-item — "Charles Spurgeon's Morning and Evening" etc. under
       "YOUR CURRENT DEVOTIONALS") carries its own near-white
       rgb(250,248,247), not quite pure white but close enough to still read
       as a stray un-themed card sitting on the (now-fixed) cream page behind
       it. --bg-card rather than --bg-page since this is a nested card, not
       another page-level wrapper — matches how every other card on the site
       (.sidebar-box, .passage-box, resource covers) sits one shade warmer
       than the page around it. */
    .plan-item {
        background: var(--bg-card) !important;
    }
    /* ===== /user/annotations/ — the All/Favorites/Highlights/Notes tabs.
       .content-section sizes purely to its list, so a tab with 0-1 items
       (a fresh Favorites tab, a single Note) renders as a squat bordered
       card stranded above a large empty stretch of page background — the
       "dwarfed" look reported live on the Favorites tab with 0 items.
       A floor on the card keeps it holding its own regardless of count,
       and the truly-empty list gets a centred placeholder instead of
       collapsing to nothing (BG leaves a bare whitespace text node in
       .annotations-list even when there's nothing, so :empty never
       matches — :not(:has(*)) checks for child *elements* instead). */
    .user-annotations .content-section {
        min-height: 320px;
        box-sizing: border-box;
    }
    .user-annotations .annotations-list:not(:has(*)) {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 160px;
    }
    .user-annotations .annotations-list:not(:has(*))::after {
        content: "Nothing here yet.";
        color: var(--text-secondary);
        font-style: italic;
        font-size: 15px;
    }
    /* ===== "Your Current Devotionals" matches the home page's own
       "Today's Devotionals" checklist widget (#bg-devo-checklist in
       BibleGateway Devotional Checklist) — one card, rows divided by a
       top border rather than each subscription being its own separate
       card with gaps between. No checkboxes here (that widget's
       Read/Pray/Meditate tracking is a home-page-only feature).
       Pared back further on request to just the plan title + progress bar
       per row — .plan-desc, .action-link (the Read button), and
       .manage-links are all hidden outright rather than styled, so the
       title link is the only way into a plan from this list.
       Real markup (captured live via a logged-in session — this section
       only renders for a subscriber, so it can't be fetched anonymously):
         .subscribed-list.active-list > .plan-item > .plan-info >
           .plan-info-title (.plan-title, .plan-desc, progress.plan-progress)
           + .action-link > a.btn.read-btn
         .plan-item > .manage-links, .rp-calendar-manage
       Every layout property below needed !important that it didn't have —
       an earlier version of this rule block without !important simply
       never rendered (reported live), which points at BG's own native
       rules for these same classes winning on specificity. */
    .subscribed-list.active-list {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: 18px !important;
        box-shadow: 0 1px 2px rgba(120, 90, 40, 0.04), 0 8px 32px rgba(120, 90, 40, 0.06) !important;
        padding: 24px 28px !important;
    }
    /* Each row sits flush against its neighbours inside that one card now,
       rather than being its own rounded card with an 8px gap below it —
       the divider (border-top, skipped on the first row) is what
       separates entries instead. */
    .subscribed-list .plan-item {
        background: none !important;
        padding: 12px 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-top: 1px solid var(--border-soft) !important;
    }
    .subscribed-list .plan-item:first-child {
        padding-top: 0 !important;
        border-top: none !important;
    }
    .subscribed-list .plan-item:last-child {
        padding-bottom: 0 !important;
    }
    .plan-item .plan-info {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 14px !important;
    }
    .plan-item .plan-info-title {
        flex: 1 1 180px !important;
        min-width: 0 !important; /* required for text-overflow/line-clamp to actually clip in a flex child */
    }
    .plan-item .plan-title {
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .plan-item .plan-title a { color: var(--text-primary) !important; }
    .plan-item .plan-progress {
        display: block !important;
        width: 100% !important;
    }
    .plan-item .action-link,
    .plan-item .manage-links {
        display: none !important;
    }
    /* Two native BG paddings on .plan-title found via devtools, not
       written by this stylesheet — zeroed here since they can't be
       deleted at the source. */
    .page-devotionals.planvotionals-select .plan-title {
        padding-bottom: 0 !important;
    }
    .page-devotionals .plan-title, .page-readingplans .plan-title {
        padding: 0 !important;
    }

    @media (max-width: 1024px) {
        .subscribed-list.active-list {
            padding: 20px !important;
        }
        .plan-item .plan-info {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 8px !important;
        }
        .plan-item .plan-info-title {
            flex: 1 1 auto !important;
            width: 100% !important;
        }
        .plan-item .plan-title {
            white-space: normal !important;
        }
    }
    /* The lookup forms' own text fields (passage input, keyword input, topic
       search) still carried their own plain-white background and square
       corners after the panel around them stopped being white — same
       treatment as .quick-search above, so a form on these pages reads as
       the same UI as the search bar in the header rather than a leftover
       browser-default field. */
    .content-section input[type="text"],
    .content-section input[type="search"] {
        border-radius: 8px !important;
        border: 1px solid var(--border-strong) !important;
        background: var(--bg-card) !important;
        color: var(--text-primary) !important;
        padding: 10px 14px !important;
    }
    .content-section input[type="text"]:focus,
    .content-section input[type="search"]:focus {
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 3px rgba(149, 32, 4, 0.12) !important;
        outline: none;
    }
    /* ===== Left icon rail — floor its height to the viewport =====
       BG's own <nav> (the burgundy icon rail: Listen, Search, Bookmarks,
       Devotionals...) is position:absolute with height:100%, reading its
       height off .nav-content, its nearest positioned ancestor — which
       itself only grows to fit .page-col's content. On any page shorter
       than one screenful (e.g. /user/annotations/ with a single note,
       or an empty Favorites tab) .nav-content comes up short too, so the
       rail runs out partway down the screen while the cream page
       background (painted by html/body, which propagate to the whole
       canvas regardless of content height) keeps going — the rail visibly
       stops short of the bottom of the browser window. Not scoped away
       from body.page-passage: that page is already pinned to height:100%
       by the rule below, so this is a no-op floor there, not a conflict. */
    .nav-content {
        min-height: 100vh;
    }

    /* ===== Sticky footer ads =====
       Logged-out pages can receive this AdThrive/Raptive unit after the page
       has already rendered. It is fixed over the viewport rather than taking
       part in layout, so it covers both the last reading lines and our Listen
       panel. Attribute/class selectors also catch numbered replacements that
       the ad runtime injects later without needing a MutationObserver. */
    [id^="AdThrive_Footer_"].adthrive-sticky,
    .adthrive-ad.adthrive-footer.adthrive-sticky,
    .adthrive-footer-desktop.adthrive-sticky {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* ===== No horizontal scroll, reading page only =====
       height:100% + overflow:hidden here is what makes the independent-scroll
       reading layout below possible, but it also traps every OTHER page — home,
       search results, reading-plan list — to one viewport's worth of content
       with no way to reach anything below the fold, since those pages actually
       need to scroll normally. Was gated on `:has(.passage-box)`, which was
       wrong: BibleGateway reuses the `.passage-box` class for the homepage's
       Verse of the Day widget too, so the gate fired there as well and froze
       the entire homepage at one screenful. `body.page-passage` is BG's own
       page-identifying class and only appears on the real reading view. */
    html:has(body.page-passage), body.page-passage {
        height: 100%;
        overflow: hidden !important;
        max-width: 100vw;
    }
    /* Scoped to layout containers, not `*`. A universal max-width also applies
       to popups, dropdowns and images, and 100vw includes the scrollbar gutter
       — so it can cause the very overflow it's meant to prevent. The real
       source of horizontal scroll was .passage-box's side margins (see below).
       Gated like everything else below: .passage-box is also the homepage's
       Verse of the Day widget. */
    body.page-passage .page-col, body.page-passage .content,
    body.page-passage .passage-resources-container,
    body.page-passage .passage-resources, body.page-passage .passage-box,
    body.page-passage .resources {
        max-width: 100%;
    }

    /* ===== INDEPENDENT SCROLL CONTAINERS =====
       .page-col, .content and [role="main"] are BibleGateway's shared page
       shell, present on every page site-wide — not just the reading view. Same
       reasoning as above: pin the fixed-height flex-column treatment to pages
       that actually have the two independently-scrolling columns to justify it.
       .passage-box and .resources are gated for the same reason as the top of
       the file: BibleGateway reuses .passage-box for the homepage's Verse of
       the Day widget, which is maybe 80px tall where it sits. Forcing
       `height: 100% !important` onto it clipped the widget down to its
       reference line and put a scrollbar on it, hiding the actual verse text
       and the audio/share controls beneath. */
    body.page-passage .page-col {
        height: 100vh;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        max-width: 100%;
    }
    body.page-passage .content {
        flex: 1;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    body.page-passage [role="main"] {
        flex: 1;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
    }

    body.page-passage .passage-resources-container {
        flex: 1;
        display: flex !important;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        overflow: hidden !important;
    }
    body.page-passage .passage-resources {
        flex: 1;
        min-height: 0;
        min-width: 0;
        overflow: hidden !important;
        align-items: stretch !important;
    }
    body.page-passage .passage-box {
        overflow-y: auto !important;
        max-height: none !important;
        height: 100% !important;
        min-width: 0;
    }
    body.page-passage .resources {
        overflow-y: auto !important;
        max-height: none !important;
        height: 100% !important;
        min-width: 0;
    }
    /* A :has(.crossref-tooltip) rule toggling these two panels to
       overflow:visible while a verse-preview popup was open used to live
       here, meant to stop the popup being clipped. Reverted — it broke
       real behaviour instead: overflow:auto is what makes .passage-box/
       .resources scroll independently at all (see height:100% above), so
       switching it to visible the instant the popup's element appears
       tore out that scroll container out from under an in-progress
       interaction — reported live as the page jumping to the top,
       becoming hard to scroll back, and the popup itself then failing to
       render in the right place (its position was calculated against the
       layout as it existed a moment before this rule changed it out from
       under it). The clipping this was trying to fix is still
       unaddressed; needs a fix that doesn't touch these containers'
       overflow while they're mid-scroll. */
    body.page-passage .sticky-resources {
        max-height: none !important;
        height: auto !important;
		border: none !important;
    }

    /* BG's own CSS animates passage-box max-width at 0.5s when tabs switch */
    body.page-passage .passage-box,
    body.page-passage .resources,
    body.page-passage .sticky-resources { transition: none !important; }

    /* Custom scrollbars */
    body.page-passage .passage-box::-webkit-scrollbar,
    body.page-passage .resources::-webkit-scrollbar { width: 10px; }
    body.page-passage .passage-box::-webkit-scrollbar-track,
    body.page-passage .resources::-webkit-scrollbar-track { background: transparent; }
    body.page-passage .passage-box::-webkit-scrollbar-thumb,
    body.page-passage .resources::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 10px;
        border: 2px solid var(--bg-page);
    }
    body.page-passage .passage-box::-webkit-scrollbar-thumb:hover,
    body.page-passage .resources::-webkit-scrollbar-thumb:hover {
        background: var(--accent);
    }

    /* ===== Top header — keep search bar from being clipped ===== */
    .top-wrapper, .float-header, .search-form-nav {
        background: var(--bg-page) !important;
        max-width: 100% !important;
    }
    .top-wrapper, .search-form-nav { overflow: visible; }
    /* float-header must not clip — login/profile sits at its far right */
    .float-header { overflow: visible; padding-right: 16px; }
    /* Prevent the account/login area from being squeezed out */
    .account, .account-links, .account-info { flex-shrink: 0 !important; display: flex !important; visibility: visible !important; }

    /* ===== Compact header =====
       The chrome above the reading area was 239px (~22% of a 1065px viewport)
       before any text appeared. These trims reclaim ~85px for the passage and
       resources columns without removing anything. */
    .search-form-nav { margin-bottom: 8px !important; }
    .bbl-fontsize {
        /* breathing room between the search row and Bible Book List / Reading Plan */
        margin-top: 14px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    /* ===== Reclaim the near-empty account row =====
       .top-wrapper existed only to hold the profile button on its own 42px
       line. Collapse it and float the button into the search row instead, to
       the right of the version picker.

       This whole trick assumes the search row it floats over is the one on the
       reading page — collapsing .top-wrapper and absolutely-positioning
       .sys-announce over whatever sits below it on OTHER pages (home, search
       results) landed the account button in the wrong place, or on top of
       content, since those pages don't have the same row directly beneath.
       Gated to the reading view like the scroll containers above. */
    body.page-passage .page-col { position: relative; }
    body.page-passage .top-wrapper {
        height: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    body.page-passage .sys-announce {
        position: absolute !important;
        /* the button is sized to the search row's own height below, so this is
           simply the row's top rather than a centring fudge */
        top: 32px !important;
        right: 6px !important;
        left: auto !important;
        /* MUST shrink-wrap. As a full-width absolutely-positioned bar at
           z-index 60 this sits invisibly over the search field and eats every
           click on it. pointer-events below is the belt to that braces. */
        width: auto !important;
        max-width: none !important;
        z-index: 60;
        pointer-events: none;
    }
    body.page-passage .sys-announce .login { pointer-events: auto; }
    /* keep the version picker clear of the button now sharing that row */
    body.page-passage .search-form-nav { padding-right: 152px !important; }
    /* NOTE: the .sidebar-tabs row (Resources / Hebrew-Greek / Your Content) is
       a stubborn 64px. Trimming its padding, min-height, height and flex
       alignment all leave it unchanged, so no rule for it here — whatever pins
       that height isn't reachable from CSS. ~30px still available if solved. */

    /* ===== Flatten nested cards ===== */
    .passage-table,
    .passage-cols,
    .passage-col,
    .passage-col-mobile {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    .passage-box {
        background: var(--bg-card) !important;
        border-radius: 18px !important;
        box-shadow:
            0 1px 2px rgba(120, 90, 40, 0.04),
            0 8px 32px rgba(120, 90, 40, 0.06) !important;
        /* Keep enough side gutter for BibleGateway's native hanging verse
           indent. At 40px the number itself landed on the rounded card border
           and was visibly clipped; 48px keeps it inside without returning to
           BG's much wider original 56/64/80px padding. */
        padding: 28px 48px 48px !important;
        margin: 8px 4px !important;
        border: 1px solid var(--border-soft) !important;
    }
    /* BG sizes .passage-box and .resources to exactly fill .passage-resources,
       so the 8px side margins above overflow the row and push the resources
       column past the viewport (clipping its text). Letting the card shrink
       absorbs the margins instead. Reading-page only: the homepage's Verse of
       the Day widget also carries .passage-box, and its ancestor is a
       column-flex box of its own (BG's `.mast.item`) sized for the widget's
       original compact height — `flex: 1 1 0` there told the box to accept
       whatever share of that height the flex algorithm handed it rather than
       size to its own content, so once the box also gained a real
       `overflow: hidden` (see below) it clipped the verse text and the whole
       card collapsed to just the citation line. */
    body.page-passage .passage-box {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* ===== Verse of the Day (homepage widget) =====
       Reuses .passage-box for its card (see the gating notes above), which is
       why it already picks up the card background/padding/shadow just above.
       The verse text itself is a bare, unclassed <div> (not a <p> — BG marks
       up "Read Full Chapter" and the email-signup disclaimer as <p>s in the
       same box, and a plain `.passage-box p` rule caught those two instead,
       blowing up the fine-print disclaimer to reading-page size). The verse
       div is the one unclassed element right after .verse-bar, so that's the
       anchor. Same serif reading face as the passage view, just bigger: this
       is one featured line, not a page of running text.
       !important + this many classes because BG's own CSS already sets a
       more specific font-family here (measured: it was losing to a bare
       `body { font-family: ... !important }` despite that also being
       !important — specificity, not source order, decided it). */
    /* The background-art layer (Passage Background script) deliberately
       bleeds a few px past the card edge and relies on an overflow-clipping
       ancestor to trim it — on the reading page that's .passage-box's own
       overflow-y:auto (see INDEPENDENT SCROLL CONTAINERS above). This widget
       doesn't have that — it's not gated as the scroll container, on purpose,
       so the homepage can scroll normally — so without its own clip the
       plate spilled out past the card's rounded bottom corner into the page
       below. `overflow: hidden` alone is safe here: it only clips positioned
       children that exceed the box, and this box's height is auto (from its
       content), so normal flow content never reaches that edge. */
    body.page-home .passage-box { overflow: hidden !important; }

    body.page-home .passage-box .verse-bar + div {
        font-family: Georgia, "Iowan Old Style", "Charter", "Source Serif Pro", serif !important;
        font-size: 2.1rem !important;
        line-height: 1.6 !important;
        color: var(--text-primary) !important;
        letter-spacing: 0;
    }

    /* ===== Hide redundant in-passage dropdowns =====
       Hidden everywhere, including parallel view (?version=A;B[;C]) — see
       the parallel-view translation picker further down for why the
       *reference* half of this (.bcv) stays hidden even there. .dropdowns
       (the translation select) gets its own reveal below. */
    .passage-display .bcv,
    .passage-display .translation,
    .passage-display .clearfix {
        display: none !important;
    }
    /* Every child of this h1 is hidden above (.bcv/.translation/.clearfix),
       so it always renders at 0 height — but it kept reserving a 24px
       margin-bottom below that empty box regardless, an unnecessary gap
       with nothing visible on either side of it to separate. Zeroed;
       .passage-text's own margin-top (below) is what actually spaces the
       passage away from the toolbar above it now. */
    .passage-display { margin: 0 !important; padding: 0 !important; }
    .passage-col .dropdowns { display: none !important; }

    /* ===== Parallel view: per-column translation picker =====
       Structure is .passage-cols > N x .passage-col-tools, each wrapping one
       .passage-tools and its .passage-col as siblings — detect "more than one
       column" via 2+ adjacent .passage-col-tools (same trick as the toolbar
       shrink rule above).

       .bcv, the per-column *reference* picker, is deliberately left hidden
       here (unlike .dropdowns below) even though it's the same kind of
       native-but-unstyled control. There's only ever one `search=` reference
       for the whole page — every column is a translation of that same
       passage, not an independent one (confirmed: BG's own "add parallel"/
       "close" links only ever add or drop a *version*, never a second
       reference) — so picking a book/chapter from any one column's .bcv
       would navigate the entire page, all columns included, which a picker
       that visually belongs to one column would misrepresent as scoped to
       it. The header's own quick-search box and Bible Book List already
       cover changing the shared reference at the page level where it
       actually applies; no need for a second, misleading way to do the same
       thing. */
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-col .dropdowns {
        display: flex !important;
        align-items: center;
        gap: 6px;
        margin: 0 0 16px !important;
    }
    /* .dropdowns' native <select>/<button> children do not get styled here —
       a native <select> is a "native form control" as far as Chrome's OS-
       level Force Dark Mode is concerned, which injects a
       `filter: brightness(0.28)` directly onto it with no CSS escape hatch,
       not even `color-scheme: light` (same finding already documented for
       BibleGateway Listen.user.js's voice picker). BibleGateway Parallel
       View Pickers.user.js mounts a div/button-based replacement instead —
       never a native form control, so never touched by that heuristic. That
       script also relocates .close-translation (BG's "remove this version"
       control, native markup elsewhere in the column) into this row, styled
       below, rather than leaving it in its native position pinned near the
       toolbar.

       The native <select>/button themselves are hidden right here in CSS
       (not left to the script's own `el.style.setProperty('display','none',
       'important')`, which still runs after the script loads) — otherwise
       they render for one frame on every page load, a visible flash of BG's
       native select + "Update" button before the script hides them and
       mounts the replacement.

       Scoped to *direct children* of .dropdowns (`>`) — the replacement
       picker's own trigger is a <button> too, but it's nested one level
       deeper inside its .bg-pv-picker wrapper div, so `>` hides only BG's
       native controls and leaves the replacement alone. */
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-col .dropdowns > select,
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-col .dropdowns > button {
        display: none !important;
    }
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-col .dropdowns .close-translation {
        position: static !important;
        margin: 0 !important;
    }
    /* The <a> itself carries its own `position: absolute; top:15px; right:
       15px` (BG's native styling, meant to overlay it within the
       .close-translation div as originally laid out) — static on the div
       above isn't enough on its own: absolute on the link then escapes to
       the *next* positioned ancestor up the tree instead, landing wherever
       that happens to be rather than in this row. Static here too flattens
       it into normal flow alongside the picker as intended. */
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-col .dropdowns .close-translation a {
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 27px;
        border-radius: 999px !important;
        border: 1px solid var(--border-strong) !important;
        background: var(--bg-card) !important;
        opacity: 1 !important;
        transition: all 0.2s;
    }
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-col .dropdowns .close-translation a:hover {
        border-color: var(--accent) !important;
        background: var(--accent-soft) !important;
    }
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-col .dropdowns .close-translation svg {
        width: 10px !important;
        height: 10px !important;
    }

    /* Hide right sidebar collapse button */
    .toggle-sidebar { display: none !important; }

    /* ===== Passage tools row ===== */
    .passage-tools {
        gap: 14px;
        padding: 8px 0 24px;
        border-bottom: 1px solid var(--border-soft);
        margin-bottom: 32px;
    }
    .passage-tools a, .passage-tools span {
        opacity: 0.5;
        transition: opacity 0.2s;
    }
    .passage-tools a:hover, .passage-tools span:hover { opacity: 1; }
/* ===== Restore toolbar to natural flow =====
   Was position:absolute — harmless with exactly one .passage-tools (single-column
   view), but BG renders one full .passage-tools per .passage-col in parallel view
   (?version=A;B[;C]), and an absolutely-positioned row is sized by its own content
   (see the old 68ch max-width below) rather than its column, so every column's
   toolbar lands at the same top-left corner and overlaps every other column's —
   audio/art/focus/etc. from column 1 rendering visually inside column 2's space.
   In flow, each toolbar is naturally confined to its own column. This also fixes
   the single-column "strikethrough" bug (documented above/in HANDOFF.md): out of
   flow the toolbar reserved no space, so its border-bottom got drawn through
   wherever the passage heading happened to land. .passage-text's native 50px
   margin-top (below) assumed the old absolute toolbar and needs clearing now
   that the toolbar has real height of its own — same fix already shipped for
   mobile at the .passage-tools position:static rule further down. */
    .passage-tools,
    .passage-tools.w-sidebar,
    .passage-tools.no-sidebar {
        position: static !important;
    }
    .passage-text {
        margin-top: 8px !important;
    }
    /* .passage-tools' own parent, .passage-col-tools, is display:flex with the
       default row direction — BG built that expecting the toolbar to be
       absolutely positioned out of flow, leaving .passage-col alone in the
       row. Now that the toolbar is a real in-flow sibling, row direction
       puts it beside .passage-col instead of above it, squeezing both into
       half the column's width. Column direction stacks them the way the
       design actually reads: toolbar row, then the passage card below it. */
    .passage-col-tools {
        flex-direction: column !important;
    }
    /* BG gives .passage-tools flex:1 1 0% (verified: flex-grow 1, flex-basis
       0%), sized for the old row-direction layout where it needed to match
       .passage-col's cross-axis share, not for taking up a fraction of
       .passage-col-tools' height now that direction is column. Left alone it
       split the column's height ~1:2 with the passage text, leaving a large
       empty band above/below the icon row (flex centers .passage-tools'
       content within whatever height flex-grow hands it) instead of a
       compact toolbar row. flex: 0 0 auto sizes it to its own content only,
       leaving the rest of the height for .passage-col. */
    .passage-tools {
        flex: 0 0 auto !important;
    }
    /* ===== Parallel view: gap + divider between columns =====
       .passage-col-tools (one per column) had zero padding and zero gap
       between siblings — measured live, column 0's right edge and column 1's
       left edge were the same pixel. With nothing to separate them, content
       from each column visually collided across the seam: the close-"X"
       button's own -32px offset (meant to bleed into its column's own
       padding) landed 6px inside the *next* column instead, and the last
       icon of one toolbar (often that column's lone audio button) sat flush
       against the first icon of the next, reading as one run-on group
       instead of two columns' worth of controls. Padding on every column
       plus a border on all but the first gives every column breathing room
       on both sides and draws an actual visible seam, rather than leaving
       the boundary implied only by where the background art happens to
       stop. */
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-col-tools {
        padding: 0 20px;
    }
    /* Not :first-child — a .passage-col-tools is never its parent's literal
       first child (.prev-next, the chapter-arrow pair, always comes first
       in .passage-cols), so that version of this rule silently never
       matched anything. (:first-of-type doesn't fix it either — that
       matches by tag name, not by class, and .prev-next is a <div> too, so
       :first-of-type still lands on .prev-next.) .prev-next + .passage-col-
       tools — "the .passage-col-tools right after .prev-next" — reliably
       picks out the true first one instead. Left uncaught, the outermost
       columns stacked BOTH this 20px padding AND .passage-box's own 16px
       card padding on their outer edge — ~36px of total gutter there
       instead of the intended 16px, visible live as noticeably more empty
       space on the two outer edges than between columns.
       :last-child, on the other hand, already matched correctly — the last
       .passage-col-tools genuinely is its parent's last child, nothing
       else follows it. */
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .prev-next + .passage-col-tools {
        padding-left: 0;
    }
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-col-tools:last-child {
        padding-right: 0;
    }
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-col-tools + .passage-col-tools {
        border-left: 1px solid var(--border-soft);
    }
    /* ===== Search bar =====
       .search-and-submit wraps .search-bar (the input pill) and a submit
       button as two flex siblings, each taking their own share of the
       row's width — BG ships two different button markups for this,
       .search-submit-small and .search-submit-large (swapped by its own
       responsive CSS depending on viewport, both present in the DOM), so
       both need the same treatment or only one screen size gets it.
       Absolutely positioning the button inside .search-and-submit and
       letting .search-bar fill the whole row merges them visually into
       one pill — the input's own padding-right below just needs to clear
       the button now sitting on top of its right edge. */
    .search-and-submit {
        position: relative;
    }
    .search-and-submit .search-bar {
        width: 100%;
    }
    .search-and-submit .search-submit-small,
    .search-and-submit .search-submit-large {
        position: absolute !important;
        /* Was top:0/bottom:0 (stretch to fill .search-and-submit's own
           height) on the theory that .search-and-submit has no explicit
           height of its own and is sized by the input, so stretching would
           track the input's real rendered height. In practice
           .search-and-submit renders taller than the visible .quick-search
           pill (BG packs other, invisible-but-space-taking markup in
           alongside the input), so the stretched button came out taller
           than the pill itself — and since .search-submit below derives its
           width from that height via aspect-ratio, it grew wider too,
           ballooning into an oversized circle that overflowed the pill's
           top/bottom edges and bulged out past its right corner instead of
           sitting neatly inside it. Centering on a fixed height instead
           decouples the button from that unreliable container height — 39px
           matches .search-submit's real rendered size confirmed live via
           .sys-announce .login sizing to match it, below. */
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%);
        /* Was 5px. The button circle and the pill's rounded right end share
           the same radius (both derive from a 39px height/diameter), so any
           inset here leaves a crescent-shaped gap between the two arcs
           instead of a straight margin — 5px made that crescent visible as
           a sliver of the pill's own background peeking through on the
           button's right/top. 0 lets the button's arc sit flush against the
           pill's, closing the gap; the input's own border still traces
           around it since the border sits outside the padding box this
           offset is relative to. */
        right: 0 !important;
        width: auto !important;
        z-index: 2;
    }
    .search-form .quick-search {
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
        border-radius: 999px !important;
        border: 1px solid var(--border-strong) !important;
        padding: 12px 52px 12px 22px !important;
        font-size: 15px !important;
        background: var(--bg-card) !important;
        transition: all 0.2s;
        color: var(--text-primary) !important;
    }
    /* BG's native search input height is rem-based, so X-Small compresses the
       query field while the fixed-size submit button and version pill keep
       their normal UI height. Keep reading-size changes out of this chrome
       row and give all three controls the same measured height. */
    html.fs-xsmall .search-and-submit,
    html.fs-xsmall .search-form .quick-search,
    html.fs-xsmall .search-dropdown-display {
        height: 39px !important;
        min-height: 39px !important;
        box-sizing: border-box !important;
    }
    .search-form .quick-search:focus {
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 3px rgba(149, 32, 4, 0.12) !important;
        outline: none;
        /* Match the neighbouring version dropdown pill instead of flashing
           bright white against the warm reading chrome when focused. */
        background: var(--bg-card) !important;
    }
    .search-submit {
        /* Was a fixed 34px circle, shorter than .quick-search's actual
           rendered height (padding + border), so the button read as
           squashed inside the taller pill instead of matching its edges.
           Then tried deriving height from the position rule's top:0/bottom:0
           stretch with aspect-ratio for a matching width — but that stretch
           tracks .search-and-submit's own (unreliable, often taller than the
           visible pill) height, not .quick-search's, so the circle came out
           oversized and overflowed the pill. 39px is the pill's actual
           rendered height (confirmed live, see .sys-announce .login above),
           fixed here directly instead of derived. */
        width: 39px !important;
        height: 39px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        border-radius: 999px !important;
        background: var(--accent) !important;
    }
    .search-submit:hover { background: #7a1a03 !important; }

    /* The version picker sits directly under the search field and is the same
       kind of control, but it was still inheriting the page's Georgia while the
       field above it had been switched to the interface sans — so at the same
       16px it read noticeably larger and wider, and the pair looked mismatched.
       Note the visible control is .search-bar-version; the <select> it is built
       from is 0x0 and styling that does nothing. */
    .search-bar-version, .search-bar-version * {
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
    }
    /* The size has to be set on the display element itself: the container is
       16px, but .search-dropdown-display / .version-display inside it are 19px,
       which is what actually paints and what still read as oversized next to the
       search field once the typeface matched. */
    .search-dropdown-display, .version-display {
        font-size: 16px !important;
    }

    .search-dropdown-display {
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
        border-radius: 999px !important;
        border: 1px solid var(--border-strong) !important;
        padding: 10px 18px !important;
        background: var(--bg-card) !important;
        transition: all 0.2s;
        color: var(--text-primary) !important;
    }
    .search-dropdown-display:hover {
        border-color: var(--accent) !important;
        background: var(--accent-soft) !important;
    }

    /* Passage History supplies the unified reference/history picker. Hide the
       native autocomplete in the first stylesheet paint so React cannot flash
       its competing suggestion panel before the userscript initializes. */
    .search-bar .autocomplete {
        display: none !important;
    }

    /* ===== Left nav rail ===== */
    /* A single photographic plate under `background-size: cover` was tried
       here first (a Genesis 1 engraving) and measured badly: this rail is
       collapsed to 60px most of the time and expands to ~500px on hover, and
       at either width `cover` zooms into one small, essentially random patch
       of a wide engraved scene — it read as an unrecognisable dark smear, not
       as anything. A single big image can't crop sensibly into a strip this
       narrow no matter which plate is picked.
       A repeating tile sidesteps the problem instead of trying to solve it:
       one simple cross motif, small enough to repeat several times down the
       rail at either width, so what's actually on screen is always "several
       small crosses", identical at 60px and at 500px, rather than one large
       composition fighting the aspect ratio. Plain inline SVG so there's no
       photo licensing, no network fetch, and no crop to get wrong.
       Same z-index:0/-1 trick the Passage Background script uses on
       .passage-box: the pseudo-element is stacked behind nav's own content
       within nav's own stacking context, so the icons stay on top without
       needing z-index of their own. */
    nav {
        background: var(--accent) !important;
        border-right: none !important;
        position: relative;
        z-index: 0;
        overflow: hidden;
    }
    /* BG's own opaque maroon on the icon-menu wrapper and on each of its
       unclassed <ul> icon groups painted directly over nav::before in that
       whole region (measured: the pattern only showed above the logo and in
       the empty tail below the icons, nowhere between them, because these
       sit on top of the pseudo-element with their own solid fill) —
       transparent here lets the rail's own background, and the pattern
       behind it, show through instead of being masked. */
    .logo-menu-user, nav ul, .an-mobile-menu-closed { background: transparent !important; }
    nav::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        /* Bumped to prove the tile was actually rendering (it wasn't showing
           at all — see the BG-owned <ul> fix below), then measured live at
           that strength: full-opacity white crosses packed every 60px read
           as a loud repeating wallpaper grid, not a subtle accent. Backed
           off hard — thinner stroke, double the spacing, a third of the
           opacity — so what's on screen is a faint texture you'd notice on
           a second look, not a pattern that competes with the icons and
           labels sitting on top of it. */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg stroke='white' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cline x1='50' y1='36' x2='50' y2='64'/%3E%3Cline x1='40' y1='45' x2='60' y2='45'/%3E%3C/g%3E%3C/svg%3E");
        background-repeat: repeat;
        background-size: 100px 100px;
        opacity: 0.16;
        pointer-events: none;
    }
    .top-nav .top-menu .text {
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
        font-weight: 500 !important;
        font-size: 11px !important;
    }

    /* ===== Left rail: stay collapsed when logged out ===== */
    /* BG collapses the rail to 60px only for `body.plus` (or the unrelated
       `body.parallel-passages`). Logged out, neither class is on <body>, so
       the rail falls back to BG's default `nav { min-width: 200px }` and
       renders as a 200px slab of maroon down the whole page instead of the
       60px strip this theme is designed around.

       Worth being clear about whose gate this is: *this* stylesheet has no
       rule keyed on login state anywhere. The gate is BG's own, in
       passage.min.css under `@media screen and (min-width:1025px)`. So the
       fix is to restate BG's collapsed-rail declarations without the class
       gate, not to un-gate something of ours.

       The values below are copied from BG byte-for-byte (60px, 220px on
       hover, the 60px .page-col margin) on purpose. `body.plus` is added
       asynchronously — BG only sets it once /user/info.json comes back — so
       if these disagreed with BG's, the rail would visibly jump the moment
       the class landed. Identical values mean the class arriving is a no-op.
       Hover therefore also inherits BG's own `nav { max-width: 200px }`
       clamp exactly as it does for a Plus session; not corrected here, since
       matching the existing behaviour is the point.

       Same 1025px breakpoint as BG's, deliberately: below it nav is the
       horizontal top bar, not a rail, and forcing 60px would destroy the
       header outright. */
    @media screen and (min-width: 1025px) {
        nav {
            width: 60px;
            min-width: 0;
            /* Pin the rail as one unit so its logo and navigation actions keep
               their native spacing while the document scrolls underneath.
               `clip` retains collapsed-label clipping without adding a nested
               scroll container. */
            overflow: clip;
            position: fixed !important;
            left: 0 !important;
            top: 0 !important;
            bottom: 0 !important;
            height: 100vh !important;
            height: 100dvh !important;
            z-index: 1005 !important;
            transition: width 0.2s ease-in, min-width 0.2s ease-in;
        }
        /* This was sticky while nav itself scrolled. Keep it in normal flow now
           that the common parent is pinned, so it remains directly below the
           logo instead of trying to occupy the same viewport edge. */
        nav > .an-mobile-menu-closed {
            position: static;
            z-index: 1;
        }
        nav:hover {
            width: 220px;
            min-width: 220px;
            overflow: visible;
            transition: width 0.2s ease-out, min-width 0.2s ease-out;
        }
        /* The label beside each icon and the wordmark's text half. Without
           these the rail is 60px wide with 200px of text overflowing
           invisibly behind `overflow: hidden`, and hovering reveals nothing. */
        nav .logo svg .st0 .st0,
        nav .logo svg .text,
        nav .sub-menu,
        nav .top-nav .promo,
        nav .top-nav .text {
            max-height: 0;
            visibility: hidden;
            overflow: hidden;
            opacity: 0;
            transition: visibility 0.2s, max-height 0.2s ease-out, opacity 0.2s;
        }
        nav .sub-menu,
        nav .top-nav .text { width: 200px; }
        /* Only reachable logged out: BG renders a "Bible Gateway Plus" nav
           item with a yellow "LESS THAN $5/MO" promo, and drops the whole
           item once you're a subscriber — so it never appears in a logged-in
           DOM. It is NOT covered by the collapse group BG wrote, because
           .promo is a *sibling* of .plus-link rather than one of the .text
           labels. Left alone it is `width: 142px; margin-left: 40px`, so in a
           60px rail it starts at x=40 and gets sliced off at x=60 — a ~20px
           yellow sliver hanging under the Plus icon. Its margin also outlives
           `max-height: 0`, hence the explicit zero. */
        nav .top-nav .promo { margin: 0 !important; }
        nav .logo svg .st0 .st0.letter { width: 1.25px; }
        nav:hover .logo svg .st0 .st0,
        nav:hover .logo svg .text,
        nav:hover .sub-menu.expanded,
        nav:hover .top-nav .promo,
        nav:hover .top-nav .text {
            max-height: 300px;
            opacity: 1;
            visibility: visible;
            transition: visibility 0.2s, max-height 0.2s ease-in, opacity 0.2s;
        }
        /* nav is out of flow above, so the content column reserves the rail's
           width itself — BG pairs its own collapse rule with exactly this.
           Without it the passage text slides left underneath the rail. */
        .page-col { margin-left: 60px; }
    }

    /* ===== "MAX" badge under the logo — removed ===== */
    .logo::after { display: none !important; }

    /* ===== Resources sidebar ===== */
    .resources, .sidebar-box {
        background: transparent !important;
        border: none !important;
    }
    .resources, .resources * {
        font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif !important;
    }
    /* Remove any square border on the resources column itself */
    .resources {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
    .sidebar-box {
        margin: 8px 4px !important;
        border: none !important;
        background: transparent !important;
    }
    /* The 40px trough between the passage card and the resources panel was
       8 (card margin) + 8 (resizer) + 16 (.resources margin) + 8 (.sidebar-box
       margin). Trimmed to ~20px total. */
    .resources { margin-left: 4px !important; }

    /* ===== "Your Content" (notes) tab =====
       Every note row, the date/reference labels, and the Edit/Delete
       triggers are React output with no classes of their own — only inline
       styles set per-element — so most of this has to target by structure
       (.sidebar-notes > div > div is one note row) or by the exact inline
       value React sets (color: rgb(178, 178, 178) is the date), and win
       against those inline styles with !important where the property in
       question is one they set. The textarea and Cancel/Save buttons carry
       no inline style at all beyond size, so those rules need no !important.
    */
    .sidebar-notes h3 {
        font-family: Georgia, "Iowan Old Style", "Charter", serif !important;
        color: var(--accent) !important;
        font-size: 1.8rem !important;
        margin: 0 0 16px !important;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--border-soft);
    }
    /* One note row */
    .sidebar-notes > div > div {
        padding: 14px 0;
        border-bottom: 1px solid var(--border-soft);
    }
    .sidebar-notes > div > div:last-child { border-bottom: none; }
    /* Date badge (the inline rgb(178,178,178) gray is how React marks it) */
    .sidebar-notes span[style*="178, 178, 178"] {
        background: var(--bg-page);
        color: var(--text-secondary) !important;
        font-size: 1.1rem;
        padding: 2px 8px;
        border-radius: 10px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    /* Verse-range label right after the date */
    .sidebar-notes > div > div > span:nth-child(2) {
        font-weight: 700;
        color: var(--accent);
        margin-left: 6px;
    }
    /* Note body text. white-space: pre-wrap matters here — the note is
       plain text with real newlines in it, rendered into a plain <div>
       whose default white-space collapses them, so a note typed as several
       paragraphs displayed as one run-on block until this. */
    .sidebar-notes > div > div > div:first-of-type {
        font-family: Georgia, "Iowan Old Style", "Charter", serif !important;
        line-height: 1.6;
        color: var(--text-primary) !important;
        margin: 10px 0 !important;
        white-space: pre-wrap;
    }
    /* Edit/Delete — React underlines these like plain links; pill buttons
       read more like actions than like navigation. */
    .sidebar-notes span[style*="text-decoration: underline"] {
        text-decoration: none !important;
        background: var(--bg-card-hover);
        border-radius: 14px;
        padding: 4px 12px !important;
        font-size: 1.2rem;
        transition: background 0.15s, color 0.15s;
    }
    .sidebar-notes span[style*="text-decoration: underline"]:hover {
        background: var(--accent-soft);
        color: var(--accent) !important;
    }
    .sidebar-notes svg[name="edit"], .sidebar-notes svg[name="delete"] {
        fill: var(--text-secondary) !important;
    }
    /* Edit-note textarea + Save/Cancel — plain browser defaults otherwise */
    .sidebar-notes textarea {
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        padding: 10px;
        font-family: Georgia, "Iowan Old Style", "Charter", serif;
        font-size: 1.3rem;
        background: var(--bg-page);
        color: var(--text-primary);
    }
    .sidebar-notes button {
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 8px 18px;
        font-size: 1.2rem;
        cursor: pointer;
    }
    .sidebar-notes button:hover { background: #7a1a03; }
    /* Cancel is always the first of the pair — style it as the secondary
       action rather than a second red button competing with Save. */
    .sidebar-notes button:first-of-type {
        background: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border-strong);
    }
    .sidebar-notes button:first-of-type:hover { background: var(--bg-card-hover); }

    /* ===== Info Viewer (/user/annotations/ — All/Favorites/Highlights/Notes) =====
       Unlike the sidebar notes tab this is a plain server-rendered page with
       real classes and almost no inline styles, so ordinary (non-!important)
       rules are enough. */
    .info-viewer-nav-link {
        font-family: Georgia, "Iowan Old Style", "Charter", serif;
        font-size: 1.5rem;
    }
    .info-viewer-nav-link:hover { color: var(--accent); }
    .info-viewer-nav-list-item.active .info-viewer-nav-link {
        font-weight: 700;
    }
    .tab-total-results {
        color: var(--text-secondary);
        font-size: 0.85em;
    }
    .info-viewer {
        padding: 20px 0;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
    }
    .info-viewer-body { color: var(--text-primary); }
    .bible-item {
        border-color: var(--border-soft) !important;
        transition: background 0.15s;
    }
    .bible-item:hover { background: var(--bg-card-hover); }
    .item-icon.icon-note svg { fill: var(--accent); }
    .bible-item-title a {
        color: var(--accent) !important;
        font-weight: 700;
        text-decoration: none !important;
    }
    .bible-item-title a:hover { text-decoration: underline !important; }
    .bible-item-details {
        color: var(--text-secondary) !important;
        font-size: 0.85em;
    }
    .delete-annotation-link, .undo-annotation-link {
        color: var(--text-secondary) !important;
        text-decoration: none !important;
        background: var(--bg-card-hover);
        border-radius: 12px;
        padding: 2px 10px;
        margin-left: 6px;
    }
    .delete-annotation-link:hover, .undo-annotation-link:hover {
        background: var(--accent-soft);
        color: var(--accent) !important;
    }
    .info-viewer-pager a {
        color: var(--text-secondary);
        border-radius: 4px;
    }
    .info-viewer-pager li.active a {
        background: var(--accent);
        color: #fff;
    }

    /* ===== Resource library grid =====
       .pubs-library wraps fixed-width 158px cards with no justification, so
       whatever doesn't divide evenly piles up as dead space on the right edge
       (107px at a wide panel). Giving the cards flex-grow lets them absorb the
       remainder instead; the max-width stops a sparse last row from stretching
       into giant cards.
       Basis/cap brought down from 150/200 to 100/130: at 150/200 a typical
       panel only fit 2-3 cards per row, and once the image-fill fix below
       made each cover actually grow to fill its (over-)grown card, those 2-3
       covers ended up as oversized thumbnails — the opposite of what a quick
       "what resources are here" scan wants. Smaller basis fits more, smaller
       covers per row instead.
       flex-grow then dropped to 0: with it at 1, a short last row (say 2
       cards where full rows above held 5) grew those 2 cards to fill the
       row's whole width, so the last row's covers rendered visibly larger
       than every row above it — inconsistent sizing was worse than the dead
       space it was trying to avoid. 0 keeps every card the same fixed size;
       a partial last row now just ends early instead of stretching.
       .pubs-featured (the "Suggested Resources" / "Study Bibles" sections)
       needs the exact same basis/cap — missing it here was its own bug: the
       image-fill and margin fixes below apply to both containers, so once
       those made a cover fill 100% of its card, a .pubs-featured card with
       no width cap of its own filled 100% of a MUCH wider, unconstrained
       flex-item — one or two covers blown up edge-to-edge and upscaled
       past their native resolution into a blur. */
    .pubs-library, .pubs-featured, .pubs-studybible,
    .pubs-encyclopedia, .pubs-commentary, .pubs-dictionary {
        gap: 14px 10px !important;
        align-content: flex-start;
    }
    .pubs-library > *, .pubs-featured > *, .pubs-studybible > *,
    .pubs-encyclopedia > *, .pubs-commentary > *, .pubs-dictionary > * {
        flex: 0 1 100px !important;
        max-width: 130px !important;
    }
    /* The card's text block (title/PLUS badge/entry count, the sibling after
       the cover image) carries its own hardcoded inline width — 130px, BG's
       original card width, wider than the 100px this grid now runs cards at
       — so at this smaller size it overflowed its own card and bled text
       into the next column. Same fix as the image: percentage width beats a
       narrower inline px value. */
    .pubs-library > * > * > *:last-child,
    .pubs-featured > * > * > *:last-child,
    .pubs-studybible > * > * > *:last-child,
    .pubs-encyclopedia > * > * > *:last-child,
    .pubs-commentary > * > * > *:last-child,
    .pubs-dictionary > * > * > *:last-child {
        width: 100% !important;
    }
    /* Each card's own first child (a per-book class BG names after the title,
       e.g. .case-for-christ-study-bible — different on every book, so this
       has to be structural) carries a hardcoded 8px 28px 8px 0 margin on top
       of .pubs-library's own 10px column gap above, so the real gap between
       covers was closer to 38px — most of what read as "too much padding"
       around each book. The flex gap already spaces the cards; this margin
       was purely additive. */
    .pubs-library > * > *:first-child,
    .pubs-featured > * > *:first-child,
    .pubs-studybible > * > *:first-child,
    .pubs-encyclopedia > * > *:first-child,
    .pubs-commentary > * > *:first-child,
    .pubs-dictionary > * > *:first-child {
        margin: 0 !important;
    }
    .sidebar-box > div {
        background: var(--bg-card) !important;
        border-radius: 18px !important;
        border: 1px solid var(--border-soft) !important;
        box-shadow:
            0 1px 2px rgba(120, 90, 40, 0.04),
            0 8px 32px rgba(120, 90, 40, 0.06) !important;
        padding: 32px !important;
        overflow: hidden;
    }
    /* Kill inline white backgrounds on sidebar cards.
       .bg-tooltip is excluded: BibleGateway reuses that class for every popup
       it renders (cross-reference preview, footnote, share, page options), and
       each one carries an inline `background: rgb(255,255,255)` that these
       attribute selectors match exactly — blanking the popup entirely. */
    .sidebar-box > div > div:not(.bg-tooltip),
    .sidebar-box [style*="background: rgb(255, 255, 255)"]:not(.bg-tooltip),
    .sidebar-box [style*="background:#fff"]:not(.bg-tooltip),
    .sidebar-box [style*="background: #fff"]:not(.bg-tooltip) {
        background: transparent !important;
    }

    /* …but not the cross-reference verse preview. BG renders it with an inline
       `background: rgb(255, 255, 255)`, which the attribute selectors above
       match exactly — that left the popup fully transparent, so the page text
       underneath showed straight through it. Restore an opaque surface. */
    .sidebar-box .crossref-tooltip .bg-tooltip,
    .crossref-tooltip .bg-tooltip {
        background: var(--bg-card) !important;
        border-color: var(--border-strong) !important;
        color: var(--text-primary) !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        box-shadow: 0 6px 24px rgba(120, 90, 40, 0.18) !important;
    }
    /* ===== Popups & overlays =====
       BibleGateway ships every popup stock white (#fff on a #f0e9d8 page), and
       .bg-tooltip is the shared class behind all of them: page options, the
       share menu, footnote previews, the passage toolbox, and the little caret
       that points at the trigger. Theming the base class covers the lot —
       including the caret, which should match the popup's fill anyway. */
    .bg-tooltip {
        background: var(--bg-card) !important;
        border-color: var(--border-strong) !important;
        color: var(--text-primary) !important;
        box-shadow: 0 6px 24px rgba(120, 90, 40, 0.18) !important;
    }
    /* .passage-toolbox additionally ships color:#fff — white text on white */
    .bg-tooltip.passage-toolbox,
    .bg-tooltip.passage-toolbox * { color: var(--text-primary) !important; }
    .bg-tooltip.passage-toolbox .delete { background: transparent !important; }
    .bg-tooltip.options-tooltip,
    .bg-tooltip.options-tooltip * {
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
        color: var(--text-primary) !important;
    }
    .bg-tooltip a { color: var(--accent) !important; }

    /* Every BG dropdown (account, Font Size, Bible Book List, translation, bcv)
       is the same lazy-rendered .d-container > .d-root > .r-dropdown > div
       widget, all shipping a white panel. Theming the shared structure once
       covers the lot. Note the surface is a GRANDchild of .d-root, so a `> *`
       child selector misses it. */
    .d-container .d-root,
    .d-container .d-root div,
    .d-container .d-root ul,
    .d-container .d-root li,
    .d-container .d-root a {
        background: var(--bg-card) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-soft) !important;
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
    }
    /* .d-root itself is mounted as an empty `<span class="d-root"></span>`
       even while closed (confirmed via inspector on the Bible Book List
       ghost box) — not removed from the DOM, just invisible under BG's own
       CSS because its border/background there match the page. The rule
       above repaints .d-root's background/border-color unconditionally for
       the open panel's benefit, which also paints that empty closed-state
       box, turning it into a visible "ghost" pill next to Bible Book
       List/Font Size. Reset just the empty case back to nothing; a
       populated .d-root (the real open panel, which has .r-dropdown etc.
       inside it) is untouched by :empty and keeps its theming above. */
    .d-container .d-root:empty {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
    .d-container .d-root .r-dropdown {
        border: 1px solid var(--border-strong) !important;
        border-radius: 12px !important;
        box-shadow: 0 6px 24px rgba(120, 90, 40, 0.18) !important;
        overflow: hidden;
    }
    .d-container .d-root li:hover,
    .d-container .d-root a:hover {
        background: var(--bg-card-hover) !important;
        color: var(--accent) !important;
    }
    /* The current item carries an inline grey `background-color`, so this needs
       !important to land. */
    .d-container .d-root li[aria-selected="true"],
    .d-container .d-root li.selected,
    .d-container .d-root .selected {
        background: var(--accent) !important;
        background-color: var(--accent) !important;
        color: #fff !important;
    }

    /* Translation picker (own userscript, ships its own light palette) */
    #bg-trans-picker-overlay > div {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-strong) !important;
        color: var(--text-primary) !important;
    }
    #bg-trans-picker-overlay input {
        background: var(--bg-page) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-soft) !important;
    }
    #bg-trans-picker-overlay input::placeholder { color: var(--text-secondary) !important; }
    #bg-trans-picker-overlay .bg-trans-tab {
        background: transparent !important;
        color: var(--text-secondary) !important;
    }
    #bg-trans-picker-overlay .bg-trans-tab.active {
        background: var(--bg-card) !important;
        color: var(--accent) !important;
    }
    #bg-trans-picker-overlay .bg-trans-lang {
        background: var(--bg-page) !important;
        color: var(--text-secondary) !important;
    }
    #bg-trans-picker-overlay .bg-trans-row:hover,
    #bg-trans-picker-overlay li:hover { background: var(--bg-card-hover) !important; }

    .resources a:hover,
    .resources [class*="entry"]:hover,
    .resources [class*="result"]:hover {
        background: var(--bg-card-hover) !important;
        border-radius: 8px;
    }

    /* Resource filter pills */
    .filter {
        background: var(--bg-page) !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: 999px !important;
    }
    .filter.selected {
        background: var(--accent) !important;
        color: #fff !important;
        border-color: var(--accent) !important;
    }

    /* Book covers.
       BG ships these with an inline `style="max-width:100px;..."` to reserve
       layout space before the image loads. The card around it, though, is
       meant to flex-grow and absorb whatever's left in a wide resources
       panel (see .pubs-library above) — the card grew, the image inside it
       didn't, and the gap between one card's fixed 100px image and the next
       card's left edge was the dead space that grew with it.
       Overriding `width` alone wasn't enough (measured: still 100px) —
       inline max-width is a separate property from width and still caps the
       render regardless of what width computes to. Then max-width alone
       still wasn't enough either: the <img> itself is wrapped in an unclassed
       <div style="width:100px; ...gradient placeholder background...">, and
       percentage widths resolve against that wrapper, so the wrapper's own
       fixed inline width was the real remaining cap. No class to hook, so
       `:has(> img)` (already used elsewhere in this file) picks it out
       structurally. */
    .pubs-library div:has(> img), .pubs-featured div:has(> img),
    .pubs-studybible div:has(> img), .pubs-encyclopedia div:has(> img),
    .pubs-commentary div:has(> img), .pubs-dictionary div:has(> img) {
        width: 100% !important;
    }
    .pubs-library img, .pubs-featured img, .pubs-studybible img,
    .pubs-encyclopedia img, .pubs-commentary img, .pubs-dictionary img {
        width: 100% !important;
        max-width: 100% !important;
        height: 160px !important;
        object-fit: cover;
        object-position: center;
        border-radius: 6px;
        box-shadow: 0 4px 14px rgba(80, 50, 10, 0.18);
        transition: transform 0.2s;
    }
    .pubs-library img:hover, .pubs-featured img:hover, .pubs-studybible img:hover,
    .pubs-encyclopedia img:hover, .pubs-commentary img:hover, .pubs-dictionary img:hover {
        transform: translateY(-3px);
    }

    /* ===== Column resizer divider — slim ===== */
    #bg-col-resizer {
        background: transparent !important;
        width: 8px !important;
        position: relative;
        flex-shrink: 0 !important;
    }
    #bg-col-resizer::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2px;
        height: 32px;
        background: var(--border-strong);
        border-radius: 2px;
        transition: background 0.2s;
    }
    #bg-col-resizer:hover::before {
        background: var(--accent);
        width: 3px;
    }
    #bg-col-resizer > div { display: none !important; }

    /* ===== Cross references & footnotes ===== */
    .crossreference, .footnote {
        font-family: Georgia, serif !important;
        font-size: 1rem !important;
        opacity: 0.3;
        transition: opacity 0.2s;
    }
    .crossreference:hover, .footnote:hover { opacity: 1; }

    /* ===== Buttons ===== */
    button, .btn, input[type="submit"] {
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
        transition: all 0.2s !important;
    }
    /* BG's own CTA buttons (homepage promo cards, "Join Bible Gateway Plus!")
       are `display: inline` <a> tags. That's fine at their own default root
       font-size, but this site runs BG's own Font Size control past its
       default (10px -> 12px here, up to 14px at X-Large) for the reading
       page, and the same <html> font-size affects every rem-sized element
       site-wide — this button's text no longer fits one line at that size,
       and as inline content its second line doesn't reserve its own space,
       so it visually overlapped the card copy above it. inline-block makes
       a wrapped button take its true two-line height in normal flow instead
       of overlapping whatever came before it. */
    .btn {
        display: inline-block !important;
        text-align: center;
    }
    /* The devotional "Mark as complete"/"Mark as incomplete" pair (and
       presumably anything else BG toggles the same way) are both .btn and
       start with one of the two carrying .hidden — BG's own JS swaps which
       one has it after a click. The rule above's !important beat BG's own
       (non-important) `.hidden { display: none }` at equal specificity, so
       both buttons rendered inline-block all the time regardless of which
       one was supposed to be hidden: the click's request genuinely
       succeeded (verified: 200, {"success":true}) but looked like it did
       nothing, because the two buttons were indistinguishable no matter
       which state the page was actually in. Two classes beats one, so this
       wins back over the rule above without touching it. */
    .btn.hidden { display: none !important; }

    /* The devotional completion action is a native blue submit button, which
       is visually unrelated to the surrounding maroon/cream controls. Keep
       it prominent as the page's one primary action, but in the same system. */
    body.page-devotionals.devotionals-day .content-section > .btn {
        min-height: 40px !important;
        padding: 0 18px !important;
        border: 1px solid var(--accent) !important;
        border-radius: 999px !important;
        background: var(--accent) !important;
        color: var(--bg-card) !important;
        box-shadow: 0 2px 5px rgba(149, 32, 4, 0.18) !important;
        transition: background 0.15s, border-color 0.15s, transform 0.15s !important;
    }
    body.page-devotionals.devotionals-day .content-section > .btn:hover,
    body.page-devotionals.devotionals-day .content-section > .btn:focus-visible {
        background: #7a1a03 !important;
        border-color: #7a1a03 !important;
    }

    /* ===== "Was this helpful?" pills (search results) =====
       BG ships these as plain blue-outlined pills (rgb(18,106,187)), the one
       generic-web-app blue left on the whole site — everything else uses the
       parchment/maroon palette. Neutral like the resource filter pills
       rather than accent-coloured like a primary CTA: this is feedback
       chrome, not something to draw the eye. */
    .btn.helpful, .btn.unhelpful {
        border-color: var(--border-strong) !important;
        color: var(--text-primary) !important;
        background: var(--bg-page) !important;
    }
    .btn.helpful:hover, .btn.unhelpful:hover {
        border-color: var(--accent) !important;
        color: var(--accent) !important;
    }

    /* ===== Audio link ===== */
    a.audio-link {
        background: var(--accent) !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        opacity: 1 !important;
        transition: all 0.2s;
    }
    a.audio-link:hover {
        background: #7a1a03 !important;
        transform: scale(1.08);
    }
    a.audio-link svg { fill: #fff !important; width: 16px; height: 16px; }

    /* ===== Prev/next chapter arrows ===== */
    /* Do NOT override position/left/right/top here. BibleGateway positions
       these itself (position: fixed, with coordinates it computes to track the
       passage column). Forcing `position: absolute` made those coordinates
       resolve against .prev-next instead of the viewport — and .prev-next is a
       zero-width flex item inside .passage-cols, so both arrows collapsed onto
       the same point and overlapped. Restyle appearance only. */
    .passage-box { position: relative; }
    .prev-chapter, .next-chapter {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(120, 90, 40, 0.15) !important;
        transition: background 0.2s, border-color 0.2s, transform 0.2s;
        /* BG ships `padding: 17px 11px 9px` — asymmetric, which pushed the
           glyph 4px below the circle's centre. */
        padding: 0 !important;
    }
    /* BG parks these just inside the card's edge, where a 40px circle lands on
       top of the text (37px over it on the left, 30px on the right). Its own JS
       owns `left`/`top`, so nudge them out into the gutter with a transform
       rather than fighting those values.
       --bg-arrow-shift is bigger with the resources panel hidden, where the
       card is centred with room to spare and the solo resize handle sits on the
       card's right edge. */
    :root { --bg-arrow-shift: 40px; }
    .bg-no-resources { --bg-arrow-shift: 72px; }
    .prev-chapter { transform: translateX(calc(-1 * var(--bg-arrow-shift))) !important; }
    .next-chapter { transform: translateX(var(--bg-arrow-shift)) !important; }
    .prev-chapter:hover, .next-chapter:hover {
        background: var(--accent) !important;
        border-color: var(--accent) !important;
    }
    .prev-chapter:hover { transform: translateX(calc(-1 * var(--bg-arrow-shift))) scale(1.08) !important; }
    .next-chapter:hover { transform: translateX(var(--bg-arrow-shift)) scale(1.08) !important; }
    /* These chevrons are STROKED, not filled — BG sets `stroke` on the svg and
       on hover changes it to rgb(149,32,4), which is exactly our --accent. That
       painted a dark-red arrow on a dark-red circle, i.e. invisible. Setting
       `fill` alone does nothing here; the stroke has to change too. */
    .prev-chapter svg, .next-chapter svg {
        fill: var(--text-secondary);
        stroke: var(--text-secondary) !important;
        transition: fill 0.2s, stroke 0.2s;
        width: 12px;
        height: 12px;
    }
    .prev-chapter:hover svg, .next-chapter:hover svg {
        fill: #fff !important;
        stroke: #fff !important;
    }

    /* ===== Sidebar tabs ===== */
    .sidebar-tabs, .top-bar { background: transparent !important; }
    /* Was unconditionally stripping border-bottom-color on every tab. BG's
       own markup already only puts a border-bottom on the ACTIVE tab
       (inactive tabs get border-bottom:0, i.e. no reserved line at all —
       verified live), so this wasn't neutralizing some unwanted default
       line, it was deleting the one native, working, non-color indicator
       of which tab is active — text colour (maroon vs black) was left as
       the only signal, which is exactly the "communicated by colour alone"
       accessibility gap. Removed; the active tab's real maroon underline
       (set inline per-tab by BG's own carousel script) now shows again. */
    .sidebar-menu, .sidebar-menu * {
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
    }
    /* This is the actual sticky bar (position:fixed, set inline by BG's own
       carousel script — verified live at .sidebar-menu, not .passage-tools
       or .float-header, both of which are plain position:static and scroll
       away like any other content). It ships with background:#fff (a flat
       stark white, set inline, clashing with this theme's cream
       everywhere else) and no shadow/border of any kind, so once you
       scroll, verse text simply stops at its top edge with nothing to
       mark that edge as a fixed boundary rather than a rendering glitch —
       and the underlying passage column also carries a faint background
       watermark image (Passage Background script) that this flat white
       bar doesn't share, so a hard seam appears exactly where the bar's
       bottom edge crosses the scrolling texture. Matching the bar's own
       background to the theme's card colour and giving it real elevation
       fixes both: same colour family as what's visible around/under it,
       and a shadow that makes "this is a fixed layer above the page"
       legible instead of implicit. */
    .sidebar-menu {
        background: var(--bg-card) !important;
        /* Was border-bottom only — with the card's own background matching
           its surroundings (both --bg-card-family cream), the left/top/right
           edges had no line to separate them from the page at all, so the
           rounded corners read as fading/blurred rather than a crisp card
           edge; only the bottom edge (which had its own border) looked
           deliberate. A full border makes every edge, corner included, as
           defined as the bottom one. box-shadow already follows the
           element's own border-radius automatically, so no extra "rounded
           shadow" property is needed — just border-radius wide enough
           (18px) that the shadow's blur has a visibly curved edge to
           follow instead of an almost-square one. */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: 18px !important;
    }
    .sidebar-menu .go1015441302 {
        background: transparent !important;
    }
    /* Applied by BibleGateway Column Resizer's relocateTabBar(), which moves
       this element from its own full-width row above the columns to be
       .resources' own first child instead (see that script's own comment
       for why). position:sticky against .resources — its own independently-
       scrolling container (see INDEPENDENT SCROLL CONTAINERS above), not the
       whole page — keeps it pinned to the top of that column while it
       scrolls, the same visual effect BG's inline fixed-positioning gave,
       but as a normal flow child instead of a floating overlay. !important
       throughout: BG's own carousel script still writes an inline pixel
       width to this element on its own schedule (observed live), and a
       plain override loses that fight on whichever tick runs last. */
    .sidebar-menu.bg-tabbar-relocated {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        /* Match the Resource/Study panel below. The previous 8px side
           margins made the switcher visibly narrower than the surface it
           controls, especially when the Study overlay replaced Resources. */
        width: 100% !important;
        margin: 0 !important;
        z-index: 50 !important;
    }
    /* The Resources column remains independently scrollable on desktop, but
       its persistent native rail next to the section tabs is visual noise.
       Preserve wheel/trackpad scrolling while hiding that redundant rail. */
    body.page-passage .resources {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    body.page-passage .resources::-webkit-scrollbar { display: none; }
    /* Breathing room for the passage/resources cards' own rounded corners
       and shadow to render into. Confirmed live: once relocateTabBar()
       collapsed the old ~69px-tall tab-bar row to nothing, .passage-box
       and .sidebar-menu/.resources sat right at .passage-resources-
       container's own top edge with only their 8px margin (see
       .passage-box above) between them and its overflow:hidden boundary
       — nowhere near enough room for a "0 8px 32px" shadow's blur to fully
       render, so the top of every card's shadow (and the rounded corner
       under it) was sheared off in a hard flat line instead of fading
       naturally. Padding on the container rather than more margin on the
       cards themselves, since .passage-box's margin is shared with the
       narrow-layout rules this file also has to serve.
       Left/right get the same treatment as top, for the same reason: .resources
       has zero side padding of its own (just an unrelated 4px margin) and
       sits flush against this container's overflow:hidden edge, so
       .sidebar-menu's box-shadow/18px rounded corners were sheared off flat
       on both sides too — the tab strip read as a straight-edged bar rather
       than the rounded card every other card in this theme is. */
    body.page-passage .passage-resources-container {
        padding-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    /* Tabs sat 10px left of the passage column's own left edge (measured:
       .sidebar-menu at 5px, .passage-text's actual text at 15px — .passage-
       box carries that extra 10px as its own side padding, which the fixed
       bar, being outside .passage-box entirely, doesn't inherit), so the
       tab strip and the body copy below it didn't share a left margin. */
    .carousel-list {
        padding-left: 10px !important;
    }
    /* Verse/footnote/cross-reference anchors land flush at the top of the
       viewport on an in-page jump (a cross-reference tap, a #en-NIV-#####
       deep link) — nothing accounted for the ~140px the fixed sticky bar
       covers, so the target verse landed underneath it, out of view. */
    .passage-text span[id^="en-"] {
        scroll-margin-top: 150px;
    }

    /* ===== "Read full chapter" link ===== */
    .full-chap-link {
        font-family: Georgia, serif !important;
        display: inline-block;
        margin-top: 32px !important;
        color: var(--accent) !important;
        text-decoration: none !important;
        font-style: italic;
        font-size: 1.6rem;
        border-bottom: 1px solid currentColor;
        padding-bottom: 1px;
    }

    /* ===== Hide ad/clutter + footer ===== */
    footer, .footer-flex-row, .site-footer, .bg-footer,
    .sponsor-ad, .passage-bottom-ad, .sidebar-tall-ad,
    [data-freestar-ad], #fs-sticky-footer,
    .other-resources, .recommendations-products-row,
    .recommendations-header-column, .recommendations-view-row,
    .plus-upgrade-mobile-section, .copyright-table,
    #onetrust-consent-sdk, #onetrust-pc-sdk { display: none !important; }

    /* The account/profile button (.login) is a child of .sys-announce, so
       hiding that whole bar takes the profile menu with it. Hide only the
       announcement copy and let the bar collapse around the button. */
    .sys-announce > .wrapper { display: none !important; }
    .sys-announce {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        /* NO width here — the positioning block above shrink-wraps this bar on
           purpose. Setting width:100% again re-creates the invisible overlay
           that blocked the passage input. */
        background: none !important;
        min-height: 0 !important;
        border: none !important;
        /* BG's 0 32px padding held the button 32px off the right edge */
        padding: 0 !important;
    }
    /* Sized to match .search-submit (39px pill) so the two read as siblings
       rather than a big button next to a small caption. */
    .sys-announce .login {
        display: flex !important;
        align-items: center !important;
        gap: 9px;
        height: 39px !important;
        min-height: 39px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        box-sizing: border-box;
        transition: background 0.15s;
    }
    .sys-announce .login:hover { background: rgba(149, 32, 4, 0.08) !important; }
    .sys-announce .login .user-name {
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }
    .sys-announce .login .user-menu-icon svg {
        width: 13px !important;
        height: 13px !important;
    }

    /* ===== Avatar =====
       BibleGateway has no way to change the profile picture, so replace its
       generic silhouette. Drawn as a mask rather than an <img> or emoji so it
       renders as one flat colour that follows the theme.

       Default is an open book — the Word. Swap --bg-avatar-icon for another:
         dove   M21 5c-3 0-5 1-7 3-1.5 1.5-3 2-5 2-3 0-5 2-5 5 0 2 1 3 2 4
                1-3 3-4 5-4 4 0 7-2 9-5 1-1.5 1-3.5 1-5z
         flame  M12 2c3 4 6 6 6 10a6 6 0 0 1-12 0c0-2 1-3 2-4 0 1 .5 2 1.5 2
                1 0 1.5-1 1.5-2 0-2-1-4-1-6z
    */
    :root {
        --bg-avatar-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 6.5C10.5 5.2 8.4 4.5 6 4.5c-1.4 0-2.7.2-4 .7v13c1.3-.5 2.6-.7 4-.7 2.4 0 4.5.7 6 2 1.5-1.3 3.6-2 6-2 1.4 0 2.7.2 4 .7v-13c-1.3-.5-2.6-.7-4-.7-2.4 0-4.5.7-6 2z"/></svg>');
        --bg-avatar-color: var(--accent);
    }
    .sys-announce .login .user-icon svg,
    .sys-announce .login .user-icon img { display: none !important; }
    .sys-announce .login .user-icon {
        display: inline-block !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 0 !important;
        background: var(--bg-avatar-color) !important;
        -webkit-mask: var(--bg-avatar-icon) center / contain no-repeat;
        mask: var(--bg-avatar-icon) center / contain no-repeat;
    }

    /* ===== Secondary nav bar (Bible Book List / Reading Plan / Font Size) ===== */
    .bbl-fontsize {
        display: flex !important;
        align-items: center;
        gap: 4px;
        padding: 6px 0 6px 4px;
        overflow: visible !important; /* allow dropdown popups to escape */
    }
    /* Shared style for all secondary-nav toggles, including the logged-in Reading Plan item */
    .toggle-bbl,
    .toggle-fontsize,
    .toggle-reading-plan,
    .bbl-fontsize .d-container > a,
    .bbl-fontsize .d-container > span,
    .float-header [class*="reading-plan"] > a,
    .float-header [class*="reading-plan"] > span,
    /* #bg-rp-btn is injected directly into this row, so include it explicitly
       alongside BG's native dropdown triggers. */
    #bg-rp-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 5px;
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--text-secondary) !important;
        text-decoration: none !important;
        /* Every other property here has !important because BG's own CSS
           fights it; padding didn't, and BG's native rule for #bg-rp-btn
           specifically (not .toggle-bbl/.toggle-fontsize, which BG doesn't
           otherwise target) won on that one property alone — computed
           padding-left came back 0px. That's what put "Bible Book List"
           (10px inset, ours applied) and "My Reading Plan" (0px, BG's own
           value survived) at different left edges despite sharing this
           rule. */
        padding: 5px 10px !important;
        border-radius: 999px;
        transition: background 0.15s, color 0.15s;
        white-space: nowrap;
    }
    /* the label is a nested <span>, which would otherwise keep its own font */
    #bg-rp-btn > .bg-rp-trigger-label {
        font: inherit !important;
        color: inherit !important;
        letter-spacing: inherit !important;
    }
    .toggle-bbl:hover,
    .toggle-fontsize:hover,
    .bbl-fontsize .d-container > a:hover,
    .bbl-fontsize .d-container > span:hover,
    .float-header [class*="reading-plan"] > a:hover,
    .float-header [class*="reading-plan"] > span:hover {
        background: var(--bg-card-hover);
        color: var(--text-primary) !important;
    }
    /* Prevent BG's absolute positioning from misaligning the chevron SVG.
       opacity was 0.55 here, fading Bible Book List/Font Size's chevrons
       out relative to My Reading Plan's (#bg-rp-btn, not part of this
       selector, so its chevron was never dimmed) — full opacity now, so
       all three read as the same weight. */
    .toggle-bbl svg,
    .toggle-fontsize svg,
    .bbl-fontsize .d-container svg,
    #bg-rp-btn > svg {
        position: static !important;
        top: auto !important;
        flex-shrink: 0;
    }
    /* Same chevron as BibleGateway Parallel View Pickers.user.js's dropdown
       triggers (CHEVRON_SVG there), used here too so every dropdown-style
       control in the theme — Bible Book List, Font Size, My Reading Plan,
       the version pickers — reads as one consistent icon rather than BG's
       own ~11.5x6.5px filled triangle (measured: distractingly small next
       to this theme's other icon sizes) alongside a second, different-
       looking one this suite introduced. Can't inject the new markup into
       BG's own SVG, so the native one is hidden and a mask-based ::after
       repaints the same path, coloured via background-color the way any
       other icon-font glyph in this theme would be. */
    .toggle-bbl svg,
    .toggle-fontsize svg,
    .bbl-fontsize .d-container svg,
    #bg-rp-btn > svg {
        display: none !important;
    }
    .toggle-bbl::after,
    .toggle-fontsize::after,
    .bbl-fontsize .d-container > a::after,
    /* :not(.d-root) — every .d-container also carries an empty <span
       class="d-root"> as its lazy-rendered popup mount (see the .d-root
       comment elsewhere in this file), which is *also* a ".d-container >
       span" and would otherwise pick up this same ::after — a second,
       stray chevron floating just past the real one, confirmed live via
       elementsFromPoint sitting exactly on an empty 13x13 .d-root box. */
    .bbl-fontsize .d-container > span:not(.d-root)::after,
    #bg-rp-btn::after {
        content: "";
        display: inline-block;
        flex-shrink: 0;
        width: 13px;
        height: 13px;
        background-color: currentColor;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        opacity: 0.7;
    }
    /* .bbl-dropdown and .fontsize-dropdown are the wrapper <div>s around the
       toggles above — .toggle-bbl/.toggle-fontsize got shrunk into compact
       pills, but nothing here ever touched their wrappers, which still carry
       BG's native full-width block styling. That left a big empty box
       trailing each pill. Auto-size the wrapper to its (now pill-sized)
       content instead. */
    /* display is deliberately left alone here (and on .d-container below) —
       forcing inline-flex on this wrapper once coincided with BG's dropdown
       widget showing its closed-state panel as a small empty box instead of
       staying hidden. (The .d-container width override turned out to be the
       actual cause of that — see the note down there — but display stays
       untouched here too, out of the same caution.) Sizing only.
       transform/left are reset alongside width/margin: Bible Book List sat
       further right than My Reading Plan despite both having zeroed
       width/margin/padding, which points at a positioning nudge rather than
       a box-model one — plausibly BG's own JS offsetting the trigger to line
       its popup's connector arrow up with something, on the desktop layout
       this was never designed for. */
    .bbl-dropdown, .fontsize-dropdown {
        width: auto !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        left: auto !important;
    }
    /* This used to also force width:auto/min-width:0 on .d-container, on the
       theory that it was a full-desktop-sized wrapper leaking through as
       empty space. That's very likely what caused the blank pill that
       showed up right after: the "every BG dropdown" rule further down
       unconditionally styles .r-dropdown with a real border, radius and
       shadow, open or closed. If BG normally hides the CLOSED panel by
       collapsing .d-container to zero width — a common way to clip a
       popup's ancestor rather than the popup itself — forcing that width
       open again is exactly what would let the panel's now-forced chrome
       peek through as a small empty box. .bbl-dropdown's own reset above
       already fixed the actual empty-space bug this was chasing, so this
       one only touches cosmetic properties that a hidden state wouldn't
       depend on — no width/min-width. */
    .bbl-fontsize .d-container {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Version dropdown chevron */
    .search-dropdown-display {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
    }
    .search-dropdown-icon {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    /* "Bible Book List", "Font Size" and "My Reading Plan" already carry
       border-radius:999px + padding (native BG / #bg-rp-btn above) but with
       border:0 and a transparent background, so the pill shape they're
       already shaped for never actually renders — next to the translation
       selector's real bordered/filled pill, these three read as plain text
       with a caret instead of siblings of the same control. Filling in the
       border/background they're already padded and rounded for is enough;
       no layout change.
       .toggle-fontsize itself (the trigger span, not its dropdown panel)
       was missing from this list — .fontsize-dropdown a/button/[role=button]
       only reaches the OPEN panel's own items, never the closed trigger, so
       "Font Size" alone kept rendering borderless next to Bible Book List's
       real pill (a.toggle-bbl) and My Reading Plan's (#bg-rp-btn). Added
       .toggle-reading-plan alongside it for the same reason, even though no
       page has hit it yet — same trigger/panel split as .toggle-fontsize,
       just not yet observed live. */
    a.toggle-bbl,
    #bg-rp-btn,
    .toggle-fontsize,
    .toggle-reading-plan,
    .fontsize-dropdown a,
    .fontsize-dropdown button,
    .fontsize-dropdown [role="button"] {
        border: 1px solid var(--border-strong) !important;
        background: var(--bg-card) !important;
    }

    /* ===== Devotional day pager (Prev Day / Next Day) — match the pill row
       above ===== BG ships .prev-link/.next-link as bare icon+label links
       with no border/background of their own, unlike Bible Book List/Font
       Size/My Reading Plan just above them (now real bordered pills, see
       above) or the streak badge below — so the day pager read as plain
       text sitting next to a row of real buttons, and every one of these
       controls was also its own height (padding-driven, never pinned), so
       the whole cluster read as mismatched heights as much as mismatched
       fills. --bg-pill-h fixes the height once; box-sizing:border-box means
       adding it doesn't also require touching each control's own padding. */
    :root { --bg-pill-h: 30px; }
    #bg-rp-btn,
    a.toggle-bbl,
    .toggle-fontsize,
    .toggle-reading-plan {
        height: var(--bg-pill-h) !important;
        box-sizing: border-box !important;
    }
    /* .content-section ancestor added purely to outrank BG's own native
       rule for these same two classes, whatever it turns out to be —
       "centered" was reported as not taking effect live, which points at
       BG's rule (also likely !important, maybe also justify-content:
       space-between to spread icon and label apart by design) winning a
       specificity tie rather than this rule simply being wrong. */
    .content-section .reading-plans-scroller a.prev-link,
    .content-section .reading-plans-scroller a.next-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: var(--bg-pill-h) !important;
        width: auto !important;
        box-sizing: border-box !important;
        padding: 0 12px !important;
        border: 1px solid var(--border-strong) !important;
        background: var(--bg-card) !important;
        border-radius: 999px !important;
        transition: background 0.15s, border-color 0.15s;
    }
    .content-section .reading-plans-scroller a.prev-link:hover,
    .content-section .reading-plans-scroller a.next-link:hover {
        background: var(--bg-card-hover) !important;
    }
    .reading-plans-scroller {
        margin-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* Devotional day pages render this pager twice — once above the body
       copy, once again at the bottom next to the Mark-as-complete button —
       as two sibling .reading-plans-scroller divs. The margin-top:0 above
       is right for the first one (flush under the day-pager row it
       belongs to) but leaves the bottom one sitting flush against the
       complete/incomplete button right above it instead. The general
       sibling combinator picks out only a *later* occurrence, so the top
       one is untouched. */
    body.page-devotionals .reading-plans-scroller ~ .reading-plans-scroller {
        margin-top: 16px !important;
    }

    /* A devotional is long-form reading, not a full-width dashboard. Keep the
       article and its metadata on one comfortable desktop measure while the
       day pager is free to span the card above it. */
    @media (min-width: 1025px) {
        body.page-devotionals .content-section > h1,
        body.page-devotionals .day-num-days,
        body.page-devotionals #bg-devo-audio-row,
        body.page-devotionals .rp-content,
        body.page-devotionals .publisher-info-bottom {
            width: min(960px, calc(100% - 112px)) !important;
            max-width: 960px !important;
            margin-left: clamp(48px, 4vw, 90px) !important;
            margin-right: auto !important;
            box-sizing: border-box !important;
        }
        body.page-devotionals .rp-content {
            font-size: 18px !important;
            line-height: 1.65 !important;
        }
        /* The completion action and the second (bottom) day pager used to
           stretch across the full desktop shell while the devotional itself
           stopped at 780px. Keep this end-of-article area on the same wider
           measure so its controls read as a coherent footer rather than
           isolated points across a blank field. */
        body.page-devotionals .content-section > .btn {
            margin-left: clamp(48px, 4vw, 90px) !important;
            margin-right: auto !important;
        }
        body.page-devotionals .reading-plans-scroller ~ .reading-plans-scroller {
            width: min(960px, calc(100% - 112px)) !important;
            max-width: 960px !important;
            margin-left: clamp(48px, 4vw, 90px) !important;
            margin-right: auto !important;
            display: grid !important;
            grid-template-columns: 1fr auto 1fr !important;
            align-items: center !important;
            gap: 12px !important;
            box-sizing: border-box !important;
        }
        body.page-devotionals .reading-plans-scroller ~ .reading-plans-scroller .prev-link {
            grid-column: 1;
            justify-self: start;
        }
        body.page-devotionals .reading-plans-scroller ~ .reading-plans-scroller .next-link {
            grid-column: 3;
            justify-self: end;
        }
        body.page-devotionals .reading-plans-scroller ~ .reading-plans-scroller a:not(.prev-link):not(.next-link) {
            grid-column: 2;
            justify-self: center;
        }
    }

    /* ===== Breadcrumb back arrow + day-pager icons =====
       Dropped outright, by request, at every width — text-only "Devotionals"
       / "Prev Day" / "Next Day" links rather than icon+label, and the
       calendar dropdown's own chevron (.cal-link .dropdown-icon, plus its
       .close-icon counterpart for the open state) hidden the same way. This
       used to live only inside the max-width:1024px block, which fixed
       mobile but left BG's native icons showing above that breakpoint — the
       rules need to be unscoped to actually cover desktop too. The links
       themselves stay fully clickable without the icons. */
    .bread-crumb {
        padding-left: 0 !important;
    }
    .bread-crumb a {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
    }
    .bread-crumb .left-arrow,
    .reading-plans-scroller .icon-passage-previous,
    .reading-plans-scroller .icon-passage-next,
    .cal-link .dropdown-icon,
    .cal-link .close-icon {
        display: none !important;
    }



    /* ===== Inline audio bar (Script 1) ===== */
    #inline-audio-bar {
        position: fixed !important;
        bottom: 0; left: 0; right: 0;
        background: rgba(42, 37, 32, 0.97) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: #f4ecd8 !important;
        padding: 14px 28px !important;
        display: flex !important;
        align-items: center;
        gap: 20px;
        z-index: 99999 !important;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.2) !important;
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
        border-top: 1px solid rgba(232, 220, 196, 0.12);
    }
    #inline-audio-bar .iab-title {
        font-size: 13px !important;
        font-weight: 600;
        min-width: 160px;
        color: #f4ecd8;
        letter-spacing: 0.02em;
    }
    #inline-audio-bar audio {
        flex: 1 !important;
        height: 38px !important;
        filter: invert(0.92) hue-rotate(180deg);
    }
    #inline-audio-bar .iab-repeat,
    #inline-audio-bar .iab-close {
        background: rgba(244, 236, 216, 0.1) !important;
        border: none !important;
        color: #f4ecd8 !important;
        font-size: 20px !important;
        cursor: pointer;
        padding: 0 !important;
        width: 32px;
        height: 32px;
        border-radius: 50% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }
    #inline-audio-bar .iab-repeat {
        font-size: 0 !important;
    }
    #inline-audio-bar .iab-repeat svg {
        width: 17px;
        height: 17px;
    }
    #inline-audio-bar .iab-repeat[aria-pressed="true"],
    #inline-audio-bar .iab-repeat[aria-pressed="true"]:hover {
        background: var(--accent, #952004) !important;
        color: #fff !important;
    }
    #inline-audio-bar .iab-repeat:hover {
        background: rgba(244, 236, 216, 0.2) !important;
    }
    #inline-audio-bar .iab-close:hover {
        background: rgba(244, 236, 216, 0.2) !important;
    }

	/* ===== Ensure passage toolbar (audio, share, print, settings) is visible ===== */
    .passage-tools,
    .passage-tools.w-sidebar,
    .passage-tools.no-sidebar {
        display: flex !important;
        visibility: visible !important;
        max-width: 68ch !important;
        margin: 0 auto 32px !important;
        padding: 8px 0 24px;
        gap: 14px;
        border-bottom: 1px solid var(--border-soft);
        align-items: center;
    }
    .passage-tools > * {
        display: inline-flex !important;
        align-items: center;
    }

    /* ===== Parallel view: shrink the toolbar to its own (narrower) column =====
       The rule above centers a single toolbar within a full-width ~68ch column,
       which needs no extra width logic since 68ch is never the limiting factor
       there. In parallel view (?version=A;B[;C]), BG's real structure is
       .passage-cols > N x .passage-col-tools, each wrapping one .passage-tools
       and its .passage-col as SIBLINGS (not toolbar-inside-column) — so
       ".passage-col ... .passage-tools" never matches; detect "more than one
       column" via 2+ adjacent .passage-col-tools instead. Each column there
       gets much less width than the 68ch this toolbar was sized for, and an
       overflow here would force the column wider or wrap to two rows; shrink
       icon/gap size instead.
       Deliberately not gated to a min-width media query the way it might look
       — narrower still is exactly right for a parallel column on a narrow
       viewport too, where columns are even tighter than on desktop. It also
       happens to be higher-specificity (3 classes) than the max-width:1024px
       mobile toolbar rule further down (1 class + 1 tag), so it wins there on
       its own without needing an explicit override — verified live at a
       375px-equivalent width. */
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools,
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools.w-sidebar,
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools.no-sidebar {
        max-width: 100% !important;
        margin: 0 0 20px !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 4px !important;
    }
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools > * {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools a,
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools span,
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools button {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        /* BG's own icons carry a 24px margin-right, left over from the old
           layout that spaced them with margin instead of gap — additive with
           gap above, it was what pushed the row to ~404px content width in a
           ~287px column (measured: 54px between icon starts instead of the
           intended 30px), overflowing the column and landing later icons —
           the audio button included — visually inside the next column. */
        margin: 0 !important;
    }
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools svg,
    .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools img {
        width: 15px !important;
        height: 15px !important;
    }

	/* ===== Justified text for book-like reading =====
	   Only the passage column. Justification needs a wide-enough measure to
	   distribute space evenly; the resources panel is narrow and full of short
	   lines and inline links, where justifying opens rivers of white space. */
    .passage-text p {
        text-align: justify !important;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        text-wrap: pretty;
    }
    .resources p {
        text-align: left !important;
    }

    /* ===== Two-column reading on a wide card =====
       Driven by column-width, not a media or container query. The browser
       splits only when it can give each column the stated width, measured
       against the space actually available to the text — which is what we
       care about, and which changes as the resources panel is toggled or the
       card is dragged. No query can express that as cleanly.

       THE KNOB is the em value. 1em here is 16px (.passage-text's own size),
       so the split happens once the text area reaches:

           2 x (em x 16) + 56px gap

       34em -> 2 x 544 + 56 = 1144px, i.e. a card of about 1224px. Verified:
       1015px of text area stays single column, 1183px splits into two 563px
       columns (~66 characters each). Lower the em to split sooner, raise it
       to require a wider card. The `2` caps it at two columns however wide
       the card gets.

       Because it's in em, the threshold scales with the Font Size control —
       larger type demands a wider card before splitting, which is right.

       No column-rule: BG's rem scaling renders a 1px rule at ~0.5px, an
       inconsistent hairline. The 56px gap does the separating. */
    .passage-text {
        columns: 34em 2;
        column-gap: 56px;
    }
    /* keep a heading with the text it introduces, and don't strand single
       lines at a column break */
    .passage-text p { orphans: 2; widows: 2; }
    .passage-text h3 { break-after: avoid; break-inside: avoid; }

    /* ===== Narrow screens =====
       Everything above assumes one shape of screen: a wide desktop card with two
       side-by-side scrolling columns. On a phone that layout doesn't merely look
       cramped, it traps you — the columns demand more width than exists, and the
       independent-scroll rules above put overflow:hidden on html/body, so there
       is no way to scroll to what's cut off.

       Kept as one block at the end so it wins on source order, and so the
       desktop rules above can be read without mobile caveats threaded through
       them. Everything here is a narrow-screen override of something above.

       1024px rather than a phone width because the two-column-plus-sidebar
       layout needs roughly that much before it stops fighting for room; tablets
       in portrait want the stacked layout too. */
    @media (max-width: 1024px) {

        /* iOS Safari's own bottom toolbar (URL bar / tab bar) isn't
           accounted for by page content, so whatever BG renders last on a
           page — e.g. a "Log in to save your progress" prompt at the end of
           a devotional — can end up sitting right underneath it, partly
           hidden. safe-area-inset-bottom alone only covers the home-
           indicator gap, not the toolbar itself (which is taller and
           shows/hides as you scroll), hence the flat 60px floor alongside
           it rather than relying on the env() value on its own.
           Also the one thing keeping the last bit of any page's content
           clear of the floating Listen button (#bg-listen-panel, fixed
           bottom:18px, 46px circle — so an ~82px zone from the true bottom
           edge): 60px undershoots that by ~22px, which is exactly the
           "FAB sits on top of the last list row" complaint on the
           Resources tab's resource grid. */
        body {
            padding-bottom: max(env(safe-area-inset-bottom, 0px), 90px) !important;
        }

        /* Mobile pages must never gain a wider layout viewport. `clip` removes
           horizontal escape without creating the scrolling ancestor that would
           break the sticky reading header; the explicit shell sizing catches
           native desktop widths left on the home and passage headers. */
        html, body {
            max-width: 100% !important;
            overflow-x: clip !important;
        }
        body.page-home .page-col,
        body.page-home .content,
        body.page-home .float-header,
        body.page-home .search-form-nav,
        body.page-home .search-form,
        body.page-home .search-and-submit,
        body.page-home .bbl-fontsize,
        body.page-passage .float-header,
        body.page-passage .search-form-nav,
        body.page-passage .search-form,
        body.page-passage .search-and-submit,
        body.page-passage .bbl-fontsize,
        body.page-passage .passage-resources-container,
        body.page-passage nav,
        body.page-home nav {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        /* The otherwise anonymous flex child directly inside .content retained
           a 420px min-content width from the desktop passage rail. Let it
           shrink with the phone before sizing the resource/tab container. */
        body.page-passage .content > div {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        body.page-home .page-col { margin-left: 0 !important; }
        body.page-home #home,
        body.page-home .mast.container,
        body.page-home .mast.item,
        body.page-home .homepage-blocks,
        body.page-home .homepage-block {
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        body.page-home .passage-box {
            min-width: 0 !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        /* -- Scrolling. Undo the independent scroll containers and hand
              scrolling back to the page, which is what a phone expects.
              Every rule in this section also targets the exact
              body.page-passage-scoped selector it's undoing, alongside the
              plain one: the desktop rules use that scope + !important, and
              a plain selector — lower specificity — loses that fight even
              inside a later media query, !important or not. Measured live
              at 453px on /passage/: html/body still computed
              overflow-y:hidden and the page was completely unscrollable
              past one screen, silently, because every override below was
              losing to its desktop counterpart. Plain pages (no
              body.page-passage) were never affected — there's no competing
              rule there — which is why this went unnoticed until an actual
              phone-width pass on the reading page specifically. -- */
        html, body,
        html:has(body.page-passage), body.page-passage {
            height: auto !important;
            overflow: visible !important;
            /* This follows the shorthand above, which otherwise resets
               overflow-x and lets a desktop-width child create a sideways
               page. `clip` keeps sticky headers viewport-relative. */
            overflow-x: clip !important;
            max-width: 100% !important;
        }
        .page-col, .content, .passage-resources-container,
        body.page-passage .page-col, body.page-passage .content,
        body.page-passage .passage-resources-container {
            height: auto !important;
            overflow: visible !important;
            margin-left: 0 !important;
        }
        /* .passage-resources and the unnamed wrapper between .content and
           .passage-resources-container both still carried overflow:hidden from
           the desktop's independent-scroll setup. Any clipping ancestor silently
           disables position:sticky on everything inside, which is what stopped
           the chapter artwork following the passage — it scrolled away after one
           screen and the rest of the chapter had no background at all. */
        .passage-resources, body.page-passage .passage-resources { overflow: visible !important; }
        /* Only the one wrapper in that chain, matched by what it contains since
           it has no class of its own. Un-clipping every child of .content also
           released the tab strip, which is a few px wider than the viewport and
           was being clipped harmlessly — that reintroduced a horizontal scroll. */
        .content > div:has(.passage-resources-container) { overflow: visible !important; }

        /* -- Stack the columns. The passage and resources sit side by side in a
              flex row with min-widths that together exceed a phone's width. The
              min-widths are set by Column Resizer as *inline* styles, but inline
              styles are normal declarations, so an author !important beats them
              without touching the script. -- */
        .passage-resources, body.page-passage .passage-resources { display: block !important; }
        .passage-box, .resources,
        body.page-passage .passage-box, body.page-passage .resources {
            width: auto !important;
            min-width: 0 !important;
            flex: initial !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }
        /* BG reserves a viewport-sized passage card for its desktop
           independent-scroller. Once a short passage is stacked on a phone,
           that becomes a large empty panel before the chapter navigation. */
        body.page-passage .passage-box {
            min-height: 0 !important;
        }
        .passage-box {
            border-radius: 12px !important;
            padding: 18px 16px !important;
            margin: 0 0 16px 0 !important;
        }
        #bg-col-resizer { display: none !important; }

        /* Floating prev/next chapter arrows are position:fixed to the
           viewport's vertical middle — on the desktop's narrow reading
           column they land in the margin, but with the column now the full
           screen width they sit directly on top of the passage text.
           Measured live: the left arrow overlapped "who has come from God"
           mid-paragraph. The controls row above (Bible Book List / Font
           Size / My Reading Plan, already stacked for mobile) carries the
           same chapter navigation, so these are pure redundant overlap here,
           not a missing feature. */
        .prev-chapter, .next-chapter { display: none !important; }
        /* Same overlap, different element: #bg-float-nav-prev/next are our
           own Floating Chapter Nav script's buttons, not BG's — positioned
           by the script in JS, which computes a fixed left/right for the
           desktop column width and doesn't re-measure at narrow viewports.
           Measured live: the "next" button's rect.x was 984px inside a
           453px-wide viewport, so it wasn't just misplaced, it was
           positioned for an entirely different (desktop) layout. Same fix
           as .prev/.next-chapter above: hidden here since the controls
           row's My Reading Plan prev/next already covers the same action. */
        #bg-float-nav-prev, #bg-float-nav-next { display: none !important; }

        /* -- The header. The desktop layout lifts the login button out of flow
              and parks it top-right, reserving 152px of padding on the controls
              row so the version picker clears it. At this width that padding is
              most of the row: it squeezed the row to 252px of a 430px screen and
              forced Bible Book List / Reading Plan / Font Size to collide. Take
              the padding back. -- */
        .search-form-nav, body.page-passage .search-form-nav { padding-right: 0 !important; }

        /* Keep the complete search/control header available while reading.
           The section switcher below is fixed by BG's carousel and receives
           this header's live height as its top offset (measured in Focus Mode),
           so the two layers form one stack instead of overlapping. */
        body.page-passage .float-header {
            position: sticky !important;
            top: 0 !important;
            /* Native Resources is z-index:100 and the injected Study panel is
               z-index:200. The reader chrome must remain above both; otherwise
               their headings paint through the search field and tab strip. */
            z-index: 500 !important;
            isolation: isolate;
            box-shadow: 0 3px 10px rgba(59, 44, 18, 0.10);
        }
        /* Once the reader has moved into the passage, retain only the lookup
           field. This turns three persistent rows of web controls into a
           compact app-like reading bar without taking any controls away at the
           top of the chapter. */
        body.page-passage.bg-mobile-reading-compact .search-bar-version,
        body.page-passage.bg-mobile-reading-compact .bbl-fontsize {
            display: none !important;
        }
        body.page-passage.bg-mobile-reading-compact .search-form-nav {
            margin-bottom: 0 !important;
            padding-bottom: 7px !important;
        }
        /* `.float-header` lives below a native wrapper that collapses to zero
           height on phones. Sticky positioning is therefore released once
           that wrapper scrolls away, which left the reference field behind
           while the resource tabs remained visible. In compact reading mode
           make the small lookup bar viewport-fixed instead. */
        body.page-passage.bg-mobile-reading-compact .float-header {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: none !important;
        }
        body.page-passage.bg-mobile-reading-compact .search-form .quick-search {
            padding: 9px 46px 9px 16px !important;
            box-shadow: none !important;
        }
        body.page-passage.bg-mobile-reading-compact .search-submit {
            width: 34px !important;
            height: 34px !important;
        }
        /* In the compact state the section switcher is navigation, not a
           floating card. Let it meet the screen edges with a single quiet
           divider, which makes the reading surface feel continuous. */
        body.page-passage.bg-mobile-reading-compact .sidebar-menu {
            position: fixed !important;
            top: var(--bg-mobile-search-header-h, 0px) !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            border-left: 0 !important;
            border-right: 0 !important;
            border-radius: 0 !important;
            box-shadow: 0 1px 5px rgba(59, 44, 18, 0.10) !important;
        }
        /* The native carousel pins its tabs for Resources, but it does not
           recognise the injected Study tab. Keep the same tab strip available
           while expanded BibleRef content is being read. */
        body.page-passage.bg-study-active.bg-mobile-reading-compact .sidebar-menu {
            /* Kept as an explicit selector because Study is injected after
               BG's carousel has already written inline fixed geometry. */
            top: var(--bg-mobile-search-header-h, 0px) !important;
        }
        body.page-passage.bg-mobile-reading-compact .carousel-list {
            padding-left: 16px !important;
            padding-right: 16px !important;
        }
        body.page-passage.bg-mobile-reading-compact .sidebar-menu li {
            padding-top: 6px !important;
            padding-bottom: 3px !important;
            font-size: 14px !important;
        }

        /* The account control and the avatar in the red bar are the same dropdown
           component (both carry d-container) opening the same menu, so the page
           had two — with the named one stranded on a line of its own above the
           search field.

           The named control is the one kept, because its menu is known to work
           when signed in and the avatar's could not be verified from a
           signed-out session.

           A first attempt moved .login into the header bar with a real DOM
           move (appendChild, in the Focus Mode script). It landed pixel-perfect
           but stopped opening anything — tapping did nothing at all, not even
           a flash — which points at whatever wires up the dropdown keying off
           .login staying inside .top-wrapper > .sys-announce (a delegated
           listener scoped to that container is the likely culprit) rather than
           at the element itself. So: leave .login exactly where its dropdown is
           already proven to work, and just move the BOX there with CSS
           instead — .sys-announce is already unconditionally position:absolute
           for the desktop layout (see the "Reclaim the near-empty account row"
           rule above); this just retargets its top/right into the header for
           narrow screens instead of the search row. --bg-header-h is nav's live
           rendered height, set by the Focus Mode script (measurement only, no
           DOM changes) since it isn't a fixed number across devices/font
           scaling. .page-col starts immediately after nav in the DOM and
           neither is fixed/sticky, so a negative top here — relative to
           .page-col's own already-position:relative box — reaches straight up
           into nav's box and scrolls with it correctly. */
        .top-wrapper { height: 0 !important; min-height: 0 !important; }
        /* Both custom properties are the Focus Mode script's direct
           measurement of where .login needs to land — not a calc() built on
           an assumed gap between nav and .page-col, which landed it too low
           (that gap isn't actually zero), and not a plain fixed px, which
           landed it wherever .page-col's own inset happened to put it
           instead of clear of the wordmark.
           Needs the same body.page-passage prefix as the desktop rule it's
           overriding (top/right: 32px/6px, set unconditionally for the
           reading page above): plain `.sys-announce` has lower specificity
           than `body.page-passage .sys-announce`, and both sides carry
           !important, so specificity — not media-query source order —
           decided it, and the desktop position was winning at every width.
           Measured live at 453px: "Duc" sat at top:32px, the desktop value,
           completely ignoring this rule.
           z-index needed too, once the position was actually fixed: nav
           expands to full-width/full-height at this breakpoint (it's a
           hamburger-collapsed header here, not the narrow rail), and it
           carries `z-index: 0` for the sidebar cross-pattern background
           (see "Left nav rail" above) — an explicit z-index, even 0, opens
           its own stacking context that paints above any later sibling
           that's merely position:relative with z-index:auto, regardless of
           DOM order. .sys-announce ended up positioned correctly (measured:
           .login's own rect *was* inside the visible header box) but
           invisible, painted under nav's opaque background. It must also sit
           above the sticky search header (500) and floating Listen control
           (2000): the account dropdown is a child of this stacking context,
           so its own z-index cannot escape a low value here. */
        body.page-passage .sys-announce {
            top: var(--bg-header-top, 10px) !important;
            right: var(--bg-header-right, 12px) !important;
            z-index: 3000 !important;
        }
        /* Devotional day pages (/devotionals/<slug>/today) have the exact
           same search-row-then-content header shape as the reading page,
           just under a different body class — so they hit the exact same
           two bugs the block above exists for (measured live on a 396px
           viewport): .login painted invisibly under nav's z-index:0
           stacking context, AND — unlike the reading page — .sys-announce
           was never taken out of flow at all here, so once visible it also
           overlapped the search button. Full self-contained copy of the
           reading-page trick rather than broadening that rule's own
           selector: this only reaches for the mobile-only positioning
           piece (position/top/right/z-index), skipping the desktop
           "reclaim the near-empty row" rule entirely, since devotional
           pages already render .login correctly at desktop width without
           it — extending that unconditional rule risked fixing a width
           that wasn't broken. The colour/icon-hiding/sizing rules below
           are already unscoped (apply to any page at this width), so nothing
           needed duplicating for those. */
        body.page-devotionals .page-col { position: relative; }
        body.page-devotionals .top-wrapper {
            height: 0 !important;
            min-height: 0 !important;
            overflow: visible !important;
        }
        body.page-devotionals .sys-announce {
            position: absolute !important;
            /* Was the shared var(--bg-header-top, 10px) fallback (never
               actually defined anywhere, so that 10px was always just an
               eyeballed guess). .page-col (the positioning ancestor here,
               via its own position:relative above) starts BELOW the page
               header, not at its top, so reaching back up into the header
               needs a negative offset roughly the header's own height
               (measured ~67.46px) rather than a small positive one.
               Tuned live to -67px rather than a calc() derived from the
               logo's own centering math — that formula's inputs (the
               header height and .sys-announce's own rendered height, the
               latter never confirmed against the real page) were close
               but not quite right in practice. */
            top: -67px !important;
            right: var(--bg-header-right, 12px) !important;
            left: auto !important;
            width: auto !important;
            max-width: none !important;
            z-index: 10 !important;
            pointer-events: none;
        }
        body.page-devotionals .sys-announce .login { pointer-events: auto; }
        /* Desktop text is dark, for the cream search row; this now sits over
           the red header bar instead. */
        .sys-announce .login,
        .sys-announce .login a,
        .sys-announce .login span { color: #fff !important; }
        .sys-announce .login svg { fill: #fff !important; }
        /* The native avatar icon in the red bar opens the same menu — with the
           named control now placed on top of the bar, the avatar underneath is
           redundant and would otherwise double up. */
        .logo-menu-user .user-icon { display: none !important; }
        /* This is a second, different avatar: BG's own book icon inside
           .login itself (sibling of the "Duc" text), not the one above. BG
           gives .login a fixed width (a native .d-container combobox
           behaviour) sized to fit icon + name + chevron together, so hiding
           the icon alone left an empty gap rather than shrinking the box —
           and that fixed width is also what let .login's left edge land on
           top of the MAX badge at narrow widths, since neither box reserves
           space for the other. Dropping the icon and letting the box size to
           its remaining content (name + chevron) fixes both: less clutter,
           and enough clearance that "Duc" no longer overlaps the badge. */
        .sys-announce .login .user-icon { display: none !important; }
        .sys-announce .login {
            width: auto !important;
            min-width: 0 !important;
            padding: 0 12px !important;
        }

        /* Devotional day page title + body copy at phone widths (measured on
           a 375px viewport, /devotionals/<slug>/today). Two separate native
           BG issues, both from desktop-sized values never getting a mobile
           override:

           1. The title is a bare <h1> (no class) sitting directly in
              .content-section — native font-size 3.2rem, which on this
              page's own 12px root is 38.4px. On a 333px-wide line that's
              ~4 lines of oversized type before the reader reaches any
              actual content.
           2. The body copy renders inside .rp-content (a Bootstrap
              .container reused from the desktop reading-plan layout), which
              carries its own 30px left/right padding *on top of* the 15px
              .content-section already applies around it — 45px a side, 90px
              total, on a screen that's only 375px wide to begin with.
              Measured: the title's line box ran the full 333px content
              width, while a paragraph two elements deeper than it was
              capped at 273px — 60px (2x the container's own 30px pad)
              narrower for no layout reason, since nothing here has a second
              column to share the row with. */
        body.page-devotionals .content-section > h1 {
            /* Was 1.9rem (22.8px) — still reported as too big; brought down
               closer to body-copy size (.rp-content p is 1.7rem, 20.4px on
               this same 12px root) so the title reads as a heading by
               weight/serif rather than by dominating the fold. */
            font-size: 1.5rem !important;
            line-height: 1.25 !important;
        }
        body.page-devotionals .rp-content {
            padding-left: 4px !important;
            padding-right: 4px !important;
        }
        /* .content-section (the ancestor, not fixed above) still carries its
           own native 15px a side on top of whatever .rp-content applies —
           trimmed here too, so the two don't keep stacking into the same
           wide gutter the fix above was written to close. */
        body.page-devotionals .content-section {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }

        /* Day pager (Prev Day / date-with-dropdown / Next Day). Native BG:
           .reading-plans-scroller is display:flex; justify-content:space-between;
           align-items:normal — with no explicit align-items, prev/next's
           two-line ".heading" span (wraps at this width: measured 45px box,
           "Prev"/"Day" on separate lines) and the date's one-line ".rp-date"
           don't share a baseline, and the date's own dropdown-icon (an inline
           <span> right after the text) drops onto its own line below the
           date instead of sitting beside it. Forcing both labels onto one
           line and centering the row fixes both at once — nothing here
           needs the wrap, there's room (measured 89.7px for a two-word
           label at this font-size). */
        .reading-plans-scroller {
            align-items: center !important;
        }
        .reading-plans-scroller .prev-link .heading,
        .reading-plans-scroller .next-link .heading {
            white-space: nowrap !important;
            /* Was inheriting ~16.8px. Native BG's own icon wrapper
               (.icon-passage-previous/-next, now hidden entirely — see the
               unscoped rule above) used to make icon+label wider than the
               box the outer scroller's flex-shrink was actually giving
               this link, overflowing the link. This label alone still
               needs to fit without the icon's help. */
            font-size: 13px !important;
        }
        .reading-plans-scroller a.prev-link,
        .reading-plans-scroller a.next-link {
            gap: 4px;
        }
        .reading-plans-scroller .rp-date {
            white-space: nowrap !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 4px;
        }
        /* Keeping the label and the dropdown-icon each on one line (above)
           makes .prev-link/.cal-link/.next-link wider than before, and
           justify-content:space-between only guarantees space BETWEEN the
           row's three flex children in proportion to whatever room is left
           over — it doesn't guarantee a minimum, so at this width "Prev
           Day"/"Next Day" ended up touching the date text directly with no
           gap at all. An explicit margin guarantees the gap regardless of
           how much the three children's own content happens to weigh. */
        .reading-plans-scroller .cal-link {
            margin: 0 10px;
        }

        /* Devotional day pages say the same thing three times above the
           fold: the breadcrumb line spells out the devotional's full name
           + date ("NIV Discover God's Heart Devotional Bible - Sunday,
           August 30, 2026" — .devo-title + .devo-date, both plain text
           nodes), then the <h1> 200px below repeats the exact same title
           string, then the day-pager above repeats the exact same date
           again. This used to hide .devo-title/.devo-date entirely and
           rescue just .bread-crumb back to size (font-size:0 on the whole
           line, then restoring .bread-crumb alone — the only way to get
           rid of the redundant text, since the bare " - " separator
           between .devo-title and .devo-date is a plain text node with no
           element of its own to hide individually).
           Now shown instead, all three sized together directly on the
           shared line rather than zeroing it: setting font-size here once
           and letting .bread-crumb/.devo-title/.devo-date inherit it is
           also what keeps that bare " - " separator visible at the same
           size, rather than needing a rescue rule per child. Smaller than
           the 1.6rem .bread-crumb alone used to render at, since three
           pieces of text now share the line instead of one. */
        body.page-devotionals .passage-details-wrapper .bcv.long-heading {
            /* The full devotional + date duplicates the title and day pager
               immediately below. Preserve only the useful back link. */
            font-size: 0 !important;
            line-height: 1 !important;
            min-height: 0 !important;
            height: auto !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
            margin-bottom: 8px !important;
        }
        body.page-devotionals .passage-details-wrapper .bread-crumb {
            font-size: 13px !important;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        body.page-devotionals .passage-details-wrapper .bread-crumb a {
            /* BG's desktop breadcrumb link carries 13px vertical margins;
               once it is the only context item left on mobile, those margins
               create an otherwise empty extra line. */
            margin: 0 !important;
        }
        body.page-devotionals .passage-details-wrapper .devo-title,
        body.page-devotionals .passage-details-wrapper .devo-date {
            display: none !important;
        }
        /* Keep the title, duration, and audio action as a compact intro block
           before the devotional itself; the day navigation above is untouched. */
        body.page-devotionals .content-section > h1 {
            margin: 16px 0 4px !important;
        }
        body.page-devotionals .day-num-days {
            margin: 0 0 4px !important;
        }
        body.page-devotionals #bg-devo-audio-row {
            margin: 0 0 10px !important;
        }
        body.page-devotionals .rp-content {
            font-size: 15px !important;
            line-height: 1.6 !important;
        }
        body.page-devotionals {
            /* Clears both the floating listener and Safari's expanded bottom
               toolbar at the final paragraph/end controls. */
            padding-bottom: max(env(safe-area-inset-bottom, 0px), 132px) !important;
        }

        /* With .login living outside this row now (positioned on top of it,
           above) and the avatar hidden, .logo-menu-user is left with only two
           real flex children — menu-icon and logo. Its native BG layout
           (most likely justify-content:space-between, sized for three-plus
           children including a right-side anchor) had nothing left to anchor
           against, which is what pushed the wordmark and its MAX badge out
           to — and past — the right edge instead of sitting after the
           hamburger. Taking explicit control instead of depending on
           however BG balances however many children happen to be present. */
        .logo-menu-user {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
        }
        /* Spacing between the hamburger icon and the wordmark — native BG
           has them nearly touching at this width. */
        .logo-menu-user .menu-icon { margin-right: 14px !important; flex-shrink: 0 !important; }
        .logo-menu-user .logo { flex-shrink: 0 !important; }

        /* -- The collapsed mobile menu. BibleGateway swaps the left nav rail for
              a hamburger menu at phone widths and hides the closed menu with
              visibility:hidden — which still reserves its box, so 450px of dead
              space sat between the account row and the search field, roughly
              half a phone screen of nothing before any content.

              Keyed to BG's own state classes rather than a width guess, so
              opening the menu still works: it adds an-mobile-menu-open alongside
              the closed class rather than swapping them. Don't reach for a blunt
              `.top-nav { display:none }` here — that list is the real
              navigation from about 600px up, and this rule has to stay off it
              whenever the menu is actually open. -- */
        .an-mobile-menu-closed:not(.an-mobile-menu-open) { display: none !important; }
        /* -- Controls row. Keep the three primary controls together. Chapter
              paging now lives in the Reading Plan modal, so there is room for
              the full labels without a second row. -- */
        .bbl-fontsize {
            flex-wrap: nowrap !important;
            width: 100% !important;
            gap: 4px !important;
            margin-top: 8px !important;
            justify-content: space-between !important;
        }
        .bbl-fontsize > * {
            flex: 0 1 auto !important;
            min-width: 0 !important;
            margin-left: 0 !important;
        }
        .bbl-dropdown { order: 1; }
        .fontsize-dropdown { order: 2; }
        #bg-rp-btn {
            order: 3;
            align-self: center !important;
            margin: 0 !important;
        }
        .toggle-bbl,
        .toggle-fontsize,
        #bg-rp-btn {
            font-size: clamp(10px, 3vw, 13px) !important;
            gap: 3px !important;
            padding: 4px clamp(5px, 1.5vw, 8px) !important;
        }
        /* The book picker now replaces this label with the current book and
           chapter. Keep that live text visible instead of drawing the former
           hard-coded "Book List" mobile abbreviation over it. */
        .toggle-bbl > span { font-size: inherit !important; }
        .toggle-bbl > span::before { content: none; }
        /* This divider belongs to the desktop header above the search form.
           On a phone it becomes an unexplained red rule at the top of the
           controls, while the lower divider already provides their boundary. */
        .content-divider { display: none !important; }

        /* -- Tab strip (Passage / Resources / Hebrew-Greek / Your Content).
              This one is the reason the whole page overflowed: as a nowrap flex
              row its min-content width is ~413px, and being deep inside a column
              flex container it pushed every ancestor out to that width, so at
              375px the last 43px of every line of scripture was off-screen with
              nothing to scroll it back. Let it wrap; its carousel arrows are
              for a single-line strip and are meaningless once it does. -- */
        .sidebar-tabs, .carousel, .carousel-list {
            max-width: 100% !important;
            min-width: 0 !important;
        }
        .carousel-list {
            flex-wrap: wrap !important;
            justify-content: flex-start !important;
            height: auto !important;
            row-gap: 4px !important;
            column-gap: 18px !important;
        }
        /* Without this the items keep the even spacing they had as a single
           row, so a wrapped "Your Content" lands centred on a line of its own
           and reads as a mistake rather than a fourth tab. */
        .carousel-list > li { flex: 0 0 auto !important; margin: 0 !important; }
        .carousel .arrow { display: none !important; }

        /* -- The header ad slot. Reserves 100px of empty space above the search
              field on a phone; the theme already strips the rest of the ad
              furniture, so this is the last of it. -- */
        .mobile-pushdown, .raptive-bg-header,
        .adthrive-header, .adthrive-ad.adthrive-header { display: none !important; }

        /* -- Text inputs at 16px. iOS Safari zooms the whole page in when you
              focus an input whose font-size is below 16px, and then leaves you
              zoomed; .quick-search was 15px, which is why tapping the search
              box threw the layout out. 16px is the threshold, not a preference —
              don't lower it. Setting it here rather than adding
              maximum-scale=1 to the viewport, which would stop you pinch-zooming
              the page at all. -- */
        input, select, textarea,
        .search-form .quick-search { font-size: 16px !important; }

        /* -- Resource covers, denser. Two per row with a lot of air around them:
              the cards carry a 28px right margin and .resources itself adds 46px
              of side padding, so of a 430px screen only about 260px reached the
              covers. The card container is .pubs-featured in some sections and
              .pubs-library in others — both get the same treatment, since which
              one appears depends on the section and on being signed in.
              The covers are a fixed 100px and have to become fluid, or they
              simply overflow the narrower card. -- */
        /* Passage already occupies the entire stacked column on mobile; the
           secondary tabs were still inset by their desktop resources/sidebar
           wrappers. Flatten only those outer gutters so Resources, Study,
           Hebrew/Greek and Notes align to the same edges as Passage. */
        body.page-passage .resources,
        body.page-passage .resources > .sticky-resources,
        body.page-passage .resources .sidebar-box {
            width: 100% !important;
            max-width: none !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            box-sizing: border-box !important;
        }
        body.page-passage .resources .sidebar-box > div,
        body.page-passage .resources div:has(> * > .resources-content) {
            width: 100% !important;
            max-width: none !important;
            box-sizing: border-box !important;
        }
        .pubs-featured, .pubs-library {
            gap: 16px 14px !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }
        /* The gutter is doing double duty: it separates the covers, and it keeps
           two wrapped titles from reading as one run of text. */
        .pubs-featured > *, .pubs-library > * {
            margin: 0 !important;
            flex: 0 0 calc(33.333% - 10px) !important;
            max-width: calc(33.333% - 10px) !important;
            min-width: 0 !important;
        }
        /* The card's contents carry their own hardcoded widths — the title block,
           the Plus badge and the entry count are all a fixed 130px, and the cover
           wrapper 100px. Against a card narrowed to ~97px those overflow sideways
           into the next card, which is why the titles printed on top of each
           other. Nothing here clips: they just have to be allowed to shrink and
           wrap. img is excluded so its own 100% rule below still applies. */
        .pubs-featured > * *:not(img), .pubs-library > * *:not(img) {
            width: auto !important;
            max-width: 100% !important;
            overflow-wrap: break-word !important;
            /* break-word alone splits mid-word in a ~97px column — "Applicatio"
               / "n Bible". Hyphenation puts the break at a syllable and marks it,
               and the smaller type fits more before one is needed at all. */
            hyphens: auto;
            -webkit-hyphens: auto;
        }

        /* ===== Resources tab header ("Resources for X" + "Find resource") =====
           Native BG lays .passage-list ("Resources for Leviticus 2") and .search
           ("Find resource") out side by side in the same row. There's no width
           at which that works on a phone — verified live: the heading wraps
           "for Leviticus" then "2" onto its own line fighting .search for the
           same row, so a three-word phrase costs 3 lines. Stacking them (one
           row each) is the fix, not a narrower/smaller heading — the row was
           never wide enough for two things side by side at any font size that
           stays readable. */
        .header {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 10px !important;
        }
        /* .search ("Find resource") was a bare maroon link — icon, no border,
           no fill — while every filter below it is a bordered pill. Same
           bordered-pill treatment the day-pager and dropdown controls already
           use elsewhere in this theme, so it reads as a control rather than
           inline text. */
        .header .search {
            border: 1px solid var(--border-strong) !important;
            background: var(--bg-card) !important;
            border-radius: 999px !important;
            padding: 8px 14px !important;
            width: fit-content !important;
        }

        /* ===== Resource filters ===== */
        /* Native BG stacks these one per line — with pill widths set by each
           label, the shorter ones ("All", "Encyclopedias") leave most of the
           row empty and the stack's right edge runs jagged top to bottom.
           Wrapping lets short labels share a row like "All" + "Pinned
           Resources" already do natively, instead of every filter claiming a
           full row it doesn't need. */
        .filters {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 8px !important;
        }
        .filters > * {
            flex: 0 0 auto !important;
        }
        /* Every filter icon (pin, book, globe, speech bubble, "A", compass) is
           the same mid-blue regardless of category — the one cold color on an
           otherwise warm maroon/cream page. Recoloring to the theme's own
           muted secondary tone makes them read as one system instead of an
           imported icon set; the selected pill already goes white-on-maroon
           natively and is left alone. */
        .filter:not(.selected) .filter-icon svg {
            fill: var(--text-secondary) !important;
        }
        /* "X results" sits between the filters and "Pinned Resources" in
           lighter grey than either neighbour, so it's unclear which of the
           two it belongs to and it's the one piece of status text that's
           harder to read than the content around it. Tightening the gap to
           the filters above (its actual subject — how many results the
           current filter selection matches) and darkening it to the theme's
           standard secondary text color fixes both at once. */
        .result {
            color: var(--text-secondary) !important;
            font-weight: 600 !important;
            margin-top: 4px !important;
            margin-bottom: 20px !important;
        }
        /* The actual Resources-tab card is an unnamed div two levels above
           .resources-content (no class/id of its own, hence :has() rather
           than a normal selector) carrying background:#fff inline — flat
           white against this theme's cream everywhere else, the same
           "nested cream on cream" complaint but for the wrong reason: it
           isn't a shade-matching problem, it's a stray white card that
           never got the theme's background at all. Its native padding
           (24px 16px 62px) also front-loads far more space above the
           heading than the content underneath ever uses. */
        .resources div:has(> * > .resources-content) {
            background: var(--bg-card) !important;
            padding: 14px 8px 24px !important;
        }

        /* ===== Sticky tab bar height + active-tab underline =====
           Native BG gives each tab li padding:18px 0 and a fixed
           height:calc(44px + 2rem) (~68px), most of which sits *below* the
           text baseline before the active tab's own border-bottom fires —
           measured live: 27px between the label's bottom edge and the
           underline, far enough that it reads as an unrelated divider rather
           than an indicator for the text above it. Cutting the padding both
           tightens that gap and shrinks the whole two-row bar's height,
           which was costing ~17% of the viewport permanently. */
        .sidebar-menu li {
            padding: 8px 0 4px !important;
            height: auto !important;
        }
        /* BibleGateway's carousel owns the mobile pinning behavior: it applies
           position:fixed plus the correct viewport offsets as the page scrolls.
           Do not override that with position:sticky here. On a phone the menu
           sits inside the short .top-bar row, so CSS sticky can only stick for
           the height of that row and then scrolls away with the passage. */
        .sidebar-menu,
        .sidebar-menu.bg-tabbar-relocated {
            top: var(--bg-mobile-search-header-h, 0px) !important;
            z-index: 490 !important;
            margin-bottom: 10px !important;
        }
        /* Five readable tab labels cannot always fit on a phone. Preserve
           their full labels and let the strip swipe horizontally rather than
           wrapping it over the reading content. */
        /* Do not make .sidebar-tabs scrollable: it is the sticky menu's
           ancestor, and overflow:auto there makes it the sticky containing
           scrollport instead of the page. Keep that wrapper unclipped and
           put the horizontal swipe affordance on the sticky menu itself. */
        .sidebar-tabs,
        .sidebar-tabs .carousel {
            overflow: visible !important;
        }
        .sidebar-menu {
            /* BG's carousel writes a desktop pixel width inline (400px in the
               361px test), which is enough to create horizontal page scroll
               even after every surrounding shell has been constrained. */
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
            overflow-x: auto !important;
            overflow-y: visible !important;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
        }
        .sidebar-menu::-webkit-scrollbar { display: none; }
        /* The five full section labels overrun the rounded strip's safe inset
           on common 393–430px phones, leaving Note under the clipped right
           edge. Trim the tab type slightly across that range, with the existing
           stronger reduction at the narrowest phone widths. The strip remains
           horizontally swipeable for larger text preferences. */
        @media (max-width: 430px) {
            .sidebar-menu li { font-size: 14px !important; }
        }
        @media (max-width: 390px) {
            .sidebar-menu li { font-size: 12px !important; }
        }
        /* Study Tools is an overlay so it can replace native Resources, but
           its desktop `overflow:auto` turns it into a second touch scrollport.
           Once a BibleRef accordion expands, iOS can trap the gesture in that
           inner surface instead of continuing the document scroll. Let the
           page own vertical scrolling on phones. The desktop panel is also
           pinned with both top:0 and bottom:0; after overflow is released that
           would leave the card itself at the resource column's old height while
           expanded commentary paints beyond its border/background. Release the
           bottom edge so the absolutely positioned overlay sizes to its content. */
        body.page-passage #bg-study-panel {
            bottom: auto !important;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            overscroll-behavior: auto !important;
            -webkit-overflow-scrolling: auto;
        }
        .sidebar-tabs .carousel-list {
            width: max-content !important;
            min-width: 100% !important;
            flex-wrap: nowrap !important;
            padding-right: 16px !important;
        }
        .pubs-featured > * a, .pubs-library > * a {
            font-size: 13px !important;
            line-height: 1.35 !important;
        }
        /* Cover wrapper div carries the red gradient background and min-height:160px inline */
        .pubs-featured > * div:has(> img),
        .pubs-library > * div:has(> img) {
            width: 100% !important;
            min-height: 0 !important;
        }
        .pubs-featured img, .pubs-library img {
            width: 100% !important;
            height: auto !important;
            max-width: 100% !important;
            min-height: 0 !important;
        }

        /* -- Reading measure. Justification needs a wide measure to distribute
              space evenly. At ~40 characters it opens rivers of white space
              instead, so rag-right reads better here. -- */
        .passage-text p { text-align: left !important; }
        .passage-text { columns: auto !important; }
        /* hyphens:auto (set for the desktop justified column above) earns
           its keep by shrinking justify's whitespace rivers — with the
           override right above already dropping back to ragged-right at
           this width, there's no river left for it to fix, just every
           other line ending mid-word ("encour-aged", "as-sembled") for no
           benefit. */
        .passage-text p {
            hyphens: none !important;
            -webkit-hyphens: none !important;
            -ms-hyphens: none !important;
        }

        /* Verse paragraphs carry text-indent: -34px, a hanging indent that puts
           the verse number in a gutter to the left of the text. That needs the
           desktop card's ~40px of side padding to hang into; against the 16px
           here the first line started at -19px and the verse number and first
           letter were cut off the edge of the screen — "And God said" rendered
           as "nd God said".
           Dropped rather than paid for: reserving 34px of gutter costs about 9%
           of the line on a phone, and flush-left verses read fine without it. */
        .passage-text p { text-indent: 0 !important; }

        /* -- The toolbar row. Pinned with position:absolute above, it reserves
              no space, so the passage runs underneath it and the row's
              border-bottom is drawn straight through the first heading — the
              line that reads as a strikethrough on "Divorce". Measured: the
              border sits at y=560 and the heading spans 545-572.

              Putting it back in flow fixes that by construction, and also fixes
              the row being 558px wide in a 430px viewport, which clipped the
              last icon off the right edge. -- */
        .passage-tools,
        .passage-tools.w-sidebar,
        .passage-tools.no-sidebar {
            position: static !important;
            width: auto !important;
            max-width: 100% !important;
            /* One row, not two. Eight buttons at the desktop's 44px with a 14px
               gap need 460px and wrapped 5+3, which read as two unrelated
               groups. At 34px with the gap distributed they come to ~330px and
               fit any phone in portrait. */
            display: flex !important;
            flex-wrap: nowrap !important;
            justify-content: space-between !important;
            gap: 4px !important;
            padding: 2px 0 10px !important;
            margin: 0 0 4px !important;
        }
        .passage-tools > * {
            flex: 0 0 auto !important;
            margin: 0 !important;
        }
        .passage-tools a, .passage-tools span, .passage-tools button {
            width: 34px !important;
            height: 34px !important;
            min-width: 34px !important;
            padding: 0 !important;
            /* Sizing alone doesn't center the icon inside the circle — an
               inline SVG's own baseline/line-height, not the box, decided
               where it sat, which is what left print/share off-center once
               the box was forced to this fixed size. Flex centering pins
               it regardless of the icon's own inline metrics. */
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .passage-tools svg, .passage-tools img {
            width: 17px !important;
            height: 17px !important;
        }

        /* The gap ABOVE the toolbar (between the breadcrumb row and the
           share/print icons) is the same double-counting bug as the one
           documented right below for the gap *after* it: .passage-tools
           was position:absolute, so something upstream (.passage-details/
           .passage-bar) very likely still carries its own reserved height/
           margin-bottom sized to clear where that absolutely-positioned
           row used to float — now that the toolbar is a real in-flow row
           of its own (fixed above), that reservation is stale space with
           nothing left to reserve room for. Couldn't find the exact native
           declaration to confirm the value (BG's relevant stylesheet isn't
           one of the small linked files, so it wasn't reachable to read
           directly) — zeroing height/margin/padding on the likely
           candidates is a safe reset either way: it can only collapse
           stale reserved space, not remove real content. */
        .passage-bar, .passage-details, .passage-details-wrapper {
            height: auto !important;
            min-height: 0 !important;
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }

        /* Devotional entries don't need the share/print/bookmark toolbar
           this whole block above exists to fix up for the reading page —
           dropped entirely there rather than kept in the mobile layout it
           was never really meant for. */
        body.page-devotionals .passage-tools { display: none !important; }

        /* The hole between the toolbar rule and "Divorce" was 54px of two things
           stacked: .passage-text carries margin-top: 50px to clear the toolbar
           back when it was absolutely positioned over the text, and the first
           heading then added its own 22px on top. In flow the toolbar occupies
           its own space, so both are now double-counting.
           The h3 selector has to go through .std-text — the heading is not a
           child of .passage-text itself. */
        .passage-text { margin-top: 8px !important; }
        .passage-text .std-text > h3:first-child { margin-top: 0 !important; }

        /* -- Backgrounds. These rows inherit the page colour by being
              transparent, which breaks the moment WebKit sticks one of them to
              the top of the viewport: it then paints over the passage with the
              browser's default white rather than the page's cream. Stating the
              colour costs nothing and holds however they end up positioned. -- */
        .float-header, .float-header-spacer, .top-bar, .sidebar-tabs,
        .carousel, .carousel-list, .search-form-nav {
            background: var(--bg-page) !important;
        }
    }

    /* ===== Cookie consent banner (OneTrust) =====
       Site-wide, not reading-page-specific — it can appear over any page.
       Couldn't be re-triggered live to iterate on visually (clearing
       OptanonConsent/OptanonAlertBoxClosed didn't bring it back in this
       session — OneTrust also checks OTGPPConsent and possibly a
       server-recorded decision), so this targets OneTrust's documented,
       stable element IDs and stays conservative: recolour and refont to the
       theme, don't touch layout/position, so there's little for an
       un-previewed change to get wrong. */
    #onetrust-banner-sdk {
        background: var(--bg-card) !important;
        border-top: 1px solid var(--border-strong) !important;
        box-shadow: 0 -4px 24px rgba(120, 90, 40, 0.12) !important;
        font-family: Georgia, "Iowan Old Style", "Charter", "Source Serif Pro", serif !important;
    }
    #onetrust-banner-sdk #onetrust-policy-title,
    #onetrust-banner-sdk #onetrust-policy-text,
    #onetrust-banner-sdk .ot-b-addl-desc,
    #onetrust-banner-sdk * {
        color: var(--text-primary) !important;
        font-family: Georgia, "Iowan Old Style", "Charter", "Source Serif Pro", serif !important;
    }
    #onetrust-banner-sdk a {
        color: var(--link) !important;
    }
    #onetrust-banner-sdk #onetrust-accept-btn-handler {
        background-color: var(--accent) !important;
        border-color: var(--accent) !important;
        color: #fff !important;
        border-radius: 8px !important;
    }
    #onetrust-banner-sdk #onetrust-accept-btn-handler:hover {
        background-color: #7a1a03 !important;
        border-color: #7a1a03 !important;
    }
    #onetrust-banner-sdk #onetrust-reject-all-handler,
    #onetrust-banner-sdk #onetrust-pc-btn-handler {
        background-color: var(--bg-page) !important;
        border-color: var(--border-strong) !important;
        color: var(--text-primary) !important;
        border-radius: 8px !important;
    }

    /* /devotionals/ leads with a "Bible Gateway Plus Premium Devotionals"
       upsell section ahead of the actual (free, subscribable) devotionals.
       .devo-container's flex-direction is row-reverse + wrap (presumably
       doing other responsive work elsewhere), so reordering it risks
       fighting that rather than cleanly moving it — hiding is the safe
       option here. */
    .devo-container .all-premium-devos {
        display: none !important;
    }
    /* Its sibling already computes flex-basis:100% naturally (confirmed live),
       so this is just insurance against a narrower desktop breakpoint giving
       it a fixed/partial basis instead and leaving a blank gap where the
       hidden section used to sit. */
    .devo-container .non-premium-devos {
        flex: 1 1 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ===== Topical Index page (/topical/<term>/Nave/) =====
       Never touched by this stylesheet before — it's a different template
       from the passage/search pages, so it fell through to bare BG markup:
       naked <select>s with zero visible chrome (BG's own base CSS already
       sets `appearance: none` on them site-wide but never gives them a
       replacement box, so they render as unboxed text), a plain-text A-Z
       jump list, and the one stray BG-blue submit button left outside the
       parchment/maroon palette (same blue documented on the "helpful" pills
       above — BG's default, not something we chose). */
    body.page-topical #updateresultsform input[type="text"],
    body.page-topical .field-line select {
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        color: var(--text-primary);
        padding: 6px 10px;
    }
    body.page-topical .field-line select {
        padding-right: 28px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23952004' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 14px;
        cursor: pointer;
    }
    body.page-topical #updateresultsform input[type="text"]:focus,
    body.page-topical .field-line select:focus {
        outline: none;
        border-color: var(--accent);
    }
    body.page-topical input[type="submit"] {
        background: var(--accent) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 7px 18px !important;
        font-weight: 600 !important;
        cursor: pointer;
        transition: background 0.15s;
    }
    body.page-topical input[type="submit"]:hover { background: #7a1a03 !important; }

    /* A-Z jump list */
    body.page-topical #letterindex {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 0;
        margin: 12px 0;
    }
    body.page-topical #letterindex a,
    body.page-topical #letterindex strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        height: 26px;
        padding: 0 4px;
        border-radius: 6px;
        color: var(--text-primary);
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
    }
    body.page-topical #letterindex a:hover {
        background: var(--bg-card-hover);
        color: var(--accent);
    }
    /* The current letter is rendered as a bare <strong>, no link. */
    body.page-topical #letterindex strong {
        background: var(--accent);
        color: #fff;
    }

    /* Numbered results list */
    body.page-topical .letter-results {
        padding-left: 22px;
    }
    body.page-topical .letter-results > li {
        padding: 6px 0;
        line-height: 1.5;
    }

    /* ===== Keyword search results page (/quicksearch/, /search/...) =====
       Same "bare custom dropdown" problem as the Topical Index selects above,
       different markup: BG builds these as a hidden 0×0 <select> plus a
       sibling .js-dropdowns trigger (text + an svg chevron) that it swaps
       visible/hidden itself — completely unstyled by BG outside its own
       version-picker widget, so "New International Version." mid-sentence
       and "25 results per page" in the sidebar rendered as plain unboxed
       text with no affordance that they're clickable controls.
       .js-dropdowns is reused for two OTHER things on this page that must
       NOT get this treatment: .filter-dropdown's copy (a duplicate of the
       FILTER BY sidebar, kept at width:0 rather than display:none — adding
       padding/border here would draw a small empty pill out of nothing,
       confirmed live) and .mobile-rpp (BG's own name for it — a
       responsive-swap duplicate of the same results-per-page control, also
       width:0 at desktop widths). Scoped to just the two live ones instead
       of the bare class. */
    body.page-search .results-info .js-dropdowns,
    body.page-search .results-per-page .js-dropdowns {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif !important;
        border-radius: 999px !important;
        border: 1px solid var(--border-strong) !important;
        padding: 8px 14px !important;
        background: var(--bg-card) !important;
        color: var(--text-primary) !important;
        transition: all 0.2s;
        cursor: pointer;
    }
    body.page-search .results-info .js-dropdowns:hover,
    body.page-search .results-per-page .js-dropdowns:hover {
        border-color: var(--accent) !important;
        background: var(--accent-soft) !important;
    }

    /* ===== Reading-page polish =====
       Keep utility actions legible without making them compete with the
       scripture, and give the two primary cards a clearer boundary from the
       parchment page. Screen-only so printed output stays purely typographic. */
    @media screen and (min-width: 1025px) {
        body.page-passage .content > hr {
            width: calc(100% - 48px) !important;
            margin: 0 24px !important;
            opacity: .72;
        }
        body.page-passage .passage-box {
            border-color: var(--border-strong) !important;
            box-shadow:
                0 1px 2px rgba(120, 90, 40, .06),
                0 10px 28px rgba(120, 90, 40, .09) !important;
        }
        body.page-passage .passage-tools,
        body.page-passage .passage-tools.w-sidebar,
        body.page-passage .passage-tools.no-sidebar {
            width: fit-content !important;
            max-width: calc(100% - 20px) !important;
            padding: 6px 10px !important;
            margin: 0 0 12px 0 !important;
            gap: 10px !important;
            border: 1px solid var(--border-soft) !important;
            border-radius: 12px;
            background: rgba(255, 250, 240, .62);
            box-shadow: 0 2px 8px rgba(120, 90, 40, .06);
        }
        body.page-passage .passage-tools a,
        body.page-passage .passage-tools span {
            opacity: .68;
        }
        body.page-passage .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools,
        body.page-passage .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools.w-sidebar,
        body.page-passage .passage-cols:has(.passage-col-tools + .passage-col-tools) .passage-tools.no-sidebar {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 0 16px !important;
            gap: 4px !important;
        }
    }

    /* ===== Print view reset =====
       BG's print button opens ?interface=print, which still carries
       body.page-passage — our overflow:hidden/height:100% scroll-jail and
       the independent-scroll container heights make the print page blank. */

    /* ===== Voice picker menu =====
       The shared picker was still using the compact type and 20px preview
       targets from the floating utility panel even when opened from the much
       larger inline Listen control. Give every instance a readable menu while
       retaining each owner's positioning (above for the floating panel, below
       for feed/devotional controls). Important declarations deliberately beat
       an older installed userscript copy that may have injected its CSS later. */
    .bg-listen-voice-dropdown {
        border: 1px solid var(--border-strong, #cfbf94) !important;
        border-radius: 14px !important;
        background: #fffaf0 !important;
        box-shadow: 0 14px 38px rgba(64, 43, 20, .18), 0 2px 8px rgba(64, 43, 20, .1) !important;
    }
    #bg-feed-dialog .bg-feed-detail-voice .bg-listen-voice-dropdown,
    .bg-inline-listen-voice .bg-listen-voice-dropdown {
        width: min(300px, calc(100vw - 48px)) !important;
    }
    .bg-listen-voice-search {
        min-height: 42px !important;
        padding: 10px 13px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border-soft, #e0d4b3) !important;
        border-radius: 14px 14px 0 0 !important;
        background: rgba(255, 255, 255, .46) !important;
        color: var(--text-primary, #1a1612) !important;
        font-size: .92rem !important;
        line-height: 1.35 !important;
    }
    .bg-listen-voice-search::placeholder { color: #8a8175 !important; opacity: 1; }
    .bg-listen-voice-search:focus {
        outline: none !important;
        box-shadow: inset 0 -2px 0 rgba(149, 32, 4, .45) !important;
    }
    .bg-listen-voice-list {
        max-height: min(292px, 48vh) !important;
        padding: 2px 0 4px;
        scrollbar-color: #cfbf94 transparent;
        scrollbar-width: thin;
    }
    .bg-listen-voice-group-label {
        padding: 7px 13px 5px !important;
        color: #756b5d !important;
        font-size: .72rem !important;
        font-weight: 800 !important;
        letter-spacing: .075em !important;
    }
    .bg-listen-voice-option {
        min-height: 38px;
        margin: 1px 6px;
        padding: 5px 8px 5px 10px !important;
        border-radius: 9px;
        color: var(--text-primary, #1a1612) !important;
        font-size: .9rem !important;
        line-height: 1.35;
        transition: background .12s ease, box-shadow .12s ease;
    }
    .bg-listen-voice-option:hover { background: rgba(149, 32, 4, .065) !important; }
    .bg-listen-voice-option.selected {
        background: rgba(149, 32, 4, .095) !important;
        box-shadow: inset 2px 0 0 var(--accent, #952004) !important;
        font-weight: 750 !important;
    }
    .bg-listen-voice-preview-btn {
        width: 28px !important;
        height: 28px !important;
        border: 1px solid rgba(149, 32, 4, .16) !important;
        background: rgba(149, 32, 4, .055) !important;
        color: var(--accent, #952004) !important;
        transition: background .12s ease, border-color .12s ease, transform .1s ease;
    }
    .bg-listen-voice-preview-btn:hover {
        border-color: rgba(149, 32, 4, .35) !important;
        background: rgba(149, 32, 4, .12) !important;
        filter: none !important;
    }
    .bg-listen-voice-preview-btn:active { transform: scale(.94); }
    .bg-listen-voice-preview-btn.playing {
        border-color: var(--accent, #952004) !important;
        background: var(--accent, #952004) !important;
        color: #fffaf0 !important;
    }

    @media (max-width: 1024px) {
        /* iOS zooms the page when focusing an input whose text is under 16px. */
        .bg-listen-voice-search { font-size: 16px !important; }
        #bg-feed-dialog .bg-feed-detail-voice .bg-listen-voice-dropdown,
        .bg-inline-listen-voice .bg-listen-voice-dropdown {
            width: min(286px, calc(100vw - 52px)) !important;
        }
        .bg-listen-voice-list { max-height: min(260px, 42dvh) !important; }
    }

    /* Keep keyboard/programmatic focus from adding browser- or site-supplied
       outlines and halo shadows. Interaction state is still communicated by
       the existing hover, selected, active, and disabled treatments. */
    :focus,
    :focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    @media print {
        html:has(body.page-passage), body.page-passage,
        html, body {
            height: auto !important;
            overflow: visible !important;
            max-width: none !important;
        }
        body.page-passage .page-col, body.page-passage .content,
        body.page-passage .passage-resources-container,
        body.page-passage .passage-resources,
        body.page-passage .passage-box,
        body.page-passage .resources {
            overflow: visible !important;
            height: auto !important;
            max-height: none !important;
        }
    }