/* =========================================================================
   13.2 Digital Marginalia (Phase 13 Delight Layer)
   =========================================================================

   v2 — real urhema_tokens.css confirmed; adds the JS-enhanced Margin Rail.

   TOKEN FIX: --ub-accent-300 doesn't exist in the real urhema_tokens.css
   (only --ub-accent-100 / 500 / 700 / contrast do) — the previous file's
   .is-highlight border was quietly always using its fallback, and even if
   it hadn't, it would never have adapted across dark/sepia themes since it
   wasn't drawing from a real themed token. Replaced with the same
   accent-500 / accent-100 / accent-700 trio .bib-highlight-block already
   uses elsewhere on this page, so highlighted marginalia now matches the
   highlighted-passage look instead of introducing an undefined color.
   Every other value below is now the real, confirmed token.

   IN-FLOW BASELINE (unconditional): what every reader gets — JS off,
   narrow viewport, or outside Immersive mode. See the bottom of this file
   for the fix history on why this is deliberately the only thing that
   applies unless bible-marginalia-rail.js says otherwise.
   ========================================================================= */

.ub-marginalia-anchor {
    position: relative;
    /* No display override. Stays inline for verses embedded in continuous
       prose (data-layout="paragraph", the default) and becomes block
       automatically under data-layout="verse" via bible_chapter.css's own
       existing toggle rule — forcing display:block here unconditionally
       was the bug that put every verse on its own line at all times. */
}

.ub-marginalia-mark {
    display: block;
    max-width: 32rem; /* keeps the card readable instead of stretching the
                          full ~600px article column on wide desktop views */
    background: var(--ub-paper-sunken);
    border-left: 3px solid var(--ub-accent-500);
    padding: var(--ub-space-3) var(--ub-space-4);
    margin: var(--ub-space-3) 0 var(--ub-space-6) 0;
    border-radius: var(--ub-radius-sm);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    line-height: var(--ub-leading-body);
    color: var(--ub-ink-muted);
    box-shadow: var(--ub-shadow-soft);
}

    .ub-marginalia-mark.is-highlight {
        border-left-color: var(--ub-accent-500);
        background: var(--ub-accent-100);
        color: var(--ub-accent-700);
    }

/* Verse-layout mode: each verse is already its own block (bible_chapter.css's
   own [data-layout="verse"] rule), so the note doesn't need as much of its
   own top margin — it isn't sharing space with flowing prose's extra
   line-height the way it does in paragraph mode. */
.bib-reader[data-layout="verse"] .ub-marginalia-mark {
    margin-top: var(--ub-space-2);
}

/* =========================================================================
   JS-ENHANCED MARGIN RAIL
   =========================================================================
   Set ONLY by bible-marginalia-rail.js, ONLY when body.is-immersive-active
   is on and the viewport clears the same width bible-marginalia-rail.js
   checks (RAIL_MIN_WIDTH there — keep the two numbers in sync). Outside
   Immersive mode there is no real margin next to .bib-article at any
   width: .bib-sidebar occupies that third grid column unconditionally, so
   the rail would just overlap the Translation / Display Settings cards —
   which is exactly the bug this whole file started from.

   `left` is set inline, in pixels, by the script — measured against
   .bib-article's real right edge, not the verse's own narrow anchor box,
   because a static percentage can't reliably reach the true margin from an
   anchor that's just a few words inline in flowing prose. `top: 0` needs
   no script: an absolutely positioned box inside an inline,
   position:relative anchor is already contained by that anchor's own
   bounding box, so top:0 lines up with wherever that specific verse
   starts, for free.

   The @media gate here is a deliberate second guard, not a duplicate of
   the script's own check: if the attribute is ever present at a narrower
   width for any reason, this still refuses to render the overlapping
   layout.
   ========================================================================= */
@media (min-width: 1440px) {
    .bib-reader[data-marginalia-rail="active"] .ub-marginalia-mark {
        position: absolute;
        top: 0;
        /* left: set inline by bible-marginalia-rail.js */
        width: 200px;
        max-width: 200px;
        margin: 0;
        padding: var(--ub-space-3);
        font-size: var(--ub-text-xs);
        border-left: none;
        border-top: 2px solid var(--ub-accent-500);
        background: transparent;
        box-shadow: none;
        z-index: var(--ub-z-popover, 80);
    }

        .bib-reader[data-marginalia-rail="active"] .ub-marginalia-mark.is-highlight {
            border-top-color: var(--ub-accent-500);
            background: transparent;
        }
}