/* Intro buttons docked to the right of the Bible nav, keeping the rest centered. */
.bible-nav-right {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.bible-nav-right .intro-nav-btn {
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
}

/* ───── Reader controls menu (chevron + dropdown) ─────
   Owner ruling 2026-09-04: the menu is the HOME of these controls on
   EVERY width — the row of individual nav-btn-overflow buttons crowded
   and overlapped on some screens, so they are always collapsed behind
   the chevron now. The chevron sources the same actions by triggering
   .click() on the underlying (hidden) buttons — state, gating, and
   intro availability all keep flowing through the one real button.
*/
.nav-btn-overflow { display: none !important; }
.nav-overflow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0.3rem 0.55rem;
}
/* Menu uses position:fixed (positioned via JS at open time from the chevron's
   bounding rect) so it escapes any parent stacking-context and overflow issues. */
.nav-overflow-menu {
    position: fixed;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    z-index: 20000;
    overflow: hidden;
}
.nav-overflow-menu[hidden] { display: none; }
.nav-overflow-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-primary);
    font-family: inherit;
    white-space: nowrap;
}
.nav-overflow-item:hover { background: rgba(123, 104, 174, 0.10); }
.nav-overflow-item[hidden] { display: none; }
.nav-overflow-icon { font-size: 1rem; display: inline-block; width: 1.2rem; text-align: center; }

@media (max-width: 480px) {
    /* In-flow on phones (not absolute) — the chevron sits after the
       nav-container in the flex row, so it can never overlap the → button. */
    .bible-nav-right {
        position: static;
        transform: none;
        gap: 0.25rem;
        margin-left: 0.35rem;
    }
}

/* ============================================================================
   Intro Overlay — modal scaffolding (frosted header + body that hosts the
   verse-commentary-style layout: tab bar → per-source pane → entry header → text).
   The inner body re-uses .commentary-* classes from styles.css so the styling
   matches the verse-commentary panel exactly.
   ============================================================================ */

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: none;
}

.intro-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.intro-overlay-content {
    position: absolute;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 92vw);
    max-height: 90vh;
    background: var(--highlight, #fdf8e7);
    /* corners: .modal-shell (css/modal-header.css) */
    border-left: 3px solid var(--gold);
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.16),
        0 32px 64px rgba(0, 0, 0, 0.20);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header bar: the one header bar (css/modal-header.css) — nothing of its own. */

.intro-overlay-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.25rem 1.25rem;
    line-height: 1.6;
    color: var(--text-primary, #333);
    font-size: 0.85rem;
}

/* ───── ISBE self-referencing TOC ───── */
.isbe-intro .isbe-preamble {
    font-style: italic;
    color: var(--text-secondary, #666);
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
}

.isbe-toc {
    list-style: none;
    padding: 0.6rem 0.85rem;
    margin: 0 0 1rem;
    background: rgba(212, 160, 23, 0.06);
    border-left: 3px solid var(--gold);
    border-radius: 0 6px 6px 0;
    font-size: 0.82rem;
}
.isbe-toc li {
    margin: 0.18rem 0;
    line-height: 1.35;
}
.isbe-toc-d0 { margin-top: 0.5rem !important; font-weight: 700; }
.isbe-toc-d0:first-child { margin-top: 0 !important; }
.isbe-toc-d1 { padding-left: 1rem; }
.isbe-toc-d2 { padding-left: 2rem; font-size: 0.78rem; }
.isbe-toc-d3 { padding-left: 3rem; font-size: 0.76rem; color: var(--text-secondary, #555); }
.isbe-toc-d4 { padding-left: 4rem; font-size: 0.74rem; color: var(--text-secondary, #777); }

.isbe-toc a {
    color: var(--gold-text);
    text-decoration: none;
    border-bottom: 1px dotted rgba(123, 79, 1, 0.35);
}
.isbe-toc a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.isbe-toc-orphan {
    color: var(--text-secondary, #999);
    cursor: default;
}

/* Reset .isbe-body display inside the intro overlay — the same class is used
   as the flex layout container for the ISBE Modal. Without this scoped
   override, structured book intros (Numbers, Genesis, etc.) render their
   sections horizontally as flex children. */
.intro-overlay-body .isbe-body {
    display: block;
}

.isbe-body h3.isbe-section {
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-text);
    margin: 1.4rem 0 0.5rem;
    padding-top: 0.2rem;
    scroll-margin-top: 0.5rem;
}
.isbe-body p {
    margin: 0 0 0.75rem;
}

/* Right-click selection menu */
.intro-selection-menu {
    position: fixed;
    background: var(--surface);
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 10200;
    overflow: hidden;
    min-width: 160px;
}
.intro-menu-item {
    display: block;
    width: 100%;
    padding: 0.55rem 0.9rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-primary);
    font-family: inherit;
}
.intro-menu-item:hover { background: rgba(123,104,174,0.10); }

/* Send-to-study feedback toast */
.intro-flash-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 0.55rem 1rem;
    border-radius: 18px;
    font-size: 0.85rem;
    z-index: 10300;
    pointer-events: none;
    animation: intro-toast-fade 1.5s ease;
}
@keyframes intro-toast-fade {
    0% { opacity: 0; transform: translate(-50%, 8px); }
    15% { opacity: 1; transform: translate(-50%, 0); }
    85% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -8px); }
}

/* Mobile */
@media (max-width: 768px) {
    .intro-overlay-content {
        top: 0;
        left: 0;
        transform: none;
        width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        border-left: none;
    }
    .intro-overlay-body { padding: 0.6rem 0.85rem; font-size: 0.85rem; }
}