/* ── CUSTOMIZABLE TOKENS ────────────────────────────────
   Everything editor_css.html's color/font pickers control.
   Defaults below are the shipped look; the picker overrides these
   on .preview-page for its live preview, and edits this block
   directly on save — it no longer regenerates the file. */
:root {
    --color-bg: #0a0908;
    --color-panel: #1a1612;
    --color-text: #d4c4b9;
    --color-head: #c4a57b;
    --color-link: #c4a574;
    --color-muted: #7a6e5e;
    --color-border: #4a3e30;
    --color-accent: #7a6035;
    --color-obj: #e08060;
    --color-resp: #80c070;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, Verdana, sans-serif;
    --font-size-base: 1em;
    --line-height-base: 1.7;
    /* Size of the tail letters in god-case (L[ord], G[od]) relative to
       the surrounding text. See CLAUDE.md's font-size carve-out for
       why this is the one place in the project allowed to go below 1em. */
    --god-case-size: 75%;
    /* Citation frames — one path + one nine-patch slice value per type.
       No color anywhere in this list. Types are defined once, in
       citation-types.js, and read from there by both editors; this
       block just holds the current value for each. Lives in its own
       borders_citation/ folder, separate from the borders_content/
       folder the other border-images (page container, section-block,
       badges) use. */
    --cit-frame-ot: url('borders_citation/border_a.png');
    --cit-frame-ot-slice: 12;
    --cit-frame-nt: url('borders_citation/border_a.png');
    --cit-frame-nt-slice: 12;
    --cit-frame-ah: url('borders_citation/border_a.png');
    --cit-frame-ah-slice: 12;
    --cit-frame-ar: url('borders_citation/border_a.png');
    --cit-frame-ar-slice: 12;
    --cit-frame-mr: url('borders_citation/border_a.png');
    --cit-frame-mr-slice: 12;
    --cit-frame-wd: url('borders_citation/border_a.png');
    --cit-frame-wd-slice: 12;
    /* Width of an in-text quote block (.p-quote), as a percentage of
       the column. Centered via margin: auto on the rule below —
       one slider in editor_css.html controls all citation types at once. */
    --quote-width: 50%;
    /* Per-level heading spacing. margin-top can go negative (set from
       the editor) to pull a heading up over the box above it; margin-
       bottom then clears space before the following content so it
       doesn't collide with the header sticking up into it. */
    --h1-margin-top: 0.75rem;
    --h1-margin-bottom: 0.25rem;
    /* H2 is what all framed sections (Quick Answer, Objections, etc.)
       render as by default, so its default margin-top is negative —
       that's what pulls the heading up onto the framed box's top
       border. This value is in rem (flat), not em, so it does NOT
       auto-scale if the H2 font-size slider changes — a larger H2
       needs a more negative margin-top to keep sitting on the
       border; re-tune the slider after changing H2's size. */
    --h2-margin-top: -5rem;
    --h2-margin-bottom: 1.5rem;
    --h3-margin-top: 0.75rem;
    --h3-margin-bottom: 0.25rem;
    --head-outline: 0.08em;
    --section-gap: 0.5rem;
    --section-framed-gap: 1rem;
    --h4-margin-top: 0.75rem;
    --h4-margin-bottom: 0.25rem;
}

/* ── RESET ────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BASE ─────────────────────────────────────────────── */
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

a         { color: var(--color-link); }
a:visited { color: #9b7d54; }

h1, h2, h3, h4 {
    color: var(--color-head);
    text-shadow:
        calc(-1 * var(--head-outline)) calc(-1 * var(--head-outline)) 0 #000,
        calc( 1 * var(--head-outline)) calc(-1 * var(--head-outline)) 0 #000,
        calc(-1 * var(--head-outline)) calc( 1 * var(--head-outline)) 0 #000,
        calc( 1 * var(--head-outline)) calc( 1 * var(--head-outline)) 0 #000;
}
h1 { font-size: var(--h1-size); text-align: center; margin-top: var(--h1-margin-top); margin-bottom: var(--h1-margin-bottom); }
h2 { font-size: var(--h2-size); margin-top: var(--h2-margin-top); margin-bottom: var(--h2-margin-bottom); }
h3 { font-size: var(--h3-size); margin-top: var(--h3-margin-top); margin-bottom: var(--h3-margin-bottom); }
h4 { font-size: var(--h4-size); margin-top: var(--h4-margin-top); margin-bottom: var(--h4-margin-bottom); }

/* ── PAGE CONTAINER ───────────────────────────────────── */
.page-container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem;
    background: var(--color-panel);
    border-style: solid;
    border-width: 1rem;
    border-color: var(--color-border);
    border-image: url('borders_content/border_b.png') 12 stretch;
    border-radius: 0.25rem;
    container-type: inline-size;
}

/* ── CONTENT PANELS ───────────────────────────────────── */
.answer-block, .objections-section, .extended-section,
.bibliography-section, .related-section {
    margin: 0.5rem 0;
    padding: 0.5rem;
    border-style: solid;
    border-width: 0.5rem;
    border-color: var(--color-border);
    border-image: url('borders_content/border_a.png') 12 fill stretch;
    background: transparent; /* border-image fill IS the background */
}

.quick-answer-box {
    border-left: 0.25rem solid var(--color-head);
    background: var(--color-panel);
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    white-space: pre-wrap;
}

/* ── SECTION BLOCK ────────────────────────────────────────
   One component for every collapsible section, at every nesting
   level (top-level entries in the list, and sections within an
   entry like Objections / Long Answer / Confidence Notes).
   Add --framed for sections that should get the border-image box
   with the heading riding the top border line; leave it off for
   plain nested sections (Also Asked As, Related Entries).

   Markup: <div class="section-block [--framed]">
             <h2 class="section-block__heading">          <- real hN, level set by render.js
               <button class="section-block__trigger">…</button>
             </h2>
             <div class="section-block__body [.open]">…</div>
           </div>
   The heading tag is real (h1-h4), so it inherits color/size/
   text-shadow/margin from the existing tokenized h1,h2,h3,h4 rule
   above — section-block doesn't set its own margin on the heading,
   framed or not, so editor_css.html's per-tag margin sliders (and
   the "riding the border" look they produce for framed sections at
   their negative default) are the only thing controlling it. */
.section-block { margin: var(--section-gap) 0; }

.section-block__trigger {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: 0.65rem 1rem;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
}
.section-block__trigger:hover { background: color-mix(in srgb, var(--color-panel) 85%, white); }
.section-block--framed > .section-block__heading > .section-block__trigger {
    padding: 0;
    background: none;
    border: none;
}

.section-block__body {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-top: none;
    display: none;
    /* Preserves author line breaks/spacing exactly as typed. Safe to
       scope broadly here (unlike body) because everything under this
       node is built via appendChild in render.js — no hand-formatted
       whitespace between elements for pre-wrap to turn into gaps. */
    white-space: pre-wrap;
}
.section-block__body.open { display: block; }
.section-block--framed > .section-block__body { border: none; padding: 0; }

.section-block__icon { transition: transform 0.2s; flex-shrink: 0; }
.section-block__trigger[aria-expanded="true"] .section-block__icon { transform: rotate(90deg); }

.section-block--framed {
    padding: 1.9rem 1.25rem 1.25rem;
    border-style: solid;
    border-width: 0.5rem;
    border-color: var(--color-border);
    border-image: url('borders_content/border_a.png') 12 fill stretch;
    background: transparent; /* border-image fill IS the background */
    margin: var(--section-framed-gap) 0;
}

/* ── GOD-CASE ─────────────────────────────────────────────
   L[ord] / G[od] → the KJV convention marking the underlying
   Hebrew as the divine name (YHWH/Jehovah). font-size below 1em
   is normally banned project-wide, but this is exactly what the
   convention is: the tail letters read smaller than the initial. */
.god-case { font-size: var(--god-case-size); }

/* ── OBJECTION TREE ───────────────────────────────────── */
.p-obj  { border-left: 2px solid #6b3820; padding-left: 1rem; margin: 0.75rem 0; }
.p-resp { border-left: 2px solid #2e4a28; padding-left: 1rem; margin: 0.5rem 0; }
.p-obj-label  { color: var(--color-obj); font-weight: bold; }
.p-resp-label { color: var(--color-resp); font-weight: bold; }

/* ── QUOTES ───────────────────────────────────────────── */
.p-quote {
    border-left: 0.2rem solid var(--color-accent);
    padding: 0.5rem 1rem;
    font-style: normal; 
    background: var(--color-panel);
    width: var(--quote-width);
    margin: 0.75rem auto;
}
.p-quote cite { 
    display: block; 
    font-style: italic;
    color: var(--color-muted); 
    margin-top: 0.35rem; 
}

/* A cited quote (.p-quote plus one of the six cit-* classes below)
   needs its own border-style/border-width on all four sides for the
   border-image to paint as a full nine-patch frame instead of just
   the left accent line above. This is intentionally its OWN rule,
   not merged into .cit-block's — .p-quote and .cit-block are two
   different components that happen to reuse the same six frame
   images; keeping them separate lets one change size/spacing without
   touching the other, even though the values start out identical. */
.p-quote.cit-ot, .p-quote.cit-nt, .p-quote.cit-ah,
.p-quote.cit-ar, .p-quote.cit-mr, .p-quote.cit-wd {
    border-left: none;
    border-style: solid;
    border-width: 0.5rem;
    background: transparent;
}

/* ── SIX CITATION TYPES ───────────────────────────────── */
.cit-block {
    border-style: solid;
    border-width: 0.5rem;
    background: transparent; /* border-image fill IS the background, same as the other panels */
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
}
.cit-ot { border-image: var(--cit-frame-ot) var(--cit-frame-ot-slice) fill stretch; }
.cit-nt { border-image: var(--cit-frame-nt) var(--cit-frame-nt-slice) fill stretch; }
.cit-ah { border-image: var(--cit-frame-ah) var(--cit-frame-ah-slice) fill stretch; }
.cit-ar { border-image: var(--cit-frame-ar) var(--cit-frame-ar-slice) fill stretch; }
.cit-mr { border-image: var(--cit-frame-mr) var(--cit-frame-mr-slice) fill stretch; }
.cit-wd { border-image: var(--cit-frame-wd) var(--cit-frame-wd-slice) fill stretch; }

/* An anchor referenced via {WC:tag} (or under a cited quote) with no
   full_citation anywhere — flags the gap instead of a dead link. */
.cit-missing { border-color: #7a2020; background: rgba(122,32,32,0.12); }
.cit-missing .cit-type-label { color: #b04040; }

.cit-type-label { font-weight: bold; color: var(--color-accent); display: block; }
.wc-tag-label   { color: var(--color-head); font-weight: bold; }
.wc-ref         { color: var(--color-link); font-size: 1.2rem; }

/* ── GLOSSARY REFERENCE TOOLTIP ────────────────────────
   Was pasted separately into editor_glossary.html, editor_qna.html,
   and again inside the exported-viewer template. One copy now —
   used by the editors' preview panes and the public viewer alike. */
.g-ref { position: relative; display: inline; }
.g-link {
    color: var(--color-head);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}
.g-link:hover { color: #e4c59b; }
.g-ref.unresolved { color: #a06030; }
.g-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1410;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.4em 0.65em;
    color: var(--color-text);
    font-size: 0.85em;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    line-height: 1.45;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.g-ref:hover .g-tooltip,
.g-ref:focus-within .g-tooltip { display: block; }

/* ── GLOSSARY ARTICLE DISPLAY ───────────────────────────
   Read-only rendering for a glossary entry's own article view
   (renderGlossaryHeader/renderGlossaryBody in render.js) — used by
   index.html and every editor preview pane alike. Moved here from
   styles_for_author.css now that glossary entries render in the
   public viewer, not just the glossary editor's own preview. */
.term-display { margin-bottom: 0.5em; }
.term-alt {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-top: 0.2em;
}
.term-originals {
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-top: 0.2em;
    font-style: italic;
}
.etym-block {
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.6em 0.85em;
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 0.5em;
}
.etym-block strong { color: var(--color-head); }

.prev-sense {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 1em;
    overflow: hidden;
}
.prev-sense-header {
    display: flex;
    align-items: baseline;
    gap: 0.75em;
    padding: 0.5em 0.75em;
    background: var(--color-panel);
    border-bottom: 1px solid var(--color-border);
}
.prev-sense-num   { font-size: var(--text-xs); color: var(--color-accent); font-weight: 700; letter-spacing: 0.1em; }
.prev-sense-label { font-size: var(--text-md); color: var(--color-head); font-weight: 600; }
.prev-sense-body  { padding: 0.75em; }
.sense-def-p      { margin: 0 0 0.4em; }
.prev-sense-who   { font-size: var(--text-sm); color: #7a9a6a; margin-top: 0.35em; }
.prev-sense-why   { font-size: var(--text-sm); color: var(--color-muted); font-style: italic; margin-top: 0.35em; border-top: 1px solid var(--color-border); padding-top: 0.35em; }
.sense-tags-inline { font-size: var(--text-sm); }
.flag-display { display: flex; flex-wrap: wrap; gap: 0.3em; margin-top: 0.4em; }
.flag-badge {
    font-size: var(--text-xs);
    padding: 0.1em 0.5em;
    border-radius: 3px;
    border: 1px solid;
}
.flag-badge.pos { border-color: #4a7a4a; color: #8aca8a; background: #1a2a1a; }
.flag-badge.neg { border-color: #7a3a2a; color: #ca8a7a; background: #2a1410; }
.flag-badge.neu { border-color: #4a6a9a; color: #8aaaca; background: #1a1a2a; }

/* ── LIGHTBOX (image viewer) ───────────────────────────
   Was pasted separately into editor_glossary.html and twice into
   editor_qna.html (once for the live editor, once inside the
   exported-viewer template). One copy now. */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; }

/* ── EMPTY STATE ────────────────────────────────────────
   Shared "nothing here" message — editor preview lists and the
   public viewer's search results both use it. */
.empty-state { padding: 3em; text-align: center; color: var(--color-muted); }

.hidden { display: none; }

/* ── VIEWER SHELL ─────────────────────────────────────────
   index.html's whole app: a tag-search + results-list sidebar next
   to the single open article. render.js's initViewer() builds
   everything inside #viewer-sidebar and #article-view; this file
   just gives their containers a shape. No page banner — there
   isn't one, this two-pane layout is the entire page. */
#viewer-shell {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    max-width: 90rem;
    margin: 0 auto;
    padding: 2rem;
}
#viewer-sidebar {
    width: 20rem;
    flex-shrink: 0;
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}
#article-view { flex: 1; min-width: 0; }
@media (max-width: 60em) {
    #viewer-shell { flex-direction: column; }
    #viewer-sidebar { width: 100%; position: static; max-height: none; }
}

#tag-search-wrap { position: relative; }
#tag-suggestions {
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 50;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-top: none;
    max-height: 12rem;
    overflow-y: auto;
}
.tag-suggestion-row { padding: 0.4em 0.6em; cursor: pointer; }
.tag-suggestion-row:hover { background: color-mix(in srgb, var(--color-panel) 85%, white); }

#tag-selected { display: flex; flex-wrap: wrap; gap: 0.35em; margin-bottom: 1em; min-height: 1.5em; }
.pill-remove-btn { background: none; border: none; color: inherit; cursor: pointer; padding: 0 0 0 0.3em; }

#results-list { display: flex; flex-direction: column; }
.result-item {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0.5em 0.75em;
    border-left: 2px solid transparent;
    color: var(--color-text);
}
.result-item:hover    { background: var(--color-panel); }
.result-item.selected { background: var(--color-panel); border-left-color: var(--color-head); color: var(--color-head); }

/* ── MISC VIEWER ELEMENTS ──────────────────────────────── */
.phrasings-list { padding-left: 1.5rem; color: var(--color-muted); }

.rel-block       { margin: 0.5rem 0; }
.rel-block-label { color: var(--color-muted); font-weight: bold; display: block; }
.rel-link        { display: inline-block; margin: 0.15rem 0.5rem 0.15rem 0; }

.tag-pill {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    margin: 0.1rem 0.15rem;
    cursor: pointer;
    background: var(--color-panel);
}
.tag-pill.on { border-color: var(--color-head); color: var(--color-head); }

.viewer-entry-title { color: var(--color-head); font-weight: bold; }

.search-bar { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.search-bar input {
    flex: 1;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 1rem;
}

/* ── INDICATOR BADGES (significance / epistemic status) ──
   Base shape only. Each status class below owns its own border-image —
   all point at border_a.png for now as a placeholder; swap the url per
   class independently once distinct art exists for each status. */
.indicator-badge {
    display: inline-block;
    border-style: solid;
    color: var(--color-text);
    padding: 0.2rem 0.65rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    background: transparent; /* border-image fill IS the background */
}

.indicator-badge.sig-peripheral   { border-width: 6px; border-image: url('borders_content/border_a.png') 12 fill stretch; }
.indicator-badge.sig-contextual   { border-width: 6px; border-image: url('borders_content/border_a.png') 12 fill stretch; }
.indicator-badge.sig-supportive   { border-width: 6px; border-image: url('borders_content/border_a.png') 12 fill stretch; }
.indicator-badge.sig-relevant     { border-width: 6px; border-image: url('borders_content/border_a.png') 12 fill stretch; }
.indicator-badge.sig-foundational { border-width: 6px; border-image: url('borders_content/border_a.png') 12 fill stretch; }

.indicator-badge.epi-settled      { border-width: 6px; border-image: url('borders_content/border_a.png') 12 fill stretch; }
.indicator-badge.epi-confident    { border-width: 6px; border-image: url('borders_content/border_a.png') 12 fill stretch; }
.indicator-badge.epi-probable     { border-width: 6px; border-image: url('borders_content/border_a.png') 12 fill stretch; }
.indicator-badge.epi-contested    { border-width: 6px; border-image: url('borders_content/border_a.png') 12 fill stretch; }
.indicator-badge.epi-speculative  { border-width: 6px; border-image: url('borders_content/border_a.png') 12 fill stretch; }

/* ── EXTENDED QUOTE ATTRIBUTION ───────────────────────── */
.p-quote cite.cit-note { font-style: italic; color: #5a5048; font-size: 1rem; }

/* ── IMAGE BLOCKS ─────────────────────────────────────── */
figure.img-block {
  float: right;
  width: 50%;
  margin: 0 0 1em 1.5em;
  border-style: solid;
  border-width: 16px;
  border-image: url('borders_content/border_a.png') 16 fill stretch;
  padding: 4px;
}
figure.img-block img { width: 100%; display: block; cursor: pointer; }
figure.img-block figcaption { padding-top: 0.4em; }
.img-credit { color: var(--color-muted); }

/* when the column content area drops below 50em, a 50% float leaves <25em for text — stack instead */
@container (max-width: 50em) {
  figure.img-block { float: none; width: 100%; margin: 1em 0; }
}