/* ══════════════════════════════════════════════════════════════════════════════
   PPEA — Edition Editorial Stylesheet
   ══════════════════════════════════════════════════════════════════════════════
   Editorial overlay features: tools and display modes that sit above the
   base text rendering.  Loaded on text and intro pages (html_head_text.html).

   Covers: dictionary lookup toolbar, Show Tags mode, info popover, manuscript
   image indicator, icon sizes, initial letter (dropcap) styling, note
   visibility rules, and layout clearfixes for head/trailer initials.

   Depends on edition-specific tokens declared in edition_passage.css (§1).
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── §18  Dictionary lookup toolbar ───────────────────────────────────────── */
#dict-toolbar {
    position: absolute;
    z-index: 220;   /* dict-toolbar tier — above comparison panel (200) */
    display: none;
    gap: 0.375rem;
}

#dict-toolbar.displayed {
    display: flex;
    animation: dict-toolbar-in 0.12s ease-out;
}

@keyframes dict-toolbar-in {
    from { opacity: 0; translate: 0 4px; }
    to   { opacity: 1; translate: 0 0; }
}

#dict-toolbar a {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 2rem;
    border: 1.5px solid var(--color-accent);
    background: var(--color-bg);
    color: var(--color-accent);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}

#dict-toolbar a:hover,
#dict-toolbar a:focus-visible {
    background: var(--color-accent);
    color: var(--color-text-on-dark);
    outline: none;
}

/* Bottom sheet on narrow viewports — avoids conflict with native iOS/Android
   selection callout, which appears above the selection. */
@keyframes dict-toolbar-sheet-in {
    from { translate: 0 100%; }
    to   { translate: 0 0; }
}

@media (max-width: 600px) {
    #dict-toolbar.displayed {
        position: fixed;
        inset: auto 0 40px 0;   /* sit above the 40px nav toolbar */
        top: auto;
        z-index: 220;           /* dict-toolbar tier — above comparison panel (200) */
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
        background: var(--color-bg-glass);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--color-border);
        border-radius: 1rem 1rem 0 0;
        filter: drop-shadow(0 -4px 16px rgba(0, 0, 0, 0.12));
        animation: dict-toolbar-sheet-in 0.2s ease-out;
        gap: 0.5rem;
    }

    #dict-toolbar a {
        text-align: center;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        border-radius: 0.5rem;
        filter: none;
    }

    /* Track the nav toolbar sliding in/out (entry animation uses translate,
       not bottom, so this transition doesn't interfere with it). */
    #dict-toolbar.displayed { transition: bottom 0.25s ease; }

    /* Nav toolbar hidden — drop dict sheet flush to bottom */
    body:has(.toolbar-ribbon.toolbar--hidden) #dict-toolbar.displayed {
        bottom: 0;
    }
}


/* ── §21  Tags (Show Tags mode) ──────────────────────────────────────────── */
/* Tags are rendered via CSS ::before/::after pseudo-elements on [data-name].
   The data-name attribute is stamped on every output element by the XSLT
   src-meta attribute-set.  Toggled by the #tags-toggle checkbox in the
   toolbar; body:has() propagates the checked state to .passage-container. */

/* Tags pseudo-elements are hidden by default and revealed only when
   #tags-toggle is checked (see "Shown when tags mode is active" below).
   Every element with data-name gets ::before/<name>> and :after</name>>
   suppressed here so they don't appear in normal reading mode. */
[data-name]::before,
[data-name]::after {
    display: none;
}

/* .ed-mark spans are real DOM children, not pseudo-elements, so they are
   unaffected by the [data-name]::before suppression above.
   Hide them in tags mode: tag markers convey the same structural information,
   and the editorial characters are not part of the XML source being visualised. */
body:has(#tags-toggle:checked) .passage-container .ed-mark { display: none; }

/* Shown when tags mode is active */
body:has(#tags-toggle:checked) .passage-container [data-name]::before {
    all: initial;
    display: inline;
    content: "<" attr(data-name) ">";
    font-size: 0.75em;
    font-family: monospace;
    color: #666;
    vertical-align: baseline;
}
body:has(#tags-toggle:checked) .passage-container [data-name]::after {
    all: initial;
    display: inline;
    content: "</" attr(data-name) ">";
    font-size: 0.75em;
    font-family: monospace;
    color: #666;
    vertical-align: baseline;
}
/* text-decoration is painted by the parent across all inline descendants —
   only inline-block creates a new formatting context that escapes it.
   Scoped to elements with text-decoration; update when adding new ones.
   See: .del (line-through), .hi.ul (underline). */
body:has(#tags-toggle:checked) .passage-container :is(.del, .hi.ul)[data-name]::before,
body:has(#tags-toggle:checked) .passage-container :is(.del, .hi.ul)[data-name]::after {
    display: inline-block;
}

/* Self-closing elements: show /> instead of paired close tag */
body:has(#tags-toggle:checked) .passage-container
    :is([data-name="gap"], [data-name="milestone"], [data-name="pb"],
        [data-name="lb"], [data-name="addSpan"], [data-name="delSpan"],
        [data-name="handShift"], [data-name="space"], [data-name="anchor"])::before {
    content: "<" attr(data-name) "/>";
}
body:has(#tags-toggle:checked) .passage-container
    :is([data-name="gap"], [data-name="milestone"], [data-name="pb"],
        [data-name="lb"], [data-name="addSpan"], [data-name="delSpan"],
        [data-name="handShift"], [data-name="space"], [data-name="anchor"])::after {
    content: none;
}

/* Grid-container tags (div1 etc.): pseudo-elements on grid containers
   become grid items and disrupt row numbering. Suppress them on the
   reading-grid itself and instead show tags on the .text-col, which is
   positioned within the [text] grid column track. The text-col carries
   data-src-name (set by XSLT) holding the container's TEI element name. */
.reading-grid[data-name]::before,
.reading-grid[data-name]::after {
    content: none !important;
}
body:has(#tags-toggle:checked) .text-col[data-src-name] {
    position: relative;
    padding-top: 1.2em;
    padding-bottom: 1.2em;
}
body:has(#tags-toggle:checked) .text-col[data-src-name]::before,
body:has(#tags-toggle:checked) .text-col[data-src-name]::after {
    position: absolute;
    left: 0;
    font-size: 0.75em;
    font-family: monospace;
    color: #666;
}
body:has(#tags-toggle:checked) .text-col[data-src-name]::before {
    content: "<" attr(data-src-name) ">";
    top: 0;
}
body:has(#tags-toggle:checked) .text-col[data-src-name]::after {
    content: "</" attr(data-src-name) ">";
    bottom: 0;
}
/* Suppress tags on display:contents elements (lg, witness-reading) —
   their pseudo-elements become orphaned grid items. Tags are shown via
   dedicated container divs (.lg-tag-row, .lg-boundary) emitted by XSLT. */
.lg[data-name]::before, .lg[data-name]::after,
.witness-reading[data-name]::before, .witness-reading[data-name]::after,
.lg-tag-row[data-name]::after, .lg-boundary[data-name]::after {
    content: none !important;
}

/* lg tag containers: dedicated divs for tags-mode markers.
   - .lg-tag-row: first-lg open and last-lg close (own rows).
   - .lg-boundary: middle lg-gap that doubles as tag container. */
.lg-tag-row { display: none; }
body:has(#tags-toggle:checked) .lg-tag-row {
    display: block;
    font-size: 0.75em;
    font-family: monospace;
    color: #666;
    grid-column: 1 / -1;
}
body:has(#tags-toggle:checked) .passage-container .lg-tag-open[data-name]::before {
    content: "<" attr(data-name) ">";
}
body:has(#tags-toggle:checked) .passage-container .lg-tag-close[data-name]::before {
    content: "</" attr(data-name) ">";
}
/* Middle boundaries: lg-gap div shows </lg><lg>.
   Selector includes .passage-container to match specificity of the general
   [data-name]::before rule. */
body:has(#tags-toggle:checked) .passage-container .lg-boundary[data-name]::before {
    content: "</" attr(data-name) "><" attr(data-name) ">";
}
/* In tags mode, ensure collapsed lg-gaps (milestone-adjacent) still have
   enough height to display the boundary tag marker without overlapping. */
body:has(#tags-toggle:checked) .lg-gap.lg-boundary {
    min-height: 1lh;
}

/* Tags mode: prevent horizontal overflow from tag markers.
   Grid items default to min-width: auto; override so text can wrap/shrink. */
body:has(#tags-toggle:checked) .text-col {
    min-width: 0;
    overflow: hidden;
}
body:has(#tags-toggle:checked) .passage-container .linetext,
body:has(#tags-toggle:checked) .passage-container .linetext-cont {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* Tags mode: collapse dropcap — hide the visual initial letter cell,
   show the inline .il-sr-only version instead (same as critical-view). */
body:has(#tags-toggle:checked) .dropcap-zone {
    grid-template-columns: [dropcap] 0px [line-body] 1fr;
    column-gap: 0;
}
body:has(#tags-toggle:checked) .initial-letter-cell { display: none; }
body:has(#tags-toggle:checked) .il-sr-only {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}
body:has(#tags-toggle:checked) .il-sr-only > .hi { font-size: 1rem; }

/* Tags mode: everything is clickable */
body:has(#tags-toggle:checked) .passage-container [data-name] {
    cursor: pointer;
}

/* Normal mode: only curated elements (with label in data-element) are clickable */
.add[data-element], .del[data-element], .damage[data-element],
.app[data-element] { cursor: pointer; }

/* Note markers: modest z-index keeps superscript markers above adjacent
   inline content within the <main> stacking context. */
a.noteChar { z-index: 2; }


/* ── §22  Info popover ────────────────────────────────────────────────────── */
/* Unified floating panel for notes, apparatus, and element attributes.
   Replaces both the old in-place note expansion and the fixed-position
   infobox.  Positioned by JS near the trigger element. */
.info-popover {
    /* JS reads --popover-shadow-blur via getComputedStyle to add it to the
       right boundary margin, keeping the box-shadow from bleeding past
       <main>'s overflow-x:clip edge.  Keep in sync with the box-shadow below. */
    --popover-shadow-blur: 16px;
    --scroll-fade-bg: var(--color-bg-glass-solid);

    display: none;
    flex-direction: column;  /* flex layout set here; display:flex applied on [open] */
    position: absolute;  /* floating state: near trigger, scrolls with page */
    /* z-index: 250 — info-popover tier. Must exceed comparison panel (200)
       and dict-toolbar (220) in all contexts:
       • ≥500px: popover is inside <main>'s stacking context (position:
         absolute); comparison panel is also inside main (position:sticky),
         so relative z-index applies.
       • <500px bottom-sheet: @media below switches to position:fixed,
         placing popover in the root stacking context alongside the fixed
         comparison panel (200).
       positionNear() adjusts placement to avoid toolbar overlap. */
    z-index: 250;
    min-width: 180px;
    max-width: 320px;
    max-height: 60vh;
    border: 1px solid var(--overlay-border);
    border-radius: 6px;
    background: var(--color-bg-glass-solid);  /* 0.95 opacity — legibility over translucency */
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    box-shadow: 0 4px var(--popover-shadow-blur)
        light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.5));
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: small;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    font-weight: normal;
    text-decoration: none;
}

.info-popover[open] { display: flex; }

/* Pinned state: position:fixed escapes <main>'s stacking context.
   Raise z-index above image panel (500) so a user who has pinned the
   popover can still read it when the image panel is open. */
.info-popover.pinned { z-index: 550; }

/* Header bar: label + close button, also serves as drag handle */
.info-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-border);
    background: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.06));
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    font-weight: 600;
    font-size: 0.85em;
    color: light-dark(#555, #bbb);
}

.info-popover__header:active { cursor: grabbing; }

/* Close button */
.info-popover__close {
    all: unset;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 1.1em;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--color-text-muted);
}

.info-popover__close:hover {
    color: var(--color-text);
    background: var(--overlay-bg-active);
}

.info-popover__close::before { content: "\00d7"; }

/* Content area — scrolls independently; header stays visible at all heights. */
.info-popover__body {
    padding: 8px 10px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;  /* allows flex child to shrink below content size */
}

/* Scroll-fade is appended to .info-popover (not __body) so padding-bottom on
   __body doesn't constrain sticky positioning. Absolute overlay on the
   positioned popover; bottom corners match the popover border-radius. */
.info-popover > .scroll-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    margin-top: 0;
    border-radius: 0 0 6px 6px;
}

/* Note content inside popover */
.info-popover__body p {
    margin: 0 0 0.5em;
}

/* Line-reference links at note start are shown in no-JS mode (note-store
   at page bottom) but suppressed in the popover — the title bar carries
   the same information there. */
.info-popover__body .note-line-ref { display: none; }

/* Links inside popover (base-line refs in notes, cross-links) */
.info-popover__body a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.info-popover__body a:hover {
    color: var(--color-link-hover);
}

/* Structured data (apparatus, attributes) — dt/dd pairs */
.info-popover__body .ibox-header {
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.9em;
    color: light-dark(#555, #bbb);
}

.info-popover__body .ibox-data {
    display: grid;
    grid-template-columns: fit-content(8em) 1fr;
    gap: 1px 6px;
}

.info-popover__body dt {
    font-weight: 600;
    grid-column: 1;
}

.info-popover__body dt::after { content: ":"; }

.info-popover__body dd {
    grid-column: 2;
    margin: 0;
}

.info-popover__body hr {
    margin: 6px 0;
    border: none;
    border-top: 1px solid var(--color-border);
    grid-column: 1 / -1;
}

/* Close button: × character via ::before (shared with comparison panel) */
.close-button::before { content: "\00d7"; }

/* Phone bottom sheet (<--bp-phone): fix popover as a full-width strip above
   the bottom toolbar.  At ≥500px the toolbar moves to a top strip and the
   popover uses normal absolute/floating placement near the trigger. */
@media (max-width: 499px) /* < --bp-phone */ {
    .info-popover {
        position: fixed;
        bottom: 8px !important;
        top: auto !important;
        left: 8px !important;
        right: 8px;
        max-width: none;
        width: auto;
        max-height: 40dvh;
        border-radius: 10px 10px 6px 6px;
        box-shadow: light-dark(
            0 -4px 24px rgba(0, 0, 0, 0.2),
            0 -4px 24px rgba(0, 0, 0, 0.6));
        transition: bottom var(--transition-toolbar);
    }
    body:has(.toolbar-ribbon:not(.toolbar--hidden)) .info-popover {
        bottom: calc(var(--toolbar-ribbon-h) + 8px) !important;
    }
}


/* ── §23  Manuscript image indicator ──────────────────────────────────────── */
/* display:contents removes the span from the box model so the <a> is the
   sole rendered element — no dead-zone gaps between span edge and link. */
span.msI {
    display: contents;
}

span.msI a {
    position: relative;
    bottom: 4pt;
    color: light-dark(red, #ff6666);
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
}


/* ── §24  Icons ───────────────────────────────────────────────────────────── */
.icon-contents {
    height: 36px;
    width: 36px;
}

.icon-passage-nav {
    height: 36px;
    width: 20px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   PART F — INITIAL LETTERS
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── §47  Base initial letter styling ─────────────────────────────────────── */
.initialLetter {
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.trailer .initialLetter,
.note .initialLetter,
.marginalia .initialLetter { font-size: larger; }

/* ── §48  Critical-view dropcap collapse ──────────────────────────────────── */
/* In critical view, dropcaps display as normal inline letters.
   We collapse the dropcap column to 0 instead of using display:contents,
   which would break the subgrid row placement (children would float up
   into the parent text-col grid and overlap the folio header). */
.critical-view .dropcap-zone {
    grid-template-columns: [dropcap] 0px [line-body] 1fr;
    column-gap: 0;
}

.critical-view .initial-letter-cell { display: none; }

.critical-view .il-sr-only {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    /* font-size:0 collapses XSLT-generated whitespace text nodes;
       restored on children below. */
    font-size: 0;
}

.critical-view .il-sr-only > .hi { font-size: 1rem; }

.critical-view .initialLetter {
    text-transform: none;
    line-height: inherit;
    margin: auto;
    padding: 0;
    overflow-y: auto;
}


/* ══════════════════════════════════════════════════════════════════════════════
   PART G — REMAINING EDITION RULES
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── §49  Notes: C and P hidden in diplomatic view ────────────────────────── */
.diplomatic-view .noteChar[data-note-type="C"],
.diplomatic-view .noteChar[data-note-type="P"] { display: none; }

/* ── §50  Intro table overflow ────────────────────────────────────────────── */
div.table-c { overflow-x: auto; }

/* ── §51  Clearfix for head/trailer ───────────────────────────────────────── */
/* Deals with large initials in headers, etc. as in O.P */
.head:before, .head:after,
.trailer:before, .trailer:after {
    content: " ";
    display: block;
    clear: both;
}