/* ================================================================
   Daily page theme fixes (loaded after daily.styles.css)

   1. Standard light mode (html.parchment-off) used the Study page's blue
      theme for the page shell but kept parchment surfaces on the devotion
      tabs, source picker, font controls, verse quotes and Morning/Evening
      cards. Re-skin those in the Study light palette.
   2. Dark modes: tabs and the source dropdown used off-theme surfaces
      (Dark A: navy tabs + cool-grey dropdown + bright-blue selected source
      on a warm gold theme; Dark B: neutral-grey dropdown on navy).
   Parchment mode is untouched.
   ================================================================ */

html.parchment-off:not(.dark-mode) {
    --daily-light-surface: #FFFFFF;
    --daily-light-tint: #EEF5FD;
    --daily-light-border: #D6E6F7;
    --daily-light-blue: #1E40AF;
    --daily-light-blue-ink: #1E3A8A;
    --daily-light-text: #1F2937;
    --daily-light-muted: #475569;
}

/* ---- Light: devotion tabs (Daily / Topic / Interactive) ------------ */
html.parchment-off:not(.dark-mode) body .devotion-tabs {
    background: var(--daily-light-surface) !important;
    border-color: var(--daily-light-border) !important;
    box-shadow: 0 6px 18px rgba(30, 64, 175, 0.06) !important;
}

html.parchment-off:not(.dark-mode) body .devotion-tab-btn:not(.active) {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--daily-light-muted) !important;
    box-shadow: none !important;
}

html.parchment-off:not(.dark-mode) body .devotion-tab-btn:not(.active):hover {
    background: var(--daily-light-tint) !important;
    color: var(--daily-light-blue-ink) !important;
}

/* ---- Light: source picker (tabs panel, dropdown toggle, menu) ------ */
html.parchment-off:not(.dark-mode) body :is(.daily-source-tabs, .topical-section-tabs) {
    background: var(--daily-light-tint) !important;
    border-color: var(--daily-light-border) !important;
    color: var(--daily-light-text) !important;
    box-shadow: none !important;
}

html.parchment-off:not(.dark-mode) body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle {
    background: var(--daily-light-surface) !important;
    border-color: var(--daily-light-border) !important;
    color: var(--daily-light-blue-ink) !important;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.06) !important;
}

html.parchment-off:not(.dark-mode) body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-label {
    color: var(--daily-light-blue-ink) !important;
}

html.parchment-off:not(.dark-mode) body #daily-tab-panel .daily-source-tabs .topical-section-menu {
    background: var(--daily-light-surface) !important;
    border-color: var(--daily-light-border) !important;
    color: var(--daily-light-text) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
}

html.parchment-off:not(.dark-mode) body #daily-tab-panel .daily-source-tabs .topical-section-tab:not(.active) {
    background: transparent !important;
    color: var(--daily-light-blue-ink) !important;
}

html.parchment-off:not(.dark-mode) body #daily-tab-panel .daily-source-tabs .topical-section-tab:not(.active):hover {
    background: var(--daily-light-tint) !important;
}

html.parchment-off:not(.dark-mode) body #daily-tab-panel .daily-source-tabs .topical-section-tab.active {
    background: linear-gradient(180deg, #2B55C9, var(--daily-light-blue)) !important;
    border-color: rgba(30, 64, 175, 0.55) !important;
    color: #FFFFFF !important;
}

/* ---- Light: font / Save PNG control bar ---------------------------- */
html.parchment-off:not(.dark-mode) body #daily-tab-panel .daily-source-content .view-toggle-container {
    background: var(--daily-light-surface) !important;
    border-color: var(--daily-light-border) !important;
    color: var(--daily-light-blue-ink) !important;
    box-shadow: none !important;
}

html.parchment-off:not(.dark-mode) body #daily-tab-panel .daily-source-content .view-toggle-container .font-control-btn {
    background: var(--daily-light-tint) !important;
    border-color: var(--daily-light-border) !important;
    color: var(--daily-light-blue-ink) !important;
}

/* ---- Light: Morning / Evening cards and verse quotes --------------- */
html.parchment-off:not(.dark-mode) body #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel, #streams-source-panel) .devotion-column,
html.parchment-off:not(.dark-mode) body .devotion-column:is(.morning-card, .evening-card) {
    background: var(--daily-light-surface) !important;
    border-color: var(--daily-light-border) !important;
    box-shadow: 0 10px 28px rgba(30, 64, 175, 0.06) !important;
}

html.parchment-off:not(.dark-mode) body .theme-verse-p {
    color: var(--daily-light-text) !important;
}

/* ---- Dark A (warm charcoal + gold) --------------------------------- */
html.dark-mode:not(.dark-mode-b) body .devotion-tab-btn:not(.active) {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(197, 160, 89, 0.16) !important;
    color: #CFC6B8 !important;
}

html.dark-mode:not(.dark-mode-b) body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle,
html.dark-mode:not(.dark-mode-b) body #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container {
    background: linear-gradient(180deg, #2A2722 0%, #221F1B 100%) !important;
    border-color: rgba(197, 160, 89, 0.24) !important;
    color: #ECE1CF !important;
}

html.dark-mode:not(.dark-mode-b) body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-label {
    color: #ECE1CF !important;
}

html.dark-mode:not(.dark-mode-b) body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-icon {
    background: rgba(197, 160, 89, 0.14) !important;
    color: #F0D9AE !important;
}

html.dark-mode:not(.dark-mode-b) body #daily-tab-panel .daily-source-tabs .topical-section-menu {
    background: #24211D !important;
    border-color: rgba(197, 160, 89, 0.24) !important;
    color: #ECE1CF !important;
}

html.dark-mode:not(.dark-mode-b) body #daily-tab-panel .daily-source-tabs .topical-section-tab:not(.active) {
    color: #DCCFBA !important;
}

html.dark-mode:not(.dark-mode-b) body #daily-tab-panel .daily-source-tabs .topical-section-tab.active {
    background: linear-gradient(180deg, rgba(92, 76, 49, 0.98), rgba(70, 57, 37, 0.98)) !important;
    border-color: rgba(214, 178, 119, 0.5) !important;
    color: #F0D9AE !important;
}

/* ---- Dark B (navy + blue) ------------------------------------------ */
html.dark-mode.dark-mode-b body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle,
html.dark-mode.dark-mode-b body #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container {
    background: linear-gradient(180deg, #1B2444 0%, #151C36 100%) !important;
    border-color: rgba(101, 146, 215, 0.30) !important;
    color: #E6EAF4 !important;
}

html.dark-mode.dark-mode-b body #daily-tab-panel .daily-source-tabs .topical-section-menu {
    background: #141B33 !important;
    border-color: rgba(101, 146, 215, 0.30) !important;
    color: #D8DBE7 !important;
}

html.dark-mode.dark-mode-b body #daily-tab-panel .daily-source-tabs .topical-section-tab.active {
    background: linear-gradient(180deg, #4F7FDD, #3158B8) !important;
    color: #FFFFFF !important;
}

/* ================================================================
   LIGHT MODE — whole Daily section in the Study light palette
   Text #181818, headings navy, accents/labels/links blue, hairlines soft
   blue, cards white/pale blue. Covers every Daily source, Topic Devotion
   (list + topic detail), and the Interactive tab's accents.

   Several parchment rules carry two IDs (e.g. #daily-tab-panel
   :is(#morning-evening-source-panel, …) .devotion-column::after), so
   these selectors use `body:is(body, #kvb-light#kvb-light)` — it matches
   <body> as usual but counts as two IDs, letting the light palette win
   without listing every panel ID.
   ================================================================ */
html.parchment-off:not(.dark-mode) {
    --daily-light-heading: #16213F;
    --daily-light-body: #181818;
    --daily-light-line: rgba(30, 64, 175, 0.16);
    --daily-light-line-strong: rgba(30, 64, 175, 0.32);
}

/* ---- Text ---------------------------------------------------------- */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.devotion-text, .devotion-text p, .prayer-para, .streams-lead, .topical-detail-paragraph, .topical-reading-section-description, .devotion-column p:not(.theme-verse-p):not(.liturgical-title):not(.liturgical-ref)) {
    color: var(--daily-light-body) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.theme-verse-p, .topical-reference-copy, .liturgical-verse, .streams-scripture-quote, .streams-scripture span, .streams-poem, .streams-poem span) {
    color: var(--daily-light-text) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.devotion-header, .topical-detail-title, .topical-topic-title-link, .imitation-chapter-title) {
    color: var(--daily-light-heading) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.topical-topic-button, .topical-reference-link, .streams-scripture-reference, .topical-reading-section-kicker, .imitation-chapter-footer, .topical-mobile-action-link) {
    color: var(--daily-light-blue) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.topical-detail-summary, .topical-transition-quote) {
    color: var(--daily-light-muted) !important;
}

/* ---- Cards & surfaces ---------------------------------------------- */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.devotion-column, .topical-topic-detail) {
    background:
        radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.98), transparent 34%),
        radial-gradient(circle at 18% 18%, rgba(219, 234, 254, 0.32), transparent 42%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FAFE 100%) !important;
    border-color: rgba(30, 64, 175, 0.12) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(30, 64, 175, 0.05),
        0 24px 58px rgba(15, 35, 90, 0.08),
        0 6px 16px rgba(15, 35, 90, 0.04) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.topical-devotion-panel, .topical-topic-card, .topical-topic-detail, .topical-reference-card, .topical-reading-intro, .topical-reading-section) {
    background: var(--daily-light-surface) !important;
    border-color: var(--daily-light-border) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-hero {
    background: radial-gradient(ellipse 70% 60% at 50% 38%, rgba(79, 70, 229, 0.045), transparent 70%), #FEFDFB !important;
    border: 1px solid rgba(30, 41, 59, 0.08) !important;
    border-radius: 30px !important;
    padding: 30px clamp(32px, 5vw, 72px) 26px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

/* Eyebrow: quiet section marker, not a CTA */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-category {
    background: rgba(99, 102, 241, 0.08) !important;
    border: 1px solid rgba(99, 102, 241, 0.20) !important;
    color: #4f46e5 !important;
    -webkit-text-fill-color: #4f46e5 !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.13em !important;
    padding: 5px 13px !important;
    box-shadow: none !important;
}

/* Title: tighter, book-chapter-like tracking instead of wide uppercase spacing */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-title {
    letter-spacing: -0.01em !important;
    line-height: 1.0 !important;
}

/* The title already carries its own small line+dot ornament right beneath it
   (.topical-detail-title::after, below) — that serves as the hero's divider.
   This pseudo-element, which used to render the wide glow band at the bottom of
   hero-copy (after the subtitle, far from the title), is retired to avoid a
   second, redundant divider. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-hero-copy::after {
    display: none !important;
}

/* Utility row: quieter, smaller controls; Back reads as a text link, Download as a soft utility pill */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-back-button,
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-download-button {
    min-height: 36px !important;
    padding: 8px 15px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(30, 41, 59, 0.12) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    color: #334155 !important;
    transform: none !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-back-button:hover,
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-download-button:hover {
    border-color: rgba(30, 41, 59, 0.24) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transform: none !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-back-button {
    background: transparent !important;
    border-color: transparent !important;
    padding: 8px 2px !important;
    color: #475569 !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-back-button:hover {
    color: #1e293b !important;
    background: transparent !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.topical-topic-icon, .topical-section-menu-icon) {
    background: var(--daily-light-tint) !important;
    border-color: var(--daily-light-border) !important;
    color: var(--daily-light-blue) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.topical-topic-button, .topical-detail-category, .topical-reading-section-kicker) {
    background: var(--daily-light-tint) !important;
    border-color: var(--daily-light-border) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.theme-verse-p, .topical-reference-copy, .streams-scripture) {
    background: linear-gradient(180deg, #F8FBFF 0%, #EFF5FD 100%) !important;
    border-color: rgba(30, 64, 175, 0.16) !important;
    box-shadow:
        inset 2px 0 0 rgba(30, 64, 175, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.topical-mobile-action-link, .topical-nav-button) {
    border-color: var(--daily-light-border) !important;
}

/* ---- Hairlines / rules / section heads ----------------------------- */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.imitation-chapter-footer, .imitation-chapter-title, .topical-reading-section-head, .topical-section-menu) {
    border-color: var(--daily-light-line) !important;
}

/* Decorative quote marks on verse blocks */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.theme-verse-p, .topical-reference-copy, .streams-scripture)::before {
    color: rgba(30, 64, 175, 0.45) !important;
}

/* ---- Tabs: active glow + Topic/Interactive active states ------------ */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.devotion-tab-btn, .topical-section-tab).active::after {
    background: linear-gradient(90deg, transparent, rgba(191, 219, 254, 0.95), transparent) !important;
    box-shadow: 0 0 12px rgba(147, 197, 253, 0.45) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-tab-btn.active {
    background: linear-gradient(180deg, #2F57C8 0%, #183BA6 100%) !important;
    border-color: rgba(30, 64, 175, 0.55) !important;
    color: #FFFFFF !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-section-tab:not(.active) {
    border-color: var(--daily-light-border) !important;
    color: var(--daily-light-blue-ink) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-section-tab.active {
    background: linear-gradient(180deg, #2B55C9, var(--daily-light-blue)) !important;
    border-color: rgba(30, 64, 175, 0.55) !important;
    color: #FFFFFF !important;
}

/* ================================================================
   Interactive tab: Light mode page is IDENTICAL to Parchment mode.
   When the interactive tab is active, the page shell, devotion tabs,
   floating section selector, and visuals dashboard retain the full,
   original parchment mode theme (warm ivory backdrop, gold active tab,
   and celestial navy + gold visuals immersion).
   ================================================================ */
html.parchment-off:not(.dark-mode) body:has(#visuals-tab-panel:not(.hidden)),
html.parchment-off:not(.dark-mode) body.visuals-active {
    background-color: #fbfaf7 !important;
    background-image:
        radial-gradient(circle at 48% 0px, rgba(255, 255, 255, 0.86), rgba(0, 0, 0, 0) 30%),
        radial-gradient(circle at 18% 34%, rgba(220, 190, 132, 0.16), rgba(0, 0, 0, 0) 28%),
        radial-gradient(circle at 82% 26%, rgba(235, 210, 156, 0.13), rgba(0, 0, 0, 0) 26%),
        linear-gradient(rgb(248, 243, 233) 0px, rgb(245, 239, 228) 46%, rgb(247, 241, 232) 100%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.018'/%3E%3C/svg%3E") !important;
}

html.parchment-off:not(.dark-mode) body:has(#visuals-tab-panel:not(.hidden)) #app-view,
html.parchment-off:not(.dark-mode) body.visuals-active #app-view {
    background: transparent !important;
}

/* Tabs bar in parchment finish when interactive tab is active */
html.parchment-off:not(.dark-mode) body:has(#visuals-tab-panel:not(.hidden)) .devotion-tabs,
html.parchment-off:not(.dark-mode) body.visuals-active .devotion-tabs {
    background: rgba(246, 243, 235, 0.72) !important;
    border: 1px solid rgba(168, 138, 94, 0.18) !important;
    box-shadow: 0 16px 36px rgba(120, 96, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Active tab button becomes the parchment gold active button */
html.parchment-off:not(.dark-mode) body:has(#visuals-tab-panel:not(.hidden)) #visuals-tab-button.active,
html.parchment-off:not(.dark-mode) body.visuals-active #visuals-tab-button.active {
    background: linear-gradient(rgb(214, 169, 76) 0px, rgb(128, 95, 24) 100%) !important;
    color: #FFFFFF !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    box-shadow: rgba(212, 175, 55, 0.34) 0px 10px 26px 0px, rgba(128, 95, 24, 0.32) 0px 22px 48px 0px, rgba(255, 255, 255, 0.24) 0px 1px 0px 0px inset !important;
}

/* Inactive tabs when interactive tab is active */
html.parchment-off:not(.dark-mode) body:has(#visuals-tab-panel:not(.hidden)) .devotion-tab-btn:not(.active),
html.parchment-off:not(.dark-mode) body.visuals-active .devotion-tab-btn:not(.active) {
    background: transparent !important;
    color: #4a3e2e !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.parchment-off:not(.dark-mode) body:has(#visuals-tab-panel:not(.hidden)) .devotion-tab-btn:not(.active):hover,
html.parchment-off:not(.dark-mode) body.visuals-active .devotion-tab-btn:not(.active):hover {
    background: rgba(220, 190, 132, 0.16) !important;
    color: #1a1205 !important;
}

/* Imitation of Christ footer: its parchment rule carries three IDs. */
html.parchment-off:not(.dark-mode) body #daily-tab-panel #imitation-source-panel #imitation-content .imitation-chapter-footer {
    color: var(--daily-light-blue) !important;
    border-color: var(--daily-light-line) !important;
}

html.parchment-off:not(.dark-mode) body #daily-tab-panel #imitation-source-panel #imitation-content .imitation-chapter-title::after {
    background-image: linear-gradient(90deg, transparent, var(--daily-light-line-strong), transparent) !important;
}


/* ---- Light: premium finish (parity with Parchment's layered depth) --
   Same structure as Parchment — sheen highlights, inset top light,
   two-layer soft shadow, ornaments — recoloured to the Study blue. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-tabs {
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(30, 64, 175, 0.10) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 12px 30px rgba(15, 35, 90, 0.06) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-tab-btn:not(.active) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 246, 253, 0.72)) !important;
    border-color: rgba(30, 64, 175, 0.10) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 14px 30px rgba(15, 35, 90, 0.06) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.daily-source-tabs, .topical-section-tabs) {
    background:
        radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.92), transparent 56%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(236, 243, 252, 0.78)) !important;
    border-color: rgba(30, 64, 175, 0.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 18px 42px rgba(19, 37, 89, 0.08),
        0 30px 62px rgba(19, 37, 89, 0.05) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) #daily-tab-panel :is(.daily-source-tabs .daily-source-menu-toggle, .daily-source-content .view-toggle-container) {
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FC 100%) !important;
    border-color: rgba(30, 64, 175, 0.16) !important;
    box-shadow:
        0 12px 32px rgba(15, 35, 90, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.topical-topic-card, .topical-reference-card, .topical-reading-section) {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%) !important;
    border-color: rgba(30, 64, 175, 0.12) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 14px 34px rgba(15, 35, 90, 0.06) !important;
}

/* Card sheen: keep the highlight, drop the warm paper grain. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-column::before {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 34%) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.devotion-column, .imitation-chapter-title)::after {
    background-image: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.18), rgba(30, 64, 175, 0.32), rgba(30, 64, 175, 0.18), transparent) !important;
}

/* ✝ medallion above each devotion heading */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-header-row::before {
    background-image: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.99), rgba(245, 249, 255, 0.95) 58%, transparent 60%) !important;
    color: #2B55C9 !important;
}

/* Heading flourish (inline SVG in gold): recolour, don't replace. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-header-row::after {
    filter: hue-rotate(185deg) saturate(1.5) brightness(0.8);
}

/* Date ornament: hairline + small diamond */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-date-inline::after {
    background-image:
        linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.42), transparent),
        linear-gradient(45deg, transparent 35%, rgba(30, 64, 175, 0.72) 35%, rgba(30, 64, 175, 0.72) 65%, transparent 65%) !important;
}

/* Topic detail page ornaments */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-hero::after {
    /* Redundant with the new thin divider under the title — remove the bottom glow band entirely */
    display: none !important;
}

/* Superseded by the thin centered divider rule above — this legacy glow is retired. */

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-title::after {
    width: min(240px, 60%) !important;
    background-image:
        linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.4), transparent),
        radial-gradient(circle, rgba(43, 85, 201, 0.95) 0, rgba(43, 85, 201, 0.95) 3px, transparent 4px) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-head::after {
    background-image: linear-gradient(90deg, rgba(30, 64, 175, 0.55), rgba(30, 64, 175, 0.08)) !important;
}

/* Phone/topic-page variants of the same ornaments */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-section-menu::after {
    background-image: linear-gradient(90deg, rgba(30, 64, 175, 0), rgba(30, 64, 175, 0.7), rgba(30, 64, 175, 0)) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-hero::before {
    background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.55) 44%, rgba(255, 255, 255, 0) 78%), radial-gradient(circle at 50% 0, rgba(219, 234, 254, 0.35), transparent 60%) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-devotion-panel::before {
    background-image: radial-gradient(circle at 50% 0, rgba(219, 234, 254, 0.42), transparent 60%) !important;
}

/* Drop caps (first letter of each devotion / reading) — replace gold gradient/text-fill
   with rich Study navy/ink (#16213F / #1E40AF). */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(
    .devotion-header-group + p:not(.theme-verse-p),
    .devotion-text > p:not(.theme-verse-p):first-of-type,
    .topical-reading-intro .topical-detail-paragraph:first-child,
    .devotion-column p:not(.theme-verse-p):first-of-type,
    #morning-evening-source-panel .devotion-text > p:not(.theme-verse-p):first-of-type,
    #daily-light-source-panel .devotion-text > p:not(.theme-verse-p):first-of-type,
    #streams-content .streams-scripture + .streams-body .streams-lead,
    #daily-tab-panel #imitation-source-panel #imitation-content > p:first-of-type
)::first-letter,
html:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(
    .devotion-header-group + p:not(.theme-verse-p),
    .devotion-text > p:not(.theme-verse-p):first-of-type,
    .topical-reading-intro .topical-detail-paragraph:first-child
)::first-letter {
    float: left !important;
    font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif) !important;
    font-size: 4.6em !important;
    font-weight: 600 !important;
    line-height: 0.76 !important;
    margin: 0.08em 0.12em 0 0 !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #16213F !important;
    -webkit-text-fill-color: #16213F !important;
    text-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Bottom citations & verse reference links (Screen 1 & all Daily Light / topical readings) */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(
    #daily-tab-panel .reference-footer,
    #daily-tab-panel .reference-footer a,
    #daily-tab-panel .liturgical-ref a,
    .devotion-column .reference-footer a,
    .devotion-text .verse-ref-link,
    .verse-ref-link
) {
    color: #1E40AF !important;
    -webkit-text-fill-color: #1E40AF !important;
    font-style: italic !important;
    font-weight: 500 !important;
    opacity: 0.92 !important;
    text-decoration: none !important;
    border-bottom: 1.5px dotted rgba(30, 64, 175, 0.35) !important;
    transition: color 0.18s ease, border-bottom-color 0.18s ease, opacity 0.18s ease !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(
    #daily-tab-panel .reference-footer a:hover,
    #daily-tab-panel .liturgical-ref a:hover,
    .devotion-column .reference-footer a:hover,
    .devotion-text .verse-ref-link:hover,
    .verse-ref-link:hover
) {
    color: #1D4ED8 !important;
    -webkit-text-fill-color: #1D4ED8 !important;
    border-bottom: 1.5px solid #1D4ED8 !important;
    opacity: 1 !important;
    background-color: rgba(30, 64, 175, 0.05) !important;
    border-radius: 2px !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .reference-footer {
    color: rgba(30, 64, 175, 0.4) !important;
}

/* Light mode floating nav arrows (< and >) */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .nav-arrow {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(30, 64, 175, 0.16) !important;
    color: #1E40AF !important;
    box-shadow: 0 10px 28px rgba(15, 35, 90, 0.08), inset 0 1px 0 #FFFFFF !important;
    opacity: 0.75 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .nav-arrow:hover {
    background: #FFFFFF !important;
    border-color: rgba(30, 64, 175, 0.38) !important;
    color: #1D4ED8 !important;
    box-shadow: 0 16px 36px rgba(15, 35, 90, 0.14), inset 0 1px 0 #FFFFFF !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.06) !important;
}

/* ================================================================
   LIGHT — premium layering
   The page was pure white and cards were near-white blue tints (~1%
   apart), so nothing separated and the page read flat. Parchment's depth
   comes from a toned page with distinct, shadowed cards; mirror that:
   a soft porcelain canvas, pure-white cards with a crisp hairline and a
   two-layer shadow, and pale-blue tints kept for accents (verse quotes).
   ================================================================ */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) main.content-area {
    background:
        radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.9), transparent 42%),
        linear-gradient(180deg, #F4F7FB 0%, #EDF1F7 100%) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.devotion-column, .topical-topic-detail, .topical-topic-card, .topical-reference-card, .topical-reading-section, .topical-reading-intro, .prayer-card) {
    background:
        radial-gradient(circle at 50% -12%, rgba(255, 255, 255, 1), transparent 38%),
        linear-gradient(180deg, #FFFFFF 0%, #FDFEFF 100%) !important;
    border: 1px solid rgba(15, 35, 90, 0.08) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 14px 36px rgba(15, 35, 90, 0.07),
        0 34px 70px rgba(15, 35, 90, 0.05) !important;
}

/* Cards nested inside the topic detail card sit one step down. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-topic-detail :is(.topical-reference-card, .topical-reading-section, .topical-reading-intro) {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 22px rgba(15, 35, 90, 0.05) !important;
}

/* Topic list: the panel becomes a quiet frame so the white cards lead. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-devotion-panel {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(15, 35, 90, 0.06) !important;
    box-shadow: none !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-topic-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 2px 4px rgba(15, 23, 42, 0.05),
        0 20px 44px rgba(15, 35, 90, 0.10) !important;
    border-color: rgba(30, 64, 175, 0.18) !important;
}

/* Verse quotes: a clearly tinted accent block on the white card. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.theme-verse-p, .topical-reference-copy, .streams-scripture) {
    background: linear-gradient(180deg, #F3F7FD 0%, #EAF1FB 100%) !important;
    border-color: rgba(30, 64, 175, 0.14) !important;
}

/* Tab bar and source picker float on the canvas like cards. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-tabs {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 35, 90, 0.08) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 30px rgba(15, 35, 90, 0.07) !important;
}

/* ================================================================
   Interactive tab (all themes): sections 01-04 repeated their heading.
   Each slide already opens with the large section header (SECTION 01 /
   WHO GOD IS / tagline); the chapter header right below restated the same
   eyebrow, title and tagline. Keep only its unique description line.
   ================================================================ */
#visuals-dashboard .v-s03-chapter-header > :is(.v-s03-chapter-eyebrow, .v-s03-chapter-title, .v-s03-chapter-sub) {
    display: none !important;
}

#visuals-dashboard .v-s03-chapter-header .v-s03-chapter-desc {
    margin-top: 0 !important;
}

/* ================================================================
   DARK MODE COMPREHENSIVE FIXES & POLISH (Screen 6)
   - Fix unreadable white/cream tab buttons
   - Eliminate white background artifact behind collection toggle
   - Sleek, premium dark card surfaces matching Study page
   ================================================================ */
html.dark-mode body .devotion-tabs,
html.dark-mode body:is(body, #kvb-light#kvb-light) .devotion-tabs {
    background: rgba(24, 24, 27, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode body .devotion-tab-btn,
html.dark-mode body .devotion-tab-btn:not(.active),
html.dark-mode body:is(body, #kvb-light#kvb-light) .devotion-tab-btn:not(.active),
html.dark-mode:not(.dark-mode-b) body .devotion-tab-btn:not(.active),
html.dark-mode.dark-mode-b body .devotion-tab-btn:not(.active) {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: rgba(228, 228, 231, 0.72) !important;
    -webkit-text-fill-color: rgba(228, 228, 231, 0.72) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.dark-mode body .devotion-tab-btn:hover:not(.active),
html.dark-mode body:is(body, #kvb-light#kvb-light) .devotion-tab-btn:hover:not(.active),
html.dark-mode:not(.dark-mode-b) body .devotion-tab-btn:hover:not(.active),
html.dark-mode.dark-mode-b body .devotion-tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

html.dark-mode body .devotion-tab-btn.active,
html.dark-mode body:is(body, #kvb-light#kvb-light) .devotion-tab-btn.active,
html.dark-mode:not(.dark-mode-b) body .devotion-tab-btn.active,
html.dark-mode.dark-mode-b body .devotion-tab-btn.active {
    background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%) !important;
    border: 1px solid rgba(96, 165, 250, 0.45) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

html.dark-mode body .devotion-tab-btn.active::after {
    background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.95), transparent) !important;
    box-shadow: 0 0 14px rgba(147, 197, 253, 0.5) !important;
}

/* Eliminate white background on .daily-source-tabs / .topical-section-tabs in dark mode */
html.dark-mode body .daily-source-tabs,
html.dark-mode body:is(body, #kvb-light#kvb-light) .daily-source-tabs,
html.dark-mode body .topical-section-tabs,
html.dark-mode body:is(body, #kvb-light#kvb-light) .topical-section-tabs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Dark mode control bar (Save PNG, A-, A+, Split/Stacked) & collection dropdown toggle */
html.dark-mode body #daily-tab-panel .daily-source-content .view-toggle-container,
html.dark-mode body .view-toggle-container {
    background: rgba(32, 32, 36, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #E4E4E7 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode body #daily-tab-panel .daily-source-content .view-toggle-container .font-control-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #E4E4E7 !important;
}

html.dark-mode body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle {
    background: rgba(32, 32, 36, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #E4E4E7 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-label {
    color: #E4E4E7 !important;
    -webkit-text-fill-color: #E4E4E7 !important;
}

html.dark-mode body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #93C5FD !important;
}

/* Dark mode devotion cards: sleek zinc surfaces matching Study page */
html.dark-mode:not(.dark-mode-b) body .devotion-column,
html.dark-mode:not(.dark-mode-b) body #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel, #streams-source-panel, #imitation-source-panel) .devotion-column {
    background:
        radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.04), transparent 38%),
        linear-gradient(180deg, #242428 0%, #1A1A1D 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #E4E4E7 !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode:not(.dark-mode-b) body .devotion-column .devotion-header {
    color: #F4F4F5 !important;
    -webkit-text-fill-color: #F4F4F5 !important;
}

html.dark-mode:not(.dark-mode-b) body .devotion-column :is(.devotion-reading-subhead, .devotion-date-inline, .liturgical-title) {
    color: #93C5FD !important;
    -webkit-text-fill-color: #93C5FD !important;
}

html.dark-mode:not(.dark-mode-b) body .devotion-column .theme-verse-p {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid #3B82F6 !important;
    color: #E2E8F0 !important;
}

html.dark-mode:not(.dark-mode-b) body .devotion-column .theme-verse-p::before {
    color: rgba(147, 197, 253, 0.5) !important;
}

/* Dark mode drop caps: crisp silver-white */
html.dark-mode:not(.dark-mode-b) body :is(
    .devotion-header-group + p:not(.theme-verse-p),
    .devotion-text > p:not(.theme-verse-p):first-of-type,
    .topical-reading-intro .topical-detail-paragraph:first-child,
    .devotion-column p:first-of-type
)::first-letter {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #F4F4F5 !important;
    -webkit-text-fill-color: #F4F4F5 !important;
    text-shadow: none !important;
}

/* Dark mode nav arrows */
html.dark-mode:not(.dark-mode-b) .nav-arrow {
    color: #93C5FD !important;
    background: rgba(32, 32, 36, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode:not(.dark-mode-b) .nav-arrow:hover {
    color: #FFFFFF !important;
    background: rgba(45, 45, 52, 0.96) !important;
    border-color: rgba(147, 197, 253, 0.35) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   Topical Devotion - 4-Theme Styling: Light, Parchment, Dark 1, Dark 2
   ========================================================================== */

/* ---- Shared Layout & Geometry for Atlas Timeline & Card Architecture ---- */
.topical-detail-body.is-timeline-view .topical-reference-list {
    margin-left: 0 !important;
    padding-left: 0 !important;
    gap: 18px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.topical-detail-body.is-timeline-view .topical-reference-list::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    bottom: 8px !important;
    left: -16px !important;
    width: 1px !important;
}

.topical-reference-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 18px 22px 20px !important;
    border-radius: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;
}

.topical-reference-card:hover {
    transform: translateY(-1px) !important;
}

.topical-detail-body.is-timeline-view .topical-reference-card::before {
    content: '' !important;
    position: absolute !important;
    top: 24px !important;
    left: -20px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    border: 0 !important;
    z-index: 5 !important;
}

.topical-reference-link {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    min-height: 18px !important;
    padding: 2px 9px 2px !important;
    border-radius: 999px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: calc(0.66rem * var(--bible-font-scale, 1)) !important;
    font-weight: 600 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

.topical-detail-body:not(.is-timeline-view) .topical-reference-copy,
:is(html, html.parchment-off, html.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body:not(.is-timeline-view) .topical-reference-card .topical-reference-copy {
    font-family: var(--devotion-reading-font-family, 'EB Garamond', 'Merriweather', Georgia, serif) !important;
    font-size: calc(1.05rem * var(--bible-font-scale, 1)) !important;
    line-height: 1.66 !important;
    letter-spacing: 0 !important;
    font-style: italic !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Suppress redundant quote glyphs and decorative arrows across all modes */
:is(html, html.parchment-off, html.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.topical-reference-card::after, .topical-reference-copy::before, .topical-reference-copy::after) {
    display: none !important;
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Constrain scripture line measure without touching font-size */
.topical-detail-body.is-timeline-view .topical-reference-copy {
    max-width: 68ch !important;
}

/* ---- 1. LIGHT MODE (Clean / Standard Light) ---- */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section {
    background: #FFFFFF !important;
    border: 1px solid rgba(100, 92, 76, 0.12) !important;
    border-radius: 20px !important;
    padding: 32px 36px 36px !important;
    box-shadow: 0 1px 2px rgba(20, 20, 30, 0.03) !important;
    margin-bottom: 30px !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-head {
    border-bottom: 1px solid rgba(100, 92, 76, 0.14) !important;
    padding-bottom: 18px !important;
    margin-bottom: 28px !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-head::after {
    width: min(220px, 30%) !important;
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.55), rgba(79, 70, 229, 0)) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-head {
    padding-bottom: 12px !important;
    margin-bottom: 24px !important;
    position: relative !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-kicker {
    display: inline-block !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: calc(0.68rem * var(--bible-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #4f46e5 !important;
    background: rgba(99, 102, 241, 0.08) !important;
    border: 1px solid rgba(99, 102, 241, 0.22) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    margin-bottom: 12px !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
    font-size: clamp(2.55rem, 4vw, 4.5rem) !important;
    line-height: 1.04 !important;
    text-transform: none !important;
    color: var(--topical-reference-blue) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
    margin: 0 !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-description {
    font-family: 'Crimson Pro', 'EB Garamond', Georgia, serif !important;
    font-size: calc(1.15rem * var(--bible-font-scale, 1)) !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    margin-bottom: 0 !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-list::before {
    background: linear-gradient(180deg, transparent, rgba(169, 132, 47, 0.30), transparent) !important;
    box-shadow: none !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card::before {
    background: #a9842f !important;
    box-shadow: 0 0 0 3px rgba(169, 132, 47, 0.14), 0 0 7px rgba(169, 132, 47, 0.20) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-card {
    background: #FEFDFB !important;
    border: 1px solid rgba(30, 41, 59, 0.08) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-card:hover {
    border-color: rgba(30, 41, 59, 0.16) !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-link {
    background: rgba(79, 70, 229, 0.06) !important;
    border: 1px solid rgba(79, 70, 229, 0.16) !important;
    box-shadow: none !important;
    color: #4338CA !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-link:hover {
    background: rgba(79, 70, 229, 0.11) !important;
    border-color: rgba(79, 70, 229, 0.28) !important;
    color: #3730A3 !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-copy {
    color: #1E293B !important;
    -webkit-text-fill-color: #1E293B !important;
}

/* ---- 2. PARCHMENT MODE (Warm Cream / Historic Parchment) ---- */
html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section {
    background: linear-gradient(180deg, #FBF8F1 0%, #F5EFE3 100%) !important;
    border: 1px solid rgba(180, 140, 80, 0.18) !important;
    border-radius: 20px !important;
    padding: 32px 36px 36px !important;
    box-shadow: 0 1px 3px rgba(90, 65, 30, 0.05) !important;
    margin-bottom: 30px !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-head::after {
    width: min(220px, 30%) !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-head {
    padding-bottom: 12px !important;
    margin-bottom: 24px !important;
    position: relative !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-kicker {
    display: inline-block !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: calc(0.68rem * var(--bible-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #8C5E14 !important;
    background: rgba(180, 125, 30, 0.10) !important;
    border: 1px solid rgba(180, 125, 30, 0.25) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    margin-bottom: 12px !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
    font-size: clamp(2.55rem, 4vw, 4.5rem) !important;
    line-height: 1.04 !important;
    text-transform: none !important;
    color: var(--topical-reference-blue) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
    margin: 0 !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-description {
    font-family: 'Crimson Pro', 'EB Garamond', Georgia, serif !important;
    font-size: calc(1.15rem * var(--bible-font-scale, 1)) !important;
    line-height: 1.55 !important;
    color: #635038 !important;
    -webkit-text-fill-color: #635038 !important;
    margin-bottom: 0 !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-list::before {
    background: linear-gradient(180deg, transparent, rgba(180, 125, 30, 0.32), transparent) !important;
    box-shadow: none !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card::before {
    background: #a3701f !important;
    box-shadow: 0 0 0 3px rgba(163, 112, 31, 0.14), 0 0 7px rgba(163, 112, 31, 0.20) !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-card {
    background: linear-gradient(180deg, #FFFDF9 0%, #F8F3E8 100%) !important;
    border: 1px solid rgba(180, 140, 80, 0.16) !important;
    box-shadow: 0 1px 3px rgba(90, 65, 30, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-card:hover {
    border-color: rgba(180, 125, 30, 0.40) !important;
    box-shadow: 0 8px 24px rgba(90, 65, 30, 0.09), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-link {
    background: rgba(180, 125, 30, 0.10) !important;
    border: 1px solid rgba(180, 125, 30, 0.26) !important;
    box-shadow: inset 0 0 0 1px rgba(180, 125, 30, 0.10) !important;
    color: #8C5E14 !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-link:hover {
    background: rgba(180, 125, 30, 0.18) !important;
    border-color: rgba(180, 125, 30, 0.48) !important;
    color: #5C3E08 !important;
}

html:not(.parchment-off):not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-copy {
    color: #2D2319 !important;
    -webkit-text-fill-color: #2D2319 !important;
}

/* ---- 3. DARK MODE 1 (Charcoal / Default Dark / Zinc) ---- */
html.dark-mode:not(.dark-mode-b) body .topical-reading-section {
    background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.05), transparent 45%), linear-gradient(180deg, #1f1f23 0%, #141416 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.14) !important;
    border-radius: 20px !important;
    padding: 32px 36px 36px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 30px !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-reading-section-head::after {
    width: min(220px, 30%) !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-reading-section-head {
    padding-bottom: 12px !important;
    margin-bottom: 24px !important;
    position: relative !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-reading-section-kicker {
    display: inline-block !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: calc(0.68rem * var(--bible-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #D4AF37 !important;
    background: rgba(212, 175, 55, 0.12) !important;
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    margin-bottom: 12px !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-reading-section-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
    font-size: clamp(2.55rem, 4vw, 4.5rem) !important;
    line-height: 1.04 !important;
    text-transform: none !important;
    color: #d6b277 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
    margin: 0 !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-reading-section-description {
    font-family: 'Crimson Pro', 'EB Garamond', Georgia, serif !important;
    font-size: calc(1.15rem * var(--bible-font-scale, 1)) !important;
    line-height: 1.55 !important;
    color: rgba(244, 244, 245, 0.78) !important;
    -webkit-text-fill-color: rgba(244, 244, 245, 0.78) !important;
    margin-bottom: 0 !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-detail-body.is-timeline-view .topical-reference-list::before {
    background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.32), transparent) !important;
    box-shadow: none !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-detail-body.is-timeline-view .topical-reference-card::before {
    background: #b8914a !important;
    box-shadow: 0 0 0 3px rgba(184, 145, 74, 0.16), 0 0 8px rgba(184, 145, 74, 0.22) !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-reference-card {
    background: radial-gradient(circle at 0% 0%, rgba(212, 175, 55, 0.05), transparent 34%), #232328 !important;
    border: 1px solid rgba(212, 175, 55, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-reference-card:hover {
    border-color: rgba(212, 175, 55, 0.35) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-reference-link {
    background: rgba(212, 175, 55, 0.09) !important;
    border: 1px solid rgba(212, 175, 55, 0.32) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.14) !important;
    color: #D4AF37 !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-reference-link:hover {
    color: #FFF9EC !important;
    border-color: rgba(255, 247, 214, 0.60) !important;
    background: rgba(212, 175, 55, 0.18) !important;
}

html.dark-mode:not(.dark-mode-b) body .topical-reference-copy {
    color: rgba(246, 241, 229, 0.88) !important;
    -webkit-text-fill-color: rgba(246, 241, 229, 0.88) !important;
}

/* ---- 4. DARK MODE 2 (Midnight Navy / Variant B) ---- */
html.dark-mode.dark-mode-b body .topical-reading-section {
    background: radial-gradient(circle at 50% 0%, rgba(218, 177, 80, 0.06), transparent 45%), linear-gradient(180deg, #0e1726 0%, #080f1a 100%) !important;
    border: 1px solid rgba(218, 177, 80, 0.16) !important;
    border-radius: 20px !important;
    padding: 32px 36px 36px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
    margin-bottom: 30px !important;
}

html.dark-mode.dark-mode-b body .topical-reading-section-head::after {
    width: min(220px, 30%) !important;
}

html.dark-mode.dark-mode-b body .topical-reading-section-head {
    padding-bottom: 12px !important;
    margin-bottom: 24px !important;
    position: relative !important;
}

html.dark-mode.dark-mode-b body .topical-reading-section-kicker {
    display: inline-block !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: calc(0.68rem * var(--bible-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #d8b46a !important;
    background: rgba(216, 180, 90, 0.12) !important;
    border: 1px solid rgba(216, 180, 90, 0.28) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    margin-bottom: 12px !important;
}

html.dark-mode.dark-mode-b body .topical-reading-section-title {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
    font-size: clamp(2.55rem, 4vw, 4.5rem) !important;
    line-height: 1.04 !important;
    text-transform: none !important;
    color: #9fc2ff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
    margin: 0 !important;
}

html.dark-mode.dark-mode-b body .topical-reading-section-description {
    font-family: 'Crimson Pro', 'EB Garamond', Georgia, serif !important;
    font-size: calc(1.15rem * var(--bible-font-scale, 1)) !important;
    line-height: 1.55 !important;
    color: rgba(246, 241, 229, 0.8) !important;
    -webkit-text-fill-color: rgba(246, 241, 229, 0.8) !important;
    margin-bottom: 0 !important;
}

html.dark-mode.dark-mode-b body .topical-detail-body.is-timeline-view .topical-reference-list::before {
    background: linear-gradient(180deg, transparent, rgba(216, 180, 90, 0.36), transparent) !important;
    box-shadow: none !important;
}

html.dark-mode.dark-mode-b body .topical-detail-body.is-timeline-view .topical-reference-card::before {
    background: #b89550 !important;
    box-shadow: 0 0 0 3px rgba(184, 149, 80, 0.16), 0 0 8px rgba(184, 149, 80, 0.22) !important;
}

html.dark-mode.dark-mode-b body .topical-reference-card {
    background: radial-gradient(circle at 0% 0%, rgba(196, 151, 69, 0.06), transparent 34%), #131d2b !important;
    border: 1px solid rgba(196, 151, 69, 0.13) !important;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html.dark-mode.dark-mode-b body .topical-reference-card:hover {
    border-color: rgba(216, 180, 90, 0.38) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(216, 180, 90, 0.18) !important;
}

html.dark-mode.dark-mode-b body .topical-reference-link {
    background: rgba(216, 180, 90, 0.08) !important;
    border: 1px solid rgba(216, 180, 90, 0.34) !important;
    box-shadow: inset 0 0 0 1px rgba(216, 180, 90, 0.16) !important;
    color: #d8b46a !important;
}

html.dark-mode.dark-mode-b body .topical-reference-link:hover {
    color: #fff7d6 !important;
    border-color: rgba(255, 247, 214, 0.55) !important;
    background: rgba(216, 180, 90, 0.16) !important;
}

html.dark-mode.dark-mode-b body .topical-reference-copy {
    color: rgba(246, 241, 229, 0.88) !important;
    -webkit-text-fill-color: rgba(246, 241, 229, 0.88) !important;
}

/* ---- Responsive Padding ---- */
@media (max-width: 768px) {
    body .topical-reading-section {
        padding: 20px 16px 20px !important;
        border-radius: 16px !important;
    }

    body .topical-reading-section-kicker {
        font-size: calc(0.62rem * var(--bible-font-scale, 1)) !important;
        padding: 3px 10px !important;
    }

    body .topical-reading-section-title {
        font-size: 2.45rem !important;
        line-height: 1.16 !important;
    }

    body .topical-reading-section-description {
        font-size: calc(1rem * var(--bible-font-scale, 1)) !important;
        line-height: 1.5 !important;
    }

    body .topical-reference-card {
        padding: 15px 18px 17px !important;
        gap: 10px !important;
    }

    body .topical-reference-link {
        font-size: calc(0.6rem * var(--bible-font-scale, 1)) !important;
        padding: 2px 8px 2px !important;
    }

    /* Scripture body text keeps its full font-size on mobile — never shrink it to fit. */
    body .topical-reference-copy,
    :is(html, html.parchment-off, html.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-card .topical-reference-copy {
        font-size: calc(1.05rem * var(--bible-font-scale, 1)) !important;
        line-height: 1.62 !important;
    }

    .topical-detail-body.is-timeline-view .topical-reference-list {
        padding-left: 0 !important;
        gap: 14px !important;
    }

    .topical-detail-body.is-timeline-view .topical-reference-card::before {
        left: -13px !important;
        top: 19px !important;
        width: 8px !important;
        height: 8px !important;
    }

    .topical-detail-body.is-timeline-view .topical-reference-list::before {
        left: -9px !important;
    }
}

@media (min-width: 769px) {
    body .topical-reference-copy,
    :is(html, html.parchment-off, html.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-card .topical-reference-copy {
        font-size: calc(1.05rem * var(--bible-font-scale, 1)) !important;
        line-height: 1.66 !important;
    }

    body .topical-reference-link {
        font-size: calc(0.66rem * var(--bible-font-scale, 1)) !important;
    }
}

/* ---- Curated topical Scripture timeline: editorial light-mode polish ---- */
html:not(.dark-mode) body .topical-detail-shell {
    gap: 22px !important;
}

html:not(.dark-mode) body .topical-reading-section {
    background: rgba(255, 253, 248, 0.82) !important;
    border: 1px solid rgba(117, 94, 62, 0.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 60px rgba(62, 48, 28, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
    padding: clamp(30px, 4.8vw, 56px) clamp(34px, 5.6vw, 72px) clamp(36px, 5vw, 62px) !important;
}

html:not(.dark-mode) body .topical-reading-section-head {
    margin-bottom: clamp(28px, 3.8vw, 46px) !important;
    padding-bottom: 22px !important;
}

html:not(.dark-mode) body .topical-reading-section-head::after {
    height: 1px !important;
    width: 100% !important;
    background: linear-gradient(90deg, rgba(79, 63, 210, 0.34) 0 31%, rgba(116, 128, 151, 0.12) 31% 100%) !important;
    box-shadow: none !important;
}

html:not(.dark-mode) body .topical-reading-section-kicker {
    background: rgba(246, 244, 255, 0.58) !important;
    border-color: rgba(79, 63, 210, 0.12) !important;
    color: rgba(73, 66, 170, 0.84) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html:not(.dark-mode) body .topical-reading-section-title {
    margin-top: 18px !important;
    margin-bottom: 10px !important;
}

html:not(.dark-mode) body .topical-reading-section-description {
    color: rgba(48, 58, 76, 0.72) !important;
    max-width: 760px !important;
}

html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-list {
    gap: 18px !important;
    margin-left: 0 !important;
    padding-left: 30px !important;
}

html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-list::before {
    left: 11px !important;
    top: 20px !important;
    bottom: 20px !important;
    width: 1px !important;
    background: linear-gradient(180deg, rgba(168, 126, 49, 0), rgba(168, 126, 49, 0.26) 12%, rgba(168, 126, 49, 0.28) 88%, rgba(168, 126, 49, 0)) !important;
    box-shadow: none !important;
}

html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-card {
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 20px 26px 22px !important;
    background: linear-gradient(180deg, rgba(255, 254, 250, 0.98), rgba(250, 247, 240, 0.96)) !important;
    border: 1px solid rgba(71, 85, 105, 0.105) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(61, 47, 27, 0.055), 0 1px 2px rgba(15, 23, 42, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-card:hover {
    border-color: rgba(89, 94, 164, 0.18) !important;
    box-shadow: 0 14px 34px rgba(61, 47, 27, 0.075), 0 1px 2px rgba(15, 23, 42, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    transform: translateY(-1px) !important;
}

html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-card::before {
    left: -24px !important;
    top: 25px !important;
    width: 9px !important;
    height: 9px !important;
    background: #ad8438 !important;
    box-shadow: 0 0 0 4px rgba(173, 132, 56, 0.12), 0 0 0 1px rgba(122, 90, 35, 0.22) !important;
}

html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-link {
    background: rgba(247, 248, 255, 0.66) !important;
    border: 1px solid rgba(79, 63, 210, 0.16) !important;
    color: rgba(55, 67, 157, 0.84) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    letter-spacing: 0.095em !important;
    padding: 3px 11px 4px !important;
}

html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-link:hover {
    background: rgba(239, 242, 255, 0.88) !important;
    border-color: rgba(79, 63, 210, 0.24) !important;
    color: rgba(48, 54, 146, 0.94) !important;
}

html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-copy,
html:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card .topical-reference-copy {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #263142 !important;
    margin: 0 !important;
    max-width: 1080px !important;
    padding: 0 !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #263142 !important;
}

@media (max-width: 768px) {
    html:not(.dark-mode) body .topical-reading-section {
        border-radius: 18px !important;
        padding: 22px 16px 26px !important;
    }

    html:not(.dark-mode) body .topical-reading-section-head {
        margin-bottom: 26px !important;
        padding-bottom: 18px !important;
    }

    html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-list {
        gap: 14px !important;
        padding-left: 22px !important;
    }

    html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-list::before {
        left: 8px !important;
        top: 18px !important;
        bottom: 18px !important;
    }

    html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-card {
        border-radius: 15px !important;
        gap: 10px !important;
        padding: 16px 16px 18px !important;
    }

    html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-card::before {
        left: -18px !important;
        top: 22px !important;
        width: 8px !important;
        height: 8px !important;
        box-shadow: 0 0 0 3px rgba(173, 132, 56, 0.12), 0 0 0 1px rgba(122, 90, 35, 0.20) !important;
    }

    html:not(.dark-mode) body .topical-detail-body.is-timeline-view .topical-reference-copy,
    html:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card .topical-reference-copy {
        max-width: 100% !important;
    }
}

/* Match the high-specificity parchment-off theme selectors loaded above. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section {
    background: rgba(255, 253, 248, 0.82) !important;
    border: 1px solid rgba(117, 94, 62, 0.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 60px rgba(62, 48, 28, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
    padding: clamp(30px, 4.8vw, 56px) clamp(34px, 5.6vw, 72px) clamp(36px, 5vw, 62px) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-head {
    margin-bottom: clamp(28px, 3.8vw, 46px) !important;
    padding-bottom: 22px !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-head::after {
    height: 1px !important;
    width: 100% !important;
    background: linear-gradient(90deg, rgba(79, 63, 210, 0.34) 0 31%, rgba(116, 128, 151, 0.12) 31% 100%) !important;
    box-shadow: none !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-list {
    gap: 18px !important;
    margin-left: 0 !important;
    padding-left: 30px !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-list::before {
    left: 11px !important;
    top: 20px !important;
    bottom: 20px !important;
    width: 1px !important;
    background: linear-gradient(180deg, rgba(168, 126, 49, 0), rgba(168, 126, 49, 0.26) 12%, rgba(168, 126, 49, 0.28) 88%, rgba(168, 126, 49, 0)) !important;
    box-shadow: none !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card {
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 20px 26px 22px !important;
    background: linear-gradient(180deg, rgba(255, 254, 250, 0.98), rgba(250, 247, 240, 0.96)) !important;
    border: 1px solid rgba(71, 85, 105, 0.105) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(61, 47, 27, 0.055), 0 1px 2px rgba(15, 23, 42, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card:hover {
    border-color: rgba(89, 94, 164, 0.18) !important;
    box-shadow: 0 14px 34px rgba(61, 47, 27, 0.075), 0 1px 2px rgba(15, 23, 42, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    transform: translateY(-1px) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card::before {
    left: -24px !important;
    top: 25px !important;
    width: 9px !important;
    height: 9px !important;
    background: #ad8438 !important;
    box-shadow: 0 0 0 4px rgba(173, 132, 56, 0.12), 0 0 0 1px rgba(122, 90, 35, 0.22) !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-link {
    background: rgba(247, 248, 255, 0.66) !important;
    border: 1px solid rgba(79, 63, 210, 0.16) !important;
    color: rgba(55, 67, 157, 0.84) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    letter-spacing: 0.095em !important;
    padding: 3px 11px 4px !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-kicker,
html:not(.dark-mode) body .topical-reading-section-kicker {
    font-size: calc(0.58rem * var(--bible-font-scale, 1)) !important;
    letter-spacing: 0.16em !important;
    padding: 3px 10px !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-description,
html:not(.dark-mode) body .topical-reading-section-description {
    font-size: clamp(1rem, 1.35vw, 1.24rem) !important;
    line-height: 1.45 !important;
}

@media (max-width: 768px) {
    html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section {
        border-radius: 18px !important;
        padding: 22px 16px 26px !important;
    }

    html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-list {
        gap: 14px !important;
        padding-left: 22px !important;
    }

    html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-list::before {
        left: 8px !important;
        top: 18px !important;
        bottom: 18px !important;
    }

    html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card {
        border-radius: 15px !important;
        gap: 10px !important;
        padding: 16px 16px 18px !important;
    }

    html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card::before {
        left: -18px !important;
        top: 22px !important;
        width: 8px !important;
        height: 8px !important;
        box-shadow: 0 0 0 3px rgba(173, 132, 56, 0.12), 0 0 0 1px rgba(122, 90, 35, 0.20) !important;
    }

    html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-kicker,
    html:not(.dark-mode) body .topical-reading-section-kicker {
        font-size: calc(0.56rem * var(--bible-font-scale, 1)) !important;
        padding: 3px 9px !important;
    }

    html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reading-section-description,
    html:not(.dark-mode) body .topical-reading-section-description {
        font-size: calc(0.98rem * var(--bible-font-scale, 1)) !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   Topical devotion verse cards — light mode, modeled on the Study page's
   Atlas witness cards (study.css: html.parchment-off .study-atlas-detail-popup
   .v-architecture-popup-ref-card / .v-architecture-ref-token / ::before dot):
   soft blue-white card, hairline blue border, blue reference pill, solid
   blue timeline dot with a halo, and upright Source Serif verse text.
   Light mode only (html.parchment-off, not dark mode); parchment and dark
   modes keep their existing treatments. Placed last so it wins over the
   earlier equal-specificity light-mode rules above.
   ========================================================================== */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-card,
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card {
    align-items: flex-start !important;
    gap: 14px !important;
    padding: clamp(16px, 2vw, 24px) !important;
    background: #F7FAFF !important;
    border: 1px solid #DCE8F7 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(30, 64, 175, 0.06) !important;
    transform: none !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-card:hover,
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card:hover {
    border-color: #C9DBF3 !important;
    box-shadow: 0 10px 26px rgba(30, 64, 175, 0.09) !important;
    transform: none !important;
}

/* Timeline rail: thin blue gradient line, like the Atlas witness list. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-list::before {
    width: 1px !important;
    background: linear-gradient(180deg, transparent, rgba(43, 85, 201, 0.4), transparent) !important;
}

/* Timeline dot: solid blue with a soft halo. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card::before {
    /* 12px dot centred on the rail and level with the reference pill's centre
       (1px border + 24px top padding + half the 24px pill = 37px). */
    left: -24px !important;
    top: 31px !important;
    width: 12px !important;
    height: 12px !important;
    background: #2B55C9 !important;
    box-shadow: 0 0 0 5px rgba(43, 85, 201, 0.12), 0 0 12px rgba(43, 85, 201, 0.16) !important;
}

/* Reference pill: blue capsule (hover fills solid blue). */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-link,
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-link {
    min-height: 24px !important;
    padding: 4px 11px !important;
    background: #EEF4FD !important;
    border: 1px solid rgba(30, 64, 175, 0.22) !important;
    box-shadow: none !important;
    color: #1E3A8A !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: calc(0.62rem * var(--bible-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-link:is(:hover, :focus-visible),
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-link:is(:hover, :focus-visible) {
    color: #FFFFFF !important;
    background: #2B55C9 !important;
    border-color: #2B55C9 !important;
    transform: none !important;
}

/* Verse text: upright, dark slate, and set in exactly the same face, size
   and line height as the devotion's main reading text above it
   (.topical-detail-paragraph), so the verses read at the same size. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-reference-copy,
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-copy {
    margin: 0 !important;
    color: #1F2937 !important;
    font-family: var(--devotion-reading-font-family) !important;
    font-size: var(--devotion-reading-font-size) !important;
    font-style: normal !important;
    font-weight: var(--devotion-reading-font-weight, 400) !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
}

@media (max-width: 768px) {
    html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card {
        padding: 16px !important;
        border-radius: 15px !important;
    }

    html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-detail-body.is-timeline-view .topical-reference-card::before {
        /* Phone: 1px border + 16px top padding + half the 24px pill = 29px. */
        left: -18px !important;
        top: 24px !important;
        width: 10px !important;
        height: 10px !important;
        box-shadow: 0 0 0 4px rgba(43, 85, 201, 0.12), 0 0 10px rgba(43, 85, 201, 0.14) !important;
    }
}

/* ==========================================================================
   Topical devotion verse cards — one size for every view and theme.
   Verse text and the reference pill use the same sizes as the light-mode
   timeline cards above: the verse at the devotion's main reading size and
   line height, the pill at 0.62rem (scaled by the reader's font setting).
   Only size properties are set here, so each theme keeps its own colours,
   font face and italics. The doubled-id :is() selectors make this outrank the
   earlier per-theme rules regardless of their specificity.
   ========================================================================== */
html:is(html, #kvb-size#kvb-size) body:is(body, #kvb-light#kvb-light) .topical-detail-body .topical-reference-copy {
    font-size: var(--devotion-reading-font-size) !important;
    line-height: 1.42 !important;
}

html:is(html, #kvb-size#kvb-size) body:is(body, #kvb-light#kvb-light) .topical-detail-body .topical-reference-link {
    min-height: 24px !important;
    padding: 4px 11px !important;
    font-size: calc(0.62rem * var(--bible-font-scale, 1)) !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
}

/* ---- Save PNG control disabled (2026-10-04) --------------------------
   The capture button stays in the markup; remove this rule to restore it. */
.capture-cards-btn { display: none !important; }

/* ==========================================================================
   LIGHT — editorial warmth (2026-10-04)
   Light mode read cool and UI-like: a blue-grey canvas, blue-white cards
   and controls, a baby-blue verse inset, and a grey sans-serif devotion
   title. This pass keeps light mode distinct from Parchment (no cream, no
   gold) but moves its surfaces onto warm paper: a neutral-warm canvas,
   soft paper-white cards with warm shadows, a muted blue-grey inset, and
   the same serif title Parchment uses — with blue kept for accents only
   (references, ornaments, the active tab). Light mode only; placed last
   with the same selectors as the rules above so it wins by order.
   ========================================================================== */
html.parchment-off:not(.dark-mode) {
    /* Aliases onto the shared light-mode system in study.css (loaded on this
       page); the literal values are fallbacks only. */
    --kvb-lw-canvas-top: var(--kvb-light-page, #F8F6F1);
    --kvb-lw-canvas-bottom: var(--kvb-light-page-deep, #F2EFE8);
    --kvb-lw-paper: var(--kvb-light-paper, #FFFEFB);
    --kvb-lw-paper-2: var(--kvb-light-paper-deep, #FCFBF7);
    --kvb-lw-line: var(--kvb-light-border-soft, rgba(64, 54, 38, 0.09));
    --kvb-lw-line-strong: var(--kvb-light-border, rgba(64, 54, 38, 0.14));
    --kvb-lw-ink: var(--kvb-light-text-primary, #16213F);
    --kvb-lw-accent: var(--kvb-accent-blue, #1E3A8A);
    --kvb-lw-mist: var(--kvb-light-annotation, #F5F5F4);
    --kvb-lw-mist-2: var(--kvb-light-annotation-deep, #EFF1F3);
}

/* Canvas: warm paper mist instead of cool blue-grey. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light):not(.visuals-active):not(:has(#visuals-tab-panel:not(.hidden))) {
    background-color: var(--kvb-lw-canvas-top) !important;
    background-image:
        radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.85), transparent 38%),
        linear-gradient(180deg, var(--kvb-lw-canvas-top) 0%, var(--kvb-lw-canvas-bottom) 100%) !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) main.content-area {
    background:
        radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.8), transparent 42%),
        linear-gradient(180deg, var(--kvb-lw-canvas-top) 0%, var(--kvb-lw-canvas-bottom) 100%) !important;
}

/* Reading cards: soft paper white, hairline warm border, warm two-layer shadow.
   (Topical verse cards keep their Atlas-style blue treatment.) */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.devotion-column, .topical-topic-detail, .topical-topic-card, .topical-reading-section, .topical-reading-intro, .prayer-card) {
    background:
        radial-gradient(circle at 50% -12%, rgba(255, 255, 255, 1), transparent 38%),
        linear-gradient(180deg, var(--kvb-lw-paper) 0%, var(--kvb-lw-paper-2) 100%) !important;
    border: 1px solid var(--kvb-lw-line) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 1px 2px rgba(40, 33, 22, 0.04),
        0 16px 40px rgba(40, 33, 22, 0.06),
        0 38px 76px rgba(30, 38, 66, 0.04) !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-topic-detail :is(.topical-reading-section, .topical-reading-intro) {
    box-shadow: 0 1px 2px rgba(40, 33, 22, 0.04), 0 8px 22px rgba(40, 33, 22, 0.05) !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-topic-card:hover {
    border-color: var(--kvb-lw-line-strong) !important;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 4px rgba(40, 33, 22, 0.05), 0 22px 46px rgba(40, 33, 22, 0.09) !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .topical-devotion-panel {
    background: rgba(255, 254, 251, 0.5) !important;
    border-color: var(--kvb-lw-line) !important;
}
/* Medallion behind the ✝ ornament blends into the paper card. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-header-row::before {
    background-image: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.99), rgba(252, 251, 247, 0.95) 58%, transparent 60%) !important;
}

/* Devotion title: the serif Parchment uses, set in navy ink. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-topic {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    color: var(--kvb-lw-ink) !important;
    -webkit-text-fill-color: var(--kvb-lw-ink) !important;
    opacity: 1 !important;
    letter-spacing: 0 !important;
    margin-bottom: 22px !important;
}

/* Verse inset: a muted blue-grey mist panel — quieter, more typographic. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.theme-verse-p, .streams-scripture) {
    background: linear-gradient(180deg, var(--kvb-lw-mist) 0%, var(--kvb-lw-mist-2) 100%) !important;
    border: 1px solid var(--kvb-light-annotation-border, rgba(30, 45, 80, 0.08)) !important;
    border-radius: 14px !important;
    box-shadow: inset 2px 0 0 rgba(30, 58, 138, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .theme-verse-p::before {
    color: rgba(30, 58, 138, 0.32) !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .theme-verse-p :is(.theme-verse-ref, .verse-ref-link) {
    color: var(--kvb-lw-accent) !important;
    -webkit-text-fill-color: var(--kvb-lw-accent) !important;
    border-bottom: 1px dotted rgba(30, 58, 138, 0.3) !important;
}

/* Reference apparatus: drop the stray full-width dotted line (the link rule
   above also matched the footer paragraph itself), set a quiet hairline above
   and give the references room to breathe. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) #daily-tab-panel p.reference-footer {
    border-bottom: 0 !important;
    border-top: 1px solid var(--kvb-lw-line) !important;
    padding-top: 26px !important;
    line-height: 2 !important;
    font-style: normal !important;
    color: rgba(30, 58, 138, 0.45) !important;
    -webkit-text-fill-color: rgba(30, 58, 138, 0.45) !important;
    opacity: 1 !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) #daily-tab-panel .reference-footer .ref-item {
    margin: 0 0.5rem !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) #daily-tab-panel .reference-footer a {
    color: var(--kvb-lw-accent) !important;
    -webkit-text-fill-color: var(--kvb-lw-accent) !important;
    opacity: 0.88 !important;
    border-bottom: 1px dotted rgba(30, 58, 138, 0.26) !important;
}

/* Tab bar: warm paper; active tab keeps the brand blue with a calmer glow. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-tabs {
    background: rgba(255, 254, 251, 0.94) !important;
    border-color: var(--kvb-lw-line) !important;
    box-shadow: 0 1px 2px rgba(40, 33, 22, 0.04), 0 12px 30px rgba(40, 33, 22, 0.06) !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-tab-btn:not(.active) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(249, 247, 242, 0.85)) !important;
    border-color: var(--kvb-lw-line) !important;
    color: #4B5563 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 26px rgba(40, 33, 22, 0.05) !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-tab-btn:not(.active):hover {
    background: linear-gradient(180deg, #FFFFFF, #F4F5F8) !important;
    color: var(--kvb-lw-ink) !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .devotion-tab-btn.active {
    background: linear-gradient(180deg, #2A4DB3 0%, #1A378F 100%) !important;
    box-shadow: 0 8px 22px rgba(26, 55, 143, 0.22), 0 18px 40px rgba(26, 55, 143, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* Source picker and reading controls: warm paper pills, soft warm borders. */
/* On the Daily tab the picker's wrapper is only a positioning box: no panel behind the pill. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) #daily-tab-panel .daily-source-tabs {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) :is(.daily-source-tabs, .topical-section-tabs) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 248, 243, 0.8)) !important;
    border-color: var(--kvb-lw-line) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 34px rgba(40, 33, 22, 0.06) !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) #daily-tab-panel :is(.daily-source-tabs .daily-source-menu-toggle, .daily-source-content .view-toggle-container) {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%) !important;
    border-color: var(--kvb-lw-line-strong) !important;
    box-shadow: 0 1px 2px rgba(40, 33, 22, 0.03), 0 10px 26px rgba(40, 33, 22, 0.06), inset 0 1px 0 #FFFFFF !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) #daily-tab-panel .daily-source-content .view-toggle-container .font-control-btn {
    background: transparent !important;
    border-color: var(--kvb-lw-line-strong) !important;
    color: var(--kvb-lw-accent) !important;
    transition: background-color .18s ease, border-color .18s ease !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) #daily-tab-panel .daily-source-content .view-toggle-container .font-control-btn:hover {
    background: var(--kvb-lw-mist) !important;
    border-color: rgba(30, 58, 138, 0.24) !important;
}

/* Floating day arrows: paper discs. */
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .nav-arrow {
    background: rgba(255, 254, 251, 0.94) !important;
    border-color: var(--kvb-lw-line-strong) !important;
    color: var(--kvb-lw-accent) !important;
    box-shadow: 0 8px 22px rgba(40, 33, 22, 0.07), inset 0 1px 0 #FFFFFF !important;
}
html.parchment-off:not(.dark-mode) body:is(body, #kvb-light#kvb-light) .nav-arrow:hover {
    background: #FFFFFF !important;
    border-color: rgba(30, 58, 138, 0.3) !important;
    color: var(--kvb-lw-accent) !important;
    box-shadow: 0 14px 32px rgba(40, 33, 22, 0.1), inset 0 1px 0 #FFFFFF !important;
}