/* glossary.css — annotator visual treatment.
 *
 * Visual contract
 * ───────────────
 * .glossed                — dotted underline 1px; inherits color/weight/size.
 * .glossed:hover/.is-hot  — yellow background #fffacd (matches site link hover).
 * .glossary-tooltip       — small white box, 1px black border, max-width 280px.
 * .glossary-rail          — sticky right-side column, 240px wide, brutalist.
 * .glossary-strip         — always-visible bottom strip on narrow viewports.
 *                            Replaces the previous slide-up sheet. No animation.
 *
 * Layout principle
 * ────────────────
 * The rail is positioned ABSOLUTELY relative to a wrapper that sits inside the
 * 760px-wide main column's parent. On wide screens we let it bleed into the
 * page's right gutter rather than shrink the body. Below 1100px the rail
 * disappears and the bottom strip takes over — pinned to the viewport bottom,
 * always visible, no sliding, no FAB.
 */

/* ─────────────── inline term marking ─────────────── */
.glossed {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    color: inherit;
    background: transparent;
    cursor: help;
    /* IMPORTANT: do not change font-weight or font-size — purely an underline. */
}
.glossed:hover,
.glossed:focus,
.glossed.is-hot {
    background: #fffacd;
    outline: none;
}

/* ─────────────── tooltip ─────────────── */
.glossary-tooltip {
    position: absolute;
    z-index: 1000;
    max-width: 280px;
    min-width: 200px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #000;
    color: #000;
    font-family: "Times New Roman", Times, serif;
    font-size: 13.5px;
    line-height: 1.45;
    box-shadow: 2px 2px 0 #000;
    pointer-events: auto; /* allow hover-into for slow readers */
}
.glossary-tooltip .gt-head {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.glossary-tooltip .gt-cat {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid #000;
    font-size: 9.5px;
    letter-spacing: 0.4px;
    background: #fff;
    color: #000;
}
.glossary-tooltip .gt-body {
    font-size: 13.5px;
    line-height: 1.5;
}
.glossary-tooltip .gt-link {
    display: block;
    margin-top: 6px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: #000;
    text-decoration: underline;
}

/* ─────────────── spoiler-aware progressive disclosure ───────────────
 * On SAFE surfaces (book chapters, artifacts) the tooltip / rail card /
 * strip popover shows entry.one_liner by default. If entry.expanded is
 * present, a small [more ▼] button at the bottom-right opts the user in
 * to the full canonical fact-sheet, prefixed with the spoiler-warning
 * label. EXPANDED surfaces (codex, meta) render entry.expanded directly
 * with no toggle. See glossary.js: getSurfaceMode + renderDisclosureBody.
 *
 * No animation — height changes are instant, matching the brutalist
 * register of the rest of the site.
 */

.gloss-spoiler-warning {
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 11px;
    line-height: 1.3;
    color: #666;
    margin-bottom: 4px;
}

.gloss-more-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 5px;
    background: #fff;
    border: 1px solid #000;
    color: #000;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    line-height: 1.3;
    text-transform: lowercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    /* Adequate tap target for iOS Safari without breaking visual scale. */
    min-height: 22px;
}
.gloss-more-btn:hover,
.gloss-more-btn:focus { background: #fffacd; outline: none; }
.gloss-more-btn:focus-visible { outline: 2px solid #000; outline-offset: 1px; }

/* Expanded body slightly smaller than safe body so the larger volume of
 * text doesn't crowd the tooltip; the spoiler-warning above absorbs the
 * visual weight delta. */
.glossary-tooltip .gt-body-expanded { font-size: 12.5px; line-height: 1.45; }
.glossary-strip-popover .gt-body-expanded { font-size: 12.5px; line-height: 1.45; }

/* In the rail card, the expanded body uses the same .gr-one rule but
 * gains a slightly lighter visual ranking so the term + category stay
 * the primary read. */
.glossary-rail .gr-one-expanded { font-size: 12px; color: #222; }

/* ─────────────── right rail ─────────────── */
/* Outer wrapper added by JS to <main> so the rail can position itself. */
.glossary-host {
    position: relative;
}
.glossary-rail {
    /* Anchored to viewport so it remains visible on scroll. The
       50vw + 380px math places the rail 24px to the right of the
       centered 760px-wide <main> column, on viewports ≥1100px. */
    position: fixed;
    top: 80px;
    left: calc(50vw + 404px);
    width: 240px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #000;
    font-family: "Times New Roman", Times, serif;
    font-size: 13px;
    line-height: 1.45;
    color: #000;
    z-index: 5;
}
.glossary-rail .gr-head {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #000;
    padding: 8px 10px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 1;
}
.glossary-rail .gr-head .gr-count {
    color: #555;
    font-weight: 400;
}
.glossary-rail .gr-hide {
    background: none;
    border: 1px solid #000;
    color: #000;
    padding: 1px 6px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.glossary-rail .gr-hide:hover { background: #fffacd; }

.glossary-rail .gr-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.glossary-rail .gr-item {
    padding: 8px 10px;
    border-bottom: 1px solid #000;
    cursor: pointer;
}
.glossary-rail .gr-item:last-child { border-bottom: 0; }
.glossary-rail .gr-item:hover,
.glossary-rail .gr-item.is-hot { background: #fffacd; }

/* Persistent focused-entry treatment — yellow + 3px black left bar. Applies in
 * the rail (and ALSO in the strip's expanded popover treatment). */
.gr-item.glossary-focused {
    background: #fffacd;
    border-left: 3px solid #000;
    padding-left: 7px; /* 10px - 3px to keep width identical (no shift) */
}

/* ─────────────── PINNED section (desktop rail) ─────────────── */
.glossary-pinned-section {
    border-bottom: 1px solid #000;
    background: #fff;
}
.glossary-pinned-section[hidden] { display: none; }
.gr-sub-head {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px;
    border-bottom: 1px solid #000;
    background: #f4f4f4;
    color: #000;
}
.glossary-pinned-section .gr-pinned-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.glossary-pinned-section .gr-item {
    position: relative;
    padding: 8px 28px 8px 10px; /* room for × */
    border-bottom: 1px solid #000;
    cursor: pointer;
}
.glossary-pinned-section .gr-item:last-child { border-bottom: 0; }
.glossary-pinned-section .gr-item:hover { background: #fffacd; }

.glossary-pin-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    line-height: 14px;
    text-align: center;
    background: #fff;
    border: 1px solid #000;
    color: #000;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.glossary-pin-remove:hover { background: #000; color: #fff; }
.glossary-pin-remove:focus { outline: 1px solid #000; outline-offset: 1px; }
.glossary-rail .gr-term {
    font-weight: 700;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
    margin-bottom: 2px;
    display: block;
}
.glossary-rail .gr-cat {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid #000;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 4px;
    background: #fff;
    color: #000;
    vertical-align: 1px;
}
.glossary-rail .gr-one {
    font-size: 12.5px;
    line-height: 1.45;
    margin-top: 3px;
    color: #222;
}

/* "show rail" tab when rail is hidden */
.glossary-rail-stub {
    position: fixed;
    top: 100px;
    right: 0;
    background: #fff;
    border: 1px solid #000;
    border-right: 0;
    padding: 8px 10px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    z-index: 50;
    writing-mode: vertical-rl;
}
.glossary-rail-stub:hover { background: #fffacd; }

/* ─────────────── narrow-screen always-visible bottom strip ───────────────
 *
 * Layout: a fixed-position bar at the bottom of the viewport, ~62px tall,
 * thin top border (brutalist — no shadow). Internal structure (left → right):
 *   [.gs-pinned (anchored, non-scrolling, may be empty/hidden)]
 *   [.gs-pinned-divider (vertical rule, visible only if pinned has items)]
 *   [.gs-scroll (horizontal scroll, contains .glossary-strip-chip elements)]
 * Strip is hidden on desktop (≥1100px) and the rail takes over.
 *
 * The popover (.glossary-strip-popover) is created on tap; it's an
 * absolutely-positioned card placed ABOVE the tapped chip relative to the
 * strip's coordinate space. Only one popover at a time.
 */
.glossary-strip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62px;
    background: #fff;
    border-top: 1px solid #000;  /* thin top border; brutalist — no shadow */
    z-index: 60;
    display: none; /* shown via media query below */
    /* Honor safe-area on iOS so chips don't sit under the home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: content-box; /* keep the 62px content area; safe-area extends below */
}
.glossary-strip .gs-row {
    display: flex;
    align-items: stretch;
    height: 62px;
    width: 100%;
}
.glossary-strip .gs-pinned {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    flex: 0 0 auto;  /* never grows; never scrolls — anchored to the left */
    overflow: hidden;
}
.glossary-strip .gs-pinned:empty { display: none; }
.glossary-strip .gs-pinned-divider {
    flex: 0 0 1px;
    width: 1px;
    background: #000;
    margin: 8px 0;
    align-self: stretch;
}
.glossary-strip .gs-pinned:empty + .gs-pinned-divider { display: none; }
.glossary-strip .gs-scroll {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.glossary-strip .gs-scroll::-webkit-scrollbar { height: 4px; }
.glossary-strip .gs-scroll::-webkit-scrollbar-thumb { background: #000; }

/* Individual chip — small, brutalist, ~120px wide, term + category. */
.glossary-strip-chip {
    flex: 0 0 auto;
    min-width: 110px;
    max-width: 160px;
    height: 46px;
    padding: 5px 8px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font-family: ui-monospace, Menlo, monospace;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: left;
    overflow: hidden;
}
.glossary-strip-chip:hover,
.glossary-strip-chip.is-hot,
.glossary-strip-chip:focus { background: #fffacd; outline: none; }
.glossary-strip-chip:focus-visible { outline: 2px solid #000; outline-offset: 1px; }
.glossary-strip-chip .gsc-term {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.glossary-strip-chip .gsc-cat {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #555;
    line-height: 1.1;
}
/* Pinned chip — heavier border + star marker. */
.glossary-strip-chip.pinned {
    border: 2px solid #000;
    padding: 4px 7px;  /* compensate for the extra border so footprint is unchanged */
    position: relative;
}
.glossary-strip-chip.pinned .gsc-term::before {
    content: "★ ";
    font-weight: 700;
}

/* Pop-up definition card above a tapped chip. Fixed-positioned (relative to
 * the viewport) just above the strip; JS sets `left` to align with the tapped
 * chip and clamps to the viewport edges. Brutalist: 1px border, no shadow
 * besides the brutalist 2px hard-shadow, no transition. */
.glossary-strip-popover {
    position: fixed;
    z-index: 65;
    max-width: 300px;
    min-width: 220px;
    background: #fff;
    border: 1px solid #000;
    box-shadow: 2px 2px 0 #000;
    padding: 10px 12px;
    font-family: "Times New Roman", Times, serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #000;
}
.glossary-strip-popover .gsp-head {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.glossary-strip-popover .gsp-cat {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid #000;
    font-size: 9.5px;
    letter-spacing: 0.4px;
    background: #fff;
}
.glossary-strip-popover .gsp-body { font-size: 13.5px; line-height: 1.5; }
.glossary-strip-popover .gsp-link {
    display: block;
    margin-top: 6px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    text-decoration: underline;
}
.glossary-strip-popover .gsp-pin {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #fff;
    border: 1px solid #000;
    color: #000;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 1px 5px;
    cursor: pointer;
}
.glossary-strip-popover .gsp-pin:hover { background: #fffacd; }
.glossary-strip-popover .gsp-unpin { background: #000; color: #fff; }
.glossary-strip-popover .gsp-unpin:hover { background: #fffacd; color: #000; }

/* ─────────────── responsive switch ─────────────── */
/* Wide enough to show the rail without overlapping. main is centered on a 760px
 * column; we need enough viewport room for the rail + a gap on the right side. */
@media (max-width: 1099px) {
    .glossary-rail,
    .glossary-rail-stub { display: none !important; }
    .glossary-strip { display: block; }
    /* Push body content up so the strip never obscures the last paragraph.
     * 62px strip + 14px breathing room + iOS safe-area. */
    body { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0)) !important; }
}
@media (min-width: 1100px) {
    .glossary-strip,
    .glossary-strip-popover { display: none !important; }
}

/* iOS Safari: tooltip needs to be tappable, not just hoverable. Touch handling
 * is implemented in JS; CSS just makes sure the tooltip is reachable. */
@media (hover: none) {
    .glossed { cursor: pointer; }
}

/* ───────────────────────────────────────────────────────────────────────────
 * In-this-chapter panel
 * Brutalist: 1px borders, monospace label, no shadow, no animation.
 * The <details>/<summary> handles the collapse; JS only persists state.
 * ─────────────────────────────────────────────────────────────────────── */
.chapter-index {
    border: 1px solid #000;
    background: #fff;
    margin: 12px 0 22px;
    padding: 0;
}
.chapter-index-summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #000;
    background: #f7f7f7;
    border-bottom: 1px solid transparent;
    user-select: none;
}
.chapter-index[open] > .chapter-index-summary { border-bottom: 1px solid #000; }
.chapter-index-summary:hover { background: #fffacd; }
.chapter-index-summary::-webkit-details-marker { display: none; }
.chapter-index-summary .ci-marker {
    display: inline-block;
    transform: rotate(-90deg);
    transition: transform 0s;  /* no animation per brief */
    margin-right: 4px;
    font-size: 10px;
}
.chapter-index[open] > .chapter-index-summary .ci-marker { transform: rotate(0deg); }

.chapter-index-body { padding: 10px 12px 12px; }
.ci-section { margin-bottom: 10px; }
.ci-section:last-child { margin-bottom: 0; }
.ci-label {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    margin-bottom: 4px;
}
.ci-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ci-chip {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11.5px;
    line-height: 1.4;
}
.ci-chip:hover, .ci-chip:focus { background: #fffacd; outline: none; }
/* case chips are non-clickable (glossary tooltip only) — soften the cursor */
.ci-chip-case { cursor: help; background: #f0f0f0; }

/* ─────────────── Notable & Intriguing (places / concepts / who) ───────────
 *
 * Renders below the main body on entity pages. It is a side-channel — small
 * monospace section header in the brutalist register, then a list of
 * bordered cards. The fact sentence reads in Times serif; the source
 * underneath reads in monospace, smaller and faded. The bottom foot-note
 * tells the reader what this column is.
 *
 * Mobile-first: a single column, cards span full width. iOS Safari: cards
 * are plain block elements so VoiceOver reads them in order; the <li> form
 * is preserved for screen-readers. Keyboard accessible by default (cards
 * are not interactive). The section header uses the project h3 style.
 */
.notable-section {
    margin-top: 28px;
    padding-top: 12px;
    border-top: 2px solid #000;
}
.notable-heading {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 12px;
    padding: 0;
    color: #000;
}
.notable-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.notable-card {
    border: 1px solid #000;
    background: #fff;
    padding: 12px 14px 11px;
}
.notable-card + .notable-card { margin-top: 0; }
.notable-fact {
    font-family: "Times New Roman", Times, serif;
    font-size: 15.5px;
    line-height: 1.55;
    color: #000;
    margin: 0;
}
.notable-source {
    margin: 8px 0 0;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.45;
    color: #666;
    letter-spacing: 0.1px;
}
.notable-foot {
    margin: 10px 0 0;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    line-height: 1.45;
    color: #666;
    letter-spacing: 0.1px;
}
@media (max-width: 640px) {
    .notable-card { padding: 10px 12px 10px; }
    .notable-fact { font-size: 15px; }
}


/* ─────────────── Suggested watching ───────────────
 * Suggested documentaries + films, attached to places, /g/ entries,
 * and theory pages via _watching_section.html. Brutalist treatment,
 * mirrors the .notable-* register so the section sits cleanly
 * alongside notable-facts.
 */
.watching-section {
    margin: 28px 0 8px;
    padding-top: 16px;
    border-top: 1px solid #000;
}
.watching-heading {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #555;
    margin: 0 0 12px;
    border: 0;
    padding: 0;
}
.watching-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.watching-card {
    border: 1px solid #000;
    padding: 12px 14px 14px;
    background: #fff;
}
.watching-title {
    font-family: "Times New Roman", Times, serif;
    font-size: 15.5px;
    line-height: 1.45;
    margin: 0 0 4px;
}
.watching-title strong { font-weight: 700; }
.watching-year {
    color: #555;
    font-weight: 400;
    margin-left: 4px;
}
.watching-kind {
    display: inline-block;
    margin-left: 8px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #555;
    border: 1px solid #555;
    padding: 1px 5px;
    vertical-align: 2px;
}
.watching-meta {
    margin: 0 0 6px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #666;
}
.watching-blurb {
    margin: 0 0 4px;
    font-family: "Times New Roman", Times, serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: #222;
}
.watching-note {
    margin: 0;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    line-height: 1.5;
    color: #888;
    font-style: italic;
}

/* ─────────────── Provenance badge ───────────────
 * Small "where this entry came from" chip shown on entity detail pages
 * for entries added via tracked research passes (competitive gap-fill,
 * image sourcing). Renders inline above the detail body so the author
 * can see at a glance what's new + why.
 */
.provenance-badge {
    display: block;
    margin: 6px 0 18px;
    padding: 10px 14px;
    border: 1px solid #000;
    border-left: 4px solid #000;
    background: #fffacd;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    line-height: 1.5;
}
.provenance-badge .provenance-tag {
    display: block;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #000;
    margin-bottom: 4px;
}
.provenance-badge .provenance-source {
    display: block;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 6px;
}
.provenance-badge .provenance-link {
    color: #000;
    text-decoration: underline;
    font-weight: 700;
}