/* Alive Presentation operator — a broadcast-desk console.
   Tally pink means one thing only: this is on air. Cue blue means: this is next. */
:root {
  --booth: #16131d; --panel: #1e1a28; --raised: #28233a; --hover: #312b45; --line: #352f49;
  --text: #ece9f3; --dim: #8f88a6; --faint: #5d5774;
  --tally: #eb008b; --tally-hot: #ff2aa0; --cue: #3a8fe0; --warn: #f0a030; --ok: #3ccf8e;
  --r-sm: 6px; --r: 9px;
  --rail: 56px; --left: 340px; --right: 300px;
  font-size: 13px;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { background: var(--booth); color: var(--text); font: 500 13px/1.4 Montserrat, system-ui, sans-serif; overflow: hidden;
       font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cue); outline-offset: 1px; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i.sm { width: 15px; height: 15px; } .i.lg { width: 22px; height: 22px; }

/* ---- controls ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 11px;
       background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn.icon { width: 32px; padding: 0; }
.btn.ghost { background: none; border-color: transparent; color: var(--dim); }
.btn.ghost:hover { color: var(--text); background: var(--raised); }
.btn.on { background: var(--tally); border-color: var(--tally); color: #fff; }
.btn.primary { background: var(--tally); border-color: var(--tally); color: #fff; font-weight: 700; }
.btn.primary:hover { background: var(--tally-hot); }
.btn.sm { height: 26px; padding: 0 8px; font-size: 12px; } .btn.sm.icon { width: 26px; padding: 0; }
.btn:disabled { opacity: .4; cursor: default; }
.field { height: 32px; padding: 0 10px; background: var(--booth); border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; }
.field:focus { outline: none; border-color: var(--cue); }
textarea.field { height: auto; padding: 10px; resize: vertical; line-height: 1.55; }
.search { position: relative; display: flex; }
.search .i { position: absolute; left: 9px; top: 8px; color: var(--faint); pointer-events: none; }
.search .field { flex: 1; padding-left: 32px; }
.seg { display: inline-flex; background: var(--booth); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button { height: 26px; padding: 0 9px; border: 0; background: none; border-radius: 4px; color: var(--dim); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--raised); color: var(--text); }
kbd { font: 600 10px Montserrat; color: var(--faint); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }

/* ---- shell ---- */
.app { display: grid; height: 100%; grid-template-rows: 52px 1fr 28px;
       grid-template-columns: var(--rail) var(--left) 1fr var(--right);
       grid-template-areas: "top top top top" "rail left center right" "status status status status"; }
.app.no-right { grid-template-columns: var(--rail) var(--left) 1fr 0; }
.app.no-right .right { display: none; }

/* toolbar */
.top { grid-area: top; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 0; background: var(--panel); border-bottom: 1px solid var(--line); }
.top .brand { width: var(--rail); display: grid; place-items: center; flex: none; }
.top .brand img { height: 28px; width: 28px; object-fit: cover; object-position: left; } /* the Alive mark, lined up over the rail */
.top .group { display: flex; align-items: center; gap: 4px; }
.top .sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
#next { height: 36px; padding: 0 18px 0 16px; font-size: 14px; }
.tempo { min-width: 86px; }
.tempo .light { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.tempo.beat .light { background: var(--tally-hot); box-shadow: 0 0 8px var(--tally-hot); }
.msg { flex: 1; min-width: 120px; position: relative; display: flex; }
.msg .i { position: absolute; left: 9px; top: 8px; color: var(--faint); }
.msg .field { flex: 1; padding-left: 32px; }
.msg.sent .field { border-color: var(--warn); }

/* rail */
.rail { grid-area: rail; display: flex; flex-direction: column; gap: 4px; padding: 8px 0; align-items: center; background: var(--panel); border-right: 1px solid var(--line); }
.rail button { position: relative; width: 40px; height: 40px; border: 0; border-radius: var(--r); background: none; color: var(--dim); cursor: pointer; display: grid; place-items: center; }
.rail button:hover { color: var(--text); background: var(--raised); }
.rail button.on { color: var(--text); background: var(--raised); }
.rail button.on::before { content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cue); }
.rail .spacer { flex: 1; }
[data-tip] { position: relative; }
.rail [data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 48px; top: 50%; transform: translateY(-50%); z-index: 20;
  background: var(--raised); border: 1px solid var(--line); padding: 4px 8px; border-radius: var(--r-sm); color: var(--text); white-space: nowrap; font-size: 12px; }

/* left: service run sheet over the tool panel */
.left { grid-area: left; display: grid; grid-template-rows: minmax(160px, 46%) 1fr; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; background: var(--panel); border-right: 1px solid var(--line); }
.pane { display: flex; flex-direction: column; min-height: 0; }
.pane + .pane { border-top: 1px solid var(--line); }
.pane-head { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 14px; flex: none; }
.pane-head h2 { font-size: 13px; font-weight: 700; flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.pane-head .meta { color: var(--dim); font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.pane-body { flex: 1; overflow: auto; padding: 0 8px 10px; min-height: 0; }
.pane-tools { padding: 0 8px 8px; display: flex; gap: 6px; flex: none; }
.pane-tools .search { flex: 1; }
.empty { color: var(--dim); padding: 16px 8px; line-height: 1.5; }
.empty .btn { margin-top: 10px; }

/* list rows (library, service, media) */
.row { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 4px 6px 4px 8px; border-radius: var(--r-sm); cursor: default; }
.row:hover { background: var(--raised); }
.row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .t small { display: block; color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.row .acts { display: flex; gap: 2px; opacity: 0; }
.row:hover .acts, .row:focus-within .acts { opacity: 1; }
.row .kind { color: var(--dim); }
.thumb { width: 64px; height: 36px; flex: none; border-radius: 4px; overflow: hidden; background: #000; }
.thumb video, .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* service run sheet */
.cue { display: grid; grid-template-columns: 20px 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 40px; padding: 0 8px; border-radius: var(--r-sm);
       border: 1px solid transparent; cursor: pointer; position: relative; }
.cue:hover { background: var(--raised); }
.cue.sel { background: var(--raised); border-color: var(--line); }
.cue.live { border-color: var(--tally); }
.cue.live::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--tally); border-radius: var(--r-sm) 0 0 var(--r-sm); }
.cue .n { color: var(--faint); font-size: 11px; text-align: right; }
.cue .kind { color: var(--dim); }
.cue.live .kind { color: var(--tally-hot); }
.cue .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cue .time { color: var(--dim); font-size: 12px; }
.cue .time.run { color: var(--text); font-weight: 700; }
.cue .time.over { color: var(--warn); }
.cue[draggable="true"]:active { cursor: grabbing; }
.cue.drop-above { box-shadow: 0 -2px 0 var(--cue); }

/* center stage: monitors + slides */
.center { grid-area: center; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.monitors { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); flex: none; }
.mon { position: relative; border-radius: var(--r); padding: 3px; background: var(--line); }
.mon.program { background: var(--tally); }
.mon.preview { background: var(--cue); }
.mon .screen { aspect-ratio: var(--ar, 3.69); width: min(100%, calc(30vh * var(--ar, 3.69))); margin: 0 auto; border-radius: 6px; overflow: hidden; background: #000; position: relative; }
.mon iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.mon .tag { position: absolute; top: 9px; left: 9px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px;
            border-radius: 20px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
.mon.program .tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tally-hot); box-shadow: 0 0 6px var(--tally-hot); }
.mon .cap { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px 2px; font-size: 12px; color: #fff; }
.mon .cap span:last-child { opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nextslide { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--safe-pct, 12%); text-align: center; font-weight: 800; text-transform: uppercase;
             font-size: clamp(8px, .82vw, 13px); line-height: 1.2; background: #1c1730 url(../assets/plate-wide-ink.jpg) center / cover; }
.nextslide em { color: var(--tally-hot); font-style: normal; }
.nextslide .none { color: var(--dim); text-transform: none; font-weight: 600; }

.slides-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex: none; }
.slides-head h1 { font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slides-head .meta { color: var(--dim); font-size: 12px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slides-head input[type=range] { width: 90px; accent-color: var(--cue); }
[hidden] { display: none !important; } /* hidden wins over .btn and friends */
.grid { flex: 1; overflow: auto; padding: 0 12px 16px; display: grid; gap: 10px; align-content: start; grid-auto-rows: max-content; /* scroll, never squash */
        grid-template-columns: repeat(auto-fill, minmax(var(--card, 210px), 1fr)); }
.card { position: relative; text-align: left; border: 0; padding: 0; cursor: pointer; border-radius: var(--r); background: var(--panel);
        box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; display: flex; flex-direction: column; }
.card:hover { box-shadow: inset 0 0 0 1px var(--faint); }
.card .face { position: relative; overflow: hidden; aspect-ratio: var(--ar, 3.69); flex: none; display: grid; place-items: center; padding: 8px 8%; text-align: center; font-weight: 800; text-transform: uppercase;
              font-size: calc(var(--card, 210px) * .05); line-height: 1.25; background: #1a1626; border-bottom: 3px solid var(--sec); overflow: hidden; }
.card .face em { color: var(--tally-hot); font-style: normal; }
.card .face .glyph { color: var(--dim); display: grid; justify-items: center; gap: 6px; text-transform: none; font-weight: 600; }
.card .foot { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; font-size: 11px; color: var(--dim); }
.card .foot .sec { color: var(--text); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .foot .ref { color: var(--tally-hot); }
.card.live { box-shadow: 0 0 0 3px var(--tally); }
.card.live .foot { background: var(--tally); color: #fff; }
.card.live .foot .sec { color: #fff; }
.card.next { box-shadow: 0 0 0 2px var(--cue); }

/* right: inspector */
.right { grid-area: right; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.right .pane-body { padding: 0 14px 20px; }
.insp-title { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px; }
.insp-title .badge { width: 34px; height: 34px; border-radius: var(--r); background: var(--raised); display: grid; place-items: center; color: var(--dim); flex: none; }
.insp-title b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-title small { color: var(--dim); }
.sect { border-top: 1px solid var(--line); padding: 14px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sect h3 { font-size: 12px; font-weight: 700; color: var(--dim); display: flex; align-items: center; gap: 7px; }
.prop { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; }
.prop > span { color: var(--dim); font-size: 12px; }
.prop .field { width: 100%; }
.hint { color: var(--faint); font-size: 11px; line-height: 1.5; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.swatch { height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--booth); color: var(--dim); font-size: 11px; cursor: pointer;
          display: flex; align-items: center; justify-content: center; gap: 5px; }
.swatch:hover { color: var(--text); border-color: var(--faint); }
.swatch.on { border-color: var(--cue); color: var(--text); box-shadow: inset 0 0 0 1px var(--cue); }

/* looks gallery (tool panel) */
.looks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.look { border: 0; padding: 0; border-radius: var(--r); overflow: hidden; background: #000; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.look canvas { width: 100%; aspect-ratio: var(--ar, 3.69); display: block; background: #1c1730 url(../assets/plate-wide-ink.jpg) center / cover; }
.look span { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; background: var(--raised); }
.look.on { box-shadow: 0 0 0 2px var(--tally); }
.look.on span { background: var(--tally); color: #fff; }

/* status bar */
.status { grid-area: status; display: flex; align-items: center; gap: 16px; padding: 0 12px; background: var(--panel); border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }
.status > span { display: inline-flex; align-items: center; gap: 6px; }
.status .ok { color: var(--ok); }
.status .bad { color: var(--warn); }
.status .scr { display: inline-flex; gap: 10px; }
.status .scr span { display: inline-flex; align-items: center; gap: 5px; }
.status .scr i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.status .scr .up i { background: var(--ok); }
.status .grow { flex: 1; }
.status a { color: var(--dim); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.status a:hover { color: var(--text); }
body.offline .status .conn { color: var(--warn); }
body.offline .top { box-shadow: inset 0 -3px 0 var(--warn); }

/* dialogs */
dialog { margin: auto; width: min(880px, 94vw); background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 0; }
dialog::backdrop { background: rgba(8, 6, 14, .7); }
dialog .dlg-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
dialog .dlg-head h2 { font-size: 15px; flex: 1; }
dialog .dlg-body { padding: 16px; display: grid; gap: 12px; }
dialog .dlg-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
dialog .dlg-foot .grow { flex: 1; }
.toast { position: fixed; bottom: 44px; left: 50%; transform: translateX(-50%); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
         padding: 10px 14px; display: flex; gap: 8px; align-items: center; z-index: 50; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.toast.bad { border-color: var(--warn); }
/* media on slide cards, fitted like the outputs (output #media) */
.fitbox { position: absolute; inset: 0; overflow: hidden; }
.fitbox > * { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; display: block; }
.fitbox[data-fit=contain] > * { object-fit: contain; }
.fitbox[data-fit=fill] > * { object-fit: fill; }
.fitbox[data-fit=width] > * { height: auto; }
.fitbox[data-fit=height] > * { width: auto; max-width: none; }
.uploading { position: fixed; right: 16px; bottom: 44px; z-index: 60; width: 320px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px; align-items: center;
             padding: 12px 14px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.uploading .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.uploading small { display: block; color: var(--dim); font-size: 11px; }
.uploading .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.uploading .bar i { display: block; height: 100%; background: var(--cue); transition: width .2s; }

@media (max-width: 1300px) { :root { --left: 300px; --right: 270px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* section colours on cards and rows */
[data-sec] { --sec: var(--faint); }
[data-sec^="Chorus"], [data-sec^="Refrain"] { --sec: var(--tally); }
[data-sec^="Verse"] { --sec: var(--cue); }
[data-sec^="Bridge"] { --sec: #8b5cf6; }
[data-sec^="Pre"], [data-sec^="Tag"] { --sec: #c0479a; }
[data-sec^="Scripture"] { --sec: #2fb7a3; }
[data-sec^="Point"], [data-sec^="Title"] { --sec: var(--warn); }

a.btn { color: inherit; text-decoration: none; }
#panelHost > .pane { min-height: 0; min-width: 0; } /* grid items default to their content width: long addresses widened the panel */
#panelHost > .pane[hidden] { display: none; }

/* look editor */
.look span b { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look span .btn { height: 22px; width: 22px; margin: -3px -4px -3px 0; color: inherit; }
.look:focus-visible { outline: 2px solid var(--cue); outline-offset: 2px; }
.look-preview { width: 100%; aspect-ratio: var(--ar, 3.69); display: block; border-radius: var(--r); background: #1c1730 url(../assets/plate-wide-ink.jpg) center / cover; box-shadow: 0 0 0 1px var(--line); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.slot { display: grid; gap: 4px; padding: 6px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--booth); cursor: pointer; font-size: 11px; color: var(--dim); text-align: center; }
.slot.on { border-color: var(--cue); color: var(--text); box-shadow: inset 0 0 0 1px var(--cue); }
.slot input[type=color] { width: 100%; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 4px; }
.slot input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.slot input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.brand-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.brand-swatches .dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.brand-swatches .dot:hover { box-shadow: 0 0 0 2px var(--text); }
.slider { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.slider input { accent-color: var(--cue); width: 100%; }
.slider output { text-align: right; color: var(--text); font-weight: 600; }

#inspToggle.on { color: var(--text); background: var(--raised); } /* a view toggle, not an on-air state, so no tally pink */

/* graphics designer: a full-window workspace */
dialog.designer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; background: var(--booth); padding: 0; }
dialog.designer[open] { display: grid; grid-template-rows: 52px 1fr; }
.dz-top { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
.dz-top .group { display: flex; gap: 4px; flex-wrap: nowrap; }
.dz-top .sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.dz-name { width: 220px; font-weight: 700; }
.dz-main { display: grid; grid-template-columns: 230px 1fr 310px; min-height: 0; }
.dz-layers, .dz-props { background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.dz-layers { border-right: 1px solid var(--line); }
.dz-props { border-left: 1px solid var(--line); }
.dz-layers .list, .dz-props .body { overflow: auto; padding: 0 10px 16px; flex: 1; }
.dz-props .body { padding: 0 14px 20px; }
.lrow { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 2px; border-radius: var(--r-sm); cursor: pointer; color: var(--dim); }
.lrow span { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow:hover { background: var(--raised); }
.lrow.on { background: var(--raised); box-shadow: inset 2px 0 0 var(--cue); }
.lrow.off span { opacity: .45; }
.dz-viewport { display: grid; place-items: center; overflow: hidden; min-width: 0; min-height: 0;
  background: radial-gradient(circle at 50% 40%, #221d30, var(--booth) 70%); }
.dz-holder { position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.dz-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.dz-stage.see-through { background: repeating-conic-gradient(#2a2538 0 25%, #221e2e 0 50%) 0 0 / 40px 40px; }
.dz-gfx, .dz-gfx .gfx { position: absolute; inset: 0; }
.dz-gfx .gl { cursor: move; }
.dz-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 100000; } /* handles above every layer */
.dz-overlay .safe { position: absolute; top: 0; bottom: 0; border-left: calc(2px / var(--s)) dashed rgba(58, 143, 224, .45); }
.dz-overlay .guide { position: absolute; background: var(--tally-hot); }
.dz-overlay .guide.v { top: 0; bottom: 0; width: calc(1px / var(--s)); }
.dz-overlay .guide.h { left: 0; right: 0; height: calc(1px / var(--s)); }
.selbox { position: absolute; outline: calc(2px / var(--s)) solid var(--cue); pointer-events: none; }
.selbox b { position: absolute; width: calc(12px / var(--s)); height: calc(12px / var(--s)); background: #fff; border: calc(2px / var(--s)) solid var(--cue);
  border-radius: calc(3px / var(--s)); pointer-events: auto; transform: translate(-50%, -50%); }
.selbox [data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; } .selbox [data-h="n"] { left: 50%; top: 0; cursor: ns-resize; }
.selbox [data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; } .selbox [data-h="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.selbox [data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; } .selbox [data-h="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.selbox [data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; } .selbox [data-h="w"] { left: 0; top: 50%; cursor: ew-resize; }
.selbox [data-h="rot"] { left: 50%; top: calc(-28px / var(--s)); border-radius: 50%; cursor: grab; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid2 .prop { grid-template-columns: 1fr; gap: 3px; }
.tools { display: flex; gap: 2px; flex-wrap: wrap; }
.colorrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.colorrow input[type=color] { width: 34px; height: 28px; border: 1px solid var(--line); border-radius: 6px; padding: 0; background: none; cursor: pointer; }
.colorrow .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.dz-props .seg { flex-wrap: wrap; }
.dz-props textarea { width: 100%; }

/* graphic thumbnails (cards, graphics panel) */
.gthumb { position: relative; overflow: hidden; background: #1c1730 url(../assets/plate-wide-ink.jpg) center / cover; }
.gthumb.see-through { background: repeating-conic-gradient(#2a2538 0 25%, #221e2e 0 50%) 0 0 / 16px 16px; }
.gthumb .gfx { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.gtile { margin-bottom: 10px; border-radius: var(--r); overflow: hidden; background: var(--raised); }
.gtile .gthumb { width: 100%; }
.gtile .row { border-radius: 0; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tpl { border: 0; padding: 0; border-radius: var(--r); overflow: hidden; background: var(--raised); cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1px var(--line); }
.tpl:hover { box-shadow: 0 0 0 2px var(--cue); }
.tpl .gthumb { width: 100%; }
.tpl span { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 12px; font-weight: 600; }
/* look editor: the preview stays in view while you scroll through the controls */
.look-sticky { position: sticky; top: 0; z-index: 3; background: var(--panel); padding: 2px 0 10px; margin: 0 -2px; box-shadow: 0 10px 12px -10px rgba(0, 0, 0, .5); }
.dz-viewport.drop { box-shadow: inset 0 0 0 3px var(--cue); }
.selbox.thin { outline-width: calc(1px / var(--s)); outline-style: dashed; }
.selbox.group { outline-style: solid; }
.marquee { position: absolute; border: calc(1px / var(--s)) solid var(--cue); background: rgba(58, 143, 224, .12); }
.dz-stage.grid .dz-overlay { background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 40px 40px; }
.dz-viewport { overflow: auto; }
.lrow .lock { opacity: 0; } .lrow:hover .lock, .lrow .lock.is { opacity: 1; }
.dz-props details.sect > summary { list-style: none; cursor: pointer; }
.dz-props details.sect > summary::-webkit-details-marker { display: none; }
.dz-props details.sect:not([open]) > summary h3 { color: var(--dim); }
.dz-props details.sect[open] > summary { margin-bottom: 10px; }
.rng { display: flex; align-items: center; gap: 6px; } .rng input { flex: 1; accent-color: var(--cue); } .rng output { width: 46px; text-align: right; font-size: 12px; }
.fontpick { position: relative; }
.fontpick > summary { list-style: none; cursor: pointer; height: 32px; display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--booth); font-size: 16px; }
.fontpick > summary::-webkit-details-marker { display: none; }
.fontlist { position: absolute; z-index: 5; left: 0; right: 0; top: 36px; max-height: 340px; overflow: auto; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 0; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.fgroup { padding: 8px 10px 2px; font-size: 11px; color: var(--dim); font-weight: 700; }
.fontopt { display: block; width: 100%; text-align: left; padding: 5px 10px; border: 0; background: none; font-size: 18px; color: var(--text); cursor: pointer; }
.fontopt:hover { background: var(--hover); } .fontopt.on { color: var(--cue); }
dialog.picker { width: min(980px, 94vw); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; }
.pick { border: 0; padding: 0; background: var(--raised); border-radius: var(--r); overflow: hidden; cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1px var(--line); }
.pick:hover { box-shadow: 0 0 0 2px var(--cue); }
/* media tags: filter chips, the tag button on each tile, the tag dialog */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.filters { padding: 0 8px 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; background: none; color: var(--dim); font: inherit; font-size: 12px; cursor: pointer; }
.chip:hover { color: var(--text); border-color: var(--faint); }
.chip.on { color: var(--text); background: var(--raised); border-color: var(--cue); }
.chip i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.chip.dot { padding: 0 6px; }
.pick { position: relative; }
.pickhit { display: block; width: 100%; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pick .tagbtn { position: absolute; top: 4px; right: 4px; opacity: 0; background: rgba(20, 16, 32, .75); }
.pick:hover .tagbtn, .pick .tagbtn:focus { opacity: 1; }
dialog.tags { width: min(560px, 94vw); }
dialog.tags h3 { font-size: 12px; color: var(--dim); font-weight: 700; margin-top: 4px; }
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding-top: 4px; }
.pick.on { box-shadow: 0 0 0 2px var(--tally); }
.pick .thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
.pick span { display: block; padding: 6px 8px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* room switcher */
.top .room { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 10px; border-radius: var(--r-sm); background: var(--raised); border: 1px solid var(--line); color: var(--dim); }
.top .room select { background: none; border: 0; color: var(--text); font-weight: 700; height: 30px; max-width: 170px; cursor: pointer; }
.top .room select:focus { outline: none; }
/* hotkeys */
#keyhelp { width: min(980px, 94vw); }
.keygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; max-height: 70vh; overflow: auto; }
.keygrid h3 { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.krow { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
kbd.k, .krow kbd { font: 700 11px Montserrat; color: var(--text); background: var(--raised); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.hk { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 5px 4px; border-bottom: 1px solid var(--line); }
.hk .chips { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.hk.capturing { background: rgba(58, 143, 224, .15); border-radius: var(--r-sm); }
.midimon { font: 600 12px Montserrat; padding: 8px 10px; border-radius: var(--r-sm); background: var(--booth); border: 1px solid var(--line); }
.midimon.learn { border-color: var(--cue); color: var(--cue); }
dialog.settings { width: min(960px, 94vw); height: min(760px, 88vh); }
dialog.settings[open] { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
dialog.settings nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; background: var(--booth); border-right: 1px solid var(--line); }
dialog.settings nav button { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--dim); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
dialog.settings nav button:hover { color: var(--text); background: var(--raised); }
dialog.settings nav button.on { color: var(--text); background: var(--raised); box-shadow: inset 3px 0 0 var(--cue); }
dialog.settings nav .grow { flex: 1; }
dialog.settings > .pane { min-width: 0; padding-top: 6px; }
dialog.settings > .pane[hidden] { display: none; }
dialog.newroom { width: min(520px, 92vw); }