/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #faf8f4;
    --bg-sidebar: #f5f0e8;
    --bg-card: #ffffff;
    --text: #2d2d2d;
    --text-light: #6b6b6b;
    --text-sidebar: #6b5d4f;
    --text-sidebar-active: #3a2e22;
    --accent: #c8956c;
    --accent-light: #f0dcc8;
    --accent-dark: #8b5e3c;
    --tafsir: #2c6e49;
    --tafsir-bg: #f0f7f3;
    --ithrae: #1a5276;
    --ithrae-bg: #eef4f8;
    --juthoor: #7b2d8e;
    --juthoor-bg: #f6eef8;
    --quran-bg: #fefcf5;
    --quran-border: #d4a96a;
    --shadow: 0 2px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
    --radius: 12px;
    --sidebar-width: 320px;
    --font-body: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', 'Times New Roman', serif;
    --font-quran: 'Amiri Quran', 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
    /* Top-bar / chrome display font (book-title feel). Amiri is the same
       typeface family the ayat use, so the wordmark and the verses echo
       each other. For Latin (EN toggle, "The Method") we let the stack
       fall through to a clean book serif. */
    --font-display: 'Amiri', 'Amiri Quran', Georgia, 'Times New Roman', serif;
    --font-primary: 'Noto Naskh Arabic', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    /* Latin body face for English & French content. Spectral was chosen
       after a side-by-side type test against Georgia, EB Garamond, and
       Source Serif 4 — it reads warmest on long-form digital prose and
       sits comfortably alongside the Arabic Naskh tone. */
    --font-latin: 'Spectral', Georgia, 'Times New Roman', serif;
}

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* Latin-mode body switch: when the reader is in English or French mode,
   swap the body face from the Arabic-first --font-body stack to Spectral.
   The lang-ar/en/fr visibility rules already hide non-active language
   panes, so retargeting body font-family is enough — every visible piece
   of prose inherits Spectral. Arabic-locked elements (.verse-ar uses
   --font-quran, the wordmark uses --font-display) are unaffected because
   they set their own font-family.

   Also catches inline mixed-language content: any element carrying a
   lang-en/lang-fr class or lang="en"/"fr" attribute renders in Spectral
   even when the active body language is Arabic (e.g. the italic English
   tagline under the AR home title). Excludes Quranic verses where the
   element opts in via .verse-ar / --font-quran on its own. */
body.lang-en,
body.lang-fr,
html.lang-en body,
html.lang-fr body,
.lang-en,
.lang-fr,
[lang="en"],
[lang="fr"] {
    font-family: var(--font-latin);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 2;
    font-size: 18px;
    overflow-x: hidden;
}

/* ── Sidebar ── */
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-sidebar);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    box-shadow: -4px 0 24px rgba(0,0,0,0.06);
    border-left: 1px solid #e0d6c8;
}

.sidebar.collapsed {
    transform: translateX(var(--sidebar-width));
}

.sidebar-header {
    padding: 24px 20px 16px;
    border-bottom: 1px solid #ddd3c4;
}

.sidebar-header h2 {
    color: var(--accent-dark);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.sidebar-header p {
    color: var(--text-sidebar);
    font-size: 13px;
    opacity: 0.8;
}

.sidebar-search {
    padding: 12px 20px;
    border-bottom: 1px solid #ddd3c4;
}

.sidebar-search input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #d4c9b8;
    background: #ffffff;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.sidebar-search input::placeholder { color: #b0a594; }
.sidebar-search input:focus { border-color: var(--accent); }

.toc-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.toc-list::-webkit-scrollbar { width: 4px; }
.toc-list::-webkit-scrollbar-track { background: transparent; }
.toc-list::-webkit-scrollbar-thumb { background: #d4c9b8; border-radius: 4px; }

.toc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s;
    border-right: 3px solid transparent;
    text-decoration: none;
    color: var(--text-sidebar);
}

.toc-item:hover {
    background: rgba(200,149,108,0.1);
    color: var(--text-sidebar-active);
}

.toc-item.active {
    background: rgba(200,149,108,0.18);
    border-right-color: var(--accent);
    color: var(--text-sidebar-active);
}

.toc-num {
    min-width: 36px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(139,94,60,0.08);
    color: var(--accent-dark);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.toc-item.active .toc-num {
    background: var(--accent);
    color: #fff;
}

.toc-title {
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Toggle Button ── */
.sidebar-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 101;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--bg-sidebar);
    color: var(--accent-dark);
    border: 1px solid #d4c9b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: all 0.3s;
    font-size: 18px;
}

.sidebar-toggle:hover { transform: scale(1.08); }

.sidebar:not(.collapsed) ~ .sidebar-toggle {
    right: calc(var(--sidebar-width) + 20px);
}

/* ── Main Content ── */
.main {
    margin-right: var(--sidebar-width);
    transition: margin-right 0.35s cubic-bezier(.4,0,.2,1);
    min-height: 100vh;
}

.sidebar.collapsed ~ .main {
    margin-right: 0;
}

.content-wrapper {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 32px 80px;
}

/* ── Book Header ── */
.book-header {
    text-align: center;
    padding: 64px 20px 48px;
    margin-bottom: 40px;
    position: relative;
}

.book-header::after {
    content: '﷽';
    display: block;
    font-family: var(--font-quran);
    font-size: 36px;
    color: var(--accent);
    margin-top: 24px;
}

.book-header h1 {
    font-size: 42px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.4;
}

.book-header .subtitle {
    font-size: 18px;
    color: var(--text-light);
    font-style: italic;
}

.ornament {
    display: block;
    text-align: center;
    color: var(--accent);
    font-size: 24px;
    margin: 32px 0;
    opacity: 0.5;
    letter-spacing: 12px;
}

/* ── Chapter / Section ── */
.chapter {
    margin-bottom: 56px;
    animation: fadeUp 0.5s ease-out;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.ayah-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 22px;
    padding: 14px 0;
    max-width: 680px;
}

.ayah-header::before,
.ayah-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(200, 149, 108, 0.45) 50%,
        transparent 100%);
    max-width: 220px;
}

.ayah-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 20px;
    font-family: var(--font-quran);
    font-size: 17px;
    font-weight: 600;
    color: var(--accent-dark);
    letter-spacing: 0.5px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex-shrink: 0;
    min-width: auto;
    height: auto;
}

.ayah-badge::before {
    content: "آية";
    font-size: 14px;
    font-weight: 400;
    color: var(--accent);
    opacity: 0.85;
    letter-spacing: 1px;
}

/* Title is redundant with quran-verse box below, hidden by default */
.ayah-title {
    display: none;
}

/* ── Quran Verse Display ── */
.quran-verse {
    background: var(--quran-bg);
    border: 2px solid var(--quran-border);
    border-radius: var(--radius);
    padding: 28px 32px;
    margin-bottom: 28px;
    text-align: center;
    font-family: var(--font-quran);
    font-size: 24px;
    line-height: 2.2;
    color: var(--accent-dark);
    position: relative;
    box-shadow: var(--shadow);
}

.quran-verse::before,
.quran-verse::after {
    position: absolute;
    font-size: 60px;
    color: var(--quran-border);
    opacity: 0.15;
    font-family: serif;
}

.quran-inline {
    color: var(--accent-dark);
    font-family: var(--font-quran);
    font-weight: 700;
}

/* ── Tabs ── */
.tabs-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.tabs-bar {
    display: flex;
    border-bottom: 2px solid #f0ece6;
    background: #faf8f5;
    overflow-x: auto;
    /* Hide the native horizontal scrollbar on mobile — the row stays swipable
       by touch but the visible track + chevrons (which showed as a fat grey
       bar on Android) are gone. */
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* IE/old Edge */
}
.tabs-bar::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

.tab-btn {
    flex: 1;
    padding: 14px 16px;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    white-space: nowrap;
}

.tab-btn:hover { color: var(--text); background: rgba(0,0,0,0.02); }

.tab-btn.active {
    color: var(--accent-dark);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
}

.tab-btn[data-tab="commentary_ar"].active { color: var(--tafsir); }
.tab-btn[data-tab="commentary_ar"].active::after { background: var(--tafsir); }
.tab-btn[data-tab="ithrae"].active { color: var(--ithrae); }
.tab-btn[data-tab="ithrae"].active::after { background: var(--ithrae); }
.tab-btn[data-tab="juthoor"].active { color: var(--juthoor); }
.tab-btn[data-tab="juthoor"].active::after { background: var(--juthoor); }

.tab-panel {
    padding: 28px 32px;
}

.tab-panel.hidden { display: none; }

.tab-panel[data-tab="commentary_ar"] h2 { color: var(--tafsir); border-color: var(--tafsir); }
.tab-panel[data-tab="ithrae"] h2 { color: var(--ithrae); border-color: var(--ithrae); }
.tab-panel[data-tab="juthoor"] h2 { color: var(--juthoor); border-color: var(--juthoor); }

/* ── Content Typography ── */
.chapter-content h1, .tab-panel h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 32px 0 16px;
    color: var(--text);
}

h2.section-tafsir, h2.section-additions {
    font-size: 18px;
    font-weight: 700;
    color: var(--tafsir);
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tafsir);
    opacity: 0.85;
}

h2.section-ithrae {
    font-size: 18px;
    font-weight: 700;
    color: var(--ithrae);
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ithrae);
    opacity: 0.85;
}

h2.section-juthoor {
    font-size: 18px;
    font-weight: 700;
    color: var(--juthoor);
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--juthoor);
    opacity: 0.85;
}

h2.section-quran-text {
    display: none;
}

h3.subsection {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 28px 0 12px;
    padding-right: 14px;
    border-right: 4px solid var(--accent);
}

.tab-panel[data-tab="commentary_ar"] h3.subsection { border-right-color: var(--tafsir); }
.tab-panel[data-tab="ithrae"] h3.subsection { border-right-color: var(--ithrae); }
.tab-panel[data-tab="juthoor"] h3.subsection { border-right-color: var(--juthoor); }

h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    margin: 20px 0 8px;
}

p {
    margin: 12px 0;
    text-align: justify;
    text-justify: inter-word;
}

blockquote {
    margin: 16px 0;
    padding: 12px 20px;
    border-right: 4px solid var(--accent);
    background: var(--accent-light);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--accent-dark);
}

ul.content-list {
    margin: 12px 0;
    padding-right: 24px;
    list-style: none;
}

ul.content-list li {
    position: relative;
    padding-right: 16px;
    margin-bottom: 8px;
}

ul.content-list li::before {
    content: '◆';
    position: absolute;
    right: -8px;
    color: var(--accent);
    font-size: 10px;
    top: 8px;
}

strong {
    color: var(--text);
    font-weight: 700;
}

.additions-divider {
    margin: 32px 0;
    border-top: 2px dashed #e0d8cc;
}

/* ── Intro content ── */
.intro-content {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 40px 36px;
    box-shadow: var(--shadow);
}

.intro-content h1 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 28px;
    color: var(--accent-dark);
}

.intro-content h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--tafsir);
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tafsir);
}

/* ── Navigation Footer ── */
.nav-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e8e4dc;
    gap: 16px;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: var(--bg-card);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    max-width: 45%;
}

.nav-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(200,149,108,0.2);
}

.nav-btn .arrow { font-size: 18px; color: var(--accent); }
.nav-btn .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Progress Bar ── */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 200;
    background: transparent;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    transition: width 0.15s;
    border-radius: 0 0 3px 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    :root { --sidebar-width: min(320px, 86vw); }

    /* Mobile: sidebar is a fixed overlay. Default hidden via .collapsed,
       which is added at init for viewports ≤768px. Toggling .collapsed
       (the same call desktop uses) now correctly opens/closes the sidebar
       on mobile too — previously .open was used here but the JS never
       toggled it, so the hamburger appeared to do nothing. */
    .sidebar { box-shadow: -4px 0 24px rgba(0,0,0,0.18); }

    .main { margin-right: 0 !important; }

    /* Keep the hamburger reachable above the sidebar when it opens */
    .sidebar:not(.collapsed) ~ .sidebar-toggle { right: calc(var(--sidebar-width) + 12px); }

    /* Tap-outside-to-close backdrop */
    .sidebar-backdrop {
        position: fixed; inset: 0; background: rgba(20, 14, 8, 0.42);
        z-index: 99; opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
    }
    body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    body.sidebar-open { overflow: hidden; }

    /* Keyboard-shortcut hint is useless on touch — hide it */
    .shortcuts-hint { display: none !important; }

    .content-wrapper { padding: 20px 16px 60px; }

    .book-header h1 { font-size: 30px; }
    .quran-verse { font-size: 20px; padding: 20px; }
    .tab-panel { padding: 20px 16px; }
    .tab-btn { font-size: 13px; padding: 12px 10px; }
    .ayah-header { margin: 6px auto 18px; padding: 10px 0; }
    .ayah-header::before,
    .ayah-header::after { max-width: 100px; }
    .ayah-badge { font-size: 15px; padding: 0 14px; gap: 6px; }
    .ayah-badge::before { font-size: 12px; }
}

/* ── Collapsible Method intro ──
   The first chapter of every surah page is "بيان المنهج" (method statement).
   It's wrapped in a <details> so readers skip straight to the ayat; clicking
   the summary expands it in place. An inline script below auto-expands it
   when the URL hash is #intro (top-bar "بيان المنهج" link). */
.intro-details > summary.intro-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px;
    margin: 6px 0 0;
    background: var(--bg-card);
    border: 1px solid #e8e0d0;
    border-radius: var(--radius);
    color: var(--accent-dark);
    font-family: var(--font-quran);
    font-size: 22px;
    font-weight: 600;
    transition: background 0.2s, border-color 0.2s;
}
.intro-details > summary.intro-summary::-webkit-details-marker { display: none; }
.intro-details > summary.intro-summary::after {
    content: "▾";
    display: inline-block;
    margin-inline-start: 10px;
    font-size: 15px;
    color: var(--text-light);
    transition: transform 0.25s ease;
}
.intro-details[open] > summary.intro-summary::after { transform: rotate(180deg); }
.intro-details > summary.intro-summary:hover {
    background: #fbf7ee;
    border-color: var(--accent-light);
}
.intro-details[open] > summary.intro-summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}
.intro-details[open] > .chapter-content.intro-content {
    border: 1px solid #e8e0d0;
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 28px 32px 32px;
    background: var(--bg-card);
}
@media (max-width: 768px) {
    .intro-details > summary.intro-summary { padding: 14px 18px; font-size: 19px; }
    .intro-details[open] > .chapter-content.intro-content { padding: 20px 18px 24px; }
}

/* ── Keyboard Shortcuts Hint ── */
.shortcuts-hint {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #fff;
    color: var(--text-light);
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #e0d6c8;
    font-size: 12px;
    opacity: 0.6;
    z-index: 50;
    transition: opacity 0.3s;
}

.shortcuts-hint:hover { opacity: 1; }
.shortcuts-hint kbd {
    background: var(--accent-light);
    color: var(--accent-dark);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    margin: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   الكلمة قبل المصطلح THE WORD BEFORE THE TERM
   New layer on top of the existing book
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --recovered: #4a6741;    /* sage / olive recovered meaning */
    --english:   #2c5f7c;    /* muted teal english reading */
    --tworeads:  #8b5a2b;    /* walnut two readings compare */
}

/* ── Top Bar ──
   The wordmark on the right (RTL) is the book's name in Amiri, echoing
   the ayah typography below; a thin vertical hairline separates it from
   the surah sub-label. The whole left-side wordmark is a link back home. */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: linear-gradient(180deg, rgba(252, 248, 240, 0.98) 0%, rgba(250, 245, 234, 0.96) 100%);
    backdrop-filter: saturate(1.1) blur(10px);
    -webkit-backdrop-filter: saturate(1.1) blur(10px);
    border-bottom: 1px solid #e8dfd0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 14px rgba(60, 40, 10, 0.04);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px 0 22px;
    font-family: var(--font-primary);
}
body.has-topbar .main { padding-top: 56px; }
body.has-topbar .progress-bar { top: 56px; }
body.has-topbar .sidebar { top: 56px; height: calc(100vh - 56px); }
body.has-topbar .sidebar-toggle { top: 66px; }

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 18px;
}
.top-bar .book-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: var(--accent-dark);
    text-decoration: none;
    letter-spacing: 0.01em;
    padding: 6px 8px;
    border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease;
}
.top-bar .book-mark:hover {
    color: var(--accent);
    background: rgba(200, 149, 108, 0.08);
}
.top-bar .book-mark:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.top-bar .book-mark-sub {
    color: var(--text-light);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    padding-inline-start: 12px;
    border-inline-start: 1px solid #d8cfbf;
    /* Nudged down so the baselines of the two scripts align nicely. */
    position: relative;
    top: -1px;
}
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.top-bar button {
    background: transparent;
    border: 1px solid #d8cfbf;
    border-radius: 8px;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
}
.top-bar button:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent-dark);
}
.top-bar .lang-toggle {
    display: inline-flex;
    border: 1px solid #d8cfbf;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.top-bar .lang-toggle button {
    border: 0;
    border-radius: 0;
    padding: 6px 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-light);
}
.top-bar .lang-toggle button.active {
    background: var(--accent);
    color: #fff;
}
/* ع uses Amiri for presence */
.top-bar .lang-toggle button#langAr {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}
@media (max-width: 768px) {
    .top-bar { padding: 0 16px 0 16px; }
    .top-bar .book-mark { font-size: 18px; gap: 9px; padding: 4px 6px; }
    .top-bar .book-mark-sub { font-size: 12px; padding-inline-start: 9px; }
    .top-bar button { padding: 5px 10px; font-size: 13px; }
}

/* ── New Tab Colors ── */
.tab-btn[data-tab="recovered"].active { border-color: var(--recovered); color: var(--recovered); background: #f2f6ef; }
.tab-btn[data-tab="commentary_en"].active   { border-color: var(--english);   color: var(--english);   background: #eef4f8; }
.tab-btn[data-tab="tworeads_ar"].active  { border-color: var(--tworeads);  color: var(--tworeads);  background: #f7f1e8; }

.section-recovered {
    color: var(--recovered);
    border-inline-start: 3px solid var(--recovered);
    padding-inline-start: 12px;
    font-size: 20px;
    margin-top: 8px;
}
.section-commentary {
    color: var(--english);
    border-inline-start: 3px solid var(--english);
    padding-inline-start: 12px;
    font-size: 20px;
    margin-top: 8px;
}
.section-tworeads {
    color: var(--tworeads);
    border-inline-start: 3px solid var(--tworeads);
    padding-inline-start: 12px;
    font-size: 20px;
    margin-top: 8px;
}

/* ── English tab LTR block ── */
.tab-panel[data-tab="commentary_en"] {
    direction: ltr;
    text-align: left;
    font-family: var(--font-latin);
    line-height: 1.85;
}
.tab-panel[data-tab="commentary_en"] h2,
.tab-panel[data-tab="commentary_en"] h3 {
    font-family: var(--font-latin);
}
.tab-panel[data-tab="commentary_en"] .verse-en {
    font-size: 19px;
    color: var(--english);
    background: #eef4f8;
    padding: 18px 22px;
    border-inline-start: 4px solid var(--english);
    margin: 12px 0 18px;
    font-style: italic;
}

/* ── Recovered Arabic tab ── */
.tab-panel[data-tab="recovered"] .verse-ar-recovered {
    font-family: var(--font-quran), 'Scheherazade', serif;
    font-size: 22px;
    color: var(--recovered);
    background: #f2f6ef;
    padding: 18px 22px;
    border-inline-start: 4px solid var(--recovered);
    margin: 12px 0 18px;
    line-height: 2.2;
}

/* ── Two Readings: side by side grid ── */
.two-readings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 20px 0;
}
.two-readings > div {
    background: #fdfaf4;
    border: 1px solid #e8dfd0;
    border-radius: 10px;
    padding: 18px 22px;
}
.two-readings .common {
    border-top: 3px solid #b0a494;
}
.two-readings .root {
    border-top: 3px solid var(--tworeads);
    background: #faf4ea;
}
.two-readings h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light);
    font-weight: 700;
}
.two-readings .root h4 { color: var(--tworeads); }
.two-readings .reading-text {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--text);
}
.two-readings .note {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-light);
    font-style: italic;
    border-top: 1px dashed #d8cfbf;
    padding-top: 8px;
}
@media (max-width: 820px) {
    .two-readings { grid-template-columns: 1fr; }
}

/* ── tworeads-en (English sister to قراءتان) ── */
.tab-btn[data-tab="tworeads_en"].active {
    border-color: var(--tworeads);
    color: var(--tworeads);
    background: #f7f1e8;
}
.tab-panel[data-tab="tworeads_en"] {
    direction: ltr;
    text-align: left;
    font-family: var(--font-latin);
    line-height: 1.8;
}
.tab-panel[data-tab="tworeads_en"] h2,
.tab-panel[data-tab="tworeads_en"] h3,
.tab-panel[data-tab="tworeads_en"] h4 {
    font-family: var(--font-latin);
}
.tab-panel[data-tab="tworeads_en"] .two-readings {
    direction: ltr;
}
.tab-panel[data-tab="tworeads_en"] .reading-text {
    text-align: left;
}


/* ── Lexicon keyword (clickable terms) ── */
.lex-term {
    border-bottom: 1.5px dotted var(--recovered);
    cursor: help;
    color: var(--recovered);
    font-weight: 600;
    transition: background 0.15s;
    padding: 0 2px;
    border-radius: 3px;
}
.lex-term:hover {
    background: #eaf2e5;
}
.tab-panel[data-tab="commentary_en"] .lex-term {
    border-bottom-color: var(--english);
    color: var(--english);
}
.tab-panel[data-tab="commentary_en"] .lex-term:hover {
    background: #e3edf3;
}

/* ── Tooltip / Lex popover ── */
.lex-popover {
    position: fixed;
    z-index: 1000;
    max-width: 380px;
    background: #fff;
    border: 1px solid #d8cfbf;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(60, 40, 20, 0.18);
    padding: 18px 20px;
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.15s, transform 0.15s;
}
.lex-popover.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.lex-popover .lex-close {
    position: absolute;
    top: 8px;
    inset-inline-end: 10px;
    background: transparent;
    border: 0;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-light);
    line-height: 1;
    padding: 4px 8px;
}
.lex-popover .lex-close:hover { color: var(--accent-dark); }
.lex-popover h4 {
    margin: 0 0 6px 0;
    color: var(--recovered);
    font-size: 17px;
    font-weight: 700;
}
.lex-popover .lex-root {
    font-family: var(--font-quran), serif;
    color: var(--tworeads);
    font-size: 16px;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.lex-popover .lex-field {
    margin: 8px 0;
}
.lex-popover .lex-field strong {
    color: var(--accent-dark);
    font-weight: 700;
}
.lex-popover .lex-proposed {
    background: #f2f6ef;
    border-inline-start: 3px solid var(--recovered);
    padding: 6px 10px;
    margin-top: 8px;
    font-weight: 600;
    color: var(--recovered);
}

/* ── Modal (Method / Lexicon full views) ── */
.book-modal {
    position: fixed;
    inset: 0;
    background: rgba(30, 20, 10, 0.55);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px;
    overflow-y: auto;
}
.book-modal.visible { display: flex; }
.book-modal-inner {
    background: var(--paper);
    border-radius: 14px;
    max-width: 880px;
    width: 100%;
    padding: 48px 56px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
    position: relative;
    font-family: var(--font-primary);
    line-height: 1.85;
    color: var(--text);
}
.book-modal-inner .modal-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 18px;
    background: transparent;
    border: 0;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-light);
    padding: 6px 12px;
    line-height: 1;
}
.book-modal-inner .modal-close:hover { color: var(--accent-dark); }
.book-modal-inner h1 {
    font-size: 28px;
    color: var(--accent-dark);
    margin-top: 0;
}
.book-modal-inner h2 {
    font-size: 20px;
    color: var(--recovered);
    margin-top: 28px;
    border-bottom: 1px solid #e8dfd0;
    padding-bottom: 6px;
}
.book-modal-inner h3 {
    font-size: 17px;
    color: var(--tworeads);
    margin-top: 20px;
}
.book-modal-inner.lang-en {
    direction: ltr;
    text-align: left;
    font-family: var(--font-latin);
}
.book-modal-inner .lang-switch-mini {
    position: absolute;
    top: 16px;
    inset-inline-start: 20px;
    display: inline-flex;
    gap: 6px;
}
.book-modal-inner .lang-switch-mini button {
    background: transparent;
    border: 1px solid #d8cfbf;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-primary);
}
.book-modal-inner .lang-switch-mini button.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── Lexicon list inside modal ── */
.lex-list { margin-top: 18px; }
.lex-list .lex-entry {
    padding: 18px 0;
    border-bottom: 1px solid #eee3cf;
}
.lex-list .lex-entry:last-child { border-bottom: 0; }
.lex-list .lex-entry h3 {
    margin: 0 0 4px 0;
    color: var(--recovered);
    font-size: 19px;
}
.lex-list .lex-entry .lex-root-inline {
    color: var(--tworeads);
    font-size: 14px;
    font-family: var(--font-quran), serif;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.lex-list .lex-entry p {
    margin: 6px 0;
    font-size: 14.5px;
}

/* ── Book header restyle ── */
.book-header h1 {
    line-height: 1.3;
}
.book-header .subtitle-en {
    display: block;
    margin-top: 8px;
    font-family: var(--font-latin);
    font-style: italic;
    font-size: 16px;
    color: var(--text-light);
    letter-spacing: 0.02em;
    direction: ltr;
}

/* ── English mode body-wide ── */
body.lang-en .tab-panel[data-tab="commentary_en"] { display: block; }
/* (We don't force-hide Arabic tabs in EN mode language toggle only affects chrome + default tab selection) */

@media (max-width: 820px) {
    /* .top-bar padding handled in the new ≤768px rule above. Below ~430px
       the sub-label is too cramped next to the title, so it's dropped. */
    .book-modal-inner { padding: 36px 24px; }
}
@media (max-width: 430px) {
    .top-bar .book-mark-sub { display: none; }
}

.subsection.lamha { color: #6b5a3c; font-variant: small-caps; border-bottom: 1px dashed #d8cfbf; padding-bottom: 4px; margin-top: 4px; }
hr.lamha-sep { border: 0; border-top: 1px dashed #d8cfbf; margin: 18px 0; }


/* ─── SUGGEST widget CSS (injected at build time) ─── */

/* Reader suggestion / comment box */
.suggest { margin: 40px 0 0; padding: 0; }
.suggest details {
  border: 1px dashed var(--accent-dark);
  border-radius: 10px;
  padding: 14px 18px;
  background: #fefaf3;
}
.suggest summary {
  cursor: pointer;
  font-family: var(--font-ar-title);
  font-size: 17px;
  color: var(--accent-dark);
  font-weight: 600;
  list-style: none;
  padding: 2px 0;
}
.suggest summary::-webkit-details-marker { display: none; }
.suggest summary::before { content: "▸ "; }
.suggest details[open] summary::before { content: "▾ "; }
.suggest .suggest-help {
  margin: 12px 0 10px;
  font-size: 14px;
  color: var(--text-light);
}
.suggest .suggest-input {
  width: 100%;
  min-height: 90px;
  padding: 10px;
  font-family: inherit;
  font-size: 16px;
  border: 1px solid #d8cfbf;
  border-radius: 6px;
  resize: vertical;
  direction: rtl;
  background: #fff;
}
.suggest .suggest-row {
  display: flex; gap: 10px; margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.suggest .suggest-email {
  flex: 1 1 220px;
  padding: 8px 10px;
  font: inherit; font-size: 15px;
  border: 1px solid #d8cfbf;
  border-radius: 6px;
  direction: ltr;
}
.suggest .suggest-send {
  padding: 8px 22px;
  background: var(--accent-dark);
  color: #fff;
  border: none; border-radius: 6px;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.suggest .suggest-send:hover { opacity: .9; }
.suggest .suggest-send:disabled { opacity: .5; cursor: not-allowed; }
.suggest .suggest-status {
  margin-top: 8px;
  font-size: 14px;
  min-height: 18px;
}
.suggest .suggest-status.ok    { color: #2e7d32; }
.suggest .suggest-status.err   { color: #c62828; }

/* ─── Basmala rendering: replace the `﷽` ligature (which in Amiri Quran
   carries a long kashida tail that reads as visual noise) with plain text,
   rendered cleanly without short vowels. !important overrides the shell's
   `.book-header::after { content: '﷽' }` rule — shell CSS is appended
   before this block, so later rules already win on specificity, but the
   bang is there to be bulletproof against future additions. */
.book-header::after,
.home-hero::after {
  content: "بسم الله الرحمن الرحيم" !important;
  font-family: 'Amiri Quran', 'Amiri', 'Noto Naskh Arabic', serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga" 1, "kern" 1;
}
/* Shell CSS globally sets `p { text-align: justify; }` which spreads
   short subtitles edge-to-edge and makes them look right-aligned. The
   header/hero subtitles must stay center-aligned. */
.book-header .subtitle,
.home-hero .subtitle,
.home-hero .subtitle-en {
  text-align: center !important;
}
/* Book header polish — a bit more breathing room around the hero title. */
.book-header h1 { letter-spacing: 0.005em; margin-bottom: 14px; }
.book-header .subtitle { margin-top: 4px; }
/* Top-bar book-mark: the subtitle sits flush against the title because the
   shell's markup puts them as adjacent text nodes. Add a visible dot
   separator so «الكلمة قبل المصطلح · سورة البقرة» reads as two labels. */
.book-mark-sub {
  margin-inline-start: 12px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--accent-light);
  color: var(--text-light);
  font-weight: 400;
}

/* ─── Home page ─── */
.home-hero {
  text-align: center;
  padding: 88px 24px 24px;
  position: relative;
}
.home-hero h1 {
  /* Plain Amiri (bold) for display — Amiri Quran is for Qur'anic ligature
     text and renders plain book-title text unevenly. */
  font-family: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.005em;
}
.home-hero .subtitle {
  margin-top: 22px;
  font-size: 20px;
  color: var(--text-light);
  font-family: var(--font-body);
}
.home-hero .subtitle-en {
  display: block;
  font-family: var(--font-latin);
  font-style: italic;
  margin-top: 8px;
  font-size: 16px;
  color: var(--text-light);
  letter-spacing: 0.02em;
}
/* Basmala ornament below the home title — mirrors .book-header::after so
   the home page and surah pages share the same visual gesture. */
.home-hero::after {
  content: '﷽';
  display: block;
  font-family: var(--font-quran);
  font-size: 44px;
  color: var(--accent);
  margin-top: 40px;
  opacity: 0.95;
  line-height: 1;
}
/* Triple-star ornament separator between hero and grid — same character
   and weight the surah pages use after .book-header. */
.home-ornament {
  display: block;
  text-align: center;
  color: var(--accent);
  font-size: 22px;
  margin: 16px 0 28px;
  opacity: 0.45;
  letter-spacing: 14px;
}
/* Home بيان المنهج CTA — sits between the ornament and the surah grid.
   Visually distinct card-style block that invites the reader to read
   the method statement before diving into the surahs. Trilingual via
   .lang-ar/.lang-en/.lang-fr spans the home already uses. */
.home-method-cta {
  max-width: 1100px;
  margin: 12px auto 56px;
  padding: 44px 56px 40px;
  border: 1.5px solid var(--accent-light);
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: 0 4px 18px rgba(60, 40, 16, 0.06), 0 1px 2px rgba(0,0,0,0.03);
  text-align: center;
  position: relative;
}
.home-method-cta::before {
  content: "";
  position: absolute;
  inset-inline-start: 32px;
  inset-inline-end: 32px;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 0 0 4px 4px;
  opacity: 0.7;
}
.home-method-cta h2 {
  margin: 6px 0 12px;
  font-family: var(--font-quran);
  font-size: 38px;
  color: var(--accent-dark);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.home-method-cta .home-method-tagline {
  font-family: var(--font-quran);
  font-size: 21px;
  color: var(--accent-dark);
  margin: 0 0 18px;
  line-height: 1.55;
}
.home-method-cta .home-method-lede {
  font-size: 17px;
  color: var(--text);
  line-height: 1.85;
  margin: 0 auto 28px;
  max-width: 760px;
}
.home-method-cta .lang-ar .home-method-lede,
.home-method-cta.lang-ar .home-method-lede { font-family: var(--font-quran); }
.home-method-cta .home-method-actions {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.home-method-cta .home-method-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 10px;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-quran);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 6px rgba(120, 80, 30, 0.18);
}
.home-method-cta .home-method-btn:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(120, 80, 30, 0.25);
}
.home-method-cta .home-method-btn.secondary {
  background: transparent;
  color: var(--accent-dark);
  box-shadow: none;
}
.home-method-cta .home-method-btn.secondary:hover {
  background: rgba(200, 149, 108, 0.12);
  box-shadow: 0 2px 6px rgba(120, 80, 30, 0.10);
}
@media (max-width: 720px) {
  .home-method-cta { margin: 8px 16px 36px; padding: 28px 22px 26px; border-radius: 14px; }
  .home-method-cta h2 { font-size: 28px; }
  .home-method-cta .home-method-tagline { font-size: 17px; margin-bottom: 14px; }
  .home-method-cta .home-method-lede { font-size: 15px; line-height: 1.75; }
  .home-method-cta .home-method-btn { padding: 12px 22px; font-size: 16px; }
}
.surah-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  padding: 0 32px 96px;
  max-width: 1180px;
  margin: 0 auto;
}
.surah-card {
  border: 1px solid var(--accent-light);
  border-radius: 12px;
  padding: 20px 22px;
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.surah-card:hover:not(.disabled) {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.surah-card.disabled { opacity: 0.48; cursor: not-allowed; }
.surah-card .num {
  font-size: 13px;
  color: var(--text-light);
  font-family: var(--font-latin);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.surah-card .name-ar {
  font-family: var(--font-quran);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin: 6px 0 4px;
  line-height: 1.25;
}
.surah-card .name-en {
  font-size: 13.5px;
  color: var(--text-light);
  font-style: italic;
  font-family: var(--font-latin);
}
.surah-card .meta {
  font-size: 12.5px;
  color: var(--text-light);
  margin-top: 12px;
  font-family: var(--font-body);
}
.surah-card .soon {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  background: var(--accent-light);
  padding: 3px 10px;
  border-radius: 12px;
  color: var(--accent-dark);
  letter-spacing: 0.04em;
  font-family: var(--font-body);
}


/* ─── I18N (bilingual toggle) CSS (injected at build time) ─── */

/* Language toggle: show only the elements tagged with the active lang.
   Pairs/triples are marked with class "lang-ar", "lang-en", or "lang-fr".
   The early inline script sets the class on <html> before paint to avoid
   FOUC, then the DOMContentLoaded handler mirrors it onto <body>; we key
   on either. Every cross-language combination must be listed so a reader
   in FR mode sees only FR content, not FR + EN, etc. */
html.lang-ar .lang-en, body.lang-ar .lang-en,
html.lang-ar .lang-fr, body.lang-ar .lang-fr,
html.lang-en .lang-ar, body.lang-en .lang-ar,
html.lang-en .lang-fr, body.lang-en .lang-fr,
html.lang-fr .lang-ar, body.lang-fr .lang-ar { display: none !important; }
/* FR mode: hide .lang-en ONLY when a .lang-fr sibling exists (real French
   authored). When there's no .lang-fr sibling — most chrome (top-bar,
   sidebar TOC, method button, intro body, 404 page, suggest widget,
   ayah-number header "Verse N", and any ayah that doesn't yet have FR
   authoring) — the .lang-en span stays visible as a fallback so FR
   readers always see English rather than blank space. The :has(~ ...)
   and sibling-combinator forms together catch a .lang-fr sibling in
   either direction. Requires :has() (all modern browsers 2022+);
   older browsers degrade by showing every language at once, which is
   ugly but not broken. */
html.lang-fr .lang-en:has(~ .lang-fr), body.lang-fr .lang-en:has(~ .lang-fr),
html.lang-fr .lang-fr ~ .lang-en, body.lang-fr .lang-fr ~ .lang-en { display: none !important; }
/* Inline variants (spans inside buttons / headings) should display inline
   when visible, not block. */
button .lang-ar, button .lang-en, button .lang-fr,
h1 .lang-ar, h1 .lang-en, h1 .lang-fr,
summary .lang-ar, summary .lang-en, summary .lang-fr,
.suggest-send .lang-ar, .suggest-send .lang-en, .suggest-send .lang-fr { display: inline; }
html.lang-en .book-header .subtitle,
body.lang-en .book-header .subtitle,
html.lang-fr .book-header .subtitle,
body.lang-fr .book-header .subtitle { display: none; }
html.lang-ar .book-header .subtitle-en,
body.lang-ar .book-header .subtitle-en,
html.lang-ar .book-header .subtitle-fr,
body.lang-ar .book-header .subtitle-fr,
html.lang-en .book-header .subtitle-fr,
body.lang-en .book-header .subtitle-fr,
html.lang-fr .book-header .subtitle-en,
body.lang-fr .book-header .subtitle-en { display: none; }
/* In EN/FR mode, override the localized subtitle to be the primary line
   and show it as a title-sized element. Both subtitle-en and subtitle-fr
   share the same visual treatment. */
html.lang-en .book-header .subtitle-en,
body.lang-en .book-header .subtitle-en,
html.lang-fr .book-header .subtitle-fr,
body.lang-fr .book-header .subtitle-fr {
  display: block;
  font-size: 22px;
  color: var(--text-light);
  margin-top: 18px;
  font-style: normal;
  font-family: var(--font-serif, serif);
}
/* French verse block: same visual treatment as the English verse block.
   shell.html ships .verse-en styling for the english tab; we mirror it for
   .verse-fr so a FR reader sees the same coloured, padded, bordered box
   around the translated verse instead of unstyled text. */
.tab-panel[data-tab="commentary_en"] .verse-fr {
  font-size: 19px;
  color: var(--english);
  background: #eef4f8;
  padding: 18px 22px;
  border-inline-start: 4px solid var(--english);
  margin: 12px 0 18px;
  font-style: italic;
}
/* Reader-language pairing for ayah-level content.
   The site pairs Arabic chrome with either English or French commentary:
   the top-bar toggle picks which "second language" shows alongside Arabic.
   Concretely (post per-language-tab-set decision):
     AR mode  → AR-content tabs only (التفسير / قراءتان / تحليل جذريّ /
                تَأويل). EN/FR commentary panels stay in the DOM but their
                buttons are hidden.
     EN mode  → reader-language tabs only (Commentary / Two Readings /
                Interpretation). English content shown in those panels.
     FR mode  → same panels as EN, with French content (Commentaire /
                Deux Lectures / Interprétation).

   Note 2026-05-03: a previous override here forced `.ayah-lang-content.lang-en`
   visible in AR mode. That made sense when the English tab was visible in AR
   mode (the original 5-tab bilingual design) — without it, an AR reader
   clicking the English tab saw an empty panel. After the per-language tab
   refactor, the English tab is no longer visible in AR mode, so the override
   was dead for its original purpose. Worse, it broke the new trilingual
   exploration panel — which uses .ayah-lang-content.lang-{ar,en,fr} divs to
   wrap parallel-language content — by forcing English visible alongside
   Arabic in AR mode. The override has been removed; the chrome rule
   (body.lang-ar .lang-en { hide }) now governs both reader-language panels
   (where it's harmless because their buttons are hidden in AR) and the
   exploration panel (where it correctly hides EN/FR content in AR mode). */
/* French-missing fallback banner. When a reader-language tab panel has no
   authored French (data-fr-missing="1"), we still render its English body
   in every mode — but in FR mode we prepend a small banner that names the
   gap so the reader isn't silently served English without being told. */
.tab-panel[data-fr-missing] { position: relative; }
body.lang-fr .tab-panel[data-fr-missing="1"]::before {
  content: "Traduction française à venir. La version anglaise est affichée en attendant.";
  display: block;
  padding: 10px 14px;
  margin: 0 0 18px 0;
  border: 1px dashed #d8cfbf;
  border-radius: 6px;
  background: #fbf7ef;
  color: var(--text-light);
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 14px;
  direction: ltr;
  text-align: left;
}
/* Lazy-loaded ayah placeholders reserve rough vertical space so that
   hydration doesn't yank the scroll position when content arrives. Real
   ayah sections naturally exceed this height; the shorthand is a floor.
   Once hydrated the class flips to `.ayah-hydrated` and the constraint
   drops away. */
.ayah-placeholder { min-height: 500px; }
.ayah-hydrated { min-height: 0; }
/* Tab hiding must always win over language-specific panel rules.
   shell.html ships `body.lang-en .tab-panel[data-tab="commentary_en"] { display: block; }`
   (specificity 0,0,3,1) which otherwise pins the English panel visible in EN
   mode even after switchTab() adds `.hidden`. Without this override, clicking
   a tab in EN mode either leaves two panels stacked or looks like nothing
   happened — the "tabs don't work in EN" bug. `!important` guarantees hidden
   wins regardless of future additions to shell.html. */
.tab-panel.hidden { display: none !important; }


/* ─── per-language tab visibility (built from TAB_VISIBILITY) ─── */
body.lang-en .tab-btn[data-tab="commentary_ar"],
body.lang-fr .tab-btn[data-tab="commentary_ar"] { display: none; }
body.lang-ar .tab-btn[data-tab="commentary_en"] { display: none; }
body.lang-en .tab-btn[data-tab="tworeads_ar"],
body.lang-fr .tab-btn[data-tab="tworeads_ar"] { display: none; }
body.lang-ar .tab-btn[data-tab="tworeads_en"] { display: none; }
body.lang-en .tab-btn[data-tab="juthoor"],
body.lang-fr .tab-btn[data-tab="juthoor"] { display: none; }

/* ─── A11Y (lightweight options) CSS (injected at build time) ─── */

/* ─── Screen-reader-only utility class ───
   The standard "visually hidden but exposed to assistive tech" pattern.
   Used for the live-status region (#srStatus), for the per-section
   aria-labels we attach as <span class="sr-only">, and anywhere we need
   prose for screen readers that shouldn't take visual space. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ─── Universal focus indicator ───
   Every interactive element should have a clearly visible focus ring
   for keyboard-only and screen-reader-with-keyboard users. The shell
   has scattered :focus-visible rules; this is the catch-all. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Buttons that already carry their own border + radius look better
   when the outline hugs the existing shape. */
button:focus-visible,
.tab-btn:focus-visible,
.toc-item:focus-visible,
a:focus-visible {
  outline-offset: 2px;
}

/* ─── Jump-to-verse form ───
   Sits under the book-header. A blind user types a verse number + Enter
   and lands on that ayah. Sighted users get the same affordance — useful
   for anyone who knows where they want to go in a 286-verse surah. */
.jump-to-verse {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 920px;
  margin: 6px auto 24px;
  padding: 10px 18px;
  background: var(--bg-card);
  border: 1px dashed var(--accent-light);
  border-radius: 10px;
  font-family: var(--font-body);
}
.jump-to-verse-label {
  font-size: 14px;
  color: var(--text-light);
  font-weight: 500;
}
.jump-to-verse input[type="number"] {
  width: 90px;
  padding: 6px 10px;
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--accent-light);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  text-align: center;
}
.jump-to-verse input[type="number"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.jump-to-verse button {
  padding: 6px 18px;
  background: var(--accent-dark);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.jump-to-verse button:hover { opacity: 0.92; }
html[data-theme="dark"] .jump-to-verse {
  background: var(--d-card);
  border-color: var(--d-border);
}
html[data-theme="dark"] .jump-to-verse input[type="number"] {
  background: var(--d-sunken);
  border-color: var(--d-border);
}
html[data-theme="dark"] .jump-to-verse button {
  background: var(--accent-dark);
  color: #1a1714;
}
@media (max-width: 480px) {
  .jump-to-verse { padding: 8px 12px; gap: 6px; }
  .jump-to-verse-label { font-size: 13px; }
  .jump-to-verse input[type="number"] { width: 70px; padding: 5px 8px; }
  .jump-to-verse button { padding: 5px 14px; }
}

/* ─── Skip-to-content link ─── */
.skip-link {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  background: var(--accent-dark);
  color: #fff;
  padding: 10px 18px;
  z-index: 1000;
  transform: translateY(-120%);
  transition: transform .15s ease;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* ─── Home page floating controls ───
   Minimal cluster (no enclosing bar) anchored to the top-right of the
   home viewport. Same buttons as the surah top-bar (lang toggle / theme
   cycle / Aa popover), but with no borders and a much lighter visual so
   the home page stays uncluttered. Each button is borderless and
   reveals on hover. */
.home-controls {
  position: fixed;
  top: 18px;
  inset-inline-end: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 100;
  font-family: var(--font-body);
}
.home-controls .lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: transparent;
  border: 0;
}
.home-controls .lang-toggle button {
  background: transparent;
  border: 0;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
  letter-spacing: 0.04em;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.home-controls .lang-toggle button#langAr {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
.home-controls .lang-toggle button:hover {
  color: var(--accent-dark);
  background: rgba(200, 149, 108, 0.10);
}
.home-controls .lang-toggle button.active {
  color: var(--accent-dark);
}
.home-controls .lang-toggle button.active::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--accent);
  margin: 2px auto -3px;
  border-radius: 1px;
  width: 60%;
}
.home-controls .theme-toggle,
.home-controls .a11y-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-light);
  border-radius: 6px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
  font-family: var(--font-body);
}
.home-controls .theme-toggle { width: 32px; height: 30px; padding: 0; }
.home-controls .theme-toggle svg { width: 18px; height: 18px; display: none; }
.home-controls .theme-toggle[data-theme-state="auto"] .icon-auto,
.home-controls .theme-toggle[data-theme-state="light"] .icon-light,
.home-controls .theme-toggle[data-theme-state="dark"] .icon-dark { display: block; }
.home-controls .a11y-toggle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.home-controls .theme-toggle:hover,
.home-controls .a11y-toggle:hover {
  color: var(--accent-dark);
  background: rgba(200, 149, 108, 0.10);
}
.home-controls .theme-toggle:focus-visible,
.home-controls .a11y-toggle:focus-visible,
.home-controls .lang-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Tighten on small screens — 4-button cluster shouldn't crowd the title. */
@media (max-width: 480px) {
  .home-controls { top: 12px; inset-inline-end: 12px; gap: 2px; }
  .home-controls .lang-toggle button { padding: 4px 7px; }
  .home-controls .theme-toggle { width: 28px; height: 28px; }
  .home-controls .a11y-toggle { padding: 4px 6px; }
}

/* ─── Surah top-bar responsive fix ───
   On a 375px viewport the top-bar-right (5+ buttons) and the wordmark
   compete for room. The lang-toggle gets pushed past the visual edge
   so a phone reader can't reach FR. Mitigations, by breakpoint:

   ≤520px: hide the "La méthode" button (still reachable via the TOC
           "⟐ Introduction" item), and shrink lang-toggle padding.
   ≤430px: hide the book-mark sub-label (already in shell.html).
   ≤380px: hide the wordmark text — only the surah sub-label remains.
   ≤360px: hide the theme button (still reachable via the Aa popover).

   These fall through progressively so even the smallest phones (320 px)
   still expose the language toggle. */
@media (max-width: 520px) {
  /* The Method button is the widest element after the wordmark; hiding
     it on phones frees ~70-90px and is recoverable via the TOC's
     "⟐ Introduction" link (always visible in the sidebar). */
  .top-bar-right > button[onclick*="navigateTo('intro')"],
  .top-bar-right > button[onclick*="openMethod"] {
    display: none;
  }
  .top-bar .lang-toggle button { padding: 5px 8px; }
  .top-bar .a11y-toggle, .top-bar .theme-toggle { padding: 5px 8px; }
  .top-bar-right { gap: 6px; }
}
@media (max-width: 380px) {
  /* Strip the wordmark text down to nothing — keep only the surah
     sub-label (which already says where the reader is). The wordmark
     is still a tappable home link, so navigation isn't lost. */
  .top-bar .book-mark > span > .lang-ar:not(.book-mark-sub),
  .top-bar .book-mark > span > .lang-en:not(.book-mark-sub),
  .top-bar .book-mark > span > .lang-fr:not(.book-mark-sub),
  .top-bar .book-mark > .lang-ar > *:not(.book-mark-sub),
  .top-bar .book-mark > .lang-en > *:not(.book-mark-sub),
  .top-bar .book-mark > .lang-fr > *:not(.book-mark-sub) {
    /* preserve the inner book-mark-sub but hide the leading wordmark
       text node. We can't target a text node directly, so we hide the
       wrapping spans except the book-mark-sub child. */
  }
  /* Simpler: hide the entire wordmark and rely on the home button via
     keyboard shortcut / page back. The book-mark-sub still shows the
     surah name underneath — but actually we want the sub to remain. */
  .top-bar .book-mark { font-size: 0; padding: 0; }
  .top-bar .book-mark-sub { font-size: 13px; padding-inline-start: 0; border: 0; }
  .top-bar .book-mark .book-mark-sub::before {
    content: "▾ ";
    font-size: 11px;
    opacity: 0.7;
  }
}
@media (max-width: 360px) {
  /* Last-resort: hide the theme cycle button — same theme control is
     still reachable via the Aa popover. */
  .top-bar #themeBtn { display: none; }
}
/* Dark-mode tweaks — slightly lighter hover on dark bg. */
html[data-theme="dark"] .home-controls .lang-toggle button:hover,
html[data-theme="dark"] .home-controls .theme-toggle:hover,
html[data-theme="dark"] .home-controls .a11y-toggle:hover {
  background: rgba(212, 165, 115, 0.15);
}

/* ─── A11y popover button + panel ─── */
.top-bar .a11y-toggle,
.top-bar .theme-toggle {
  background: transparent;
  border: 1px solid #d8cfbf;
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}
.top-bar .theme-toggle {
  /* Square-ish button so the icon stays centred regardless of glyph width.
     Slightly larger SVG than the surrounding 14px text reads as a tap target. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  padding: 0;
}
.top-bar .theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  /* Hide all three icons by default; the active one is shown by the JS-set
     data-theme-state attribute below. */
}
.top-bar .theme-toggle svg { display: none; }
.top-bar .theme-toggle[data-theme-state="auto"] .icon-auto,
.top-bar .theme-toggle[data-theme-state="light"] .icon-light,
.top-bar .theme-toggle[data-theme-state="dark"] .icon-dark { display: block; }
.top-bar .a11y-toggle:hover,
.top-bar .theme-toggle:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.top-bar .a11y-toggle:focus-visible,
.top-bar .theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.a11y-panel {
  position: fixed;
  top: 64px;
  inset-inline-end: 16px;
  background: var(--bg-card);
  border: 1px solid #d8cfbf;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: 14px 16px 12px;
  z-index: 250;
  min-width: 240px;
  font-family: var(--font-body);
  color: var(--text);
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 6px 0 6px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.a11y-panel h3:first-child { margin-top: 0; }
.a11y-row {
  display: inline-flex;
  border: 1px solid #d8cfbf;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}
.a11y-row button {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  border-inline-start: 1px solid #d8cfbf;
}
.a11y-row button:first-child { border-inline-start: 0; }
.a11y-row button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}
.a11y-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 0 2px;
  user-select: none;
}
.a11y-check input { cursor: pointer; }

/* ─── Text-size scale ───
   We override font-size on the highest-volume reading containers so the
   "A+" / "A++" steps actually feel like a zoom on the text rather than
   on chrome. The root --fs-scale is the multiplier the JS sets via
   data-fs; default is 1. Containers that aren't listed (top-bar buttons,
   sidebar TOC) intentionally don't scale to keep chrome compact. */
:root { --fs-scale: 1; }
html[data-fs="lg"] { --fs-scale: 1.12; }
html[data-fs="xl"] { --fs-scale: 1.25; }
html[data-fs] body { font-size: calc(18px * var(--fs-scale)); }
html[data-fs] .chapter p,
html[data-fs] .lamha p,
html[data-fs] .verse-en,
html[data-fs] .verse-fr,
html[data-fs] .reading-text,
html[data-fs] .ayah-lang-content p,
html[data-fs] .thesis { font-size: calc(17px * var(--fs-scale)); }
html[data-fs] .verse-ar-recovered,
html[data-fs] .verse-ar { font-size: calc(26px * var(--fs-scale)); }

/* ─── Linear reading mode ───
   When the reader picks "Linear (show all tabs together)" in the Aa
   popover, html[data-reading="linear"] is set. We unhide every
   .tab-panel so all 5 sections (commentary, English, two readings, two
   readings EN, root analysis) stack top-to-bottom for serial reading.
   Tab buttons stay in the DOM (the screen reader still gets their
   labels as section headings) but are visually de-emphasized — they
   remain useful as quick jump anchors via Tab key.

   This is the single most impactful accessibility feature for screen
   reader users: tabs are a sighted-UI pattern, hostile to linear
   reading. Linear mode flips the page into a reading-friendly flow. */
html[data-reading="linear"] .tab-panel.hidden,
html[data-reading="linear"] .tab-panel[aria-hidden="true"] {
  display: block !important;
}
html[data-reading="linear"] .tab-panel {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px dashed var(--accent-light);
}
html[data-reading="linear"] .tab-panel:first-of-type {
  margin-top: 0; padding-top: 0; border-top: 0;
}
/* In linear mode, the tab-bar becomes a TOC-style header strip rather
   than an interactive switcher. Buttons get a transparent style and a
   subtle "anchor" feel. Keyboard focus still works. */
html[data-reading="linear"] .tabs-bar {
  padding: 6px 0;
  border-bottom: 1px solid var(--accent-light);
  margin-bottom: 8px;
}
html[data-reading="linear"] .tab-btn {
  font-size: 14px;
  padding: 4px 10px;
  opacity: 0.65;
}
html[data-reading="linear"] .tab-btn:hover,
html[data-reading="linear"] .tab-btn:focus-visible,
html[data-reading="linear"] .tab-btn.active {
  opacity: 1;
}
/* Hide the "translation pending" FR-mode banner in linear mode — when
   all panels show simultaneously the banner becomes redundant clutter. */
html[data-reading="linear"] body.lang-fr .tab-panel[data-fr-missing="1"]::before {
  display: none;
}

/* ─── Reduced motion ───
   Two paths: OS pref (media query) and explicit opt-in (data-motion="reduce").
   Both kill smooth-scroll, transitions, and animations. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html[data-motion="reduce"] { scroll-behavior: auto !important; }
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ─── Dark theme ───
   Token overrides plus targeted overrides for hardcoded literals in the
   shell. The early FOUC script resolves "auto" to the effective theme
   (light/dark) before paint by reading prefers-color-scheme, so we never
   need a media query: every dark-mode rule keys on data-theme="dark".
   This avoids the FOUC that happens when JS toggles a class after paint.

   Palette is desaturated warm brown-black — keeps the manuscript feel
   without burning the eye. Accent stays close to the light palette for
   brand continuity. We define a small set of "layer" tokens so the dark
   mode can stack panels visually:

     --d-bg       page background (deepest)
     --d-sunken   inset surfaces (inputs, kbd)
     --d-bg       body bg (same as --bg)
     --d-card     card / panel surfaces
     --d-elevated hover / popover elevation
     --d-border   divider lines and borders
     --d-border-strong  emphasised divider (e.g. accent-light replacement)
*/
html[data-theme="dark"] {
  --d-sunken: #1d1a16;
  --d-bg: #211d19;
  --d-card: #2a2622;
  --d-elevated: #34302b;
  --d-border: #3a352f;
  --d-border-strong: #4a4137;

  --bg: var(--d-bg);
  --bg-sidebar: #1f1c18;
  --bg-card: var(--d-card);
  --text: #ece5d6;
  --text-light: #b0a48d;
  --text-sidebar: #b8ac95;
  --text-sidebar-active: #f4ead2;
  --accent: #d4a573;
  --accent-light: #3a2e22;
  --accent-dark: #e8b888;
  /* Tab-color tokens: dimmed for dark mode so the colored chips don't
     burn against the warm-brown bg. Each pairs with a desaturated-dark
     panel bg one stop above the card. */
  --tafsir: #88c79a;
  --tafsir-bg: #243029;
  --ithrae: #8fc0d8;
  --ithrae-bg: #233038;
  --juthoor: #cfa3d6;
  --juthoor-bg: #2e2535;
  --recovered: #88c79a;
  --english:   #8fc0d8;
  --tworeads:  #d4ad7b;
  --quran-bg: #251f18;
  --quran-border: #c79666;
  --shadow: 0 2px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Top bar */
html[data-theme="dark"] .top-bar {
  background: linear-gradient(180deg, rgba(33,29,25,0.96) 0%, rgba(27,24,20,0.96) 100%);
  border-bottom-color: var(--d-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 14px rgba(0,0,0,0.35);
}
html[data-theme="dark"] .top-bar button,
html[data-theme="dark"] .top-bar .lang-toggle,
html[data-theme="dark"] .top-bar .a11y-toggle,
html[data-theme="dark"] .top-bar .theme-toggle,
html[data-theme="dark"] .top-bar .lang-toggle button { border-color: var(--d-border); }
html[data-theme="dark"] .top-bar .lang-toggle { background: var(--d-sunken); }
html[data-theme="dark"] .top-bar .book-mark-sub { border-inline-start-color: var(--d-border); }
html[data-theme="dark"] .top-bar button:hover {
  background: rgba(212,165,115,0.15);
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* Sidebar */
html[data-theme="dark"] .sidebar { border-inline-end-color: var(--d-border); }
html[data-theme="dark"] .sidebar-header,
html[data-theme="dark"] .sidebar-search { border-bottom-color: var(--d-border); }
html[data-theme="dark"] .sidebar-search input {
  background: var(--d-sunken);
  border-color: var(--d-border);
  color: var(--text);
}
html[data-theme="dark"] .sidebar-search input::placeholder { color: #74695a; }
html[data-theme="dark"] .toc-list::-webkit-scrollbar-thumb { background: var(--d-border); }
html[data-theme="dark"] .toc-item { color: var(--text-sidebar); }
html[data-theme="dark"] .toc-item:hover {
  background: var(--d-elevated);
  color: var(--text-sidebar-active);
}
html[data-theme="dark"] .toc-item.active {
  background: var(--d-elevated);
  color: var(--text-sidebar-active);
  border-right-color: var(--accent);
}

/* A11y popover panel */
html[data-theme="dark"] .a11y-panel {
  background: var(--d-elevated);
  border-color: var(--d-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .a11y-row,
html[data-theme="dark"] .a11y-row button { border-color: var(--d-border); }

/* Tabs bar */
html[data-theme="dark"] .tabs-bar {
  background: var(--d-sunken);
  border-bottom-color: var(--d-border);
}
html[data-theme="dark"] .tab-btn {
  background: transparent;
  color: var(--text-light);
  border-color: transparent;
}
html[data-theme="dark"] .tab-btn:hover { color: var(--accent-dark); }
html[data-theme="dark"] .tab-btn[aria-selected="true"],
html[data-theme="dark"] .tab-btn.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
  background: transparent;
}
/* Tab-button active chips. The shell paints each active tab with a
   background tinted to its category color (mint cream, sky cream, warm
   cream). In dark mode we replace with the matching --*-bg tokens so the
   chips are still discoverable but don't pop bright. */
html[data-theme="dark"] .tab-btn[data-tab="commentary_ar"].active,
html[data-theme="dark"] .tab-btn[data-tab="recovered"].active {
  background: var(--tafsir-bg); color: var(--tafsir); border-color: var(--tafsir);
}
html[data-theme="dark"] .tab-btn[data-tab="commentary_en"].active {
  background: var(--ithrae-bg); color: var(--ithrae); border-color: var(--ithrae);
}
html[data-theme="dark"] .tab-btn[data-tab="tworeads_ar"].active,
html[data-theme="dark"] .tab-btn[data-tab="tworeads_en"].active {
  background: #2e2620; color: var(--tworeads); border-color: var(--tworeads);
}
html[data-theme="dark"] .tab-btn[data-tab="juthoor"].active {
  background: var(--juthoor-bg); color: var(--juthoor); border-color: var(--juthoor);
}
html[data-theme="dark"] .tab-panel { background: transparent; }

/* Verse / commentary cards */
html[data-theme="dark"] .verse-en,
html[data-theme="dark"] .verse-fr,
html[data-theme="dark"] .tab-panel[data-tab="commentary_en"] .verse-en,
html[data-theme="dark"] .tab-panel[data-tab="commentary_en"] .verse-fr {
  background: var(--ithrae-bg);
  color: var(--ithrae);
  border-inline-start-color: var(--ithrae);
}
html[data-theme="dark"] .verse-ar-recovered,
html[data-theme="dark"] .tab-panel[data-tab="recovered"] .verse-ar-recovered {
  background: var(--quran-bg);
  border-color: var(--quran-border);
  border-inline-start-color: var(--quran-border);
  color: var(--text);
}
html[data-theme="dark"] .quran-verse,
html[data-theme="dark"] .verse-ar {
  background: var(--quran-bg);
  border-color: var(--quran-border);
  color: var(--text);
}

/* Two-readings columns */
html[data-theme="dark"] .two-readings > div {
  background: var(--d-card);
  border-color: var(--d-border);
}
html[data-theme="dark"] .two-readings .common { border-top-color: var(--d-border-strong); }
html[data-theme="dark"] .two-readings .root {
  background: #2c2620;
  border-top-color: var(--tworeads);
}
html[data-theme="dark"] .two-readings .reading-text { color: var(--text); }
html[data-theme="dark"] .two-readings .note { border-top-color: var(--d-border); }

/* Lex term + popover */
html[data-theme="dark"] .lex-term:hover,
html[data-theme="dark"] .tab-panel[data-tab="commentary_en"] .lex-term:hover {
  background: var(--d-elevated);
}
html[data-theme="dark"] .lex-popover {
  background: var(--d-elevated);
  border-color: var(--d-border);
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .lex-popover .lex-proposed {
  background: var(--tafsir-bg);
  color: var(--tafsir);
  border-inline-start-color: var(--tafsir);
}

/* Intro / chapter cards + dividers */
html[data-theme="dark"] .ayah-card,
html[data-theme="dark"] .home-hero,
html[data-theme="dark"] .surah-card {
  background: var(--d-card);
  border-color: var(--d-border);
  color: var(--text);
}
html[data-theme="dark"] .surah-card { box-shadow: var(--shadow); }
html[data-theme="dark"] .surah-card:hover { border-color: var(--accent); }
html[data-theme="dark"] .surah-card.disabled { opacity: 0.45; }
html[data-theme="dark"] .intro-details > summary.intro-summary {
  background: var(--d-card);
  border-color: var(--d-border);
  color: var(--text);
}
html[data-theme="dark"] .intro-details > summary.intro-summary:hover {
  background: var(--d-elevated);
  border-color: var(--accent-light);
}
html[data-theme="dark"] .intro-details[open] > .chapter-content.intro-content {
  background: var(--d-card);
  border-color: var(--d-border);
}
html[data-theme="dark"] hr,
html[data-theme="dark"] .lamha-sep { border-color: var(--d-border) !important; }
html[data-theme="dark"] .thesis {
  background: var(--d-sunken);
  border-color: var(--d-border);
  color: var(--text);
}

/* Shortcuts hint */
html[data-theme="dark"] .shortcuts-hint {
  background: var(--d-elevated);
  border-color: var(--d-border);
  color: var(--text-light);
}
html[data-theme="dark"] kbd {
  background: var(--d-sunken);
  border-color: var(--d-border);
  color: var(--text);
}

/* Suggest widget (per-ayah comment box) — original used #fefaf3 panel and
   #fff input bg, both stark in dark mode. Replace with layered dark warms.
   The original CSS hooks the styles to `.suggest details` / `.suggest-input`
   not `.suggest-form` (legacy mismatch in earlier override). */
html[data-theme="dark"] .suggest details {
  background: var(--d-card);
  border-color: var(--accent-light);
  color: var(--text);
}
html[data-theme="dark"] .suggest summary { color: var(--accent-dark); }
html[data-theme="dark"] .suggest .suggest-help { color: var(--text-light); }
html[data-theme="dark"] .suggest .suggest-input,
html[data-theme="dark"] .suggest .suggest-email {
  background: var(--d-sunken);
  border-color: var(--d-border);
  color: var(--text);
}
html[data-theme="dark"] .suggest .suggest-input::placeholder,
html[data-theme="dark"] .suggest .suggest-email::placeholder { color: #74695a; }
html[data-theme="dark"] .suggest .suggest-send {
  background: var(--accent-dark);
  color: #1a1714;
}
html[data-theme="dark"] .suggest .suggest-send:hover { opacity: 0.92; }
html[data-theme="dark"] .suggest .suggest-status.ok { color: #88c79a; }
html[data-theme="dark"] .suggest .suggest-status.err { color: #e08585; }

/* Modal (Method / Lexicon full views) */
html[data-theme="dark"] .book-modal {
  background: rgba(0, 0, 0, 0.65);
}
html[data-theme="dark"] .book-modal-inner {
  background: var(--d-card);
  border-color: var(--d-border);
  color: var(--text);
}
html[data-theme="dark"] .modal-close { color: var(--text-light); }
html[data-theme="dark"] .modal-close:hover { color: var(--accent-dark); }

/* Ayah header (verse number + Arabic title strip) */
html[data-theme="dark"] .ayah-header {
  border-top-color: var(--d-border);
  background: transparent;
}

/* Anything else still rendering with hardcoded #fff borders */
html[data-theme="dark"] details summary { color: var(--text); }
html[data-theme="dark"] .ayah-placeholder { background: transparent; }


/* ─── SEARCH (cross-surah) CSS (injected at build time) ─── */

/* Search trigger button (magnifier) — appears in both the home cluster
   and the surah top-bar, alongside the theme + Aa controls. Same visual
   weight as the a11y-toggle. */
.search-toggle {
  background: transparent;
  border: 1px solid #d8cfbf;
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-toggle:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.search-toggle svg { width: 16px; height: 16px; }
.search-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Home variant — borderless, matches the rest of the home-controls. */
.home-controls .search-toggle {
  border: 0;
  padding: 5px 8px;
  width: 32px;
  height: 30px;
  color: var(--text-light);
  border-radius: 6px;
}
.home-controls .search-toggle:hover {
  background: rgba(200, 149, 108, 0.10);
  color: var(--accent-dark);
}

/* Modal overlay + dialog */
.search-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 10, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 600;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
  font-family: var(--font-body);
}
.search-modal[hidden] { display: none; }

.search-dialog {
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  background: var(--bg-card);
  border: 1px solid #d8cfbf;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
}
.search-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e8dfd0;
}
.search-header svg { width: 18px; height: 18px; color: var(--text-light); flex-shrink: 0; }
.search-input {
  flex: 1;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 18px;
  background: transparent;
  color: var(--text);
  padding: 4px 0;
  min-width: 0;
}
.search-input::placeholder { color: var(--text-light); }
.search-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-light);
  font-family: 'Inter', system-ui, sans-serif;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.search-close:hover { background: var(--accent-light); color: var(--accent-dark); }

.search-results {
  overflow-y: auto;
  padding: 8px 0 14px;
  flex: 1;
}
.search-empty,
.search-hint {
  padding: 32px 18px;
  text-align: center;
  color: var(--text-light);
  font-size: 14px;
  line-height: 1.7;
}
.search-empty kbd,
.search-hint kbd {
  font-family: 'Inter', monospace;
  font-size: 12px;
  background: var(--accent-light);
  color: var(--accent-dark);
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0 2px;
}
.search-group-header {
  padding: 6px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  font-family: 'Inter', system-ui, sans-serif;
  background: rgba(0,0,0,0.02);
  position: sticky;
  top: 0;
}
.search-result {
  display: block;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  text-align: start;
  width: 100%;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  text-decoration: none;
  color: inherit;
  font-family: var(--font-body);
}
.search-result:hover,
.search-result.active {
  background: var(--accent-light);
}
.search-result-meta {
  font-size: 11px;
  color: var(--text-light);
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.search-result-snippet {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.search-result-snippet[dir="rtl"] {
  font-family: var(--font-body);
}
.search-result-snippet[dir="ltr"] {
  font-style: italic;
  font-family: var(--font-latin);
}
.search-result mark {
  background: var(--accent);
  color: #fff;
  padding: 0 2px;
  border-radius: 2px;
}
.search-result-roots {
  display: inline-flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.search-result-roots .root-chip {
  background: rgba(200, 149, 108, 0.12);
  color: var(--accent-dark);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11.5px;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.search-footer {
  padding: 8px 18px;
  border-top: 1px solid #e8dfd0;
  font-size: 11.5px;
  color: var(--text-light);
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.search-footer kbd {
  font-family: inherit;
  background: var(--accent-light);
  color: var(--accent-dark);
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0 2px;
  font-size: 11px;
}

/* Dark theme overrides */
html[data-theme="dark"] .search-modal { background: rgba(0, 0, 0, 0.65); }
html[data-theme="dark"] .search-dialog {
  background: var(--d-elevated);
  border-color: var(--d-border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .search-header,
html[data-theme="dark"] .search-footer { border-color: var(--d-border); }
html[data-theme="dark"] .search-group-header {
  background: rgba(255, 255, 255, 0.02);
}
html[data-theme="dark"] .search-result {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .search-result:hover,
html[data-theme="dark"] .search-result.active {
  background: rgba(212, 165, 115, 0.10);
}
html[data-theme="dark"] .search-toggle { border-color: var(--d-border); }

@media (max-width: 600px) {
  .search-modal { padding-top: 4vh; }
  .search-dialog { max-height: 92vh; }
  .search-input { font-size: 16px; }
}


/* ─── INTRO modal CSS (first-visit gate) ─── */

.intro-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.intro-modal[hidden] { display: none !important; }
.intro-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(28, 22, 14, 0.62);
  backdrop-filter: blur(2px);
}
.intro-modal-card {
  position: relative; z-index: 1;
  background: var(--paper, #fffaf0);
  border-radius: 10px;
  max-width: 720px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  padding: 28px 32px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  font-family: "Amiri", "Scheherazade New", Georgia, serif;
}
html[data-theme="dark"] .intro-modal-card { background: #211b14; color: #efe6d3; }
.intro-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent; border: none;
  font-size: 28px; line-height: 1; cursor: pointer;
  color: var(--text-light, #846b4a); padding: 4px 8px;
}
.intro-close:hover { color: var(--accent, #c8956c); }
.intro-langpick {
  display: flex; gap: 6px; justify-content: center;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px dashed rgba(200,149,108,0.35);
}
.intro-langbtn {
  background: transparent; border: 1px solid rgba(200,149,108,0.3);
  padding: 5px 14px; border-radius: 4px;
  font-size: 14px; cursor: pointer;
  color: var(--text-light, #846b4a);
  transition: all 0.15s ease;
}
.intro-langbtn:hover { background: rgba(200,149,108,0.1); }
.intro-langbtn.active {
  background: var(--accent, #c8956c); color: white; border-color: var(--accent, #c8956c);
}
.intro-pane[hidden] { display: none; }
.intro-h {
  text-align: center; font-size: 26px;
  color: var(--accent, #c8956c); margin: 4px 0 4px;
}
.intro-subtitle {
  text-align: center; font-size: 16px;
  color: var(--accent-dark, #5a4a30); font-style: italic;
  margin: 0 0 18px; font-family: var(--font-quran);
}
.intro-pane[lang="en"] .intro-subtitle,
.intro-pane[lang="fr"] .intro-subtitle { font-family: inherit; }
.intro-pane p {
  font-size: 16px; line-height: 1.85; margin: 12px 0;
}
.intro-section {
  background: rgba(200,149,108,0.06);
  border: 1px solid rgba(200,149,108,0.18);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 18px 0;
}
.intro-h3 {
  font-size: 16px; font-weight: bold;
  color: var(--accent-dark, #5a4a30);
  margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px dashed rgba(200,149,108,0.25);
}
.intro-tabs { list-style: none; margin: 0; padding: 0; }
.intro-tabs li {
  margin: 8px 0; padding: 6px 0; font-size: 14.5px;
  line-height: 1.7; display: flex; gap: 10px;
}
.intro-tabicon {
  font-size: 18px; flex-shrink: 0; min-width: 22px;
  text-align: center;
}
.intro-tabs strong { color: var(--accent-dark, #5a4a30); }
.intro-note {
  font-size: 13.5px; color: var(--text-light, #6e5510);
  font-style: italic; line-height: 1.6;
}
.intro-actions {
  display: flex; gap: 12px; justify-content: space-between;
  align-items: center; margin-top: 22px; padding-top: 16px;
  border-top: 1px dashed rgba(200,149,108,0.3);
  flex-wrap: wrap;
}
.intro-link {
  font-size: 13.5px; color: var(--accent, #c8956c);
  text-decoration: underline;
}
.intro-link:hover { color: var(--accent-dark, #5a4a30); }
.intro-continue {
  background: var(--accent, #c8956c); color: white;
  border: none; padding: 10px 22px; border-radius: 6px;
  font-size: 15px; cursor: pointer;
  font-family: inherit; font-weight: bold;
  transition: background 0.15s ease;
}
.intro-continue:hover { background: var(--accent-dark, #5a4a30); }
@media (max-width: 600px) {
  .intro-modal-card { padding: 20px 18px 16px; max-height: 92vh; }
  .intro-h { font-size: 22px; }
  .intro-subtitle { font-size: 14px; }
  .intro-section { padding: 10px 12px; }
}


/* ─── EXPLORATION (private, gated) CSS (injected when EXPLORATION_VISIBLE) ─── */

/* Interpretation tab — same visual rhythm as the other tabs (no
   underline until selected, then solid line). Color is teal so the
   chosen state is visually distinct from التفسير (mint) and
   قراءتان (warm). The earlier dotted-when-inactive style signalled
   "exploratory / private" — removed now that the section is public. */
.tab-btn[data-tab="interpretation"].active {
  background: #e8f0ee;
  color: #2c6557;
  border-color: #2c6557;
}
html[data-theme="dark"] .tab-btn[data-tab="interpretation"].active {
  background: #1d2a26;
  color: #7cc4b0;
  border-color: #7cc4b0;
}

/* Section header */
.section-interpretation {
  font-family: var(--font-arabic);
  font-size: 1.2em;
  color: #2c6557;
  margin-block: 16px 12px;
  padding-bottom: 4px;
  border-bottom: 1px dashed #b9d4cc;
}
html[data-theme="dark"] .section-interpretation {
  color: #7cc4b0;
  border-bottom-color: #2c4a42;
}

/* Speculation move (the fifth «تخمينات» / Speculations / Spéculations
   subsection). Wraps top + bottom warnings around speculative content.
   Styled as a clearly marked interlude — not alarming, but visually
   distinct from the four grounded moves so the reader knows the
   register has shifted. */
.speculation-warning,
.speculation-warning-end {
  background: #fff8e1;
  border-inline-start: 3px solid #d4a03b;
  color: #6e5510;
  padding: 8px 14px;
  margin-block: 10px;
  border-radius: 3px;
  font-size: 0.92em;
  font-style: italic;
}
.speculation-warning-end {
  background: #f7efe0;
  border-inline-start-color: #b88a30;
}
html[data-theme="dark"] .speculation-warning,
html[data-theme="dark"] .speculation-warning-end {
  background: #2e2918;
  border-inline-start-color: #b88a30;
  color: #d4ba6e;
}