/* ── CUSTOMIZABLE TOKENS ────────────────────────────────
   Palette colors (global, stored in ciq.json's theme{} object, applied
   live via document.documentElement.style.setProperty() — see
   editor-utils.js's applyThemeVars()) PLUS the per-box style vars
   (--slot-*-font/size/frame/frame-slice). The per-box vars are no
   longer theme{} keys — each saved filling carries its own
   font/size/frame/frameSlice per box (see console.html's
   applyLiveBoxStyles()/updateSlot*()) — the values below are only the
   fallback for a box that doesn't define one of those fields (e.g. a
   brand-new, not-yet-styled configuration), so it isn't blank white
   rather than the intended steady-state look. */
: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-size-base: 1em;
    --line-height-base: 1.7;
    /* auto | row | column — not consumed via var() anywhere; read back
       by console.html's applyAnswersArrangement() to toggle a class on
       .answers-wrap instead (see that rule below for why). Kept as a
       real custom property anyway so it round-trips through
       applyThemeVars() like every other theme key, and shows up in
       devtools like the rest of this block. */
    --answers-arrangement: auto;
    /* One universal shape: a Topic Box plus four fixed Answer Boxes
       (A/B/C/D). Each of the 5 named slots is styled independently —
       its own font, size, and nine-patch border image + slice, saved
       as part of that box's own data on each filling (not here) once
       a configuration defines it. Every var name below is mechanically
       derived from one slot id ('topic'/'a'/'b'/'c'/'d') in both this
       file and console.html's per-box control JS, so there's a single
       source of truth for the naming pattern — see CLAUDE.md for why
       that matters here. These particular values are only ever used as
       the unstyled/new-configuration fallback. */
    --slot-topic-font: Verdana, sans-serif;
    --slot-topic-size: 6cqmin;
    --slot-topic-frame: url('borders_content/border_b.png');
    --slot-topic-frame-slice: 12;
    /* Topic subtitle: text + size only, no separate font/frame/visibility
       of its own — it shares the Topic box's font and border and follows
       the Topic's own visibility, so it isn't one of the SLOTS-derived
       vars above (see CLAUDE.md's answersStyle exception for the same
       reasoning). Every size field below, main text and subtitle alike,
       is cqmin — sized straight off the pane's own box, independent of
       any ancestor's font-size — and applied directly to the text field
       it sizes (.slot-topic-main/.slot-topic-sub below) rather than to
       the box around it, so a box's own size can never compound with a
       sibling field's. These are current placeholder values, not tuned
       yet — retune by eye against the actual OBS crop. */
    --slot-topic-sub-size: 1.5cqmin;
    /* Font/size for the four answer boxes are shared, not per-box —
       one control in console.html sets both for A-D at once (see
       CLAUDE.md). Borders stay independent per box below. */
    --answers-font: Verdana, sans-serif;
    --answers-size: 4cqmin;
    /* Each answer's subtitle is its own text (like the Topic's), but
       shares one size across A-D, same as --answers-size above. */
    --answers-sub-size: 1.5cqmin;
    --slot-a-frame: url('borders_content/border_a.png');
    --slot-a-frame-slice: 12;
    --slot-b-frame: url('borders_content/border_a.png');
    --slot-b-frame-slice: 12;
    --slot-c-frame: url('borders_content/border_a.png');
    --slot-c-frame-slice: 12;
    --slot-d-frame: url('borders_content/border_a.png');
    --slot-d-frame-slice: 12;
}

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

/* ── BASE ─────────────────────────────────────────────── */
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--chrome-font-content, system-ui, -apple-system, "Segoe UI", Roboto, Arial, Verdana, sans-serif);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

/* Browsers don't inherit body's font-family into form controls by
   default (a long-standing UA-stylesheet quirk) — needed here because
   this is the one stylesheet guest.html loads on its own, with no
   styles_for_author.css to paper over the gap the way console.html's
   emcee chrome already does. */
button, input, select, textarea { font-family: inherit; font-size: 1em; }
button {
    background: var(--color-panel);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: 0.25em 0.65em;
    cursor: pointer;
}
button:hover { color: var(--color-head); border-color: var(--color-head); }

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

/* ── PAGE CONTAINER ───────────────────────────────────────
   Wraps whatever renderFilling() produces in console.html's display
   pane — the half of the window OBS captures. No max-width: this
   pane is supposed to be exactly what OBS crops, so it always fills
   100% of #main rather than freezing at a fixed width and leaving
   dead space once the window is wider than that — see CLAUDE.md's
   Display-Pane Isolation section.

   Filling height works the same way, but height doesn't default to
   "fill the parent" the way block-level width does, so it takes an
   explicit flex chain: #main (styles_for_author.css) is a flex
   column, this container is flex:1 within it, and #filling-display
   below is flex:1 again within THIS container — three levels, because
   there are three parent/child relationships between "the space OBS
   crops" and "the boxes actually being drawn." min-height:0 at each
   flex level is the standard fix for flex items otherwise refusing to
   shrink below their content's natural size, which would defeat the
   whole chain. */
.page-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    /* The pane's ambient base font-size — only ever inherited by text
       that has no cqmin size field of its own (e.g. the empty-state
       message). Every actual slot size (Topic/Answers, main and
       subtitle alike) is its own explicit cqmin value applied directly
       to that field, independent of this property — see the slot/
       answers size tokens above. cqmin, not a fixed rem: sizing off the
       smaller of this pane's own width/height is what makes text scale
       to fill the pane at any resolution or aspect ratio. Requires
       #guest-pane (this element's parent, in both styles_for_author.css
       and guest.html) to be a size container — see the comment there
       for why cqmin over plain vmin. */
    font-size: 2cqmin;
    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;
}

#filling-display {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ── THE FIVE SLOTS: Topic Box + Answer Boxes A-D ────────────
   One universal shape, always — a Topic Box and four fixed, named
   Answer Boxes. Each slot is independently styled (own font, size,
   nine-patch border) via its own --slot-<id>-* vars (see :root above)
   and independently emcee-toggleable between visible and .slot-hidden.
   Hidden uses display: none (not visibility) so a hidden box is fully
   removed from layout — the remaining visible boxes actually reflow
   to fill the freed space instead of leaving a stuck gap. The
   trade-off: toggling a box live resizes/repositions its siblings
   immediately, not a quiet fade — that's the intended behavior here,
   not a bug. */
.slot-box {
    margin: 0.5rem 0;
    padding: 0.75rem;
    border-style: solid;
    border-width: 0.5rem;
    border-color: var(--color-border);
    background: transparent; /* border-image fill IS the background */
}
.slot-hidden { display: none; }
/* Marks the guest's *submitted* answer (guest call-in feature) — set by
   render.js's renderFilling(filling, selectedAnswer) — visible the same
   way on console.html's own guest-pane and guest.html alike, since both call
   the same renderer. This is the one guest-answer state that travels
   over the wire, so it's what a regular watcher/the emcee sees too. */
.slot-selected { box-shadow: 0 0 1.5rem 0.4rem gold; }
/* Marks whichever answer the guest currently has locally picked but not
   yet submitted (guest.html only — console.html never passes
   pickedAnswer, so this class never appears on console.html's own guest-pane). Purely
   local UI state; distinct color from .slot-selected so a guest mid-swap
   can't mistake "what I'm about to submit" for "what's already gold and
   visible to everyone else." Plain `silver` at gold's blur/spread reads
   as barely-there — grey has nowhere near gold's hue contrast against
   this palette's brown/black tones, so it's blurred out to near
   invisibility at the same radii. A tighter, larger spread plus a
   brighter near-white keeps a solid, visible rim instead of just haze. */
.slot-picked { box-shadow: 0 0 1rem 0.6rem #e8e8f0; }

.slot-topic {
    flex: 0 0 auto; /* stays its own natural height — the answers area is what absorbs extra vertical space, not this */
    border-image: var(--slot-topic-frame) var(--slot-topic-frame-slice) fill stretch;
    color: var(--color-head);
    text-align: center;
    margin: 0 0 1.5rem;
}
/* Font/size apply to each text field directly, not to .slot-topic above —
   the box itself has no font-size-dependent styling of its own (padding/
   border-width are rem, not em), so there's nothing to inherit through;
   scoping it to the field it actually sizes keeps the two fields (main,
   subtitle) independent of each other by construction, not just by
   coincidence of unit choice. */
.slot-topic-main { font-family: var(--slot-topic-font); font-size: var(--slot-topic-size); }
.slot-topic-sub { font-size: var(--slot-topic-sub-size); }
/* Same field-level scoping as .slot-topic-main/.slot-topic-sub above,
   shared across A-D since font/size are one control for all four. */
.slot-a-main, .slot-b-main, .slot-c-main, .slot-d-main { font-family: var(--answers-font); font-size: var(--answers-size); }
.slot-a-sub, .slot-b-sub, .slot-c-sub, .slot-d-sub { font-size: var(--answers-sub-size); }
.slot-a { border-image: var(--slot-a-frame) var(--slot-a-frame-slice) fill stretch; }
.slot-b { border-image: var(--slot-b-frame) var(--slot-b-frame-slice) fill stretch; }
.slot-c { border-image: var(--slot-c-frame) var(--slot-c-frame-slice) fill stretch; }
.slot-d { border-image: var(--slot-d-frame) var(--slot-d-frame-slice) fill stretch; }

/* Flex-wrap, not a fixed grid: however many answer boxes are actually
   visible right now share each row's width between them, and a lone
   trailing box still grows to fill the rest of ITS row — a fixed-
   column CSS Grid can't do this (auto-fit only collapses a column when
   NO row has anything in it, so an odd box left alone in the last row
   would stay half-width).

   Each box's flex-basis is a PERCENTAGE keyed to how many boxes are
   actually visible right now (render.js stamps .answers-count-N on
   this element, N = however many of A/B/C/D currently have
   visible:true), not a fixed rem width. A percentage basis is
   width-independent: at count 2 or 4 each box always claims >50% of
   the row, so at ANY pane width only 2 can ever fit before the rest
   wrap — 4 visible is therefore always exactly two rows of two, never
   3-then-1. The old fixed-20rem-basis version was tuned to look right
   at one specific pane width and silently reflowed differently
   whenever the pane (and so the row) was narrower or wider than that.

   flex:1 + min-height:0 lets this area absorb whatever vertical space
   .slot-topic doesn't use (see #filling-display's flex column above);
   align-content:stretch is what actually makes that space go INTO the
   boxes rather than sitting as blank room below them — it stretches
   each wrapped row to share the extra height, and align-items'
   default (stretch) then stretches every box in a row to match. A
   single visible answer, alone in one row, ends up filling the whole
   area — that's the literal "fill available space" result, not a
   bug, for exactly the same reason a single visible answer already
   fills the full row width. */
.answers-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}
.answers-wrap.answers-count-1 > .slot-box { flex: 1 1 100%; }
.answers-wrap.answers-count-2 > .slot-box,
.answers-wrap.answers-count-4 > .slot-box { flex: 1 1 calc(50% - 0.5rem); }
.answers-wrap.answers-count-3 > .slot-box { flex: 1 1 calc(33.3333% - 0.6667rem); }

/* Manual override: the emcee can force a single row or single column
   regardless of how many answers are visible or how wide the pane is,
   via console.html's Answers Arrangement control (theme's
   --answers-arrangement). CSS can't branch on a custom property's
   string value directly, so console.html's applyAnswersArrangement()
   reads that value and toggles one of these two classes instead —
   same reason .slot-hidden is a class rather than a var(). These come
   after the count-based rules above at equal selector specificity
   (three classes each), so source order lets them win whenever both a
   count class and an arrange class are present together. */
.answers-wrap.arrange-row { flex-direction: row; flex-wrap: nowrap; }
.answers-wrap.arrange-row > .slot-box { flex: 1 1 0; }
.answers-wrap.arrange-column { flex-direction: column; flex-wrap: nowrap; }
.answers-wrap.arrange-column > .slot-box { flex: 1 1 0; }

/* ── OVERLAY (console.html only — guest-answer recap) ──────
   Shown in #filling-display instead of the current filling while the
   emcee has the overlay toggled visible (console-overlay.js). Not a
   filling — no topic/answers shape — so it isn't part of
   render.js's renderFilling(); console-overlay.js's own
   renderOverlayDisplay() builds this instead. guest.html never
   triggers overlayVisible, so these rules are simply unused there. */
.overlay-wrap { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.overlay-row { padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.overlay-row:last-child { border-bottom: none; }
.overlay-question { font-weight: bold; margin-bottom: 0.3em; }
.overlay-qualifier { font-style: italic; opacity: 0.85; }

/* ── RENDERED TEXT FIELDS ───────────────────────────────────
   Every filling field's rendered output in the display pane OBS
   captures. Not editable — see console.html's sidebar for input.
   pre-wrap on both: a typed line break must survive into the display
   pane the same way for the Topic (+ its subtitle) as it already did
   for Answers A-D. */
.field-text, .field-richtext { white-space: pre-wrap; }

/* ── EMPTY STATE ────────────────────────────────────────── */
.empty-state { padding: 3em; text-align: center; color: var(--color-muted); }

.hidden { display: none; }

/* ── TAG FILTER (console.html's left pane) ─────────────────
   Same registry-search-with-suggestions component the old editors
   used for applying a tag to one entry — reused here to filter the
   filling list by tag instead. */
.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; }

.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); }

.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;
}

/* ── FILLING LIST (console.html's left pane) ───────────────
   One button list per template group, plus the currently-open item.
   Reused id/class names from the old entries sidebar. */
#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); }
.result-item-tags { display: block; }