/* console_slots.css — the SLOT component's stylesheet, declared once for every reader that
   shows the model a prompt in pieces: the Prompt page (the whole system prompt, the blocks
   added on some turns, the parts always added) and the turn drawer (everything Ralph read on
   ONE turn). The per-turn input record ADR, Amendment 2026-09-08 (Decision 10); the look
   itself was settled on Connor's eye over the 2026-09-02 Prompt page mockups and moved here
   verbatim from prompt_workspace.css.

   ⚠ THE THIRD SHARED INTERIOR FILE, by the rule the first two follow (console_render.css for
   the transcript, console_panel.css for the evidence block): a copy that has drifted renders
   something wrong in exactly one station, and nothing can report it. The drawer WAS that
   drifted copy — boxed blocks with grey header bars, the look Connor had rejected for the
   Prompt page — until this file replaced both copies with one. Connor, 2026-09-08: "I want
   any changes made to one styling to apply to the other."

   Rooted at the component's own classes (.slotview, .slotlist, .slots, .slot, .glue) and
   NEVER at a [data-workspace] attribute: a workspace rule that re-declared one of these
   would outrank it and win for that station alone with this file still looking
   authoritative. _verify_slot_view.py derives the owned class set from this file and
   reddens on the first workspace stylesheet, or the panel stylesheet, that re-declares one.

   Token-only: every size a --text-* rung, every corner a --radius-* rung, the caret the
   caret family's small rung (the console design tokens record, Amendment 2026-09-02). No
   box around a slot, no fill on its header, no shadow (design rule 8), no one-sided rule
   (design rule 7). */

/* THE TWO COLUMNS — the slot list, then the slots. The shape is the component's so the two
   readers cannot lay it out differently. Linked from the shell; a reader mounts a
   .slotview wherever it lives (the Prompt page's zone, the drawer's body). */
.slotview { display:grid; grid-template-columns:270px 1fr; gap:28px; align-items:start; }

.slotview .slotlist { position:sticky; top:0; max-height:calc(100vh - 140px); overflow:auto;
    border:1px solid var(--border); border-radius:var(--radius-control); padding:8px 6px; }

.slotview .slotlist-head { font-size:var(--text-tiny); letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-500); font-weight:700; padding:6px 8px 8px; }

.slotview .slotlist a { display:block; padding:5px 8px; border-radius:var(--radius-inset); text-decoration:none;
    color:var(--ink-800); font-size:var(--text-label); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.slotview .slotlist a:hover { background:var(--flex-blue-50); }

.slotview .slotmain { min-width:0; }

/* THE SLOT — one renderer, every list (the Prompt workspace ADR, Decision 6, as widened). No
   box: a rule between slots, a quiet header, the text beneath. The header is a <summary>, so
   the whole list folds natively. */
.slots { display:flex; flex-direction:column; }

.slots .slot { border-top:1px solid var(--ink-100); padding:10px 0 14px; }

.slots .slot:first-child { border-top:0; }

.slots .slot > summary { display:flex; align-items:flex-start; gap:8px; padding:0 0 2px; cursor:pointer;
    list-style:none; user-select:none; }

.slots .slot > summary::-webkit-details-marker { display:none; }

/* The caret: the family's glyph pair at its SMALL scale (the caret family, Decision 26), in
   the primary ink, nudged two pixels up so its ink tops out on the name's cap line. */
.slots .slot > summary::before { content:var(--caret-open); color:var(--ink-900);
    font-size:var(--caret-scale-small); line-height:1; margin-top:-2px; }

.slots .slot:not([open]) > summary::before { content:var(--caret-closed); }

.slots .slot-name { font-weight:600; font-size:var(--text-prose); color:var(--ink-900); }

.slots .slot-text { white-space:pre-wrap; font-size:var(--text-prose); line-height:1.6; color:var(--ink-800);
    padding:2px 0 0 22px; }

/* Glue: the template's own words, a composite's joiner, a generated catalogue, a block's
   trigger sentence, a part's when-sentence — all the bytes the model reads that did not come
   from a field in the prompt file. Grey, so the reader can tell the two apart; still inside
   the slot, because the model reads them (Connor: "All text should be in a slot box"). */
.slots .glue { color:var(--ink-400); }

/* A hidden slot, and its row in the slot list: the `hidden` attribute, honoured here because
   the list row's own `display:block` would otherwise outrank the attribute's default. A slot
   that can be hidden is a state of the component, not of one page — the Prompt page's search
   sets it (the Prompt workspace ADR, Amendment 2026-09-16, Decision 14) and the drawer
   inherits it. */
.slots .slot[hidden], .slotview .slotlist a[hidden] { display:none; }