/*
  ============================================================
  Truth & Foundation — Stylesheet
  ============================================================
  © 2026 Dustin Joshua Kenny. All Rights Reserved.

  Extracted from the monolithic index.html on refactor.
  All visual styling lives here. Edit this file to change
  the appearance of the app without touching markup or content.
  ============================================================
*/

        /* ============================================================
           LOCAL FONTS (Offline Support)
        ============================================================ */
        /* INTER */
        @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('./Font/Inter/inter-v20-greek_greek-ext_latin_latin-ext-300.woff2') format('woff2'); }
        @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./Font/Inter/inter-v20-greek_greek-ext_latin_latin-ext-regular.woff2') format('woff2'); }
        @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./Font/Inter/inter-v20-greek_greek-ext_latin_latin-ext-500.woff2') format('woff2'); }
        @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./Font/Inter/inter-v20-greek_greek-ext_latin_latin-ext-600.woff2') format('woff2'); }
        @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('./Font/Inter/inter-v20-greek_greek-ext_latin_latin-ext-700.woff2') format('woff2'); }

        /* LORA */
        @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('./Font/Lora/lora-v37-latin_latin-ext-regular.woff2') format('woff2'); }
        @font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('./Font/Lora/lora-v37-latin_latin-ext-italic.woff2') format('woff2'); }
        @font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('./Font/Lora/lora-v37-latin_latin-ext-500.woff2') format('woff2'); }

        /* SPECTRAL (primary reading serif) */
        @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 300; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-300.woff2') format('woff2'); }
        @font-face { font-family: 'Spectral'; font-style: italic; font-weight: 300; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-300italic.woff2') format('woff2'); }
        @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-regular.woff2') format('woff2'); }
        @font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-italic.woff2') format('woff2'); }
        @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-500.woff2') format('woff2'); }
        @font-face { font-family: 'Spectral'; font-style: italic; font-weight: 500; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-500italic.woff2') format('woff2'); }
        @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-600.woff2') format('woff2'); }
        @font-face { font-family: 'Spectral'; font-style: italic; font-weight: 600; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-600italic.woff2') format('woff2'); }
        @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 700; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-700.woff2') format('woff2'); }
        @font-face { font-family: 'Spectral'; font-style: italic; font-weight: 700; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-700italic.woff2') format('woff2'); }
        @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 800; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-800.woff2') format('woff2'); }
        @font-face { font-family: 'Spectral'; font-style: italic; font-weight: 800; font-display: swap; src: url('./Font/Spectral/spectral-v15-latin_latin-ext-800italic.woff2') format('woff2'); }

        /* SOURCE SERIF 4 (Bible reading text) */
        @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('./Font/SourceSerif4/source-serif-4-v14-latin_latin-ext-regular.woff2') format('woff2'); }
        @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('./Font/SourceSerif4/source-serif-4-v14-latin_latin-ext-italic.woff2') format('woff2'); }
        @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('./Font/SourceSerif4/source-serif-4-v14-latin_latin-ext-600.woff2') format('woff2'); }

        /* PLAYFAIR DISPLAY */
        @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('./Font/Playfair-Display/playfair-display-v40-latin_latin-ext-regular.woff2') format('woff2'); }
        @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('./Font/Playfair-Display/playfair-display-v40-latin_latin-ext-italic.woff2') format('woff2'); }
        @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('./Font/Playfair-Display/playfair-display-v40-latin_latin-ext-600.woff2') format('woff2'); }
        @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 600; font-display: swap; src: url('./Font/Playfair-Display/playfair-display-v40-latin_latin-ext-600italic.woff2') format('woff2'); }
        @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('./Font/Playfair-Display/playfair-display-v40-latin_latin-ext-700.woff2') format('woff2'); }

        /* ============================================================
           DESIGN SYSTEM — DARK SCHOLARLY THEME
           Deep Navy · Antique Gold · Warm Cream
        ============================================================ */
        :root {
            --bg:            #0f1923;
            --bg-mid:        #121f2d;
            --navy:          #1a2d40;
            --navy-mid:      #1e3550;
            --navy-deep:     #0d1824;
            --gold:          #b8965a;
            --gold-light:    #d4b87a;
            --gold-muted:    rgba(184,150,90,0.12);
            --gold-border:   rgba(184,150,90,0.25);
            --text:          #e8dcc8;
            --text-muted:    #c4b898;
            --text-light:    #7a6e58;
            --red-letter:    #d4756a;
            --sidebar-w:     270px;
            --radius:        12px;
            --shadow-sm:     0 2px 12px rgba(0,0,0,0.35);
            --shadow-md:     0 8px 32px rgba(0,0,0,0.45);
            --shadow-lg:     0 16px 48px rgba(0,0,0,0.55);
            --border:        rgba(184,150,90,0.2);
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'Source Serif 4', 'Spectral', 'Lora', Georgia, serif;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.85;
            margin: 0;
            padding: 0;
            padding-bottom: 80px;
            background-color: var(--bg);
            color: var(--text);
            display: flex;
        }

        /* ============================================================
           RED LETTER
        ============================================================ */
        .red-letter { color: var(--red-letter); font-weight: 500; }

        /* ============================================================
           SIDEBAR
        ============================================================ */
        .sidebar {
            width: var(--sidebar-w);
            background: linear-gradient(180deg, var(--bg) 0%, var(--bg-mid) 100%);
            color: white;
            height: 100vh;
            position: fixed;
            left: 0; top: 0;
            overflow-y: auto;
            transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
            z-index: 1000;
            box-shadow: 4px 0 32px rgba(0,0,0,0.5);
            scrollbar-width: thin;
            scrollbar-color: rgba(184,150,90,0.3) transparent;
            border-right: 1px solid var(--gold-border);
        }
        .sidebar::-webkit-scrollbar { width: 4px; }
        .sidebar::-webkit-scrollbar-track { background: transparent; }
        .sidebar::-webkit-scrollbar-thumb { background: rgba(184,150,90,0.3); border-radius: 4px; }

        .sidebar-header {
            padding: 28px 20px 18px;
            position: relative;
        }
        .sidebar-header::after {
            content: '';
            display: block;
            height: 1px;
            background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
            margin-top: 18px;
            opacity: 0.35;
        }

        .sidebar-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .sidebar-icon-wrap {
            width: 42px; height: 42px;
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .sidebar-icon {
            font-size: 1.2rem;
            color: var(--gold);
            line-height: 1;
        }
        .sidebar-title {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text);
            line-height: 1.2;
        }
        .sidebar-subtitle {
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-size: 0.7rem;
            color: var(--text-light);
            letter-spacing: 0.08em;
            font-style: italic;
            margin-top: 2px;
        }

        .nav-category {
            padding: 20px 20px 6px;
            font-family: 'Inter', sans-serif;
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--gold);
            font-weight: 700;
            opacity: 0.7;
        }

        .sidebar button {
            width: calc(100% - 16px);
            margin: 2px 8px;
            background: transparent;
            color: var(--text-muted);
            border: none;
            padding: 10px 12px;
            text-align: left;
            font-size: 0.88rem;
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            cursor: pointer;
            transition: all 0.18s ease;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 11px;
        }
        .sidebar button .nav-icon {
            width: 32px; height: 32px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.9rem;
            color: var(--text-light);
            flex-shrink: 0;
            transition: all 0.18s ease;
        }
        .sidebar button:hover {
            background: rgba(184,150,90,0.08);
            color: var(--text);
        }
        .sidebar button:hover .nav-icon {
            background: var(--gold-muted);
            border-color: var(--gold-border);
            color: var(--gold);
        }
        .sidebar button.active {
            background: rgba(184,150,90,0.12);
            color: var(--text);
            font-weight: 500;
        }
        .sidebar button.active .nav-icon {
            background: var(--gold-muted);
            border-color: var(--gold-border);
            color: var(--gold-light);
        }
        /* Preserve themed icon colors; hover/active overrides to gold as interaction cue */
        .sidebar button .nav-icon[style] {
            transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
        }

        .sidebar-verse {
            padding: 18px 20px;
            padding-bottom: calc(80px + env(safe-area-inset-bottom));
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 0.8rem;
            color: var(--text-light);
            line-height: 1.6;
            border-top: 1px solid var(--gold-border);
            margin-top: 20px;
        }
        .sidebar-copyright {
            padding: 0 20px 100px;
            font-family: 'Inter', sans-serif;
            font-size: 0.62rem;
            color: rgba(184,150,90,0.4);
            line-height: 1.7;
            letter-spacing: 0.02em;
        }

        /* ============================================================
           MAIN CONTENT
        ============================================================ */
        .main-content {
            margin-left: var(--sidebar-w);
            width: calc(100% - var(--sidebar-w));
            min-height: 100vh;
            transition: margin 0.3s cubic-bezier(0.4,0,0.2,1);
        }

        /* ============================================================
           MOBILE HEADER
        ============================================================ */
        .mobile-header {
            display: none;
            background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
            color: white;
            padding: 14px 20px;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 900;
            box-shadow: 0 2px 16px rgba(0,0,0,0.4);
            border-bottom: 1px solid var(--gold-border);
        }
        .mobile-title {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 1.05rem;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text);
        }
        .mobile-title span { color: var(--gold); }

        .menu-btn {
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            color: var(--gold-light);
            font-size: 1.2rem;
            cursor: pointer;
            padding: 6px 10px;
            border-radius: 8px;
            transition: background 0.2s;
        }
        .menu-btn:hover { background: rgba(184,150,90,0.22); }

        /* ============================================================
           BANNER
        ============================================================ */
        .app-banner {
            background-image: url('banner.jpg');
            background-size: cover;
            background-position: center;
            background-color: var(--navy-deep);
            min-height: 260px;
            height: auto;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .app-banner::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(135deg,
                rgba(9,16,28,0.82) 0%,
                rgba(20,40,65,0.55) 40%,
                rgba(15,25,35,0.82) 100%);
            z-index: 0;
        }
        .app-banner::after {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(circle at 30% 50%, rgba(184,150,90,0.1) 0%, transparent 60%),
                linear-gradient(to bottom, transparent 40%, var(--bg) 100%);
            z-index: 1;
        }
        .banner-text {
            position: relative;
            z-index: 2;
            text-align: center;
            width: 100%;
            padding: 24px 16px 28px;
        }
        .banner-brand {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.9rem;
            font-weight: 700;
            color: var(--text);
            line-height: 1.2;
            margin-bottom: 12px;
            text-shadow: 0 2px 12px rgba(0,0,0,0.6);
            letter-spacing: 0.01em;
        }
        .banner-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(184,150,90,0.15);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(184,150,90,0.3);
            padding: 7px 18px;
            border-radius: 9999px;
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            color: var(--gold-light);
            margin-bottom: 14px;
        }
        .banner-pill i { color: var(--gold-light); }
        .banner-text h1 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 700;
            color: var(--text);
            line-height: 1.15;
            margin: 0;
            letter-spacing: -0.01em;
            text-shadow: 0 4px 24px rgba(0,0,0,0.6);
            filter: drop-shadow(0 0 40px rgba(184,150,90,0.15));
        }

        /* ============================================================
           CONTAINER & CARD
        ============================================================ */
        .container {
            max-width: 860px;
            margin: -70px auto 60px;
            padding: 0 24px;
            position: relative;
            z-index: 10;
        }
        .card {
            background: var(--bg-elevated);
            border-radius: 16px;
            padding: 48px 52px;
            box-shadow: var(--shadow-lg);
            min-height: 60vh;
            border: 1px solid var(--border);
            overflow: hidden;
        }

        /* ============================================================
           SECTION TRANSITIONS
        ============================================================ */
        .section { display: none; opacity: 0; }
        .section.active {
            display: block;
            animation: revealUp 0.45s cubic-bezier(0.22,1,0.36,1) forwards;
        }
        @keyframes revealUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ============================================================
           TYPOGRAPHY
        ============================================================ */
        h2 {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            color: var(--text);
            font-size: clamp(1.8rem, 4vw, 2.4rem);
            margin: 0 0 8px;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }
        h3 {
            font-family: 'Playfair Display', serif;
            color: var(--text);
            margin-top: 40px;
            font-size: 1.35rem;
            font-weight: 600;
            line-height: 1.3;
        }
        h4 {
            font-family: 'Inter', sans-serif;
            color: var(--gold-light);
            font-size: 0.82rem;
            font-weight: 700;
            margin-top: 28px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        p { margin-bottom: 1.1rem; color: var(--text-muted); }
        ul, ol { padding-left: 22px; margin-bottom: 22px; }
        li { margin-bottom: 10px; color: var(--text-muted); }
        strong { color: var(--text); font-weight: 600; }
        em { color: var(--text-light); font-style: italic; }

        .section-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0 0 28px;
        }
        .section-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
            opacity: 0.35;
        }
        .section-divider .divider-icon {
            color: var(--gold);
            font-size: 0.9rem;
            opacity: 0.7;
        }

        ol li::marker { color: var(--gold); font-weight: 700; font-family: 'Inter', sans-serif; }

        /* ============================================================
           SCRIPTURE BLOCK
        ============================================================ */
        .scripture {
            background: linear-gradient(135deg, rgba(40,110,30,0.22) 0%, rgba(30,90,25,0.14) 100%);
            border-left: 4px solid #4ea33a;
            border-radius: 0 10px 10px 0;
            padding: 16px 22px;
            margin: 20px 0;
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-style: italic;
            color: var(--text-muted);
            font-size: 0.97rem;
            line-height: 1.8;
            position: relative;
        }
        .scripture::before {
            content: '\201C';
            position: absolute;
            top: -6px; left: 14px;
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            color: #7abf55;
            opacity: 0.35;
            line-height: 1;
        }

        /* ============================================================
           VERSE ACCORDION (Universal Rule)
           When 3+ verses stack together, keep the most powerful one
           visible and place additional verses inside this collapsible
           accordion to clear visual space. Uses native <details> /
           <summary> — fully accessible, no JS required.
        ============================================================ */
        .verse-accordion {
            margin: 12px 0 16px;
            border: 1px solid rgba(184,150,90,0.30);
            border-radius: 8px;
            background: rgba(0,0,0,0.15);
            overflow: hidden;
        }
        .verse-accordion summary {
            padding: 10px 14px;
            cursor: pointer;
            color: var(--gold-light);
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            font-weight: 600;
            list-style: none;
            user-select: none;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.15s ease;
        }
        .verse-accordion summary::-webkit-details-marker { display: none; }
        .verse-accordion summary::before {
            content: "▸";
            display: inline-block;
            transition: transform 0.2s ease;
            font-size: 0.75rem;
            color: var(--gold-light);
            opacity: 0.85;
        }
        .verse-accordion[open] summary::before {
            transform: rotate(90deg);
        }
        .verse-accordion summary:hover {
            background: rgba(184,150,90,0.08);
        }
        .verse-accordion[open] summary {
            border-bottom: 1px solid rgba(184,150,90,0.22);
        }
        .verse-accordion-content {
            padding: 4px 14px 12px;
        }
        .verse-accordion-content .scripture {
            margin: 12px 0 0;
        }
        .verse-accordion-content .scripture:first-child {
            margin-top: 8px;
        }
        body.light-mode .verse-accordion {
            background: rgba(255,253,247,0.5);
            border-color: rgba(184,150,90,0.35);
        }
        body.light-mode .verse-accordion summary:hover {
            background: rgba(184,150,90,0.12);
        }

        /* ============================================================
           UNIVERSAL PROGRESSIVE-DISCLOSURE ACCORDIONS
           ============================================================
           Three reusable collapsibles for long apologetic content:
           - .argument-section → MAJOR topical container (numbered, gold)
           - .argument-card    → Steel-man + biblical response (inside section)
           - .objection-handler → "But what about X?" pushback responses

           All use native <details>/<summary> — no JS, fully accessible.
           Visual language matches existing app: serif numerals, gold accents,
           understated icons (rotating chevron), professional not cartoony.
        ============================================================ */

        /* MAJOR SECTION container — wraps an entire numbered argument topic */
        .argument-section {
            margin: 22px 0 26px;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(184,150,90,0.40);
            background: linear-gradient(135deg, rgba(28,22,12,0.45), rgba(18,14,8,0.30));
            box-shadow: 0 2px 12px rgba(0,0,0,0.18);
        }
        .argument-section > summary {
            padding: 16px 52px 16px 20px;
            cursor: pointer;
            color: var(--gold-light);
            font-family: 'Playfair Display', 'Georgia', serif;
            font-size: 1.08rem;
            font-weight: 600;
            list-style: none;
            user-select: none;
            position: relative;
            line-height: 1.35;
            transition: background 0.18s ease;
            letter-spacing: 0.005em;
        }
        .argument-section > summary::-webkit-details-marker { display: none; }
        .argument-section > summary::after {
            content: "›";
            position: absolute;
            right: 22px;
            top: 50%;
            transform: translateY(-50%) rotate(90deg);
            font-family: 'Inter', sans-serif;
            font-size: 1.6rem;
            font-weight: 300;
            color: var(--gold-light);
            opacity: 0.55;
            transition: transform 0.22s ease, opacity 0.18s ease;
            line-height: 1;
        }
        .argument-section[open] > summary::after {
            transform: translateY(-50%) rotate(270deg);
            opacity: 0.85;
        }
        .argument-section > summary:hover {
            background: rgba(184,150,90,0.06);
        }
        .argument-section > summary:hover::after {
            opacity: 0.85;
        }
        .argument-section[open] > summary {
            border-bottom: 1px solid rgba(184,150,90,0.28);
        }

        /* CONTENT pane inside the section */
        .argument-section-content {
            padding: 18px 22px 22px;
        }
        .argument-section-content > *:first-child {
            margin-top: 0;
        }
        .argument-section-content > *:last-child {
            margin-bottom: 0;
        }
        .argument-section-content > p:first-child {
            margin-top: 4px;
        }

        /* ────────────────────────────────────────────────────────
           TIMELINE ACCORDIONS — .tl-acc inside .tl-wrap
           Vertical line + node per entry, year badge on summary.
           Used for date-sequence dropdowns (e.g. Orthodox history).
           ──────────────────────────────────────────────────────── */
        .tl-wrap {
            position: relative;
            padding-left: 30px;
            margin: 18px 0 24px;
        }
        .tl-wrap::before {
            content: "";
            position: absolute;
            left: 9px;
            top: 8px;
            bottom: 8px;
            width: 2px;
            background: linear-gradient(var(--gold), var(--gold-border));
        }
        .tl-acc {
            position: relative;
            margin-bottom: 7px;
        }
        .tl-acc::before {
            content: "";
            position: absolute;
            left: -26px;
            top: 17px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: var(--bg);
            border: 2px solid var(--gold);
            transition: 0.2s ease;
            z-index: 1;
        }
        .tl-acc[open]::before {
            background: var(--gold);
            box-shadow: 0 0 0 4px var(--gold-muted);
        }
        .tl-acc > summary {
            padding: 13px 14px;
            border: 1px solid var(--gold-border);
            border-radius: 8px;
            background: rgba(0,0,0,0.14);
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 0.93rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            list-style: none;
            user-select: none;
        }
        .tl-acc > summary::-webkit-details-marker { display: none; }
        .tl-acc > summary .yr {
            font-family: 'Playfair Display', serif;
            color: var(--gold-light);
            font-size: 0.85rem;
            flex-shrink: 0;
        }
        .tl-acc > summary::after {
            content: "\25BE";
            margin-left: auto;
            color: var(--gold);
            transition: transform 0.22s ease;
            font-size: 0.8rem;
            flex-shrink: 0;
        }
        .tl-acc[open] > summary::after { transform: rotate(180deg); }
        .tl-acc > summary:hover { background: rgba(184,150,90,0.10); }
        .tl-acc .acc-body {
            padding: 12px 14px 6px;
            color: var(--text-muted);
            font-size: 0.91rem;
            line-height: 1.7;
        }
        .tl-acc .acc-body > *:first-child { margin-top: 0; }
        .tl-acc .acc-body > *:last-child { margin-bottom: 0; }

        /* Timeline — light mode */
        body.light-mode .tl-acc > summary {
            background: linear-gradient(135deg, rgba(252,247,235,0.85), rgba(248,242,225,0.65));
            border-color: rgba(184,150,90,0.50);
            color: #3a2e18;
        }
        body.light-mode .tl-acc > summary .yr { color: var(--accent); }
        body.light-mode .tl-acc > summary:hover { background: rgba(184,150,90,0.12); }
        body.light-mode .tl-acc::before { background: var(--bg-elevated); }
        body.light-mode .tl-acc[open]::before { background: var(--gold); }
        body.light-mode .tl-acc .acc-body { color: var(--text); }

        /* ────────────────────────────────────────────────────────
           INNER ACCORDIONS — argument-card & objection-handler
           These nest INSIDE .argument-section for fine-grained
           disclosure (steel-man, response, objection)
           ──────────────────────────────────────────────────────── */
        .argument-card,
        .objection-handler {
            margin: 14px 0;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid rgba(184,150,90,0.26);
            background: rgba(0,0,0,0.18);
        }

        .argument-card > summary,
        .objection-handler > summary {
            padding: 11px 40px 11px 16px;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: 0.88rem;
            font-weight: 600;
            list-style: none;
            user-select: none;
            position: relative;
            line-height: 1.4;
            transition: background 0.15s ease;
            color: var(--gold-light);
        }
        .argument-card > summary::-webkit-details-marker,
        .objection-handler > summary::-webkit-details-marker { display: none; }

        .argument-card > summary::after,
        .objection-handler > summary::after {
            content: "›";
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%) rotate(90deg);
            font-family: 'Inter', sans-serif;
            font-size: 1.25rem;
            font-weight: 300;
            color: currentColor;
            opacity: 0.55;
            transition: transform 0.2s ease;
            line-height: 1;
        }
        .argument-card[open] > summary::after,
        .objection-handler[open] > summary::after {
            transform: translateY(-50%) rotate(270deg);
            opacity: 0.85;
        }
        .argument-card[open] > summary,
        .objection-handler[open] > summary {
            border-bottom: 1px solid rgba(184,150,90,0.22);
        }

        /* SMALL INLINE ICON (FontAwesome) for inner accordions */
        .arg-icon {
            display: inline-block;
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            margin-right: 10px;
            font-size: 0.92rem;
            opacity: 0.85;
            color: currentColor;
            vertical-align: -1px;
            min-width: 18px;
        }

        /* TONE VARIANTS for the inner accordions */
        .argument-card {
            border-color: rgba(120,170,210,0.32);
            background: linear-gradient(135deg, rgba(15,28,48,0.32), rgba(8,18,30,0.22));
        }
        .argument-card > summary {
            color: #aec8e0;
        }
        .argument-card > summary:hover {
            background: rgba(120,170,210,0.08);
        }
        .argument-card[open] > summary {
            border-bottom-color: rgba(120,170,210,0.28);
        }

        .objection-handler {
            border-color: rgba(220,165,90,0.35);
            background: linear-gradient(135deg, rgba(48,30,8,0.32), rgba(30,18,5,0.22));
        }
        .objection-handler > summary {
            color: #e8b878;
        }
        .objection-handler > summary:hover {
            background: rgba(220,165,90,0.08);
        }
        .objection-handler[open] > summary {
            border-bottom-color: rgba(220,165,90,0.30);
        }

        /* DEFENSE CARD — green "Biblical Truth & Defense" nested accordion (blue shield icon) */
        .defense-card {
            margin: 14px 0;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid rgba(120,191,138,0.42);
            background: linear-gradient(135deg, rgba(18,42,28,0.42), rgba(10,26,18,0.26));
        }
        .defense-card > summary {
            padding: 11px 40px 11px 16px;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: 0.88rem;
            font-weight: 600;
            list-style: none;
            user-select: none;
            position: relative;
            line-height: 1.4;
            transition: background 0.15s ease;
            color: #8fd09e;
        }
        .defense-card > summary::-webkit-details-marker { display: none; }
        .defense-card > summary::after {
            content: "\203A";
            position: absolute;
            right: 16px; top: 50%;
            transform: translateY(-50%) rotate(90deg);
            font-family: 'Inter', sans-serif;
            font-size: 1.25rem; font-weight: 300;
            color: currentColor; opacity: 0.55;
            transition: transform 0.2s ease; line-height: 1;
        }
        .defense-card[open] > summary::after { transform: translateY(-50%) rotate(270deg); opacity: 0.85; }
        .defense-card > summary:hover { background: rgba(120,191,138,0.09); }
        .defense-card[open] > summary { border-bottom: 1px solid rgba(120,191,138,0.30); }
        .defense-card-content { padding: 14px 16px 16px; }
        .defense-card-content > *:first-child { margin-top: 0; }
        .defense-card-content > *:last-child { margin-bottom: 0; }

        .argument-card-content,
        .objection-handler-content {
            padding: 14px 16px 16px;
        }
        .argument-card-content > *:first-child,
        .objection-handler-content > *:first-child {
            margin-top: 0;
        }
        .argument-card-content > *:last-child,
        .objection-handler-content > *:last-child {
            margin-bottom: 0;
        }

        /* ────────────────────────────────────────────────────────
           SOURCES SECTION — appears at very bottom of apologetic tabs
           Distinct visual identity from argument/objection accordions.
           Academic/bibliographic feel: muted slate-parchment palette,
           bookish typography. Not for argument; this is reference.
           ──────────────────────────────────────────────────────── */
        .sources-section {
            margin: 36px 0 20px;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid rgba(170,180,195,0.28);
            background: linear-gradient(135deg, rgba(22,26,34,0.55), rgba(16,20,28,0.40));
            box-shadow: 0 1px 8px rgba(0,0,0,0.20);
            position: relative;
        }
        .sources-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg,
                rgba(170,180,195,0) 0%,
                rgba(170,180,195,0.45) 50%,
                rgba(170,180,195,0) 100%);
        }
        .sources-section > summary {
            padding: 14px 50px 14px 20px;
            cursor: pointer;
            color: #b8c2d0;
            font-family: 'Inter', sans-serif;
            font-size: 0.92rem;
            font-weight: 600;
            list-style: none;
            user-select: none;
            position: relative;
            line-height: 1.4;
            transition: background 0.18s ease;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }
        .sources-section > summary::-webkit-details-marker { display: none; }
        .sources-section > summary::before {
            content: "\f02d"; /* fa-book */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            margin-right: 12px;
            opacity: 0.7;
            font-size: 0.95rem;
        }
        .sources-section > summary::after {
            content: "+";
            position: absolute;
            right: 22px;
            top: 50%;
            transform: translateY(-50%);
            font-family: 'Inter', sans-serif;
            font-size: 1.4rem;
            font-weight: 300;
            color: #b8c2d0;
            opacity: 0.55;
            transition: transform 0.25s ease, opacity 0.18s ease;
            line-height: 1;
        }
        .sources-section[open] > summary::after {
            transform: translateY(-50%) rotate(45deg);
            opacity: 0.9;
        }
        .sources-section > summary:hover {
            background: rgba(170,180,195,0.06);
        }
        .sources-section[open] > summary {
            border-bottom: 1px solid rgba(170,180,195,0.22);
        }

        /* CONTENT pane */
        .sources-section-content {
            padding: 18px 22px 22px;
            font-family: 'Inter', sans-serif;
            font-size: 0.88rem;
            color: #c8d0dc;
            line-height: 1.6;
        }
        .sources-section-content > *:first-child {
            margin-top: 0;
        }
        .sources-section-content > *:last-child {
            margin-bottom: 0;
        }
        .sources-section-content .sources-intro {
            color: #98a2b0;
            font-style: italic;
            font-size: 0.86rem;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px dashed rgba(170,180,195,0.18);
        }
        .sources-section-content .sources-tier {
            margin: 18px 0 8px;
            color: #d8e0ea;
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding-left: 10px;
            border-left: 2px solid rgba(170,180,195,0.4);
        }
        .sources-section-content ul.sources-list {
            list-style: none;
            padding: 0;
            margin: 8px 0 4px;
        }
        .sources-section-content ul.sources-list li {
            padding: 6px 0 6px 16px;
            position: relative;
            color: #c0c8d4;
            font-size: 0.86rem;
            line-height: 1.55;
            border-bottom: 1px dotted rgba(170,180,195,0.12);
        }
        .sources-section-content ul.sources-list li:last-child {
            border-bottom: none;
        }
        .sources-section-content ul.sources-list li::before {
            content: "›";
            position: absolute;
            left: 0;
            color: #98a2b0;
            opacity: 0.7;
            font-weight: 400;
        }
        .sources-section-content ul.sources-list li strong {
            color: #e0e6ee;
            font-weight: 600;
        }
        .sources-section-content ul.sources-list li em {
            color: #98a2b0;
            font-style: italic;
            font-size: 0.82rem;
        }
        .sources-section-content ul.sources-list li a {
            color: #88a0c0;
            text-decoration: none;
            border-bottom: 1px dotted rgba(136,160,192,0.4);
            transition: color 0.15s ease, border-color 0.15s ease;
        }
        .sources-section-content ul.sources-list li a:hover {
            color: #a8c0e0;
            border-bottom-color: rgba(168,192,224,0.6);
        }

        /* Nested content inside accordions */
        .argument-section-content ol,
        .argument-card-content ol,
        .objection-handler-content ol,
        .argument-section-content ul,
        .argument-card-content ul,
        .objection-handler-content ul {
            margin: 10px 0 12px;
        }
        .argument-section-content ol,
        .argument-card-content ol,
        .objection-handler-content ol {
            padding-left: 22px;
        }
        .argument-section-content li,
        .argument-card-content li,
        .objection-handler-content li {
            margin-bottom: 8px;
            line-height: 1.55;
        }
        .argument-section-content .scripture,
        .argument-card-content .scripture,
        .objection-handler-content .scripture {
            margin: 12px 0;
        }

        /* ════════════════════════════════════════════════════════
           LIGHT MODE adaptations
           ════════════════════════════════════════════════════════ */
        body.light-mode .argument-section {
            background: linear-gradient(135deg, rgba(252,247,235,0.85), rgba(248,242,225,0.65));
            border-color: rgba(184,150,90,0.50);
            box-shadow: 0 2px 10px rgba(120,90,40,0.10);
        }
        body.light-mode .argument-section > summary {
            color: #8a6520;
        }
        body.light-mode .argument-section > summary::after {
            color: #8a6520;
        }
        body.light-mode .argument-section > summary:hover {
            background: rgba(184,150,90,0.10);
        }
        body.light-mode .argument-card {
            background: linear-gradient(135deg, rgba(228,240,250,0.70), rgba(240,247,253,0.50));
            border-color: rgba(70,120,170,0.42);
        }
        body.light-mode .argument-card > summary {
            color: #2c5a8a;
        }
        body.light-mode .argument-card > summary:hover {
            background: rgba(70,120,170,0.10);
        }

        body.light-mode .objection-handler {
            background: linear-gradient(135deg, rgba(253,242,222,0.70), rgba(250,238,215,0.50));
            border-color: rgba(195,130,40,0.45);
        }
        body.light-mode .objection-handler > summary {
            color: #9a5e15;
        }
        body.light-mode .objection-handler > summary:hover {
            background: rgba(220,165,90,0.13);
        }

        body.light-mode .defense-card {
            background: linear-gradient(135deg, rgba(228,247,234,0.78), rgba(238,250,242,0.58));
            border-color: rgba(70,150,100,0.45);
        }
        body.light-mode .defense-card > summary { color: #1f7a4a; }
        body.light-mode .defense-card > summary:hover { background: rgba(70,150,100,0.10); }

        /* ============================================================
           CRITIQUE-QUOTE BOX        /* ============================================================
           CRITIQUE-QUOTE BOX
           Used for verbatim quotes from teachings being critiqued
           (CCC, Quran, Watchtower, King Follett Discourse, etc.)
           Deep red — visually distinct from positive gold callouts and
           from green scripture boxes. Works on both dark and light themes.
        ============================================================ */
        .critique-quote {
            background: linear-gradient(135deg, rgba(150,30,30,0.22) 0%, rgba(120,25,25,0.12) 100%);
            border: 1px solid rgba(180,40,40,0.35);
            border-left: 4px solid #c8323c;
            border-radius: 0 10px 10px 0;
            padding: 14px 20px;
            margin: 16px 0;
            position: relative;
        }
        .critique-quote p {
            font-style: italic;
            color: var(--text);
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-size: 0.96rem;
            line-height: 1.7;
            margin: 0;
        }
        .critique-quote p.critique-source {
            margin-top: 0.55rem;
            font-style: normal;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            color: var(--text-muted);
            text-align: right;
            opacity: 0.85;
        }
        .critique-quote strong { color: #ff8a8a; }
        body.light-mode .critique-quote {
            background: linear-gradient(135deg, rgba(180,35,35,0.10) 0%, rgba(160,30,30,0.05) 100%);
            border: 1px solid rgba(180,40,40,0.30);
            border-left: 4px solid #b32a32;
        }
        body.light-mode .critique-quote p { color: #2a1010; }
        body.light-mode .critique-quote p.critique-source { color: #7a3030; }
        body.light-mode .critique-quote strong { color: #8a1818; }

        /* ============================================================
           HIGHLIGHT BOX
        ============================================================ */
        .highlight-box {
            background: rgba(184,150,90,0.06);
            border: 1px solid var(--gold-border);
            border-left: 4px solid var(--gold);
            padding: 22px 26px;
            border-radius: 0 10px 10px 0;
            margin: 28px 0;
            font-size: 0.95rem;
            color: var(--text-muted);
            line-height: 1.75;
        }
        .highlight-box strong { color: var(--gold-light); }

        /* ============================================================
           THEOLOGICAL FOUNDATION BOX
        ============================================================ */
        .theological-foundation {
            background: linear-gradient(135deg, var(--bg) 0%, var(--bg-elevated) 100%);
            color: var(--text);
            padding: 32px 36px;
            border-radius: var(--radius);
            margin-top: 44px;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--gold-border);
            position: relative;
            overflow: hidden;
        }
        .theological-foundation::before {
            content: '✦';
            position: absolute;
            top: -10px; right: 20px;
            font-size: 6rem;
            color: rgba(184,150,90,0.06);
            line-height: 1;
        }
        .theological-foundation h3 {
            color: var(--gold-light);
            font-family: 'Playfair Display', serif;
            margin-top: 0;
            font-size: 1.3rem;
        }
        .theological-foundation p { color: rgba(232,220,200,0.8); font-size: 0.93rem; }
        .theological-foundation strong { color: var(--gold-light); }
        .theological-foundation .scripture {
            background: linear-gradient(135deg, rgba(35,65,25,0.25) 0%, rgba(25,50,18,0.15) 100%);
            border-left-color: #5a9a40;
            color: rgba(220,240,215,0.85);
        }

        /* ============================================================
           SCRIPT GUIDE — ACCORDION + SPEECH BUBBLES
        ============================================================ */
        .script-toggle {
            width: 100%;
            background: rgba(184,150,90,0.07);
            border: 1px solid var(--gold-border);
            border-radius: 10px;
            padding: 13px 18px;
            color: var(--gold-light);
            font-family: 'Inter', sans-serif;
            font-size: 0.83rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
            transition: all 0.2s ease;
            text-align: left;
        }
        .script-toggle:hover {
            background: rgba(184,150,90,0.14);
            border-color: var(--gold);
        }
        .script-toggle.open {
            background: rgba(184,150,90,0.12);
            border-color: var(--gold);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom: 1px solid transparent;
        }
        .script-toggle .script-chevron {
            margin-left: auto;
            transition: transform 0.25s ease;
            font-size: 0.75rem;
            opacity: 0.7;
        }
        .script-toggle.open .script-chevron {
            transform: rotate(180deg);
        }
        .script-panel {
            display: none;
            padding: 18px 18px 4px;
            background: rgba(184,150,90,0.04);
            border: 1px solid var(--gold-border);
            border-top: none;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            margin-bottom: 4px;
        }
        .script-panel.open {
            display: block;
            animation: revealUp 0.3s cubic-bezier(0.22,1,0.36,1) forwards;
        }
        .script-bubble {
            position: relative;
            background: linear-gradient(135deg, rgba(12,24,40,0.98) 0%, rgba(18,34,54,0.98) 100%);
            border: 1px solid rgba(184,150,90,0.18);
            border-radius: 4px 18px 18px 18px;
            padding: 16px 20px 14px;
            margin-bottom: 14px;
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-style: italic;
            color: var(--text-muted);
            font-size: 0.94rem;
            line-height: 1.85;
        }
        .script-bubble::before {
            content: '27a';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            font-style: normal;
            position: absolute;
            top: -13px;
            left: -1px;
            font-size: 1.1rem;
            color: var(--gold);
            opacity: 0.55;
            line-height: 1;
        }
        .script-bubble-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(184,150,90,0.1);
            border: 1px solid rgba(184,150,90,0.22);
            border-radius: 9999px;
            padding: 3px 11px;
            font-family: 'Inter', sans-serif;
            font-size: 0.68rem;
            font-weight: 700;
            color: var(--gold);
            letter-spacing: 0.07em;
            text-transform: uppercase;
            margin-bottom: 10px;
            font-style: normal;
            display: block;
        }

        /* ============================================================
           OVERLAY
        ============================================================ */
        .overlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(9,16,28,0.72);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s ease;
            backdrop-filter: blur(3px);
        }
        .overlay.show { display: block; opacity: 1; }

        /* ============================================================
           WELCOME / HOME SECTION
        ============================================================ */
        .welcome-intro {
            font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            font-weight: 400;
            color: var(--text-muted);
            font-style: italic;
            line-height: 1.65;
            margin-bottom: 24px;
        }

        .topic-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 14px;
            margin-top: 24px;
        }
        .topic-chip {
            background: var(--navy);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px 16px;
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .topic-chip:hover {
            border-color: var(--gold);
            background: rgba(184,150,90,0.08);
            color: var(--text);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }
        .topic-chip-text {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }
        .topic-chip-title {
            font-weight: 600;
            font-size: 0.93rem;
            color: var(--text);
            line-height: 1.2;
        }
        .topic-chip-sub {
            font-size: 0.75rem;
            font-family: 'Inter', sans-serif;
            color: var(--text-light);
            line-height: 1.3;
            font-weight: 400;
        }
        .topic-chip-icon-wrap {
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            padding: 10px;
            border-radius: 50%;
            color: var(--gold);
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.2s ease;
            width: 44px; height: 44px;
            flex-shrink: 0;
        }
        .topic-chip:hover .topic-chip-icon-wrap { transform: scale(1.1); }

        /* ── Home About Cards ───────────────────────────────── */
        .home-about-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin: 20px 0 28px;
        }
        .home-about-card {
            background: var(--navy);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 18px;
            display: flex;
            gap: 14px;
            align-items: flex-start;
        }
        .home-about-icon {
            color: var(--gold);
            font-size: 1.2rem;
            margin-top: 3px;
            flex-shrink: 0;
            width: 28px;
            text-align: center;
        }
        .home-about-card strong {
            display: block;
            font-size: 0.92rem;
            color: var(--text);
            margin-bottom: 6px;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            letter-spacing: 0.03em;
        }
        .home-about-card p {
            font-size: 0.86rem;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.65;
        }
        body.light-mode .home-about-card { background: var(--bg-elevated); }

        /* ── Support Box ────────────────────────────────────── */
        .home-support-box {
            background: linear-gradient(135deg, rgba(184,150,90,0.10) 0%, rgba(184,150,90,0.05) 100%);
            border: 1px solid var(--gold-border);
            border-left: 3px solid var(--gold);
            border-radius: 10px;
            padding: 16px 18px;
            margin: 0 0 28px;
        }
        .home-support-inner {
            display: flex;
            gap: 14px;
            align-items: flex-start;
        }
        .home-support-icon {
            color: #e06868;
            font-size: 1.1rem;
            margin-top: 3px;
            flex-shrink: 0;
        }
        .home-support-box strong {
            display: block;
            font-size: 0.9rem;
            color: var(--gold-light);
            margin-bottom: 5px;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            letter-spacing: 0.03em;
        }
        .home-support-box p {
            font-size: 0.83rem;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.65;
        }
        .home-support-box em { color: var(--text-light); font-style: italic; }

        /* ============================================================
           HOW TO PRAY — TAB SYSTEM
        ============================================================ */
        .pray-tabs {
            display: flex;
            gap: 4px;
            overflow-x: auto;
            scrollbar-width: none;
            margin: 24px 0 28px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 0;
            padding-right: 50px; /* lets last tab scroll clear of the gradient */
            touch-action: pan-x;
            -webkit-overflow-scrolling: touch;
        }
        .pray-tabs::-webkit-scrollbar { display: none; }
        .pray-tab {
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            margin-bottom: -1px;
            padding: 10px 16px;
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-light);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.18s ease;
            border-radius: 6px 6px 0 0;
        }
        .pray-tab:hover { color: var(--text); background: rgba(184,150,90,0.05); }
        .pray-tab.active { color: var(--gold-light); border-bottom-color: var(--gold); }

        .pray-panel, .rel-panel { display: none; }
        .pray-panel.active, .rel-panel.active { display: block; }
        .pray-panel.active, .rel-panel.active {
            display: block;
            animation: revealUp 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
        }

        /* ============================================================
           CALLOUT BOXES (Prayer section & general)
        ============================================================ */
        .pray-callout {
            background: linear-gradient(135deg, rgba(40,90,65,0.25) 0%, rgba(30,70,50,0.15) 100%);
            border: 1px solid rgba(80,160,110,0.3);
            border-left: 4px solid #4a9a6a;
            border-radius: 0 10px 10px 0;
            padding: 16px 20px;
            margin: 18px 0;
        }
        .pray-callout h4 {
            color: #6abf8a;
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 0 0 8px;
        }
        .pray-callout p {
            font-size: 0.92rem;
            color: #9abcaa;
            margin: 0;
            line-height: 1.72;
        }
        .pray-callout strong { color: #b8dcc8; }

        /* ============================================================
           XLINK STRIP — compact cross-link to another section.
           Banner layout: a full-width topic-card image on top (uncropped,
           height-capped so it never gets too tall), with a line of text
           below. Used at the top of "Talking to..." tabs to point readers
           to Spreading the Gospel before they dive into apologetics.
           ============================================================ */
        .xlink-strip {
            display: block;
            width: 100%;
            text-align: left;
            background: rgba(184,150,90,0.08);
            border: 1px solid var(--gold-border);
            border-radius: 12px;
            padding: 10px;
            margin: 16px 0;
            cursor: pointer;
            transition: background 0.16s ease, border-color 0.16s ease;
            font-family: inherit;
        }
        .xlink-strip:hover,
        .xlink-strip:active {
            background: rgba(184,150,90,0.14);
            border-color: var(--gold-light);
        }
        /* Full-width banner image at its natural aspect ratio. Because the
           topic-card images are wide, full width keeps them short anyway.
           No object-fit/crop: the entire image (with its baked-in text) shows.
           width:100% + height:auto preserves aspect ratio and fills the strip. */
        .xlink-strip-thumb {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 8px;
            margin-bottom: 9px;
        }
        .xlink-strip-text {
            display: block;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 0.88rem;
            line-height: 1.55;
            color: var(--text-muted, #9a8f7a);
            padding: 0 4px 2px;
        }
        .xlink-strip-text strong { color: var(--gold-light); }
        .xlink-strip-go {
            display: inline-block;
            margin-top: 4px;
            color: var(--gold-light);
            font-weight: 700;
            font-size: 0.84rem;
        }

        .pray-warning {
            background: linear-gradient(135deg, rgba(90,50,25,0.3) 0%, rgba(70,40,20,0.2) 100%);
            border: 1px solid rgba(180,100,40,0.3);
            border-left: 4px solid #b86a2a;
            border-radius: 0 10px 10px 0;
            padding: 16px 20px;
            margin: 18px 0;
        }
        .pray-warning h4 {
            color: #e09050;
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 0 0 8px;
        }
        .pray-warning p {
            font-size: 0.92rem;
            color: #c89868;
            margin: 0;
            line-height: 1.72;
        }
        /* ── Red danger/alert box ────────────────────────────── */
        .pray-alert {
            background: linear-gradient(135deg, rgba(120,15,15,0.22) 0%, rgba(90,10,10,0.14) 100%);
            border: 1px solid rgba(200,50,50,0.35);
            border-left: 4px solid #c03030;
            border-radius: 10px;
            padding: 16px 20px;
            margin: 20px 0;
        }
        .pray-alert h4 {
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #e06060;
            margin: 0 0 10px 0;
        }
        .pray-alert p {
            font-size: 0.92rem;
            color: #d09090;
            margin: 0 0 10px 0;
            line-height: 1.72;
        }
        .pray-alert p:last-child { margin-bottom: 0; }
        .pray-alert strong { color: #e08080; }
        body.light-mode .pray-alert {
            background: rgba(180,20,20,0.06);
            border-color: rgba(180,20,20,0.22);
            border-left-color: #b02020;
        }
        body.light-mode .pray-alert h4 { color: #8a1010; }
        body.light-mode .pray-alert p { color: #6a1010; }
        body.light-mode .pray-alert strong { color: #7a1818; }

        /* ============================================================
           LORD'S PRAYER GRID
        ============================================================ */
        .lp-grid { margin: 20px 0 28px; display: flex; flex-direction: column; gap: 8px; }
        .lp-row {
            background: rgba(26,45,64,0.7);
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
        }
        .lp-phrase {
            background: var(--gold-muted);
            border-bottom: 1px solid var(--border);
            padding: 10px 18px;
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 0.97rem;
            color: var(--gold-light);
        }
        .lp-meaning {
            padding: 12px 18px;
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.7;
        }

        /* ============================================================
           A.C.T.S. ACCORDION
        ============================================================ */
        .acts-card {
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 12px;
            background: var(--navy);
        }
        .acts-header {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 20px;
            cursor: pointer;
            background: transparent;
            border: none;
            width: 100%;
            text-align: left;
            transition: background 0.18s;
        }
        .acts-header:hover { background: rgba(184,150,90,0.06); }
        .acts-letter {
            width: 46px; height: 46px;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--navy-deep);
            flex-shrink: 0;
        }
        .acts-title { flex: 1; }
        .acts-title strong {
            display: block;
            font-family: 'Playfair Display', serif;
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text);
        }
        .acts-title span { font-size: 0.78rem; color: var(--text-light); font-style: italic; }
        .acts-chevron {
            color: var(--gold);
            font-size: 0.85rem;
            transition: transform 0.3s;
            flex-shrink: 0;
        }
        .acts-chevron.open { transform: rotate(180deg); }
        .acts-body {
            display: none;
            padding: 20px 22px 24px;
            border-top: 1px solid var(--border);
        }
        .acts-body.open { display: block; }

        /* ============================================================
           FAQ ACCORDION (Rounded Pill Style)
           ─────────────────────────────────────────────────────────────
           Closed: rounded pill (border-radius 99px) — compact, elegant.
           Open: smoothly transforms into a card (border-radius 18px)
           with a soft gold gradient and elevated shadow. The plus icon
           rotates 45deg into an X. Animations honor reduced-motion.
        ============================================================ */
        .faq-item {
            border: 1.5px solid var(--border);
            border-radius: 99px;
            margin-bottom: 12px;
            overflow: hidden;
            background: var(--bg-elevated, var(--navy));
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
            transition: border-radius 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                        border-color 0.25s ease,
                        background 0.3s ease,
                        box-shadow 0.3s ease;
        }
        .faq-item:hover {
            border-color: var(--gold);
            box-shadow: 0 4px 12px rgba(184, 150, 90, 0.1);
        }
        .faq-item.is-active {
            border-radius: 18px;
            border-color: var(--gold-light, var(--gold));
            background: linear-gradient(135deg,
                rgba(184, 150, 90, 0.06),
                rgba(184, 150, 90, 0.02));
            box-shadow: 0 6px 16px rgba(184, 150, 90, 0.15);
        }
        .faq-q {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 16px 24px;
            cursor: pointer;
            background: transparent;
            border: none;
            width: 100%;
            text-align: left;
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text);
            line-height: 1.5;
            transition: color 0.2s ease;
        }
        .faq-q:hover { color: var(--gold-light, var(--gold)); }
        .faq-item.is-active .faq-q { color: var(--gold-light, var(--gold)); }
        .faq-q .faq-chevron {
            color: var(--gold);
            flex-shrink: 0;
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            font-size: 1rem;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .faq-q .faq-chevron.open { transform: rotate(45deg); }
        .faq-a {
            display: none;
            padding: 0 24px;
            font-size: 0.92rem;
            color: var(--text-muted);
            line-height: 1.78;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                        padding 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .faq-a.open {
            display: block;
            max-height: 2000px;
            padding: 0 24px 18px 24px;
            animation: faqPillReveal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        /* ────────────────────────────────────────────────────────
           ORTHODOX FAQ — Q&A badge style (scoped to #orth-faq only)
           Adds style-#8 "Q" and "A" badges while keeping the pill shape.
           ──────────────────────────────────────────────────────── */
        #orth-faq .faq-q {
            align-items: flex-start;
            gap: 12px;
        }
        #orth-faq .faq-q::before {
            content: "Q";
            flex: none;
            width: 26px;
            height: 26px;
            border-radius: 7px;
            background: var(--gold);
            color: var(--navy-deep, #1a1207);
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            display: grid;
            place-items: center;
            font-size: 0.9rem;
            margin-top: 1px;
        }
        #orth-faq .faq-a {
            position: relative;
        }
        #orth-faq .faq-a.open {
            padding-left: 62px;
        }
        #orth-faq .faq-a::before {
            content: "A";
            position: absolute;
            left: 24px;
            top: 0;
            width: 26px;
            height: 26px;
            border-radius: 7px;
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            color: var(--gold-light);
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            display: grid;
            place-items: center;
            font-size: 0.9rem;
        }
        /* Light mode: keep Q badge text readable */
        body.light-mode #orth-faq .faq-q::before {
            background: var(--gold);
            color: #fffaf0;
        }
        body.light-mode #orth-faq .faq-a::before {
            color: #8a6520;
        }
        @keyframes faqPillReveal {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .faq-item, .faq-q, .faq-a, .faq-q .faq-chevron {
                transition: none !important;
                animation: none !important;
            }
        }

        /* ============================================================
           DAILY PRAYER TEMPLATE
        ============================================================ */
        .pray-template {
            background: linear-gradient(135deg, var(--bg) 0%, var(--bg-elevated) 100%);
            border-radius: 14px;
            padding: 28px 30px;
            margin: 24px 0;
            border: 1px solid var(--gold-border);
        }
        .pray-template h4 {
            color: var(--gold-light);
            margin: 0 0 20px;
            font-size: 1rem;
            text-transform: none;
            letter-spacing: 0;
            font-family: 'Playfair Display', serif;
        }
        .pray-step {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            margin-bottom: 14px;
        }
        .pray-step-num {
            width: 28px; height: 28px;
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--gold-light);
            flex-shrink: 0;
            margin-top: 2px;
            font-family: 'Inter', sans-serif;
        }
        .pray-step p {
            font-size: 0.9rem;
            color: rgba(232,220,200,0.75);
            margin: 0;
            line-height: 1.68;
        }
        .pray-step p strong { color: var(--gold-light); font-weight: 600; }

        /* ============================================================
           Spread the Gospel — PERSONAL FIELD NOTES
        ============================================================ */

        /* ============================================================
           HELL — WARNING CALLOUT & SECTION STYLES
        ============================================================ */
        .hell-warning {
            background: linear-gradient(135deg, rgba(90,15,15,0.4) 0%, rgba(65,10,10,0.28) 100%);
            border: 1px solid rgba(200,55,55,0.35);
            border-left: 4px solid #c03535;
            border-radius: 0 10px 10px 0;
            padding: 18px 22px;
            margin: 18px 0;
        }
        .hell-warning h4 {
            color: #e06868;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 0 0 9px;
        }
        .hell-warning p {
            font-size: 0.92rem;
            color: #c89090;
            margin: 0;
            line-height: 1.72;
        }
        .hell-warning strong { color: #e8a8a8; }

        /* ============================================================
           HEAVEN CALLOUT — sky-blue accent block for Heaven section.
           Replaces inline-styled .hell-warning overrides.
           Default: sky tones. Add .sage modifier for green variant.
        ============================================================ */
        .heaven-callout {
            background: linear-gradient(135deg, rgba(20,60,100,0.28) 0%, rgba(10,40,70,0.18) 100%);
            border: 1px solid rgba(180,220,255,0.30);
            border-left: 4px solid #c8e8ff;
            border-radius: 0 10px 10px 0;
            padding: 18px 22px;
            margin: 18px 0;
        }
        .heaven-callout h4 {
            color: #c8e8ff;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 0 0 9px;
        }
        .heaven-callout p {
            font-size: 0.92rem;
            color: #a8c8e8;
            margin: 0;
            line-height: 1.72;
        }
        .heaven-callout strong { color: #d8e8f8; }

        /* Green/sage variant — for Tab 3 "Thief on the Cross" callout */
        .heaven-callout.sage {
            background: linear-gradient(135deg, rgba(20,80,40,0.28) 0%, rgba(10,60,30,0.18) 100%);
            border: 1px solid rgba(122,191,138,0.30);
            border-left: 4px solid #7abf8a;
        }
        .heaven-callout.sage h4 { color: #a8e0b8; }
        .heaven-callout.sage p  { color: #98c8a8; }
        .heaven-callout.sage strong { color: #c8e8d0; }

        /* Light-mode overrides */
        body.light-mode .heaven-callout {
            background: linear-gradient(135deg, rgba(200,232,255,0.45) 0%, rgba(220,240,255,0.30) 100%);
            border-color: rgba(80,140,200,0.4);
            border-left-color: #5a9ad4;
        }
        body.light-mode .heaven-callout h4 { color: #1a4d7a; }
        body.light-mode .heaven-callout p  { color: var(--text); }
        body.light-mode .heaven-callout strong { color: #0a3050; }

        body.light-mode .heaven-callout.sage {
            background: linear-gradient(135deg, rgba(200,232,210,0.45) 0%, rgba(220,240,225,0.30) 100%);
            border-color: rgba(80,140,90,0.4);
            border-left-color: #4a8c5a;
        }
        body.light-mode .heaven-callout.sage h4 { color: #1a5d2a; }
        body.light-mode .heaven-callout.sage strong { color: #0a3d10; }

        .hell-urgent {
            background: linear-gradient(135deg, rgba(100,35,0,0.35) 0%, rgba(80,25,0,0.25) 100%);
            border: 1px solid rgba(220,110,30,0.35);
            border-left: 4px solid #d06820;
            border-radius: 0 10px 10px 0;
            padding: 18px 22px;
            margin: 18px 0;
        }
        .hell-urgent h4 {
            color: #e09050;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin: 0 0 9px;
        }
        .hell-urgent p {
            font-size: 0.92rem;
            color: #c8a080;
            margin: 0;
            line-height: 1.72;
        }
        .hell-urgent strong { color: #e8c0a0; }

        /* ============================================================
           ISLAM — QURAN & HADITH CITATION BOXES
        ============================================================ */
        .quran-box {
            background: linear-gradient(135deg, rgba(35,65,25,0.3) 0%, rgba(25,50,18,0.2) 100%);
            border: 1px solid rgba(70,130,50,0.32);
            border-left: 4px solid #5a9a40;
            border-radius: 0 10px 10px 0;
            padding: 16px 20px;
            margin: 16px 0;
        }
        .quran-box .quran-label {
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #7abf55;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .quran-box p {
            font-size: 0.9rem;
            color: #9ac878;
            font-style: italic;
            margin: 0;
            line-height: 1.72;
        }
        .quran-box .quran-refute {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(70,130,50,0.22);
            font-style: normal;
            font-size: 0.88rem;
            color: var(--text-muted);
        }

        /* ── Refuted Quran box: flips palette (red citation / green refutation) ── */
        .quran-box.refuted {
            background: linear-gradient(135deg, rgba(100,20,20,0.25) 0%, rgba(80,15,15,0.18) 100%);
            border: 1px solid rgba(200,80,80,0.3);
            border-left: 4px solid #c04040;
        }
        .quran-box.refuted .quran-label { color: #d07070; }
        .quran-box.refuted > p { color: #c89898; }

        .hadith-box {
            background: linear-gradient(135deg, rgba(30,55,50,0.3) 0%, rgba(20,45,40,0.2) 100%);
            border: 1px solid rgba(50,120,100,0.3);
            border-left: 4px solid #3a9a80;
            border-radius: 0 10px 10px 0;
            padding: 16px 20px;
            margin: 16px 0;
        }
        .hadith-box .quran-label { color: #5abf9a; }
        .hadith-box p { color: #7ac8b0; font-style: italic; font-size: 0.9rem; margin: 0; line-height: 1.72; }
        .hadith-box .quran-refute {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(50,120,100,0.22);
            font-style: normal;
            font-size: 0.88rem;
            color: var(--text-muted);
        }
        .hadith-box.refuted {
            background: linear-gradient(135deg, rgba(100,20,20,0.25) 0%, rgba(80,15,15,0.18) 100%);
            border: 1px solid rgba(200,80,80,0.3);
            border-left: 4px solid #c04040;
        }
        .hadith-box.refuted .quran-label { color: #d07070; }
        .hadith-box.refuted > p { color: #c89898; }

        /* ============================================================
           WORLD RELIGIONS — CATHOLICISM NESTED SUB-TABS & CCC BOX
        ============================================================ */
        .cath-tabs {
            display: flex;
            gap: 3px;
            overflow-x: auto;
            scrollbar-width: none;
            margin: 20px 0 22px;
            border-bottom: 1px solid rgba(184,150,90,0.15);
            background: var(--navy-deep);
            border-radius: 10px 10px 0 0;
            padding: 10px 50px 0 10px; /* padding-right lets last tab scroll clear */
            touch-action: pan-x;
            -webkit-overflow-scrolling: touch;
        }
        .cath-tabs::-webkit-scrollbar { display: none; }
        .cath-tab {
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            margin-bottom: -1px;
            padding: 8px 13px;
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--text-light);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.18s ease;
            border-radius: 6px 6px 0 0;
        }
        .cath-tab:hover { color: var(--text); background: rgba(184,150,90,0.06); }
        .cath-tab.active { color: var(--gold-light); border-bottom-color: var(--gold); }
        .cath-panel { display: none; }
        .cath-panel.active { display: block; animation: revealUp 0.3s cubic-bezier(0.22,1,0.36,1) forwards; }

        /* CCC Reference box — distinct from other callouts */
        .ccc-box {
            background: linear-gradient(135deg, rgba(100,20,20,0.25) 0%, rgba(80,15,15,0.18) 100%);
            border: 1px solid rgba(200,80,80,0.3);
            border-left: 4px solid #c04040;
            border-radius: 0 10px 10px 0;
            padding: 16px 20px;
            margin: 16px 0;
        }
        .ccc-box .ccc-label {
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #d07070;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .ccc-box p {
            font-size: 0.9rem;
            color: #c89898;
            font-style: italic;
            margin: 0;
            line-height: 1.72;
        }
        .ccc-box .ccc-refute {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(200,80,80,0.2);
            font-style: normal;
            font-size: 0.88rem;
            color: var(--text-muted);
        }

        /* Religion main tabs wrapper */
        .religion-intro {
            font-family: 'Playfair Display', serif;
            font-size: 1.05rem;
            font-style: italic;
            color: var(--text-muted);
            line-height: 1.7;
            margin-bottom: 24px;
            padding: 16px 20px;
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            border-radius: 10px;
        }

        /* ============================================================
           10 COMMANDMENTS — COMMANDMENT ACCORDION CARDS
        ============================================================ */
        .cmd-card {
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 12px;
            background: var(--navy);
        }
        .cmd-header {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 14px 20px;
            cursor: pointer;
            background: transparent;
            border: none;
            width: 100%;
            text-align: left;
            transition: background 0.18s;
        }
        .cmd-header:hover { background: rgba(184,150,90,0.06); }
        .cmd-num {
            width: 40px; height: 40px;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Playfair Display', serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--navy-deep);
            flex-shrink: 0;
        }
        .cmd-title { flex: 1; }
        .cmd-title strong {
            display: block;
            font-family: 'Playfair Display', serif;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text);
        }
        .cmd-title span {
            font-size: 0.78rem;
            color: var(--text-light);
            font-style: italic;
        }
        .cmd-chevron {
            color: var(--gold);
            font-size: 0.85rem;
            transition: transform 0.3s;
            flex-shrink: 0;
        }
        .cmd-chevron.open { transform: rotate(180deg); }
        .cmd-body {
            display: none;
            padding: 18px 22px 22px;
            border-top: 1px solid var(--border);
        }
        .cmd-body.open { display: block; }

        /* Tablet label badge */
        .tablet-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            border-radius: 8px;
            padding: 6px 14px;
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--gold-light);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        /* ============================================================
           HOLY SPIRIT — FRUIT GRID & NAME CARDS
        ============================================================ */
        .fruit-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
            margin: 20px 0;
        }
        .fruit-card {
            background: var(--navy);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 18px;
            position: relative;
            overflow: hidden;
        }
        .fruit-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--gold), var(--gold-light));
        }
        .fruit-card h4 {
            color: var(--gold-light);
            font-family: 'Playfair Display', serif;
            font-size: 0.95rem;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
            margin: 0 0 6px;
        }
        .fruit-card p {
            font-size: 0.83rem;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.65;
        }

        .spirit-name-card {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            background: var(--navy);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px 18px;
            margin-bottom: 10px;
        }
        .spirit-name-badge {
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            border-radius: 8px;
            padding: 6px 10px;
            font-family: 'Playfair Display', serif;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--gold-light);
            white-space: nowrap;
            flex-shrink: 0;
            letter-spacing: 0.02em;
            align-self: flex-start;
            margin-top: 2px;
        }
        .spirit-name-card p {
            font-size: 0.88rem;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.7;
        }
        .spirit-name-card strong { color: var(--text); }

        /* ============================================================
           TAB SCROLL INDICATOR (gradient fade + arrow)
        ============================================================ */
        .tabs-scroll-wrap {
            position: relative;
        }
        /* Right fade + chevron */
        .tabs-scroll-wrap::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 2px;
            width: 50px;
            background: linear-gradient(to right, transparent 0%, var(--bg-elevated) 70%);
            pointer-events: auto;
            cursor: pointer;
            z-index: 2;
            transition: opacity 0.25s ease;
            border-radius: 0 6px 0 0;
        }
        .tabs-scroll-wrap::before {
            content: '›';
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-65%);
            color: var(--gold);
            font-size: 1.5rem;
            line-height: 1;
            pointer-events: none;
            z-index: 3;
            transition: opacity 0.25s ease;
            filter: drop-shadow(0 0 6px rgba(184,150,90,0.7));
            animation: tabHintBounce 1.6s ease-in-out 0.6s 3;
        }
        @keyframes tabHintBounce {
            0%, 100% { transform: translateY(-65%) translateX(0);  opacity: 1; }
            40%       { transform: translateY(-65%) translateX(6px); opacity: 1; }
            70%       { transform: translateY(-65%) translateX(-1px); opacity: 0.7; }
        }
        /* Swipe pill hint — inline with the arrow */
        .tabs-scroll-wrap {
            position: relative;
        }
        .tabs-scroll-wrap .scroll-hint-pill {
            position: absolute;
            right: 28px;
            top: 50%;
            transform: translateY(-65%);
            display: flex;
            align-items: center;
            gap: 5px;
            pointer-events: none;
            z-index: 4;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .tabs-scroll-wrap .scroll-hint-pill span {
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
            color: var(--navy-deep);
            padding: 4px 11px 4px 9px;
            border-radius: 9999px;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            box-shadow: 0 2px 10px rgba(0,0,0,0.4);
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }
        @keyframes pillPulse {
            0%, 100% { transform: scale(1);   box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
            50%       { transform: scale(1.08); box-shadow: 0 4px 16px rgba(184,150,90,0.55); }
        }
        .tabs-scroll-wrap.at-end .scroll-hint-pill,
        .tabs-scroll-wrap.no-scroll .scroll-hint-pill {
            opacity: 0 !important;
        }
        .tabs-scroll-wrap .scroll-hint-pill.pill-visible {
            opacity: 1;
        }

        /* Left scroll arrow button */
        .tabs-scroll-wrap .scroll-left-btn {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 2px;
            width: 50px;
            background: linear-gradient(to left, transparent 0%, var(--bg-elevated) 70%);
            z-index: 2;
            cursor: pointer;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
            border-radius: 6px 0 0 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 6px;
        }
        .tabs-scroll-wrap .scroll-left-btn::before {
            content: '‹';
            color: var(--gold);
            font-size: 1.5rem;
            line-height: 1;
            filter: drop-shadow(0 0 6px rgba(184,150,90,0.7));
            pointer-events: none;
        }
        .tabs-scroll-wrap.at-start .scroll-left-btn,
        .tabs-scroll-wrap.no-scroll .scroll-left-btn {
            opacity: 0;
            pointer-events: none;
        }
        .tabs-scroll-wrap:not(.at-start):not(.no-scroll) .scroll-left-btn {
            opacity: 1;
            pointer-events: auto;
        }
        /* Hide right arrow when at end */
        .tabs-scroll-wrap.at-end::after,
        .tabs-scroll-wrap.at-end::before,
        .tabs-scroll-wrap.no-scroll::after,
        .tabs-scroll-wrap.no-scroll::before {
            opacity: 0;
            pointer-events: none;
        }

        /* ── Evidence Resource Cards ────────────────────────── */
        .evid-resource-card {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            background: var(--navy);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px 16px;
            text-decoration: none;
            color: var(--text);
            transition: border-color 0.18s, background 0.18s;
        }
        a.evid-resource-card:hover {
            border-color: var(--gold-border);
            background: rgba(184,150,90,0.08);
        }
        .evid-resource-card strong {
            display: block;
            font-size: 0.9rem;
            color: var(--text);
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            margin-bottom: 4px;
        }
        .evid-resource-card p {
            font-size: 0.83rem;
            color: var(--text-muted);
            margin: 0 0 6px;
            line-height: 1.6;
        }
        .evid-link-label {
            font-size: 0.75rem;
            color: var(--gold-light);
            font-family: 'Inter', sans-serif;
        }
        .evid-yt-icon {
            color: #e06868;
            font-size: 1.1rem;
            flex-shrink: 0;
            margin-top: 3px;
        }
        body.light-mode .evid-resource-card { background: var(--bg-elevated); border-color: var(--border); }
        body.light-mode .evid-resource-card strong { color: var(--text); }
        body.light-mode .evid-resource-card p { color: var(--text); }

        /* Evidence section: inline YouTube link buttons */
        .evid-yt-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(184, 150, 90, 0.12);
            border: 1px solid var(--gold-border);
            border-radius: 8px;
            padding: 6px 12px;
            color: var(--gold-light);
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            font-weight: 600;
            text-decoration: none;
            margin-top: 10px;
            transition: background 0.2s, border-color 0.2s;
        }
        .evid-yt-btn:hover {
            background: rgba(184, 150, 90, 0.22);
            border-color: var(--gold);
            text-decoration: none;
        }
        .evid-yt-btn-icon {
            color: #e06868;
        }
        .evid-yt-btn-lg {
            padding: 8px 14px;
            font-size: 0.82rem;
            margin-top: 8px;
            margin-bottom: 10px;
        }
        .evid-yt-btn-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        .evid-yt-btn-row .evid-yt-btn {
            margin-top: 0;
        }
        body.light-mode .evid-yt-btn {
            background: rgba(184, 150, 90, 0.10);
        }
        body.light-mode .evid-yt-btn:hover {
            background: rgba(184, 150, 90, 0.20);
        }

        .util-back-btn {
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            color: var(--gold-light);
            border-radius: 8px;
            padding: 6px 11px;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.18s ease;
            line-height: 1;
            display: flex;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
            opacity: 0.35;
            pointer-events: none;
        }
        .util-back-btn.can-go-back {
            opacity: 1;
            pointer-events: auto;
        }
        .util-back-btn:hover { background: rgba(184,150,90,0.25); color: var(--text); }
        /* Light mode fix for tab gradient fade */
        body.light-mode .tabs-scroll-wrap::after {
            background: linear-gradient(to right, transparent 0%, var(--bg-elevated) 70%);
        }

        /* ============================================================
           HELPING UNBELIEVERS — TAB SYSTEM (mirrors pray-tabs)
        ============================================================ */
        .help-tabs {
            display: flex;
            gap: 4px;
            overflow-x: auto;
            scrollbar-width: none;
            margin: 24px 0 28px;
            border-bottom: 1px solid var(--border);
            padding-right: 50px;
            touch-action: pan-x;
            -webkit-overflow-scrolling: touch;
        }
        .help-tabs::-webkit-scrollbar { display: none; }
        .help-tab {
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            margin-bottom: -1px;
            padding: 10px 16px;
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-light);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.18s ease;
            border-radius: 6px 6px 0 0;
        }
        .help-tab:hover { color: var(--text); background: rgba(184,150,90,0.05); }
        .help-tab.active { color: var(--gold-light); border-bottom-color: var(--gold); }
        .help-panel { display: none; }
        .help-panel.active { display: block; animation: revealUp 0.35s cubic-bezier(0.22,1,0.36,1) forwards; }

        /* Pathway cards */
        .pathway-card {
            background: var(--navy);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px 22px;
            margin-bottom: 14px;
        }
        .pathway-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
        }
        .pcard-icon {
            width: 34px; height: 34px;
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.88rem;
            color: var(--gold);
            flex-shrink: 0;
        }
        .pathway-card h4 {
            color: var(--gold-light);
            font-family: 'Playfair Display', serif;
            font-size: 1rem;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
            margin: 0;
        }
        .pathway-card p { font-size: 0.91rem; color: var(--text-muted); margin: 0; line-height: 1.72; }

        /* Pathway-card as accordion (only when used as <details>, not <div>).
           This selector-by-element-type approach leaves the ~540 existing
           <div class="pathway-card"> instances elsewhere completely unaffected. */
        details.pathway-card > summary.pathway-card-header {
            cursor: pointer;
            list-style: none;
            position: relative;
            padding-right: 32px;
            margin-bottom: 0;
            user-select: none;
        }
        details.pathway-card > summary.pathway-card-header::-webkit-details-marker { display: none; }
        details.pathway-card > summary.pathway-card-header::after {
            content: "›";
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%) rotate(90deg);
            transition: transform 0.2s ease;
            font-size: 1.5rem;
            color: var(--gold-light);
            opacity: 0.7;
            font-weight: 700;
            line-height: 1;
        }
        details.pathway-card[open] > summary.pathway-card-header::after {
            transform: translateY(-50%) rotate(270deg);
            opacity: 0.9;
        }
        details.pathway-card > summary.pathway-card-header:hover::after {
            opacity: 1;
        }
        details.pathway-card[open] > summary.pathway-card-header {
            margin-bottom: 14px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border);
        }

        /* Secondary subhead inside a pathway-card (smaller than the main h4 title,
           used for sections like "What Is Apostasy?" or "Key Insights").
           Replaces inline styles for consistency and easier theming. */
        .tf-card-subhead {
            color: var(--gold-light);
            font-family: 'Playfair Display', serif;
            font-size: 0.95rem;
            font-weight: 600;
            margin: 14px 0 8px;
            text-transform: none;
            letter-spacing: 0;
        }

        /* =============================================================
           3D FLIP FLASHCARDS — Reusable card component
           Used in: hell.html → Tab 1 → "The Three Words Jesus Used"
           Pure CSS + inline onclick (no app.js handler required).
           Tap toggles `.active` on the outer .flip-card.
           ============================================================= */
        .tf-flip-hint {
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            text-align: center;
            margin: 0 0 14px 0;
            opacity: 0.85;
        }
        .tf-flip-hint i { margin-right: 6px; font-size: 0.7rem; }

        .flip-grid { display: grid; gap: 16px; margin-bottom: 14px; }

        .flip-card {
            perspective: 1200px;
            width: 100%;
            height: 380px;
            cursor: pointer;
        }
        .flip-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
            transform-style: preserve-3d;
        }
        .flip-card.active .flip-inner { transform: rotateX(180deg); }

        .flip-front,
        .flip-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            border-radius: 12px;
            padding: 22px 20px;
            border: 1px solid var(--border);
        }

        /* FRONT — quiet, centered, lets the word breathe */
        .flip-front {
            background: var(--navy);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-shadow: 0 6px 18px rgba(0,0,0,0.35);
        }
        .flip-front .flip-front-icon {
            font-size: 2rem;
            color: var(--gold);
            margin-bottom: 14px;
        }
        .flip-front .flip-front-word {
            margin: 0;
            font-family: 'Playfair Display', serif;
            font-size: 1.55rem;
            font-weight: 600;
            color: var(--text);
            line-height: 1.15;
        }
        .flip-front .flip-front-greek {
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-style: italic;
            color: var(--gold-light);
            font-size: 1rem;
            margin-top: 4px;
            letter-spacing: 0.3px;
        }
        .flip-front .flip-front-tagline {
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            color: var(--text-muted);
            font-size: 0.88rem;
            margin-top: 10px;
            max-width: 22ch;
            line-height: 1.55;
        }
        .flip-front .flip-front-cue {
            font-size: 0.72rem;
            color: var(--gold);
            margin-top: 16px;
            text-transform: uppercase;
            letter-spacing: 1.4px;
            opacity: 0.85;
        }
        .flip-front .flip-front-cue i { margin-right: 6px; font-size: 0.66rem; }

        /* BACK — content-dense, scrollable as safety net */
        .flip-back {
            background: var(--navy-deep);
            transform: rotateX(180deg);
            border-color: var(--gold-border);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            box-shadow: 0 6px 18px rgba(0,0,0,0.35);
        }
        .flip-back-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--gold-border);
        }
        .flip-back-header .pcard-icon {
            width: 30px; height: 30px;
            font-size: 0.82rem;
        }
        .flip-back-header h4 {
            margin: 0;
            font-family: 'Playfair Display', serif;
            font-size: 0.98rem;
            font-weight: 600;
            color: var(--gold-light);
            line-height: 1.25;
            text-transform: none;
            letter-spacing: 0;
        }
        .flip-back p {
            margin: 0 0 9px 0;
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.65;
        }
        .flip-back p:last-of-type { margin-bottom: 0; }
        .flip-back strong { color: var(--text); font-weight: 600; }
        .flip-back em { color: var(--text); font-style: italic; }

        .flip-back-cue {
            margin-top: 14px;
            padding-top: 10px;
            border-top: 1px dashed var(--gold-border);
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            color: var(--gold);
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 1.4px;
            opacity: 0.8;
        }
        .flip-back-cue i { margin-right: 5px; font-size: 0.65rem; }

        /* Keyboard focus ring */
        .flip-card:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 4px;
            border-radius: 14px;
        }

        /* Narrow phones — bump height slightly to keep Gehenna readable */
        @media (max-width: 420px) {
            .flip-card { height: 410px; }
            .flip-front .flip-front-word { font-size: 1.4rem; }
            .flip-back p { font-size: 0.85rem; }
        }

        /* Respect reduced motion */
        @media (prefers-reduced-motion: reduce) {
            .flip-inner { transition: none; }
        }

        /* Objection accordion */
        .objection-item {
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;
            background: var(--navy);
        }
        .objection-q {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            cursor: pointer;
            background: transparent;
            border: none;
            width: 100%;
            text-align: left;
            font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text);
            transition: background 0.18s;
            line-height: 1.45;
        }
        .objection-q:hover { background: rgba(184,150,90,0.06); }
        .objection-q .obj-chevron { color: var(--gold); flex-shrink: 0; transition: transform 0.3s; font-size: 0.78rem; }
        .objection-q .obj-chevron.open { transform: rotate(180deg); }
        .objection-a { display: none; padding: 12px 18px 16px; font-size: 0.89rem; color: var(--text-muted); line-height: 1.76; border-top: 1px solid var(--border); }
        .objection-a.open { display: block; }

        /* Prayer example cards */
        .prayer-example {
            background: linear-gradient(135deg, var(--bg) 0%, var(--bg-elevated) 100%);
            border: 1px solid var(--gold-border);
            border-radius: 12px;
            padding: 20px 22px;
            margin-bottom: 14px;
        }
        .prayer-example h4 { color: var(--gold-light); font-family: 'Playfair Display', serif; font-size: 0.95rem; font-weight: 600; text-transform: none; letter-spacing: 0; margin: 0 0 10px; }
        .prayer-example p { font-size: 0.9rem; color: rgba(232,220,200,0.75); font-style: italic; line-height: 1.75; margin: 0; }

        /* Step cards */
        .step-card {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            background: var(--navy);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 18px 20px;
            margin-bottom: 12px;
        }
        .step-num {
            width: 36px; height: 36px;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Playfair Display', serif;
            font-size: 1rem; font-weight: 700;
            color: var(--navy-deep);
            flex-shrink: 0;
        }
        .step-body h4 { color: var(--text); font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; margin: 0 0 6px; }
        .step-body p { font-size: 0.9rem; color: var(--text-muted); margin: 0; line-height: 1.7; }
        .step-body p strong { color: var(--gold-light); }

        /* ============================================================
           MOBILE RESPONSIVE
        ============================================================ */
        @media (max-width: 820px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.open { transform: translateX(0); }
            .main-content { margin-left: 0; width: 100%; }
            .mobile-header { display: flex; }
            .container { margin-top: -40px; padding: 0 16px; }
            .card { padding: 28px 20px; }
            h2 { font-size: 1.7rem; }
            .app-banner { min-height: 220px; height: auto; }
            .banner-text h1 { font-size: 1.9rem; }
            .pray-tab { padding: 9px 12px; font-size: 0.78rem; }
            .pray-template { padding: 22px 18px; }
            .lp-phrase { font-size: 0.88rem; }
            .topic-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .topic-chip { padding: 12px; gap: 10px; }
            .topic-chip-icon-wrap { width: 38px; height: 38px; padding: 8px; }
            .topic-chip-title { font-size: 0.85rem; }
            .topic-chip-sub { font-size: 0.7rem; }
            .home-about-grid { grid-template-columns: 1fr; gap: 10px; }
        }

        /* ── FAQ ACCORDION (Catholicism section uses the unified pill style above) ── */
        /* Section-specific spacing for paragraph/list rendering inside answers */
        .faq-a p { margin: 0 0 10px 0; }
        .faq-a ul { margin: 6px 0 10px 18px; padding: 0; }
        .faq-a li { margin-bottom: 6px; }

        /* ============================================================
           LIGHT MODE OVERRIDES
        ============================================================ */
        body.light-mode {
            --bg:            #f4efe6;
            --bg-mid:        #ede8de;
            --navy:          #e0dbd0;
            --navy-mid:      #d0cbbf;
            --navy-deep:     #e8e3d8;
            --gold:          #8a6a28;
            --gold-light:    #7a5a18;
            --gold-muted:    rgba(138,106,40,0.12);
            --gold-border:   rgba(138,106,40,0.3);
            --text:          #1a1810;
            --text-muted:    #3c3424;
            --text-light:    #6a5e48;
            --red-letter:    #b03020;
            --border:        rgba(138,106,40,0.25);
        }
        body.light-mode .sidebar {
            background: linear-gradient(180deg, var(--bg) 0%, var(--bg-mid) 100%);
        }
        body.light-mode .card { background: var(--bg-elevated); }
        body.light-mode .app-banner { background-color: var(--bg-overlay); }
        body.light-mode .mobile-header {
            background: linear-gradient(135deg, var(--bg-overlay) 0%, var(--bg-mid) 100%);
        }
        body.light-mode .acts-card,
        body.light-mode .faq-item,
        body.light-mode .cmd-card,
        body.light-mode .pathway-card,
        body.light-mode .objection-item { background: var(--bg-overlay); }
        body.light-mode .fruit-card,
        body.light-mode .spirit-name-card { background: var(--bg-overlay); }

        /* ── 3D Flip Flashcards ─────────────────────────────── */
        body.light-mode .flip-front { background: var(--bg-overlay); }
        body.light-mode .flip-back  { background: var(--bg-mid); }
        body.light-mode .flip-front .flip-front-word { color: var(--text); }
        body.light-mode .flip-back strong { color: var(--text); }
        body.light-mode .flip-back em { color: var(--text); }

        /* ── Field Notes ─────────────────────────────────────── */

        /* ── Topic chips (home cards) ────────────────────────── */
        body.light-mode .topic-chip {
            background: var(--bg-overlay);
            border-color: var(--border);
        }
        body.light-mode .topic-chip:hover {
            background: var(--bg-mid);
            border-color: var(--accent);
        }

        /* ── Hamburger / menu button ─────────────────────────── */
        body.light-mode .menu-btn {
            background: var(--bg-overlay);
            border-color: var(--border);
        }
        body.light-mode .menu-btn:hover { background: var(--bg-mid); }

        /* ── Subsection swipe tabs ───────────────────────────── */
        body.light-mode .pray-tabs {
            background: var(--bg-overlay);
            border-bottom-color: var(--divider);
        }
        body.light-mode .pray-tab { color: var(--text-muted); }
        body.light-mode .pray-tab:hover {
            background: rgba(120,90,40,0.1);
            color: var(--text);
        }
        body.light-mode .pray-tab.active {
            color: var(--gold);
            border-bottom-color: var(--gold);
        }

        /* ── Hell Warning boxes ───────────────────────────────── */
        body.light-mode .hell-warning {
            background: rgba(160,20,20,0.07);
            border-color: rgba(160,20,20,0.22);
        }
        body.light-mode .hell-warning h4 { color: #8a1818; }
        body.light-mode .hell-warning p  { color: var(--text); }
        body.light-mode .hell-warning strong { color: #6e1010; }

        /* ── Hell Urgent boxes ───────────────────────────────── */
        body.light-mode .hell-urgent {
            background: rgba(160,70,0,0.07);
            border-color: rgba(160,70,0,0.22);
        }
        body.light-mode .hell-urgent h4 { color: #7a3a08; }
        body.light-mode .hell-urgent p  { color: var(--text); }
        body.light-mode .hell-urgent strong { color: #5a2a04; }

        /* ── Pray Callout (green accent) ─────────────────────── */
        body.light-mode .pray-callout {
            background: rgba(25,90,50,0.07);
            border-color: rgba(25,90,50,0.22);
            border-left-color: #2a7a48;
        }
        body.light-mode .pray-callout h4    { color: #1a5c30; }
        body.light-mode .pray-callout p     { color: var(--text); }
        body.light-mode .pray-callout strong { color: #124020; }

        /* ── Pray Warning (amber/orange accent) ──────────────── */
        body.light-mode .pray-warning {
            background: rgba(130,60,10,0.07);
            border-color: rgba(130,60,10,0.22);
            border-left-color: #8a4010;
        }
        body.light-mode .pray-warning h4 { color: #6a3008; }
        body.light-mode .pray-warning p  { color: var(--text); }

        /* ── Theological Foundation box ──────────────────────── */
        body.light-mode .theological-foundation {
            background: var(--foundation-bg);
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }
        body.light-mode .theological-foundation p { color: var(--text); }
        body.light-mode .theological-foundation .scripture { color: var(--text); }

        /* ── Prayer Examples ─────────────────────────────────── */
        body.light-mode .prayer-example {
            background: var(--bg-elevated);
        }
        body.light-mode .prayer-example p { color: var(--text); font-style: italic; }

        /* ── CCC Doctrine boxes (Catholicism) ────────────────── */
        body.light-mode .ccc-box {
            background: rgba(140,18,18,0.06);
            border-color: rgba(140,18,18,0.20);
        }
        body.light-mode .ccc-box .ccc-label { color: #7a1818; }
        body.light-mode .ccc-box p { color: var(--text); }
        /* ── Orthodox Doctrine boxes ──────────────────────────── */
        .orth-box {
            background: linear-gradient(135deg, rgba(20,45,90,0.28) 0%, rgba(12,30,65,0.20) 100%);
            border: 1px solid rgba(180,148,60,0.30);
            border-left: 4px solid #B8943F;
            border-radius: 0 10px 10px 0;
            padding: 16px 20px;
            margin: 16px 0;
        }
        .orth-box .orth-label {
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #C8A84A;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .orth-box p {
            font-size: 0.9rem;
            color: #C4AE78;
            font-style: italic;
            margin: 0;
            line-height: 1.72;
        }
        .orth-box .orth-refute {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(180,148,60,0.20);
            font-style: normal;
            font-size: 0.88rem;
            color: var(--text-muted);
        }
        body.light-mode .orth-box {
            background: rgba(20,60,120,0.06);
            border-color: rgba(140,100,20,0.25);
        }
        body.light-mode .orth-box .orth-label { color: #7a6010; }
        body.light-mode .orth-box p { color: var(--text); }

        /* ── Highlight box ───────────────────────────────────── */
        body.light-mode .highlight-box { color: var(--text); }

        /* ── Scripture boxes ─────────────────────────────────── */
        body.light-mode .scripture {
            background: linear-gradient(135deg, rgba(50,130,30,0.13) 0%, rgba(40,110,25,0.07) 100%);
            border-left: 4px solid #4a8a30;
            color: #1f3a14;
        }
        body.light-mode .scripture::before { color: #3a8020; opacity: 0.4; }

        /* ── Script Guide accordion + bubbles ────────────────── */
        body.light-mode .script-toggle {
            background: rgba(80,100,60,0.1);
            border-color: rgba(80,100,60,0.28);
            color: #3a5228;
        }
        body.light-mode .script-toggle:hover,
        body.light-mode .script-toggle.open {
            background: rgba(80,100,60,0.16);
            border-color: rgba(80,100,60,0.45);
        }
        body.light-mode .script-panel {
            background: rgba(80,100,60,0.06);
            border-color: rgba(80,100,60,0.25);
        }
        body.light-mode .script-bubble {
            background: var(--verse-bg);
            border-color: var(--verse-border);
            color: #1a2e1a;
        }
        body.light-mode .script-bubble-label {
            background: rgba(80,130,80,0.12);
            border-color: rgba(80,130,80,0.28);
            color: #2e5a2e;
        }
        body.light-mode .script-bubble::before { color: #4a8a4a; }

        /* ── Lord's Prayer row ───────────────────────────────── */
        body.light-mode .lp-row {
            background: rgba(80,65,45,0.10);
        }

        /* ── Quran / Hadith boxes (World Religions) ──────────── */
        body.light-mode .quran-box {
            background: rgba(25,80,15,0.07);
            border-color: rgba(25,80,15,0.20);
        }
        body.light-mode .quran-box .quran-label { color: #1a5010; }
        body.light-mode .quran-box p { color: var(--text); }

        /* ── Refuted Quran box (light) ──────────────────────── */
        body.light-mode .quran-box.refuted {
            background: rgba(140,18,18,0.06);
            border-color: rgba(140,18,18,0.20);
            border-left-color: #c04040;
        }
        body.light-mode .quran-box.refuted .quran-label { color: #7a1818; }
        body.light-mode .quran-box.refuted > p { color: var(--text); }
        body.light-mode .hadith-box {
            background: rgba(25,80,15,0.05);
            border-color: rgba(25,80,15,0.15);
        }
        body.light-mode .hadith-box p { color: var(--text) !important; }
        body.light-mode .hadith-box.refuted {
            background: rgba(140,18,18,0.06);
            border-color: rgba(140,18,18,0.20);
            border-left-color: #c04040;
        }
        body.light-mode .hadith-box.refuted .quran-label { color: #7a1818; }
        body.light-mode .hadith-box.refuted > p { color: var(--text); }

        /* ── Step cards ──────────────────────────────────────── */
        body.light-mode .step-card { background: var(--bg-elevated); }

        /* ── FAQ answer panels ───────────────────────────────── */
        body.light-mode .faq-a { color: var(--text); }
        body.light-mode .objection-a { color: var(--text); }

        /* ── Religion section intro ──────────────────────────── */
        body.light-mode .religion-intro { color: var(--text); }

        /* ── Banner pill ─────────────────────────────────────── */
        body.light-mode .banner-pill {
            background: rgba(70,50,15,0.14);
            border-color: rgba(70,50,15,0.32);
            color: var(--text-muted);
        }
        body.light-mode .banner-pill i { color: var(--gold-light); }

        /* ============================================================
           SCRIPTURE VERSE TRANSLATION DISPLAY
           ------------------------------------------------------------
           BSB is the new standard for all new content; each scripture
           block uses a single translation span (verse-bsb most often,
           occasionally verse-csb or verse-nlt via the user-approved
           exception path).

           The legacy dual-translation pattern (.verse-esv + .verse-nlt
           in the same .scripture block) survives in Hell, Heaven,
           Eternal Security, and Spirit Tabs 1–2 until a future
           retroactive conversion pass. For those legacy blocks the
           default rule below shows ESV and hides NLT. The old
           body.show-nlt runtime toggle has been removed.
        ============================================================ */
        .verse-bsb { display: block; }
        .verse-csb { display: block; }
        .verse-esv { display: block; }   /* legacy dual blocks: ESV is the visible one */
        .verse-nlt { display: none; }    /* legacy dual blocks: NLT hidden by default */

        /* ============================================================
           UTILITY BAR (Sticky Bottom)
        ============================================================ */
        .utility-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 1100;
            background: linear-gradient(135deg, var(--bg) 0%, var(--bg-elevated) 100%);
            border-top: 1px solid var(--gold-border);
            box-shadow: 0 -4px 24px rgba(0,0,0,0.45);
            padding: 10px 16px;
            padding-bottom: calc(10px + env(safe-area-inset-bottom));
            font-size: 16px; /* immune to A+/A- scaling */
        }
        body.light-mode .utility-bar {
            background: linear-gradient(135deg, var(--bg) 0%, var(--bg-elevated) 100%);
        }
        .utility-bar-inner {
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: nowrap;
        }
        /* Font Buttons */
        .util-font-group {
            display: flex;
            gap: 5px;
            align-items: center;
            flex-shrink: 0;
        }
        .util-font-btn {
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            color: var(--gold-light);
            border-radius: 8px;
            padding: 6px 10px;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.18s ease;
            line-height: 1;
            min-width: 34px;
            text-align: center;
            flex-shrink: 0;
        }
        .util-font-btn:hover { background: rgba(184,150,90,0.25); color: var(--text); }
        /* (ESV/NLT pill toggle CSS removed: .version-toggle-wrap,
            .version-label, .toggle-track, .toggle-thumb. The runtime
            translation toggle no longer exists — translation is now
            static per verse via verse-bsb / verse-csb / verse-nlt /
            (legacy) verse-esv classes.) */
        /* Theme Toggle Button */
        .util-theme-btn {
            background: var(--gold-muted);
            border: 1px solid var(--gold-border);
            color: var(--gold-light);
            border-radius: 8px;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.18s ease;
            flex-shrink: 0;
        }
        .util-theme-btn:hover { background: rgba(184,150,90,0.25); color: var(--text); }

        /* ============================================================
           THEMED PCARD-ICON COLORS  (icon-specific color overrides)
        ============================================================ */

        /* ── HELL ── */
        .pcard-icon:has(.fa-fire)            { color: #e06868; background: rgba(224,104,104,0.10); border-color: rgba(224,104,104,0.30); }
        .pcard-icon:has(.fa-fire-flame-curved) { color: #e07a50; background: rgba(224,122,80,0.10); border-color: rgba(224,122,80,0.28); }
        .pcard-icon:has(.fa-skull)           { color: #a0a0b8; background: rgba(140,140,180,0.10); border-color: rgba(140,140,180,0.28); }
        .pcard-icon:has(.fa-skull-crossbones){ color: #a0a0b8; background: rgba(140,140,180,0.10); border-color: rgba(140,140,180,0.28); }
        .pcard-icon:has(.fa-water)           { color: #6090d4; background: rgba(96,144,212,0.10);  border-color: rgba(96,144,212,0.28); }
        .pcard-icon:has(.fa-moon)            { color: #8899cc; background: rgba(120,140,210,0.10); border-color: rgba(120,140,210,0.28); }
        .pcard-icon:has(.fa-worm)            { color: #8a7a50; background: rgba(138,122,80,0.10);  border-color: rgba(138,122,80,0.28); }
        .pcard-icon:has(.fa-person-walking-dashed-line-arrow-right) { color: #a0b0c8; background: rgba(140,160,190,0.10); border-color: rgba(140,160,190,0.28); }

        /* ── HOLY SPIRIT ── */
        .pcard-icon:has(.fa-heart-pulse)     { color: #e07090; background: rgba(224,112,144,0.10); border-color: rgba(224,112,144,0.28); }
        .pcard-icon:has(.fa-house)           { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-stamp)           { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-coins)           { color: #d4b060; background: rgba(212,176,96,0.10);  border-color: rgba(212,176,96,0.28); }
        .pcard-icon:has(.fa-arrow-up)        { color: #7abf8a; background: rgba(122,191,138,0.10); border-color: rgba(122,191,138,0.28); }
        .pcard-icon:has(.fa-book-open)       { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-hands-praying)   { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-compass)         { color: #7ab0d4; background: rgba(122,176,212,0.10); border-color: rgba(122,176,212,0.28); }
        .pcard-icon:has(.fa-bolt)            { color: #e0c050; background: rgba(224,192,80,0.10);  border-color: rgba(224,192,80,0.28); }
        .pcard-icon:has(.fa-heart-crack)     { color: #d06868; background: rgba(208,104,104,0.10); border-color: rgba(208,104,104,0.28); }
        .pcard-icon:has(.fa-ban)             { color: #d07060; background: rgba(208,112,96,0.10);  border-color: rgba(208,112,96,0.28); }
        .pcard-icon:has(.fa-mask)            { color: #9090a8; background: rgba(130,130,160,0.10); border-color: rgba(130,130,160,0.28); }

        /* ── GOD'S HEART / LOST PARABLES ── */
        .pcard-icon:has(.fa-sheep)           { color: #d8d0c4; background: rgba(200,192,180,0.12); border-color: rgba(200,192,180,0.30); }
        .pcard-icon:has(.fa-person-walking-arrow-loop-left) { color: #7abf8a; background: rgba(122,191,138,0.10); border-color: rgba(122,191,138,0.28); }

        /* ── HELPING UNBELIEVERS ── */
        .pcard-icon:has(.fa-utensils)        { color: #e0a868; background: rgba(224,168,104,0.10); border-color: rgba(224,168,104,0.28); }
        .pcard-icon:has(.fa-clock)           { color: #8baac8; background: rgba(139,170,200,0.10); border-color: rgba(139,170,200,0.28); }
        .pcard-icon:has(.fa-ear-listen)      { color: #9ab8c8; background: rgba(154,184,200,0.10); border-color: rgba(154,184,200,0.28); }
        .pcard-icon:has(.fa-handshake-angle) { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }

        /* ── MODELING CHRIST ── */
        .pcard-icon:has(.fa-person-walking)  { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-seedling)        { color: #6db87a; background: rgba(109,184,122,0.10); border-color: rgba(109,184,122,0.28); }
        .pcard-icon:has(.fa-heart)           { color: #e0728a; background: rgba(224,114,138,0.10); border-color: rgba(224,114,138,0.28); }
        .pcard-icon:has(.fa-comments)        { color: #8ab8d4; background: rgba(138,184,212,0.10); border-color: rgba(138,184,212,0.28); }
        .pcard-icon:has(.fa-users)           { color: #9a9ad0; background: rgba(154,154,208,0.10); border-color: rgba(154,154,208,0.28); }

        /* ── Spreading the Gospel ── */
        .pcard-icon:has(.fa-eye)             { color: #8ab8d4; background: rgba(138,184,212,0.10); border-color: rgba(138,184,212,0.28); }
        .pcard-icon:has(.fa-magnet)          { color: #d4906a; background: rgba(212,144,106,0.10); border-color: rgba(212,144,106,0.28); }
        .pcard-icon:has(.fa-shield)          { color: #7090b8; background: rgba(112,144,184,0.10); border-color: rgba(112,144,184,0.28); }
        .pcard-icon:has(.fa-people-group)    { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-id-card)         { color: #9ab0c8; background: rgba(154,176,200,0.10); border-color: rgba(154,176,200,0.28); }
        .pcard-icon:has(.fa-bookmark)        { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-mobile-screen)   { color: #90b0c8; background: rgba(144,176,200,0.10); border-color: rgba(144,176,200,0.28); }
        .pcard-icon:has(.fa-people-arrows)   { color: #9ab8d4; background: rgba(154,184,212,0.10); border-color: rgba(154,184,212,0.28); }
        .pcard-icon:has(.fa-person-chalkboard){ color: #c0a870; background: rgba(192,168,112,0.10); border-color: rgba(192,168,112,0.28); }

        /* ── GOSPEL STEPS ── */
        .pcard-icon:has(.fa-crown)           { color: #e0c060; background: rgba(224,192,96,0.12);  border-color: rgba(224,192,96,0.30); }
        .pcard-icon:has(.fa-person-falling)  { color: #c07060; background: rgba(192,112,96,0.10);  border-color: rgba(192,112,96,0.28); }
        .pcard-icon:has(.fa-cross)           { color: #ddd5c4; background: rgba(210,200,185,0.10); border-color: rgba(210,200,185,0.28); }
        .pcard-icon:has(.fa-hands-holding-heart) { color: #e0728a; background: rgba(224,114,138,0.10); border-color: rgba(224,114,138,0.28); }

        /* ── 10 COMMANDMENTS ── */
        .pcard-icon:has(.fa-gavel)           { color: #a89880; background: rgba(168,152,128,0.10); border-color: rgba(168,152,128,0.28); }
        /* evidence nav icon handled inline */
        .pcard-icon:has(.fa-magnifying-glass){ color: #8ab4c8; background: rgba(138,180,200,0.10); border-color: rgba(138,180,200,0.28); }
        .pcard-icon:has(.fa-map)             { color: #c0a96a; background: rgba(192,169,106,0.10); border-color: rgba(192,169,106,0.28); }
        .pcard-icon:has(.fa-door-open)       { color: #d4906a; background: rgba(212,144,106,0.10); border-color: rgba(212,144,106,0.28); }

        /* ── CATHOLICISM ── */
        .pcard-icon:has(.fa-microscope)      { color: #8ab8d4; background: rgba(138,184,212,0.10); border-color: rgba(138,184,212,0.28); }
        .pcard-icon:has(.fa-vial)            { color: #90c890; background: rgba(144,200,144,0.10); border-color: rgba(144,200,144,0.28); }
        .pcard-icon:has(.fa-star)            { color: #e0c050; background: rgba(224,192,80,0.10);  border-color: rgba(224,192,80,0.28); }
        .pcard-icon:has(.fa-person-praying)  { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-user-group)      { color: #9ab0c8; background: rgba(154,176,200,0.10); border-color: rgba(154,176,200,0.28); }
        .pcard-icon:has(.fa-bone)            { color: #c0b090; background: rgba(192,176,144,0.10); border-color: rgba(192,176,144,0.28); }
        .pcard-icon:has(.fa-hat-wizard)      { color: #9070c0; background: rgba(144,112,192,0.10); border-color: rgba(144,112,192,0.28); }
        .pcard-icon:has(.fa-incense-burner)  { color: #c8a070; background: rgba(200,160,112,0.10); border-color: rgba(200,160,112,0.28); }
        .pcard-icon:has(.fa-chair)           { color: #a89880; background: rgba(168,152,128,0.10); border-color: rgba(168,152,128,0.28); }
        .pcard-icon:has(.fa-sun)             { color: #e0c050; background: rgba(224,192,80,0.10);  border-color: rgba(224,192,80,0.28); }

        /* ── WORLD RELIGIONS / GENERAL ── */
        .pcard-icon:has(.fa-globe)           { color: #6baed4; background: rgba(107,174,212,0.10); border-color: rgba(107,174,212,0.28); }
        .pcard-icon:has(.fa-scroll)          { color: #c0a96a; background: rgba(192,169,106,0.10); border-color: rgba(192,169,106,0.28); }
        .pcard-icon:has(.fa-bridge)          { color: #8ab0c8; background: rgba(138,176,200,0.10); border-color: rgba(138,176,200,0.28); }
        .pcard-icon:has(.fa-peace)           { color: #7abf8a; background: rgba(122,191,138,0.10); border-color: rgba(122,191,138,0.28); }
        .pcard-icon:has(.fa-church)          { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-shield-halved)   { color: #d4756a; background: rgba(212,117,106,0.10); border-color: rgba(212,117,106,0.28); }
        .pcard-icon:has(.fa-dove)            { color: #d6e4f0; background: rgba(180,210,240,0.10); border-color: rgba(180,210,240,0.28); }
        .pcard-icon:has(.fa-anchor)           { color: #b8d4e8; background: rgba(160,200,230,0.10); border-color: rgba(160,200,230,0.28); }
        .pcard-icon:has(.fa-cloud-sun)       { color: #c8e8ff; background: rgba(180,220,255,0.10); border-color: rgba(180,220,255,0.28); }
        .pcard-icon:has(.fa-person-rays)     { color: #e0d060; background: rgba(224,208,96,0.10);  border-color: rgba(224,208,96,0.28); }
        .pcard-icon:has(.fa-ring)            { color: #e0c860; background: rgba(224,200,96,0.10);  border-color: rgba(224,200,96,0.28); }
        .pcard-icon:has(.fa-earth-americas)  { color: #6baed4; background: rgba(107,174,212,0.10); border-color: rgba(107,174,212,0.28); }
        .pcard-icon:has(.fa-infinity)        { color: #c0a96a; background: rgba(192,169,106,0.10); border-color: rgba(192,169,106,0.28); }
        .pcard-icon:has(.fa-tree)            { color: #6db87a; background: rgba(109,184,122,0.10); border-color: rgba(109,184,122,0.28); }
        .pcard-icon:has(.fa-droplet)         { color: #6baed4; background: rgba(107,174,212,0.10); border-color: rgba(107,174,212,0.28); }
        .pcard-icon:has(.fa-face-smile)      { color: #e0c050; background: rgba(224,192,80,0.10);  border-color: rgba(224,192,80,0.28); }
        .pcard-icon:has(.fa-user-check)      { color: #7abf8a; background: rgba(122,191,138,0.10); border-color: rgba(122,191,138,0.28); }
        .pcard-icon:has(.fa-ghost)           { color: #a0a0b8; background: rgba(140,140,180,0.10); border-color: rgba(140,140,180,0.28); }

        /* ── Additional pcard-icon colors (audit pass 2) ─── */

        /* Sheep emoji override — keep box consistent */
        .pcard-icon[style*="font-size:1.1rem"]  { background: rgba(200,192,180,0.12); border-color: rgba(200,192,180,0.30); }

        /* Catholicism / History */
        .pcard-icon:has(.fa-scale-balanced)  { color: #8ab4c8; background: rgba(138,180,200,0.10); border-color: rgba(138,180,200,0.28); }
        .pcard-icon:has(.fa-landmark)        { color: #a89880; background: rgba(168,152,128,0.10); border-color: rgba(168,152,128,0.28); }
        .pcard-icon:has(.fa-divide)          { color: #c8a8a8; background: rgba(200,168,168,0.10); border-color: rgba(200,168,168,0.28); }
        .pcard-icon:has(.fa-flask)           { color: #90c890; background: rgba(144,200,144,0.10); border-color: rgba(144,200,144,0.28); }
        .pcard-icon:has(.fa-calendar-plus)   { color: #a898c8; background: rgba(168,152,200,0.10); border-color: rgba(168,152,200,0.28); }
        .pcard-icon:has(.fa-calendar)        { color: #a8b8c8; background: rgba(168,184,200,0.10); border-color: rgba(168,184,200,0.28); }
        .pcard-icon:has(.fa-times)           { color: #d06868; background: rgba(208,104,104,0.10); border-color: rgba(208,104,104,0.28); }
        .pcard-icon:has(.fa-circle-xmark)    { color: #d06868; background: rgba(208,104,104,0.10); border-color: rgba(208,104,104,0.28); }
        .pcard-icon:has(.fa-circle-check)    { color: #7abf8a; background: rgba(122,191,138,0.10); border-color: rgba(122,191,138,0.28); }
        .pcard-icon:has(.fa-check)           { color: #7abf8a; background: rgba(122,191,138,0.10); border-color: rgba(122,191,138,0.28); }
        .pcard-icon:has(.fa-question)        { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-circle-question) { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }

        /* Spreading the Gospel extras */
        .pcard-icon:has(.fa-share-nodes)     { color: #8ab0c8; background: rgba(138,176,200,0.10); border-color: rgba(138,176,200,0.28); }
        .pcard-icon:has(.fa-rotate)          { color: #9ab8c8; background: rgba(154,184,200,0.10); border-color: rgba(154,184,200,0.28); }
        .pcard-icon:has(.fa-battery-full)    { color: #7abf8a; background: rgba(122,191,138,0.10); border-color: rgba(122,191,138,0.28); }
        .pcard-icon:has(.fa-anchor)          { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }

        /* SDA section */
        .pcard-icon:has(.fa-triangle-exclamation) { color: #e0a850; background: rgba(224,168,80,0.10); border-color: rgba(224,168,80,0.28); }
        .pcard-icon:has(.fa-copy)            { color: #a8a8c8; background: rgba(168,168,200,0.10); border-color: rgba(168,168,200,0.28); }
        .pcard-icon:has(.fa-pills)           { color: #90c890; background: rgba(144,200,144,0.10); border-color: rgba(144,200,144,0.28); }

        /* Islam / World Religions */
        .pcard-icon:has(.fa-mountain)        { color: #a0b0a0; background: rgba(160,176,160,0.10); border-color: rgba(160,176,160,0.28); }
        .pcard-icon:has(.fa-location-dot)    { color: #d08060; background: rgba(208,128,96,0.10);  border-color: rgba(208,128,96,0.28); }
        .pcard-icon:has(.fa-child)           { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-khanda)          { color: #a8b8c8; background: rgba(168,184,200,0.10); border-color: rgba(168,184,200,0.28); }
        .pcard-icon:has(.fa-star-of-david)   { color: #c8c060; background: rgba(200,192,96,0.10);  border-color: rgba(200,192,96,0.28); }
        .pcard-icon:has(.fa-wine-glass)      { color: #c080a0; background: rgba(192,128,160,0.10); border-color: rgba(192,128,160,0.28); }
        .pcard-icon:has(.fa-user-tie)        { color: #9ab0c8; background: rgba(154,176,200,0.10); border-color: rgba(154,176,200,0.28); }
        .pcard-icon:has(.fa-person-half-dress){ color: #c8a0b8; background: rgba(200,160,184,0.10); border-color: rgba(200,160,184,0.28); }
        .pcard-icon:has(.fa-person-circle-xmark) { color: #d06868; background: rgba(208,104,104,0.10); border-color: rgba(208,104,104,0.28); }
        .pcard-icon:has(.fa-person-walking-arrow-right) { color: #c9a85c; background: rgba(201,168,92,0.10); border-color: rgba(201,168,92,0.28); }
        .pcard-icon:has(.fa-hand-holding-heart) { color: #e0728a; background: rgba(224,114,138,0.10); border-color: rgba(224,114,138,0.28); }

        /* ============================================================
           GNOSTICISM SECTION - Icon colors added for new pcard icons
           Red flags = bright red; warning/attack = warm reds; etc.
        ============================================================ */
        .pcard-icon:has(.fa-flag)             { color: #e84050; background: rgba(232,64,80,0.12);  border-color: rgba(232,64,80,0.35); }
        .pcard-icon:has(.fa-xmark)            { color: #d85858; background: rgba(216,88,88,0.10);  border-color: rgba(216,88,88,0.30); }
        .pcard-icon:has(.fa-scissors)         { color: #c9554a; background: rgba(201,85,74,0.10);  border-color: rgba(201,85,74,0.30); }
        .pcard-icon:has(.fa-yin-yang)         { color: #6a6a7a; background: rgba(106,106,122,0.10); border-color: rgba(106,106,122,0.30); }
        .pcard-icon:has(.fa-feather)          { color: #9a85c0; background: rgba(154,133,192,0.10); border-color: rgba(154,133,192,0.30); }
        .pcard-icon:has(.fa-graduation-cap)   { color: #7a4ca8; background: rgba(122,76,168,0.10);  border-color: rgba(122,76,168,0.30); }
        .pcard-icon:has(.fa-language)         { color: #2a8a83; background: rgba(42,138,131,0.10);  border-color: rgba(42,138,131,0.30); }
        .pcard-icon:has(.fa-person-running)   { color: #5a8a4a; background: rgba(90,138,74,0.10);   border-color: rgba(90,138,74,0.30); }
        .pcard-icon:has(.fa-circle-half-stroke) { color: #7a8aa0; background: rgba(122,138,160,0.10); border-color: rgba(122,138,160,0.30); }
        .pcard-icon:has(.fa-circle-info)      { color: #3a7eb8; background: rgba(58,126,184,0.10);  border-color: rgba(58,126,184,0.30); }
        .pcard-icon:has(.fa-comment-dots)     { color: #5a8ab8; background: rgba(90,138,184,0.10);  border-color: rgba(90,138,184,0.30); }
        .pcard-icon:has(.fa-book)             { color: #c9a85c; background: rgba(201,168,92,0.10);  border-color: rgba(201,168,92,0.30); }
        .pcard-icon:has(.fa-brain)            { color: #c97fb0; background: rgba(201,127,176,0.10); border-color: rgba(201,127,176,0.30); }
        .pcard-icon:has(.fa-film)             { color: #a08fc0; background: rgba(160,143,192,0.10); border-color: rgba(160,143,192,0.30); }
        .pcard-icon:has(.fa-handshake)       { color: #6db89a; background: rgba(109,184,154,0.10); border-color: rgba(109,184,154,0.28); }
        .pcard-icon:has(.fa-lightbulb)       { color: #e0c050; background: rgba(224,192,80,0.10);  border-color: rgba(224,192,80,0.28); }
        .pcard-icon:has(.fa-list-check)      { color: #7abf8a; background: rgba(122,191,138,0.10); border-color: rgba(122,191,138,0.28); }
        .pcard-icon:has(.fa-child-reaching)  { color: #8ab8d4; background: rgba(138,184,212,0.10); border-color: rgba(138,184,212,0.28); }
        .pcard-icon:has(.fa-explosion)       { color: #e07a50; background: rgba(224,122,80,0.10);  border-color: rgba(224,122,80,0.28); }
        .pcard-icon:has(.fa-fist-raised)     { color: #d07060; background: rgba(208,112,96,0.10);  border-color: rgba(208,112,96,0.28); }
        .pcard-icon:has(.fa-link-slash)      { color: #9090a8; background: rgba(144,144,168,0.10); border-color: rgba(144,144,168,0.28); }
        .pcard-icon:has(.fa-shield-virus)    { color: #7090b8; background: rgba(112,144,184,0.10); border-color: rgba(112,144,184,0.28); }

/* ============================================================
   SALVATION QUIZ STYLES
============================================================ */
.quiz-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--navy);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 16px 20px;
    border-radius: 10px;
    font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 10px;
    line-height: 1.5;
}
.quiz-btn:hover {
    background: rgba(184,150,90,0.12);
    border-color: var(--gold);
}

.quiz-alert {
    background: linear-gradient(135deg, rgba(140,20,20,0.5) 0%, rgba(90,10,10,0.4) 100%);
    border: 1px solid rgba(220,50,50,0.5);
    border-left: 6px solid #e04040;
    border-radius: 8px;
    padding: 24px;
    margin-top: 20px;
}
.quiz-alert h4 { color: #ff6b6b; font-size: 1.15rem; margin-top: 0; display: flex; align-items: center; gap: 10px; }
.quiz-alert p { color: #f8d7d7; font-size: 0.95rem; line-height: 1.7; margin-bottom: 0;}

.quiz-caution {
    background: linear-gradient(135deg, rgba(140,100,20,0.4) 0%, rgba(90,60,10,0.3) 100%);
    border: 1px solid rgba(220,160,50,0.4);
    border-left: 6px solid #e0a030;
    border-radius: 8px;
    padding: 24px;
    margin-top: 20px;
}
.quiz-caution h4 { color: #ffc14d; font-size: 1.15rem; margin-top: 0; display: flex; align-items: center; gap: 10px; }
.quiz-caution p { color: #f8eed7; font-size: 0.95rem; line-height: 1.7; margin-bottom: 0;}

.quiz-solid {
    background: linear-gradient(135deg, rgba(20,100,50,0.3) 0%, rgba(10,60,30,0.2) 100%);
    border: 1px solid rgba(50,180,90,0.3);
    border-left: 6px solid #40c060;
    border-radius: 8px;
    padding: 24px;
    margin-top: 20px;
}
.quiz-solid h4 { color: #6bff8a; font-size: 1.15rem; margin-top: 0; display: flex; align-items: center; gap: 10px; }
.quiz-solid p { color: #d7f8df; font-size: 0.95rem; line-height: 1.7; margin-bottom: 0;}

body.light-mode .quiz-btn { background: var(--bg-elevated); border-color: var(--border); color: var(--text-muted); }
body.light-mode .quiz-btn:hover { background: rgba(184,150,90,0.12); color: var(--text); }

/* ============================================================
   TRUTH & FOUNDATION — 14 THEME SYSTEM
   Each theme defines new spec tokens + legacy aliases so
   existing component CSS continues to function unchanged.
============================================================ */

        /* THEME: Foundation (dark) — Charcoal · Gold · Cream */
        body[data-theme="foundation"] {
            --bg: #121212;
            --bg-elevated: #1e1e1e;
            --bg-overlay: #181818;
            --accent: #d4af37;
            --accent-soft: #e6c55c;
            --accent-muted: #8a7028;
            --accent-text: #e6c55c;
            --text-primary: #e8dcc8;
            --text-secondary: #c4b898;
            --text-muted: #a99c82;
            --h1-color: #d4af37;
            --h2-color: #d4af37;
            --h3-color: #e6c55c;
            --h4-color: #e8dcc8;
            --verse-bg: #252525;
            --verse-border: #d4af37;
            --foundation-bg: #2a2a2a;
            --foundation-border: #d4af37;
            --religion-bg: #2c2c2c;
            --religion-border: #4a4a4a;
            --religion-heading: #9aa5b1;
            --warning-bg: #4a0e0e;
            --warning-border: #b71c1c;
            --warning-text: #ff8a8a;
            --caution-bg: #4d3300;
            --caution-border: #ffa726;
            --caution-text: #ffd54f;
            --guidance-bg: #0a2e2e;
            --guidance-border: #14b8a6;
            --guidance-text: #5eead4;
            --jesus-words: #ff4d4d;
            --link: #e6c55c;
            --border: rgba(212,175,55,0.2);
            --divider: rgba(212,175,55,0.12);
            /* Legacy aliases for existing CSS */
            --bg-mid: #1e1e1e;
            --navy: #1e1e1e;
            --navy-mid: #181818;
            --navy-deep: #121212;
            --gold: #d4af37;
            --gold-light: #e6c55c;
            --gold-muted: color-mix(in srgb, #d4af37 12%, transparent);
            --gold-border: color-mix(in srgb, #d4af37 25%, transparent);
            --text: #e8dcc8;
            --text-muted: #a99c82;
            --text-light: #9a8e78;
            --red-letter: #ff4d4d;
        }

        /* THEME: Grace (light) — Parchment · Bronze · Sepia */
        body[data-theme="grace"] {
            --bg: #fdfaf3;
            --bg-elevated: #ffffff;
            --bg-overlay: #faf6ec;
            --accent: #b8860b;
            --accent-soft: #9c7000;
            --accent-muted: #d4a838;
            --accent-text: #b45309;
            --text-primary: #1c1917;
            --text-secondary: #44403c;
            --text-muted: #57534e;
            --h1-color: #1c1917;
            --h2-color: #1c1917;
            --h3-color: #6b4a1f;
            --h4-color: #1c1917;
            --verse-bg: #f5f0e1;
            --verse-border: #b8860b;
            --foundation-bg: #ede6d1;
            --foundation-border: #b8860b;
            --religion-bg: #f1f1f1;
            --religion-border: #d4d4d4;
            --religion-heading: #525252;
            --warning-bg: #ffebee;
            --warning-border: #dc2626;
            --warning-text: #991b1b;
            --caution-bg: #fffde7;
            --caution-border: #d97706;
            --caution-text: #92400e;
            --guidance-bg: #e0f2f1;
            --guidance-border: #0d9488;
            --guidance-text: #115e59;
            --jesus-words: #b71c1c;
            --link: #8b6508;
            --border: rgba(184,134,11,0.25);
            --divider: rgba(184,134,11,0.15);
            /* Legacy aliases for existing CSS */
            --bg-mid: #ffffff;
            --navy: #ffffff;
            --navy-mid: #faf6ec;
            --navy-deep: #fdfaf3;
            --gold: #b8860b;
            --gold-light: #9c7000;
            --gold-muted: color-mix(in srgb, #b8860b 12%, transparent);
            --gold-border: color-mix(in srgb, #b8860b 25%, transparent);
            --text: #1c1917;
            --text-muted: #57534e;
            --text-light: #78716c;
            --red-letter: #b71c1c;
        }

        /* Smooth theme transitions */
        body, .sidebar, .card, .verse-block, .foundation-box,
        .ccc-box, .quran-box, .hadith-box, .hell-warning, .pray-callout,
        .pray-warning, .theological-foundation, .prayer-example,
        .scripture, .script-toggle, .script-panel, .script-bubble,
        .mobile-header, .app-banner, .menu-btn, .util-theme-btn,
        .topic-chip, .pathway-card, .objection-item, .faq-item,
        .cmd-card, .acts-card, .step-card, .field-note, .quiz-btn,
        .home-about-card, .evid-resource-card, .pray-tabs, .pray-tab,
        .banner-pill, .utility-bar, .fruit-card,
        .spirit-name-card, .highlight-box, .lp-row, .tf-settings-panel,
        .tf-settings-card, .tf-theme-card {
            transition: background-color 0.3s ease, color 0.3s ease,
                        border-color 0.3s ease;
        }

        /* ============================================================
           TRUTH & FOUNDATION — SETTINGS BUTTON & PANEL
        ============================================================ */

        /* Sidebar Settings entry */
        .sidebar-footer-divider {
            height: 1px;
            background: var(--divider, rgba(184,150,90,0.18));
            margin: 14px 16px 10px;
        }
        .sidebar-settings-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            width: calc(100% - 20px);
            margin: 0 10px 8px;
            padding: 10px 14px;
            background: transparent;
            border: 1px solid var(--border, rgba(184,150,90,0.2));
            color: var(--text-primary, var(--text));
            font-family: 'Inter', sans-serif;
            font-size: 0.92rem;
            font-weight: 500;
            text-align: left;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }
        .sidebar-settings-btn:hover {
            background: color-mix(in srgb, var(--accent, var(--gold)) 10%, transparent);
            border-color: var(--accent, var(--gold));
            color: var(--accent, var(--gold));
        }
        .sidebar-settings-btn .nav-icon {
            color: var(--accent, var(--gold));
            border-color: color-mix(in srgb, var(--accent, var(--gold)) 35%, transparent);
            background: color-mix(in srgb, var(--accent, var(--gold)) 7%, transparent);
        }

        /* Backdrop */
        .tf-settings-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 9998;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }
        .tf-settings-backdrop.open {
            opacity: 1;
            pointer-events: auto;
        }

        /* Panel — slide in from right (desktop) */
        .tf-settings-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 460px;
            max-width: 100vw;
            height: 100vh;
            background: var(--bg-overlay, var(--bg-mid));
            border-left: 1px solid var(--border);
            box-shadow: -16px 0 48px rgba(0,0,0,0.45);
            z-index: 9999;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            font-family: 'Inter', sans-serif;
            color: var(--text-primary, var(--text));
        }
        .tf-settings-panel.open {
            transform: translateX(0);
        }

        /* Mobile: full screen */
        @media (max-width: 768px) {
            .tf-settings-panel {
                width: 100vw;
                border-left: none;
            }
        }

        /* Header */
        .tf-settings-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 22px 14px;
            border-bottom: 2px solid var(--accent, var(--gold));
            background: var(--bg-elevated, var(--bg-mid));
        }
        .tf-settings-title {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--accent, var(--gold));
            margin: 0;
            letter-spacing: 0.01em;
        }
        .tf-settings-close {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-primary, var(--text));
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 1.2rem;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, color 0.2s, border-color 0.2s;
        }
        .tf-settings-close:hover {
            background: color-mix(in srgb, var(--accent, var(--gold)) 15%, transparent);
            color: var(--accent, var(--gold));
            border-color: var(--accent, var(--gold));
        }

        /* Body — scrollable */
        .tf-settings-body {
            flex: 1;
            overflow-y: auto;
            padding: 18px 22px 24px;
        }

        /* Section */
        .tf-settings-section {
            margin-bottom: 22px;
        }
        .tf-settings-section-label {
            font-family: 'Inter', sans-serif;
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--text-muted, var(--text-light));
            margin-bottom: 6px;
        }
        .tf-settings-section-title {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.18rem;
            font-weight: 600;
            color: var(--h3-color, var(--gold-light));
            margin: 0 0 12px 0;
        }
        .tf-settings-section-title .tf-emoji {
            font-style: normal;
            margin-right: 6px;
        }

        /* Theme grid */
        .tf-theme-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 10px;
        }
        @media (min-width: 900px) {
            .tf-theme-grid { grid-template-columns: repeat(3, 1fr); }
        }

        .tf-theme-card {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 10px 10px 12px;
            background: var(--bg-elevated, var(--bg-mid));
            border: 2px solid var(--border);
            border-radius: 12px;
            cursor: pointer;
            text-align: left;
            color: var(--text-primary, var(--text));
            font-family: 'Inter', sans-serif;
            transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .tf-theme-card:hover {
            transform: translateY(-2px);
            border-color: color-mix(in srgb, var(--accent, var(--gold)) 55%, transparent);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        }
        .tf-theme-card.active {
            border-color: var(--accent, var(--gold));
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, var(--gold)) 30%, transparent);
        }
        .tf-theme-card.active::after {
            content: '✓';
            position: absolute;
            top: 6px;
            right: 8px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--accent, var(--gold));
            color: var(--bg, #000);
            font-size: 0.85rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .tf-theme-swatches {
            display: flex;
            gap: 0;
            height: 36px;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid var(--border);
        }
        .tf-theme-swatch {
            flex: 1;
            height: 100%;
        }
        .tf-theme-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary, var(--text));
            line-height: 1.2;
        }
        .tf-theme-sub {
            font-size: 0.72rem;
            color: var(--text-muted, var(--text-light));
            line-height: 1.2;
            font-style: italic;
        }

        /* Generic button rows */
        .tf-btn-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .tf-pill-btn {
            flex: 1;
            min-width: 70px;
            padding: 9px 14px;
            background: var(--bg-elevated, var(--bg-mid));
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary, var(--text));
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .tf-pill-btn:hover {
            border-color: var(--accent, var(--gold));
            color: var(--accent, var(--gold));
        }
        .tf-pill-btn.active {
            background: color-mix(in srgb, var(--accent, var(--gold)) 18%, transparent);
            border-color: var(--accent, var(--gold));
            color: var(--accent, var(--gold));
            font-weight: 600;
        }

        /* Radio rows */
        .tf-radio-row {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .tf-radio-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            background: var(--bg-elevated, var(--bg-mid));
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            color: var(--text-primary, var(--text));
            font-family: 'Inter', sans-serif;
            font-size: 0.92rem;
            transition: all 0.2s ease;
        }
        .tf-radio-option:hover {
            border-color: var(--accent, var(--gold));
        }
        .tf-radio-option input[type="radio"] {
            accent-color: var(--accent, var(--gold));
            margin: 0;
        }
        .tf-radio-option.active {
            background: color-mix(in srgb, var(--accent, var(--gold)) 12%, transparent);
            border-color: var(--accent, var(--gold));
        }

        /* Check for Updates button — uses accent gold instead of warning red */
        .tf-update-check-btn {
            width: 100%;
            padding: 11px 16px;
            background: transparent;
            border: 1px solid var(--accent, #b8965a);
            color: var(--accent, #b8965a);
            font-family: 'Inter', sans-serif;
            font-size: 0.92rem;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .tf-update-check-btn:hover {
            background: color-mix(in srgb, var(--accent, #b8965a) 15%, transparent);
        }
        .tf-update-check-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
        .tf-update-check-btn .fa-spin {
            animation: tf-spin 0.9s linear infinite;
        }
        @keyframes tf-spin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        .tf-update-check-hint {
            margin: 10px 0 0 0;
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            line-height: 1.45;
            color: var(--text-muted, var(--text-light));
            text-align: center;
        }
        .tf-update-check-status {
            margin: 10px 0 0 0;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            font-weight: 500;
            line-height: 1.45;
            text-align: center;
            padding: 8px 12px;
            border-radius: 8px;
        }
        .tf-update-check-status.is-success {
            color: var(--accent, #b8965a);
            background: rgba(184, 150, 90, 0.08);
            border: 1px solid rgba(184, 150, 90, 0.18);
        }
        .tf-update-check-status.is-info {
            color: var(--text);
            background: var(--bg-elevated, rgba(255,255,255,0.04));
            border: 1px solid var(--divider, rgba(255,255,255,0.08));
        }
        .tf-update-check-status.is-error {
            color: var(--warning-text, #ff8a8a);
            background: color-mix(in srgb, var(--warning-border, #dc2626) 10%, transparent);
            border: 1px solid var(--warning-border, #dc2626);
        }

        /* Reset button */
        .tf-reset-btn {
            width: 100%;
            padding: 11px 16px;
            background: transparent;
            border: 1px solid var(--warning-border, #dc2626);
            color: var(--warning-text, #ff8a8a);
            font-family: 'Inter', sans-serif;
            font-size: 0.92rem;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .tf-reset-btn:hover {
            background: color-mix(in srgb, var(--warning-border, #dc2626) 15%, transparent);
        }

        /* Footer */
        .tf-settings-footer {
            padding: 14px 22px;
            border-top: 1px solid var(--divider);
            font-family: 'Inter', sans-serif;
            font-size: 0.72rem;
            color: var(--text-muted, var(--text-light));
            text-align: center;
            line-height: 1.5;
        }
        .tf-settings-footer strong {
            color: var(--accent, var(--gold));
            font-weight: 600;
        }

        /* Font-size scaling
           Driven by a single CSS variable --tf-fs-pct on <html>. Default = 100%.
           Set programmatically by the font sizer popup (see TF_fontSizer* JS functions).
           
           Range: 100% (minimum, "Small") to 175% (continuous +). The four legacy
           pill classes (tf-fs-sm/md/lg/xl) map to discrete percentages.
           
           Note: 100% is the FLOOR — going smaller than this becomes hard to read,
           especially on mobile. The pills define the discrete jumps; +/- nudges
           by 4% steps within the 100–175% range. */
        html {
            font-size: var(--tf-fs-pct, 100%);
        }
        body.tf-fs-sm { --tf-fs-pct: 100%; }
        body.tf-fs-md { --tf-fs-pct: 115%; }
        body.tf-fs-lg { --tf-fs-pct: 132%; }
        body.tf-fs-xl { --tf-fs-pct: 150%; }

        /* Heading style: Modern overrides Playfair with Inter */
        body.tf-headings-modern h1,
        body.tf-headings-modern h2,
        body.tf-headings-modern h3,
        body.tf-headings-modern .tf-settings-title,
        body.tf-headings-modern .tf-settings-section-title {
            font-family: 'Inter', sans-serif !important;
            letter-spacing: -0.01em;
        }

        /* Heading-color tokens applied (where existing CSS doesn't override) */
        body[data-theme] h1 { color: var(--h1-color, var(--gold)); }
        body[data-theme] h2 { color: var(--h2-color, var(--gold)); }
        body[data-theme] h3 { color: var(--h3-color, var(--gold-light)); }

        /* Hide body scroll when panel open */
        body.tf-settings-open {
            overflow: hidden;
        }

        /* ============================================================
           TRUTH & FOUNDATION — SPLASH SCREEN
           Full-viewport overlay shown on every app open. Auto-fades
           after 4 seconds. The PNG file is square, but CSS border-
           radius masks the corners so only the rounded leather logo
           is visible. Background is white or black depending on the
           user's current theme (set on <html> by the head script).
        ============================================================ */
        #tf-splash {
            position: fixed;
            inset: 0;
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000000;
            opacity: 1;
            transition: opacity 0.6s ease-out;
            padding: env(safe-area-inset-top) env(safe-area-inset-right)
                     env(safe-area-inset-bottom) env(safe-area-inset-left);
        }
        html[data-splash-mode="light"] #tf-splash { background: #ffffff; }
        html[data-splash-mode="dark"]  #tf-splash { background: #000000; }
        #tf-splash.tf-splash-hide {
            opacity: 0;
            pointer-events: none;
        }
        .tf-splash-img-wrap {
            width: clamp(280px, 62vmin, 380px);
            border-radius: 16%;
            overflow: hidden;
            -webkit-clip-path: inset(0 round 16%);
            clip-path: inset(0 round 16%);
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            box-shadow: 0 20px 60px rgba(0,0,0,0.5),
                        0 0 0 1px rgba(212,175,55,0.15);
            line-height: 0;
            user-select: none;
            animation: tfSplashEntry 0.7s ease-out both;
        }
        .tf-splash-img-wrap img {
            width: 100%;
            height: auto;
            display: block;
            -webkit-user-drag: none;
        }
        @keyframes tfSplashEntry {
            from { opacity: 0; transform: scale(0.92); }
            to   { opacity: 1; transform: scale(1); }
        }
        body.tf-splash-active { overflow: hidden; }

        /* ============================================================
           NEW MOBILE-FIRST NAVIGATION SYSTEM (Polished)
           YouVersion-style refinement: layered surfaces, generous
           whitespace, theme-tinted icon tiles, refined typography,
           subtle motion, signature active-tab indicator dot.
        ============================================================ */

        /* Hide the original sidebar + hamburger across all screen sizes */
        nav.sidebar, #sidebar { display: none !important; }
        .menu-btn, #menu-btn, .overlay, #overlay { display: none !important; }
        .mobile-header { display: none !important; }
        .app-banner { display: none !important; }
        .utility-bar { display: none !important; }

        /* Main content area: full width, app-like centered column on
           wide screens, room at bottom for the tab bar. */
        .main-content {
            margin-left: 0 !important;
            max-width: 660px !important;
            margin: 0 auto !important;
            padding: 18px 18px 108px 18px !important;
            min-height: 100vh;
            box-sizing: border-box;
        }
        @media (min-width: 1024px) {
            .main-content { padding: 36px 36px 120px 36px !important; max-width: 700px !important; }
        }

        /* ── Bottom tab bar (refined) ───────────────────────── */
        .mobile-tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 82px;
            background: var(--bg-elevated);
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-around;
            align-items: stretch;
            z-index: 1000;
            padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        body.light-mode .mobile-tab-bar {
            background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
            box-shadow: 0 -1px 14px rgba(0,0,0,0.04);
        }
        .mobile-tab-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 6px 4px 4px 4px;
            color: var(--text-muted);
            font-family: 'Inter', sans-serif;
            font-size: 0.66rem;
            font-weight: 500;
            letter-spacing: 0.015em;
            transition: color 0.2s ease;
            position: relative;
            opacity: 0.62;
            -webkit-tap-highlight-color: transparent;
        }
        .mobile-tab-btn i {
            font-size: 1.42rem;
            transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
        }
        .mobile-tab-btn:hover { color: var(--text); opacity: 0.85; }
        .mobile-tab-btn.active {
            color: var(--accent);
            opacity: 1;
            font-weight: 600;
        }
        .mobile-tab-btn.active i {
            transform: translateY(-1px) scale(1.06);
        }
        /* Signature YouVersion-style active indicator dot above icon */
        .mobile-tab-btn::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 50%;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--accent);
            transform: translateX(-50%) scale(0);
            transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .mobile-tab-btn.active::before {
            transform: translateX(-50%) scale(1);
        }
        .mobile-tab-btn .tab-label {
            white-space: nowrap;
        }

        /* ── Sleek back button (frosted-glass circle, top-left) ─ */
        .sleek-back-btn {
            position: fixed;
            top: calc(14px + env(safe-area-inset-top));
            left: 14px;
            z-index: 999;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--bg-elevated) 75%, transparent);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
            color: var(--text);
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 14px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
            font-size: 0.95rem;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease;
        }
        .sleek-back-btn:active { transform: scale(0.92); }
        .sleek-back-btn:hover { background: var(--bg-elevated); }
        body.section-active .sleek-back-btn { display: flex; }
        body.section-active .main-content {
            padding-top: 70px !important;
        }

        /* ── Tab overview screens ───────────────────────────── */
        .tab-screen {
            display: none;
        }
        .tab-screen.active {
            display: block;
            animation: tabFadeIn 0.32s cubic-bezier(0.22, 0.94, 0.4, 1);
        }
        @keyframes tabFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        body.in-tab-mode .section { display: none !important; }

        /* ── FIX: The original .container/.card wrappers around all sections
           had a white-ish background + 60vh min-height, leaving a "ghost" white
           card visible on every tab screen. Strip them down to transparent
           pass-through wrappers in tab mode + section mode. */
        body.in-tab-mode .container,
        body.section-active .container {
            margin: 0 !important;
            padding: 0 !important;
            max-width: none !important;
        }
        body.in-tab-mode .card,
        body.section-active .card {
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
            padding: 0 !important;
            min-height: 0 !important;
            border-radius: 0 !important;
            overflow: visible !important;
        }

        /* ── Full-screen section overlay (Bible-app style) ──
           When a section is opened, it takes over the full viewport,
           sliding up over the tab overview screens. Bottom tab bar
           stays visible. */
        body.section-active .section.active {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 82px;            /* leave room for bottom tab bar */
            background: var(--bg);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            z-index: 600;
            padding: 70px 18px 36px 18px;
            margin: 0;
            opacity: 1;
            animation: sectionSlideUp 0.36s cubic-bezier(0.22, 0.94, 0.4, 1) forwards;
        }
        body.section-active { overflow: hidden; }
        @media (min-width: 1024px) {
            body.section-active .section.active {
                padding: 78px 36px 48px 36px;
            }
        }
        @keyframes sectionSlideUp {
            from { opacity: 0; transform: translateY(24px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Center the section content within the full-screen overlay */
        body.section-active .section.active > * {
            max-width: 760px;
            margin-left: auto;
            margin-right: auto;
        }
        @media (min-width: 1024px) {
            body.section-active .section.active > * {
                max-width: 880px;
            }
        }

        /* Back button should sit ABOVE the full-screen section */
        body.section-active .sleek-back-btn {
            z-index: 700;
        }

        /* ── Tab screen header (refined typography) ─────────── */
        .tab-screen-header {
            margin: 14px 0 26px 0;
            padding: 0 2px;
        }
        .tab-screen-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.85rem;
            font-weight: 600;
            color: var(--h1-color);
            margin: 0 0 6px 0;
            line-height: 1.1;
            letter-spacing: -0.015em;
            text-align: center;
        }
        /* Per-tab title colors: Truth white, Foundation + Share gold. */
        #tab-screen-truth .tab-screen-title { color: var(--text); }
        #tab-screen-foundation .tab-screen-title { color: var(--gold-light); }
        #tab-screen-share .tab-screen-title { color: var(--gold-light); }
        .tab-screen-subtitle {
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.5;
            font-weight: 400;
        }

        /* ════════════════════════════════════════════════════════════════
           VERSE OF THE DAY — Modern Devotional aesthetic
           ----------------------------------------------------------------
           Frosted-glass card with subtle accent gradient, decorative quote
           mark in background, large weighty serif type, reference chip
           with translation label. Works across all 14 themes via CSS vars.
           ════════════════════════════════════════════════════════════════ */
        .votd-card {
            position: relative;
            /* Subtle accent gradient that hints at theme color without overwhelming.
               When a background image is set via .has-bg-image, this gradient is
               replaced by the image + an overlay (see rules below). */
            background:
                radial-gradient(circle at 88% 12%,
                    color-mix(in srgb, var(--accent) 18%, transparent) 0%,
                    transparent 55%),
                linear-gradient(160deg,
                    color-mix(in srgb, var(--accent) 6%, var(--bg-elevated)) 0%,
                    var(--bg-elevated) 60%,
                    color-mix(in srgb, var(--accent) 4%, var(--bg-elevated)) 100%);
            /* Frosted-glass effect (subtle, doesn't hide the gradient) */
            -webkit-backdrop-filter: saturate(140%);
            backdrop-filter: saturate(140%);
            border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
            border-radius: 1.5em;
            padding: 1.625em 1.5em 1.5em 1.5em;
            margin: 0.5em 0 1.75em 0;
            box-shadow:
                0 1px 3px rgba(0,0,0,0.06),
                0 6px 20px color-mix(in srgb, var(--accent) 10%, rgba(0,0,0,0.08)),
                0 14px 40px rgba(0,0,0,0.08);
            overflow: hidden;
        }

        /* ════════════════════════════════════════════════════════════════
           VOTD BACKGROUND IMAGE — Daily-rotating Verse of the Day backdrop
           ----------------------------------------------------------------
           When JavaScript picks today's image, it applies .has-bg-image to
           the card. CSS then layers the image behind a light overlay so the
           verse text remains readable on every image.

           Single mode: all images are bright/light landscapes, so text is
           always dark with a soft light overlay between image and text.
           ════════════════════════════════════════════════════════════════ */
        .votd-card.has-bg-image {
            /* Cancel the theme gradient so the image isn't tinted */
            background: var(--bg-elevated);
        }
        /* The actual background image layer, full-bleed behind content */
        .votd-bg-image {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 0;
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.5s ease;
        }
        /* Soft light overlay that sits BETWEEN the image and the text so
           dark verse text always reads clearly, even where the image is
           busy or has contrasty areas. */
        .votd-bg-overlay {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            /* Light dark vignette: barely visible on most images, but ensures
               white text reads even on bright/washed-out backgrounds (snow,
               white sky, beach, etc). Stronger near the edges where text
               often runs into bright areas, lighter in the middle. */
            background:
                radial-gradient(
                    ellipse at center,
                    rgba(0, 0, 0, 0.08) 0%,
                    rgba(0, 0, 0, 0.22) 100%
                );
        }
        /* Verse text + reference: dark with subtle light glow for legibility */
        .votd-card.has-bg-image .votd-text,
        .votd-card.has-bg-image .votd-ref {
            color: #ffffff !important;
            /* Layered text shadow: tight inner shadow for crispness +
               diffuse outer shadow for atmospheric depth. Reads cleanly
               on dark images via the diffuse blur, and on bright images
               via the dark vignette overlay above. */
            text-shadow:
                0 1px 2px rgba(0, 0, 0, 0.65),
                0 2px 8px rgba(0, 0, 0, 0.5);
        }
        /* Red-letter spans need slightly different shadow tuning — the warm
           red color can look muddy against a heavy black shadow. */
        .votd-card.has-bg-image .red-letter {
            color: #ff6961 !important;
            text-shadow:
                0 1px 2px rgba(0, 0, 0, 0.75),
                0 2px 8px rgba(0, 0, 0, 0.55);
        }
        /* Label pill and translation pill: branded gold tuned for image bg */
        .votd-card.has-bg-image .votd-label,
        .votd-card.has-bg-image .votd-translation {
            /* Pills now sit on translucent DARK glass so they read clearly
               against bright images. Gold-tinted glass to match brand. */
            background: color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,0.45));
            border-color: color-mix(in srgb, var(--accent) 60%, transparent);
            color: #f6e2a8;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        /* Share button: same translucent-dark treatment so it sits with the pills */
        .votd-card.has-bg-image .votd-share-btn {
            background: color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,0.45));
            border-color: color-mix(in srgb, var(--accent) 60%, transparent);
            color: #f6e2a8;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        /* Decorative quote mark and accent dot sit above the image but
           below the text content so they remain visible without intruding */
        .votd-card.has-bg-image::before {
            z-index: 2;
            color: rgba(255, 255, 255, 0.18);
        }
        .votd-card.has-bg-image::after {
            z-index: 2;
        }
        /* Decorative large opening quote mark in background — adds editorial gravitas */
        .votd-card::before {
            content: '"';
            position: absolute;
            top: -0.35em;
            left: 0.15em;
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 9em;
            line-height: 1;
            color: color-mix(in srgb, var(--accent) 12%, transparent);
            pointer-events: none;
            font-weight: 700;
            z-index: 1;
        }
        /* Subtle accent dot in top-right corner — bookmark/devotional accent */
        .votd-card::after {
            content: '';
            position: absolute;
            top: 1.25em;
            right: 1.25em;
            width: 0.5em;
            height: 0.5em;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
            pointer-events: none;
            z-index: 1;
        }
        /* "Today's Verse" label — small uppercase pill */
        .votd-label {
            position: relative;
            font-family: 'Inter', sans-serif;
            font-size: 0.66rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: var(--accent);
            margin: 0 0 1.125em 0;
            display: inline-flex;
            align-items: center;
            gap: 0.4em;
            padding: 0.375em 0.85em;
            background: color-mix(in srgb, var(--accent) 12%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
            border-radius: 99px;
            z-index: 2;
        }
        /* The verse text itself — large, weighty serif, modern devotional feel */
        .votd-text {
            position: relative;
            font-family: 'Playfair Display', Georgia, serif;
            font-style: normal;
            font-size: 1.32rem;
            line-height: 1.42;
            color: var(--text);
            margin: 0 0 1.125em 0;
            font-weight: 500;
            letter-spacing: -0.005em;
            z-index: 2;
        }
        /* Reference + translation row — pill containers, right-aligned */
        .votd-ref-row {
            position: relative;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 0.5em;
            flex-wrap: wrap;
            z-index: 2;
        }
        .votd-ref {
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: 0.01em;
            margin: 0;
        }
        .votd-translation {
            font-family: 'Inter', sans-serif;
            font-size: 0.66rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 10%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
            padding: 0.25em 0.55em;
            border-radius: 99px;
            margin: 0;
        }
        /* Share button — sits left of the reference; matches the pill styling */
        .votd-share-btn {
            position: relative;
            z-index: 2;
            margin-right: auto;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 10%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
            padding: 0.4em 0.85em;
            border-radius: 99px;
            display: inline-flex;
            align-items: center;
            gap: 0.45em;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.1s ease;
        }
        .votd-share-btn:active { transform: scale(0.96); }
        .votd-card.has-bg-image .votd-share-btn {
            background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.55));
            border-color: color-mix(in srgb, var(--accent) 50%, transparent);
            color: #6b4a18;
        }
        /* Light-mode tweaks — slightly bolder borders/shadows to compensate for bright bg */
        body.light-mode .votd-card {
            box-shadow:
                0 1px 2px rgba(0,0,0,0.04),
                0 4px 14px color-mix(in srgb, var(--accent) 14%, rgba(0,0,0,0.06)),
                0 12px 32px rgba(0,0,0,0.06);
            border-color: color-mix(in srgb, var(--accent) 28%, transparent);
        }
        body.light-mode .votd-card::before {
            color: color-mix(in srgb, var(--accent) 16%, transparent);
        }

        /* ── Home tab masthead: #6 hairline app name + #7 time greeting ── */
        .tf-home-title { text-align: center; padding: 10px 0 8px; }
        .tf-home-title-row { display: flex; align-items: center; gap: 12px; }
        .tf-home-title-row::before,
        .tf-home-title-row::after { content: ""; flex: 1; height: 1px; background: var(--gold); }
        .tf-home-title-name {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 1.55rem;
            color: var(--text);
        }
        .tf-home-title-name b { color: var(--gold-light); font-weight: 700; }
        .tf-home-greeting { padding: 2px 0 14px; }
        .tf-home-greeting-hi {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            color: var(--text);
            line-height: 1.2;
        }
        .tf-home-greeting-sub {
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-top: 3px;
        }

        /* ── Tab cards (refined: layered, shadow-based, theme-tinted) ── */
        .tab-card-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
            margin-top: 4px;
        }
        @media (min-width: 600px) {
            .tab-card-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
        }
        @media (min-width: 1024px) {
            .tab-card-grid { gap: 18px; }
        }
        .tab-card {
            background: var(--bg-elevated);
            border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
            border-radius: 20px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
            text-align: left;
            position: relative;
            overflow: hidden;
            -webkit-tap-highlight-color: transparent;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            min-height: 96px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
            /* Defensive: ensure card is always interactive */
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        body.light-mode .tab-card {
            box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 14px rgba(0,0,0,0.05);
        }
        .tab-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 12px 28px rgba(0,0,0,0.10);
            border-color: color-mix(in srgb, var(--accent) 35%, transparent);
        }
        body.light-mode .tab-card:hover {
            box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 12px 24px rgba(0,0,0,0.08);
        }
        .tab-card:active { transform: translateY(-1px); }
        .tab-card.disabled {
            opacity: 0.55;
            cursor: default;
        }
        .tab-card.disabled:hover {
            transform: none;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
            border-color: color-mix(in srgb, var(--border) 50%, transparent);
        }

        /* ════════════════════════════════════════════════════════════════
           Image-only tab card variant
           ----------------------------------------------------------------
           Some topic cards on the home screen are entirely image-based —
           the image itself contains the title and description text, so we
           drop the icon/text/chevron and let the image fill the card.
           
           The image preserves its natural aspect ratio (height adapts to
           the image's proportions). Same tap behavior + hover lift + border
           radius as the regular tab cards so it still feels like one of
           the home-screen tiles.
           
           FILL FIX: when in image mode, we remove the card's border,
           background, and inner padding so the image extends edge-to-edge
           to the card's rounded corners — no dark frame around the image.
           
           Note on text-size scaling: image cards intentionally do NOT scale
           with the user's text size preference. Images aren't text — they
           don't need to grow when text grows. This matches the behavior of
           most modern apps. The image's perceived size is governed by its
           natural aspect ratio against the card's column width.
           ════════════════════════════════════════════════════════════════ */
        .tab-card.tab-card-image {
            padding: 0;
            min-height: 0;       /* Let image determine height */
            background: transparent;   /* No card bg showing through */
            border: none;              /* No dark border around image */
            display: block;       /* Image fills, no flex layout needed */
            line-height: 0;       /* Kill any whitespace gap below image */
            overflow: hidden;     /* Clip image to card's rounded corners */
            font-size: 0;         /* Eliminates inline-img descender gap */
        }
        .tab-card.tab-card-image img {
            display: block;
            width: 100%;
            height: auto;          /* Preserve natural aspect ratio */
            border-radius: 20px;    /* Match card's rounded corners */
            object-fit: cover;
            vertical-align: top;    /* Belt-and-suspenders gap kill */
        }
        /* Hover state for image card: lift but no border-color change since
           there's no border to change. Keep shadow effect for affordance. */
        .tab-card.tab-card-image:hover {
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 12px 28px rgba(0,0,0,0.10);
        }
        /* Fallback if image fails to load: the alt text shows in a styled
           block so the card still looks intentional and remains tappable */
        .tab-card.tab-card-image img[alt]:not([src]),
        .tab-card.tab-card-image img:-moz-loading,
        .tab-card.tab-card-image img:not([src]) {
            min-height: 96px;
            padding: 20px;
            background: var(--bg-elevated);
            color: var(--text);
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        /* Icon tile: theme-tinted circle (YouVersion style) */
        .tab-card-icon {
            flex: 0 0 52px;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.32rem;
            background: color-mix(in srgb, var(--accent) 14%, transparent);
            color: var(--accent);
            transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .tab-card:hover .tab-card-icon {
            transform: scale(1.06);
        }
        /* Per-card tone overrides — each tone gets its own tinted circle */
        .tab-card[data-tone="rose"]    .tab-card-icon { background: rgba(224,85,106,0.14); color: #e0556a; }
        .tab-card[data-tone="amber"]   .tab-card-icon { background: rgba(212,147,58,0.16); color: #c97f1f; }
        .tab-card[data-tone="sage"]    .tab-card-icon { background: rgba(90,154,111,0.16); color: #4a8a5a; }
        .tab-card[data-tone="sky"]     .tab-card-icon { background: rgba(74,144,200,0.15); color: #3a7eb8; }
        .tab-card[data-tone="plum"]    .tab-card-icon { background: rgba(138,92,184,0.15); color: #7a4ca8; }
        .tab-card[data-tone="copper"]  .tab-card-icon { background: rgba(201,123,58,0.16); color: #b66a28; }
        .tab-card[data-tone="teal"]    .tab-card-icon { background: rgba(58,163,154,0.16); color: #2a8a83; }
        .tab-card[data-tone="slate"]   .tab-card-icon { background: rgba(90,106,130,0.14); color: #4a5a72; }
        .tab-card[data-tone="crimson"] .tab-card-icon { background: rgba(176,60,74,0.14); color: #a02838; }
        .tab-card[data-tone="forest"]  .tab-card-icon { background: rgba(56,107,72,0.16); color: #285a38; }
        body.light-mode .tab-card[data-tone="rose"]    .tab-card-icon { background: rgba(224,85,106,0.13); color: #c93a4f; }
        body.light-mode .tab-card[data-tone="amber"]   .tab-card-icon { background: rgba(212,147,58,0.16); color: #a36210; }
        body.light-mode .tab-card[data-tone="sage"]    .tab-card-icon { background: rgba(90,154,111,0.15); color: #3a7048; }
        body.light-mode .tab-card[data-tone="sky"]     .tab-card-icon { background: rgba(74,144,200,0.14); color: #2a649c; }
        body.light-mode .tab-card[data-tone="plum"]    .tab-card-icon { background: rgba(138,92,184,0.14); color: #5a338a; }
        body.light-mode .tab-card[data-tone="copper"]  .tab-card-icon { background: rgba(201,123,58,0.15); color: #944f1c; }
        body.light-mode .tab-card[data-tone="teal"]    .tab-card-icon { background: rgba(58,163,154,0.14); color: #1a6a64; }
        body.light-mode .tab-card[data-tone="slate"]   .tab-card-icon { background: rgba(90,106,130,0.13); color: #344458; }
        body.light-mode .tab-card[data-tone="crimson"] .tab-card-icon { background: rgba(176,60,74,0.13); color: #821a28; }
        body.light-mode .tab-card[data-tone="forest"]  .tab-card-icon { background: rgba(56,107,72,0.15); color: #1c4226; }

        .tab-card-content { flex: 1; min-width: 0; }
        .tab-card-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
            margin: 0 0 4px 0;
            line-height: 1.28;
            letter-spacing: -0.005em;
        }
        .tab-card-sub {
            font-size: 0.83rem;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.4;
            font-weight: 400;
            opacity: 0.88;
        }
        .tab-card-chevron {
            flex: 0 0 auto;
            color: var(--text-muted);
            font-size: 0.78rem;
            opacity: 0.4;
            margin-left: 4px;
            transition: transform 0.18s ease, opacity 0.18s ease;
        }
        .tab-card:hover .tab-card-chevron {
            transform: translateX(3px);
            opacity: 0.7;
        }
        .tab-card.disabled .tab-card-chevron { display: none; }

        .tab-card-badge {
            position: absolute;
            top: 12px;
            right: 14px;
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--bg-overlay) 70%, transparent);
            padding: 4px 9px;
            border-radius: 99px;
            border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
        }

        /* Card stagger animation when grid loads — DISABLED for click reliability.
           Cards are immediately visible and interactive. */
        /* (Removed: was causing opacity:0 base state with animation that may not
           reliably run on initial load.) */

        /* ── Menu drawer (refined slide-up sheet) ───────────── */
        .menu-drawer-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.28);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            z-index: 1100;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.26s ease;
        }
        .menu-drawer-backdrop.open {
            opacity: 1;
            pointer-events: auto;
        }
        .menu-drawer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            max-height: 78vh;
            background: var(--bg-elevated);
            border-radius: 26px 26px 0 0;
            z-index: 1110;
            transform: translateY(100%);
            transition: transform 0.32s cubic-bezier(0.22, 0.94, 0.4, 1);
            padding: 12px 18px calc(28px + env(safe-area-inset-bottom)) 18px;
            box-shadow: 0 -10px 40px rgba(0,0,0,0.28);
            overflow-y: auto;
        }
        .menu-drawer.open { transform: translateY(0); }
        .menu-drawer-handle {
            width: 44px;
            height: 5px;
            background: color-mix(in srgb, var(--text-muted) 35%, transparent);
            border-radius: 99px;
            margin: 0 auto 18px auto;
            cursor: grab;
            touch-action: none;
        }
        .menu-drawer-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            font-weight: 600;
            color: var(--h1-color);
            margin: 0 0 18px 4px;
            letter-spacing: -0.01em;
        }
        .menu-drawer-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 14px;
            border-radius: 14px;
            cursor: pointer;
            transition: background 0.15s ease;
            border: none;
            background: transparent;
            width: 100%;
            text-align: left;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            margin-bottom: 4px;
            -webkit-tap-highlight-color: transparent;
        }
        .menu-drawer-item:hover, .menu-drawer-item:active {
            background: color-mix(in srgb, var(--bg-overlay) 70%, transparent);
        }
        .menu-drawer-item-icon {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--accent) 14%, transparent);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex: 0 0 auto;
        }
        .menu-drawer-item-text {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0;
        }
        .menu-drawer-item-title {
            font-size: 0.99rem;
            font-weight: 600;
            letter-spacing: -0.003em;
        }
        .menu-drawer-item-sub {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-top: 2px;
            opacity: 0.85;
        }

        /* ════════════════════════════════════════════════════════════════
           FONT SIZER POPUP
           ----------------------------------------------------------------
           A floating panel that lets the user adjust the text size. It
           overlays the page WITHOUT blocking scroll — the user can scroll
           the underlying content to preview at different sizes.
           
           Pinned at the bottom of the viewport so it doesn't cover the
           middle of the screen (where reading content lives). Frosted-glass
           background lets the underlying content stay visible.
           ════════════════════════════════════════════════════════════════ */
        .tf-fontsizer-overlay {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10000;
            pointer-events: none;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
        }
        .tf-fontsizer-overlay.is-open {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .tf-fontsizer-panel {
            max-width: 460px;
            margin: 0 auto 18px auto;
            padding: 18px 18px 16px 18px;
            border-radius: 18px;
            /* Frosted-glass effect: semi-transparent + backdrop blur */
            background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            backdrop-filter: blur(16px) saturate(180%);
            border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
            box-shadow:
                0 1px 3px rgba(0,0,0,0.08),
                0 8px 32px rgba(0,0,0,0.18),
                0 16px 48px rgba(0,0,0,0.18);
            font-family: 'Inter', sans-serif;
            color: var(--text);
            /* Critical: pointer-events are auto on the panel itself so user can
               interact with it; the surrounding overlay area (transparent gaps
               around the panel) lets pointer events fall through to the page */
        }
        .tf-fontsizer-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.78rem;
            font-weight: 700;
            color: color-mix(in srgb, var(--text) 75%, transparent);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 12px;
        }
        .tf-fontsizer-preview {
            background: color-mix(in srgb, var(--accent) 6%, transparent);
            border-left: 3px solid var(--accent);
            border-radius: 0 8px 8px 0;
            padding: 12px 14px;
            margin: 0 0 16px 0;
            font-family: 'Source Serif 4', 'Spectral', 'Lora', Georgia, serif;
            line-height: 1.45;
            color: var(--text);
            /* The preview text scales with the current rem-based font size,
               so user sees a real preview of what their content will look like */
        }
        .tf-fontsizer-preview-verse {
            font-style: italic;
            font-size: 1rem;
        }
        .tf-fontsizer-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 10px;
        }
        .tf-fontsizer-step-btn {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
            border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
            color: var(--accent);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            transition: background 0.18s ease, transform 0.12s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .tf-fontsizer-step-btn:hover {
            background: color-mix(in srgb, var(--accent) 22%, var(--bg-elevated));
        }
        .tf-fontsizer-step-btn:active { transform: scale(0.94); }
        .tf-fontsizer-pills {
            display: flex;
            flex: 1;
            min-width: 0;
            gap: 4px;
            background: color-mix(in srgb, var(--accent) 6%, var(--bg));
            border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
            border-radius: 999px;
            padding: 3px;
        }
        .tf-fontsizer-pill {
            flex: 1;
            min-width: 0;
            padding: 7px 4px;
            border-radius: 999px;
            background: transparent;
            border: none;
            color: var(--text);
            font-family: 'Inter', sans-serif;
            font-size: 0.74rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease;
            -webkit-tap-highlight-color: transparent;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .tf-fontsizer-pill:hover {
            background: color-mix(in srgb, var(--accent) 12%, transparent);
        }
        .tf-fontsizer-pill.is-active {
            background: var(--accent);
            color: var(--bg-elevated);
        }
        body.light-mode .tf-fontsizer-pill.is-active { color: #fff; }
        .tf-fontsizer-readout {
            text-align: center;
            font-size: 0.78rem;
            color: color-mix(in srgb, var(--text) 65%, transparent);
            margin-bottom: 14px;
            font-variant-numeric: tabular-nums;
        }
        #tf-fontsizer-percent {
            font-weight: 700;
            color: var(--accent);
        }
        .tf-fontsizer-close-btn {
            display: block;
            width: 100%;
            padding: 11px 18px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
            border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
            color: var(--accent);
            font-family: 'Inter', sans-serif;
            font-size: 0.92rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.18s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .tf-fontsizer-close-btn:hover {
            background: color-mix(in srgb, var(--accent) 20%, var(--bg-elevated));
        }

        /* On very narrow screens, stack the controls vertically so they don't crowd */
        @media (max-width: 380px) {
            .tf-fontsizer-controls {
                flex-direction: column;
                gap: 10px;
            }
            .tf-fontsizer-pills {
                width: 100%;
            }
            .tf-fontsizer-step-btn {
                align-self: center;
            }
        }

        /* Respect reduced-motion preference */
        @media (prefers-reduced-motion: reduce) {
            .tf-fontsizer-overlay {
                transition: opacity 0.15s ease;
                transform: none;
            }
        }

        /* ============================================================
           RELIGION TILE GRID — replaces the horizontal swipe bar in
           the Comparing World Religions section. Compact tiles with
           tinted icon at top, religion name below.
        ============================================================ */
        .religion-tile-grid {
            display: grid;
            /* Same auto-fill em pattern as subtopic-tile-grid — tiles
               reflow to fewer columns as the font (and thus em) grows */
            grid-template-columns: repeat(auto-fill, minmax(8.75em, 1fr));
            gap: 0.875em;
            margin: 0.75em 0 1.875em 0;
        }
        /* ════════════════════════════════════════════════════════════════
           NEUMORPHIC RELIGION TILE
           ────────────────────────────────────────────────────────────────
           Soft UI / neumorphism: tile appears extruded from the page via
           opposing shadows (light top-left + dark bottom-right). Pressing
           flips shadows to inset — tile feels "pushed into" the surface.
           On release, springs back to raised. Active (selected) tile stays
           RAISED — visual indication via icon badge filling with tone color.

           Shadow colors are derived from --bg-elevated via color-mix() so
           the neumorphic effect adapts to all 14 themes automatically.
           ──────────────────────────────────────────────────────────────── */
        .religion-tile {
            /* Tile bg matches the page surface — required for neumorphism */
            background: var(--bg-elevated);
            border: none;
            border-radius: 1em;
            padding: 1.125em 0.75em 0.875em 0.75em;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5em;
            cursor: pointer;
            text-align: center;
            position: relative;
            overflow: hidden;
            -webkit-tap-highlight-color: transparent;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            min-height: 6.875em;
            /* RAISED neumorphic shadow — light top-left, dark bottom-right.
               Derived from theme bg so it adapts automatically. */
            box-shadow:
                -6px -6px 12px color-mix(in srgb, var(--bg-elevated) 80%, #fff),
                6px 6px 12px color-mix(in srgb, var(--bg-elevated) 70%, #000);
            transition: box-shadow 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
            user-select: none;
        }
        /* In LIGHT mode, the contrast direction is reversed slightly — the
           "lighter than bg" shadow becomes nearly white and "darker than
           bg" becomes a soft gray. */
        body.light-mode .religion-tile {
            box-shadow:
                -6px -6px 12px color-mix(in srgb, var(--bg-elevated) 70%, #fff),
                6px 6px 12px color-mix(in srgb, var(--bg-elevated) 75%, #000);
        }

        /* WATERMARK ICON — large, faded, behind the front icon and text */
        .religion-tile-bg-icon {
            position: absolute;
            font-size: 4.5em;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -45%);
            opacity: 0.07;
            z-index: 1;
            pointer-events: none;
            color: var(--accent);
            transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        /* ── NEUMORPHIC PRESS: shadows flip to inset (pushed into surface) ── */
        .religion-tile:active {
            box-shadow:
                inset -5px -5px 10px color-mix(in srgb, var(--bg-elevated) 80%, #fff),
                inset 5px 5px 10px color-mix(in srgb, var(--bg-elevated) 70%, #000);
            transition: box-shadow 0.1s cubic-bezier(0.4, 0.0, 0.2, 1);
        }
        body.light-mode .religion-tile:active {
            box-shadow:
                inset -5px -5px 10px color-mix(in srgb, var(--bg-elevated) 70%, #fff),
                inset 5px 5px 10px color-mix(in srgb, var(--bg-elevated) 75%, #000);
        }

        /* ── ACTIVE state: tile stays RAISED, watermark brightens slightly ── */
        .religion-tile.active .religion-tile-bg-icon { opacity: 0.12; }

        /* Respect reduced-motion */
        @media (prefers-reduced-motion: reduce) {
            .religion-tile,
            .religion-tile:active,
            .religion-tile.active {
                transition: box-shadow 0.22s ease;
                transform: none !important;
            }
            .religion-tile-icon,
            .religion-tile-bg-icon {
                transition: none !important;
                transform: none !important;
            }
            .religion-tile-bg-icon {
                /* Reduced-motion override needs to preserve the translate centering */
                transform: translate(-50%, -45%) !important;
            }
        }
        .religion-tile-icon {
            position: relative;
            z-index: 2;
            width: 2.5em;
            height: 2.5em;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            background: var(--bg-elevated);
            color: var(--accent);
            /* Tiny neumorphic shadow on the badge itself */
            box-shadow:
                -2px -2px 4px color-mix(in srgb, var(--bg-elevated) 80%, #fff),
                2px 2px 4px color-mix(in srgb, var(--bg-elevated) 70%, #000);
            transition: box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
        }
        body.light-mode .religion-tile-icon {
            box-shadow:
                -2px -2px 4px color-mix(in srgb, var(--bg-elevated) 70%, #fff),
                2px 2px 4px color-mix(in srgb, var(--bg-elevated) 75%, #000);
        }
        /* Press: icon badge shadow also flips to inset */
        .religion-tile:active .religion-tile-icon {
            box-shadow:
                inset -2px -2px 4px color-mix(in srgb, var(--bg-elevated) 80%, #fff),
                inset 2px 2px 4px color-mix(in srgb, var(--bg-elevated) 70%, #000);
        }
        body.light-mode .religion-tile:active .religion-tile-icon {
            box-shadow:
                inset -2px -2px 4px color-mix(in srgb, var(--bg-elevated) 70%, #fff),
                inset 2px 2px 4px color-mix(in srgb, var(--bg-elevated) 75%, #000);
        }
        /* ════════════════════════════════════════════════════════════════
           Universal per-tone icon colors (LOCKED across all themes).
           Front icon AND watermark icon both use the tone color.
           ════════════════════════════════════════════════════════════════ */
        .religion-tile[data-tone="gold"]    .religion-tile-icon,
        .religion-tile[data-tone="gold"]    .religion-tile-bg-icon { color: #d4af37; }
        .religion-tile[data-tone="rose"]    .religion-tile-icon,
        .religion-tile[data-tone="rose"]    .religion-tile-bg-icon { color: #e0556a; }
        .religion-tile[data-tone="amber"]   .religion-tile-icon,
        .religion-tile[data-tone="amber"]   .religion-tile-bg-icon { color: #c97f1f; }
        .religion-tile[data-tone="sage"]    .religion-tile-icon,
        .religion-tile[data-tone="sage"]    .religion-tile-bg-icon { color: #4a8a5a; }
        .religion-tile[data-tone="sky"]     .religion-tile-icon,
        .religion-tile[data-tone="sky"]     .religion-tile-bg-icon { color: #3a7eb8; }
        .religion-tile[data-tone="plum"]    .religion-tile-icon,
        .religion-tile[data-tone="plum"]    .religion-tile-bg-icon { color: #7a4ca8; }
        .religion-tile[data-tone="copper"]  .religion-tile-icon,
        .religion-tile[data-tone="copper"]  .religion-tile-bg-icon { color: #b66a28; }
        .religion-tile[data-tone="teal"]    .religion-tile-icon,
        .religion-tile[data-tone="teal"]    .religion-tile-bg-icon { color: #2a8a83; }
        .religion-tile[data-tone="slate"]   .religion-tile-icon,
        .religion-tile[data-tone="slate"]   .religion-tile-bg-icon { color: #6a7a92; }
        .religion-tile[data-tone="crimson"] .religion-tile-icon,
        .religion-tile[data-tone="crimson"] .religion-tile-bg-icon { color: #c33848; }

        /* On .active (selected): icon badge fills with the tone color */
        .religion-tile[data-tone="gold"].active    .religion-tile-icon { background: #d4af37; color: var(--bg-elevated); }
        .religion-tile[data-tone="rose"].active    .religion-tile-icon { background: #e0556a; color: var(--bg-elevated); }
        .religion-tile[data-tone="amber"].active   .religion-tile-icon { background: #c97f1f; color: var(--bg-elevated); }
        .religion-tile[data-tone="sage"].active    .religion-tile-icon { background: #4a8a5a; color: var(--bg-elevated); }
        .religion-tile[data-tone="sky"].active     .religion-tile-icon { background: #3a7eb8; color: var(--bg-elevated); }
        .religion-tile[data-tone="plum"].active    .religion-tile-icon { background: #7a4ca8; color: var(--bg-elevated); }
        .religion-tile[data-tone="copper"].active  .religion-tile-icon { background: #b66a28; color: var(--bg-elevated); }
        .religion-tile[data-tone="teal"].active    .religion-tile-icon { background: #2a8a83; color: var(--bg-elevated); }
        .religion-tile[data-tone="slate"].active   .religion-tile-icon { background: #6a7a92; color: var(--bg-elevated); }
        .religion-tile[data-tone="crimson"].active .religion-tile-icon { background: #c33848; color: var(--bg-elevated); }
        .religion-tile-name {
            font-size: 0.84rem;
            font-weight: 600;
            color: var(--text);
            line-height: 1.25;
            margin: 0;
            letter-spacing: -0.002em;
        }
        .religion-tile.coming-soon {
            opacity: 0.55;
            cursor: default;
        }
        /* Coming-soon tiles: disable press effect, keep base embossed look */
        .religion-tile.coming-soon:active,
        .religion-tile.coming-soon.active {
            transform: none;
            border-color: color-mix(in srgb, var(--accent) 25%, transparent);
            box-shadow:
                inset 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent),
                0 2px 4px rgba(0, 0, 0, 0.15),
                0 4px 12px rgba(0, 0, 0, 0.18);
        }

        /* ── Religion tile-view vs content-view toggle ──
           Default (tile view): show tiles + intro, hide all religion panels.
           When .viewing-religion is set on the section: hide tiles + intro,
           show only the .active religion panel.
           
           FIX (May 2026): Previously this only hid `.rel-panel` (which only
           Biblical Christianity uses). The other 19 religions use `.pray-panel`,
           which was leaking through the tile picker view because of the global
           `.pray-panel.active { display: block }` rule. Now we explicitly hide
           BOTH .rel-panel AND .pray-panel inside #world-religions when not in
           viewing-religion mode, using !important to override the global rule. */
        #world-religions:not(.viewing-religion) .rel-panel,
        #world-religions:not(.viewing-religion) .pray-panel {
            display: none !important;
        }
        #world-religions.viewing-religion .religion-tile-grid,
        #world-religions.viewing-religion .religion-intro {
            display: none;
        }
        #world-religions.viewing-religion .rel-panel.active,
        #world-religions.viewing-religion .pray-panel.active {
            display: block;
        }

        /* ── Nested sub-tile view INSIDE each religion panel ──
           Each religion panel has its own inner tile grid (e.g., #cath-tabs-bar
           as a .subtopic-tile-grid). When a sub-tile is tapped, the religion
           panel gets .viewing-subtopic, which hides its inner tile grid and
           shows only the active inner panel.
           
           Note: religion outer containers use TWO different classes:
           - rel-panel (biblical christianity)
           - pray-panel (the other 19)
           So we scope to #world-religions to catch both safely. */
        #world-religions [id^="rel-"]:not(.viewing-subtopic) > .cath-panel {
            display: none !important;
        }
        #world-religions [id^="rel-"].viewing-subtopic > .subtopic-tile-grid {
            display: none;
        }
        #world-religions [id^="rel-"].viewing-subtopic > .cath-panel {
            display: none;
        }
        #world-religions [id^="rel-"].viewing-subtopic > .cath-panel.active {
            display: block;
        }

        /* ── 4th-level nesting: Claiming Christ movements ──
           Each movement (cc-wof, cc-oneness, cc-nar, cc-hypergrace, cc-liberal)
           contains its OWN tile grid + 6 step panels. Same toggle pattern as
           religions: when not "viewing-subtopic-movement", show ONLY the tile
           grid + intro content; when set, hide tiles and show the active step. */
        #world-religions [id^="cc-"]:not(.viewing-subtopic-movement) > .cath-panel {
            display: none !important;
        }
        #world-religions [id^="cc-"].viewing-subtopic-movement > .subtopic-tile-grid {
            display: none;
        }
        #world-religions [id^="cc-"].viewing-subtopic-movement > .cath-panel {
            display: none;
        }
        #world-religions [id^="cc-"].viewing-subtopic-movement > .cath-panel.active {
            display: block;
        }

        /* ============================================================
           SUBTOPIC TILES — generic tile grid used inside topic sections
           (How to Pray, doctrines, etc.) to replace swipe bars. Same
           visual language as religion tiles, just generically named.
           
           IMPORTANT: All dimensions are in `em`/`rem` units so the tiles
           scale proportionally with the user's font-size setting. When
           the user enlarges text via the Text Size popup, the tiles grow
           to match. The grid uses `auto-fill + minmax(em)` so the number
           of columns automatically reduces as tiles get bigger — the
           layout always fits the screen.
        ============================================================ */
        .subtopic-tile-grid {
            display: grid;
            /* minmax 8.75em ≈ 140px at 100% font, ≈ 210px at 150% font.
               Auto-fill drops columns as tiles need more width. */
            grid-template-columns: repeat(auto-fill, minmax(8.75em, 1fr));
            gap: 0.875em;
            margin: 0.75em 0 1.875em 0;
        }
        /* ════════════════════════════════════════════════════════════════
           NEUMORPHIC SUBTOPIC TILE
           Same soft UI / neumorphic press behavior as .religion-tile.
           Adds a subtle serif corner number (via .tf-step-badge below).
           ──────────────────────────────────────────────────────────────── */
        .subtopic-tile {
            background: var(--bg-elevated);
            border: none;
            border-radius: 1em;
            padding: 1.125em 0.75em 0.875em 0.75em;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5em;
            cursor: pointer;
            text-align: center;
            position: relative;
            overflow: hidden;
            -webkit-tap-highlight-color: transparent;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            min-height: 6.875em;
            box-shadow:
                -6px -6px 12px color-mix(in srgb, var(--bg-elevated) 80%, #fff),
                6px 6px 12px color-mix(in srgb, var(--bg-elevated) 70%, #000);
            transition: box-shadow 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
            user-select: none;
        }
        body.light-mode .subtopic-tile {
            box-shadow:
                -6px -6px 12px color-mix(in srgb, var(--bg-elevated) 70%, #fff),
                6px 6px 12px color-mix(in srgb, var(--bg-elevated) 75%, #000);
        }

        /* WATERMARK ICON — large, faded, behind the front icon and text */
        .subtopic-tile-bg-icon {
            position: absolute;
            font-size: 4.5em;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -45%);
            opacity: 0.07;
            z-index: 1;
            pointer-events: none;
            color: var(--accent);
            transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        /* ── NEUMORPHIC PRESS: shadows flip to inset ── */
        .subtopic-tile:active {
            box-shadow:
                inset -5px -5px 10px color-mix(in srgb, var(--bg-elevated) 80%, #fff),
                inset 5px 5px 10px color-mix(in srgb, var(--bg-elevated) 70%, #000);
            transition: box-shadow 0.1s cubic-bezier(0.4, 0.0, 0.2, 1);
        }
        body.light-mode .subtopic-tile:active {
            box-shadow:
                inset -5px -5px 10px color-mix(in srgb, var(--bg-elevated) 70%, #fff),
                inset 5px 5px 10px color-mix(in srgb, var(--bg-elevated) 75%, #000);
        }

        /* ── ACTIVE state: tile stays RAISED, watermark brightens slightly ── */
        .subtopic-tile.active .subtopic-tile-bg-icon { opacity: 0.12; }

        /* Respect reduced-motion */
        @media (prefers-reduced-motion: reduce) {
            .subtopic-tile,
            .subtopic-tile:active,
            .subtopic-tile.active {
                transition: box-shadow 0.22s ease;
                transform: none !important;
            }
            .subtopic-tile-icon,
            .subtopic-tile-bg-icon {
                transition: none !important;
                transform: none !important;
            }
            .subtopic-tile-bg-icon {
                transform: translate(-50%, -45%) !important;
            }
        }
        /* Keyboard focus indicator — visible accent-colored ring for keyboard users only.
           :focus-visible avoids showing a ring on mouse-clicks while preserving keyboard a11y. */
        .subtopic-tile:focus-visible,
        .religion-tile:focus-visible,
        .pray-tab:focus-visible,
        .cath-tab:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent),
                        0 2px 8px rgba(0,0,0,0.10);
        }
        /* Generic keyboard focus for other interactive elements */
        button:focus-visible,
        a:focus-visible,
        [role="button"]:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .subtopic-tile-icon {
            position: relative;
            z-index: 2;
            width: 2.5em;
            height: 2.5em;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            background: var(--bg-elevated);
            color: var(--accent);
            box-shadow:
                -2px -2px 4px color-mix(in srgb, var(--bg-elevated) 80%, #fff),
                2px 2px 4px color-mix(in srgb, var(--bg-elevated) 70%, #000);
            transition: box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
        }
        body.light-mode .subtopic-tile-icon {
            box-shadow:
                -2px -2px 4px color-mix(in srgb, var(--bg-elevated) 70%, #fff),
                2px 2px 4px color-mix(in srgb, var(--bg-elevated) 75%, #000);
        }
        .subtopic-tile:active .subtopic-tile-icon {
            box-shadow:
                inset -2px -2px 4px color-mix(in srgb, var(--bg-elevated) 80%, #fff),
                inset 2px 2px 4px color-mix(in srgb, var(--bg-elevated) 70%, #000);
        }
        body.light-mode .subtopic-tile:active .subtopic-tile-icon {
            box-shadow:
                inset -2px -2px 4px color-mix(in srgb, var(--bg-elevated) 70%, #fff),
                inset 2px 2px 4px color-mix(in srgb, var(--bg-elevated) 75%, #000);
        }
        /* ════════════════════════════════════════════════════════════════
           Universal per-tone icon colors (LOCKED across all themes).
           ════════════════════════════════════════════════════════════════ */
        .subtopic-tile[data-tone="gold"]    .subtopic-tile-icon,
        .subtopic-tile[data-tone="gold"]    .subtopic-tile-bg-icon { color: #d4af37; }
        .subtopic-tile[data-tone="rose"]    .subtopic-tile-icon,
        .subtopic-tile[data-tone="rose"]    .subtopic-tile-bg-icon { color: #e0556a; }
        .subtopic-tile[data-tone="amber"]   .subtopic-tile-icon,
        .subtopic-tile[data-tone="amber"]   .subtopic-tile-bg-icon { color: #c97f1f; }
        .subtopic-tile[data-tone="sage"]    .subtopic-tile-icon,
        .subtopic-tile[data-tone="sage"]    .subtopic-tile-bg-icon { color: #4a8a5a; }
        .subtopic-tile[data-tone="sky"]     .subtopic-tile-icon,
        .subtopic-tile[data-tone="sky"]     .subtopic-tile-bg-icon { color: #3a7eb8; }
        .subtopic-tile[data-tone="plum"]    .subtopic-tile-icon,
        .subtopic-tile[data-tone="plum"]    .subtopic-tile-bg-icon { color: #7a4ca8; }
        .subtopic-tile[data-tone="copper"]  .subtopic-tile-icon,
        .subtopic-tile[data-tone="copper"]  .subtopic-tile-bg-icon { color: #b66a28; }
        .subtopic-tile[data-tone="teal"]    .subtopic-tile-icon,
        .subtopic-tile[data-tone="teal"]    .subtopic-tile-bg-icon { color: #2a8a83; }
        .subtopic-tile[data-tone="slate"]   .subtopic-tile-icon,
        .subtopic-tile[data-tone="slate"]   .subtopic-tile-bg-icon { color: #6a7a92; }
        .subtopic-tile[data-tone="crimson"] .subtopic-tile-icon,
        .subtopic-tile[data-tone="crimson"] .subtopic-tile-bg-icon { color: #c33848; }

        /* On .active (selected): icon badge fills with the tone color */
        .subtopic-tile[data-tone="gold"].active    .subtopic-tile-icon { background: #d4af37; color: var(--bg-elevated); }
        .subtopic-tile[data-tone="rose"].active    .subtopic-tile-icon { background: #e0556a; color: var(--bg-elevated); }
        .subtopic-tile[data-tone="amber"].active   .subtopic-tile-icon { background: #c97f1f; color: var(--bg-elevated); }
        .subtopic-tile[data-tone="sage"].active    .subtopic-tile-icon { background: #4a8a5a; color: var(--bg-elevated); }
        .subtopic-tile[data-tone="sky"].active     .subtopic-tile-icon { background: #3a7eb8; color: var(--bg-elevated); }
        .subtopic-tile[data-tone="plum"].active    .subtopic-tile-icon { background: #7a4ca8; color: var(--bg-elevated); }
        .subtopic-tile[data-tone="copper"].active  .subtopic-tile-icon { background: #b66a28; color: var(--bg-elevated); }
        .subtopic-tile[data-tone="teal"].active    .subtopic-tile-icon { background: #2a8a83; color: var(--bg-elevated); }
        .subtopic-tile[data-tone="slate"].active   .subtopic-tile-icon { background: #6a7a92; color: var(--bg-elevated); }
        .subtopic-tile[data-tone="crimson"].active .subtopic-tile-icon { background: #c33848; color: var(--bg-elevated); }
        .subtopic-tile-name {
            font-size: 0.84rem;
            font-weight: 600;
            color: var(--text);
            line-height: 1.25;
            margin: 0;
            letter-spacing: -0.002em;
        }

        /* ════════════════════════════════════════════════════════════════
           NUMBERED STEP BADGES — Refined accent-colored circular badges
           ----------------------------------------------------------------
           Applied across all sub-content tile grids in the app (everywhere
           EXCEPT the 19 main sin tiles and 20 main religion cards — those
           are top-level categories, not ordered steps).
           
           Each tile gets a small filled accent-colored circular badge in
           the top-left corner showing the step number. Subtle gradient +
           soft shadow give the badge dimension. Adapts to all 14 themes.
           ════════════════════════════════════════════════════════════════ */

        /* ────────────────────────────────────────────────────────────────
           Step badge — subtle serif numeral in the TOP-RIGHT corner of
           each subtopic tile. Complements the neumorphic tile design.
           Color brightens to full accent on .active (selected) state.
        ──────────────────────────────────────────────────────────────── */
        .tf-step-badge {
            position: absolute;
            top: 9px;
            right: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Playfair Display', 'Georgia', serif;
            font-size: 0.95rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.02em;
            color: color-mix(in srgb, var(--accent) 35%, transparent);
            background: transparent;
            border: none;
            box-shadow: none;
            z-index: 3;
            pointer-events: none;
            transition: color 0.3s ease;
        }
        /* On .active (selected): numeral brightens to full accent color */
        .subtopic-tile.active .tf-step-badge {
            color: var(--accent);
        }
        /* Light mode: stronger default color for readability */
        body.light-mode .tf-step-badge {
            color: color-mix(in srgb, var(--accent) 50%, transparent);
        }
        body.light-mode .subtopic-tile.active .tf-step-badge {
            color: var(--accent);
        }

        /* Smaller numeral for inner nested tile grids */
        #overcoming-sin > .pray-panel > .subtopic-tile-grid .tf-step-badge,
        #world-religions [id^="rel-"] > .subtopic-tile-grid .tf-step-badge,
        #world-religions [id^="cc-"] > .subtopic-tile-grid .tf-step-badge {
            font-size: 0.85rem;
            top: 7px;
            right: 11px;
        }

        /* ── Smaller variant for INNER nested tile grids ──
           Applied to:
             • Inner sin tiles (Truth & Freedom / Path / Prayer / Scriptures / FAQ
               inside each sin like #sin-alcohol — nested two levels deep under
               #overcoming-sin)
             • Inner religion tabs (Overview / History / Salvation / etc. inside
               each religion like #rel-catholicism — nested two levels deep under
               #world-religions)
             • Inner Claiming Christ movement steps (Overview / What They Teach /
               etc. inside #cc-wof, #cc-oneness, #cc-nar, #cc-hypergrace, #cc-liberal —
               nested THREE levels deep: world-religions → claimingchrist → movement)
           These tile grids sit inside a parent panel; making them slightly smaller
           gives visual hierarchy and signals "you are inside a topic, navigating
           within it." The icon, font, and padding all scale down proportionally. */
        #overcoming-sin > .pray-panel > .subtopic-tile-grid,
        #world-religions [id^="rel-"] > .subtopic-tile-grid,
        #world-religions [id^="cc-"] > .subtopic-tile-grid {
            /* Slightly smaller min for inner grids — at 100% font ≈ 128px,
               vs outer's 140px. Auto-fill drops columns as font grows. */
            grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
            gap: 0.6875em;
            margin: 0.6875em 0 1.5em 0;
        }
        #overcoming-sin > .pray-panel > .subtopic-tile-grid .subtopic-tile,
        #world-religions [id^="rel-"] > .subtopic-tile-grid .subtopic-tile,
        #world-religions [id^="cc-"] > .subtopic-tile-grid .subtopic-tile {
            min-height: 6em;
            padding: 1em 0.625em 0.75em 0.625em;
            gap: 0.5em;
            border-radius: 0.9375em;
        }
        #overcoming-sin > .pray-panel > .subtopic-tile-grid .subtopic-tile-icon,
        #world-religions [id^="rel-"] > .subtopic-tile-grid .subtopic-tile-icon,
        #world-religions [id^="cc-"] > .subtopic-tile-grid .subtopic-tile-icon {
            width: 2.5em;
            height: 2.5em;
            font-size: 1.05rem;
        }
        #overcoming-sin > .pray-panel > .subtopic-tile-grid .subtopic-tile-name,
        #world-religions [id^="rel-"] > .subtopic-tile-grid .subtopic-tile-name,
        #world-religions [id^="cc-"] > .subtopic-tile-grid .subtopic-tile-name {
            font-size: 0.8rem;
            line-height: 1.22;
        }

        /* ── #pray section: subtopic-tile view toggle ──
           Default: show tiles, hide all pray-panels.
           When .viewing-subtopic is set: hide tiles, show only active panel. */
        #pray:not(.viewing-subtopic) .pray-panel { display: none !important; }
        #pray.viewing-subtopic .subtopic-tile-grid { display: none; }
        #pray.viewing-subtopic .pray-panel { display: none; }
        #pray.viewing-subtopic .pray-panel.active { display: block; }

        /* ── #first-steps section: same subtopic toggle ── */
        #first-steps:not(.viewing-subtopic) .pray-panel { display: none !important; }
        #first-steps.viewing-subtopic .subtopic-tile-grid { display: none; }
        #first-steps.viewing-subtopic .pray-panel { display: none; }
        #first-steps.viewing-subtopic .pray-panel.active { display: block; }
        #first-steps.viewing-subtopic .fs-landing-openers { display: none; }
        #first-steps:not(.viewing-subtopic) .fs-landing-openers { display: block; }

        /* ── #hell, #heaven, #prophecy, #evidence, #spirit: same subtopic toggle ── */
        #hell:not(.viewing-subtopic) .pray-panel { display: none !important; }
        #hell.viewing-subtopic .subtopic-tile-grid { display: none; }
        #hell.viewing-subtopic .pray-panel { display: none; }
        #hell.viewing-subtopic .pray-panel.active { display: block; }
        #hell.viewing-subtopic .hell-landing-openers { display: none; }
        #hell:not(.viewing-subtopic) .hell-landing-openers { display: block; }

        #heaven:not(.viewing-subtopic) .pray-panel { display: none !important; }
        #heaven.viewing-subtopic .subtopic-tile-grid { display: none; }
        #heaven.viewing-subtopic .pray-panel { display: none; }
        #heaven.viewing-subtopic .pray-panel.active { display: block; }
        #heaven.viewing-subtopic .heaven-landing-openers { display: none; }
        #heaven:not(.viewing-subtopic) .heaven-landing-openers { display: block; }

        #prophecy:not(.viewing-subtopic) .pray-panel { display: none !important; }
        #prophecy.viewing-subtopic .subtopic-tile-grid { display: none; }
        #prophecy.viewing-subtopic .pray-panel { display: none; }
        #prophecy.viewing-subtopic .pray-panel.active { display: block; }

        #evidence:not(.viewing-subtopic) .pray-panel { display: none !important; }
        #evidence.viewing-subtopic .subtopic-tile-grid { display: none; }
        #evidence.viewing-subtopic .pray-panel { display: none; }
        #evidence.viewing-subtopic .pray-panel.active { display: block; }
        #evidence.viewing-subtopic .evid-landing-openers { display: none; }
        #evidence:not(.viewing-subtopic) .evid-landing-openers { display: block; }

        #spirit:not(.viewing-subtopic) .pray-panel { display: none !important; }
        #spirit.viewing-subtopic .subtopic-tile-grid { display: none; }
        #spirit.viewing-subtopic .pray-panel { display: none; }
        #spirit.viewing-subtopic .pray-panel.active { display: block; }
        #spirit.viewing-subtopic .spirit-landing-openers { display: none; }
        #spirit:not(.viewing-subtopic) .spirit-landing-openers { display: block; }

        /* ── Batch 3: Gnosticism, Eternal Security, Overcoming Sin, Spreading, Helping ── */
        #gnosticism:not(.viewing-subtopic) .pray-panel { display: none !important; }
        #gnosticism.viewing-subtopic .subtopic-tile-grid { display: none; }
        #gnosticism.viewing-subtopic .pray-panel { display: none; }
        #gnosticism.viewing-subtopic .pray-panel.active { display: block; }
        #gnosticism.viewing-subtopic .gnost-landing-openers { display: none; }
        #gnosticism:not(.viewing-subtopic) .gnost-landing-openers { display: block; }

        #eternal-security:not(.viewing-subtopic) .pray-panel { display: none !important; }
        #eternal-security.viewing-subtopic .subtopic-tile-grid { display: none; }
        #eternal-security.viewing-subtopic .pray-panel { display: none; }
        #eternal-security.viewing-subtopic .pray-panel.active { display: block; }
        #eternal-security.viewing-subtopic .es-landing-openers { display: none; }
        #eternal-security:not(.viewing-subtopic) .es-landing-openers { display: block; }

        #overcoming-sin:not(.viewing-subtopic) > .pray-panel { display: none !important; }
        #overcoming-sin.viewing-subtopic > .subtopic-tile-grid { display: none; }
        #overcoming-sin.viewing-subtopic > .pray-panel { display: none; }
        #overcoming-sin.viewing-subtopic > .pray-panel.active { display: block; }

        /* ── Nested toggle for INNER sin tiles (Truth & Freedom / Path / FAQ) ──
           When a sin's outer panel does NOT have .viewing-subtopic: hide all its
           inner pray-panels, show only the inner subtopic-tile-grid.
           When a sin panel HAS .viewing-subtopic: hide its tile grid + breadcrumb
           parent, show only its .active inner pray-panel. */
        #overcoming-sin > .pray-panel:not(.viewing-subtopic) > .pray-panel { display: none !important; }
        #overcoming-sin > .pray-panel.viewing-subtopic > .subtopic-tile-grid { display: none; }
        #overcoming-sin > .pray-panel.viewing-subtopic > .pray-panel { display: none; }
        #overcoming-sin > .pray-panel.viewing-subtopic > .pray-panel.active { display: block; }
        /* The moved theological-foundation block sits at the sin's outer level
           (next to the inner tile grid) — hide it when an inner panel is open. */
        #overcoming-sin > .pray-panel.viewing-subtopic > .theological-foundation { display: none; }

        #spreading-gospel:not(.viewing-subtopic) .pray-panel { display: none !important; }
        #spreading-gospel.viewing-subtopic .subtopic-tile-grid { display: none; }
        #spreading-gospel.viewing-subtopic .pray-panel { display: none; }
        #spreading-gospel.viewing-subtopic .pray-panel.active { display: block; }
        #spreading-gospel.viewing-subtopic .spread-landing-openers { display: none; }
        #spreading-gospel:not(.viewing-subtopic) .spread-landing-openers { display: block; }

        /* Helping Unbelievers uses .help-panel (not .pray-panel) */
        #pray-others:not(.viewing-subtopic) .help-panel { display: none !important; }
        #pray-others.viewing-subtopic .subtopic-tile-grid { display: none; }
        #pray-others.viewing-subtopic .help-panel { display: none; }
        #pray-others.viewing-subtopic .help-panel.active { display: block; }

        /* ── Section-level intro callout ──
           Marked with .section-intro-callout. Shown only on tile/overview
           view; hidden when the user is reading a subtopic. Reusable for
           any future section that has a welcoming intro card. */
        .section.viewing-subtopic .section-intro-callout,
        .section.viewing-religion .section-intro-callout {
            display: none !important;
        }

        /* ── #commandments section: subtopic toggle + 10 Commandments display ──
           In tile view: show the 10 commandments + the tile grid.
           In subtopic view: hide both, show only the active panel. */
        #commandments:not(.viewing-subtopic) .pray-panel { display: none !important; }
        #commandments.viewing-subtopic .subtopic-tile-grid { display: none; }
        #commandments.viewing-subtopic .commandments-display { display: none; }
        #commandments.viewing-subtopic .pray-panel { display: none; }
        #commandments.viewing-subtopic .pray-panel.active { display: block; }

        /* The 10 Commandments display (shown in tile view of #commandments) */
        .commandments-display {
            background: var(--bg-elevated);
            border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
            border-radius: 18px;
            padding: 18px 18px 16px 18px;
            margin: 6px 0 22px 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.05);
        }
        body.light-mode .commandments-display {
            box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 14px rgba(0,0,0,0.05);
        }
        .commandments-display-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.08rem;
            font-weight: 600;
            color: var(--h1-color);
            text-align: center;
            margin: 0 0 14px 0;
            letter-spacing: -0.005em;
        }
        .commandments-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px 18px;
        }
        @media (max-width: 380px) {
            .commandments-grid { gap: 6px 10px; }
        }
        .commandment-item {
            display: flex;
            align-items: baseline;
            gap: 8px;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            line-height: 1.4;
            color: var(--text);
            padding: 4px 0;
        }
        .commandment-num {
            flex: 0 0 auto;
            font-weight: 700;
            color: var(--accent);
            min-width: 1.5em;
            font-variant-numeric: tabular-nums;
            font-size: 0.85rem;
        }

        /* ── Breadcrumb (parent section › current subtopic) ──
           Floats below the back button when viewing a subtopic.
           Hidden by default; shown when body.subtopic-active is set. */

        /* ════════════════════════════════════════════════════════════════
           SECTION BANNER — Top-of-section hero image
           ----------------------------------------------------------------
           Sits at the very top of each section's content area, in place
           of the old <h2> title + decorative divider. The image itself
           carries the section title, so no text heading is needed.
           Shows for both the section landing view (tile grid) and any
           subsection panel inside the same section container.
           ════════════════════════════════════════════════════════════════ */
        /* ════════════════════════════════════════════════════════════════
           UPDATE BANNER — "New version available" notification
           ----------------------------------------------------------------
           Slides up from the bottom of the screen when the service worker
           detects a new version has been downloaded. Tapping "Refresh now"
           activates the new version and reloads. Designed to stay above
           the bottom nav and respect the home-indicator safe area.
           ════════════════════════════════════════════════════════════════ */
        #tf-update-banner {
            position: fixed;
            left: 16px;
            right: 16px;
            bottom: calc(16px + env(safe-area-inset-bottom));
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 16px;
            background: var(--bg-elevated, #1a1a1a);
            color: var(--text, #f5f5f5);
            border: 1px solid var(--accent, #b8965a);
            border-radius: 14px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.18), 0 12px 32px rgba(0,0,0,0.25);
            font-family: 'Inter', sans-serif;
            font-size: 0.92rem;
            line-height: 1.35;
            animation: tf-update-slide-up 0.35s ease-out;
        }
        .tf-update-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1 1 auto;
            min-width: 0;
        }
        .tf-update-text strong {
            font-weight: 600;
            color: var(--accent, #b8965a);
            font-size: 0.95rem;
        }
        .tf-update-text span {
            color: var(--text-muted, #b8b3a8);
            font-size: 0.85rem;
        }
        .tf-update-actions {
            display: flex;
            gap: 8px;
            flex: 0 0 auto;
        }
        .tf-update-btn {
            border: none;
            border-radius: 10px;
            padding: 8px 14px;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: filter 0.15s ease, transform 0.05s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .tf-update-refresh {
            background: var(--accent, #b8965a);
            color: #1a1a1a;
        }
        .tf-update-later {
            background: transparent;
            color: var(--text-muted, #b8b3a8);
            border: 1px solid var(--border, rgba(255,255,255,0.12));
        }
        .tf-update-btn:active { transform: scale(0.97); }
        .tf-update-refresh:hover { filter: brightness(1.08); }
        .tf-update-dismiss {
            animation: tf-update-slide-down 0.3s ease-in forwards;
        }
        @keyframes tf-update-slide-up {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes tf-update-slide-down {
            from { opacity: 1; transform: translateY(0); }
            to   { opacity: 0; transform: translateY(20px); }
        }
        /* Narrow phones: stack the message above the buttons */
        @media (max-width: 380px) {
            #tf-update-banner {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }
            .tf-update-actions { justify-content: flex-end; }
        }

        /* ════════════════════════════════════════════════════════════════
           MINI-TRAIL — "Part X of Y" / "Step X of Y" position indicator
           ----------------------------------------------------------------
           Used universally across all sections with subsections. Shows
           the user where they are in a sequence of subsections, with a
           small label, the position number, total, and progress dots.
           The hardcoded First Steps "Step" indicators use the same
           markup; this CSS styles them too.
           ════════════════════════════════════════════════════════════════ */
        .tf-mini-trail {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 4px 0 18px 0;
            padding: 8px 14px;
            background: rgba(184, 150, 90, 0.08);
            border: 1px solid rgba(184, 150, 90, 0.18);
            border-radius: 999px;
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-muted);
            width: fit-content;
            max-width: 100%;
            user-select: none;
        }
        body.light-mode .tf-mini-trail {
            background: rgba(184, 150, 90, 0.10);
            border-color: rgba(184, 150, 90, 0.25);
        }
        .tf-mini-trail-label {
            color: var(--accent, #b8965a);
            font-weight: 700;
        }
        .tf-mini-trail-position {
            color: var(--text);
            font-weight: 700;
            font-size: 0.92rem;
            margin-left: 2px;
        }
        .tf-mini-trail-dots {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-left: 6px;
            flex-wrap: wrap;
            max-width: 180px;
        }
        .tf-mini-trail-dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(184, 150, 90, 0.25);
            transition: background 0.2s ease, transform 0.2s ease;
        }
        .tf-mini-trail-dot.is-passed {
            background: rgba(184, 150, 90, 0.55);
        }
        .tf-mini-trail-dot.is-current {
            background: var(--accent, #b8965a);
            transform: scale(1.35);
            box-shadow: 0 0 0 2px rgba(184, 150, 90, 0.18);
        }
        /* Narrow phones: shrink slightly so it never overflows */
        @media (max-width: 380px) {
            .tf-mini-trail {
                font-size: 0.72rem;
                gap: 6px;
                padding: 7px 11px;
            }
            .tf-mini-trail-dots { gap: 3px; max-width: 130px; }
            .tf-mini-trail-dot { width: 5px; height: 5px; }
        }

        .section-banner {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 20px;
            margin: 0 0 24px 0;
            object-fit: cover;
            box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 20px rgba(0,0,0,0.08);
        }
        /* Fallback styling if image fails to load — keeps layout intact */
        .section-banner[alt]:not([src]),
        .section-banner:not([src]) {
            min-height: 96px;
            padding: 20px;
            background: var(--bg-elevated);
            color: var(--text);
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.3rem;
            text-align: center;
            line-height: 1.3;
        }

        .tf-breadcrumb {
            position: fixed;
            top: calc(20px + env(safe-area-inset-top));
            left: 72px;
            right: 16px;
            z-index: 698;
            display: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-muted);
            line-height: 1.2;
            pointer-events: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            letter-spacing: -0.005em;
        }
        body.subtopic-active .tf-breadcrumb { display: block; }
        .tf-breadcrumb-parent {
            color: var(--text-muted);
            opacity: 0.75;
        }
        .tf-breadcrumb-sep {
            margin: 0 6px;
            color: var(--text-muted);
            opacity: 0.55;
        }
        .tf-breadcrumb-current {
            color: var(--text);
            font-weight: 600;
        }

/* ============================================================
   *** TRUTH & FOUNDATION — NEW COMPONENTS (Hell section v2) ***
   Added by reorganization. Reusable across all sections.
============================================================ */

/* SUBSECTION HEADER — appears at the top of each pray-panel so the
   reader sees "Part 1 of 7" + the subsection name clearly on entry. */
.tf-subsection-header {
    background: linear-gradient(135deg, rgba(184,150,90,0.10) 0%, rgba(184,150,90,0.02) 100%);
    border: 1px solid var(--gold-border);
    border-radius: 12px;
    padding: 14px 22px 18px;
    margin: 0 0 22px;
    position: relative;
}

/* PART X / 7 pill with progress dots, sits at top of subsection-header */
.tf-part-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    margin: 0 0 12px;
    border: 1px solid var(--gold-border);
    border-radius: 999px;
    background: rgba(184,150,90,0.10);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}
.tf-part-text { line-height: 1; }
.tf-part-text strong {
    color: var(--gold-light);
    font-weight: 800;
    font-size: 0.85rem;
    margin: 0 1px;
}
.tf-part-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.tf-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(184,150,90,0.18);
    border: 1px solid rgba(184,150,90,0.30);
    display: inline-block;
}
.tf-dot.tf-dot-current {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 6px rgba(184,150,90,0.55);
}
.tf-subsection-name {
    font-family: 'Playfair Display', serif;
    color: var(--gold-light);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 4px;
}
.tf-subsection-tagline {
    font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.5;
}

/* ===== Orthodox tab headers: centered ornament (#6), frameless — no box, no corners.
   Trial; scoped to #rel-orthodox only so other religions' headers are unaffected. ===== */
#rel-orthodox .tf-subsection-header {
    text-align: center;
    background: none;
    border: none;
    border-radius: 0;
    padding: 2px 0 8px;
}
#rel-orthodox .tf-orth-kicker {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}
#rel-orthodox .tf-orth-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 10px;
}
#rel-orthodox .tf-orth-rule::before,
#rel-orthodox .tf-orth-rule::after {
    content: "";
    height: 1px;
    width: 38px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
#rel-orthodox .tf-orth-rule::after {
    background: linear-gradient(90deg, var(--gold), transparent);
}
#rel-orthodox .tf-orth-rule i {
    color: #7a4ca8; /* Eastern Orthodox 'plum' tone, matching the religion tile */
    font-size: 0.78rem;
}
#rel-orthodox .tf-subsection-name {
    color: var(--text);
    margin: 0;
}

/* Orthodox section headings above the topic accordions: design #29 "Split Rule"
   (centered title flanked by hairlines) + design #17 italic gold accent word.
   Scoped to h3.tf-orth-h3 only, so the "Heart of the Matter" boxes (plain h3 inside
   .theological-foundation) keep their native style. */
#rel-orthodox h3.tf-orth-h3 {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: center;
    color: var(--text);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.25;
}
#rel-orthodox h3.tf-orth-h3::before,
#rel-orthodox h3.tf-orth-h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gold);
}
#rel-orthodox h3.tf-orth-h3 em {
    font-style: italic;
    font-weight: 500;
    color: var(--gold-light);
}

/* Orthodox progress indicator: drop the pill and the "Part X / Y" text,
   leaving only the centered dot trail. Scoped to #rel-orthodox. */
#rel-orthodox .tf-mini-trail {
    justify-content: center;
    width: auto;
    background: none;
    border: none;
    padding: 0;
}
#rel-orthodox .tf-mini-trail > span:not(.tf-mini-trail-dots) {
    display: none;
}
#rel-orthodox .tf-mini-trail-dots {
    margin-left: 0;
}

/* Orthodox topic tiles (the landing grid): design #8 "Corner Bracket".
   Flat dark tile with gold corner brackets; keeps the per-tone colored icons
   and the 1-10 step numbers. The double-id prefix is intentional: it outranks
   the existing #world-religions [id^="rel-"] tile rules. Scoped to the Orthodox bar. */
#rel-orthodox #orth-tabs-bar .subtopic-tile {
    background: rgba(0,0,0,0.16);
    border-radius: 0;
    box-shadow: none;
}
body.light-mode #rel-orthodox #orth-tabs-bar .subtopic-tile {
    background: transparent;
}
/* flatten the neumorphic icon chip but keep its per-tone color */
#rel-orthodox #orth-tabs-bar .subtopic-tile-icon {
    background: none;
    box-shadow: none;
    width: auto;
    height: auto;
    font-size: 1.35rem;
}
/* design #8 has no watermark icon */
#rel-orthodox #orth-tabs-bar .subtopic-tile-bg-icon {
    display: none;
}
/* name: muted by default, brightens when the tile is active */
#rel-orthodox #orth-tabs-bar .subtopic-tile-name {
    color: var(--text-muted);
}
#rel-orthodox #orth-tabs-bar .subtopic-tile.active .subtopic-tile-name {
    color: var(--gold-light);
}
/* Catholic bar: same treatment — muted names, active brightens to gold */
#rel-catholicism #cath-tabs-bar .subtopic-tile-name {
    color: var(--text-muted);
}
#rel-catholicism #cath-tabs-bar .subtopic-tile.active .subtopic-tile-name {
    color: var(--gold-light);
}

/* PANEL TOC — "In this section" pill links for jumping around */
.tf-panel-toc {
    background: rgba(184,150,90,0.05);
    border: 1px solid var(--gold-border);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.tf-panel-toc-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-right: 4px;
}
.tf-panel-toc a {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: all 0.18s;
}
.tf-panel-toc a:hover,
.tf-panel-toc a:focus {
    background: var(--gold-muted);
    border-color: var(--gold-border);
    color: var(--gold-light);
}

/* KEY POINTS — "What this section covers" easy-to-read summary */
.tf-key-points {
    background: linear-gradient(135deg, rgba(184,150,90,0.08) 0%, rgba(184,150,90,0.02) 100%);
    border: 1px solid var(--gold-border);
    border-radius: 10px;
    padding: 14px 20px;
    margin: 0 0 26px;
}
.tf-key-points-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tf-key-points-title::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--gold);
    opacity: 0.6;
}
.tf-key-points ul {
    margin: 0;
    padding-left: 18px;
    list-style: none;
}
.tf-key-points li {
    position: relative;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 6px;
    padding-left: 4px;
}
.tf-key-points li::before {
    content: '\2727';
    position: absolute;
    left: -16px;
    color: var(--gold);
    font-size: 0.82rem;
    top: 2px;
}
.tf-key-points li:last-child { margin-bottom: 0; }

/* CAUTION BUTTON — click-to-open warning */
.tf-hazard-btn {
    margin: 16px 0;
    border: 1px solid var(--caution-border);
    border-radius: 10px;
    overflow: visible;
    background: var(--bg-elevated);
    position: relative;
}
/* Neon wire-trace: starts as a 0-width line at top center,
   expands outward to full width with an amber glow when the box opens. */
.tf-hazard-btn::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--caution-border);
    transition: width 0.5s ease, left 0.5s ease, box-shadow 0.5s ease;
    border-radius: 2px;
    pointer-events: none;
}
.tf-hazard-btn[open]::after {
    width: 100%;
    left: 0;
    box-shadow: 0 0 12px var(--caution-border),
                0 0 4px var(--caution-border);
}
.tf-hazard-btn > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: background 0.2s ease;
    border-radius: 10px 10px 0 0;
}
.tf-hazard-btn > summary::-webkit-details-marker { display: none; }
/* Diagonal amber-striped hazard background on the header */
.tf-hazard-btn > summary::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        45deg,
        var(--caution-bg),
        var(--caution-bg) 10px,
        var(--bg-elevated) 10px,
        var(--bg-elevated) 20px
    );
    z-index: -1;
    opacity: 0.55;
    transition: opacity 0.25s ease;
}
.tf-hazard-btn > summary:active::before { opacity: 0.75; }
.tf-hazard-btn-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}
.tf-hazard-btn-icon {
    font-size: 1.1rem;
    color: var(--caution-border);
}
.tf-hazard-btn-chev {
    color: var(--caution-border);
    font-size: 0.9rem;
    opacity: 0.85;
    transition: transform 0.3s ease;
}
.tf-hazard-btn[open] .tf-hazard-btn-chev { transform: rotate(180deg); opacity: 1; }
.tf-hazard-btn-body {
    padding: 4px 18px 14px;
    border-top: 1px solid var(--caution-border);
    background: var(--bg-elevated);
    border-radius: 0 0 10px 10px;
}
.tf-hazard-btn-body p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 12px 0 0;
    line-height: 1.72;
}
.tf-hazard-btn-body p:first-child { margin-top: 12px; }
.tf-hazard-btn-body strong { color: var(--text); }
.tf-hazard-btn-body em { color: var(--caution-text); }
.tf-hazard-btn-body ul {
    color: var(--text-secondary);
    padding-left: 20px;
    margin: 10px 0;
}

/* REFLECTION BUTTON — click-to-open thoughtful voice (NOT a caution)
   For C.S. Lewis style supporting quotes. Blue/slate tone. */
.tf-reflection-btn {
    margin: 16px 0;
    border: 1px solid rgba(80,140,200,0.35);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(40,80,120,0.10);
}
.tf-reflection-btn > summary {
    list-style: none;
    cursor: pointer;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
    transition: background 0.18s;
}
.tf-reflection-btn > summary::-webkit-details-marker { display: none; }
.tf-reflection-btn > summary:hover { background: rgba(40,80,120,0.18); }
.tf-reflection-btn-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    color: #a8c8e8;
}
.tf-reflection-btn-icon { font-size: 1rem; }
.tf-reflection-btn-chev {
    color: #a8c8e8;
    font-size: 0.72rem;
    transition: transform 0.3s;
    opacity: 0.8;
}
.tf-reflection-btn[open] .tf-reflection-btn-chev { transform: rotate(180deg); }
.tf-reflection-btn-body {
    padding: 4px 18px 14px;
    border-top: 1px solid rgba(80,140,200,0.25);
}
.tf-reflection-btn-body blockquote {
    margin: 14px 0 8px;
    padding: 0 0 0 14px;
    border-left: 2px solid #5a9ad4;
    font-family: 'Source Serif 4', 'Spectral', 'Lora', serif;
    font-style: italic;
    color: rgba(200,220,240,0.92);
    font-size: 0.94rem;
    line-height: 1.7;
}
.tf-reflection-btn-body .tf-reflection-attrib {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-light);
    margin: 6px 0 0;
    padding-left: 14px;
}
.tf-reflection-btn-body p {
    margin: 12px 0 0;
    font-size: 0.92rem;
    color: rgba(200,220,240,0.85);
    line-height: 1.72;
}
.tf-reflection-btn-body strong { color: #b8d4f0; }

/* VERSE STACK — collapsible "X more supporting passages" */
.tf-verse-stack {
    margin: 16px 0 20px;
    border: 1px solid var(--gold-border);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(120,191,85,0.04);
}
.tf-verse-stack > summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gold-light);
    user-select: none;
    transition: background 0.18s;
}
.tf-verse-stack > summary::-webkit-details-marker { display: none; }
.tf-verse-stack > summary:hover { background: rgba(120,191,85,0.10); }
.tf-vs-inner {
    padding: 4px 14px 12px;
    border-top: 1px solid var(--gold-border);
}
.tf-vs-inner .scripture {
    margin: 12px 0 0;
    padding: 12px 16px 10px 22px;
    font-size: 0.92rem;
}
.tf-vs-inner .scripture::before {
    font-size: 2.2rem;
    top: -2px;
    left: 10px;
}

/* Mobile tweaks for new components */
@media (max-width: 600px) {
    .tf-subsection-header { padding: 14px 16px 16px; }
    .tf-subsection-name { font-size: 1.25rem; }
    .tf-key-points, .tf-panel-toc { padding: 12px 14px; }
}

/* MAIN-PAGE "IN THIS SECTION" — curated topic quick links */
.tf-section-toc {
    background: linear-gradient(135deg, rgba(184,150,90,0.08) 0%, rgba(184,150,90,0.02) 100%);
    border: 1px solid var(--gold-border);
    border-radius: 12px;
    padding: 16px 18px 18px;
    margin: 0 0 22px;
}
.tf-section-toc-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 12px;
}
.tf-section-toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}
.tf-section-toc-link {
    text-align: left;
    background: rgba(184,150,90,0.06);
    border: 1px solid var(--gold-border);
    border-radius: 9px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tf-section-toc-link:hover {
    background: rgba(184,150,90,0.14);
    border-color: var(--gold-light);
    transform: translateY(-1px);
}
.tf-section-toc-link-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}
.tf-section-toc-link-sub {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.4;
}
@media (max-width: 600px) {
    .tf-section-toc-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   *** END NEW COMPONENTS ***
============================================================ */

/* =============================================================
   SCROLL TO TOP — global floating button, appears after scrolling deep.
   Used in any section with substantial vertical content.
   ============================================================= */
#tf-scroll-top-btn {
    position: fixed;
    bottom: 94px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(20, 30, 50, 0.88);
    border: 1px solid var(--gold-border);
    color: var(--gold-light);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.18s ease, background 0.18s ease;
    z-index: 1050;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
#tf-scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
}
#tf-scroll-top-btn:hover,
#tf-scroll-top-btn:focus-visible {
    transform: translateY(-2px);
    background: rgba(30, 45, 70, 0.94);
    outline: none;
}
#tf-scroll-top-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--gold-light), 0 4px 14px rgba(0,0,0,0.35);
}
#tf-scroll-top-btn:active {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    #tf-scroll-top-btn { transition: opacity 0.15s ease; }
    #tf-scroll-top-btn:hover,
    #tf-scroll-top-btn:focus-visible { transform: none; }
}

/* ============================================================
   BIBLE READER (BSB) — Bible tab (YouVersion-style)
   Reading view + floating "Book Chapter" pill + slide-up book
   picker with inline chapter grids. Theme-aware via app tokens.
   All classes namespaced .bib-* and scoped under #tab-screen-bible.
   ============================================================ */
#tab-screen-bible { --bib-read: 1.18rem; }
#tab-screen-bible .bib-reading { padding-bottom: 96px; }

/* reading top bar (text size) */
#tab-screen-bible .bib-rd-top { display: flex; align-items: center; margin-bottom: 4px; }
#tab-screen-bible .bib-spacer { flex: 1; }
#tab-screen-bible .bib-size { display: flex; gap: 4px; }
#tab-screen-bible .bib-size button { width: 34px; height: 34px; border-radius: 8px; cursor: pointer; background: none; border: 1px solid var(--gold-border); color: var(--text-muted); font-family: 'Playfair Display', Georgia, serif; line-height: 1; transition: border-color 0.16s ease, color 0.16s ease; }
#tab-screen-bible .bib-size button:first-child { font-size: 0.8rem; }
#tab-screen-bible .bib-size button:last-child { font-size: 1.05rem; }
#tab-screen-bible .bib-size button:hover { border-color: var(--gold); color: var(--gold-light); }
#tab-screen-bible .bib-audio-btn { width: 34px; height: 34px; border-radius: 8px; cursor: pointer; background: none; border: 1px solid var(--gold-border); color: var(--text-muted); font-size: 0.8rem; line-height: 1; margin-right: 6px; transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease; }
#tab-screen-bible .bib-audio-btn:hover { border-color: var(--gold); color: var(--gold-light); }
#tab-screen-bible .bib-audio-btn.active { border-color: var(--gold); color: var(--gold-light); background: var(--bg-mid); }
#tab-screen-bible .bib-audio { margin: 2px 0 16px; padding: 12px; background: var(--bg-mid); border: 1px solid var(--gold-border); border-radius: 12px; }
#tab-screen-bible .bib-audio-narrators { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
#tab-screen-bible .bib-narr { cursor: pointer; font-family: 'Inter', system-ui, sans-serif; font-size: 0.82rem; color: var(--text-muted); background: none; border: 1px solid var(--gold-border); border-radius: 999px; padding: 6px 13px; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; }
#tab-screen-bible .bib-narr:hover { border-color: var(--gold); color: var(--gold-light); }
#tab-screen-bible .bib-narr.active { background: var(--gold); border-color: var(--gold); color: #1a1810; }
#tab-screen-bible .bib-audio-el { width: 100%; display: block; }
#tab-screen-bible .bib-audio-note { margin-top: 8px; font-family: 'Inter', system-ui, sans-serif; font-size: 0.72rem; color: var(--text-muted); text-align: center; }

/* reading typography */
#tab-screen-bible .bib-bookname { text-align: center; font-family: 'Playfair Display', Georgia, serif; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
#tab-screen-bible .bib-chapnum { text-align: center; font-family: 'Playfair Display', Georgia, serif; font-size: 4.6rem; font-weight: 400; color: var(--gold); line-height: 1.05; margin-bottom: 22px; }
#tab-screen-bible .bib-heading { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.25rem; color: var(--gold-light); margin: 28px 0 10px; line-height: 1.4; }
#tab-screen-bible .bib-verse { font-family: 'Source Serif 4', 'Spectral', 'Lora', Georgia, serif; font-size: var(--bib-read); line-height: 1.85; color: var(--text); margin-bottom: 4px; }
#tab-screen-bible .bib-vnum { font-family: 'Playfair Display', Georgia, serif; font-size: 0.62em; font-weight: 400; color: var(--gold); vertical-align: super; line-height: 0; margin-right: 0.32em; }
#tab-screen-bible sup.bib-note { font-size: 0.6em; color: var(--gold); vertical-align: super; margin-left: 0.08em; }
#tab-screen-bible .bib-poemline { display: block; padding-left: 1.5em; text-indent: -0.4em; }
#tab-screen-bible .bib-poemline.lvl2 { padding-left: 2.8em; }
#tab-screen-bible .bib-woc { color: var(--red-letter); }
#tab-screen-bible .bib-hebrew-subtitle { font-family: 'Source Serif 4', 'Spectral', 'Lora', Georgia, serif; font-style: italic; color: var(--text-muted); font-size: 0.95rem; margin: 2px 0 12px; }
#tab-screen-bible .bib-inline-heading { display: block; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.1rem; color: var(--gold-light); margin: 18px 0 8px; }
#tab-screen-bible .bib-footnotes { margin-top: 38px; padding-top: 16px; border-top: 1px solid var(--gold-border); font-family: 'Source Serif 4', 'Spectral', 'Lora', Georgia, serif; font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
#tab-screen-bible .bib-footnotes h4 { font-family: 'Playfair Display', Georgia, serif; font-size: 0.95rem; color: var(--gold-light); margin-bottom: 10px; font-weight: 400; }
#tab-screen-bible .bib-footnotes p { margin-bottom: 6px; }
#tab-screen-bible .bib-fmark { color: var(--gold); font-style: italic; margin-right: 6px; }
#tab-screen-bible .bib-attribution { text-align: center; font-size: 0.78rem; color: var(--text-light); margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--gold-muted); }
#tab-screen-bible .bib-attribution a { color: var(--text-muted); }

/* floating pill (above the bottom tab bar) */
#tab-screen-bible .bib-pill {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 28px);
  bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 1001;
  display: flex; align-items: center; gap: 2px; padding: 5px;
  background: var(--bg-mid); border: 1px solid var(--gold-border); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
#tab-screen-bible .bib-pill-label {
  cursor: pointer; background: none; border: none; color: var(--text);
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.02rem; padding: 8px 22px; white-space: nowrap;
}
#tab-screen-bible .bib-pill-arrow {
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer; background: none; border: none;
  color: var(--gold-light); display: flex; align-items: center; justify-content: center; transition: background 0.16s ease;
}
#tab-screen-bible .bib-pill-arrow:hover:not(:disabled) { background: var(--gold-muted); }
#tab-screen-bible .bib-pill-arrow:disabled { opacity: 0.3; cursor: default; }

/* picker backdrop + slide-up sheet */
#tab-screen-bible .bib-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease; z-index: 2000;
}
#tab-screen-bible .bib-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2001;
  max-height: 88vh; display: flex; flex-direction: column;
  background: var(--bg); border-top-left-radius: 20px; border-top-right-radius: 20px;
  border-top: 1px solid var(--gold-border); box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  padding: 8px 18px calc(12px + env(safe-area-inset-bottom));
}
#tab-screen-bible.bib-picker-open .bib-backdrop { opacity: 1; visibility: visible; }
#tab-screen-bible.bib-picker-open .bib-sheet { transform: translateY(0); }
#tab-screen-bible .bib-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--gold-border); margin: 6px auto 10px; }
#tab-screen-bible .bib-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#tab-screen-bible .bib-sheet-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; color: var(--gold-light); }
#tab-screen-bible .bib-sheet-close { width: 36px; height: 36px; border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 1.2rem; }
#tab-screen-bible .bib-sheet-close:hover { color: var(--gold-light); }

/* OT/NT toggle */
#tab-screen-bible .bib-seg { display: flex; gap: 8px; margin: 0 0 12px; }
#tab-screen-bible .bib-seg button { flex: 1; cursor: pointer; font-family: 'Source Serif 4', 'Spectral', 'Lora', Georgia, serif; font-size: 0.95rem; color: var(--text-muted); background: var(--bg-mid); border: 1px solid var(--gold-border); border-radius: 999px; padding: 10px 12px; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; }
#tab-screen-bible .bib-seg button.active { background: var(--gold); color: #1a1810; border-color: var(--gold); }

/* search */
#tab-screen-bible .bib-search-wrap { position: relative; margin: 0 0 6px; }
#tab-screen-bible .bib-search-wrap i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.95rem; }
#tab-screen-bible .bib-search { width: 100%; background: var(--bg-mid); color: var(--text); border: 1px solid var(--gold-border); border-radius: 12px; padding: 12px 14px 12px 40px; font-family: 'Source Serif 4', 'Spectral', 'Lora', Georgia, serif; font-size: 1rem; outline: none; transition: border-color 0.18s ease; }
#tab-screen-bible .bib-search:focus { border-color: var(--gold); }
#tab-screen-bible .bib-search::placeholder { color: var(--text-light); }

/* book list (scrolls within sheet) */
#tab-screen-bible .bib-book-list { overflow-y: auto; flex: 1; margin-top: 4px; padding-bottom: 16px; }
#tab-screen-bible .bib-book-row { display: block; width: 100%; text-align: left; cursor: pointer; background: none; border: none; color: var(--text); font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; font-weight: 400; padding: 13px 8px; border-bottom: 1px solid var(--gold-muted); transition: color 0.14s ease, background 0.14s ease; }
#tab-screen-bible .bib-book-row:hover { color: var(--gold-light); }
#tab-screen-bible .bib-book-row.active { color: var(--gold-light); background: var(--gold-muted); border-radius: 8px; }
#tab-screen-bible .bib-empty { padding: 24px 8px; color: var(--text-muted); }

/* inline chapter grid */
#tab-screen-bible .bib-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; padding: 12px 2px 16px; }
#tab-screen-bible .bib-ch-cell { aspect-ratio: 1; cursor: pointer; background: var(--bg-mid); border: 1px solid var(--gold-border); border-radius: 10px; color: var(--gold-light); font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease; }
#tab-screen-bible .bib-ch-cell:hover { border-color: var(--gold); }
#tab-screen-bible .bib-ch-cell.active { background: var(--gold); color: #1a1810; border-color: var(--gold); }

/* states */
#tab-screen-bible .bib-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
#tab-screen-bible .bib-spin { width: 30px; height: 30px; margin: 0 auto 16px; border: 3px solid var(--gold-border); border-top-color: var(--gold); border-radius: 50%; animation: bibspin 0.8s linear infinite; }
@keyframes bibspin { to { transform: rotate(360deg); } }
#tab-screen-bible .bib-retry { margin-top: 16px; background: none; border: 1px solid var(--gold-border); border-radius: 999px; color: var(--gold-light); font-family: 'Source Serif 4', 'Spectral', 'Lora', Georgia, serif; font-size: 0.95rem; padding: 9px 22px; cursor: pointer; }
#tab-screen-bible .bib-retry:hover { border-color: var(--gold); }

/* Bible reader: top-left trail (matches the app breadcrumb style) */
#tab-screen-bible .bib-trail { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: 'Inter', system-ui, sans-serif; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); padding: 4px 2px; max-width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#tab-screen-bible .bib-trail-sep { color: var(--gold); }
#tab-screen-bible .bib-trail-cur { color: var(--gold-light); }
#tab-screen-bible .bib-trail:hover .bib-trail-cur { color: var(--gold); }

/* ════════════════════════════════════════════════════════════════
   VOTD TEXT TRUNCATION + READ-MORE MODAL
   --------------------------------------
   Caps the home-card verse text at 9 lines; if it overflows, the
   text fades to transparent and a "Read more" button appears.
   The button opens a full-screen modal showing the complete verse,
   reusing the existing .fs-modal-scrim infrastructure so the back
   button dismisses it via TF_closeTopModal().

   Note: .fs-modal-scrim itself is defined in first-steps.html's
   inline <style>, but that file is lazy-loaded — we redefine the
   base scrim rules here so the modal works even if first-steps
   hasn't been opened yet.
   ════════════════════════════════════════════════════════════════ */

/* Truncated text on the home card */
.votd-card .votd-text.votd-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

/* "Read more" button under the truncated text */
.votd-more-btn {
    position: relative;
    background: none;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent);
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    margin: -0.5em 0 1em 0;
    z-index: 2;
    transition: background 0.15s, border-color 0.15s;
}
.votd-more-btn:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: var(--accent);
}

/* CRITICAL: The .fs-modal-scrim class is also defined in first-steps.html's
   inline <style>, but that file is lazy-loaded on tab navigation. The VOTD
   modal lives on the Home tab, so we need these rules in the global style.css
   too — otherwise the modal markup renders inline below the home card with
   no styling (which is exactly the glitch we're fixing). */
.fs-modal-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 20px;
}
.fs-modal-scrim.open { display: flex; }

/* VOTD modal card — full verse view */
.votd-modal-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-elevated, #1e1e1e);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: 1.25em;
    padding: 2em 1.5em 1.5em 1.5em;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.5),
        0 2px 8px rgba(0,0,0,0.3);
}
.votd-modal-card .votd-text {
    max-height: none;
    -webkit-mask-image: none;
            mask-image: none;
}
.votd-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: rgba(0,0,0,0.3);
    color: var(--accent);
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.15s, border-color 0.15s;
}
.votd-modal-close:hover {
    background: color-mix(in srgb, var(--accent) 12%, rgba(0,0,0,0.3));
    border-color: var(--accent);
}

/* Light-mode (Grace theme) adjustments */
body[data-theme="grace"] .votd-modal-card {
    background: #ffffff;
}
body[data-theme="grace"] .fs-modal-scrim {
    background: rgba(40,30,20,0.55);
}
/* ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════ */
/* NEW CALLOUT TREATMENTS — "tape-tab" collapsibles (tf-tab)          */
/* Faithful port of collapsablecallouts-v2. Full static styling at    */
/* rest; ALL motion gated behind [open] (open-only animation).        */
/* ════════════════════════════════════════════════════════════════ */

/* Neutralize OLD card styling when an element also has tf-tab, so the */
/* legacy border/background/chevron don't stack under the treatment.   */
.tf-tab.argument-card, .tf-tab.defense-card, .tf-tab.history-card,
.tf-tab.sources-section, .tf-tab.field-note, .tf-tab.tf-verse-stack, .tf-tab.verse-accordion{
  border:0 !important; background:transparent !important;
  border-radius:0 !important; overflow:visible !important; box-shadow:none !important;
}
.tf-tab > summary::after{content:none !important;}            /* kill old right chevron */
.tf-tab.tf-verse-stack > summary .tf-vs-chev,
.tf-tab.tf-verse-stack > summary .tf-vs-icon{display:none !important;}
.tf-tab.verse-accordion > summary::before{content:none !important;}
.tf-tab.verse-accordion > summary{display:flex !important; padding:8px 16px 8px 14px !important; gap:12px !important;}

/* Keyframes */
@keyframes tfShimmer{0%{background-position:200% center;}100%{background-position:-200% center;}}
@keyframes tfBreatheGlow{0%,100%{opacity:0.3;transform:scale(0.9) translateY(-50%);}50%{opacity:1;transform:scale(1.35) translateY(-50%);}}
@keyframes tfDotBreath{0%,100%{opacity:0.5;}50%{opacity:1;}}
@keyframes tfDotDrift{0%{background-position:0 0;}100%{background-position:12px 12px;}}
@keyframes tfQuoteBreath{0%,100%{opacity:0.5;transform:scale(0.92);}50%{opacity:1;transform:scale(1.15);}}
@keyframes tfEdgePulse{0%,100%{opacity:0.35;transform:scaleX(0.6);transform-origin:left;}50%{opacity:0.95;transform:scaleX(1);transform-origin:left;}}
@keyframes tfTabFade{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

/* Core component (= .c-tab) */
.tf-tab{ margin:22px 0; border-left:2px solid var(--tf-c-border,#8c98ab); position:relative; }
.tf-tab > summary{
  list-style:none; cursor:pointer; display:flex; width:100%; align-items:center; gap:12px;
  padding:8px 16px 8px 14px; margin-left:-2px; border-radius:0 6px 6px 0;
  font-family:'Inter',sans-serif; font-size:0.72rem; font-weight:800;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--tf-c-text,#d0d8e5);
  user-select:none; position:relative; overflow:hidden;
  transition:transform 0.2s cubic-bezier(0.2,0.8,0.2,1); box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
.tf-tab > summary > *{ position:relative; z-index:2; }
.tf-tab > summary::-webkit-details-marker{ display:none; }
.tf-tab > summary:active{ transform:scale(0.98); }
.tf-tab > summary .tf-icon{ font-size:0.85rem; filter:drop-shadow(0 0 6px rgba(255,255,255,0.2)); }
.tf-tab > summary .tf-label{ flex:1 1 auto; text-align:left; }
.tf-tab > summary .tf-sep{ color:var(--tf-c-border); opacity:0.5; font-weight:300; margin:0 -4px; }
.tf-tab > summary .tf-chev{ margin-left:auto; transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1); font-size:0.8rem; opacity:0.8; }
.tf-tab[open] > summary .tf-chev{ transform:rotate(180deg); opacity:1; }
.tf-tab .tf-body{
  padding:14px 16px 4px 16px; font-size:0.95rem; color:var(--text); line-height:1.75;
  animation:tfTabFade 0.3s cubic-bezier(0.2,0.8,0.2,1); position:relative; z-index:1;
}
.tf-tab .tf-body p:first-child{ margin-top:0; }

/* ── #3 INFO (holographic shimmer) ── */
.tf-info{ --tf-c-border:#7fa0d0; --tf-c-text:#a8c0e0; }
.tf-info > summary{
  background:linear-gradient(90deg,rgba(127,160,208,0.08) 0%,rgba(127,160,208,0.22) 50%,rgba(127,160,208,0.08) 100%);
  background-size:200% auto; border-top:1px solid rgba(127,160,208,0.3); border-right:1px solid rgba(127,160,208,0.1);
}
.tf-info[open] > summary{ animation:tfShimmer 3s linear infinite; }

/* ── #5 SOURCES (twinkling slate matrix + cross-hatch on open) ── */
.tf-context{ --tf-c-border:#8c98ab; --tf-c-text:#d0d8e5; }
.tf-context > summary{ background-color:rgba(140,152,171,0.08); }
.tf-context > summary::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(140,152,171,0.42) 1px,transparent 1px);
  background-size:6px 6px; z-index:1;
}
.tf-context[open] > summary::before{ animation:tfDotDrift 2.5s linear infinite, tfDotBreath 3s ease-in-out infinite; }
.tf-context[open]{
  background-image:radial-gradient(rgba(140,152,171,0.3) 1px,transparent 1px);
  background-size:10px 10px; background-color:rgba(140,152,171,0.04);
}
.tf-context[open] .tf-body{
  margin:10px; padding:14px 16px; background:rgba(15,22,35,0.88);
  border:1px solid rgba(140,152,171,0.2); border-radius:8px;
}

/* ── #6 REFLECTION (radial rose breath) ── */
.tf-reflection{ --tf-c-border:#c98a98; --tf-c-text:#e0a8b3; }
.tf-reflection > summary{ background:#261a1e; }
.tf-reflection > summary::before{
  content:''; position:absolute; top:50%; left:0; transform:translateY(-50%);
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(201,138,152,0.30) 0%,transparent 65%); z-index:1; pointer-events:none;
}
.tf-reflection[open] > summary::before{ animation:tfBreatheGlow 4s ease-in-out infinite alternate; }

/* ── #8 STEELMAN (metallic slate sheen + pulsing shield edge) ── */
.tf-steelman{ --tf-c-border:#85909e; --tf-c-text:#d0d8e5; }
.tf-steelman > summary{ background:#182232; box-shadow:inset 6px 0 15px rgba(133,144,158,0.28); }
.tf-steelman > summary::before{
  content:''; position:absolute; top:0; bottom:0; left:0; width:60px;
  background:linear-gradient(90deg, var(--tf-c-border) 0%, transparent 100%);
  opacity:0.5; z-index:1; pointer-events:none;
}
.tf-steelman[open] > summary::before{ animation:tfEdgePulse 2.4s ease-in-out infinite; }

/* ── #9 DEFENSE (pulsing shield forcefield) ── */
.tf-defense{ --tf-c-border:#6c90d2; --tf-c-text:#a8bce4; }
.tf-defense > summary{ background:#182232; box-shadow:inset 6px 0 15px rgba(108,144,210,0.30); }
.tf-defense > summary::before{
  content:''; position:absolute; top:0; bottom:0; left:0; width:60px;
  background:linear-gradient(90deg, var(--tf-c-border) 0%, transparent 100%);
  opacity:0.5; z-index:1; pointer-events:none;
}
.tf-defense[open] > summary::before{ animation:tfEdgePulse 2.4s ease-in-out infinite; }

/* ── #10 SCRIPTURE (faded breathing quote + highlight reveal) ── */
.tf-scripture{ --tf-c-border:#58b287; --tf-c-text:#a0cfb0; }
.tf-scripture > summary{
  background:rgba(88,178,135,0.32);
  border-top:1px solid rgba(88,178,135,0.42); border-bottom:1px solid rgba(88,178,135,0.42);
  padding-left:36px;
}
.tf-scripture > summary .tf-hl{
  display:inline;
  background-image:linear-gradient(rgba(88,178,135,0.35),rgba(88,178,135,0.35));
  background-size:0% 100%; background-repeat:no-repeat; background-position:left center;
  transition:background-size 0.5s ease; padding:0 3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.tf-scripture[open] > summary .tf-hl{ background-size:100% 100%; }
.tf-scripture > summary::before{
  content:'\201C'; position:absolute; left:12px; top:50%; margin-top:-1.05rem;
  font-family:'Playfair Display',serif; font-weight:700; font-size:2rem; line-height:1;
  color:#a0cfb0; z-index:4; pointer-events:none;
}
.tf-scripture[open] > summary::before{ animation:tfQuoteBreath 4s ease-in-out infinite; }
.tf-scripture .tf-body{
  border-left:2px solid rgba(88,178,135,0.48);
  padding:18px 16px 14px 38px; position:relative;
}
.tf-scripture .tf-body::before{
  content:'\201C'; position:absolute; left:6px; top:0;
  font-family:'Playfair Display',serif; font-weight:700; font-size:3rem; line-height:1;
  color:rgba(88,178,135,0.5); pointer-events:none;
}

/* ════════════════════════════════════════════════════════════════ */
/* LIGHT-MODE (Grace) adaptations of the tf-tab treatments.           */
/* Medium saturated bars + white labels (distinct on parchment);      */
/* animations strengthened so they read on a light background.        */
/* ════════════════════════════════════════════════════════════════ */
body[data-theme="grace"] .tf-tab > summary{
  color:#ffffff;
  box-shadow:0 2px 6px rgba(60,50,30,0.18);
}
body[data-theme="grace"] .tf-tab .tf-body{ color:var(--text); }
body[data-theme="grace"] .tf-tab > summary .tf-icon{ filter:drop-shadow(0 0 4px rgba(0,0,0,0.30)); }

/* #3 INFO — blue bar; stronger shimmer band */
body[data-theme="grace"] .tf-info{ --tf-c-border:#26466a; }
body[data-theme="grace"] .tf-info > summary{
  background:linear-gradient(90deg,#3a6ea5 0%,#6ea0d6 50%,#3a6ea5 100%);
  background-size:200% auto; border-top:0; border-right:0;
}

/* #5 SOURCES — slate bar; visible white dot matrix */
body[data-theme="grace"] .tf-context{ --tf-c-border:#3a4350; }
body[data-theme="grace"] .tf-context > summary{ background-color:#5b6675; }
body[data-theme="grace"] .tf-context > summary::before{
  background-image:radial-gradient(rgba(255,255,255,0.55) 1px,transparent 1px);
  background-size:6px 6px;
}
body[data-theme="grace"] .tf-context[open]{
  background-image:radial-gradient(rgba(100,111,127,0.45) 1px,transparent 1px);
  background-size:10px 10px; background-color:rgba(100,111,127,0.10);
}
body[data-theme="grace"] .tf-context[open] .tf-body{
  background:#ffffff; border:1px solid rgba(100,111,127,0.30);
}

/* #6 REFLECTION — rose bar; visible breathing glow */
body[data-theme="grace"] .tf-reflection{ --tf-c-border:#7a3145; }
body[data-theme="grace"] .tf-reflection > summary{ background:#a25068; }
body[data-theme="grace"] .tf-reflection > summary::before{
  background:radial-gradient(circle,rgba(255,255,255,0.65) 0%,transparent 65%);
}

/* #8 STEELMAN — slate bar; pulse glows light for contrast on the bar */
body[data-theme="grace"] .tf-steelman{ --tf-c-border:#d4dbe4; }
body[data-theme="grace"] .tf-steelman > summary{
  background:#505c6d; box-shadow:inset 6px 0 15px rgba(0,0,0,0.22),0 2px 6px rgba(60,50,30,0.18);
}

/* #9 DEFENSE — blue bar; pulse glows light for contrast on the bar */
body[data-theme="grace"] .tf-defense{ --tf-c-border:#c2d8f2; }
body[data-theme="grace"] .tf-defense > summary{
  background:#30608e; box-shadow:inset 6px 0 15px rgba(0,0,0,0.22),0 2px 6px rgba(60,50,30,0.18);
}

/* #10 SCRIPTURE — green bar; white highlight reveal */
body[data-theme="grace"] .tf-scripture{ --tf-c-border:#1f6b40; }
body[data-theme="grace"] .tf-scripture > summary{
  background:#2c8351; border-top:0; border-bottom:0;
}
body[data-theme="grace"] .tf-scripture > summary .tf-hl{
  background-image:linear-gradient(rgba(255,255,255,0.40),rgba(255,255,255,0.40));
}
body[data-theme="grace"] .tf-scripture > summary::before{ color:rgba(255,255,255,0.92); }
body[data-theme="grace"] .tf-scripture .tf-body{
  border-left:2px solid rgba(47,138,87,0.55);
}
body[data-theme="grace"] .tf-scripture .tf-body::before{ color:rgba(47,138,87,0.55); }

/* Light-mode animation boosts: make the open-state motion clearly visible */
body[data-theme="grace"] .tf-info[open] > summary{ animation:tfShimmer 3s ease-in-out infinite; }

/* Light-mode SOURCES body text — original colors are tuned for dark bg and  */
/* are unreadable on the white open-body; override to dark, readable colors. */
body[data-theme="grace"] .tf-context .sources-section-content{ color:#3a4350; }
body[data-theme="grace"] .tf-context .sources-intro{ color:#5a6472; }
body[data-theme="grace"] .tf-context .sources-tier{ color:#2c333d; }
body[data-theme="grace"] .tf-context ul.sources-list li{ color:#3a4350; border-bottom-color:rgba(60,67,80,0.14); }
body[data-theme="grace"] .tf-context ul.sources-list li::before{ color:#5a6472; }
body[data-theme="grace"] .tf-context ul.sources-list li strong{ color:#1f2630; }
body[data-theme="grace"] .tf-context ul.sources-list li em{ color:#5a6472; }
body[data-theme="grace"] .tf-context ul.sources-list li a{ color:#2c5a8a; border-bottom-color:rgba(44,90,138,0.4); }
body[data-theme="grace"] .tf-context ul.sources-list li a:hover{ color:#1c466e; }

/* ════════════════════════════════════════════════════════════════ */
/* "HEART OF THE GOSPEL" EDITORIAL CARD (theological-foundation)       */
/* Cream manuscript scroll w/ Ken Burns zoom, floating Solas, verse.   */
/* Self-contained (works in both themes). Theme 9: Oyster & Charcoal.  */
/* ════════════════════════════════════════════════════════════════ */
.tf-editorial-card{
  --scroll-base:#f6f6f4; --scroll-burn:#dcdcd5; --border-color:#2c2d30; --text-color:#3b3d42;
  --title-heart:#c85a6a; --title-gospel:#b8860b;
  position:relative; background:var(--scroll-base);
  border-top:14px solid var(--border-color); border-bottom:14px solid var(--border-color);
  border-radius:0; box-shadow:0 15px 35px rgba(0,0,0,0.35); overflow:hidden; z-index:1;
  padding:55px 25px 45px; text-align:center; margin:26px 0 8px;
}
.tf-cinematic-bg{
  position:absolute; inset:-20%; z-index:-1; background-color:var(--scroll-base);
  background-image:
    radial-gradient(circle at center, transparent 30%, var(--scroll-burn) 85%, var(--border-color) 130%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
  background-blend-mode:normal, multiply;
  animation:kenBurnsZoom 35s ease-in-out infinite alternate; will-change:transform;
}
@keyframes kenBurnsZoom{0%{transform:scale(1) translateZ(0);}100%{transform:scale(1.15) translateZ(0);}}
@keyframes floatSola{0%,100%{transform:translate3d(0,0,0);opacity:0.75;}50%{transform:translate3d(0,-5px,0);opacity:1;}}
.tf-editorial-card h3.tf-title{
  font-family:'Playfair Display',serif; color:var(--border-color); margin:0 0 20px;
  font-size:1.65rem; letter-spacing:0.05em; line-height:1.3; text-transform:uppercase;
  text-shadow:1px 1px 0px rgba(255,255,255,0.4);
}
.tf-editorial-card h3.tf-title .t-heart{ color:var(--title-heart); font-style:italic; text-transform:capitalize; letter-spacing:0.02em; }
.tf-editorial-card h3.tf-title .t-gospel{ color:var(--title-gospel); }
.tf-solas-grid{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px;
  margin-bottom:35px; padding-bottom:25px; border-bottom:1px solid rgba(0,0,0,0.08);
}
.tf-sola-item{
  display:flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:0.65rem;
  font-weight:700; text-transform:uppercase; letter-spacing:0.15em; color:var(--border-color);
  animation:floatSola 8s ease-in-out infinite; will-change:transform,opacity;
}
.tf-sola-item:nth-child(1){animation-delay:0s;}
.tf-sola-item:nth-child(2){animation-delay:1.6s;}
.tf-sola-item:nth-child(3){animation-delay:3.2s;}
.tf-sola-item:nth-child(4){animation-delay:4.8s;}
.tf-sola-item:nth-child(5){animation-delay:6.4s;}
.tf-sola-item i{ font-size:0.9rem; }
.tf-editorial-card .tf-body-text{
  margin:0 auto; font-size:0.98rem; line-height:1.9; color:var(--text-color);
  font-weight:500; text-align:left; max-width:95%;
}
.tf-editorial-card .tf-body-text::first-letter{
  float:left; font-family:'Playfair Display',serif; font-size:4.8rem; line-height:0.8;
  padding-right:12px; padding-top:6px; color:var(--border-color); text-shadow:1px 1px 0px rgba(255,255,255,0.6);
}
/* Scripture verse INSIDE the editorial card (scoped so app .scripture is untouched) */
.tf-editorial-card .scripture{
  background:linear-gradient(135deg, rgba(40,110,30,0.22) 0%, rgba(30,90,25,0.14) 100%);
  border-left:4px solid #4ea33a; border-radius:0 10px 10px 0; padding:18px 22px 16px;
  margin:24px auto 4px; font-family:'Source Serif 4',serif; font-style:italic;
  color:var(--text-color); font-size:0.95rem; line-height:1.8; position:relative; max-width:95%; text-align:left;
}
.tf-editorial-card .scripture::before{
  content:'\201C'; position:absolute; top:-6px; left:14px; font-family:'Playfair Display',serif;
  font-size:3.5rem; color:#7abf55; opacity:0.35; line-height:1;
}
.tf-editorial-card .scripture .verse-bsb{ display:block; }

/* Dim the editorial card in DARK mode (foundation) so the bright cream
   scroll doesn't glare against the dark page. Text ink stays readable. */
body[data-theme="foundation"] .tf-editorial-card{
  --scroll-base:#e0e0db;
  --scroll-burn:#cbcbc3;
  box-shadow:0 12px 28px rgba(0,0,0,0.5);
}

/* ════════════════════════════════════════════════════════════════ */
/* "GO DEEPER" CROSSLINK TILES (gd6) — matches First Steps in Faith    */
/* webp topic-image background buttons linking to other sections.      */
/* ════════════════════════════════════════════════════════════════ */
.gd6{border-radius:14px}
.b7{border-top:2px solid var(--gold-border,rgba(184,150,90,.25));padding:16px 2px 4px}
.gd6 .hd{margin-bottom:10px}
.gd6 .hd-c{text-align:center}
.gd-kick{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#b8965a)}
.gd-para{font-size:.9rem;color:var(--text-muted,#c4b898);line-height:1.65;margin:0 0 14px;text-align:center}
.gd-para strong{color:var(--gold-light,#d4b87a);font-weight:600}
.gd-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gd-tiles.gd-tiles-1{grid-template-columns:1fr}
.gd-tiles.gd-tiles-1 .gdi{max-width:430px;margin-left:auto;margin-right:auto;width:100%}
.gd-tiles.gd-tiles-3 .gdi:nth-child(3){grid-column:1 / -1;max-width:calc(50% - 6px);justify-self:center}
@media(max-width:480px){.gd-tiles{grid-template-columns:1fr}.gd-tiles.gd-tiles-3 .gdi:nth-child(3){max-width:none;width:100%}}
.gdi{position:relative;display:block;padding:0;border:1px solid var(--gold-border,rgba(184,150,90,.25));border-radius:12px;overflow:hidden;background:var(--navy-deep,#0d1824);transition:transform .2s,border-color .2s,box-shadow .2s;line-height:0;font-size:0;cursor:pointer}
.gdi:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 12px 26px rgba(0,0,0,.4)}
.gdi:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.gdi-bg{display:block;width:100%;height:auto;opacity:.85;filter:saturate(.95)}
.gdi-arr{position:absolute;right:12px;bottom:10px;color:#fff;opacity:.85;text-shadow:0 1px 4px rgba(0,0,0,.6);transition:transform .2s,opacity .2s}
.gdi:hover .gdi-arr{transform:translateX(3px);opacity:1}

/* ════════════════════════════════════════════════════════════════ */
/* ORTHODOXY SECTION — "manuscript scroll" skin (TRIAL, LIGHT MODE)    */
/* Cream + fractal-noise paper on the main dropdowns (.argument-       */
/* section), FAQs (.faq-item) and the "Pray This for Them" box         */
/* (.prayer-example). NOT the callouts, and NOT the nested tf-tab      */
/* treatment bars (steel-man/defense/scripture keep their colored      */
/* bars + white labels). Applies in LIGHT (grace) mode only — dark     */
/* mode is left exactly as it was.                                     */
/* ════════════════════════════════════════════════════════════════ */
body[data-theme="grace"] #rel-orthodox{
  --tf-scroll-base:#f6f6f4;
  --tf-scroll-burn:#dcdcd5;
  --tf-scroll-ink:#3b3d42;
  --tf-scroll-ink-strong:#2c2d30;
}
/* paper texture on the dropdown / faq / prayer shells */
body[data-theme="grace"] #rel-orthodox .argument-section,
body[data-theme="grace"] #rel-orthodox .faq-item,
body[data-theme="grace"] #rel-orthodox .prayer-example{
  background-color:var(--tf-scroll-base) !important;
  background-image:
    radial-gradient(circle at 50% 0%, transparent 55%, var(--tf-scroll-burn) 140%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E") !important;
  background-blend-mode:normal, multiply !important;
  border-color:rgba(44,45,48,0.22) !important;
}
/* dark ink ONLY on the dropdown's own summary + its direct text —
   use child combinators so nested tf-tab bars are NOT touched. */
body[data-theme="grace"] #rel-orthodox .argument-section > summary{
  color:var(--tf-scroll-ink-strong) !important; font-weight:700;
}
body[data-theme="grace"] #rel-orthodox .argument-section > .argument-section-content > p,
body[data-theme="grace"] #rel-orthodox .argument-section > .argument-section-content > ul > li,
body[data-theme="grace"] #rel-orthodox .argument-section > .argument-section-content > ol > li{
  color:var(--tf-scroll-ink) !important;
}
/* FAQ text */
body[data-theme="grace"] #rel-orthodox .faq-q{ color:var(--tf-scroll-ink-strong) !important; font-weight:700; }
body[data-theme="grace"] #rel-orthodox .faq-a,
body[data-theme="grace"] #rel-orthodox .faq-a > p,
body[data-theme="grace"] #rel-orthodox .faq-a > ul > li,
body[data-theme="grace"] #rel-orthodox .faq-a > ol > li{ color:var(--tf-scroll-ink) !important; }
/* Prayer box text */
body[data-theme="grace"] #rel-orthodox .prayer-example,
body[data-theme="grace"] #rel-orthodox .prayer-example > p,
body[data-theme="grace"] #rel-orthodox .prayer-example > h4{ color:var(--tf-scroll-ink) !important; }

/* ════════════════════════════════════════════════════════════════ */
/* ORTHODOXY (LIGHT MODE) — richer gold accents to match dark mode     */
/* The grace theme's gold (--gold-light:#9c7000) reads as a dull olive.*/
/* Bring back a true gold on the large titles + Quick-summary accents  */
/* (large bold text + decorative bits can use the richer, lower-contrast*/
/* gold; small uppercase text keeps a readable darker gold).           */
/* ════════════════════════════════════════════════════════════════ */
/* Large section titles: "How Salvation Works...", "Common Objections" */
body[data-theme="grace"] #rel-orthodox h3{
  color:#b8860b !important;
}
/* keep the Heart-of-Gospel card title using its own ink, not gold */
body[data-theme="grace"] #rel-orthodox .tf-editorial-card h3.tf-title{
  color:var(--border-color) !important;
}
/* Quick summary: small uppercase title (readable gold) + decorative line */
body[data-theme="grace"] #rel-orthodox .tf-key-points-title{
  color:#8a6510 !important;
}
body[data-theme="grace"] #rel-orthodox .tf-key-points-title::before{
  background:#b8860b !important; opacity:0.7 !important;
}
/* Quick summary star bullets (decorative) → rich gold */
body[data-theme="grace"] #rel-orthodox .tf-key-points li::before{
  color:#b8860b !important;
}
/* Quick-summary card frame: a touch warmer gold border */
body[data-theme="grace"] #rel-orthodox .tf-key-points{
  border-color:rgba(184,134,11,0.32) !important;
}

/* ════════════════════════════════════════════════════════════════ */
/* ORTHODOX SUBSECTION HEADERS — centered ornament (#4)               */
/* Gold flourish line + Orthodox cross icon, centered, title below.    */
/* Replaces the plain tf-subsection-name; tagline kept beneath.        */
/* ════════════════════════════════════════════════════════════════ */
#rel-orthodox .h4x{ text-align:center; }
#rel-orthodox .h4x .orn{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:10px;
}
#rel-orthodox .h4x .orn::before,
#rel-orthodox .h4x .orn::after{
  content:""; height:1px; width:54px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
#rel-orthodox .h4x .orn::after{
  background:linear-gradient(90deg,var(--gold),transparent);
}
#rel-orthodox .h4x .religion-icon{ width:20px; height:30px; flex:none; display:block; }
#rel-orthodox .h4x .sh{
  font-family:'Playfair Display',serif; font-weight:700; color:var(--text);
  line-height:1.16; font-size:1.4rem; margin:0;
}

/* ════════════════════════════════════════════════════════════════ */
/* ORTHODOX pathway-card DROPDOWNS — "Muted Sage & Pine" (theme 12)    */
/* Sage-cream scroll skin for the icon dropdowns (Orthodox/Biblical    */
/* Gospel, the talking-guide cards, After-the-Conversation steps).     */
/* ════════════════════════════════════════════════════════════════ */
#rel-orthodox details.pathway-card{
  --sage-base:#f3f5ef; --sage-burn:#d1d6c5; --sage-pine:#243627; --sage-ink:#354a3a;
  background:var(--sage-base) !important;
  border:1px solid rgba(36,54,39,0.28) !important;
  border-radius:12px !important;
}
body[data-theme="foundation"] #rel-orthodox details.pathway-card{
  --sage-base:#dde0d6; --sage-burn:#cdd1c3;
  box-shadow:0 10px 24px rgba(0,0,0,0.45) !important;
}
/* subtle paper texture */
#rel-orthodox details.pathway-card{
  background-image:
    radial-gradient(circle at 50% 0%, transparent 60%, var(--sage-burn) 150%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='ns'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ns)' opacity='0.10'/%3E%3C/svg%3E") !important;
  background-blend-mode:normal, multiply !important;
}
/* title (pine ink) */
#rel-orthodox details.pathway-card > summary.pathway-card-header h4{
  color:var(--sage-pine) !important;
}
/* icon chip — sage-tinted */
#rel-orthodox details.pathway-card .pcard-icon{
  background:rgba(36,54,39,0.10) !important;
  border:1px solid rgba(36,54,39,0.28) !important;
  color:var(--sage-pine) !important;
}
#rel-orthodox details.pathway-card .pcard-icon i{ color:var(--sage-pine) !important; }
/* chevron */
#rel-orthodox details.pathway-card > summary.pathway-card-header::after{
  color:var(--sage-pine) !important; opacity:0.7 !important;
}
/* header bottom border when open */
#rel-orthodox details.pathway-card .pathway-card-header{
  border-bottom-color:rgba(36,54,39,0.18) !important;
}
/* body text + lists */
#rel-orthodox details.pathway-card p,
#rel-orthodox details.pathway-card li,
#rel-orthodox details.pathway-card ul{
  color:var(--sage-ink) !important;
}
#rel-orthodox details.pathway-card li::marker{ color:var(--sage-pine) !important; }
/* keep scripture verses inside these cards on their own styling (don't tint) */
#rel-orthodox details.pathway-card .scripture .verse-bsb{ color:inherit; }

/* Brief tab-opening line (replaces the old Quick summary box) — Orthodoxy */
#rel-orthodox .tf-tab-intro{
  font-family:'Source Serif 4','Spectral','Lora',serif;
  font-size:1.0rem; line-height:1.7; color:var(--text-muted);
  margin:2px 0 22px; max-width:62ch;
}
body[data-theme="grace"] #rel-orthodox .tf-tab-intro{ color:#4a4540; }

/* =============================================================
   SHARED READING EXPERIENCE (flip cards + reader overlay)
   Moved from first-steps.html so standalone sections (How to Pray,
   etc.) loaded on demand also receive these styles. One source of
   truth. Covers: .fr-* flip cards, .rc-* reader, .ba-section-header,
   .ba-band* warning bands, .fs-emph lead, .fs-faq in-reader FAQ.
   ============================================================= */
.fr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 4px}
@media(max-width:560px){.fr-grid{grid-template-columns:1fr}}
.fr-card{perspective:1300px;height:208px;cursor:pointer;outline:none}
.fr-card:focus-visible .fr-flip{box-shadow:0 0 0 2px var(--accent)}
.fr-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.45,0,.15,1)}
.fr-card.flipped .fr-flip{transform:rotateY(180deg)}
.fr-front,.fr-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden;border:1px solid var(--gold-border,rgba(184,150,90,.25))}
.fr-card.hazard .fr-front,.fr-card.hazard .fr-back{border-color:rgba(212,117,106,.4)}
.fr-card:not(.flipped) .fr-front{transition:transform .25s,box-shadow .25s,border-color .25s}
.fr-card:not(.flipped):hover .fr-flip{transform:translateY(-3px)}
.fr-card:not(.flipped):hover .fr-front{box-shadow:0 14px 30px rgba(0,0,0,.4);border-color:var(--accent)}
.fr-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.fr-ic{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:9px;background:rgba(13,24,36,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:.85rem}
.fr-scrim{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,transparent,rgba(8,14,20,.92))}
.fr-front-text{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.fr-title{font-family:'Playfair Display',serif;font-size:1.06rem;font-weight:600;color:#fff;line-height:1.22;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.fr-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fr-min{font-family:'Inter',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.fr-cue{font-family:'Inter',sans-serif;font-size:.64rem;font-weight:600;letter-spacing:.04em;color:rgba(232,220,200,.6)}
.fr-back{transform:rotateY(180deg);background:linear-gradient(140deg,var(--navy-mid,#1e3550),var(--navy-deep,#0d1824));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center}
.fr-back-ic{width:46px;height:46px;border-radius:12px;background:var(--gold-muted,rgba(184,150,90,.12));border:1px solid var(--gold-border,rgba(184,150,90,.25));display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.1rem}
.fr-back-title{font-family:'Playfair Display',serif;font-size:1.04rem;font-weight:600;color:var(--gold-light,#d4b87a);line-height:1.25}
.fr-card.hazard .fr-back-title{color:#d4756a}
.fr-back-go{font-family:'Inter',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.rc-overlay{position:fixed;inset:0;background:var(--bg-mid,#121f2d);display:none;z-index:10001;padding:0}
.rc-overlay.on{display:flex;align-items:center;justify-content:center}
.rc-sheet{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;background:var(--bg-mid,#121f2d);border:0;border-radius:0;overflow:hidden;transform:scale(.96);opacity:0;transition:transform .4s cubic-bezier(.3,1.25,.4,1),opacity .3s}
.rc-overlay.on .rc-sheet{transform:none;opacity:1}
.rc-bar{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 18px 14px;border-bottom:1px solid var(--gold-border,rgba(184,150,90,.25));background:var(--navy,#1a2d40)}
.rc-close{background:none;border:0;color:var(--gold-light,#d4b87a);font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;padding:0;flex:none}
.rc-crumb{flex:1;font-family:'Inter',sans-serif;font-size:.82rem;color:var(--text-muted,#c4b898);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-pos{font-family:'Inter',sans-serif;font-size:.72rem;color:var(--text-light,#7a6e58);flex:none}
.rc-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px 26px}
.rc-h{font-family:'Playfair Display',serif;color:var(--gold-light,#d4b87a);font-size:1.32rem;font-weight:600;margin:0 0 14px;line-height:1.25}
.rc-full{display:none}
.rc-full.on{display:block;animation:rcfade .3s ease}
.rc-full.hazard .rc-h{color:#d4756a}
@keyframes rcfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rc-full p{font-size:.96rem;line-height:1.82;color:var(--text,#e8dcc8)}
.rc-foot{display:flex;justify-content:space-between;gap:10px;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--gold-border,rgba(184,150,90,.25));background:var(--navy,#1a2d40)}
.rc-foot button{padding:9px 18px;border-radius:8px;border:1px solid var(--gold-border,rgba(184,150,90,.25));background:var(--navy-deep,#0d1824);color:var(--gold-light,#d4b87a);font-family:'Inter',sans-serif;font-weight:600;font-size:.82rem;cursor:pointer}
.rc-foot button:disabled{opacity:.35;cursor:default}
.rc-next-btn{background:var(--gold,#b8965a);color:#1a1408;border-color:var(--gold,#b8965a)}
.ba-section-header{--ba-a1:#3f7a4a;--ba-a2:#b8e6b0;--ba-muted:var(--text-muted,#c4b898);position:relative;overflow:hidden;padding:14px 4px 6px}
.ba-section-header .ba-ghost{position:absolute;top:-8px;left:-6px;z-index:0;margin:0;font-family:'Playfair Display',serif;font-weight:900;font-size:3.6rem;line-height:1;letter-spacing:-.01em;white-space:nowrap;color:var(--ba-a2);opacity:.08;pointer-events:none;-webkit-user-select:none;user-select:none}
.ba-section-header .ba-kicker{position:relative;z-index:1;display:block;margin:0 0 7px;font-family:'Inter',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ba-a2)}
.ba-section-header .ba-name{position:relative;z-index:1;margin:0;font-family:'Playfair Display',serif;font-weight:700;font-size:1.95rem;line-height:1.08;background:linear-gradient(90deg,var(--ba-a1),var(--ba-a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ba-section-header .ba-tagline{position:relative;z-index:1;margin:7px 0 0;font-family:'Source Serif 4',Georgia,serif;font-size:.9rem;line-height:1.55;color:var(--ba-muted)}
@media (min-width:480px){.ba-section-header .ba-ghost{font-size:4.3rem}.ba-section-header .ba-name{font-size:2.2rem}}
.fr-card.clarify .fr-front,.fr-card.clarify .fr-back{border-color:rgba(240,210,122,.45)}
.fr-card.clarify .fr-back-title{color:#f0d27a}
.rc-full.clarify .rc-h{color:#f0d27a}
.ba-band{margin:22px -2px;padding:11px 16px;font-family:'Inter',sans-serif;font-size:.84rem;color:var(--text,#e8dcc8);line-height:1.6;position:relative}
.ba-band-lbl{display:inline-block;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light,#d4b87a);font-size:.7rem;margin-right:12px;border-right:1px solid rgba(184,150,90,.32);padding-right:12px;font-family:'Inter',sans-serif;vertical-align:1px}
.ba-band-txt{font-family:'Inter',sans-serif;font-size:.84rem;color:var(--text,#e8dcc8);font-style:normal;line-height:1.6}
.ba-band-fade{border-top:2px solid var(--gold,#b8965a);border-bottom:2px solid var(--gold,#b8965a);background:linear-gradient(90deg,rgba(184,150,90,.24),rgba(184,150,90,.02) 75%)}
.ba-band-caution{border-top:2px solid #d49a4a;border-bottom:2px solid #d49a4a;background:repeating-linear-gradient(45deg,rgba(212,154,74,.20) 0 14px,rgba(212,154,74,.06) 14px 28px)}
.ba-band-caution .ba-band-lbl{color:#e6b264;border-right-color:rgba(212,154,74,.4)}
.ba-band-warning{border-top:2px solid #d4756a;border-bottom:2px solid #d4756a;background:repeating-linear-gradient(45deg,rgba(212,117,106,.18) 0 14px,rgba(212,117,106,.06) 14px 28px)}
.ba-band-warning .ba-band-lbl{color:#e89a8e;border-right-color:rgba(212,117,106,.4)}
.ba-band-caution .ba-band-warning .ba-band em{font-style:italic}
.fr-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rc-banner{display:block;width:100%;aspect-ratio:16/9;max-height:300px;object-fit:cover;object-position:center;border-radius:14px;margin:0 0 18px}
.rc-close-chev{font-size:1.5rem;line-height:1;padding:4px 8px;margin-left:-4px;border-radius:8px}
.rc-close-chev:hover,.rc-close-chev:focus-visible{background:rgba(255,255,255,.06)}
.fr-ic-svg{display:block}
@media (min-width: 1024px){
  .rc-full{max-width:760px; margin-left:auto; margin-right:auto}
  .rc-bar{max-width:760px; margin-left:auto; margin-right:auto; width:100%; box-sizing:border-box}
}
.rc-deeper{font-size:.9rem;line-height:1.65;color:var(--text-muted,#9fb0c0);border-top:1px solid var(--gold-border,rgba(184,150,90,.22));margin-top:18px;padding-top:14px}
.fs-faq summary{font-weight:600;color:var(--gold-light,#d4b87a)}
body[data-theme="grace"] .fs-faq summary{color:#8a6510}
.fs-faq .verse-accordion-content p{font-size:.95rem;line-height:1.72;color:var(--text,#e8dcc8)}
.fs-emph{display:block; font-family:'Source Serif 4',serif; font-style:italic; font-weight:600;
  font-size:1.18rem; color:var(--gold-light,#d4b87a); border-left:3px solid var(--gold,#b8965a);
  padding-left:13px; margin:16px 0 8px; line-height:1.4}
body[data-theme="grace"] .fs-emph{color:#8a6510; border-left-color:#b8860b}
body[data-theme="grace"] 
.rc-gd{margin-top:22px}


/* =============================================================
   IN-APP IMAGE LIGHTBOX (fullscreen chart viewer)
   Stays inside the app on Android & iOS standalone (no browser
   tab / no URL bar). Pan + native pinch-zoom on the image.
   ============================================================= */
.tf-imgview{position:fixed;inset:0;background:rgba(10,16,24,.97);display:none;z-index:10050}
.tf-imgview.on{display:flex;flex-direction:column}
.tf-imgview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;background:rgba(20,32,46,.92);border-bottom:1px solid rgba(184,150,90,.25);flex:none}
.tf-imgview-title{font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.04em;color:#d4b87a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-imgview-close{background:none;border:0;color:#d4b87a;font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;padding:6px 10px;flex:none;display:flex;align-items:center;gap:7px}
.tf-imgview-close i{font-size:.9rem}
.tf-imgview-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:flex-start;justify-content:center;padding:16px calc(16px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));touch-action:pan-x pan-y pinch-zoom}
.tf-imgview-scroll img{display:block;width:100%;max-width:760px;height:auto;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.tf-imgview-hint{flex:none;text-align:center;font-family:'Inter',sans-serif;font-size:.72rem;color:#7a6e58;padding:0 18px calc(12px + env(safe-area-inset-bottom))}