/* TOC item spacing — inline override for cache-proof delivery */
        .toc-item {
            margin-bottom: var(--toc-item-spacing, 4px) !important;
        }

        /* Ensure sidebar TOC is fully scrollable on mobile */
        .sidebar-toc {
            padding-bottom: 80px;
        }

        /* TOC Group Parents */
        .toc-group-parent .toc-group-link {
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--secondary-color, #666);
            cursor: default;
            display: flex;
            align-items: center;
        }

        /* Active state on parent/group links — override the secondary color */
        .toc-group-parent .toc-group-link.active {
            background: var(--toc-active-bg, var(--color-primary));
            color: var(--toc-active-color, white);
            box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
            cursor: pointer;
            border-radius: var(--radius-md, 8px);
            padding: var(--spacing-md, 10px);
        }

        .toc-group-parent > .toc-item-header {
            padding: 10px 12px 6px;
        }

        .toc-group-parent .toc-sublink {
            font-size: var(--toc-subitem-font-size, 0.82rem);
            padding: 6px 12px;
        }

        .toc-chapter-subtitle {
            display: block;
            font-size: var(--toc-subitem-font-size, 0.82rem);
            opacity: 0.85;
        }

        .toc-group-parent .toc-sublink.active {
            background: var(--toc-active-bg, var(--color-primary));
            color: var(--toc-active-color, white);
            font-weight: 600;
            border-inline-start-color: var(--toc-active-bg, var(--color-primary));
            border-radius: var(--radius-md, 8px);
        }

        /* Footnote Styling */
        .footnote-ref {
            cursor: pointer;
            color: var(--color-primary);
            font-weight: bold;
            padding: 0 2px;
            transition: all 0.2s;
            text-decoration: underline dotted;
        }

        .footnote-ref:hover {
            background: var(--selection-bg);
            border-radius: 3px;
        }

        /* Printed Table of Contents page */
        .content-body ul.toc-list {
            list-style: none;
            padding: 0;
            margin: 0.5rem 0 1.5rem 0;
        }
        .content-body ul.toc-list > li.toc-entry {
            margin-bottom: 0.5rem;
        }
        /* Title + page: table-row so page never collapses onto the title */
        .content-body .toc-row {
            display: table;
            width: 100%;
            padding: 0.3rem 0;
            border-bottom: 1px dotted var(--border-color, rgba(0,0,0,0.15));
            table-layout: fixed;
            direction: ltr; /* force title-left page-right layout even in RTL books */
        }
        .content-body .toc-row .toc-title {
            display: table-cell;
            font-weight: 600;
            padding-right: 2rem;  /* generous gap so page never touches title */
            width: 92%;
            word-break: break-word;
        }
        .content-body .toc-row .toc-page {
            display: table-cell;
            font-weight: 400;
            color: var(--text-muted, #999);
            font-size: 0.9em;
            width: 8%;
            white-space: nowrap;
            text-align: right;
            vertical-align: top;
        }
        /* RTL: title text flows right, page stays left column */
        [dir="rtl"] .content-body .toc-row { direction: rtl; }
        [dir="rtl"] .content-body .toc-row .toc-title { padding-right: 0; padding-left: 2rem; text-align: right; }
        [dir="rtl"] .content-body .toc-row .toc-page { text-align: left; }
        /* Sub-entries: always a block element BELOW the .toc-row */
        .content-body ul.toc-sub {
            display: block;
            list-style: none;
            padding: 0.1rem 0 0.2rem 0;
            margin: 0;
        }
        .content-body ul.toc-sub > li.toc-entry-sub {
            display: table;
            width: 80%;   /* 80% = well away from right page-number column */
            padding: 0.1rem 0;
            table-layout: fixed;
        }
        .content-body ul.toc-sub .toc-sub-title {
            display: table-cell;
            font-weight: 400;
            font-size: 0.88em;
            opacity: 0.8;
            padding-right: 1rem;
            width: 88%;
            word-break: break-word;
        }
        .content-body ul.toc-sub .toc-sub-page {
            display: table-cell;
            font-weight: 400;
            font-size: 0.88em;
            opacity: 0.8;
            width: 12%;
            white-space: nowrap;
            text-align: right;
            vertical-align: top;
        }
        [dir="rtl"] .content-body .toc-row .toc-title { padding-right: 0; padding-left: 2rem; }
        [dir="rtl"] .content-body .toc-row .toc-page { text-align: left; }
        [dir="rtl"] .content-body ul.toc-sub .toc-sub-title { padding-right: 0; padding-left: 1rem; text-align: right; }
        [dir="rtl"] .content-body ul.toc-sub .toc-sub-page { text-align: left; }
        [dir="rtl"] .content-body ul.toc-sub > li.toc-entry-sub { direction: rtl; }

        /* Bibliography list — hanging indent, one entry per <li> */
        .content-body ul.bibliography {
            list-style: none;
            padding: 0;
            margin: 0.5rem 0 1.5rem 0;
        }
        .content-body ul.bibliography li {
            padding-left: 2rem;
            text-indent: -2rem;
            margin-bottom: 0.6rem;
            line-height: 1.7;
        }
        [dir="rtl"] .content-body ul.bibliography li {
            padding-left: 0;
            padding-right: 2rem;
            text-indent: -2rem;
        }

        /* Notes / endnotes list — numbered entries */
        .content-body ol.notes-list {
            list-style: none;
            padding: 0;
            margin: 0.5rem 0 1.5rem 0;
            counter-reset: none;
        }
        .content-body ol.notes-list li {
            padding-left: 2.5rem;
            text-indent: -2.5rem;
            margin-bottom: 0.7rem;
            line-height: 1.7;
            font-size: 0.9em;
            color: var(--body-color);
            opacity: 0.9;
        }
        [dir="rtl"] .content-body ol.notes-list li {
            padding-left: 0;
            padding-right: 2.5rem;
            text-indent: -2.5rem;
        }

        /* External link styling */
        .content-body a.external-link {
            color: var(--color-primary, #1A535C);
            text-decoration: underline;
            word-break: break-all;
            transition: opacity 0.2s;
        }
        .content-body a.external-link:hover {
            opacity: 0.75;
        }
        .content-body a.external-link::after {
            content: " ↗";
            font-size: 0.75em;
            opacity: 0.6;
            vertical-align: super;
        }

        /* ═══════════════════════════════════════════════════════════════
           SCRIPTURE (Bible / verse) rendering — responsive, LTR + RTL
           Applies to any book detected as scripture markup (Bible Hub /
           Van Dyck). Verse numbers = <span class="reftext">, pericope
           headings = <p class="hdg">, cross-refs = <p class="cross">,
           chapter dividers = <h3 class="bible-chapter-head">, verse
           paragraphs = <p class="reg">.
           ═══════════════════════════════════════════════════════════════ */
        /* Chapter divider (e.g. "Genesis 1") */
        .content-body h3.bible-chapter-head {
            font-size: 1.35rem;
            font-weight: 700;
            text-align: left;
            margin: 2.4rem 0 1.1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--border-color, rgba(0,0,0,0.12));
            color: var(--color-primary, #1A535C);
            letter-spacing: 0.01em;
            scroll-margin-top: 80px;
        }
        /* First divider needs no big top gap (chapter header sits above it) */
        .content-body h3.bible-chapter-head:first-child {
            margin-top: 0.4rem;
        }

        /* Pericope / sub-headings inside a chapter.
           normalizeScriptureHtml() promotes the EPUB's <p class="hdg"> to
           <h4 class="bible-pericope">, giving a clean outline:
           h3 = biblical chapter, h4 = section within that chapter. */
        .content-body h4.bible-pericope {
            font-weight: 700;
            font-size: 1.05rem;
            margin: 1.6rem 0 0.45rem;
            color: var(--text-primary, inherit);
            opacity: 0.92;
            line-height: 1.4;
            scroll-margin-top: 80px;
        }
        /* Legacy <p class="hdg"> in rows that predate the h4 promotion */
        .content-body p.hdg {
            font-weight: 600;
            font-size: 1.05rem;
            margin: 1.5rem 0 0.4rem;
            color: var(--text-primary, inherit);
            opacity: 0.92;
            line-height: 1.4;
        }

        /* In-page chapter strip. Replaces the EPUB's own per-file jump bars,
           whose href="976.htm" targets do not exist in the web reader and which
           used to render as dead text — the reason "Chapter 3" went nowhere. */
        .content-body nav.bible-chapter-nav {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.25rem;
            margin: 1rem 0 1.7rem;
            padding: 0.5rem 0.65rem;
            border: 1px solid var(--border-color, rgba(0,0,0,0.12));
            border-radius: var(--radius-md, 8px);
            background: var(--bg-secondary, rgba(0,0,0,0.03));
            font-size: 0.85rem;
            line-height: 1.6;
        }
        .content-body nav.bible-chapter-nav .bible-chapter-nav-title {
            font-weight: 700;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--text-muted, #6b7280);
            margin-inline-end: 0.4rem;
        }
        .content-body nav.bible-chapter-nav a {
            min-width: 1.9em;
            padding: 0.1em 0.45em;
            text-align: center;
            text-decoration: none;
            border-radius: var(--radius-sm, 5px);
            color: var(--color-primary, #1A535C);
            font-variant-numeric: tabular-nums;
        }
        .content-body nav.bible-chapter-nav a:hover,
        .content-body nav.bible-chapter-nav a:focus-visible {
            background: var(--color-primary, #1A535C);
            color: #fff;
            text-decoration: none;
        }

        /* ── Book introduction ───────────────────────────────────────────────
           Each book's printed introduction sits in this wrapper above the row's
           first chapter divider. It is paratext, not scripture: it gets its own
           panel and a smaller voice, so a reader can tell it apart from the
           passage that follows. The reader's DOM pass strips classes off h1–h6,
           so every rule below addresses the headings as descendants of the
           wrapper rather than by a class of their own. */
        .content-body div.book-intro {
            margin: 0.5rem 0 2.2rem;
            padding: 1.1rem 1.35rem 1.25rem;
            border-inline-start: 3px solid var(--color-primary, #1A535C);
            border-radius: var(--radius-md, 8px);
            background: var(--bg-secondary, rgba(0,0,0,0.03));
        }
        .content-body div.book-intro h4 {
            margin: 0 0 0.55rem;
            font-size: 1.15rem;
            font-weight: 700;
            line-height: 1.4;
            color: var(--color-primary, #1A535C);
        }
        /* The book's own title can head the panel, with «المقدمة» under it */
        .content-body div.book-intro h4 + h4 {
            margin-top: 0.1rem;
            font-size: 1rem;
        }
        .content-body div.book-intro h5 {
            margin: 1.15rem 0 0.4rem;
            font-size: 0.9rem;
            font-weight: 700;
            line-height: 1.4;
            color: var(--text-muted, #6b7280);
        }
        .content-body div.book-intro p {
            margin: 0 0 0.7rem;
            font-size: 0.95rem;
            line-height: 1.85;
            text-align: justify;
            text-justify: inter-word;
        }
        .content-body div.book-intro > :last-child {
            margin-bottom: 0;
        }
        /* The items carry their own printed numerals, so no bullet is added. */
        .content-body div.book-intro ul {
            margin: 0;
            padding-inline-start: 0.35rem;
            list-style: none;
            font-size: 0.9rem;
            line-height: 1.8;
        }
        .content-body div.book-intro li {
            margin: 0 0 0.3rem;
        }
        .content-body div.book-intro li:last-child {
            margin-bottom: 0;
        }
        [dir="rtl"] .content-body div.book-intro p {
            text-align: right;
        }
        [dir="rtl"] .content-body div.book-intro h4,
        [dir="rtl"] .content-body div.book-intro h5 {
            letter-spacing: 0;
        }

        /* Cross-reference lines "(Genesis 25:19-28; Romans 9:6-18)" */
        .content-body p.cross {
            font-size: 0.85em;
            font-style: italic;
            color: var(--text-muted, #6b7280);
            margin: 0.1rem 0 0.9rem;
            opacity: 0.85;
        }

        /* Verse paragraphs — comfortable reading measure */
        .content-body p.reg {
            margin: 0 0 0.85rem;
            line-height: 1.9;
            text-align: justify;
            text-justify: inter-word;
        }

        /* One addressable unit per verse. Inline, so the paragraph's justified
           flow and hyphenation are untouched. */
        .content-body .verse-unit {
            scroll-margin-top: 80px;
        }
        .content-body .verse-unit:target {
            background: rgba(26, 83, 92, 0.14);
            border-radius: 3px;
        }
        /* The reader moves a heading's id onto its wrapping <section>, so the
           chapter anchors need their scroll offset there too. */
        .content-body section[id^="bch-"] {
            scroll-margin-top: 80px;
        }

        /* Verse numbers — small raised superscript, subtle accent.
           .verse-num = normalised markup, .reftext = raw Bible Hub / KJV / Darby,
           .verse = Van Dyck Arabic EPUB. */
        .content-body sup.verse-num,
        .content-body .reftext,
        .content-body .verse {
            display: inline-block;
            font-size: 0.68em;
            font-weight: 700;
            line-height: 1;
            vertical-align: super;
            color: var(--color-primary, #1A535C);
            margin-inline-end: 0.28em;
            margin-inline-start: 0.08em;
            user-select: none;
            opacity: 0.95;
        }
        /* First verse number of a paragraph sits flush */
        .content-body p.reg > .verse-unit:first-child > sup.verse-num,
        .content-body p.reg > .reftext:first-child,
        .content-body div.p > .verse:first-child {
            margin-inline-start: 0;
        }
        /* Van Dyck verse paragraphs use <div class="p"> */
        .content-body div.p {
            margin: 0 0 0.85rem;
            line-height: 1.95;
        }

        /* RTL scripture (Arabic Van Dyck etc.) */
        [dir="rtl"] .content-body p.reg {
            text-align: right;
        }
        [dir="rtl"] .content-body h3.bible-chapter-head {
            letter-spacing: 0;
        }
        [dir="rtl"] .content-body nav.bible-chapter-nav .bible-chapter-nav-title {
            letter-spacing: 0;
        }

        /* ── Responsive: phones & small tablets ── */
        @media (max-width: 640px) {
            .content-body h3.bible-chapter-head {
                font-size: 1.2rem;
                margin: 1.9rem 0 0.9rem;
            }
            .content-body h4.bible-pericope {
                font-size: 1rem;
                margin: 1.3rem 0 0.4rem;
            }
            .content-body div.book-intro {
                margin: 0.4rem 0 1.7rem;
                padding: 0.85rem 0.95rem 1rem;
            }
            .content-body div.book-intro h4 {
                font-size: 1.05rem;
            }
            .content-body div.book-intro p {
                line-height: 1.9;
                text-align: left;
            }
            [dir="rtl"] .content-body div.book-intro p {
                text-align: right;
            }
            .content-body p.reg {
                line-height: 1.95;
                text-align: left;      /* justify looks ragged on narrow screens */
            }
            [dir="rtl"] .content-body p.reg {
                text-align: right;
            }
            .content-body sup.verse-num,
            .content-body .reftext {
                font-size: 0.72em;     /* slightly larger so it stays tappable/legible */
                margin-inline-end: 0.32em;
            }
            .content-body p.cross {
                font-size: 0.82em;
            }
            .content-body nav.bible-chapter-nav {
                font-size: 0.8rem;
                gap: 0.2rem;
                padding: 0.45rem 0.5rem;
            }
            .content-body nav.bible-chapter-nav a {
                min-width: 2.1em;      /* keep the touch target usable */
                padding: 0.2em 0.4em;
            }
        }

        .footnote-popup {
            position: fixed;
            z-index: 10000;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: var(--spacing-lg);
            max-width: 400px;
            max-height: 300px;
            overflow-y: auto;
            display: none;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.3s, transform 0.3s;
        }

        .footnote-popup.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }