/* ==========================================================================
   Key Verse Bible — reading themes (Light, Parchment, Dark 1, Dark 2)
   One component system, four palettes.

     Dark Mode 1  html.dark-mode:not(.dark-mode-b)
                  warm charcoal · parchment ivory · antique gold · slate
                  "Scripture studied by lamplight in a refined library"
     Dark Mode 2  html.dark-mode.dark-mode-b
                  cool navy · ivory · restrained blue + gold
                  "Scripture studied in a deep, quiet scholarly room"

   Depth model (both palettes)
     L0  --kv-bg-deep         page edge, safe areas, outer sections
     L1  --kv-bg              reading surface
     L2  --kv-surface         cards, panels, popups
     L3  --kv-surface-strong  selected / sticky surfaces
     L4  --kv-focus, accents  rationed

   Components below consume only role tokens (--kv-link, --kv-selected-*,
   --kv-badge-*, --kv-christ-accent …). Each palette assigns the values, so
   desktop, tablet and phone share one set and no component carries a
   theme-specific hex value.

   The file loads after the page stylesheets (Study, Daily, book intros) or
   via @import (Journey). Component rules are prefixed with
   `html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body`
   (two ids, three classes) so they settle the legacy theme rules regardless
   of load order. A few rules stay dark-only: the navy hero, Journey
   visuals and the Atlas popup (dark by design in every mode) and the book
   introductions (light and parchment keep their own --bi-* paper design).
   ========================================================================== */

/* ---- Dark Mode 2 palette: cool navy ------------------------------------ */
html.dark-mode.dark-mode-b:not(#_#_) {
    --kv-bg-deep: #0B1220;
    --kv-bg: #11182A;
    --kv-surface: #171F32;
    --kv-surface-strong: #1D263A;
    --kv-surface-ref: #1A2235;
    --kv-toolbar: #101721;
    --kv-toolbar-glass: rgba(16, 23, 33, 0.80);
    --kv-nav-glass: rgba(11, 18, 32, 0.66);
    --kv-drawer: rgba(17, 24, 42, 0.97);
    --kv-control: #182235;
    --kv-overlay: rgba(5, 9, 18, 0.72);
    --kv-row-hover: rgba(29, 38, 58, 0.65);

    --kv-border: rgba(160, 180, 215, 0.12);
    --kv-border-strong: rgba(160, 180, 215, 0.20);
    --kv-border-faint: rgba(160, 180, 215, 0.07);
    --kv-ref-border: rgba(130, 155, 200, 0.16);
    --kv-control-border: rgba(145, 170, 205, 0.16);
    --kv-focus: rgba(126, 166, 217, 0.45);

    --kv-text-primary: #F3F0E8;
    --kv-text-body: #D5D9E1;
    --kv-text-secondary: #B8C0CF;
    --kv-text-muted: #7F8999;
    --kv-text-control: #E9EDF4;
    --kv-scripture: #F1EDE3;
    --kv-verse-number: #7F8CA3;

    --kv-gold: #C9A24D;
    --kv-gold-bright: #D9B65F;
    --kv-gold-muted: rgba(201, 162, 77, 0.35);
    --kv-accent: #7FA6D9;
    --kv-link: #7FA6D9;
    --kv-link-hover: #8AB4F0;
    --kv-link-underline: rgba(127, 166, 217, 0.35);
    --kv-section-title: #8EA0BB;
    --kv-selected-bg: rgba(127, 166, 217, 0.14);
    --kv-selected-text: #8AB4F0;
    --kv-badge-bg: rgba(127, 166, 217, 0.14);
    --kv-badge-border: rgba(127, 166, 217, 0.26);
    --kv-badge-text: #7FA6D9;
    --kv-chip-active-bg: rgba(127, 166, 217, 0.14);
    --kv-chip-active-border: rgba(126, 166, 217, 0.45);
    --kv-chip-active-text: #F3F0E8;
    --kv-chip-active-count: #8AB4F0;

    --kv-christ-accent: rgba(201, 162, 77, 0.62);
    --kv-christ-label: #C9A24D;
    --kv-keyverse-accent: rgba(122, 156, 204, 0.60);
    --kv-keyverse-label: #8EACD6;

    --kv-highlight-bg: rgba(102, 126, 175, 0.11);
    --kv-highlight-border: rgba(201, 162, 77, 0.30);
    --kv-highlight-inset: rgba(201, 162, 77, 0.10);
    --kv-feature-tint: rgba(201, 162, 77, 0.08);
    --kv-card-glow: rgba(127, 166, 217, 0.04);
    --kv-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.18);
    --kv-shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.45);
    --kv-shadow-bar: 0 6px 18px rgba(0, 0, 0, 0.28);
    --kv-shadow-float: 0 8px 22px rgba(0, 0, 0, 0.35);
    --kv-shadow-drawer: 0 -12px 32px rgba(0, 0, 0, 0.35);
    --kv-shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.38), 0 4px 18px rgba(0, 0, 0, 0.22);
    --kv-shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.18);
    --kv-tag-ink: 52%;
    --kv-tag-ink-rail: 45%;
    --kv-tag-edge: 55%;
    --kv-inset: inset 0 1px 2px rgba(0, 0, 0, 0.28);

    --kv-hero-top: #0E1A38;
    --kv-hero-mid: #0D1730;
    --kv-hero-glow: rgba(70, 108, 184, 0.30);
    --kv-cinematic-top: #0F1729;
    --kv-intro-hero-top: #0E1A38;
    --kv-intro-hero-mid: #0D1730;
    --kv-cinematic-glow: rgba(58, 92, 160, 0.20);
    --kv-cinematic-panel: rgba(23, 31, 50, 0.82);
    --kv-cinematic-chip: rgba(7, 24, 48, 0.55);
    --kv-cinematic-shell: linear-gradient(180deg, rgba(20, 28, 46, 0.96), rgba(11, 18, 32, 0.97));
}

/* ---- Dark Mode 1 palette: warm charcoal --------------------------------- */
/* Near-neutral charcoal with only a warm undertone, so the page reads as
   lamplit paper-on-charcoal rather than sepia. */
html.dark-mode:not(.dark-mode-b):not(#_#_) {
    --kv-bg-deep: #151412;
    --kv-bg: #1E1D1B;
    --kv-surface: #282624;
    --kv-surface-strong: #33312D;
    --kv-surface-ref: #2D2B28;
    --kv-toolbar: #191816;
    --kv-toolbar-glass: rgba(25, 24, 22, 0.80);
    --kv-nav-glass: rgba(21, 20, 18, 0.68);
    --kv-drawer: rgba(30, 29, 27, 0.97);
    --kv-control: #2A2825;
    --kv-overlay: rgba(8, 7, 6, 0.72);
    --kv-row-hover: rgba(51, 49, 45, 0.60);

    --kv-border: rgba(220, 205, 180, 0.10);
    --kv-border-strong: rgba(220, 205, 180, 0.17);
    --kv-border-faint: rgba(220, 205, 180, 0.06);
    --kv-ref-border: rgba(220, 205, 180, 0.10);
    --kv-control-border: rgba(190, 155, 90, 0.18);
    --kv-focus: rgba(202, 165, 92, 0.45);

    --kv-text-primary: #F0EADF;
    --kv-text-body: #D9D3C9;
    --kv-text-secondary: #C5BFB5;
    --kv-text-muted: #918A80;
    --kv-text-control: #E9E2D6;
    --kv-scripture: #F1EBE0;
    --kv-verse-number: #958E84;

    --kv-gold: #B89452;
    --kv-gold-bright: #CCA866;
    --kv-gold-muted: rgba(184, 148, 82, 0.30);
    --kv-accent: #B89452;
    --kv-link: #CCA866;
    --kv-link-hover: #DDBB7A;
    --kv-link-underline: rgba(184, 148, 82, 0.38);
    --kv-section-title: #A7864A;
    --kv-selected-bg: rgba(184, 148, 82, 0.14);
    --kv-selected-text: #CCA866;
    --kv-badge-bg: rgba(184, 148, 82, 0.08);
    --kv-badge-border: rgba(184, 148, 82, 0.30);
    --kv-badge-text: #CCA866;
    --kv-chip-active-bg: #B89452;
    --kv-chip-active-border: #B89452;
    --kv-chip-active-text: #171411;
    --kv-chip-active-count: rgba(23, 20, 17, 0.70);

    /* Christ references carry the antique-gold edge; Key Verse cards the
       one sparing slate-blue accent this palette allows. */
    --kv-christ-accent: rgba(190, 153, 82, 0.78);
    --kv-christ-label: #B89452;
    --kv-keyverse-accent: rgba(126, 152, 174, 0.75);
    --kv-keyverse-label: #8FA7BC;

    --kv-highlight-bg: rgba(220, 204, 175, 0.06);
    --kv-highlight-border: rgba(184, 148, 82, 0.25);
    --kv-highlight-inset: rgba(184, 148, 82, 0.08);
    --kv-feature-tint: rgba(184, 148, 82, 0.08);
    --kv-card-glow: rgba(220, 204, 175, 0.025);
    --kv-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.24);
    --kv-shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.50);
    --kv-shadow-bar: 0 6px 18px rgba(0, 0, 0, 0.28);
    --kv-shadow-float: 0 8px 22px rgba(0, 0, 0, 0.35);
    --kv-shadow-drawer: 0 -12px 32px rgba(0, 0, 0, 0.35);
    --kv-shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.38), 0 4px 18px rgba(0, 0, 0, 0.22);
    --kv-shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.18);
    --kv-tag-ink: 52%;
    --kv-tag-ink-rail: 45%;
    --kv-tag-edge: 55%;
    --kv-inset: inset 0 1px 2px rgba(0, 0, 0, 0.28);

    /* The branded navy hero stays; it settles through near-black into the
       warm reading surface. */
    --kv-hero-top: #0E1834;
    --kv-hero-mid: #0F1320;
    --kv-hero-glow: rgba(70, 108, 184, 0.24);
    --kv-cinematic-top: #1C1A17;
    --kv-intro-hero-top: #2C2925;
    --kv-intro-hero-mid: #24221F;
    --kv-cinematic-glow: rgba(184, 148, 82, 0.10);
    --kv-cinematic-panel: rgba(42, 40, 37, 0.84);
    --kv-cinematic-chip: rgba(58, 55, 50, 0.60);
    --kv-cinematic-shell: linear-gradient(180deg, rgba(40, 38, 35, 0.97), rgba(24, 23, 21, 0.98));
}

/* ---- Parchment palette: neutral manuscript surface --------------------- */
/* Keep the Parchment reading identity, but reduce the cream/yellow cast so
   Study sits closer to the Explore document canvas. */
html:not(.parchment-off):not(.dark-mode):not(#_#_) {
    --kv-bg-deep: #ECEAE6;
    --kv-bg: #F4F2EE;
    --kv-surface: #FDFCF9;
    --kv-surface-strong: #F7F4EF;
    --kv-surface-ref: #FDFCF9;
    --kv-toolbar: #F7F4EF;
    --kv-toolbar-glass: rgba(247, 244, 239, 0.84);
    --kv-nav-glass: rgba(247, 244, 239, 0.76);
    --kv-drawer: rgba(253, 252, 249, 0.98);
    --kv-control: #FDFCF9;
    --kv-overlay: rgba(24, 36, 48, 0.38);
    --kv-row-hover: rgba(31, 41, 55, 0.045);

    --kv-border: rgba(88, 76, 58, 0.10);
    --kv-border-strong: rgba(88, 76, 58, 0.16);
    --kv-border-faint: rgba(88, 76, 58, 0.06);
    --kv-ref-border: rgba(120, 92, 52, 0.14);
    --kv-control-border: rgba(88, 76, 58, 0.16);
    --kv-focus: rgba(170, 128, 58, 0.60);

    --kv-text-primary: #171A21;
    --kv-text-body: #22252C;
    --kv-text-secondary: #5D6470;
    --kv-text-muted: #6A717C;
    --kv-text-control: #2F3137;
    --kv-scripture: #111111;
    --kv-verse-number: #776A5C; /* was #A09384 — 4.66:1 */

    --kv-gold: #A47A36;
    --kv-gold-bright: #8A6329;
    --kv-gold-muted: rgba(180, 138, 67, 0.30);
    --kv-accent: #756A9B;
    --kv-link: #80602B;
    --kv-link-hover: #5E4419;
    --kv-link-underline: rgba(180, 138, 67, 0.45);
    --kv-section-title: #625875; /* muted manuscript plum */
    --kv-selected-bg: rgba(180, 138, 67, 0.12);
    --kv-selected-text: #7A5A26;
    --kv-badge-bg: rgba(180, 138, 67, 0.07);
    --kv-badge-border: rgba(180, 138, 67, 0.32);
    --kv-badge-text: #8A6329;
    --kv-chip-active-bg: #A47A36;
    --kv-chip-active-border: #A47A36;
    --kv-chip-active-text: #FFFCF6;
    --kv-chip-active-count: rgba(255, 252, 246, 0.80);

    /* Christ references keep their antique-gold edge; Key Verse cards the
       quiet scholarly lavender used for narrative headings. */
    --kv-christ-accent: rgba(180, 138, 67, 0.78);
    --kv-christ-label: #8A6329;
    --kv-keyverse-accent: rgba(84, 99, 122, 0.55);
    --kv-keyverse-label: #54637A;

    --kv-highlight-bg: rgba(180, 138, 67, 0.07);
    --kv-highlight-border: rgba(180, 138, 67, 0.22);
    --kv-highlight-inset: rgba(180, 138, 67, 0.045);
    --kv-feature-tint: rgba(31, 41, 55, 0.035);
    --kv-card-glow: rgba(31, 41, 55, 0.025);
    --kv-shadow-card: 0 8px 24px rgba(34, 42, 64, 0.045);
    --kv-shadow-pop: 0 24px 64px rgba(34, 42, 64, 0.15);
    --kv-shadow-bar: 0 6px 18px rgba(34, 42, 64, 0.07);
    --kv-shadow-float: 0 8px 22px rgba(34, 42, 64, 0.12);
    --kv-shadow-drawer: 0 -12px 32px rgba(34, 42, 64, 0.09);
    --kv-shadow-modal: 0 24px 70px rgba(34, 42, 64, 0.18), 0 4px 18px rgba(34, 42, 64, 0.08);
    --kv-shadow-lift: 0 6px 18px rgba(34, 42, 64, 0.06);
    /* Category colours are already ink-dark on paper: keep them nearly
       full strength so Rest / Peace / Holiness stay distinguishable. */
    --kv-tag-ink: 92%;
    --kv-tag-ink-rail: 90%;
    --kv-tag-edge: 80%;
    --kv-inset: inset 0 1px 2px rgba(34, 42, 64, 0.05);

    /* Branded navy book-introduction hero (unchanged identity). */
    --kv-intro-hero-top: #182D48;
    --kv-intro-hero-mid: #213A5A;
}

/* ---- Light palette: luminous mist, ivory, navy ink, restrained gold ---- */
/* Scripture in a quiet, daylit reading room. Cards stay ivory; the soft
   blue-green mist (#E6F1EF family) carries the supporting surfaces
   (Insights panel, quote panels, filter strips, page edge, bars) instead
   of broad pale blue. Navy is the interactive accent; gold is editorial. */
html.parchment-off:not(.dark-mode):not(#_#_) {
    --kv-bg-deep: #E8EBF1;
    --kv-bg: #FFFFFF;
    --kv-surface: #FFFFFF;
    --kv-surface-strong: #F7F8FA;
    --kv-surface-ref: #FFFFFF;
    --kv-toolbar: #F7F8FA;
    --kv-toolbar-glass: rgba(255, 255, 255, 0.86);
    --kv-nav-glass: rgba(255, 255, 255, 0.78);
    --kv-drawer: rgba(255, 255, 255, 0.97);
    --kv-control: #FFFFFF;
    --kv-overlay: rgba(24, 36, 48, 0.40);
    --kv-row-hover: rgba(31, 41, 55, 0.045);

    --kv-border: rgba(31, 41, 55, 0.10);
    --kv-border-strong: rgba(31, 41, 55, 0.16);
    --kv-border-faint: rgba(31, 41, 55, 0.06);
    --kv-ref-border: rgba(31, 41, 55, 0.10);
    --kv-control-border: rgba(31, 41, 55, 0.14);
    --kv-focus: rgba(66, 92, 134, 0.50);

    --kv-text-primary: #263347;
    --kv-text-body: #3A4555;
    --kv-text-secondary: #5F6A7A;
    --kv-text-muted: #687280; /* was #8A93A0 — 4.65:1 */
    --kv-text-control: #263347;
    --kv-scripture: #302F2D;
    --kv-verse-number: #68727F; /* was #98A0AB — 4.66:1 */

    --kv-gold: #94702F;
    --kv-gold-bright: #7E5E24;
    --kv-gold-muted: rgba(174, 137, 67, 0.32);
    --kv-accent: #425C86;
    --kv-link: #3F5680;
    --kv-link-hover: #2C4166;
    --kv-link-underline: rgba(63, 86, 128, 0.32);
    --kv-section-title: #4F5F7E;
    --kv-selected-bg: rgba(66, 92, 134, 0.09);
    --kv-selected-text: #3F5680;
    --kv-badge-bg: rgba(66, 92, 134, 0.05);
    --kv-badge-border: rgba(66, 92, 134, 0.26);
    --kv-badge-text: #3F5680;
    --kv-chip-active-bg: #425C86;
    --kv-chip-active-border: #425C86;
    --kv-chip-active-text: #FAFBF8;
    --kv-chip-active-count: rgba(250, 251, 248, 0.78);
    --kv-tab-active-bg: #3F5680;
    --kv-tab-active-border: #3F5680;
    --kv-tab-active-text: #FAFBF8;

    --kv-christ-accent: rgba(174, 137, 67, 0.65);
    --kv-christ-label: #8A6A2C;
    --kv-keyverse-accent: rgba(66, 92, 134, 0.50);
    --kv-keyverse-label: #425C86;

    --kv-highlight-bg: rgba(80, 150, 135, 0.08);
    --kv-highlight-border: rgba(174, 137, 67, 0.30);
    --kv-highlight-inset: rgba(174, 137, 67, 0.06);
    --kv-feature-tint: rgba(174, 137, 67, 0.07);
    --kv-card-glow: rgba(80, 150, 135, 0.03);
    --kv-shadow-card: 0 8px 20px rgba(60, 75, 90, 0.05);
    --kv-shadow-pop: 0 24px 64px rgba(30, 45, 60, 0.16);
    --kv-shadow-bar: 0 6px 18px rgba(40, 60, 80, 0.06);
    --kv-shadow-float: 0 8px 22px rgba(40, 60, 80, 0.14);
    --kv-shadow-drawer: 0 -12px 32px rgba(40, 60, 80, 0.08);
    --kv-shadow-modal: 0 24px 70px rgba(30, 45, 60, 0.18), 0 4px 18px rgba(30, 45, 60, 0.07);
    --kv-shadow-lift: 0 6px 18px rgba(60, 75, 90, 0.06);
    --kv-inset: inset 0 1px 2px rgba(40, 60, 80, 0.06);
    --kv-tag-ink: 92%;
    --kv-tag-ink-rail: 90%;
    --kv-tag-edge: 80%;

    --kv-intro-hero-top: #182D48;
    --kv-intro-hero-mid: #213A5A;
}

/* ---- Shared: legacy variables resolve to the active palette ------------- */
html:not(#_#_):not(.kv-w) {
    --premium-bg: var(--kv-bg) !important;
    --premium-surface: var(--kv-surface) !important;
    --premium-card: var(--kv-surface) !important;
    --premium-border: var(--kv-border) !important;
    --premium-text-muted: var(--kv-text-muted) !important;
    --nav-pill-bg: var(--kv-toolbar-glass) !important;
    --bg-primary: var(--kv-bg);
    --bg-card: var(--kv-surface);
    --text-primary: var(--kv-text-primary);
    --text-secondary: var(--kv-text-secondary);

    color: var(--kv-text-body) !important;
    background-color: var(--kv-bg-deep) !important;
}

/* ---- L0 / L1: page edge and reading surface ---------------------------- */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body {
    background: var(--kv-bg-deep) !important;
    color: var(--kv-text-body);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(#app-view, .main-content, .study-reading-shell, .content-area, .premium-surface-container, .bible-content, #parchmentCardContainer, .devotion-container) {
    background-color: var(--kv-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body > .container {
    background: var(--kv-bg-deep) !important;
}

/* ---- Hero: branded navy that settles into the reading surface ---------- */
html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body header#main-header.study-header {
    background-color: var(--kv-hero-mid) !important;
    background-image:
        radial-gradient(ellipse 60% 70% at 72% 8%, var(--kv-hero-glow), transparent 70%),
        radial-gradient(ellipse 40% 50% at 50% 46%, rgba(201, 162, 77, 0.08), transparent 70%),
        linear-gradient(180deg, var(--kv-hero-top) 0%, var(--kv-hero-mid) 58%, var(--kv-bg) 100%) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body header#main-header.study-header .dots-animation canvas {
    opacity: 0.55;
}

/* Legacy dark rules paint headings with -webkit-text-fill-color, which
   overrides `color`. In both dark modes headings take their token colour. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.bible-content, #versesContainer, #chapter-content, #explore-section-wrapper, .refs-section, .detached-summary-section, .devotion-column, .modal-content, .easy-nav-panel) :is(h1, h2, h3, h4, h5),
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.note-title, .chapter-primary-atlas-title, .insight-header, .study-insights-title, h2.devotion-header, .topical-topic-title-link) {
    -webkit-text-fill-color: currentColor !important;
}

/* ---- Toolbar / sticky Book · Chapter · Notes bar ----------------------- */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .sidebar.auto-hide-sidebar {
    background: var(--kv-toolbar) !important;
    border-top: 1px solid var(--kv-border) !important;
    border-bottom: 1px solid var(--kv-border) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body.is-mobile .sidebar.auto-hide-sidebar.top-docked {
    background: var(--kv-toolbar-glass) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(20px) !important;
    backdrop-filter: saturate(1.4) blur(20px) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--kv-border) !important;
    box-shadow: var(--kv-shadow-bar) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .sidebar.auto-hide-sidebar :is(label, .selector-label, .control-label) {
    color: var(--kv-text-muted) !important;
}

/* Dropdown triggers (Book, Chapter, Notes, version, Daily source) */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.custom-dropdown-btn, .version-toggle-btn, .custom-select, .custom-select-trigger, select.form-control, select):not(.study-header *):not(.bottom-nav *) {
    background-color: var(--kv-control) !important;
    background-image: none !important;
    border: 1px solid var(--kv-control-border) !important;
    color: var(--kv-text-control) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .custom-select:not(.study-header *):not(.bottom-nav *) .custom-select-trigger {
    border: 0 !important;
    background-color: transparent !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.custom-dropdown-btn, .version-toggle-btn, .custom-select-trigger):not(.study-header *):not(.bottom-nav *) :is(span, .custom-dropdown-label) {
    color: var(--kv-text-control) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.custom-dropdown-btn, .version-toggle-btn, .custom-select, select):is(:hover, :focus-visible, [aria-expanded="true"], .open, .active) {
    border-color: var(--kv-focus) !important;
    outline: none !important;
}

/* Dropdown menus */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.custom-dropdown-menu, .custom-dropdown-panel, .version-dropdown-menu, .custom-options, .language-menu) {
    background: var(--kv-surface) !important;
    border: 1px solid var(--kv-border-strong) !important;
    box-shadow: var(--kv-shadow-pop) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.custom-dropdown-item, .version-option, .custom-option) {
    color: var(--kv-text-body) !important;
    background: transparent !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.custom-dropdown-item, .version-option, .custom-option):hover {
    background: var(--kv-surface-strong) !important;
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.custom-dropdown-item, .version-option, .custom-option):is(.selected, .active) {
    background: var(--kv-selected-bg) !important;
    color: var(--kv-selected-text) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.version-group-header) {
    color: var(--kv-text-muted) !important;
    background: transparent !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body option {
    background-color: var(--kv-control);
    color: var(--kv-text-control);
}

/* Reader tool buttons (A− A+, modes, columns, U / M) */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.font-btn, .font-control-btn, .hamburger-font-btn, .reader-capsule-btn, .view-toggle-switch) {
    background-color: var(--kv-control) !important;
    border: 1px solid var(--kv-control-border) !important;
    color: var(--kv-text-secondary) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.font-btn, .font-control-btn, .hamburger-font-btn, .reader-capsule-btn):hover {
    border-color: var(--kv-focus) !important;
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.font-btn, .reader-capsule-btn):is(.is-on, .active) {
    background-color: var(--kv-surface-strong) !important;
    border-color: var(--kv-focus) !important;
    color: var(--kv-selected-text) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .font-btn.dark-mode-btn {
    color: var(--kv-gold-bright) !important;
    border-color: var(--kv-gold-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.font-btn, .hamburger-font-btn) :is(.hfb-a-small, .hfb-a-large, .hfb-minus, .hfb-plus) {
    color: inherit !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .reader-capsule-letter {
    color: inherit !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.reader-capsule-group, .hamburger-font-divider) {
    border-color: var(--kv-border) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .toggle-indicator {
    background: var(--kv-surface-strong) !important;
}

/* ---- Chapter title + outline ------------------------------------------- */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.content-header-row h1, .chapter-title, h1.chapter-heading) {
    color: var(--kv-text-primary) !important;
    text-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-outline-block {
    background: transparent !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-outline {
    background: var(--kv-surface) !important;
    border: 1px solid var(--kv-border) !important;
    box-shadow: none !important;
    color: var(--kv-text-body) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-outline :is(.outline-toggle, button) {
    color: var(--kv-text-secondary) !important;
}

/* ---- Scripture ---------------------------------------------------------- */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.verse-text, .verse-item, .bible-content p.verse, #versesContainer .verse-item) {
    color: var(--kv-scripture) !important;
}

/* Parchment Study Scripture baseline: approved Option F.
   Scope stays on the main verse stream so cards, summaries, annotations,
   controls, and non-Parchment themes keep their own typography. */
html:not(.parchment-off):not(.dark-mode):not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body #app-view #chapter-content.bible-content #versesContainer :is(.verse-item, .verse-text):not(:lang(hi)):not(:lang(te)):not(:lang(ta)):not(:lang(ml)) {
    color: var(--study-reading-scripture, #111111) !important;
    -webkit-text-fill-color: var(--study-reading-scripture, #111111) !important;
    font-family: "EB Garamond", Georgia, serif !important;
    font-weight: 450 !important;
    font-variation-settings: "wght" 450;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .verse-num {
    color: var(--kv-verse-number) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .verse-num.clickable {
    background: var(--kv-surface-strong) !important;
    background-image: none !important;
    border: 1px solid var(--kv-gold-muted) !important;
    color: var(--kv-gold-bright) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body #app-view #versesContainer :is(.section-title.section-heading, .section-heading-wrapper h3, .in-verse-heading) {
    color: var(--kv-section-title) !important;
    -webkit-text-fill-color: var(--kv-section-title) !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body #app-view #versesContainer :is(.section-title.section-heading, .section-heading-wrapper h3, .in-verse-heading):not(:lang(hi)):not(:lang(te)):not(:lang(ta)):not(:lang(ml)) {
    font-weight: 600 !important;
    letter-spacing: 0.055em !important;
    line-height: 1.22 !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body #app-view #versesContainer.two-columns .in-verse-heading {
    border-bottom-color: var(--kv-gold-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body #app-view #versesContainer :is(.section-range, .section-range-full) {
    color: var(--kv-text-muted) !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

@media (max-width: 600px) {
    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body #app-view #versesContainer .section-heading-wrapper {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 5px !important;
        column-gap: 0 !important;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body #app-view #versesContainer .section-title {
        display: block !important;
        overflow: visible !important;
        text-overflow: clip !important;
        -webkit-line-clamp: unset !important;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body #app-view #versesContainer .section-range {
        justify-self: start !important;
        text-align: left !important;
        white-space: normal !important;
    }
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.verse-item.highlighted, .bible-content .verse-item.highlighted, .verse-item.verse-highlight, .bible-content .verse-item.verse-highlight) {
    background: var(--kv-highlight-bg) !important;
    border-left-color: var(--kv-highlight-border) !important;
    box-shadow: inset 0 0 0 1px var(--kv-highlight-inset) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-capsule {
    background: var(--kv-badge-bg) !important;
    border-color: var(--kv-badge-border) !important;
    color: var(--kv-text-secondary) !important;
}

/* ---- Christ Reference + Key Verse cards --------------------------------- */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.christ-ref-section, .key-verse-card) {
    background: var(--kv-surface-ref) !important;
    background-image: none !important;
    border: 1px solid var(--kv-ref-border) !important;
    border-left: 3px solid var(--kv-christ-accent) !important;
    box-shadow: var(--kv-shadow-card) !important;
    color: var(--kv-text-body) !important;
}

html:not(.parchment-off):not(.dark-mode):not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.christ-ref-section, .key-verse-card) {
    background: #EDE7D9 !important;
    background-image: none !important;
}

/* Christ Reference and Key Verse cards each carry their theme's accent edge. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .key-verse-card {
    border-left-color: var(--kv-keyverse-accent) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.christ-ref-section, .key-verse-card) .note-label {
    color: var(--kv-christ-label) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .key-verse-card .note-label {
    color: var(--kv-keyverse-label) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.christ-ref-section, .key-verse-card) :is(.note-head, .christ-ref-header, .kv-header) {
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.christ-ref-section, .key-verse-card) .note-title {
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.christ-ref-section, .key-verse-card) .note-sub {
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.christ-ref-section, .key-verse-card) :is(.note-range, .note-refs-label) {
    color: var(--kv-text-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.christ-ref-section, .key-verse-card) :is(.christ-ref-text, p) {
    color: var(--kv-text-body) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.christ-ref-section, .key-verse-card) .note-refs {
    border-top-color: var(--kv-border) !important;
    color: var(--kv-text-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.verse-ref-link, a.verse-ref-link, .note-refs a, .reference-cite-container a, .reference-cite) {
    color: var(--kv-link) !important;
    text-decoration-color: var(--kv-link-underline) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.verse-ref-link, a.verse-ref-link, .note-refs a, .reference-cite-container a):hover {
    color: var(--kv-link-hover) !important;
}

/* ---- Section labels (Chapter Summary, Insights, Scripture Connections) - */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(h3.section-subtitle, .section-label-group h3) {
    color: var(--kv-gold) !important;
    text-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .section-label-group {
    border-bottom-color: var(--kv-gold-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .summary-content,
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .summary-content p {
    color: var(--kv-text-body) !important;
}

/* ---- Insights & Themes --------------------------------------------------- */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body #explore-section-wrapper.insight-section {
    background: var(--kv-bg-deep) !important;
    background-image: none !important;
    border: 1px solid var(--kv-border) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .study-insights-title {
    color: var(--kv-text-primary) !important;
    text-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .study-insights-title :is(svg, .sparkle, span:first-child) {
    color: var(--kv-gold) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .study-insights-subtitle {
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .study-insights-divider {
    border-color: var(--kv-gold-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-primary-atlas-list {
    background: var(--kv-surface) !important;
    border: 1px solid var(--kv-border) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .study-insights-mood-filter {
    background: var(--kv-surface-strong) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kv-border) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.study-insights-filter-label, .study-insights-mood-filter svg) {
    color: var(--kv-text-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .study-insights-mood-filter button {
    background: transparent !important;
    border: 1px solid var(--kv-control-border) !important;
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .study-insights-mood-filter button :is(em, span) {
    color: var(--kv-text-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .study-insights-mood-filter button.active {
    background: var(--kv-chip-active-bg) !important;
    border-color: var(--kv-chip-active-border) !important;
    color: var(--kv-chip-active-text) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .study-insights-mood-filter button.active :is(em, span) {
    color: var(--kv-chip-active-count) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-primary-atlas-group {
    border-color: var(--kv-border) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-primary-atlas-row {
    background: transparent !important;
    border-color: var(--kv-border) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-primary-atlas-row:hover {
    background: var(--kv-row-hover) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-primary-atlas-title {
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-primary-atlas-children .chapter-primary-atlas-title {
    color: var(--kv-text-body) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-primary-atlas-ref {
    color: var(--kv-text-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-primary-atlas-children {
    border-left-color: var(--kv-gold-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.chapter-primary-atlas-badge, .chapter-primary-atlas-arrow) {
    background: var(--kv-badge-bg) !important;
    border-color: var(--kv-badge-border) !important;
    color: var(--kv-badge-text) !important;
}

/* Insight / character cards */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .insight-card.study-card {
    background: var(--kv-surface) !important;
    background-image: none !important;
    border: 1px solid var(--kv-border) !important;
    box-shadow: var(--kv-shadow-card) !important;
    color: var(--kv-text-body) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .insight-card.study-card:hover {
    background: var(--kv-surface-strong) !important;
    border-color: var(--kv-border-strong) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .insight-card :is(.insight-header, h4, .insight-title) {
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .insight-card .insight-snippet {
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .insight-card .insight-affordance {
    color: var(--kv-link) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .insight-card .insight-icon {
    background: var(--kv-surface-strong) !important;
    border: 1px solid var(--kv-border) !important;
}

/* ---- Scripture Connections ---------------------------------------------- */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .reference-groups-container {
    background: var(--kv-surface) !important;
    border: 1px solid var(--kv-border) !important;
    border-radius: 14px !important;
    padding: 6px 22px !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .reference-group {
    border-left: 0 !important;
    border-bottom: 1px solid var(--kv-border) !important;
    padding-left: 0 !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .reference-group:last-child {
    border-bottom: 0 !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .reference-verse-label {
    color: var(--kv-gold) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .reference-row {
    border-color: var(--kv-border-faint) !important;
    background: transparent !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .reference-desc {
    color: var(--kv-text-body) !important;
}

/* ---- In-content pager (tablet + desktop) -------------------------------- */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-nav-bottom.floating-glass {
    background: var(--kv-toolbar-glass) !important;
    border: 1px solid var(--kv-border) !important;
    box-shadow: var(--kv-shadow-card) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .chapter-nav-bottom .nav-link {
    color: var(--kv-text-control) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .nav-arrow {
    background: var(--kv-control) !important;
    border: 1px solid var(--kv-control-border) !important;
    color: var(--kv-text-secondary) !important;
    box-shadow: none !important;
}

/* ---- Popups, modals, side panels, drawers ------------------------------- */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.modal-overlay, .modal) {
    background-color: var(--kv-overlay) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .modal-content {
    background: var(--kv-surface) !important;
    background-image: none !important;
    border: 1px solid var(--kv-border-strong) !important;
    box-shadow: var(--kv-shadow-pop) !important;
    color: var(--kv-text-body) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.modal-header-sticky, .modal-header) {
    background: var(--kv-surface-strong) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--kv-border) !important;
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .modal-body {
    background: transparent !important;
    color: var(--kv-text-body) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.modal-close, .video-close-btn) {
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .easy-nav-panel {
    background: var(--kv-bg) !important;
    background-image: none !important;
    border-color: var(--kv-border) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.easy-nav-header, .easy-nav-tabs) {
    background: var(--kv-surface) !important;
    border-color: var(--kv-border) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .easy-nav-tab {
    background: transparent !important;
    border-color: var(--kv-control-border) !important;
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .easy-nav-tab.active {
    background: var(--kv-selected-bg) !important;
    border-color: var(--kv-focus) !important;
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .easy-nav-placeholder {
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body #easy-nav-toggle.floating-easy-nav-btn {
    background: var(--kv-surface-strong) !important;
    border: 1px solid var(--kv-border-strong) !important;
    color: var(--kv-gold-bright) !important;
    box-shadow: var(--kv-shadow-float) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .hamburger-drawer-inner {
    background: var(--kv-drawer) !important;
    border-top: 1px solid var(--kv-border) !important;
    box-shadow: var(--kv-shadow-drawer) !important;
}

/* ---- Bottom navigation (phone) ------------------------------------------ */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .bottom-nav {
    background: var(--kv-nav-glass) !important;
    border-top: 1px solid var(--kv-border) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .bottom-nav :is(.bottom-nav-item, .bottom-nav-item span, .bottom-nav-label) {
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .bottom-nav .bottom-nav-item.active {
    color: var(--kv-gold-bright) !important;
}

/* ==========================================================================
   Daily Devotion
   ========================================================================== */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-tabs {
    background: var(--kv-toolbar) !important;
    border: 1px solid var(--kv-border) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-tab-btn {
    color: var(--kv-text-secondary) !important;
    -webkit-text-fill-color: currentColor !important;
    background: transparent !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.devotion-tab-btn.active, .topical-section-tab.active, .topical-section-tab.daily-source-tab.active) {
    -webkit-text-fill-color: currentColor !important;
    background: var(--kv-tab-active-bg, var(--kv-surface-strong)) !important;
    background-image: none !important;
    border: 1px solid var(--kv-tab-active-border, var(--kv-focus)) !important;
    color: var(--kv-tab-active-text, var(--kv-text-primary)) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.topical-section-tab, .topical-section-menu-toggle) {
    background: var(--kv-control) !important;
    background-image: none !important;
    border: 1px solid var(--kv-control-border) !important;
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .view-toggle-container {
    background: var(--kv-control) !important;
    background-image: none !important;
    border: 1px solid var(--kv-control-border) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .view-toggle-label {
    color: var(--kv-text-secondary) !important;
}

/* Morning / Evening cards */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column {
    background: var(--kv-surface) !important;
    background-image: linear-gradient(180deg, var(--kv-card-glow), transparent 120px) !important;
    border: 1px solid var(--kv-border) !important;
    box-shadow: var(--kv-shadow-card) !important;
    color: var(--kv-text-body) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body h2.devotion-header {
    background: transparent !important;
    background-image: none !important;
    color: var(--kv-text-primary) !important;
    border-color: var(--kv-border) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column :is(.devotion-title, h3, .liturgical-title) {
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column :is(.devotion-date, .devotion-subtitle) {
    color: var(--kv-text-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body blockquote.liturgical-verse {
    background: var(--kv-surface-strong) !important;
    background-image: none !important;
    border: 1px solid var(--kv-border) !important;
    border-left: 2px solid var(--kv-gold-muted) !important;
    color: var(--kv-scripture) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.liturgical-ref, .liturgical-verse cite) {
    color: var(--kv-gold) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column :is(p, .devotion-content, .devotion-body) {
    color: var(--kv-text-body);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column :is(.drop-cap, .devotion-content p:first-of-type::first-letter) {
    color: var(--kv-accent);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.reference-footer, .devotion-references) a {
    color: var(--kv-gold) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body hr.liturgical-rule {
    background-image: linear-gradient(90deg, transparent, var(--kv-gold-muted), transparent) !important;
}

/* Topic Devotion */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.topical-devotion-panel, .topical-section-menu) {
    background: var(--kv-bg-deep) !important;
    background-image: none !important;
    border: 1px solid var(--kv-border) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .topical-topic-card {
    background: var(--kv-surface) !important;
    background-image: none !important;
    border: 1px solid var(--kv-border) !important;
    box-shadow: var(--kv-shadow-card) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .topical-topic-icon {
    background: var(--kv-surface-strong) !important;
    background-image: none !important;
    border: 1px solid var(--kv-border) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .topical-topic-title-link {
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .topical-topic-meta {
    color: var(--kv-text-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .topical-topic-button {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--kv-gold-muted) !important;
    color: var(--kv-gold-bright) !important;
}

/* Devotion reading text is the primary reading surface on Daily: ivory. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column :is(p, .devotion-text, .devotion-content) {
    color: var(--kv-scripture) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column .devotion-topic {
    color: var(--kv-text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column :is(.devotion-date-inline, .devotion-date) {
    color: var(--kv-text-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column p.theme-verse-p {
    background: var(--kv-surface-strong) !important;
    background-image: none !important;
    border: 1px solid var(--kv-border) !important;
    border-left: 2px solid var(--kv-gold-muted) !important;
    color: var(--kv-scripture) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column a.theme-verse-ref {
    color: var(--kv-gold) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body #close-easy-nav {
    background: var(--kv-control) !important;
    border: 1px solid var(--kv-control-border) !important;
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .easy-nav-content :is(a, .verse-ref-link) {
    color: var(--kv-link) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .easy-nav-content {
    color: var(--kv-text-body) !important;
}

/* ==========================================================================
   Book Introductions — their own --bi-* variables map onto the tokens
   ========================================================================== */
html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body .book-intro {
    --bi-bg: var(--kv-bg);
    --bi-surface: var(--kv-surface);
    --bi-surface-strong: var(--kv-surface);
    --bi-surface-warm: var(--kv-surface-strong);
    --bi-navy: var(--kv-text-primary);
    --bi-navy-deep: var(--kv-text-primary);
    --bi-gold: var(--kv-gold);
    --bi-gold-soft: var(--kv-gold-muted);
    --bi-ink: var(--kv-text-primary);
    --bi-ink-deep: var(--kv-text-primary);
    --bi-text: var(--kv-text-body);
    --bi-muted: var(--kv-text-secondary);
    --bi-rule: var(--kv-border);
    --bi-card-border: var(--kv-border);
    --bi-shadow: var(--kv-shadow-card);
    --bi-hero-text: var(--kv-text-primary);
    --bi-hero-gold: var(--kv-gold-bright);
    --bi-hero-bg-start: var(--kv-intro-hero-top);
    --bi-hero-bg-mid: var(--kv-intro-hero-mid);
    --bi-hero-bg-end: var(--kv-bg);
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body .book-intro :is(.book-intro-meta-card, .book-intro-theme-card, .book-intro-passage, .book-intro-respond-item) {
    background: var(--kv-surface) !important;
    border-color: var(--kv-border) !important;
    box-shadow: var(--kv-shadow-card) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body .book-intro :is(.book-intro-theme-card--feature, .book-intro-passage--feature) {
    background: linear-gradient(90deg, var(--kv-feature-tint), transparent 60%), var(--kv-surface-strong) !important;
    border-color: var(--kv-highlight-border) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body .book-intro .book-intro-why-panel {
    background: var(--kv-surface-strong) !important;
    border-color: var(--kv-border) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body .book-intro :is(.book-intro-meta-icon, .book-intro-theme-icon) {
    background: var(--kv-surface-strong) !important;
    border-color: var(--kv-gold-muted) !important;
    color: var(--kv-gold) !important;
}

/* ==========================================================================
   Journey + Daily "Interactive" (visuals dashboard) and the Atlas
   The cinematic gold identity stays; its base follows the active dark
   palette so it sits in the same depth system.
   ========================================================================== */
html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body #visuals-dashboard.visuals-dashboard {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, var(--kv-cinematic-glow), transparent 70%),
        linear-gradient(180deg, var(--kv-cinematic-top) 0%, var(--kv-bg-deep) 100%) !important;
    border-color: var(--kv-border) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body :is(.v-prologue-why-inner, .v-prologue-yahweh-inner, .v-prologue-atlas-teaser, .v-section-header-wrap, .v-hero-scripture-block, .v-s03-card, .v-s03-journey-step, .v-s03-atlas-callout, .v-s03-chapter) {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.035), rgba(255, 253, 248, 0.01)), var(--kv-cinematic-panel) !important;
    border-color: var(--kv-border) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body .v-prologue-discovery-node {
    background: var(--kv-surface) !important;
    border-color: var(--kv-border) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body .v-prologue-discovery-icon {
    background: var(--kv-surface-strong) !important;
    border-color: var(--kv-gold-muted) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body :is(.v-s03-chapter-header) {
    background: var(--kv-surface-strong) !important;
}

/* ---- Small controls that still carried GitHub blue ---------------------- */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .view-toggle-switch .toggle-option {
    color: var(--kv-text-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .view-toggle-switch .toggle-option.active {
    color: var(--kv-selected-text) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(#explore-section-wrapper, .refs-section, .detached-summary-section) hr {
    border-color: var(--kv-border) !important;
    background: var(--kv-border) !important;
}

/* Legacy rules also force -webkit-text-fill-color on text inside cards
   (e.g. the Daily date line). Inside the themed components text follows its
   token colour. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.devotion-column, .christ-ref-section, .key-verse-card, .insight-card, .reference-groups-container, .chapter-primary-atlas-list, .detached-summary-section, .topical-topic-card) :not(svg, svg *) {
    -webkit-text-fill-color: currentColor !important;
}

/* Daily cards: drop the legacy white sheen and brown wash on the card top. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column::before {
    background-image: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .devotion-column::after {
    background-image: linear-gradient(90deg, transparent, var(--kv-gold-muted), transparent) !important;
}

/* Journey stepper and the Atlas shells follow the active palette. The Atlas
   keeps its category colours (node dots, chapter-topic buttons) because they
   carry meaning. */
html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body #visual-section-selector.is-curriculum {
    background: radial-gradient(ellipse at 50% 0%, rgba(240, 225, 194, 0.05), transparent 65%), var(--kv-cinematic-panel) !important;
    border-color: var(--kv-border) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body :is(.v-architecture-popup-panel, .v-god-topic-hero, .v-god-constellation-map-container) {
    background: var(--kv-cinematic-shell) !important;
    border-color: var(--kv-border-strong) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body :is(.v-god-topic-panel, .v-god-library-section, .v-god-witness-container, .v-atlas-intro, .v-atlas-const-sidebar, .v-atlas-search-wrap, .v-god-topic-stats, .v-canonical-testament-toggle) {
    background: var(--kv-cinematic-panel) !important;
    border-color: var(--kv-border) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body :is(a.v-architecture-ref-token, span.v-architecture-meta-pill) {
    background-color: var(--kv-cinematic-chip) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body .v-architecture-popup-scrim {
    background-color: var(--kv-overlay) !important;
}

html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body .v-architecture-popup-close {
    border-color: var(--kv-border-strong) !important;
    box-shadow: 0 0 0 2px var(--kv-focus) !important;
    outline-color: var(--kv-focus) !important;
}

/* Generic study capsules take the palette's badge style; the Atlas mood tags
   keep their colours because each mood is colour-coded. */
html.dark-mode:not(#_#_):not(.kv-x):not(.kv-y) body .v-architecture-study-capsule {
    background: var(--kv-badge-bg) !important;
    border-color: var(--kv-badge-border) !important;
    color: var(--kv-badge-text) !important;
}

/* ==========================================================================
   Foundation popup (tap a capsule such as "Rest")
   page dims → popup shell (L1) → header strip and sections (L2) →
   current verse (L3). One component set; each dark palette supplies the
   values. Category colours (Rest, Peace, Holiness …) stay semantic but are
   mixed toward the theme's text and surface so no tag reads as neon.
   Phone: one column, filters live behind the tools toggle (existing
   behaviour), and the global bottom nav is suppressed (bn-popup).
   ========================================================================== */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-overlay {
    background: var(--kv-overlay) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup {
    background: var(--kv-bg) !important;
    background-image: none !important;
    border: 1px solid var(--kv-border-strong) !important;
    box-shadow: var(--kv-shadow-modal) !important;
    color: var(--kv-text-body) !important;
}

/* Header: one quiet strip above the results. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-header {
    background: var(--kv-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--kv-border) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-eyebrow {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--kv-gold) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-title {
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.005em !important;
    font-synthesis: none;
    color: var(--kv-text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-summary {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    color: var(--kv-text-muted) !important;
    font-variant-numeric: tabular-nums;
}

/* Secondary utility controls */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.foundation-popup-expand-all, .foundation-popup-collapse-all, .foundation-popup-tools-toggle, .foundation-popup-pager-page, .foundation-popup-pager-step) {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--kv-border-strong) !important;
    color: var(--kv-text-secondary) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.foundation-popup-expand-all, .foundation-popup-collapse-all, .foundation-popup-tools-toggle, .foundation-popup-pager-page, .foundation-popup-pager-step):is(:hover, :focus-visible) {
    background: var(--kv-surface-strong) !important;
    border-color: var(--kv-focus) !important;
    color: var(--kv-text-primary) !important;
    outline: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-pager-page:is(.is-active, .active, [aria-current="page"]) {
    background: var(--kv-selected-bg) !important;
    border-color: var(--kv-focus) !important;
    color: var(--kv-selected-text) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-close {
    background: var(--kv-surface-strong) !important;
    background-image: none !important;
    border: 1px solid var(--kv-border) !important;
    color: var(--kv-text-secondary) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-close:is(:hover, :focus-visible) {
    border-color: var(--kv-focus) !important;
    color: var(--kv-selected-text) !important;
    outline: none !important;
}

/* Search: slightly recessed into the header, quiet until focused. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-search-input {
    background: var(--kv-bg) !important;
    border: 1px solid var(--kv-border-strong) !important;
    color: var(--kv-text-control) !important;
    box-shadow: var(--kv-inset) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-search-input::placeholder {
    color: var(--kv-text-muted) !important;
    opacity: 1;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-search-input:focus {
    border-color: var(--kv-focus) !important;
    box-shadow: var(--kv-inset), 0 0 0 3px var(--kv-selected-bg) !important;
    outline: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.foundation-popup-body, .foundation-popup-content-shell, .foundation-popup-results) {
    background: transparent !important;
    background-image: none !important;
}

/* Book accordions */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-group-header {
    background: var(--kv-surface) !important;
    border: 1px solid var(--kv-border) !important;
    color: var(--kv-text-primary) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-group-header:hover {
    background: var(--kv-surface-strong) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-group-name {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    color: var(--kv-text-body) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-group-toggle {
    color: var(--kv-text-muted) !important;
    opacity: 0.8;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-group-count {
    background: transparent !important;
    border: 1px solid var(--kv-badge-border) !important;
    color: var(--kv-badge-text) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
}

/* Verse entries */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-row {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-row:hover {
    background: var(--kv-row-hover) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-row.is-current {
    background: var(--kv-surface-strong) !important;
    background-image: none !important;
    border: 1px solid var(--kv-highlight-border) !important;
    box-shadow: var(--kv-shadow-lift) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.foundation-popup-ref, .foundation-popup-ref-link) {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em !important;
    color: var(--kv-text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    text-decoration-color: var(--kv-link-underline) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-ref-link:hover {
    color: var(--kv-link-hover) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-here {
    background: var(--kv-selected-bg) !important;
    border: 1px solid var(--kv-gold-muted) !important;
    color: var(--kv-gold-bright) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
}

/* The verses are Scripture: the reading serif, ivory, generous leading. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-verse-text {
    font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif !important;
    font-size: 1.14rem !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: 0.002em !important;
    color: var(--kv-scripture) !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-secondary {
    color: var(--kv-text-muted) !important;
}

/* Category tags: semantic hue, muted toward the theme. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-category-pill {
    --kv-tag: rgb(var(--foundation-category-rgb, 156, 118, 69));
    background: color-mix(in srgb, var(--kv-tag) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--kv-tag) 38%, transparent) !important;
    color: color-mix(in srgb, var(--kv-tag) var(--kv-tag-ink), var(--kv-text-primary)) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-weight: 500 !important;
    filter: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body button.foundation-popup-category-pill.is-switch:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--kv-tag) 22%, transparent) !important;
    border-color: color-mix(in srgb, var(--kv-tag) 60%, transparent) !important;
}

/* Filter by Foundation — a quiet taxonomy, not an analytics legend. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-filter-rail {
    background: var(--kv-surface) !important;
    border: 1px solid var(--kv-border) !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-filter-title {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    color: var(--kv-text-muted) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-filter-chip {
    --kv-tag: rgb(var(--foundation-category-rgb, 156, 118, 69));
    background: transparent !important;
    border: 1px solid var(--kv-border) !important;
    border-left: 2px solid color-mix(in srgb, var(--kv-tag) var(--kv-tag-edge), transparent) !important;
    color: color-mix(in srgb, var(--kv-tag) var(--kv-tag-ink-rail), var(--kv-text-body)) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-filter-chip > * {
    color: inherit !important;
    filter: none !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-filter-chip em {
    background: transparent !important;
    color: var(--kv-text-muted) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-filter-chip:hover {
    background: var(--kv-row-hover) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-filter-chip.is-active {
    background: var(--kv-selected-bg) !important;
    border-color: var(--kv-focus) !important;
    border-left-color: var(--kv-gold) !important;
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-filter-chip.is-active em {
    color: var(--kv-selected-text) !important;
}

/* Phone: full-width search, safe-area-aware sheet. */
@media (max-width: 768px) {
    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-overlay {
        padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body :is(.foundation-popup-header-toolbar, .foundation-popup-search-wrap, .foundation-popup-search-input) {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 100% !important;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-verse-text {
        font-size: 1.08rem !important;
    }
    /* The header reserves its right edge for the search / close buttons;
       the tools row sits below them, so it can use the full width. */
    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .foundation-popup-header-toolbar {
        width: auto !important;
        align-self: stretch !important;
        margin-right: -90px !important;
    }
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .detached-summary-section .summary-content :is(h1, h2, h3, h4) {
    color: var(--kv-text-primary) !important;
}

/* ==========================================================================
   Topic Devotion reading view — curated sections (light + parchment; the
   dark modes keep their own gold treatment here)
   ========================================================================== */
html:not(.dark-mode):not(#_#_):not(.kv-x):not(.kv-y) body .topical-reading-section-kicker {
    background: var(--kv-badge-bg) !important;
    border: 1px solid var(--kv-badge-border) !important;
    color: var(--kv-badge-text) !important;
}

html:not(.dark-mode):not(#_#_):not(.kv-x):not(.kv-y) body .topical-reading-section-title {
    color: var(--kv-section-title) !important;
    -webkit-text-fill-color: currentColor !important;
    background-image: none !important;
}

html:not(.dark-mode):not(#_#_):not(.kv-x):not(.kv-y) body .topical-reading-section-description {
    color: var(--kv-text-secondary) !important;
}

html:not(.dark-mode):not(#_#_):not(.kv-x):not(.kv-y):not(.kv-z) body .topical-reference-list > .topical-reference-card {
    background: var(--kv-surface-strong) !important;
    background-image: none !important;
    border: 1px solid var(--kv-border) !important;
    box-shadow: none !important;
}

html:not(.dark-mode):not(#_#_):not(.kv-x):not(.kv-y):not(.kv-z) body .topical-reference-list > .topical-reference-card .topical-reference-link {
    background: var(--kv-surface) !important;
    border: 1px solid var(--kv-badge-border) !important;
    color: var(--kv-badge-text) !important;
}

html:not(.dark-mode):not(#_#_):not(.kv-x):not(.kv-y):not(.kv-z) body .topical-reference-list > .topical-reference-card .topical-reference-copy {
    color: var(--kv-scripture) !important;
}

/* ==========================================================================
   Scripture navigation — Book navigator, Chapter grid, Version selector
   Typography-led: compact UI sans for names and numbers, small tracked gold
   group labels, a calm paper surface and restrained selected state.
   Layout props carry !important to settle the legacy dropdown rules.
   ========================================================================== */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel.is-open {
    position: fixed !important;
    z-index: 10010 !important;
    display: block !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    padding: 14px 16px 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 14px !important;
    background: var(--kv-surface-ref, var(--kv-surface)) !important;
    background-image: none !important;
    border: 1px solid var(--kv-ref-border, var(--kv-border-strong)) !important;
    box-shadow: 0 14px 38px rgba(55, 40, 18, 0.14) !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: currentColor;
}

/* Books, wide: OLD TESTAMENT | NEW TESTAMENT side by side, each two columns. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel--books.kvb-nav-panel--wide.is-open {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 16px 8px 16px !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel--wide .kvb-nav-testament {
    padding: 0 18px;
    min-width: 0;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel--wide .kvb-nav-testament--nt {
    border-left: 1px solid var(--kv-border);
}

/* Books, narrow: one continuous canon, a fine gold rule before the NT. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel--books:not(.kvb-nav-panel--wide) .kvb-nav-testament--nt {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--kv-gold-muted);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 9px;
    padding: 0 10px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kv-gold);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-heading-count {
    color: var(--kv-text-muted);
    font-weight: 500;
    letter-spacing: 0.06em;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-heading-count::before {
    content: "· ";
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-grid--books {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 7px;
    row-gap: 2px;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-grid--chapters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 5px;
}

/* Items */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel .custom-dropdown-item.kvb-nav-item {
    -webkit-appearance: none;
    appearance: none;
    display: block !important;
    position: relative;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--kv-text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel .custom-dropdown-item.kvb-nav-item:hover {
    background: var(--kv-row-hover) !important;
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel .custom-dropdown-item.kvb-nav-item:focus-visible {
    outline: 2px solid var(--kv-focus) !important;
    outline-offset: -2px !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel .custom-dropdown-item.kvb-nav-item.selected {
    background: var(--kv-selected-bg) !important;
    color: var(--kv-text-primary) !important;
    font-weight: 500 !important;
    box-shadow: inset 0 0 0 1px var(--kv-gold-muted) !important;
}

/* Chapter numbers */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel .custom-dropdown-item.kvb-nav-item--num {
    padding: 9px 0 !important;
    min-height: 40px !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel .custom-dropdown-item.kvb-nav-item--num.selected {
    box-shadow: none !important;
    border-color: var(--kv-gold) !important;
    background: var(--kv-selected-bg) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-intro {
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kv-border);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel .custom-dropdown-item.kvb-nav-item--intro {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--kv-gold-bright) !important;
}

@media (max-width: 768px) {
    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel .custom-dropdown-item.kvb-nav-item {
        min-height: 44px !important;
        padding: 11px 10px !important;
        font-size: 0.92rem !important;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-grid--chapters {
        grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    }
}

/* Closed triggers: one compact control, the value stronger than its label. */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-dropdown .custom-dropdown-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: 999px !important;
    padding: 0 12px 0 14px !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-dropdown .custom-dropdown-arrow {
    display: inline-flex;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-dropdown.is-open .custom-dropdown-arrow {
    transform: rotate(180deg);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-dropdown .custom-dropdown-btn:focus-visible {
    outline: 2px solid var(--kv-focus) !important;
    outline-offset: 2px !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel.is-open:focus {
    outline: none !important;
}

@media (max-width: 768px) {
    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel .custom-dropdown-item.kvb-nav-item--num {
        padding: 11px 0 !important;
        text-overflow: clip !important;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-grid--chapters {
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    }
}

/* Narrowest phones: keep every book name on one line. */
@media (max-width: 360px) {
    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel.is-open {
        padding: 14px 10px 14px !important;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-panel .custom-dropdown-item.kvb-nav-item:not(.kvb-nav-item--num) {
        padding: 10px 6px !important;
        font-size: 0.9rem !important;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-grid--books {
        column-gap: 2px;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-nav-heading {
        padding: 0 6px;
    }
}

/* ==========================================================================
   Version selector panel (all four themes)
   English on top, International below — each a two-column grid, in the
   Book navigator's language (like its narrow, stacked canon): tracked gold
   group labels, compact two-line items (abbreviation or language over the
   full name), a faint tonal surface + gold edge for the current version.
   Markup: createVersionSelector() in study/vs.js (panel portaled to <body>,
   positioned there with fixed coordinates).
   ========================================================================== */
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .version-dropdown-menu.kvb-version-panel:not(.hidden) {
    position: fixed !important;
    z-index: 10010 !important;
    display: block !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 14px 8px 8px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 14px !important;
    background: var(--kv-surface-ref, var(--kv-surface)) !important;
    background-image: none !important;
    border: 1px solid var(--kv-ref-border, var(--kv-border-strong)) !important;
    box-shadow: 0 14px 38px rgba(55, 40, 18, 0.14) !important;
    color: var(--kv-text-body) !important;
    -webkit-text-fill-color: currentColor;
    animation: kvbVersionIn 0.14s ease-out;
}

@keyframes kvbVersionIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel.kvb-version-panel--up:not(.hidden) {
    animation-name: kvbVersionInUp;
}

@keyframes kvbVersionInUp {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-cols {
    display: block;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-group {
    min-width: 0;
    padding: 0 10px;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-group--intl {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--kv-gold-muted);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: 2px;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .version-option.kvb-version-item,
html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .version-option.kvb-version-foot-btn {
    -webkit-appearance: none;
    appearance: none;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    text-align: left !important;
    color: var(--kv-text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-code {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--kv-text-primary);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-name {
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--kv-text-secondary);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .version-option:not(.disabled):hover {
    background: var(--kv-row-hover) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .version-option:focus-visible {
    outline: 2px solid var(--kv-focus) !important;
    outline-offset: -2px !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .version-option.selected {
    background: var(--kv-selected-bg) !important;
    box-shadow: inset 3px 0 0 var(--kv-gold), inset 0 0 0 1px var(--kv-gold-muted) !important;
    font-weight: inherit !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-check {
    flex: 0 0 auto;
    color: var(--kv-gold);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .version-option.disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-foot {
    margin: 10px 10px 0;
    padding-top: 8px;
    border-top: 1px solid var(--kv-border);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .version-option.kvb-version-foot-btn {
    justify-content: flex-start !important;
    min-height: 40px;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--kv-text-primary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-foot-hint {
    margin-right: auto;
    font-size: 0.75rem;
    font-weight: 450;
    color: var(--kv-text-muted);
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-instruction {
    margin: 0 0 12px !important;
    padding: 0 10px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 0.8rem !important;
    font-style: normal !important;
    text-align: left !important;
    color: var(--kv-text-secondary) !important;
}

html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .selection-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--kv-gold) !important;
    color: var(--kv-surface) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .version-dropdown-menu.kvb-version-panel:not(.hidden) {
        padding: 14px 4px 6px !important;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-group {
        padding: 0 6px;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-heading {
        padding: 0 8px;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .version-option.kvb-version-item {
        min-height: 52px;
        padding: 9px 10px !important;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-list {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 3px;
    }

    html:not(#_#_):not(.kv-w):not(.kv-x):not(.kv-y) body .kvb-version-panel .kvb-version-name {
        font-size: 0.82rem;
    }
}