/* ================================================================
   premium-polish.css  —  v1.0
   Safe, additive CSS-only enhancements for Key Verse Bible App.
   Pages: Landing  |  Daily  |  Study
   Screens: Desktop + Mobile

   RULES FOLLOWED FOR GO-LIVE SAFETY:
   - ONLY visual properties changed (color, shadow, border-radius,
     letter-spacing, font-weight, gradients, transitions, opacity)
   - NO changes to layout: flex, grid, width, height, display, position
   - NO padding / margin changes (to protect responsive breakpoints)
   - Uses !important only where existing rules already use !important
   ================================================================ */


/* ----------------------------------------------------------------
   1. GLOBAL — Font Rendering, Focus Polish & Font-Scale Variable
   ---------------------------------------------------------------- */

/* --bible-font-scale is driven by font-size.js (shared/font-size.js).
   It defaults to 1 so that without JS the calc() expressions resolve
   to their base values unchanged. The JS sets this on :root when the
   user clicks A+ / A-, which cascades to every element using it via
   calc() without touching controls, dropdowns or sidebars. */
:root {
    --bible-font-scale: 1;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

*:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.55);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ================================================================
   2. LANDING PAGE
   ================================================================ */

/* ----------------------------------------------------------------
   2a. LANDING — Hero Gradient (richer, deeper blues)
   ---------------------------------------------------------------- */

.gradient-overlay {
    background: linear-gradient(-45deg, #0e2561, #1a3a96, #0f5e9e, #142f72);
    background-size: 300% 300%;
    opacity: 0.97;
}

/* ----------------------------------------------------------------
   2b. LANDING — Hero Typography
   ---------------------------------------------------------------- */

.landing-hero h1 {
    letter-spacing: -0.025em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.18);
}

.hero-subtext {
    opacity: 0.88;
    letter-spacing: 0.008em;
}

/* ----------------------------------------------------------------
   2c. LANDING — Branding / Logo
   ---------------------------------------------------------------- */

.branding-logo-circle {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28), 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}

/* ----------------------------------------------------------------
   2d. LANDING — Auth Buttons (distinguish Sign Up as CTA)
   ---------------------------------------------------------------- */

.btn-login {
    letter-spacing: 0.01em;
    font-weight: 500;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-signup {
    background: rgba(244, 166, 42, 0.88);
    border-color: rgba(244, 166, 42, 0.65);
    letter-spacing: 0.015em;
    font-weight: 600;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-signup:hover {
    background: rgba(244, 166, 42, 1);
    border-color: rgba(244, 166, 42, 0.9);
    box-shadow: 0 4px 18px rgba(244, 166, 42, 0.45);
    transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   2e. LANDING — Search Bar & Button
   ---------------------------------------------------------------- */

#heroSearchInput {
    letter-spacing: 0.01em;
}

#heroSearchInput:focus {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 0 0 3px rgba(244, 166, 42, 0.22);
}

/* Gold gradient on search button */
.hero-search-btn {
    background: linear-gradient(160deg, #d98c10 0%, #f4a62a 55%, #f5bc4a 100%);
    letter-spacing: 0.025em;
    box-shadow: 0 4px 20px rgba(244, 166, 42, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        filter 0.2s ease;
}

.hero-search-btn:hover {
    background: linear-gradient(160deg, #c47c0c 0%, #e6940f 55%, #f4a62a 100%);
    box-shadow: 0 8px 28px rgba(244, 166, 42, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Search suggestions dropdown */
.search-suggestions {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.suggestion-item:hover {
    background: #f0f7ff;
    color: #1e40af;
}

/* ----------------------------------------------------------------
   2f. LANDING — Feature / Capability Cards
   ---------------------------------------------------------------- */

.landing-card {
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.055), 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Needed so ::before shimmer positions relative to the card */
    position: relative;
    overflow: hidden;
}

/* Subtle premium top shimmer line */
.landing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            rgba(37, 99, 235, 0.25),
            transparent);
    border-radius: 0 0 2px 2px;
    pointer-events: none;
}

.landing-card:hover {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.landing-card h3 {
    letter-spacing: -0.015em;
    font-weight: 700;
}

.card-icon {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.14);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
}

.landing-card:hover .card-icon {
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.22);
}

/* ----------------------------------------------------------------
   2g. LANDING — Verse Carousel Section
   ---------------------------------------------------------------- */

.verse-carousel-section {
    background: linear-gradient(to bottom, #f9f8f6, #efece2);
}

.verse-context-line {
    color: #7a9a86;
    letter-spacing: 0.24em;
    font-weight: 700;
}

.verse-card-wrapper {
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.carousel-actions .action-btn {
    border-color: #e2e8f0;
    letter-spacing: 0.01em;
    transition: border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.carousel-actions .action-btn:hover {
    background: #f0f7ff;
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.1);
}

/* ----------------------------------------------------------------
   2h. LANDING — Trust Section
   ---------------------------------------------------------------- */

.trust-section {
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.trust-section h2 {
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* ----------------------------------------------------------------
   2i. LANDING — Footer
   ---------------------------------------------------------------- */

.footer-verse {
    letter-spacing: 0.01em;
    opacity: 0.88;
}

.footer-links a {
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #1e40af;
}


/* ================================================================
   3. STUDY PAGE
   ================================================================ */

/* ----------------------------------------------------------------
   3a. STUDY — Header Bar (richer, deeper gradient)
   ---------------------------------------------------------------- */

header {
    background: linear-gradient(to bottom, #1a3580, #142d6e);
}

header::after {
    background: linear-gradient(-45deg, #1c3c9a, #0369a1, #1c3c9a, #2260ea);
    background-size: 400% 400%;
    opacity: 0.82;
}

header h1 {
    letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------
   3b. STUDY — Sidebar Controls Bar (darker, more editorial)
   ---------------------------------------------------------------- */

.sidebar {
    background: #0a121e !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.form-group label {
    letter-spacing: 0.06em;
    opacity: 0.9;
}

.form-group select {
    border-color: rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    letter-spacing: 0.01em;
    transition: border-color 0.25s ease,
        box-shadow 0.25s ease !important;
}

.form-group select:hover:not(:disabled) {
    border-color: rgba(99, 155, 235, 0.55) !important;
}

/* ----------------------------------------------------------------
   3c. STUDY — Content Area (slightly warmer white)
   ---------------------------------------------------------------- */

.content-area {
    background: #fdfcfb;
}

/* ----------------------------------------------------------------
   3d. STUDY — Bible Text Readability (core improvements)
   ---------------------------------------------------------------- */

/*
   LAYOUT — Reading Surface Alignment.
   Full-width reading container for all layouts.
*/
.reading-layout-container {
    max-width: 860px !important;
    margin: 20px auto !important;
    display: flex;
    flex-direction: column;
    transition: max-width 0.3s ease, width 0.3s ease;
    width: 100%;
}

/* Split-column wrapper — full width so columns use all available space */
.reading-layout-container.two-columns-wrapper {
    max-width: 100% !important;
    margin: 20px 0 !important;
}

/* Inner parchment card — always full width within its container */
.reading-layout-container>.bible-content {
    max-width: 100% !important;
}

/* Outer chapter-content div is just a transparent shell — no parchment card styling */
#chapter-content {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Parallel view wrapper — transparent full-width container, no parchment card styling */
.bible-content.full-width {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/*
   ISSUE 1 — Scriptural Reading Consistency.
   Premium Bible Reading Experience Specs: 
   20px (Desktop), 18px (Tablet), 17px (Mobile).
   Line-height 1.85 for relaxed reading.
*/
.verse-item {
    font-family: "Crimson Pro", "Merriweather", Georgia, serif;
    /* explicitly set on item */
    font-size: 20px;
    line-height: 1.85;
    letter-spacing: 0.2px;
    color: #2b2a28;
    /* Soft charcoal for premium readability */
    font-weight: 500;
    /* Medium weight makes thin strokes more visible */
    padding-left: 28px !important;
    /* Hierarchical verse indent */
    margin-bottom: 20px;
    /* Spacious verse separation */
}

/* Content blocks inside the parchment card — full width, no centering constraint */
.bible-content>#versesContainer,
.bible-content>.summary-container-full,
.bible-content>.chapter-outline-block {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 1024px) {
    .verse-item {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    .verse-item {
        font-size: 17px;
    }
}

/*
   ISSUE 3 — Expanded Text color and Parchment container.
   900px max-width for premium single column reading.
   Covers entire reading surface including summary and outline.
*/
.bible-content {
    color: #2B2A28;
    font-family: "Crimson Pro", "Merriweather", Georgia, serif;
    background: #F6F3EB !important;
    /* Soft Parchment — full width, no horizontal padding (content-area already has 36px sides) */
    border-radius: 0;
    box-shadow: none;
    width: 100% !important;
    margin: 0 !important;
    padding: 24px 0 40px !important;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Parchment OFF — clean white, no card decoration (matches original pre-premium look) */
html.parchment-off .bible-content {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ----------------------------------------------------------------
   Parchment Mode — warm amber outline & section highlight colours
   Applied only when parchment is ON (default) and not in dark mode.
   Selector: html:not(.parchment-off):not(.dark-mode)
   ---------------------------------------------------------------- */

/* Parallel container: parchment mode — warm background + amber border */
html:not(.parchment-off):not(.dark-mode) .parallel-container {
    background: #F6F3EB !important;
    border-color: rgba(185, 128, 50, 0.3) !important;
}

html:not(.parchment-off):not(.dark-mode) .parallel-header {
    background: #EDE9DC !important;
    border-bottom-color: rgba(185, 128, 50, 0.4) !important;
}

html:not(.parchment-off):not(.dark-mode) .parallel-row {
    border-bottom-color: rgba(185, 128, 50, 0.15) !important;
}

html:not(.parchment-off):not(.dark-mode) .parallel-row:hover {
    background-color: rgba(185, 128, 50, 0.06) !important;
}

html:not(.parchment-off):not(.dark-mode) .parallel-col.left {
    border-right-color: rgba(185, 128, 50, 0.2) !important;
}

/* ----------------------------------------------------------------
   Chapter Outline — integrated look, no floating white card
   ---------------------------------------------------------------- */

/* Parchment mode: outline blends into warm background */
html:not(.parchment-off):not(.dark-mode) .chapter-outline {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(185, 128, 50, 0.3) !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
}

html:not(.parchment-off):not(.dark-mode) .outline-toggle {
    color: #5a3e1b !important;
    font-weight: 600 !important;
    padding: 10px 0 !important;
    letter-spacing: 0.02em !important;
}

html:not(.parchment-off):not(.dark-mode) .outline-toggle:hover {
    color: #3d2a0f !important;
    background: transparent !important;
}

html:not(.parchment-off):not(.dark-mode) .toggle-icon {
    fill: rgba(122, 80, 16, 0.6) !important;
    opacity: 1 !important;
}

html:not(.parchment-off):not(.dark-mode) .outline-menu {
    padding: 4px 0 12px 0 !important;
    border-top: none !important;
}

html:not(.parchment-off):not(.dark-mode) .outline-menu ul {
    list-style: none !important;
    padding-left: 0 !important;
}

html:not(.parchment-off):not(.dark-mode) .outline-menu a {
    color: #6b4a1c !important;
    font-size: 0.88rem !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
}

html:not(.parchment-off):not(.dark-mode) .outline-menu a:hover {
    background: rgba(185, 128, 50, 0.12) !important;
    color: #3d2a0f !important;
    padding-left: 14px !important;
}

/* Standard (parchment-off) mode: clean, minimal — just a faint separator */
html.parchment-off .chapter-outline {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Warm amber keyframe — replaces the default blue highlight-pulse */
@keyframes parchment-pulse {
    0% {
        background-color: rgba(185, 128, 50, 0.28);
    }

    100% {
        background-color: transparent;
    }
}

/* Section heading highlight uses warm amber instead of blue */
html:not(.parchment-off):not(.dark-mode) .highlight-verse {
    animation: parchment-pulse 2s ease-out !important;
}

/* Outline item hover — warm amber to match parchment background */
html:not(.parchment-off):not(.dark-mode) .outline-menu a:hover {
    background-color: rgba(185, 128, 50, 0.13) !important;
    color: #7A5010 !important;
    padding-left: 16px;
}

/* Outline item — active/clicked state persists until next click */
html:not(.parchment-off):not(.dark-mode) .outline-menu a.clicked {
    background-color: rgba(185, 128, 50, 0.22) !important;
    color: #6B4410 !important;
    font-weight: 600 !important;
}

/* Ensure summary and outline receive the same typography */
.summary-section,
.chapter-outline-item {
    font-family: inherit;
}

/* Section heading — no left bar, no indent; flows full width of content area */
.section-heading-wrapper {
    font-family: inherit;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
}

/* Ensure headings inside parchment are refined;
   section-title is a h3 that must stay LEFT-aligned (handled separately below) */
.bible-content h1,
.bible-content h2,
.bible-content h3:not(.section-title) {
    text-align: center;
    margin-bottom: 32px;
}

/* Base verse numbers (non-clickable) — plain text styling, clearly visible */
.bible-content .verse-num {
    background-color: transparent !important;
    color: #6b7280 !important;
    /* mid-grey — readable on parchment, default & dark */
    font-size: 14px !important;
    font-weight: 500 !important;
    /* slightly bolder than hairline for legibility */
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    margin-right: 8px !important;
    opacity: 1 !important;
    /* fully opaque — no fade */
    display: inline-block;
}

/* Editable Verse Numbers — perfect circular highlight ONLY for clickable links */
.bible-content .verse-num.clickable {
    background-color: #dbeafe !important;
    /* Soft light blue */
    color: #2563eb !important;
    /* Stronger blue text */
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    /* Perfect circle */
    letter-spacing: 0;
    font-size: 13px !important;
    font-weight: 600 !important;
    /* Bolder to stand out */
    opacity: 1 !important;
    margin-top: 5px;
    margin-right: 12px !important;
    /* Push text away from capsule */
    min-width: unset !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Outline/Hover states for clickable verse numbers */
.bible-content .verse-num.clickable:hover {
    background-color: #bfdbfe !important;
    /* Slightly darker blue on hover */
}

/* Clickable Verse Numbers in Parchment Theme: Transparent until hovered, blue text, or as requested earlier */
html.parchment-theme .bible-content .verse-num.clickable {
    background-color: transparent !important;
    color: #2563eb !important;
}

html.parchment-theme .bible-content .verse-num.clickable:hover {
    background-color: rgba(37, 99, 235, 0.15) !important;
    opacity: 1 !important;
}

/* Base verse numbers in parchment mode — muted brown */
html.parchment-theme .bible-content .verse-num:not(.clickable) {
    color: #8c765e !important;
    opacity: 1 !important;
}

html.dark-mode .bible-content .verse-num.clickable {
    background-color: rgba(37, 99, 235, 0.2) !important;
    color: #93c5fd !important;
}

/*
   ISSUE 5 — Chapter/Book heading (h1) uses clip gradient on near-black bg.
   Richer blue-to-teal gradient improves visual hierarchy without layout change.
*/
.bible-content h1 {
    background: linear-gradient(135deg, #1a3a96 0%, #0369a1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.025em;
}

/*
   ISSUE 6 — Section passage headings (h2) are styled cyan (#0891b2)
   which conflicts with the gold accent palette. Richer ink-blue reads
   as editorial and authoritative.
*/
.bible-content h2 {
    color: #1e4a8c;
    letter-spacing: -0.012em;
}

/*
   ISSUE 7 — h3 inline section titles (e.g. "The Sermon on the Mount")
   border is #bae6fd (bright blue). A warmer, subtler slate works better
   as a visual separator without competing with verse text.
*/
.bible-content h3 {
    border-bottom: 1.5px solid #c8d5e8;
    letter-spacing: -0.01em;
    color: #2d3f5e;
}

/*
   ISSUE 8 — Section heading wrapper (.section-heading-wrapper) has no
   top breathing room coded in the inline CSS override path.
   We add a top margin only on the wrapper for visual chunking.
   (The existing rule sets margin-top: 60px on desktop, we leave that.)
*/
.section-title {
    color: #243355;
    letter-spacing: -0.008em;
}

.section-range {
    color: #7a8fa8;
    letter-spacing: 0.01em;
}

/*
   ISSUE 9 — Chapter outline toggle uses var(--text-secondary) = #64748b.
   Slight refinement to match the new reading palette.
*/
.outline-toggle {
    color: #5a6f88;
}

.outline-toggle:hover {
    color: #1e4a8c;
}

/*
    Selected/Highlighted Verse — Premium styling.
    Soft cream background with gold accent border.
*/
.verse-item.highlighted {
    background: #F4EFD9 !important;
    border-left: 4px solid #D4B96E !important;
    padding-left: 24px !important;
    border-radius: 4px;
    margin-left: 0;
}

.verse-item:hover:not(.highlighted) {
    background-color: rgba(212, 185, 110, 0.1);
    border-radius: 5px;
}

/*
   Parallel view: soften the column divider and row hover
   to reduce visual noise when reading two translations side by side.
*/
.parallel-row:hover {
    background-color: #f7f9fc;
}

.parallel-col {
    line-height: 1.65;
}

.parallel-header {
    color: #1e4a8c;
    letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------
   3e. STUDY — Key Verse Card (premium blue treatment)
   ---------------------------------------------------------------- */

.key-verse-card {
    background: linear-gradient(135deg, #f8fafc 0%, #eff5ff 100%);
    border-left: 4px solid #2563eb !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Contrasting greyish background for Key Verse only in Parchment mode */
html:not(.parchment-off):not(.dark-mode) .key-verse-card,
html:not(.parchment-off):not(.dark-mode) .christ-ref-section,
html:not(.parchment-off):not(.dark-mode) .summary-section,
html:not(.parchment-off):not(.dark-mode) .chapter-outline-block {
    background: #e5e2db !important;
    /* Contrasting warm grey */
    border-color: rgba(185, 128, 50, 0.8) !important;
    /* Harmonize border with parchment */
}

/* Align Key Verse and Christ Reference cards with the text (not the verse number)
   Applied consistently across ALL modes: parchment, dark, and regular */
.bible-content .key-verse-card,
.bible-content .christ-ref-section {
    margin-left: 62px !important;
}

/* ----------------------------------------------------------------
   3f. STUDY — Summary Section
   ---------------------------------------------------------------- */

.summary-section {
    background: linear-gradient(135deg, #f1f5f9 0%, #e7edf5 100%);
    border: 1px solid #dde4f0;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.summary-title {
    letter-spacing: 0.09em;
    color: #1c2b47;
    border-bottom: 2px solid #cbd5e1;
    opacity: 0.95;
}

.summary-section p {
    line-height: 1.7;
}

/* ----------------------------------------------------------------
   3g. STUDY — Modal (more premium glass feel)
   ---------------------------------------------------------------- */

.modal-content {
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22) !important;
    border: 1px solid #cde0ff !important;
}

.modal-header-handle {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border-bottom: 1px solid #b8d3f9 !important;
    border-radius: 16px 16px 0 0 !important;
}

.modal-content h3 {
    color: #1a3580 !important;
    letter-spacing: -0.01em;
}

.popup-verse-text {
    background: linear-gradient(135deg, #f8fafc 0%, #f0f7ff 100%);
    border-left: 3px solid #2563eb;
    box-shadow: none;
}

.modal-close:hover {
    color: #1a3580;
    background: rgba(37, 99, 235, 0.06);
}

/* ----------------------------------------------------------------
   3h. STUDY — Verse Popup Links
   ---------------------------------------------------------------- */

.popup-verse-ref-header {
    color: #1a3580 !important;
    letter-spacing: 0.01em;
}

.popup-verse-ref-header:hover {
    color: #0055cc !important;
}


/* ================================================================
   4. DAILY DEVOTION PAGE
   ================================================================ */

/* ----------------------------------------------------------------
   4a. DAILY — Devotion Columns (more premium card borders)
   ---------------------------------------------------------------- */

.devotion-column {
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05),
        0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-radius: 8px !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s ease !important;
}

.devotion-column:hover {
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.09),
        0 6px 16px rgba(0, 0, 0, 0.05) !important;
}

/* ----------------------------------------------------------------
   4b. DAILY — Morning / Evening Headers (distinguished colours)
   ---------------------------------------------------------------- */

.morning-header {
    color: #8b5a1e !important;
    font-family: 'Merriweather', 'EB Garamond', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: calc(clamp(15px, calc(14px + 0.2vw), 16px) * var(--bible-font-scale, 1)) !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 24px !important;
}

.evening-header {
    color: #2b3f6c !important;
    font-family: 'Merriweather', 'EB Garamond', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: calc(clamp(15px, calc(14px + 0.2vw), 16px) * var(--bible-font-scale, 1)) !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 24px !important;
}

/* ----------------------------------------------------------------
   4c. DAILY — Date Display
   ---------------------------------------------------------------- */

.devotion-date {
    color: #1a3580 !important;
    letter-spacing: 0.05em;
}

.devotion-date::after {
    background: linear-gradient(90deg, transparent, #94a3b8, transparent) !important;
    opacity: 0.8 !important;
    width: 60px !important;
}

/* ----------------------------------------------------------------
   4d. DAILY — Topic Heading
   ---------------------------------------------------------------- */

.devotion-topic {
    letter-spacing: -0.01em;
    color: #222 !important;
}

/* ----------------------------------------------------------------
   4e. DAILY — Body Text
        Font: Inter sans-serif (matching study page key verse card)
        Size: fluid clamp anchored to --bible-font-scale so A/A
              buttons still work, scaling from phone → tablet → desktop.
        Fluid anchors (phone 390px → desktop 1280px):
          phone  390px → 0.90rem × scale  ≈ 14.4px @ default
          tablet 768px → 0.98rem × scale  ≈ 15.7px
          desktop 1280px → 1.08rem × scale ≈ 17.3px
        slope = (1.08 − 0.90) / (12.80 − 3.90) = 0.202vw
        intercept = 0.90 − 0.202 × 3.90 = 0.112rem  (→ clamp min 0.88rem)
   ---------------------------------------------------------------- */
.devotion-text,
.devotion-text p {
    font-family: 'Merriweather', 'EB Garamond', Georgia, serif !important;
    font-size: calc(clamp(12px, calc(11px + 0.2vw), 14px) * var(--bible-font-scale, 1)) !important;
    line-height: 1.85 !important;
    letter-spacing: 0.01em !important;
    color: #333333 !important;
}

.devotion-text p {
    margin-bottom: 20px !important;
}

/* Remove classic text-indent */
.devotion-text p:first-of-type {
    text-indent: 0 !important;
}

/* Topic / sermon title — matching screenshot: bold sans-serif */
.devotion-topic {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: calc(clamp(14px, calc(13px + 0.2vw), 16px) * var(--bible-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.35 !important;
    color: #222222 !important;
    text-transform: none !important;
    margin-bottom: 24px !important;
    text-align: left !important;
}

/* Theme verse (italic key line at the top of each reading) */
.theme-verse-p {
    font-family: 'Merriweather', 'EB Garamond', Georgia, serif !important;
    font-size: calc(clamp(13px, calc(12px + 0.2vw), 15px) * var(--bible-font-scale, 1)) !important;
    font-style: italic !important;
    line-height: 1.75 !important;
    letter-spacing: 0.01em !important;
    color: #4a4a4a !important;
    margin-bottom: 24px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Verse reference links — parchment mode: warm amber */
html:not(.parchment-off):not(.dark-mode) .verse-ref-link {
    color: #7a5c32 !important;
    border-bottom: 1px dotted rgba(122, 92, 50, 0.5) !important;
    transition: color 0.2s ease, border-bottom-color 0.2s ease !important;
}

html:not(.parchment-off):not(.dark-mode) .verse-ref-link:hover {
    color: #4a3010 !important;
    border-bottom-color: rgba(74, 48, 16, 0.7) !important;
    background: rgba(192, 122, 61, 0.06) !important;
}

/* ----------------------------------------------------------------
   4f. DAILY — Split Mode Font Optimizations & Alignment
       Shrinks the text sizes specifically when two columns are side-by-side
       and ensures horizontal alignment of the main text.
   ---------------------------------------------------------------- */

body.split-view .devotion-grid {
    align-items: stretch !important;
    /* Ensure both columns are the same height */
}

body.split-view .devotion-column {
    display: flex !important;
    flex-direction: column !important;
}

body.split-view .devotion-text {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.split-view .devotion-header-group {
    /* Allow the header group to take up equal space in both columns if needed */
    flex-shrink: 0 !important;
    margin-bottom: auto !important;
    /* pushes the subsequent sibling (main text) down */
}

/* Ensure subsequent text elements (the main prose) margin is reset since we use 'auto' on the group */
body.split-view .devotion-header-group+p {
    margin-top: 16px !important;
}

body.split-view .devotion-text,
body.split-view .devotion-text p {
    font-size: calc(clamp(10px, calc(9px + 0.2vw), 12px) * var(--bible-font-scale, 1)) !important;
    line-height: 1.65 !important;
}

body.split-view .devotion-text p {
    margin-bottom: 12px !important;
}

body.split-view .devotion-topic {
    font-size: calc(clamp(12px, calc(11px + 0.2vw), 14px) * var(--bible-font-scale, 1)) !important;
    margin-bottom: 14px !important;
}

body.split-view .theme-verse-p {
    font-size: calc(clamp(11px, calc(10px + 0.2vw), 13px) * var(--bible-font-scale, 1)) !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    line-height: 1.55 !important;
}

body.split-view .morning-header,
body.split-view .evening-header {
    font-size: calc(clamp(9px, calc(8px + 0.2vw), 10px) * var(--bible-font-scale, 1)) !important;
    margin-bottom: 14px !important;
}


/* ================================================================
   5. MOBILE — Responsive Polish (max-width: 768px)
   ================================================================ */

@media (max-width: 768px) {

    /* Hide desktop font controls on mobile (handled by drawer) */
    .desktop-font-controls {
        display: none !important;
    }

    /* Prevent iOS zoom on search input */
    #heroSearchInput {
        font-size: 16px;
        letter-spacing: 0.01em;
    }

    /* Sharper landing gradient on small screens */
    .landing-hero {
        background: #162f6a;
    }

    /* Slightly more rounded cards on mobile */
    .landing-card {
        border-radius: 20px !important;
    }

    /* Better verse wrapper shadow on mobile */
    .verse-card-wrapper {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
        border-radius: 16px !important;
    }

    /* Floating sidebar (bottom-docked) more clearly elevated */
    .sidebar.bottom-docked {
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Daily mobile column treatment */
    .devotion-column {
        border-radius: 6px !important;
    }

    .morning-header,
    .evening-header {
        letter-spacing: 0.03em !important;
    }

    /* Bottom nav touch targets — higher contrast on hover/active */
    .bottom-nav-item:active {
        background: rgba(37, 99, 235, 0.08);
        border-radius: 10px;
    }
}


/* ================================================================
   6. SHARED — Dropdown / Custom Select Premium Polish
   ================================================================ */

.custom-options {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
}

.custom-option:hover {
    background: #f0f7ff !important;
    color: #1e3fa0 !important;
}

.custom-option.selected {
    font-weight: 500;
}

/* ================================================================
   7. LANGUAGE UNIFORMITY — Multi-Script Font Harmonisation
   ================================================================

   ROOT CAUSE OF SIZE DIFFERENCES:
   EB Garamond / Merriweather have no Indic script glyphs.
   The browser falls back to whatever system font the OS ships
   (Nirmala UI on Windows, Kohinoor on Mac/iOS, various on Android).
   These system fonts have very different optical sizes and metrics.

   FIX:
   - Load Noto Serif for each Indic script (done via Google Fonts in <head>)
   - Assign the correct Noto Serif family per language using [lang] selectors
   - Apply a small font-size correction per script because Noto Serif
     Indic fonts have a higher x-height than EB Garamond — they look
     larger at the same px size. Corrections calibrated to match English.
   - Increase line-height slightly for scripts with stacked vowel marks
     (Devanagari/Malayalam/Telugu/Tamil need more vertical clearance)

   HOW THE SELECTORS WORK:
   [lang="hi"] .verse-item — single-column view (lang set on versesDiv by app.js)
   .parallel-col[lang="hi"] .verse-item — parallel view (lang already on col)
   [lang="hi"] .devotion-text — daily devotion page
   ================================================================ */

/* ----------------------------------------------------------------
   7a. HINDI — Devanagari  (ISO 639-1: hi)
   Noto Serif Devanagari appears ~7% larger than EB Garamond optically.
   Devanagari has a top horizontal "headline" bar — needs extra line-height.
   ---------------------------------------------------------------- */

[lang="hi"] .verse-item,
.parallel-col[lang="hi"] .verse-item,
[lang="hi"] .devotion-text {
    font-family: 'Noto Serif Devanagari', 'Noto Sans Devanagari', serif;
    font-size: calc(0.93rem * var(--bible-font-scale));
    /* 14.9px at default — proportional to 1rem base */
    line-height: 1.85;
    /* extra clearance for top headline bar + vowel marks */
    letter-spacing: 0;
    /* Devanagari spacing is handled by the font internally */
    word-spacing: 0.05em;
}

[lang="hi"] .verse-num,
.parallel-col[lang="hi"] .verse-num {
    font-family: 'Inter', sans-serif;
    /* Keep verse numbers in Latin numerals */
    font-size: 0.75em;
}

/* ----------------------------------------------------------------
   7b. TELUGU  (ISO 639-1: te)
   Noto Serif Telugu appears ~6% larger optically.
   Telugu has complex conjunct consonants — needs ample line-height.
   ---------------------------------------------------------------- */

[lang="te"] .verse-item,
.parallel-col[lang="te"] .verse-item,
[lang="te"] .devotion-text {
    font-family: 'Noto Serif Telugu', serif;
    font-size: calc(0.94rem * var(--bible-font-scale));
    /* 15px at default */
    line-height: 1.9;
    letter-spacing: 0;
    word-spacing: 0.04em;
}

[lang="te"] .verse-num,
.parallel-col[lang="te"] .verse-num {
    font-family: 'Inter', sans-serif;
    font-size: 0.75em;
}

/* ----------------------------------------------------------------
   7c. TAMIL  (ISO 639-1: ta)
   Noto Serif Tamil appears ~5% larger optically.
   Tamil has a large vowel indicator height.
   ---------------------------------------------------------------- */

[lang="ta"] .verse-item,
.parallel-col[lang="ta"] .verse-item,
[lang="ta"] .devotion-text {
    font-family: 'Noto Serif Tamil', serif;
    font-size: calc(0.95rem * var(--bible-font-scale));
    /* 15.2px at default */
    line-height: 1.85;
    letter-spacing: 0;
    word-spacing: 0.04em;
}

[lang="ta"] .verse-num,
.parallel-col[lang="ta"] .verse-num {
    font-family: 'Inter', sans-serif;
    font-size: 0.75em;
}

/* ----------------------------------------------------------------
   7d. MALAYALAM  (ISO 639-1: ml)
   Noto Serif Malayalam appears ~5% larger optically.
   Malayalam has tall below-base vowels needing extra descent clearance.
   ---------------------------------------------------------------- */

[lang="ml"] .verse-item,
.parallel-col[lang="ml"] .verse-item,
[lang="ml"] .devotion-text {
    font-family: 'Noto Serif Malayalam', serif;
    font-size: calc(0.95rem * var(--bible-font-scale));
    /* 15.2px at default */
    line-height: 1.9;
    letter-spacing: 0;
    word-spacing: 0.05em;
}

[lang="ml"] .verse-num,
.parallel-col[lang="ml"] .verse-num {
    font-family: 'Inter', sans-serif;
    font-size: 0.75em;
}

/* ----------------------------------------------------------------
   7e. SPANISH / GERMAN — Latin scripts (es, de)
   EB Garamond covers these perfectly. Only normalise line-height
   to match the updated verse-item default.
   ---------------------------------------------------------------- */

[lang="es"] .verse-item,
.parallel-col[lang="es"] .verse-item,
[lang="de"] .verse-item,
.parallel-col[lang="de"] .verse-item {
    font-family: 'EB Garamond', serif;
    /* explicit — ensures no fallback drift */
    font-size: calc(1rem * var(--bible-font-scale));
    /* 16px at default */
    line-height: 1.65;
}

/* ----------------------------------------------------------------
   7f. ENGLISH — reinforce the base (en)
   ---------------------------------------------------------------- */

[lang="en"] .verse-item,
.parallel-col[lang="en"] .verse-item {
    font-family: 'EB Garamond', serif;
    font-size: calc(1rem * var(--bible-font-scale));
    /* 16px at default */
    line-height: 1.65;
}

/* ----------------------------------------------------------------
   7g. DAILY PAGE — Devotion body text (Merriweather baseline)
   Indic devotion text uses Noto Serif families that harmonise
   better with Merriweather than the raw OS fallbacks do.
   ---------------------------------------------------------------- */

[lang="hi"] .devotion-text p,
[lang="te"] .devotion-text p,
[lang="ta"] .devotion-text p,
[lang="ml"] .devotion-text p {
    text-align: left;
    /* Justified Indic text often breaks badly */
}

/* ----------------------------------------------------------------
   7h. POPUP / MODAL — cross-reference verses shown in a modal
   These already have .lang-* classes applied by JS.
   ---------------------------------------------------------------- */

.popup-content.lang-hi,
.popup-content.lang-te {
    font-family: 'Noto Serif Devanagari', 'Noto Serif Telugu', serif;
    font-size: 1.05rem;
    line-height: 1.85;
}

.popup-content.lang-hi {
    font-family: 'Noto Serif Devanagari', serif;
}

.popup-content.lang-te {
    font-family: 'Noto Serif Telugu', serif;
}

.popup-content.lang-ta {
    font-family: 'Noto Serif Tamil', serif;
    font-size: 1.05rem;
    line-height: 1.8;
}

.popup-content.lang-ml {
    font-family: 'Noto Serif Malayalam', serif;
    font-size: 1.05rem;
    line-height: 1.85;
}

/* ----------------------------------------------------------------
   7i. MOBILE — tighten line-height slightly on small screens
   because screen real-estate is limited.
   ---------------------------------------------------------------- */

@media (max-width: 768px) {

    [lang="hi"] .verse-item,
    [lang="te"] .verse-item,
    [lang="ta"] .verse-item,
    [lang="ml"] .verse-item {
        line-height: 1.75;
    }
}

/* ================================================================
   8. DARK / NIGHT MODE  —  Study + Daily pages
   Toggled by adding `dark-mode` class to <html> via toggleDarkMode()
   in font-size.js. Preference persisted in localStorage['darkMode'].
   ================================================================ */

/* ----------------------------------------------------------------
   8a. Page skeleton
   ---------------------------------------------------------------- */
html.dark-mode {
    color-scheme: dark;
    background-color: #0d1117 !important;
    /* Prevents white bleed at bottom on iOS */
}

html.dark-mode body {
    background: #1a1a2e;
    color: #c9d1d9;
}

/* ----------------------------------------------------------------
   8b. Study page — content area & reading surface
   ---------------------------------------------------------------- */
html.dark-mode .content-area {
    background: #1a1a2e !important;
}

/* Chapter header bar */
html.dark-mode .chapter-header,
html.dark-mode [class*="chapter-header"] {
    background: #16213e !important;
    border-bottom-color: #30363d !important;
}

/* Main Bible text - Turn OFF Parchment in Dark Mode */
html.dark-mode .bible-content {
    color: #c9d1d9 !important;
    background: #1a1a2e !important;
    /* Match page dark bg */
    box-shadow: none !important;
    /* Remove luxury shadow in dark mode */
}

/* Verse text items */
html.dark-mode .bible-content .verse-item {
    color: #c9d1d9;
}

/* Verse numbers — clearly legible against dark backgrounds */
html.dark-mode .verse-num {
    color: #a0aec0 !important;
    /* lighter mid-grey — ~6:1 contrast on #0d1117, comfortably visible */
}

/* Verse hover highlight */
html.dark-mode .verse-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Selected / active verse */
html.dark-mode .verse-item.active,
html.dark-mode .verse-item.highlighted {
    background: rgba(88, 166, 255, 0.12) !important;
    border-left-color: #58a6ff !important;
}

/* Section headings inside Bible text */
html.dark-mode .verse-section-heading,
html.dark-mode .section-label {
    color: #8b949e !important;
    border-color: #30363d !important;
}

/* ----------------------------------------------------------------
   8c. Study page — sidebar (already dark; just reinforce)
   ---------------------------------------------------------------- */
html.dark-mode .main-content,
html.dark-mode .sidebar {
    background: #1a1a2e !important;
}

/* Sidebar links and chapter outline items */
html.dark-mode .chapter-outline-item,
html.dark-mode .outline-item {
    color: #8b949e;
}

html.dark-mode .chapter-outline-item:hover,
html.dark-mode .outline-item:hover,
html.dark-mode .chapter-outline-item.active,
html.dark-mode .outline-item.active {
    color: #58a6ff;
    background: rgba(88, 166, 255, 0.1) !important;
}

/* ----------------------------------------------------------------
   8d. Dropdowns & selectors
   ---------------------------------------------------------------- */
html.dark-mode .custom-select,
html.dark-mode .custom-dropdown-btn,
html.dark-mode .dropdown-btn,
html.dark-mode select {
    background: #16213e !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}

html.dark-mode .dropdown-panel,
html.dark-mode .custom-dropdown-panel,
html.dark-mode .dropdown-menu {
    background: #16213e !important;
    border-color: #30363d !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .dropdown-item,
html.dark-mode .custom-dropdown-item {
    color: #c9d1d9 !important;
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .custom-dropdown-item:hover {
    background: #21262d !important;
    color: #58a6ff !important;
}

/* ----------------------------------------------------------------
   8e. Font & dark mode control buttons
   ---------------------------------------------------------------- */
html.dark-mode .font-btn {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #58a6ff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .font-btn:hover {
    background: #30363d !important;
    border-color: #58a6ff !important;
}

/* Dark mode button glows subtly when dark mode is active */
html.dark-mode .dark-mode-btn {
    color: #f0c040 !important;
    /* warm amber sun */
    border-color: rgba(240, 192, 64, 0.4) !important;
}

/* ----------------------------------------------------------------
   8f. Daily page — devotion cards
   ---------------------------------------------------------------- */
html.dark-mode .devotion-column {
    background: #16213e !important;
    border-color: #30363d !important;
}

html.dark-mode .devotion-header {
    background: #1e2a45 !important;
    color: #c9d1d9 !important;
    border-bottom-color: #30363d !important;
}

html.dark-mode .morning-header,
html.dark-mode .evening-header {
    color: #c9d1d9 !important;
}

html.dark-mode .devotion-text,
html.dark-mode .devotion-text p {
    color: #c9d1d9 !important;
}

/* ----------------------------------------------------------------
   8g. Parallel column view
   ---------------------------------------------------------------- */
html.dark-mode .parallel-col {
    background: transparent !important;
    border-color: #30363d !important;
}

html.dark-mode .parallel-col-header {
    background: #16213e !important;
    color: #8b949e !important;
    border-bottom-color: #30363d !important;
}

/* ----------------------------------------------------------------
   8h. Chapter Summary & Chapter Overview (Contents) sections
   ---------------------------------------------------------------- */
html.dark-mode .summary-section {
    background: #16213e !important;
    border-color: #30363d !important;
    box-shadow: none !important;
}

html.dark-mode .summary-title,
html.dark-mode .chapter-contents-header {
    color: #8b949e !important;
    border-bottom-color: #30363d !important;
}

html.dark-mode .summary-section p,
html.dark-mode .summary-section li {
    color: #c9d1d9 !important;
}

/* Chapter outline (structure / overview list at top of chapter) */
html.dark-mode .chapter-outline {
    border-color: #30363d !important;
    background: transparent !important;
}

html.dark-mode .outline-toggle,
html.dark-mode .outline-title {
    color: #8b949e !important;
}

html.dark-mode .outline-item,
html.dark-mode .outline-link {
    color: #8b949e !important;
}

html.dark-mode .outline-item:hover,
html.dark-mode .outline-link:hover {
    color: #58a6ff !important;
    background: rgba(88, 166, 255, 0.08) !important;
}

html.dark-mode .outline-item.active,
html.dark-mode .outline-link.active {
    color: #58a6ff !important;
}

/* Christ-reference and other content sub-sections */
html.dark-mode .christ-ref-section {
    background: #1e2a45 !important;
    border-color: #30363d !important;
    border-left-color: #8b5cf6 !important;
}

/* ----------------------------------------------------------------
   8i. Version selector dropdown
   ---------------------------------------------------------------- */
html.dark-mode .version-toggle-btn {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}

html.dark-mode .version-toggle-btn:hover {
    border-color: #58a6ff !important;
    color: #58a6ff !important;
}

html.dark-mode .version-dropdown-menu {
    background: #16213e !important;
    border-color: #30363d !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .version-option {
    color: #c9d1d9 !important;
}

html.dark-mode .version-option:hover {
    background: #21262d !important;
    color: #58a6ff !important;
}

html.dark-mode .version-option.selected {
    background: rgba(88, 166, 255, 0.12) !important;
    color: #58a6ff !important;
}

html.dark-mode .version-option.active-selection-target {
    background: rgba(88, 166, 255, 0.2) !important;
    color: #58a6ff !important;
}

/* Section headers inside version dropdown (e.g. language group labels) */
html.dark-mode .version-group-header,
html.dark-mode .parallel-toggle-section {
    background: #1a1a2e !important;
    border-color: #30363d !important;
    color: #6e7681 !important;
}

/* ----------------------------------------------------------------
   8j. Matthew Henry Commentary popup & Cross-Reference modal
   Reuses #cross-ref-modal (.modal-overlay > .modal-content)
   ---------------------------------------------------------------- */
html.dark-mode .modal-overlay {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

html.dark-mode .modal-content {
    background: #16213e !important;
    color: #c9d1d9 !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7) !important;
}

/* Sticky header inside the modal (blue in light mode) */
html.dark-mode .modal-header-sticky {
    background: #1e2a45 !important;
    border-bottom-color: #30363d !important;
}

html.dark-mode .modal-content h3,
html.dark-mode #modal-header-text {
    color: #e6edf3 !important;
}

html.dark-mode .modal-close {
    color: #8b949e !important;
}

html.dark-mode .modal-close:hover {
    color: #e6edf3 !important;
}

/* Commentary body text */
html.dark-mode .commentary-text p,
html.dark-mode .modal-body p,
html.dark-mode .modal-body li,
html.dark-mode .modal-body ul {
    color: #c9d1d9 !important;
}

/* Dark mode: verse-ref-link everywhere (body + modal) */
html.dark-mode .verse-ref-link {
    color: #58a6ff !important;
    border-bottom-color: rgba(88, 166, 255, 0.45) !important;
}

html.dark-mode .verse-ref-link:hover {
    color: #79c0ff !important;
    border-bottom-color: #79c0ff !important;
    background: rgba(88, 166, 255, 0.08) !important;
}

html.dark-mode .modal-content a,
html.dark-mode .modal-content .verse-ref-link {
    color: #58a6ff !important;
}

html.dark-mode .modal-content a:hover,
html.dark-mode .modal-content .verse-ref-link:hover {
    color: #79c0ff !important;
}

/* Verse popup (inline reference lookup — same modal) */
html.dark-mode .popup-content {
    color: #c9d1d9 !important;
}

/* ---- Right-click context menu (verse-menu) — dark mode ---- */
html.dark-mode .verse-menu {
    background: #1e2a3a !important;
    border-color: #30363d !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65) !important;
}

html.dark-mode .verse-menu-item {
    color: #c9d1d9 !important;
}

html.dark-mode .verse-menu-item:hover {
    background-color: rgba(88, 166, 255, 0.12) !important;
    color: #79c0ff !important;
}

html.dark-mode .verse-menu-separator {
    border-color: #30363d !important;
}

/* ---- Cross-reference popup: verse quote boxes — dark mode ----
   .popup-verse-text is the white card holding the quoted verse text.
   The base rule uses a white/light gradient; override for dark backgrounds. */
html.dark-mode .popup-verse-text {
    background: linear-gradient(135deg, #1a2540 0%, #1e2a3a 100%) !important;
    border-left-color: #58a6ff !important;
    /* same steel-blue as link colour */
    color: #c9d1d9 !important;
}

/* Reference link label (e.g. "Genesis 1:1") */
html.dark-mode .popup-verse-ref-header,
html.dark-mode .ref-description {
    color: #a0aec0 !important;
}

/* ==============================================================
   PARCHMENT MODE — Cross-reference / Matthew Henry popup
   Both selectors cover "parchment is on" regardless of which
   class the app sets on <html>.
   ============================================================== */

/* Modal shell: parchment body (#F6F3EB) + amber border */
html:not(.parchment-off):not(.dark-mode) #cross-ref-modal .modal-content,
html:not(.parchment-off):not(.dark-mode) .modal-content,
html.parchment-theme .modal-content {
    background-color: #F6F3EB !important;
    /* exact main parchment */
    border: 1px solid rgba(185, 128, 50, 0.35) !important;
    box-shadow: 0 12px 48px rgba(59, 47, 34, 0.15) !important;
}

/* Inner body area — explicit so no white bleed-through */
html:not(.parchment-off):not(.dark-mode) #modal-body,
html.parchment-theme #modal-body {
    background-color: #F6F3EB !important;
    color: #3b2f22 !important;
}

/* Header bar: same warm grey as summary/card sections (#e5e2db) */
html:not(.parchment-off):not(.dark-mode) .modal-header-handle,
html:not(.parchment-off):not(.dark-mode) .modal-header-sticky,
html.parchment-theme .modal-header-handle,
html.parchment-theme .modal-header-sticky {
    background: #e5e2db !important;
    border-bottom: 1px solid rgba(185, 128, 50, 0.35) !important;
    border-radius: 16px 16px 0 0 !important;
}

/* Header text & h3 — dark brown on warm grey */
html:not(.parchment-off):not(.dark-mode) #modal-header-text,
html:not(.parchment-off):not(.dark-mode) .modal-content h3,
html.parchment-theme #modal-header-text,
html.parchment-theme .modal-content h3 {
    color: #4a3b2a !important;
}

/* Close button */
html:not(.parchment-off):not(.dark-mode) .modal-close,
html.parchment-theme .modal-close {
    color: #8c765e !important;
}

html:not(.parchment-off):not(.dark-mode) .modal-close:hover,
html.parchment-theme .modal-close:hover {
    color: #4a3b2a !important;
    background: rgba(185, 128, 50, 0.1) !important;
}

/* Verse quote boxes — remove white/blue-gradient; amber left-accent on parchment */
html:not(.parchment-off):not(.dark-mode) .popup-verse-text,
html.parchment-theme .popup-verse-text {
    background: #ede9e0 !important;
    /* slightly deeper warm cream for contrast */
    border: 1px solid rgba(185, 128, 50, 0.25) !important;
    border-left: 3px solid rgba(185, 128, 50, 0.7) !important;
    color: #3b2f22 !important;
    box-shadow: none !important;
}

/* Reference label links (e.g. "John 3:16") — amber-brown */
html:not(.parchment-off):not(.dark-mode) .popup-verse-ref-header,
html.parchment-theme .popup-verse-ref-header {
    color: #6b4410 !important;
    border-bottom: 1px dotted rgba(185, 128, 50, 0.5) !important;
}

html:not(.parchment-off):not(.dark-mode) .popup-verse-ref-header:hover,
html.parchment-theme .popup-verse-ref-header:hover {
    color: #8c5a15 !important;
}

/* Body paragraphs, list items, commentary text */
html:not(.parchment-off):not(.dark-mode) .modal-body p,
html:not(.parchment-off):not(.dark-mode) .modal-body li,
html:not(.parchment-off):not(.dark-mode) .modal-body ul,
html:not(.parchment-off):not(.dark-mode) .commentary-text p,
html.parchment-theme .modal-body p,
html.parchment-theme .modal-body li,
html.parchment-theme .modal-body ul,
html.parchment-theme .commentary-text p {
    color: #3b2f22 !important;
}

/* Inline verse-ref links inside the modal body */
html:not(.parchment-off):not(.dark-mode) .modal-content .verse-ref-link,
html.parchment-theme .modal-content .verse-ref-link {
    color: #6b4410 !important;
    border-bottom-color: rgba(185, 128, 50, 0.45) !important;
}

html:not(.parchment-off):not(.dark-mode) .modal-content .verse-ref-link:hover,
html.parchment-theme .modal-content .verse-ref-link:hover {
    color: #8c5a15 !important;
    background: rgba(185, 128, 50, 0.08) !important;
}

/* Italic description text after each reference label */
html:not(.parchment-off):not(.dark-mode) .ref-description,
html.parchment-theme .ref-description {
    color: #7a5230 !important;
}

/* Outline Menu: Match parchment background and serif font */
html.parchment-theme .outline-menu {
    background-color: #f4ecd8 !important;
}

html.parchment-theme .outline-menu a {
    font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif !important;
    background-color: transparent !important;
    color: #4a3b2a !important;
    border-bottom: 1px solid rgba(200, 182, 138, 0.4) !important;
}

html.parchment-theme .outline-menu a:hover {
    background-color: #efe3c2 !important;
    color: #3b2f22 !important;
}

/* ----------------------------------------------------------------
   8k. PARCHMENT MODE — Chapter/Book heading (h1 in .bible-content)
   study.css uses --primary-gradient (electric blue #2563eb→#06b6d4).
   In parchment we replace this with a warm amber-brown gradient that
   echoes the manuscript ink / icon palette of the parchment UI.
   ---------------------------------------------------------------- */
html:not(.parchment-off):not(.dark-mode) .bible-content h1,
html.parchment-theme .bible-content h1 {
    background: linear-gradient(135deg, #7b4f1e 0%, #c8881e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ----------------------------------------------------------------
   8l. PARCHMENT MODE — Right-click context menu (verse-menu)
   Base rule has background: white. Override with warm parchment tones.
   ---------------------------------------------------------------- */
html:not(.parchment-off):not(.dark-mode) .verse-menu,
html.parchment-theme .verse-menu {
    background: #f4ecd8 !important;
    border-color: rgba(185, 128, 50, 0.55) !important;
    box-shadow: 0 8px 24px rgba(59, 47, 34, 0.18) !important;
}

html:not(.parchment-off):not(.dark-mode) .verse-menu-item,
html.parchment-theme .verse-menu-item {
    color: #3b2f22 !important;
}

html:not(.parchment-off):not(.dark-mode) .verse-menu-item:hover,
html.parchment-theme .verse-menu-item:hover {
    background-color: #efe3c2 !important;
    color: #6b4410 !important;
}

html:not(.parchment-off):not(.dark-mode) .verse-menu-separator,
html.parchment-theme .verse-menu-separator {
    border-color: rgba(185, 128, 50, 0.35) !important;
}

/* ----------------------------------------------------------------
   8m. PARCHMENT MODE — Modal overlay backdrop
   ---------------------------------------------------------------- */
html:not(.parchment-off):not(.dark-mode) .modal-overlay,
html.parchment-theme .modal-overlay {
    background-color: rgba(59, 47, 34, 0.55) !important;
}

/* (8n rules consolidated into the parchment modal block above) */

/* ================================================================
   9. MODE & LAYOUT AUDIT — Dark / Parchment / Regular completions
   Covers gaps identified across single-column and split-column views.
   ================================================================ */

/* ----------------------------------------------------------------
   9a. DARK MODE — Parallel View Container
   (8g only covered .parallel-col and .parallel-col-header)
   ---------------------------------------------------------------- */
html.dark-mode .parallel-container {
    background: #1a1a2e !important;
    border-color: #30363d !important;
}

html.dark-mode .parallel-header {
    background: #16213e !important;
    color: #8b949e !important;
    border-bottom-color: #30363d !important;
}

html.dark-mode .header-col {
    color: #8b949e !important;
    border-right-color: #30363d !important;
}

html.dark-mode .parallel-row {
    border-bottom-color: #30363d !important;
}

html.dark-mode .parallel-row:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode .parallel-col.left {
    border-right-color: #30363d !important;
}

/* ----------------------------------------------------------------
   9b. DARK MODE — Key Verse Card
   (base is white gradient #f8fafc — jarring in dark mode)
   ---------------------------------------------------------------- */
html.dark-mode .key-verse-card {
    background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%) !important;
    border-color: #30363d !important;
    border-left-color: #58a6ff !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .key-verse-card strong {
    color: #79c0ff !important;
}

html.dark-mode .key-verse-card p,
html.dark-mode .key-verse-card ul,
html.dark-mode .key-verse-card li {
    color: #c9d1d9 !important;
}

/* ----------------------------------------------------------------
   9c. DARK MODE — Section Headings
   (base uses var(--text-primary) which isn't dark-mode-aware in study.css)
   ---------------------------------------------------------------- */
html.dark-mode .section-heading-wrapper {
    border-left: none !important;
    /* no vertical bar in any mode */
}

html.dark-mode .section-title,
html.dark-mode .bible-content .section-title,
html.dark-mode .bible-content h3.section-title,
html.dark-mode .section-heading-wrapper .section-title {
    color: #c9d1d9 !important;
}

html.dark-mode .section-range {
    color: #6e7681 !important;
}

/* ----------------------------------------------------------------
   9c-ii. DARK MODE — Chapter / Book heading (h1 inside .bible-content)
   study.css uses --primary-gradient (bright electric blue #2563eb→#06b6d4).
   Replaced with the same flat muted grey used by the neutral toolbar icons,
   so the heading sits in harmony with the UI chrome rather than glowing blue.
   ---------------------------------------------------------------- */
html.dark-mode .bible-content h1,
html.dark-mode #versesContainer h1,
html.dark-mode #chapter-content h1 {
    background: transparent !important;
    /* cancel gradient */
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #93c5fd !important;
    /* same blue as font icons */
    color: #93c5fd !important;
}

/* ----------------------------------------------------------------
   9d. DARK MODE — Chapter Outline (class-based, not media query)
   (study.css only covers @media prefers-color-scheme: dark)
   ---------------------------------------------------------------- */
html.dark-mode .chapter-outline {
    background: transparent !important;
    border-bottom-color: #30363d !important;
}

html.dark-mode .outline-toggle {
    color: #8b949e !important;
}

html.dark-mode .outline-toggle:hover {
    color: #c9d1d9 !important;
}

html.dark-mode .outline-toggle svg,
html.dark-mode .outline-toggle .chevron {
    color: #6e7681 !important;
}

html.dark-mode .outline-menu {
    background: #16213e !important;
    border-color: #30363d !important;
}

html.dark-mode .outline-menu a {
    color: #8b949e !important;
    border-bottom-color: #30363d !important;
}

html.dark-mode .outline-menu a:hover {
    color: #58a6ff !important;
    background-color: rgba(88, 166, 255, 0.08) !important;
}

/* ----------------------------------------------------------------
   9e. PARCHMENT MODE — Content Area background
   Eliminates white gap visible above the parchment bible-content card
   ---------------------------------------------------------------- */
html:not(.parchment-off):not(.dark-mode) .content-area {
    background: #F6F3EB !important;
}

/* ----------------------------------------------------------------
   9f. PARCHMENT MODE — Section Headings
   Warm amber/brown to harmonise with parchment palette
   ---------------------------------------------------------------- */
html:not(.parchment-off):not(.dark-mode) .section-heading-wrapper {
    border-left: none !important;
    /* no vertical bar in parchment mode */
}

html:not(.parchment-off):not(.dark-mode) .section-title {
    color: #3a2a14 !important;
}

html:not(.parchment-off):not(.dark-mode) .section-range {
    color: #7a5c32 !important;
}

/* ================================================================
   10. CROSS-MODE ICON & CONTROL CONSISTENCY
   Covers: audio player, single/split toggle, font-btn controls
   across dark, parchment, and default (parchment-off) modes.
   ================================================================ */

/* ----------------------------------------------------------------
   10a. DARK MODE — View toggle switch (single / split column)
   ---------------------------------------------------------------- */
html.dark-mode .view-toggle-switch {
    background: #21262d !important;
    border-color: #30363d !important;
}

html.dark-mode .toggle-indicator {
    background: #30363d !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .toggle-option {
    color: #6e7681 !important;
}

html.dark-mode .toggle-option.active {
    color: #58a6ff !important;
}

/* ----------------------------------------------------------------
   10b. DARK MODE — Audio player pill & controls
   ---------------------------------------------------------------- */
html.dark-mode .play-btn-outline {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #58a6ff !important;
}

html.dark-mode .play-btn-outline:hover {
    border-color: #58a6ff !important;
    color: #79c0ff !important;
    transform: scale(1.05);
}

html.dark-mode .audio-main-controls {
    background: #1a1a2e !important;
    border-color: #30363d !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .verse-display {
    color: #8b949e !important;
}

html.dark-mode .progress-container-pill {
    background: #30363d !important;
}

html.dark-mode .progress-line {
    background: #58a6ff !important;
}

html.dark-mode .progress-knob {
    background: #79c0ff !important;
}

html.dark-mode .audio-select-bordered {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238b949e'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    background-size: 14px !important;
}

/* ----------------------------------------------------------------
   10c. PARCHMENT MODE — Font-btn controls (A/A/parchment/moon)
   Warm amber/brown to integrate with the parchment palette
   ---------------------------------------------------------------- */
html:not(.parchment-off):not(.dark-mode) .font-btn {
    background: #EDE9DC !important;
    border-color: rgba(185, 128, 50, 0.4) !important;
    color: #5a3e1b !important;
    box-shadow: 0 2px 8px rgba(59, 42, 20, 0.1) !important;
}

html:not(.parchment-off):not(.dark-mode) .font-btn:hover {
    background: #e0d9c8 !important;
    border-color: rgba(185, 128, 50, 0.7) !important;
}

/* ----------------------------------------------------------------
   10d. PARCHMENT MODE — View toggle switch (warm amber palette)
   ---------------------------------------------------------------- */
html:not(.parchment-off):not(.dark-mode) .view-toggle-switch {
    background: #EDE9DC !important;
    border-color: rgba(185, 128, 50, 0.4) !important;
}

html:not(.parchment-off):not(.dark-mode) .toggle-indicator {
    background: #F6F3EB !important;
    box-shadow: 0 1px 3px rgba(59, 42, 20, 0.15) !important;
}

html:not(.parchment-off):not(.dark-mode) .toggle-option {
    color: rgba(90, 62, 27, 0.35) !important;
}

html:not(.parchment-off):not(.dark-mode) .toggle-option.active {
    color: #5a3e1b !important;
}

/* ----------------------------------------------------------------
   10e. PARCHMENT MODE — Audio player pill & controls
   ---------------------------------------------------------------- */
html:not(.parchment-off):not(.dark-mode) .play-btn-outline {
    background: #EDE9DC !important;
    border-color: rgba(185, 128, 50, 0.4) !important;
    color: #5a3e1b !important;
}

html:not(.parchment-off):not(.dark-mode) .play-btn-outline:hover {
    border-color: rgba(185, 128, 50, 0.7) !important;
    color: #3d2a0f !important;
}

html:not(.parchment-off):not(.dark-mode) .audio-main-controls {
    background: #EDE9DC !important;
    border-color: rgba(185, 128, 50, 0.3) !important;
    box-shadow: 0 1px 4px rgba(59, 42, 20, 0.08) !important;
}

html:not(.parchment-off):not(.dark-mode) .verse-display {
    color: #5a3e1b !important;
}

html:not(.parchment-off):not(.dark-mode) .progress-container-pill {
    background: rgba(185, 128, 50, 0.18) !important;
}

html:not(.parchment-off):not(.dark-mode) .progress-line {
    background: rgba(185, 128, 50, 0.55) !important;
}

html:not(.parchment-off):not(.dark-mode) .progress-knob {
    background: #7a5c32 !important;
}

html:not(.parchment-off):not(.dark-mode) .audio-select-bordered {
    background: #EDE9DC !important;
    border-color: rgba(185, 128, 50, 0.45) !important;
    color: #5a3e1b !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235a3e1b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    background-size: 14px !important;
}

/* ----------------------------------------------------------------
   10f. DEFAULT MODE (parchment-off) — Cross-section coordination
   Clean blue-accent palette, professional and consistent
   ---------------------------------------------------------------- */

/* Slightly cooler, crisper white for the reading area */
html.parchment-off .content-area {
    background: #f8fafc !important;
}

/* Chapter controls row — light separator from content below */
html.parchment-off .content-header-row {
    padding-bottom: 16px !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Chapter outline — matches the primary blue divider theme */
html.parchment-off .chapter-outline {
    border-bottom-color: #e2e8f0 !important;
}

html.parchment-off .outline-toggle {
    color: #374151 !important;
    font-weight: 600 !important;
}

html.parchment-off .outline-menu a {
    color: #374151 !important;
}

html.parchment-off .outline-menu a:hover {
    color: #2563eb !important;
    background-color: #eff6ff !important;
}

/* Section heading — blue left accent in default mode */
html.parchment-off .section-heading-wrapper {
    border-left: none !important;
    /* no vertical bar in default mode */
}

html.parchment-off .section-title {
    color: #1e3a5f !important;
}

html.parchment-off .section-range {
    color: #6b7280 !important;
}

/* Key-verse & christ-ref cards — clear blue premium look */
html.parchment-off .key-verse-card {
    background: linear-gradient(135deg, #f8fafc 0%, #eff5ff 100%) !important;
    border-left-color: #2563eb !important;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.09), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Summary section — light blue-grey tint */
html.parchment-off .summary-section {
    background: linear-gradient(135deg, #f1f5f9 0%, #e7edf5 100%) !important;
    border-color: #dde4f0 !important;
}

/* Verse hover — subtle blue highlight */
html.parchment-off .verse-item:hover:not(.highlighted) {
    background-color: rgba(37, 99, 235, 0.04) !important;
    border-radius: 5px !important;
}

/* Clickable verse numbers — clear blue bubble */
html.parchment-off .bible-content .verse-num.clickable {
    background-color: #dbeafe !important;
    color: #2563eb !important;
}

/* ================================================================
   11. UNIFIED CARD LANGUAGE
   Chapter Summary, Key Verse, and Christ Reference cards share the
   same structural shell and follow the same per-mode colour system.
   ================================================================ */

/* ----------------------------------------------------------------
   11a. UNIVERSAL SHELL — geometry, shadow, padding
   Applied regardless of mode so all three cards look structurally
   identical everywhere.
   ---------------------------------------------------------------- */
/* Key Verse + Christ Ref share the same card shell geometry */
.key-verse-card,
.christ-ref-section {
    border-radius: 10px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-left-width: 4px !important;
    padding: 20px 24px !important;
    margin: 24px 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06),
        0 1px 4px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

/* Summary stays a full-width section, not a card — restore original geometry */
.summary-section {
    border-radius: 8px !important;
    border: 1px solid #dde4f0 !important;
    border-left: 1px solid #dde4f0 !important;
    /* no left accent */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

/* ---- SPLIT-COLUMN: keep the verse-number indent ----
   Block elements without an explicit width naturally shrink to
   (column-width − margin-left), so the 62px universal indent is
   safe here — no bleeding across columns.
   margin-right adds a small right gutter so the card doesn't
   run right to the column edge.                                     */
#versesContainer.two-columns>.key-verse-card,
#versesContainer.two-columns>.christ-ref-section {
    margin-left: 62px !important;
    margin-right: 8px !important;
}

/* Shared header / title inside each card — same spacing and case */
.summary-title,
.chapter-contents-header {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
}

/* ----------------------------------------------------------------
   11b. DEFAULT MODE (parchment-off) — clean blue-family palette
   Key-verse  → blue   #2563eb
   Christ-ref → violet #6d28d9
   Summary    → sky    #0891b2
   ---------------------------------------------------------------- */
html.parchment-off .key-verse-card,
html.parchment-off .christ-ref-section {
    background: linear-gradient(135deg, #f1f5f9 0%, #e7edf5 100%) !important;
    border-color: #dde4f0 !important;
}

html.parchment-off .key-verse-card {
    border-left-color: #2563eb !important;
}

html.parchment-off .christ-ref-section {
    border-left-color: #6d28d9 !important;
}

/* summary-section default (parchment-off): plain section, no card accent */
html.parchment-off .summary-section {
    background: linear-gradient(135deg, #f1f5f9 0%, #e7edf5 100%) !important;
    border-color: #dde4f0 !important;
    border-left-color: #dde4f0 !important;
}

html.parchment-off .summary-title,
html.parchment-off .chapter-contents-header {
    color: #374151 !important;
    border-bottom-color: #e2e8f0 !important;
}

html.parchment-off .summary-section p,
html.parchment-off .summary-section li {
    color: #1f2937 !important;
}

html.parchment-off .christ-ref-section .christ-ref-header,
html.parchment-off .christ-ref-section .christ-ref-text,
html.parchment-off .christ-ref-section .christ-ref-item,
html.parchment-off .christ-ref-section .christ-ref-bullet {
    color: #374151 !important;
}

html.parchment-off .key-verse-card strong {
    color: #1e3a8a !important;
}

html.parchment-off .key-verse-card p,
html.parchment-off .key-verse-card li,
html.parchment-off .key-verse-card ul {
    color: #374151 !important;
}

/* ----------------------------------------------------------------
   11c. PARCHMENT MODE — warm amber-family palette
   All three share the warm cream background; left accent is amber
   but each card uses a slightly different amber shade to let them
   breathe while still feeling unified.
   Key-verse  → rich amber    #b07d1e
   Christ-ref → plum-amber   #7c5c42
   Summary    → warm teal    #4a7c6b
   ---------------------------------------------------------------- */
html:not(.parchment-off):not(.dark-mode) .key-verse-card,
html:not(.parchment-off):not(.dark-mode) .christ-ref-section {
    background: #e8e4da !important;
    border-color: rgba(185, 128, 50, 0.25) !important;
    box-shadow: 0 4px 16px rgba(59, 42, 20, 0.07),
        0 1px 4px rgba(59, 42, 20, 0.04) !important;
}

/* summary-section parchment: section feel — warm bg, no left card accent */
html:not(.parchment-off):not(.dark-mode) .summary-section {
    background: #e5e2db !important;
    border-color: rgba(185, 128, 50, 0.2) !important;
    border-left-color: rgba(185, 128, 50, 0.2) !important;
    box-shadow: 0 2px 8px rgba(59, 42, 20, 0.04) !important;
}

html:not(.parchment-off):not(.dark-mode) .key-verse-card {
    border-left-color: #b07d1e !important;
}

html:not(.parchment-off):not(.dark-mode) .christ-ref-section {
    border-left-color: #7c5c42 !important;
}

/* (summary parchment accent handled in the block above) */

html:not(.parchment-off):not(.dark-mode) .summary-title,
html:not(.parchment-off):not(.dark-mode) .chapter-contents-header {
    color: #3a2a14 !important;
    border-bottom-color: rgba(185, 128, 50, 0.3) !important;
}

html:not(.parchment-off):not(.dark-mode) .summary-section p,
html:not(.parchment-off):not(.dark-mode) .summary-section li {
    color: #3b2f22 !important;
}

html:not(.parchment-off):not(.dark-mode) .christ-ref-section .christ-ref-header,
html:not(.parchment-off):not(.dark-mode) .christ-ref-section .christ-ref-text,
html:not(.parchment-off):not(.dark-mode) .christ-ref-section .christ-ref-item,
html:not(.parchment-off):not(.dark-mode) .christ-ref-section .christ-ref-bullet {
    color: #3b2f22 !important;
}

html:not(.parchment-off):not(.dark-mode) .key-verse-card strong {
    color: #5a3e1b !important;
}

html:not(.parchment-off):not(.dark-mode) .key-verse-card p,
html:not(.parchment-off):not(.dark-mode) .key-verse-card li,
html:not(.parchment-off):not(.dark-mode) .key-verse-card ul {
    color: #3b2f22 !important;
}

/* ----------------------------------------------------------------
   11d. DARK MODE — deep navy palette, each card has its own
   left accent that pairs with the dark background.
   Key-verse  → cornflower blue   #58a6ff
   Christ-ref → soft violet       #a78bfa
   Summary    → sky               #38bdf8
   ---------------------------------------------------------------- */
html.dark-mode .key-verse-card,
html.dark-mode .christ-ref-section {
    background: linear-gradient(135deg, #161b2e 0%, #1a1a2e 100%) !important;
    border-color: #30363d !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35),
        0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* summary-section dark: plain section, no card accent */
html.dark-mode .summary-section {
    background: #16213e !important;
    border-color: #30363d !important;
    border-left-color: #30363d !important;
    box-shadow: none !important;
}

html.dark-mode .key-verse-card {
    border-left-color: #58a6ff !important;
}

html.dark-mode .christ-ref-section {
    border-left-color: #a78bfa !important;
}

/* (summary dark accent handled in the block above) */

html.dark-mode .summary-title,
html.dark-mode .chapter-contents-header {
    color: #8b949e !important;
    border-bottom-color: #30363d !important;
}

html.dark-mode .summary-section p,
html.dark-mode .summary-section li {
    color: #c9d1d9 !important;
}

html.dark-mode .christ-ref-section .christ-ref-header,
html.dark-mode .christ-ref-section .christ-ref-text,
html.dark-mode .christ-ref-section .christ-ref-item,
html.dark-mode .christ-ref-section .christ-ref-bullet {
    color: #c9d1d9 !important;
}

html.dark-mode .key-verse-card strong {
    color: #79c0ff !important;
}

html.dark-mode .key-verse-card p,
html.dark-mode .key-verse-card li,
html.dark-mode .key-verse-card ul {
    color: #c9d1d9 !important;
}

/* ================================================================
   12. PARCHMENT MODE — Version Selector (inline + sidebar)
   Blends the version picker pill and dropdown with the warm amber
   parchment palette so it looks native to the page.
   ================================================================ */

/* Toggle pill button */
html:not(.parchment-off):not(.dark-mode) .version-toggle-btn {
    background: #EDE9DC !important;
    border-color: rgba(185, 128, 50, 0.4) !important;
    color: #5a3e1b !important;
    box-shadow: 0 2px 6px rgba(59, 42, 20, 0.1) !important;
}

html:not(.parchment-off):not(.dark-mode) .version-toggle-btn:hover {
    background: #e0d9c8 !important;
    border-color: rgba(185, 128, 50, 0.7) !important;
    color: #3d2a0f !important;
}

/* Dropdown menu panel */
html:not(.parchment-off):not(.dark-mode) .version-dropdown-menu {
    background: #f0ece0 !important;
    border-color: rgba(185, 128, 50, 0.35) !important;
    box-shadow: 0 8px 24px rgba(59, 42, 20, 0.15) !important;
}

/* Individual options */
html:not(.parchment-off):not(.dark-mode) .version-option {
    color: #3b2f22 !important;
    border-bottom-color: rgba(185, 128, 50, 0.12) !important;
}

html:not(.parchment-off):not(.dark-mode) .version-option:hover {
    background: rgba(185, 128, 50, 0.1) !important;
    color: #3d2a0f !important;
}

/* Selected / active option */
html:not(.parchment-off):not(.dark-mode) .version-option.selected,
html:not(.parchment-off):not(.dark-mode) .version-option.active-selection-target {
    background: rgba(185, 128, 50, 0.2) !important;
    color: #5a3e1b !important;
}

/* Group headers (language labels inside dropdown) */
html:not(.parchment-off):not(.dark-mode) .version-group-header {
    background: #e8e3d3 !important;
    color: #7a5c32 !important;
    border-color: rgba(185, 128, 50, 0.2) !important;
}

/* Parallel toggle section inside the version dropdown */
html:not(.parchment-off):not(.dark-mode) .parallel-toggle-section {
    background: #e8e3d3 !important;
    border-top-color: rgba(185, 128, 50, 0.25) !important;
    color: #5a3e1b !important;
}

html:not(.parchment-off):not(.dark-mode) .parallel-instruction {
    color: rgba(90, 62, 27, 0.65) !important;
}

/* Chevron / arrow inside the toggle button inherits currentColor — no extra rule needed */

/* ================================================================
   13. MOBILE OPTIMISATION  (≤ 768px)
   All premium-polish changes tuned for phone-sized screens.
   ================================================================ */
@media (max-width: 768px) {

    /* ---- Reading container: always full width on phones ---- */
    .reading-layout-container {
        max-width: 100% !important;
        margin: 8px 0 !important;
    }

    /* ---- Split column NEVER on phones (belt-and-braces over JS guard) ---- */
    #versesContainer.two-columns {
        column-count: 1 !important;
        column-gap: 0 !important;
    }

    .reading-layout-container.two-columns-wrapper {
        max-width: 100% !important;
        margin: 8px 0 !important;
    }

    .view-toggle-switch,
    .view-toggle-container {
        display: none !important;
    }

    /* ---- Bible content card: no horizontal padding on phone ---- */
    .bible-content {
        padding: 10px 0 20px !important;
    }

    /* ---- Card shell: tighter geometry on phones (typography handled in section 14) ---- */
    .key-verse-card,
    .christ-ref-section,
    .summary-section {
        padding: 14px 16px !important;
        margin: 14px 0 !important;
        border-radius: 8px !important;
    }

    /* ---- Card left indent: near-flush on phone — 4px border provides hierarchy ---- */
    .bible-content .key-verse-card,
    .bible-content .christ-ref-section {
        margin-left: 8px !important;
        margin-right: 4px !important;
    }

    /* Safety: forced-single column on phones */
    #versesContainer.two-columns>.key-verse-card,
    #versesContainer.two-columns>.christ-ref-section {
        margin-left: 8px !important;
        margin-right: 4px !important;
    }

    /* ---- Section heading wrapper: full width on phones, no bar to clear ---- */
    .section-heading-wrapper {
        margin-top: 28px !important;
        margin-bottom: 8px !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* ---- Chapter outline layout ---- */
    .chapter-outline {
        margin-bottom: 12px !important;
    }

    .outline-toggle {
        padding: 7px 0 !important;
    }

    .outline-menu a {
        padding: 4px 6px !important;
    }

    /* ---- Summary section layout ---- */
    .summary-title,
    .chapter-contents-header {
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }

    .summary-section p {
        margin-bottom: 6px !important;
    }

    /* ---- Verse items: flush-left on phones (remove desktop indent) ---- */
    .bible-content .verse-item {
        padding-left: 0 !important;
        /* no left indent — verse-num starts at content edge */
    }

    /* ---- Verse numbers: crisp and small on phones ---- */
    .bible-content .verse-num {
        font-size: 11px !important;
        margin-right: 6px !important;
    }

    .bible-content .verse-num.clickable {
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
        margin-right: 8px !important;
    }

    /* ---- Parallel container: never show on mobile ---- */
    .parallel-container {
        display: none !important;
    }

    /* ---- Version selector: narrower pill ---- */
    .version-toggle-btn {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
        height: 30px !important;
        max-width: 130px !important;
    }

    /* ---- Audio player pill: prevent overflow ---- */
    .audio-main-controls {
        max-width: calc(100vw - 48px) !important;
    }

    .progress-container-pill {
        width: 56px !important;
    }

    /* ---- Parchment mode: content area background on mobile ---- */
    html:not(.parchment-off):not(.dark-mode) .content-area {
        background: #F6F3EB !important;
    }

    /* ---- Dark mode: font-btn controls on phone ---- */
    html.dark-mode .font-btn {
        background: #2d3748 !important;
        border-color: #4a5568 !important;
        color: #79c0ff !important;
    }

    html.dark-mode .dark-mode-btn {
        color: #f7c948 !important;
        border-color: rgba(247, 201, 72, 0.5) !important;
    }

    html.dark-mode .parchment-btn {
        color: #8b949e !important;
        border-color: #30363d !important;
    }

    /* ---- Dark mode: verse numbers legible at 11px on phones ---- */
    html.dark-mode .bible-content .verse-num {
        color: #8b949e !important;
    }

    html.dark-mode .bible-content .verse-num.clickable {
        background-color: rgba(88, 166, 255, 0.18) !important;
        color: #93c5fd !important;
    }

}

/* ---- Extra-small phones (≤ 420px) ---- */
@media (max-width: 420px) {

    .bible-content .key-verse-card,
    .bible-content .christ-ref-section {
        margin-left: 4px !important;
        /* near-flush on very small phones */
        margin-right: 2px !important;
    }

    .key-verse-card,
    .christ-ref-section,
    .summary-section {
        padding: 12px !important;
    }

    .section-heading-wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-top: 20px !important;
    }

}

/* ================================================================
   14. UNIVERSAL FLUID TYPOGRAPHY — Cards, Headings & Summary
   ---------------------------------------------------------------
   A single clamp(min, calc(intercept + slope×vw), max) per element
   scales continuously from 320px (small Android) → 390px (iPhone)
   → 768px (tablet) → 1280px (desktop), no breakpoints required.

   Calibration anchors (solving two simultaneous equations):
     Phone target  @ 390px viewport
     Desktop target @ 1280px viewport
     slope  = (desktop_px − phone_px) / (12.80 − 3.90)   [vw units]
     intercept = phone_px − slope × 3.90
   Section 13 (mobile block) governs LAYOUT only; this section owns
   all typography so the fluid scale is applied site-wide.
   ================================================================ */

/* ---- Sans-serif font on cards to match the editorial screenshot style ---- */
.key-verse-card,
.christ-ref-section {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---- Card title / header line ----------------------------------------
   Phone 390px → 0.88rem (14.1px)  |  Desktop 1280px → 1.05rem (16.8px)
   slope = (16.8−14.1)/8.9 = 0.303vw   intercept = 14.1 − 0.30×3.9 = 12.93px */
.christ-ref-header,
.key-verse-card>p:first-child strong {
    font-size: clamp(0.82rem, calc(0.808rem + 0.30vw), 1.08rem) !important;
    font-weight: 600 !important;
    line-height: 1.48 !important;
    letter-spacing: 0.01em !important;
}

/* ---- Card body — paragraphs, list items, numbered items ----------------
   Phone 390px → 0.85rem (13.6px)  |  Desktop 1280px → 1.00rem (16.0px)
   slope = (16.0−13.6)/8.9 = 0.270vw   intercept = 13.6 − 0.27×3.9 = 12.55px */
.key-verse-card p,
.key-verse-card li,
.christ-ref-item,
.christ-ref-bullet {
    font-size: clamp(0.78rem, calc(0.784rem + 0.27vw), 1.02rem) !important;
    line-height: 1.70 !important;
    margin-bottom: 6px !important;
}

/* ---- Scripture reference links (secondary tier) ------------------------
   Phone 390px → 0.81rem (12.9px)  |  Desktop 1280px → 0.92rem (14.7px)
   slope = (14.7−12.9)/8.9 = 0.202vw   intercept = 12.9 − 0.20×3.9 = 12.12px */
.christ-ref-text,
.christ-ref-section>a,
.key-verse-card>a {
    font-size: clamp(0.73rem, calc(0.758rem + 0.20vw), 0.94rem) !important;
    line-height: 1.55 !important;
    opacity: 0.88;
}

/* ---- Section heading label (ALL-CAPS tracker) -------------------------
   Phone 390px → 0.82rem (13.1px)  |  Desktop 1280px → 1.05rem (16.8px)
   slope = (16.8−13.1)/8.9 = 0.416vw   intercept = 13.1 − 0.416×3.9 = 11.48px → 0.718rem
   Selector specificity (0,2,1) matches study.css's .bible-content h3.section-title;
   since premium-polish.css loads AFTER study.css, cascade order wins at equal specificity. */
.bible-content h3.section-title,
.bible-content .section-title {
    font-size: clamp(0.82rem, calc(0.718rem + 0.42vw), 1.05rem) !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    text-align: left !important;
    /* counteract .bible-content h3 { text-align: center } */
}

/* ---- Section range / subtitle ------------------------------------------
   Phone 390px → 0.74rem (11.8px)  |  Desktop 1280px → 0.84rem (13.4px)
   slope = (13.4−11.8)/8.9 = 0.180vw   intercept = 11.8 − 0.18×3.9 = 11.10px */
.section-range {
    font-size: clamp(0.66rem, calc(0.694rem + 0.18vw), 0.86rem) !important;
    letter-spacing: 0.02em !important;
}

/* ---- Chapter outline links ---------------------------------------------
   Toggle: Phone → 0.86rem | Desktop → 0.96rem
   Links:  Phone → 0.82rem | Desktop → 0.90rem */
.outline-toggle {
    font-size: clamp(0.78rem, calc(0.776rem + 0.26vw), 0.98rem) !important;
}

.outline-menu a {
    font-size: clamp(0.74rem, calc(0.740rem + 0.22vw), 0.92rem) !important;
}

/* ---- Summary section label (small-caps tracker) -----------------------
   Phone 390px → 0.68rem (10.9px)  |  Desktop 1280px → 0.76rem (12.2px)
   slope = (12.2−10.9)/8.9 = 0.146vw   intercept = 10.9 − 0.15×3.9 = 10.32px */
.summary-title,
.chapter-contents-header {
    font-size: clamp(0.62rem, calc(0.645rem + 0.15vw), 0.78rem) !important;
    letter-spacing: 0.10em !important;
    font-weight: 700 !important;
}

/* ---- Summary body text ------------------------------------------------
   Phone 390px → 0.88rem (14.1px)  |  Desktop 1280px → 1.00rem (16.0px)
   Same as card body (consistent reading size across sections) */
.summary-section p {
    font-size: clamp(0.80rem, calc(0.784rem + 0.27vw), 1.02rem) !important;
    line-height: 1.70 !important;
}

/* ---- Chapter Outline items — explicit Inter so they don't inherit EB Garamond ----
   .outline-toggle already has Inter in study.css; the menu items do not.          */
.outline-menu a,
.outline-menu li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif !important;
    letter-spacing: 0.005em !important;
    /* tiny tracking for clean sans-serif readability */
}

/* ---- Section heading (no left bar) — font-family + refined spacing ----------------
   section-heading-wrapper already has Inter from study.css; make sure
   section-title and section-range also have it explicitly.                          */
.section-title,
.section-range {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif !important;
}

/* Section title: refined weight and tight tracking for an editorial header label
   Phone 390px → 0.78rem  |  Tablet 768px → 0.85rem  |  Desktop 1280px → 0.92rem
   (Already defined earlier in section 14 — these declarations add font-family only;
    font-size is governed by the clamp() rule above)                                 */
.section-title {
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    /* slightly looser than 0.08 — easier all-caps read */
    line-height: 1.3 !important;
}

/* Section range: subtle, secondary — right-aligned date/reference label */
.section-range {
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    opacity: 0.72;
    /* slightly softer without the bar drawing focus */
}

/* ---- Chapter Summary — switch EB Garamond to Inter editorial sans -----
   Gives summary the same clean, screenshot-matched feel as the cards.   */
.summary-section,
.summary-section p,
.summary-section li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif !important;
}

.summary-title,
.chapter-contents-header {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif !important;
}

/* ================================================================
   15. MATTHEW HENRY COMMENTARY POPUP — Fluid Typography
   ---------------------------------------------------------------
   Switches Merriweather serif to Inter and applies the same
   clamp(min, calc(intercept + slope×vw), max) fluid scale used
   for cards and summary so the popup reads consistently on all
   screen sizes. Dark-mode colours (section 8j) are unchanged.
   ================================================================ */

/* ---- Popup container base: Inter instead of Merriweather ---------- */
.modal-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif !important;
    line-height: 1.70 !important;
}

/* ---- Popup header / verse reference title -------------------------
   Phone 390px → 0.88rem  |  Desktop 1280px → 1.05rem
   Matches card header tier for visual consistency                   */
.modal-content h3,
#modal-header-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif !important;
    font-size: clamp(0.82rem, calc(0.808rem + 0.30vw), 1.08rem) !important;
    font-weight: 600 !important;
    line-height: 1.48 !important;
    letter-spacing: 0.01em !important;
}

/* ---- Commentary paragraphs & modal body text ----------------------
   Phone 390px → 0.85rem  |  Desktop 1280px → 1.00rem
   Same fluid scale as card body / summary body                      */
.commentary-text p,
.modal-body p,
#modal-body p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif !important;
    font-size: clamp(0.78rem, calc(0.784rem + 0.27vw), 1.02rem) !important;
    line-height: 1.72 !important;
    margin-bottom: 0.85em !important;
}

/* ---- List items inside modal (cross-reference bullets) -------------
   Same body-text scale for visual rhythm                             */
.modal-content li,
.modal-body li,
#modal-body li {
    font-size: clamp(0.78rem, calc(0.784rem + 0.27vw), 1.02rem) !important;
    line-height: 1.68 !important;
    margin-bottom: 8px !important;
}

/* ---- Reference links in popup (secondary tier) --------------------
   Phone 390px → 0.81rem  |  Desktop 1280px → 0.92rem             */
.modal-content .verse-ref-link,
.modal-body .verse-ref-link {
    font-size: clamp(0.73rem, calc(0.758rem + 0.20vw), 0.94rem) !important;
}

/* ---- Phone: tighter popup padding (more reading space) ------------ */
@media (max-width: 768px) {
    .modal-content {
        padding: 14px 14px !important;
        max-height: 85vh !important;
    }

    .modal-header-sticky {
        margin: -14px -14px 14px -14px !important;
        padding: 10px 12px !important;
    }
}

/* ================================================================
   16. MOBILE BOTTOM AREA — Parchment + Dark Mode
   Covers:
     a) .sidebar.bottom-docked  — floating pill row (John / 4 / Christ Refs)
     b) .bottom-nav             — fixed home / play / language bar
   ================================================================ */

/* ----------------------------------------------------------------
   16a. PARCHMENT MODE — pill row + bottom nav
   ---------------------------------------------------------------- */

/* Pill selector row — warm grey matching card/summary sections */
html:not(.parchment-off):not(.dark-mode) .sidebar.bottom-docked {
    background: #e5e2db !important;
    border-top: 1px solid rgba(185, 128, 50, 0.40) !important;
    box-shadow: 0 -4px 16px rgba(59, 47, 34, 0.12) !important;
}

/* Pill buttons (John ˅ / 4 ˅ / Christ Refs ˅) */
html:not(.parchment-off):not(.dark-mode) .sidebar.bottom-docked .custom-dropdown-btn {
    background: rgba(185, 128, 50, 0.12) !important;
    border-color: rgba(185, 128, 50, 0.45) !important;
    color: #3b2f22 !important;
}

html:not(.parchment-off):not(.dark-mode) .sidebar.bottom-docked .custom-dropdown-btn:hover {
    background: rgba(185, 128, 50, 0.22) !important;
    border-color: rgba(185, 128, 50, 0.65) !important;
}

/* Dropdown menu opening upward from the pills */
html:not(.parchment-off):not(.dark-mode) .sidebar.bottom-docked .custom-dropdown-menu {
    background: #F6F3EB !important;
    border-color: rgba(185, 128, 50, 0.45) !important;
    box-shadow: 0 -8px 24px rgba(59, 47, 34, 0.14) !important;
    color: #3b2f22 !important;
}

html:not(.parchment-off):not(.dark-mode) .sidebar.bottom-docked .custom-dropdown-item {
    color: #3b2f22 !important;
}

html:not(.parchment-off):not(.dark-mode) .sidebar.bottom-docked .custom-dropdown-item:hover {
    background: rgba(185, 128, 50, 0.12) !important;
}

html:not(.parchment-off):not(.dark-mode) .sidebar.bottom-docked .custom-dropdown-item.selected {
    background: rgba(185, 128, 50, 0.25) !important;
    color: #4a3b2a !important;
}

/* Bottom nav bar — main parchment cream */
html:not(.parchment-off):not(.dark-mode) .bottom-nav {
    background: rgba(246, 243, 235, 0.98) !important;
    border-top: 1px solid rgba(185, 128, 50, 0.30) !important;
    box-shadow: 0 -1px 8px rgba(59, 47, 34, 0.08) !important;
}

html:not(.parchment-off):not(.dark-mode) .bottom-nav-item {
    color: #6b4410 !important;
}

html:not(.parchment-off):not(.dark-mode) .bottom-nav-item:hover,
html:not(.parchment-off):not(.dark-mode) .bottom-nav-item.active {
    color: #4a3b2a !important;
}

html:not(.parchment-off):not(.dark-mode) .bottom-nav-item.active svg {
    stroke: #4a3b2a !important;
}

html:not(.parchment-off):not(.dark-mode) .bottom-nav #languageSelectWrapperBottom .custom-select-trigger {
    color: #6b4410 !important;
}

/* ----------------------------------------------------------------
   16b. DARK MODE — pill row + bottom nav
   ---------------------------------------------------------------- */

/* Pill selector row — deep navy matching dark page background */
html.dark-mode .sidebar.bottom-docked {
    background: #161b22 !important;
    border-top: 1px solid #30363d !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.40) !important;
}

/* Pill buttons */
html.dark-mode .sidebar.bottom-docked .custom-dropdown-btn {
    background: rgba(88, 166, 255, 0.10) !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}

html.dark-mode .sidebar.bottom-docked .custom-dropdown-btn:hover {
    background: rgba(88, 166, 255, 0.18) !important;
    border-color: #58a6ff !important;
}

/* Dropdown menu */
html.dark-mode .sidebar.bottom-docked .custom-dropdown-menu {
    background: #1e2a3a !important;
    border-color: #30363d !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.50) !important;
    color: #c9d1d9 !important;
}

html.dark-mode .sidebar.bottom-docked .custom-dropdown-item {
    color: #c9d1d9 !important;
}

html.dark-mode .sidebar.bottom-docked .custom-dropdown-item:hover {
    background: rgba(88, 166, 255, 0.10) !important;
    color: #79c0ff !important;
}

html.dark-mode .sidebar.bottom-docked .custom-dropdown-item.selected {
    background: rgba(88, 166, 255, 0.22) !important;
    color: #79c0ff !important;
}

/* Bottom nav bar */
html.dark-mode .bottom-nav {
    background: rgba(22, 27, 34, 0.98) !important;
    border-top: 1px solid #30363d !important;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.30) !important;
}

html.dark-mode .bottom-nav-item {
    color: #8b949e !important;
}

html.dark-mode .bottom-nav-item:hover,
html.dark-mode .bottom-nav-item.active {
    color: #58a6ff !important;
}

html.dark-mode .bottom-nav-item.active svg {
    stroke: #58a6ff !important;
}

html.dark-mode .bottom-nav #languageSelectWrapperBottom .custom-select-trigger {
    color: #8b949e !important;
}

/* ================================================================
   17. NAV ARROWS + LANGUAGE DROPDOWN — DARK & PARCHMENT MODES
       a) .nav-arrow        — prev / next chapter arrows (desktop + mobile circle)
       b) #languageSelectWrapperBottom .custom-options/option
                            — language picker dropdown in bottom nav
   ================================================================ */

/* ----------------------------------------------------------------
   17a. Dark mode — prev/next chapter arrows
   ---------------------------------------------------------------- */
/* Desktop: arrow SVG colour (default rgba(0,0,0,0.2) is invisible on dark) */
html.dark-mode .nav-arrow {
    color: rgba(139, 148, 158, 0.50) !important;
}

html.dark-mode .nav-arrow.prev:hover {
    color: #58a6ff !important;
    background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.08)) !important;
}

html.dark-mode .nav-arrow.next:hover {
    color: #58a6ff !important;
    background: linear-gradient(270deg, transparent, rgba(88, 166, 255, 0.08)) !important;
}

/* Mobile: white circle → dark navy circle */
@media (max-width: 768px) {
    html.dark-mode .nav-arrow {
        background: rgba(30, 42, 58, 0.92) !important;
        border-color: #30363d !important;
        color: #8b949e !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
    }

    html.dark-mode .nav-arrow:hover,
    html.dark-mode .nav-arrow:active {
        background: #1e2a3a !important;
        color: #58a6ff !important;
    }
}

/* ----------------------------------------------------------------
   17b. Dark mode — language dropdown in bottom nav
   ---------------------------------------------------------------- */
html.dark-mode .bottom-nav #languageSelectWrapperBottom .custom-options {
    background: #1e2a3a !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55) !important;
}

html.dark-mode .bottom-nav #languageSelectWrapperBottom .custom-option {
    color: #c9d1d9 !important;
    border-left-color: transparent !important;
}

html.dark-mode .bottom-nav #languageSelectWrapperBottom .custom-option:hover {
    background-color: rgba(88, 166, 255, 0.12) !important;
    color: #79c0ff !important;
}

html.dark-mode .bottom-nav #languageSelectWrapperBottom .custom-option.selected {
    background-color: rgba(88, 166, 255, 0.16) !important;
    color: #58a6ff !important;
    border-left-color: #58a6ff !important;
}

/* ----------------------------------------------------------------
   17c. Parchment mode — prev/next chapter arrows
   ---------------------------------------------------------------- */
/* Desktop: arrow SVG colour → warm amber-brown tint */
html:not(.parchment-off):not(.dark-mode) .nav-arrow,
html.parchment-theme .nav-arrow {
    color: rgba(107, 68, 16, 0.28) !important;
}

html:not(.parchment-off):not(.dark-mode) .nav-arrow.prev:hover,
html.parchment-theme .nav-arrow.prev:hover {
    color: #6b4410 !important;
    background: linear-gradient(90deg, transparent, rgba(185, 128, 50, 0.08)) !important;
}

html:not(.parchment-off):not(.dark-mode) .nav-arrow.next:hover,
html.parchment-theme .nav-arrow.next:hover {
    color: #6b4410 !important;
    background: linear-gradient(270deg, transparent, rgba(185, 128, 50, 0.08)) !important;
}

/* Mobile: white circle → warm parchment circle */
@media (max-width: 768px) {

    html:not(.parchment-off):not(.dark-mode) .nav-arrow,
    html.parchment-theme .nav-arrow {
        background: rgba(245, 241, 232, 0.95) !important;
        border-color: rgba(185, 128, 50, 0.38) !important;
        color: #6b4410 !important;
        box-shadow: 0 2px 8px rgba(59, 47, 34, 0.18) !important;
    }

    html:not(.parchment-off):not(.dark-mode) .nav-arrow:hover,
    html:not(.parchment-off):not(.dark-mode) .nav-arrow:active,
    html.parchment-theme .nav-arrow:hover,
    html.parchment-theme .nav-arrow:active {
        background: #ede9e0 !important;
        color: #4a3b2a !important;
    }
}

/* ----------------------------------------------------------------
   17d. Parchment mode — language dropdown in bottom nav
   ---------------------------------------------------------------- */
html:not(.parchment-off):not(.dark-mode) .bottom-nav #languageSelectWrapperBottom .custom-options,
html.parchment-theme .bottom-nav #languageSelectWrapperBottom .custom-options {
    background: #F6F3EB !important;
    border: 1px solid rgba(185, 128, 50, 0.40) !important;
    box-shadow: 0 -8px 24px rgba(59, 47, 34, 0.15) !important;
}

html:not(.parchment-off):not(.dark-mode) .bottom-nav #languageSelectWrapperBottom .custom-option,
html.parchment-theme .bottom-nav #languageSelectWrapperBottom .custom-option {
    color: #3b2f22 !important;
    border-left-color: transparent !important;
}

html:not(.parchment-off):not(.dark-mode) .bottom-nav #languageSelectWrapperBottom .custom-option:hover,
html.parchment-theme .bottom-nav #languageSelectWrapperBottom .custom-option:hover {
    background-color: #efe3c2 !important;
    color: #6b4410 !important;
}

html:not(.parchment-off):not(.dark-mode) .bottom-nav #languageSelectWrapperBottom .custom-option.selected,
html.parchment-theme .bottom-nav #languageSelectWrapperBottom .custom-option.selected {
    background-color: rgba(185, 128, 50, 0.18) !important;
    color: #6b4410 !important;
    border-left-color: rgba(185, 128, 50, 0.70) !important;
}

/* ================================================================
   18. MOBILE — REMOVE BODY PADDING & CONTAINER BORDER-RADIUS
       study.css adds body { padding: 12px/8px } and
       .container { border-radius: 20px/16px } on mobile, creating
       a visible "picture frame" border around the content card.
       Override here to make the container fill edge-to-edge on all
       phones in every theme (default, parchment, dark).
   ================================================================ */

@media (max-width: 768px) {
    body {
        padding: 0 !important;
    }

    .container {
        border-radius: 0 !important;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0 !important;
    }

    .container {
        border-radius: 0 !important;
    }
}

/* ================================================================
   19. HIDE "VERSION:" LABEL IN SIDEBAR (DESKTOP)
       The version-selection-group label renders as "VERSION:" via
       text-transform:uppercase. Hide only the label; the dropdown
       itself (sidebarVersionSelector) remains fully functional.
   ================================================================ */

.version-selection-group label,
label[data-i18n="selectVersion"] {
    display: none !important;
}

/* ================================================================
   20. MOBILE — ALIGN SIDEBAR DROPDOWNS WITH CONTENT-AREA LEFT EDGE
       On mobile the sidebar (non-docked) sits above the content area
       in normal flow. study.css gives it padding: 0 8px, but the
       content area uses padding: 16px (481–768px) and padding: 16px 12px
       (≤ 480px). Override the sidebar left padding to match so that
       the Book / Chapter dropdown pills are flush with the chapter
       heading text ("2 Thessalonians 1") directly below.
   ================================================================ */

@media (max-width: 768px) {
    .sidebar:not(.bottom-docked) {
        padding-left: 16px !important;
    }
}

@media (max-width: 480px) {
    .sidebar:not(.bottom-docked) {
        padding-left: 12px !important;
    }
}

/* ================================================================
   22. DAILY PAGE — HEADING INSIDE CARD + MOBILE CARD FORMAT
       a) Desktop: move Morning/Evening heading from the card's top
          edge (position:absolute straddling the border) into normal
          in-flow position at the top of the card content.
       b) Remove the hard #333 border on both desktop and mobile;
          rely on the subtle shadow + very faint border from section 4a.
       c) Mobile: restore card background + match desktop card look
          (no dark border, shadow, proper heading colours).
   ================================================================ */

/* ---- a) Desktop — heading in-flow inside the card --------------- */
.devotion-header {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    background-color: transparent !important;
    width: auto !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}

/* Reduce top padding now that the heading no longer protrudes outside */
.devotion-column {
    padding-top: 36px !important;
    margin-top: 8px !important;
}

/* ---- b) Remove all border on desktop — shadow is enough ---------- */
.devotion-column {
    border: none !important;
}

/* ---- c) Mobile — borderless clean card matching desktop ---------- */
@media (max-width: 768px) {
    .devotion-column {
        background: #FFFCF9 !important;
        /* warm card fill, same as desktop */
        border: none !important;
        /* no border — matches desktop look */
        box-shadow: none !important;
        /* no shadow — clean flat appearance */
        border-radius: 8px !important;
        padding: 28px 20px !important;
        margin-top: 8px !important;
    }

    /* Heading: no underline rule, match desktop in-flow style */
    .morning-header,
    .evening-header {
        position: static !important;
        transform: none !important;
        border-bottom: none !important;
        background: transparent !important;
        width: auto !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        padding-bottom: 0 !important;
    }
}

/* ================================================================
   21. MOBILE — BOOK DROPDOWN WIDER THAN CHAPTER DROPDOWN
       "2 Thessalonians" is the longest book name. With the default
       flex: 1 / flex: 1 split the book pill is too narrow and the
       text gets clipped. Give the book group flex: 2 so it takes
       ~2/3 of the row and the chapter group flex: 1 for the remaining
       ~1/3 (a chapter number never needs more than ~40px).
       Also ensure the custom-dropdown-container and btn stretch to
       fill the full form-group width so the pill spans edge-to-edge.
   ================================================================ */

@media (max-width: 768px) {

    /* Book dropdown: wider share */
    .sidebar:not(.bottom-docked) .top-selectors-row .form-group:first-child {
        flex: 2 1 auto !important;
    }

    /* Chapter dropdown: narrower share */
    .sidebar:not(.bottom-docked) .top-selectors-row .form-group:last-child {
        flex: 1 1 auto !important;
    }

    /* Ensure the custom dropdown container + button fill their form-group */
    .sidebar:not(.bottom-docked) .top-selectors-row .form-group .custom-dropdown-container,
    .sidebar:not(.bottom-docked) .top-selectors-row .form-group .custom-dropdown-btn {
        width: 100% !important;
    }
}

/* ================================================================
   23. STUDY MOBILE — Hamburger Menu in Bottom Nav
       Audio player + font-size controls hidden behind a ☰ button.
       The drawer slides up from above the bottom nav when tapped.
       Only rendered on mobile (body.is-mobile guard in CSS + JS).
   ================================================================ */

/* ── Drawer container ─────────────────────────────────────────── */
.hamburger-drawer {
    display: none;
    /* hidden on desktop; body.is-mobile reveals it */
}

body.is-mobile .hamburger-drawer {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 44px;
    /* flush above the 44px bottom nav */
    z-index: 9998;
    transform: translateY(calc(100% + 2px));
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* iOS safe-area compensation */
body.os-ios.is-mobile .hamburger-drawer {
    bottom: calc(44px + env(safe-area-inset-bottom, 0px)) !important;
}

body.is-mobile .hamburger-drawer.open {
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* ── Drawer inner card ────────────────────────────────────────── */
.hamburger-drawer-inner {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.13);
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Audio player row ─────────────────────────────────────────── */
.hamburger-drawer-audio {
    width: 100%;
}

.hamburger-drawer-audio .audio-player-pill {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Font-size row ────────────────────────────────────────────── */
.hamburger-drawer-fonts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.hamburger-font-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    color: #1e3a8a !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 700 !important;
    padding: 8px 0 !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
    min-width: 88px !important;
    min-height: 42px !important;
    flex: 1 !important;
}

.hamburger-font-btn:active {
    background: #dbeafe !important;
    transform: scale(0.95) !important;
}

.hamburger-font-divider {
    width: 1px;
    height: 28px;
    background: rgba(0, 0, 0, 0.12);
    margin: 0 8px;
    flex-shrink: 0;
}

/* "A" glyphs — small and large variants */
.hfb-a-small {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

.hfb-a-large {
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

.hfb-minus,
.hfb-plus {
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
}

/* ── Hamburger button in bottom nav ───────────────────────────── */
.hamburger-nav-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

.hamburger-nav-btn svg {
    transition: stroke 0.2s ease, opacity 0.2s ease !important;
}

.hamburger-nav-btn.open {
    color: #2563eb !important;
}

.hamburger-nav-btn.open svg {
    opacity: 1 !important;
    stroke: #2563eb !important;
}

.hamburger-nav-btn.open span {
    color: #2563eb !important;
}

/* ── Scrim: dismisses drawer when tapping outside ─────────────── */
/* Scrim is kept in DOM but never blocks pointer events.
   Dismiss-on-outside-click and dismiss-on-scroll are handled
   entirely by JS document listeners so the underlying action
   (click, scroll) always proceeds uninterrupted. */
.hamburger-scrim {
    display: none;
    /* unused — JS no longer toggles .active */
    pointer-events: none !important;
}

/* ── Parchment mode ───────────────────────────────────────────── */
html:not(.parchment-off):not(.dark-mode) .hamburger-drawer-inner {
    background: #F6F3EB !important;
    /* exact main parchment tone */
    border-top-color: rgba(139, 101, 46, 0.18) !important;
    box-shadow: 0 -4px 24px rgba(120, 80, 20, 0.10) !important;
}

html:not(.parchment-off):not(.dark-mode) .hamburger-font-btn {
    background: rgba(139, 101, 46, 0.10) !important;
    /* warm amber tint */
    border-color: rgba(139, 101, 46, 0.22) !important;
    color: #5a3e10 !important;
    /* dark amber text */
}

html:not(.parchment-off):not(.dark-mode) .hamburger-font-btn:active {
    background: rgba(139, 101, 46, 0.22) !important;
}

html:not(.parchment-off):not(.dark-mode) .hamburger-font-divider {
    background: rgba(139, 101, 46, 0.20) !important;
}

/* ── Dark mode ────────────────────────────────────────────────── */
html.dark-mode .hamburger-drawer-inner {
    background: rgba(30, 30, 46, 0.98) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .hamburger-font-btn {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #93c5fd !important;
}

html.dark-mode .hamburger-font-btn:active {
    background: rgba(96, 165, 250, 0.18) !important;
}

html.dark-mode .hamburger-font-divider {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* ================================================================
   END premium-polish.css
   ================================================================ */