/* SPEAKFRAME V4 — surfaces around the stage: professional preflight, Presenter View, audience window.
 * Same tokens as base.css (paper / gray / signal / vermilion; Archivo, Atkinson, Newsreader, Plex Mono). */

/* ---------- preflight (V4.1): the essentials in a configuration panel; everything optional folded in "Avanzado" ---------- */
.setup-ready { font: 500 13px/1.5 var(--f-mono); color: var(--signal); }
.cfg label, .more-all label, .more-all legend, .calib h3 + .field-hint, .priors h3 {
  font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}
.more-all label.btn { font: 700 14px/1 var(--f-display); font-stretch: 105%; letter-spacing: .005em; text-transform: none; color: var(--paper); }
.more-all .toggle span { font: 400 16px var(--f-text); text-transform: none; letter-spacing: 0; color: var(--paper-dim); }
.more-all .toggle .toggle-hint { color: var(--mute); font-size: 14px; }
.calib h3 + .field-hint { font: 400 14px/1.45 var(--f-text); letter-spacing: 0; text-transform: none; }

.mode { margin-top: 22px; max-width: 64em; padding: 4px 0 4px 16px; border-left: 3px solid var(--signal); }
.mode[data-mode="compat"] { border-left-color: var(--paper-dim); }
.mode[data-mode="text"] { border-left-color: var(--warn); }
.mode-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.mode-tag { font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); white-space: nowrap; }
.mode[data-mode="compat"] .mode-tag { color: var(--paper); }
.mode[data-mode="text"] .mode-tag { color: var(--warn); }
.mode-text { color: var(--paper-dim); font-size: 16px; }
.mode-matrix > summary { display: inline-block; margin-top: 8px; cursor: pointer; font: 400 13px/1.4 var(--f-mono); color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.mode-matrix > summary:hover { color: var(--paper); }
.matrix-wrap { overflow-x: auto; margin-top: 12px; }
.matrix { border-collapse: collapse; min-width: 640px; font: 400 14px/1.35 var(--f-text); color: var(--paper-dim); }
.matrix caption { caption-side: top; text-align: left; padding-bottom: 10px; font: 400 12px/1.4 var(--f-mono); color: var(--mute); }
.matrix th, .matrix td { text-align: left; vertical-align: top; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--rule); }
.matrix thead th { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.matrix tbody th { font-weight: 600; color: var(--paper); }

.more-all { grid-column: 1 / -1; display: grid; border-top: 1px solid var(--rule); }
.more { border-bottom: 1px solid var(--rule); }
.more > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 20px 0; cursor: pointer; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "+"; width: 1.1em; font: 500 20px/1 var(--f-mono); color: var(--signal); }
.more[open] > summary::before { content: "–"; }
.more > summary:hover .more-t { color: var(--signal); }
.more-t { font: 750 21px/1.2 var(--f-display); }
.more-s { font: 400 13px/1.4 var(--f-mono); color: var(--mute); }
.more-body { display: grid; gap: 20px; max-width: 1000px; padding: 0 0 30px 1.6em; }
.more-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; }
.more-body .field-row--full, .more-body .calib, .more-body .toggles, .more-body .seg { grid-column: 1 / -1; }
.more-body .keep { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rule); }

.calib { display: grid; gap: 16px; padding: 20px 22px; background: var(--ink-2); border: 1px solid var(--rule); }
.calib h3 { font: 700 19px/1.2 var(--f-display); margin-bottom: 6px; }
.calib h3 .label-hint { font: 400 13px var(--f-mono); margin-left: 8px; }
.calib-run { padding: 4px 0 4px 18px; border-left: 3px solid var(--signal); }
.calib-step { font: 500 12px var(--f-mono); letter-spacing: .1em; color: var(--mute); }
.calib-say { margin-top: 6px; font: 600 clamp(22px, 2.4vw, 34px)/1.2 var(--f-voice); font-variation-settings: "opsz" 48; color: var(--paper); }
.calib-heard { min-height: 1.5em; margin-top: 10px; font: 400 15px/1.4 var(--f-mono); color: var(--paper-dim); }
.calib-heard::before { content: "Escuché → "; color: var(--mute); }
.calib-heard:empty::before { content: ""; }
.calib-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.learned { display: grid; gap: 12px; }
.learned-sum { font: 400 15px/1.5 var(--f-text); color: var(--paper-dim); }
.learned-sum strong { color: var(--paper); }
.learned-list { list-style: none; border-top: 1px solid var(--rule); }
.learned-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.lr-pair { font: 500 16px/1.3 var(--f-text); min-width: 0; overflow-wrap: anywhere; }
.lr-pair s { color: var(--mute); text-decoration-color: var(--mute); }
.lr-pair b { color: var(--signal); font-weight: 650; }
.lr-pair .lr-n { font: 400 12px var(--f-mono); color: var(--mute); margin-left: 8px; }
.lr-mode { display: inline-flex; align-items: center; gap: 8px; font: 400 14px var(--f-text); color: var(--paper-dim); cursor: pointer; white-space: nowrap; }
.lr-mode input { width: 18px; height: 18px; accent-color: var(--signal); margin: 0; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rule-2); background: transparent; color: var(--paper-dim); font: 500 15px/1 var(--f-mono); cursor: pointer; }
.icon-btn:hover { color: var(--paper); border-color: var(--paper-dim); }
.icon-btn:disabled { opacity: .35; cursor: default; }

.deck-drop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px 20px; border: 1px dashed var(--rule-2); }
.deck-drop p { max-width: 46em; color: var(--paper-dim); font-size: 16px; }
.deck-drop strong { color: var(--paper); }
.deck-drop.is-over { border-color: var(--signal); background: var(--ink-2); }
.deck-msg { min-height: 0; font: 400 15px/1.45 var(--f-text); color: var(--paper-dim); }
.deck-msg:empty { display: none; }
.deck-msg { display: grid; gap: 4px; }
.deck-msg .deck-bad { color: var(--warn); }
.deck-msg .deck-bad::before { content: "! "; font-family: var(--f-mono); }
.deck { list-style: none; display: grid; }
.deck:empty { display: none; }
.deck li { display: grid; grid-template-columns: 2.2em 104px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.deck li:last-child { border-bottom: 1px solid var(--rule); }
.deck-n { font: 500 12px var(--f-mono); color: var(--mute); font-variant-numeric: tabular-nums; }
.deck-thumb { width: 104px; height: 64px; object-fit: contain; background: var(--ink); border: 1px solid var(--rule); }
.deck-fields { display: grid; gap: 6px; min-width: 0; }
.deck-fields input[type="text"] { padding: 7px 10px; font-size: 15px; }
.deck-meta { font: 400 12px var(--f-mono); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-actions { display: flex; gap: 4px; }

.priors { display: grid; gap: 14px; padding: 18px 20px; background: var(--ink-2); border: 1px solid var(--rule); }
.priors-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.priors h3 { margin-bottom: 10px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 2px; padding-left: 10px; border: 1px solid var(--rule-2); font: 500 15px/1 var(--f-text); color: var(--paper); }
.chips .icon-btn, .pq .icon-btn { width: 30px; height: 30px; border: 0; }
.chips:empty::after, .pq:empty::after { content: "—"; color: var(--mute); }
.pq { list-style: none; display: grid; }
.pq li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); font: 520 18px/1.3 var(--f-voice); color: var(--paper); }
.sum-reh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sum-rehearsal { border-top: 2px solid var(--signal); }

/* ---------- Present Mode: one screen (the stage fills it) or the Presenter View (stage preview + panel) ---------- */
.stage-wrap { position: absolute; inset: 0; }
.stage-wrap.is-idle { cursor: none; }
.pv-label { display: none; }
.dock { right: 3.2vw; top: 7vh; max-width: 94vw; }
.dock-group { display: inline-flex; border-right: 1px solid var(--rule); }
.dock-group button { border-right: 0; }
.dock-group button[data-cmd="media-prev"], .dock-group button[data-cmd="media-next"] { padding: 0 9px; }
.dock button[aria-pressed="true"] { color: var(--paper); background: var(--ink-3); }
.help { right: 3.2vw; top: 14vh; max-height: 76vh; overflow-y: auto; }
.notice { left: 3.2vw; top: 14vh; max-width: min(560px, 60vw); }

body[data-layout="presenter"] .view-present:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 440px); background: #080706; }
body[data-layout="presenter"] .stage-wrap { position: relative; inset: auto; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; min-height: 0; padding: 14px 20px; overflow: hidden; }
body[data-layout="presenter"] .stage { position: relative; inset: auto; flex: none; align-self: center; width: min(100%, calc((100vh - 150px) * 16 / 9)); aspect-ratio: 16 / 9; height: auto; border: 1px solid var(--rule-2); }
body[data-layout="presenter"] .pv-label { display: flex; justify-content: space-between; gap: 12px; align-self: center; width: min(100%, calc((100vh - 150px) * 16 / 9)); font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
body[data-layout="presenter"] .pv-label #pvAudTag { color: var(--signal); }
body[data-layout="presenter"] .pv-label #pvAudTag.is-off { color: var(--mute); }
body[data-layout="presenter"] .pv-label #pvAudTag.is-lost { color: var(--warn); }
body[data-layout="presenter"] .dock { position: static; align-self: center; opacity: 1; visibility: visible; justify-content: center; max-width: 100%; transition: none; }
/* the presenter view lists the keys in its panel and in Atajos: the dock drops the key hints to fit one row */
body[data-layout="presenter"] .dock kbd, body[data-layout="presenter"] .dock [data-cmd="fullscreen"] { display: none; }
body[data-layout="presenter"] .dock button { padding: 0 10px; gap: 0; letter-spacing: .04em; }
body[data-layout="presenter"] .dock [data-cmd="media-prev"]::before { content: "←"; }
body[data-layout="presenter"] .dock [data-cmd="media-next"]::before { content: "→"; }
body[data-layout="presenter"] .stage-wrap.is-idle { cursor: auto; }
body[data-layout="presenter"] .type-bar { position: static; align-self: center; width: min(100%, calc((100vh - 150px) * 16 / 9)); }
body[data-layout="presenter"] .notice { left: 36px; top: 46px; }
body[data-layout="presenter"] .help { top: 46px; right: 28px; }

.presenter { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; background: var(--ink); border-left: 1px solid var(--rule); }
.pv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.pv-state { display: flex; align-items: center; gap: 10px; min-width: 0; font: 650 18px/1.2 var(--f-display); }
.pv-st { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-dot { flex: none; width: 10px; height: 10px; background: var(--signal); }
.pv-state[data-state="paused"] .pv-dot, .pv-state[data-state="stopped"] .pv-dot { background: var(--mute); }
.pv-state[data-state="starting"] .pv-dot, .pv-state[data-state="reconnecting"] .pv-dot { background: var(--paper-dim); animation: sf-blink 1s steps(2, start) infinite; }
.pv-state[data-state="offline"] .pv-dot, .pv-state[data-state="nomic"] .pv-dot, .pv-state[data-state="denied"] .pv-dot, .pv-state[data-state="error"] .pv-dot, .pv-state[data-state="stalled"] .pv-dot { background: var(--warn); }
.pv-state[data-state="offline"], .pv-state[data-state="nomic"], .pv-state[data-state="denied"], .pv-state[data-state="error"], .pv-state[data-state="stalled"] { color: var(--warn); }
@keyframes sf-blink { to { opacity: .2; } }
.pv-clock { font: 500 22px/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--paper); }
.pv-engine { grid-column: 1 / -1; font: 400 13px/1.4 var(--f-mono); color: var(--mute); }
.pv-block { padding: 14px 20px 16px; border-bottom: 1px solid var(--rule); }
.pv-block h2 { margin-bottom: 10px; font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pv-audline { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 15px/1.35 var(--f-text); color: var(--paper-dim); }
.pv-audline .btn { flex: none; white-space: nowrap; }
.pv-aud[data-state="connected"] #pvAud { color: var(--signal); }
.pv-aud[data-state="lost"] #pvAud, .pv-aud[data-state="blocked"] #pvAud { color: var(--warn); }
.pv-scene { font: 650 19px/1.25 var(--f-display); overflow-wrap: anywhere; }
.pv-scene .pv-kind { display: block; margin-bottom: 4px; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.pv-conf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font: 400 13px/1.3 var(--f-mono); color: var(--mute); }
.pv-conf:empty { display: none; }
.pv-meter { display: inline-flex; gap: 2px; }
.pv-meter i { width: 14px; height: 4px; background: var(--rule-2); }
.pv-meter i.on { background: var(--signal); }
.pv-aside { display: block; margin-top: 6px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .04em; color: var(--paper-dim); }
.pv-topic { margin-top: 6px; font: 400 14px/1.35 var(--f-text); color: var(--paper-dim); }
.pv-topic:empty { display: none; }
.pv-tx { flex: 1 0 auto; }
.pv-toggle { padding: 0; border: 0; background: none; font: 400 12px var(--f-mono); color: var(--mute); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: right; }
.pv-toggle[aria-pressed="true"] { color: var(--signal); }
.pv-lines { list-style: none; display: grid; gap: 6px; max-height: 26vh; overflow: hidden; font: 400 15px/1.4 var(--f-text); color: var(--mute); }
.pv-lines li:last-child { color: var(--paper); }
.pv-fix { margin-left: 4px; padding: 1px 7px; border: 1px solid var(--signal); background: none; color: var(--signal); font: 500 11px/1.5 var(--f-mono); letter-spacing: .04em; cursor: pointer; vertical-align: 1px; }
.pv-fix:hover { background: var(--signal); color: var(--ink); }
.learned-ia { display: block; margin-top: 6px; color: var(--paper-dim); }
.pv-lines.is-raw { font: 400 13px/1.45 var(--f-mono); }
.pv-interim { min-height: 1.4em; margin-top: 6px; font: 400 15px/1.4 var(--f-text); color: var(--mute); font-style: italic; }
.pv-keys kbd { font-size: 10px; margin-left: 2px; color: var(--mute); }
.pv-thumbs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.pv-thumbs:empty::after { content: "Sin imágenes. Agregalas en Preparación → Avanzado → Imágenes por palabra."; grid-column: 1 / -1; font: 400 13px/1.4 var(--f-text); color: var(--mute); }
.pv-thumbs button { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 1px solid var(--rule-2); background: var(--ink-2); cursor: pointer; }
.pv-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pv-thumbs span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px; background: rgb(13 12 10 / .85); font: 500 10px/1.4 var(--f-mono); color: var(--paper-dim); text-align: left; }
.pv-thumbs .is-on button { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.pv-thumbs .is-next button { border-color: var(--paper-dim); }
.pv-next { margin-top: 8px; font: 400 13px/1.4 var(--f-mono); color: var(--mute); }
.pv-next:empty { display: none; }
.pv-anchors { list-style: none; display: grid; margin-top: 10px; }
.pv-anchors button { display: flex; gap: 10px; width: 100%; padding: 7px 0; border: 0; border-top: 1px solid var(--rule); background: none; text-align: left; font: 500 14px/1.3 var(--f-text); color: var(--paper-dim); cursor: pointer; }
.pv-anchors button:hover { color: var(--paper); }
.pv-anchors .is-on button { color: var(--signal); }
.pv-anchors b { font: 500 11px/1.6 var(--f-mono); color: var(--mute); }
.pv-lat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font: 400 13px/1.4 var(--f-mono); }
.pv-lat dt { color: var(--mute); }
.pv-lat dd { margin: 0; color: var(--paper-dim); font-variant-numeric: tabular-nums; }
.pv-learn { margin-top: 10px; font: 400 13px/1.45 var(--f-text); color: var(--mute); }
.pv-learn:empty { display: none; }

@media (max-width: 980px) {
  body[data-layout="presenter"] .view-present:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; overflow-y: auto; }
  body[data-layout="presenter"] .stage { width: 100%; }
  body[data-layout="presenter"] .pv-label, body[data-layout="presenter"] .type-bar { width: 100%; }
  .presenter { border-left: 0; border-top: 1px solid var(--rule); overflow: visible; }
}
@media (max-width: 720px) {
  .more-2, .priors-cols { grid-template-columns: minmax(0, 1fr); }
  .more-body { padding-left: 0; }
  .deck li { grid-template-columns: 76px minmax(0, 1fr); }
  .deck-n { display: none; }
  .deck-thumb { width: 76px; height: 50px; }
  .deck-actions { grid-column: 1 / -1; }
  .learned-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .lr-mode { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .pv-dot { animation: none !important; } }
body[data-motion="reduced"] .pv-dot { animation: none !important; }

/* ---------- audience window: only the presentation ---------- */
body.audience { overflow: hidden; }
main.view-audience { max-width: none; margin: 0; padding: 0; }
.view-audience .status .st-label, .view-audience .status .st-sub, .view-audience .stage-time, .view-audience .stage-radar { display: none !important; }
.view-audience .stage.is-idle, .view-audience.is-idle { cursor: none; }
.aud-wait { position: fixed; inset: 0; z-index: var(--z-cover); display: grid; align-content: center; justify-items: start; gap: 28px; padding: 0 8vw; background: var(--ink); }
.aud-wait[hidden] { display: none !important; }
.aud-wait .wm { height: clamp(22px, 3vw, 44px); }
.aud-title { max-width: 18em; font: 800 clamp(32px, 6vw, 110px)/.95 var(--f-display); font-stretch: 76%; letter-spacing: -.02em; text-wrap: balance; }
.aud-title:empty { display: none; }
.aud-hint { max-width: 40em; font: 400 clamp(14px, 1.3vw, 18px)/1.5 var(--f-mono); color: var(--mute); }
.aud-hint kbd { color: var(--paper-dim); }
body.audience[data-fullscreen] .aud-hint { display: none; }

/* =====================================================================================================================
   V4.1 — configuration panel. Open (docked to one side, reserving its space), minimized (a pill with the basic state
   and Presentar) or hidden (a discreet button). On small screens it is a bottom sheet: modal while open, a bar when
   minimized. One layer scale (--z-*): the panel always sits above the page; the page never paints into it.
   ===================================================================================================================== */
.view-setup .topbar { position: sticky; top: 0; z-index: var(--z-bar); min-height: var(--setup-bar); padding-block: 0; background: var(--ink); }
.setup { isolation: isolate; } /* everything in the page stays in its own layer, under the panel */
.setup > * { grid-column: 1 / -1; min-width: 0; }

.cfg {
  position: fixed; z-index: var(--z-panel); top: calc(var(--setup-bar) + var(--cfg-gap)); right: var(--cfg-gap);
  width: var(--cfg-w); max-height: calc(100vh - var(--setup-bar) - 2 * var(--cfg-gap)); max-height: calc(100dvh - var(--setup-bar) - 2 * var(--cfg-gap));
  display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--rule-2);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 22px 60px rgb(0 0 0 / .55);
  animation: cfg-in var(--t-enter) var(--ease) both;
}
.view-setup[data-cfg-side="left"] .cfg { right: auto; left: var(--cfg-gap); }
.cfg.is-dragging { transition: none; cursor: grabbing; box-shadow: 0 0 0 1px var(--signal), 0 30px 70px rgb(0 0 0 / .65); }
.cfg.is-snapping { transition: translate var(--t-enter) var(--ease); } /* drag uses `translate`, so it never fights the entrance animation */
@keyframes cfg-in { from { opacity: 0; transform: translateY(10px); } }

.cfg-head {
  flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--rule); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
}
.cfg-grip { flex: none; width: 10px; height: 14px; background: radial-gradient(circle, var(--mute) 1.2px, transparent 1.6px) 0 0 / 5px 5px; opacity: .8; }
.cfg-title { flex: 1 1 auto; min-width: 0; font: 750 17px/1.2 var(--f-display); font-stretch: 100%; }
.cfg-title:focus, .cfg-title:focus-visible { outline: none; } /* a landing point for focus, not a control */
.cfg-tools { display: flex; gap: 2px; cursor: default; }
.cfg-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; background: none; color: var(--paper-dim); cursor: pointer; }
.cfg-btn:hover { color: var(--paper); border-color: var(--rule-2); }
.cfg-btn svg, .cfg-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.cfg-ico rect { fill: var(--ink-2); stroke: currentColor; }

.cfg-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; container-type: inline-size;
  display: grid; gap: 16px; align-content: start; padding: 18px 20px 20px; scrollbar-gutter: stable;
  /* scroll shadows: a soft edge appears only where there is more to scroll */
  background: linear-gradient(var(--ink-2) 30%, rgb(21 20 17 / 0)) top / 100% 28px no-repeat local,
              linear-gradient(rgb(21 20 17 / 0), var(--ink-2) 70%) bottom / 100% 28px no-repeat local,
              linear-gradient(rgb(0 0 0 / .55), rgb(0 0 0 / 0)) top / 100% 12px no-repeat scroll,
              linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .55)) bottom / 100% 12px no-repeat scroll;
  background-color: var(--ink-2);
}
.cfg-kicker { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.cfg-kicker::before { content: ""; width: 18px; height: 2px; background: var(--signal); }
.cfg-2 { display: grid; gap: 16px; }
@container (min-width: 370px) { .cfg-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } }
.cfg .check--cfg { grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; padding: 14px 0 2px; border-top: 1px solid var(--rule); }
.check--cfg h3 { font: 700 17px/1.2 var(--f-display); }
.check--cfg .ck-detail { font-size: 15px; line-height: 1.45; }
.check--cfg .ck-action { grid-column: 2; justify-self: start; margin-top: 10px; }
.check--cfg .meter-line { width: min(200px, 100%); }
.cfg .go-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfg .go-alt .btn { padding: 0 10px; min-height: 44px; font-size: 15px; }
.cfg-foot { flex: none; display: grid; gap: 8px; padding: 14px 20px 16px; border-top: 1px solid var(--rule); background: var(--ink-2); }
.cfg-foot .btn-go { width: 100%; min-height: 56px; }
.cfg-foot .setup-note { font-size: 12px; }

/* the page reserves the panel's side while it is open: nothing in it ever runs under the panel */
@media (min-width: 960px) and (min-height: 480px) {
  .view-setup[data-cfg="open"][data-cfg-side="right"] .setup { margin-right: calc(var(--cfg-w) + 2 * var(--cfg-gap)); margin-left: auto; }
  .view-setup[data-cfg="open"][data-cfg-side="left"] .setup { margin-left: calc(var(--cfg-w) + 2 * var(--cfg-gap)); margin-right: auto; }
}
.view-setup[data-cfg="min"] .setup, .view-setup[data-cfg="hidden"] .setup { padding-bottom: 120px; }

/* minimized: one line with the basic state, and Presentar always at hand */
.cfg-pill {
  position: fixed; z-index: var(--z-panel); right: var(--cfg-gap); bottom: var(--cfg-gap); display: flex; align-items: center; gap: 4px;
  max-width: calc(100vw - 2 * var(--cfg-gap)); background: var(--ink-2); border: 1px solid var(--rule-2);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 14px 40px rgb(0 0 0 / .5); animation: cfg-in var(--t-enter) var(--ease) both;
}
.view-setup[data-cfg-side="left"] .cfg-pill, .view-setup[data-cfg-side="left"] .cfg-restore { right: auto; left: var(--cfg-gap); }
.cfg-pill-open {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 0 14px; border: 0; background: none; color: var(--paper);
  cursor: pointer; text-align: left;
}
.cfg-pill-open:hover .cfg-pill-t { color: var(--signal); }
.cfg-pill-t { font: 700 15px/1.2 var(--f-display); white-space: nowrap; }
.cfg-pill-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.2 var(--f-mono); letter-spacing: .02em; color: var(--mute); }
.cfg-pill-s::before { content: "·"; margin-right: 8px; }
.cfg-pill-s:empty { display: none; }
.cfg-pill-go { flex: none; margin: 6px 6px 6px 0; }
/* hidden: a discreet way back, always reachable */
.cfg-restore {
  position: fixed; z-index: var(--z-panel); right: var(--cfg-gap); bottom: var(--cfg-gap); display: grid; place-items: center; width: 48px; height: 48px;
  padding: 0; border: 1px solid var(--rule-2); background: var(--ink-2); color: var(--paper-dim); cursor: pointer; animation: cfg-in var(--t-enter) var(--ease) both;
}
.cfg-restore:hover { color: var(--signal); border-color: var(--paper-dim); }
.cfg-restore .cfg-ico { width: 20px; height: 20px; }
.cfg-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: rgb(8 7 6 / .74); animation: cfg-fade var(--t-enter) var(--ease) both; }
@keyframes cfg-fade { from { opacity: 0; } }

/* small or short screens: a bottom sheet (not draggable), a bar when minimized */
@media (max-width: 959.98px), (max-height: 479.98px) {
  .cfg, .view-setup[data-cfg-side="left"] .cfg {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: min(92vh, 780px); max-height: min(92dvh, 780px);
    border-width: 1px 0 0; padding-bottom: env(safe-area-inset-bottom); animation-name: cfg-sheet-in;
  }
  @keyframes cfg-sheet-in { from { transform: translateY(100%); } }
  .cfg-head { cursor: default; touch-action: auto; padding-top: 6px; position: relative; }
  .cfg-grip { position: absolute; left: 50%; top: 6px; width: 36px; height: 3px; margin-left: -18px; background: var(--rule-2); opacity: 1; }
  .cfg-side { display: none; }
  .cfg-pill, .view-setup[data-cfg-side="left"] .cfg-pill { left: 0; right: 0; bottom: 0; max-width: none; border-width: 1px 0 0; padding-bottom: env(safe-area-inset-bottom); justify-content: space-between; }
  .cfg-restore, .view-setup[data-cfg-side="left"] .cfg-restore { right: 12px; left: auto; bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .cfg-pill-t { display: none; }
  .cfg-pill-s::before { content: none; }
  .cfg .go-alt { grid-template-columns: 1fr; }
}
@media (max-height: 560px) { .cfg-foot .setup-note { display: none; } }

/* Avanzado: the optional groups, folded */
.adv { display: grid; gap: 4px; margin-top: 8px; }
.adv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding-bottom: 14px; }
.adv-head h2 { font: 820 clamp(26px, 2.6vw, 36px)/1 var(--f-display); font-stretch: 78%; text-transform: uppercase; }
.adv-head p { font: 400 14px/1.4 var(--f-mono); color: var(--mute); }

/* ---------- V4.1 Media Deck by entity (setup) ---------- */
.pack-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; }
.pack-row .field-row { flex: 1 1 280px; max-width: 460px; }
.pack-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pack-msg { font: 400 14px/1.45 var(--f-text); color: var(--paper-dim); }
.pack-msg:empty, .ents-missing:empty { display: none; }
.ents { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.ents:empty { display: none; }
.ent { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.ent-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ent-name { font: 750 19px/1.2 var(--f-display); font-stretch: 96%; }
.ent--none .ent-name { color: var(--paper-dim); }
.ent-mode-tag { font: 500 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.ent-mode-tag:empty { display: none; }
.ent-more { margin-left: auto; }
.ent-says { font: 400 13px/1.45 var(--f-mono); color: var(--mute); overflow-wrap: anywhere; }
.ent-imgs { list-style: none; display: grid; gap: 8px; }
.img-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.qa-label { font: 500 11px/1.3 var(--f-mono) !important; letter-spacing: .08em; }
.img-row .deck-fields input[type="text"] { padding: 8px 10px; font-size: 15px; }
.ent-adv { display: grid; gap: 14px; margin-top: 6px; padding: 16px 18px; background: var(--ink-2); border: 1px solid var(--rule); }
.ent-adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 16px; }
.ent-adv .btn { justify-self: start; }
.ents-missing { font: 400 14px/1.5 var(--f-text); color: var(--mute); }
@media (max-width: 720px) {
  .img-row { grid-template-columns: 76px minmax(0, 1fr); }
  .img-row .deck-thumb { width: 76px; height: 50px; }
  .img-row .deck-actions { grid-column: 1 / -1; }
  .ent-more { margin-left: 0; }
}

/* ---------- V4.1 Presenter View: image control ---------- */
.pv-mstate { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.pv-mstate[data-mode="pinned"] { color: var(--paper); }
.pv-mstate[data-mode="hidden"] { color: var(--warn); }
.pv-mctl { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pv-mctl button { min-height: 34px; padding: 0 10px; border: 1px solid var(--rule-2); background: none; color: var(--paper-dim); font: 600 13px var(--f-display); cursor: pointer; }
.pv-mctl button:hover { color: var(--paper); border-color: var(--paper-dim); }
.pv-mctl button[aria-pressed="true"] { color: var(--ink); background: var(--signal); border-color: var(--signal); }
.pv-mkeys { margin: 0 0 10px; font: 400 11px/1.6 var(--f-mono); color: var(--mute); }
.pv-thumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }