/* 
 * UBible Chapter View Stylesheet
 * Uses the site's real --ub-* design tokens (paper/ink/line/accent/shadow),
 * NOT hardcoded colors or a second parallel token vocabulary. This file
 * previously used generic names (--bg-surface, --border-color, --text-primary,
 * etc.) carried over verbatim from the prototype, each with a light-mode
 * hardcoded fallback. Under [data-theme="dark"], since the real theme CSS
 * never defines THOSE names, every fallback fired — that's the white-card/
 * dim-text bug. Every color below is now one of the 55 --ub-* tokens the rest
 * of the site already uses, so this page follows dark/sepia/light exactly
 * like everywhere else, automatically, with no page-specific override needed
 * when a theme changes.
 *
 * Fallback values (the second argument to every var()) were corrected against
 * the real urhema_tokens.css / urhema_theme.css — an earlier pass here had the
 * right TOKEN NAMES but fallback hex values from a since-superseded draft
 * (a petrol-blue accent family, --ub-accent-500: #2B5A72) rather than the real
 * coral accent (#FF563C) confirmed live in the actual tokens file. Since every
 * reference here always used var(--ub-x, fallback) and the real --ub-x tokens
 * do exist, this was never a live rendering bug — the fallback only matters if
 * the token somehow isn't loaded — but it's fixed now so nothing here is
 * misleading to read.
 *
 * Token mapping used throughout this file:
 *   page background / sticky label backdrop  -> --ub-paper
 *   card backgrounds (buttons, cards, chips)  -> --ub-paper-raised
 *   input/select backgrounds (sunken/inset)   -> --ub-paper-sunken
 *   hover backgrounds                         -> --ub-paper-sunken
 *   borders                                   -> --ub-line
 *   primary reading/body text                 -> --ub-ink
 *   secondary text (labels)                   -> --ub-ink-soft
 *   muted text (verse numbers, captions)       -> --ub-ink-muted
 *   accent (links, current states, buttons)   -> --ub-accent-500
 *   accent hover                              -> --ub-accent-700
 *   accent tint background (highlight block)  -> --ub-accent-100
 *   text on accent tint background             -> --ub-accent-700
 *   text on a FILLED accent background         -> --ub-accent-contrast
 *   shadows                                   -> --ub-shadow-float
 */

.bib-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.bib-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: var(--ub-rule, 1px solid var(--ub-line, #E5E7EB));
}

.bib-breadcrumbs {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--ub-ink-muted, #5B6472);
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

    .bib-breadcrumbs a:hover {
        text-decoration: underline;
    }

.bib-chapter-switcher {
    display: flex;
    gap: 0.5rem;
}

.bib-icon-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    border: 1px solid var(--ub-line, #E5E7EB);
    background: var(--ub-paper-raised, #FFFFFF);
    color: var(--ub-ink, #111827);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

    .bib-icon-btn:hover {
        border-color: var(--ub-accent-500, #FF563C);
    }

    /* Genesis 1 has no previous chapter; Revelation 22 has no next. Rendered as a
       <span>, not a disabled <button>, since anchors can't carry a disabled attribute. */
    .bib-icon-btn.is-disabled {
        opacity: 0.4;
        cursor: default;
        pointer-events: none;
    }

/* Layout Grid
   ----------------------------------------------------------------------------
   Static positioning (no sticky). A `position: sticky` element fails silently if
   ANY ancestor has overflow hidden/auto/scroll/clip, and when it fails inside a
   grid cell it collapses to the bottom of a tall row — which is the "sidebars
   only at the bottom of the page" bug from an earlier pass. Static keeps them
   in their columns from the top. minmax(0, ...) on every track stops the
   article's intrinsic width from blowing out its track and shoving the
   sidebars off.
   ---------------------------------------------------------------------------- */
.bib-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .bib-layout {
        grid-template-columns: 240px minmax(0, 1.9fr) minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }

    .bib-book-nav {
        grid-column: 1 / 2;
    }

    .bib-article {
        grid-column: 2 / 3;
    }

    .bib-sidebar {
        grid-column: 3 / 4;
    }
}

@media (max-width: 1023.98px) {
    /* Book navigator is a desktop reading-rail affordance. Prev/next chapter
       controls stay available at every breakpoint via the top bar and footer. */
    .bib-book-nav {
        display: none;
    }
}

/* Left Sidebar: Book Navigator */
.bib-book-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.bib-book-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--ub-line, #E5E7EB);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    background: var(--ub-paper-sunken, #F3F4F6);
}

    .bib-book-filter i {
        color: var(--ub-ink-muted, #5B6472);
        font-size: 0.75rem;
    }

    .bib-book-filter input {
        border: none;
        background: transparent;
        outline: none;
        font-size: 0.75rem;
        color: var(--ub-ink, #111827);
        width: 100%;
        min-width: 0;
    }

/* The book list scrolls within its own rail so a long book (Psalms = 150 chapters)
   doesn't push the reading column's height. This is an internal scroll container,
   NOT an ancestor of the article — so it can't break sticky/anything upstream.

   Scrollbar color: browsers draw the default OS scrollbar (usually mid-gray),
   which reads as a bright, out-of-place bar against a dark paper background —
   the same class of bug as the earlier white-card issue, just from the browser
   chrome instead of our own CSS. Styled with --ub-line-strong / --ub-ink-muted
   rather than a hardcoded gray, so it's correctly dim on light theme, correctly
   light-on-dark on dark theme, and correct on sepia too — no theme-specific
   override needed, same as every other color in this file. */
.bib-book-list {
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    padding-right: 0.5rem;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--ub-line-strong, #D1D5DB) transparent;
}

    /* WebKit / Blink (Chrome, Edge, Safari) */
    .bib-book-list::-webkit-scrollbar {
        width: 6px;
    }

    .bib-book-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .bib-book-list::-webkit-scrollbar-thumb {
        background-color: var(--ub-line-strong, #D1D5DB);
        border-radius: 999px;
    }

        .bib-book-list::-webkit-scrollbar-thumb:hover {
            background-color: var(--ub-ink-muted, #5B6472);
        }

.bib-testament-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ub-ink-muted, #5B6472);
    padding: 0.75rem 0.25rem 0.375rem;
    position: sticky;
    top: 0;
    background: var(--ub-paper, #FAFAFA);
    z-index: 1;
}

    .bib-testament-label:first-child {
        padding-top: 0.25rem;
    }

.bib-book-row + .bib-testament-label {
    margin-top: 0.5rem;
}

.bib-book-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ub-ink-muted, #5B6472);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

    .bib-book-link:hover {
        background-color: var(--ub-paper-sunken, #F3F4F6);
        color: var(--ub-ink, #111827);
    }

    .bib-book-link.is-current {
        background-color: var(--ub-paper-raised, #FFFFFF);
        border-color: var(--ub-line, #E5E7EB);
        color: var(--ub-accent-500, #FF563C);
        font-weight: 700;
        box-shadow: var(--ub-shadow-float, 0 12px 30px -8px rgba(17, 24, 39, 0.16));
    }

.bib-book-caret {
    font-size: 0.625rem;
    opacity: 0.8;
}

.bib-chapter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    padding: 0.5rem 0.25rem 0.75rem;
}

.bib-chapter-num {
    display: grid;
    place-items: center;
    padding: 0.375rem 0;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ub-ink-muted, #5B6472);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

    .bib-chapter-num:hover {
        background-color: var(--ub-paper-sunken, #F3F4F6);
        color: var(--ub-ink, #111827);
    }

    .bib-chapter-num.is-current {
        background-color: var(--ub-accent-500, #FF563C);
        color: var(--ub-accent-contrast, #FFFFFF);
    }

/* Article & Typography */
.bib-head {
    margin-bottom: 2.5rem;
    text-align: center;
}

.bib-eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ub-accent-500, #FF563C);
    margin-bottom: 0.25rem;
}

.bib-title {
    font-family: var(--ub-font-heading, 'Merriweather', Georgia, serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--ub-ink, #111827);
    margin: 0 0 0.5rem;
}

.bib-cite {
    font-size: 0.875rem;
    color: var(--ub-ink-muted, #5B6472);
    margin: 0;
}

/* ---- Prose reading flow --------------------------------------------------
   Verses run together as continuous text; the verse number is an inline
   superscript, not a gutter. --bib-reading-size is the single knob the text-
   size control turns (see [data-text-size] below), so line-height stays
   proportional at every size. */
.bib-chapter {
    --bib-reading-size: 1.1875rem;   /* md default (~19px) */
}

.bib-prose {
    font-family: var(--ub-font-body, 'Merriweather', Georgia, serif);
    font-size: var(--bib-reading-size);
    line-height: 1.85;
    color: var(--ub-ink, #111827);
    margin: 0 0 1.5rem;
    text-align: left;
}

    .bib-prose:last-child {
        margin-bottom: 0;
    }

.bib-verse-num {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.7em;
    font-weight: 700;
    color: var(--ub-ink-muted, #5B6472);
    margin-right: 0.15rem;
    user-select: none;
    vertical-align: super;
    line-height: 0;
}

/* Contiguous highlighted passage: one filled block spanning the cited verses,
   rather than a box per verse. The block sits in the prose flow between the
   before/after paragraphs. */
.bib-highlight-block {
    background-color: var(--ub-accent-100, #FFE0D9);
    border-left: 3px solid var(--ub-accent-500, #FF563C);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-inline: -1.25rem;
}

    .bib-highlight-block .bib-verse {
        color: var(--ub-accent-700, #E04A32);
        font-weight: 600;
    }

    .bib-highlight-block .bib-verse-num {
        color: var(--ub-accent-500, #FF563C);
    }

/* ---- Text-size control ---------------------------------------------------
   The segmented buttons write data-text-size onto .bib-reader; these rules
   read it. Three steps, proportional to the md baseline above. */
.bib-reader[data-text-size="sm"] .bib-chapter {
    --bib-reading-size: 1.0625rem;   /* ~17px */
}

.bib-reader[data-text-size="lg"] .bib-chapter {
    --bib-reading-size: 1.375rem;    /* ~22px */
}

/* ---- Verse-numbers toggle ------------------------------------------------ */
.bib-reader[data-verse-numbers="off"] .bib-verse-num {
    display: none;
}

/* ---- Paragraph-format toggle ---------------------------------------------
   "off" breaks the continuous prose into one verse per line. Each .bib-verse
   becomes its own block; the highlight block's verses do the same. */
.bib-reader[data-layout="verse"] .bib-verse {
    display: block;
    margin-bottom: 0.85rem;
}

    .bib-reader[data-layout="verse"] .bib-verse:last-child {
        margin-bottom: 0;
    }

/* Sidebar Cards */
.bib-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.bib-card {
    background-color: var(--ub-paper-raised, #FFFFFF);
    border: 1px solid var(--ub-line, #E5E7EB);
    border-radius: 12px;
    padding: 1.25rem;
}

.bib-card-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--ub-ink-muted, #5B6472);
    margin-bottom: 0.75rem;
}

.bib-select {
    width: 100%;
    padding: 0.625rem;
    border-radius: 8px;
    border: 1px solid var(--ub-line, #E5E7EB);
    background-color: var(--ub-paper-sunken, #F3F4F6);
    color: var(--ub-ink, #111827);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.bib-setting-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bib-setting-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ub-ink-muted, #5B6472);
}

.bib-segmented {
    display: flex;
    background: var(--ub-paper-sunken, #F3F4F6);
    border: 1px solid var(--ub-line, #E5E7EB);
    border-radius: 8px;
    padding: 3px;
}

    .bib-segmented button {
        flex: 1;
        padding: 6px;
        border-radius: 6px;
        font-family: var(--ub-font-heading, 'Merriweather', Georgia, serif);
        background: transparent;
        border: none;
        color: var(--ub-ink-muted, #5B6472);
        cursor: pointer;
        transition: all 0.2s;
    }

        /* The three size buttons preview their own effect: small / medium / large A. */
        .bib-segmented button[data-text-size="sm"] { font-size: 0.8125rem; }
        .bib-segmented button[data-text-size="md"] { font-size: 1rem; }
        .bib-segmented button[data-text-size="lg"] { font-size: 1.25rem; }

        .bib-segmented button.active {
            background: var(--ub-paper-raised, #FFFFFF);
            color: var(--ub-ink, #111827);
            font-weight: bold;
            box-shadow: var(--ub-shadow-float, 0 12px 30px -8px rgba(17, 24, 39, 0.16));
        }

/* Display-settings checkboxes */
.bib-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ub-line, #E5E7EB);
}

.bib-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.bib-toggle-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ub-ink, #111827);
}

.bib-toggle input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--ub-accent-500, #FF563C);
    cursor: pointer;
}

.bib-toggle.is-disabled {
    cursor: default;
    opacity: 0.55;
}

    .bib-toggle.is-disabled .bib-toggle-label {
        color: var(--ub-ink-muted, #5B6472);
    }

    .bib-toggle.is-disabled input[type="checkbox"] {
        cursor: default;
    }

/* From Your Studies card */
.bib-studies-card {
    border-left: 4px solid var(--ub-accent-500, #FF563C);
}

.bib-studies-passage {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ub-ink, #111827);
    margin-bottom: 0.25rem;
}

.bib-studies-lesson {
    font-size: 0.75rem;
    color: var(--ub-ink-muted, #5B6472);
    margin-bottom: 0.875rem;
}

.bib-studies-btn {
    display: block;
    text-align: center;
    padding: 0.5rem;
    border-radius: 8px;
    background-color: var(--ub-accent-500, #FF563C);
    color: var(--ub-accent-contrast, #FFFFFF);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s;
}

    .bib-studies-btn:hover {
        background-color: var(--ub-accent-700, #E04A32);
    }

/* Discussion & Footer */
.bib-discussion-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ub-line, #E5E7EB);
}

.bib-section-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ub-ink-muted, #5B6472);
    margin-bottom: 1.5rem;
}

.bib-foot {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ub-line, #E5E7EB);
}

.bib-foot-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bib-btn-secondary {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--ub-line, #E5E7EB);
    background: var(--ub-paper-raised, #FFFFFF);
    color: var(--ub-ink, #111827);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

    .bib-btn-secondary:hover {
        border-color: var(--ub-accent-500, #FF563C);
    }

    .bib-btn-secondary.is-disabled {
        opacity: 0.4;
        cursor: default;
        pointer-events: none;
    }

.bib-licence {
    font-size: 0.75rem;
    color: var(--ub-ink-muted, #5B6472);
    text-align: center;
    margin: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* =========================================================================
   13.1 Immersive Reading Mode (Bible Chapter) - CORRECTED
   ========================================================================= */

.bib-layout {
    transition: grid-template-columns var(--ub-duration-slow, 0.5s) var(--ub-ease, ease), gap var(--ub-duration-slow, 0.5s) var(--ub-ease, ease);
}

.bib-article {
    transition: max-width var(--ub-duration-slow, 0.5s) var(--ub-ease, ease);
}

.bib-nav-bar,
.bib-book-nav,
.bib-sidebar,
.bib-foot,
.bib-discussion-section,
.bib-head {
    transition: opacity var(--ub-duration-slow, 0.5s) var(--ub-ease, ease);
}

/* 1. Force the grid to collapse the side columns to 0px */
body.is-immersive-active .bib-layout {
    grid-template-columns: 0px minmax(0, 1fr) 0px !important;
    gap: 0 !important;
}

/* 2. Center the main article text to an optimal reading measure */
body.is-immersive-active .bib-article {
    max-width: 66ch !important;
    margin-inline: auto !important;
}

/* 3. Hide the Sidebars (Horizontal Collapse) 
      overflow: hidden stops internal padding from propping the 0px grid open */
body.is-immersive-active .bib-book-nav,
body.is-immersive-active .bib-sidebar {
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* 4. Hide Header/Footer/Discussion (Vertical Collapse) */
body.is-immersive-active .bib-nav-bar,
body.is-immersive-active .bib-foot,
body.is-immersive-active .bib-discussion-section,
body.is-immersive-active .bib-head {
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
}

/* 5. Drop-cap for the first verse block */
body.is-immersive-active .bib-chapter > .bib-prose:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.1em;
    padding-top: 0.1em;
    color: var(--ub-accent-700);
    font-family: var(--ub-font-heading);
    font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
    .bib-layout,
    .bib-article,
    .bib-nav-bar,
    .bib-book-nav,
    .bib-sidebar,
    .bib-foot,
    .bib-discussion-section,
    .bib-head {
        transition: none !important;
    }
}
/* Floating Toggle Button (Ported from Lesson View) */
.ub-immersive-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--ub-paper-raised, #ffffff);
    border: 1px solid var(--ub-line-strong, #e5e7eb);
    border-radius: 9999px;
    box-shadow: var(--ub-shadow-float, 0 4px 6px rgba(0,0,0,0.05));
    color: var(--ub-ink-muted, #6b7280);
    font-family: system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .ub-immersive-toggle:hover,
    .is-immersive-active .ub-immersive-toggle {
        opacity: 1;
        color: var(--ub-accent-700, #FF563C);
        border-color: var(--ub-accent-500, #FF563C);
    }

/* On Scroll: Fade out the toggle and the global site header */
.is-immersive-scrolling .ub-immersive-toggle,
.is-immersive-scrolling .ub-site-header {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(-100%);
}

.ub-site-header {
    transition: opacity 0.5s ease, transform 0.5s ease;
}