/* studio-editor.css — THE ELASTIC ROOM's styles (No-Code Studio UX-S3 + UX-S4).
   Extracted from studio.html's inline block (UX-S4) so BOTH the Studio page (studio.html) AND the Panel
   (index.html — the flagship context door floats the Room over the panel) share ONE stylesheet: the Room must
   look right wherever it opens. Every hue is a token (lib/tokens.css) — zero raw hex; the authoring accent is
   the muted indigo --ui-selection. */

/* ── THE ELASTIC ROOM — an in-page, AUTO-SIZED overlay. The panel has NO fixed/max height; if the Room is taller
   than the viewport the OVERLAY scrolls (overflow:auto), so the panel never grows an inner scrollbar (UX-CORE §4.1).
   z-index 9600 (UX-S4b): the Room floats ABOVE the depth-2 Card overlay (9000) — the Card-rail door opens it over
   the open Card — and above the palettes (9500), which never coexist with it (single-owner dormancy). */
.editor-overlay { position: fixed; inset: 0; z-index: 9600; overflow: auto; display: flex;
  align-items: flex-start; justify-content: center; padding: 40px 18px 80px; }
.editor-overlay[hidden] { display: none; }
.editor-scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 42%, transparent); }
.editor-panel { position: relative; width: 100%; max-width: 600px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 22%, transparent); }
.editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.editor-title { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.editor-close { display: inline-flex; align-items: center; gap: 8px; font: inherit; color: var(--mid);
  background: var(--card); border: 1px solid var(--hairline); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.editor-close:hover { color: var(--ink); border-color: var(--mid); }
.editor-close:focus-visible { outline: 2px solid var(--ui-selection); outline-offset: 1px; }
.editor-close-x { font-size: 11px; }
.editor-esc { font-size: 10px; color: var(--faint); letter-spacing: .04em; }
.editor-host { padding: 4px 0; }
.room-body { padding: 16px 18px 18px; }

/* ── the pre-fill CONTEXT HEADER (UX-S4) — the binding-payload display when the context door pre-scopes the Room */
.room-context-wrap { margin-bottom: 14px; }
.room-context { border: 1px solid color-mix(in srgb, var(--ui-selection) 35%, var(--hairline)); border-radius: 10px;
  background: var(--ui-selection-bg); padding: 10px 13px; }
.room-context-lead { font-size: 13.5px; color: var(--ink); }
.room-context-measure, .room-context-who { font-weight: 700; }
.room-context-k { font-size: 11px; color: var(--muted); }
.room-context-facts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: var(--mid);
  font-variant-numeric: tabular-nums; }
.room-context-fact { white-space: nowrap; }
.room-context-seed { margin-top: 8px; font-size: 12px; color: var(--role-info); font-style: italic; }
.room-context-window { margin-top: 5px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* the honest fault variant (P12) — never a fabricated pre-fill */
.room-context-fault { border-color: var(--role-info); background: var(--role-info-soft); }
.room-context-fault-t { font-size: 13px; font-weight: 650; color: var(--role-info); }
.room-context-fault-b { font-size: 12px; color: var(--mid); line-height: 1.5; margin-top: 3px; }

/* the sentence readback — the hero; NEVER clipped (no ellipsis / line-clamp / max-height — the P1 rider) */
.room-sentence-wrap { margin-bottom: 12px; }
.room-sentence { font-size: 16px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.room-sentence-text { font-weight: 550; }
.room-sentence[data-phase="pending"] .room-sentence-text.is-checking { opacity: .55; }
.room-sentence-checking { font-size: 11px; color: var(--faint); font-style: italic; }
.room-sentence-placeholder { color: var(--muted); font-size: 14px; font-style: italic; }
.room-sentence-fault { color: var(--role-info); font-size: 13.5px; }

/* the consequence region — THE FOUR-COUNT BLOCK (UX-S6). idle/pending/error are single-line states; the applied
   block is a column: the four-count grid → stamp → reach → named faces. */
.room-consequence-wrap { margin-bottom: 14px; }
.room-consequence { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.room-consequence[data-phase="pending"]:not(.room-counts) { font-style: italic; }
.room-consequence-checking { font-style: italic; color: var(--faint); }
.room-consequence-idle { font-style: italic; }
.room-consequence-fault { color: var(--role-info); }

/* the four counts — fires · quiet · can't-assess (blue) · not-for-them. A count is INFORMATION, never an alarm:
   NO count borrows the danger axis (P4); can't-assess alone wears the epistemic --role-info blue (at 0 and at N). */
.room-counts { border: 1px solid var(--hairline); border-radius: 10px; padding: 11px 13px; }
.room-counts[data-counting] { opacity: .6; }   /* in-flight currency dim (P11) — the HELD real numbers, dimmed, never zeroed */
.room-counts-grid { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.room-count { display: inline-flex; align-items: baseline; gap: 5px; }
.room-count-num { font-size: 17px; font-weight: 700; color: var(--ink); }
.room-count-lbl { font-size: 11.5px; color: var(--muted); }
.room-count[data-role="info"] .room-count-num,
.room-count[data-role="info"] .room-count-lbl { color: var(--role-info); }   /* can't-assess: the epistemic blue channel */
.room-counts-counting { display: inline-block; margin-top: 6px; font-size: 11px; font-style: italic; color: var(--faint); }
.room-counts-stamp { margin-top: 7px; font-size: 11px; color: var(--faint); }
.room-counts-reach { margin-top: 6px; font-size: 12px; color: var(--mid); }
.room-reach-n { color: var(--ink); font-weight: 700; }

/* the named faces — fired patients (each opens the real Card, the id-space law) + can't-assess patients with their
   per-patient reason ("PTH — not on record") in the epistemic blue. */
.room-faces { margin-top: 10px; }
.room-faces-lead { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.room-face { display: inline-block; color: var(--ui-selection); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-selection) 35%, transparent); margin: 0 8px 3px 0; }
.room-face:hover { border-bottom-color: var(--ui-selection); }
.room-face:focus-visible { outline: 2px solid var(--ui-selection); outline-offset: 1px; }
.room-face-more { font-size: 11px; color: var(--muted); }
.room-cant { margin-top: 9px; }
.room-cant-list { margin-top: 3px; display: flex; flex-direction: column; gap: 2px; }
.room-cant-item { display: block; color: var(--ink); text-decoration: none; }
.room-cant-item:focus-visible { outline: 2px solid var(--ui-selection); outline-offset: 1px; }
.room-cant-who { border-bottom: 1px solid transparent; }
.room-cant-item:hover .room-cant-who { border-bottom-color: var(--mid); }
.room-cant-reason { color: var(--role-info); }   /* the epistemic channel — the per-patient "what's missing" */

/* the slot form */
.room-form { margin: 0; }
.room-what { border: 1px solid var(--hairline); border-radius: 10px; padding: 12px 14px 14px; margin: 0; }
.room-legend { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
.room-slot { display: flex; align-items: center; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.room-slot-k { font-size: 12px; color: var(--mid); min-width: 92px; }
.room-slot-suffix, .room-slot-hint { font-size: 11.5px; color: var(--muted); }
.room-slot-hint { font-style: italic; flex-basis: 100%; margin-left: 92px; }
.room-input { font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 6px; padding: 5px 8px; }
.room-input:focus-visible { outline: 2px solid var(--ui-selection); outline-offset: 1px; border-color: var(--ui-selection); }
.room-num { width: 92px; }
.room-inline { display: inline-flex; align-items: center; gap: 6px; }
.room-unit { font-size: 12px; color: var(--muted); }
.room-clause { display: contents; }

/* the template toggle */
.room-template { display: flex; gap: 8px; flex-wrap: wrap; }
.room-tpl { display: inline-flex; flex-direction: column; gap: 1px; border: 1px solid var(--hairline); border-radius: 8px;
  padding: 6px 11px; cursor: pointer; background: var(--paper); }
.room-tpl.is-on { border-color: var(--ui-selection); background: var(--ui-selection-bg); }
.room-tpl input { position: absolute; opacity: 0; width: 0; height: 0; }
.room-tpl-t { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.room-tpl-h { font-size: 10.5px; color: var(--muted); }
.room-tpl:focus-within { outline: 2px solid var(--ui-selection); outline-offset: 1px; }

/* state-gate chips */
.room-states { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.room-state-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--mid);
  border: 1px solid var(--hairline); border-radius: 100px; padding: 2px 10px; cursor: pointer; background: var(--paper); }
.room-state-chip.is-on { color: var(--ui-selection); border-color: color-mix(in srgb, var(--ui-selection) 45%, var(--hairline)); background: var(--ui-selection-bg); }
.room-state-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.room-state-chip:focus-within { outline: 2px solid var(--ui-selection); outline-offset: 1px; }
.room-scope-read { font-size: 12.5px; color: var(--ink); }

/* the read-only compound view (P1/P5) */
.room-compound-notice { font-size: 12.5px; color: var(--role-info); background: var(--role-info-soft); border: 1px solid var(--role-info);
  border-radius: 8px; padding: 9px 12px; }
.room-compound-legend { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
.room-compound-list { margin: 0; padding-left: 18px; }
.room-compound-clause { font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; margin: 3px 0; }

/* the validation ladder (CORE-12) — refuse (amber) blocks · acknowledge gates · advise informs */
.room-ladder[data-ladder="empty"] { display: none; }
.room-ladder { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.room-ladder-group { border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 11px; }
.room-ladder-group[data-role="attention"] { border-color: color-mix(in srgb, var(--role-attention) 45%, var(--hairline)); background: var(--role-attention-soft); }
.room-ladder-h { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.room-ladder-group[data-role="attention"] .room-ladder-h { color: var(--role-attention); }
.room-finding { display: block; font-size: 12.5px; color: var(--ink); margin: 4px 0; }
.room-finding-ack { cursor: pointer; }
.room-finding-advise { color: var(--mid); }
.room-finding-msg { line-height: 1.4; }
.room-instead { display: inline-flex; align-items: baseline; gap: 5px; font: inherit; font-size: 11.5px; color: var(--ui-selection);
  background: var(--card); border: 1px solid color-mix(in srgb, var(--ui-selection) 40%, var(--hairline)); border-radius: 6px;
  padding: 2px 8px; margin-top: 4px; cursor: pointer; text-align: left; }
.room-instead:hover { border-color: var(--ui-selection); }
.room-instead:focus-visible { outline: 2px solid var(--ui-selection); outline-offset: 1px; }
.room-instead-k { font-weight: 700; letter-spacing: .03em; }

/* the action rail (Save draft) */
.room-rail-wrap { margin-top: 16px; }
.room-rail { display: flex; align-items: center; gap: 12px; }
.room-save { font: inherit; font-size: 13px; font-weight: 650; color: var(--stone-0); background: var(--ui-selection);
  border: 1px solid var(--ui-selection); border-radius: 8px; padding: 7px 18px; cursor: pointer; }
.room-save:hover { background: color-mix(in srgb, var(--ui-selection) 88%, var(--ink)); }
.room-save:focus-visible { outline: 2px solid var(--ui-selection); outline-offset: 2px; }
.room-save[disabled] { color: var(--muted); background: var(--card); border-color: var(--hairline); cursor: not-allowed; }
.room-save-note { font-size: 11.5px; color: var(--muted); }
.room-save-note[data-role="info"] { color: var(--role-info); }

/* the optional extras (time-box + why-note) */
.room-extras { margin-top: 14px; border-top: 1px dashed var(--hairline); padding-top: 12px; }
.room-optional { font-weight: 400; color: var(--faint); font-size: 10.5px; }
.room-note { width: 100%; min-width: 220px; resize: vertical; font-size: 12.5px; }
.room-slot-note { align-items: flex-start; }
.room-vocab-fault { font-size: 13px; color: var(--role-info); padding: 6px 2px; }