/* =====================================================================================================
   GENERALLY LEGAL LIVE · studio.css  (Show Studio, STYLE-v5 §17: C "WCVB" S7, compact and functional)
   One dark UI in the WHITE look's neutrals (<html data-look="pop">): the ground, panels on the card fill with an inset
   1 px --gl-key keyline and radius 8, 32 px heads in GL Label 600 11.5 px .15em caps (text2) over a 1 px --gl-hair rule,
   Helvetica 13-15 px for words, tabular numerals. No white panels, no shadows, no red, no stripes but the mini band.
   The ACCENT is the LIVE segment's family (--st-acc, set by studio.js from the live look): ON AIR, TAKE, the current
   beat, the on-air row, the program ring, APPLAUSE. People are their fixed colours (dots only).
   Grid: rows 48 | 1fr | 24 · main: left 372 px (318 under 1700) | right 1fr · 12 px gaps and padding.
   ===================================================================================================== */

html, body { margin: 0; height: 100%; background: var(--gl-ground); }
body { font: 500 14px/1.3 var(--gl-read); color: var(--gl-text); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [role="slider"]:focus-visible { outline: 1px solid var(--gl-text2); outline-offset: 2px; }
.st-boot-err { position: fixed; left: 16px; bottom: 16px; color: var(--gl-black); font: 600 13px/1.4 var(--gl-read); background: var(--gl-sp-orange); padding: 8px 12px; border-radius: 4px; }
.st-grow, .st-head-fill { flex: 1; }
[hidden] { display: none !important; }

/* the label face (C .lab / .ph / .btn): GL Label 600, caps, tracked */
.st-h, .st-lab, .st-tab, .st-chip, .st-key, .st-auto, .st-take, .st-golive, .st-menu, .st-tag, .st-airtag, .st-ph, .st-btn, .st-toast, .st-today,
.st-render, .st-crowd b, .st-jevpick b, .st-ears-who, .st-f-lab, .st-spine span, .st-hbtn { font-family: var(--gl-label); font-weight: 600; text-transform: uppercase; }
.st-num, .st-clock, .st-live-t, .st-d, .st-n, .st-h-val, .st-badge, .st-count { font-variant-numeric: tabular-nums; }

.st-app { position: fixed; inset: 0; display: grid; grid-template-rows: 48px minmax(0, 1fr) 24px; min-width: 1120px; min-height: 680px; background: var(--gl-ground); color: var(--gl-text);
  --st-acc: var(--gl-accent); --st-on-acc: var(--gl-on-accent); --st-acc-hi: var(--gl-accent-hi); --st-acc-rgb: var(--gl-accent-rgb);
  --st-ok: var(--gl-sp-green);       /* a status lamp (connected, saved): C's --green */
  --st-warn: var(--gl-sp-orange);    /* a status lamp (not saved, needs a name): never red */
  --st-L: 372px;
  /* the desk's own neutrals, frozen here so an element that carries a look's data-look (a swatch, a band chip) still
     rings in the desk's colours, never in a light look's dark ink */
  --st-card: var(--gl-card); --st-text: var(--gl-text); --st-text2: var(--gl-text2); }
.st-app.is-offline .st-main { opacity: .72; }

/* ---------- panels (C .panel / .ph) ---------- */
.st-panel { position: relative; box-sizing: border-box; min-width: 0; background: var(--gl-card); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--gl-key); overflow: hidden; }
.st-h { flex: none; position: relative; height: 32px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 11.5px; letter-spacing: .15em;
  color: var(--gl-text2); white-space: nowrap; min-width: 0; border-bottom: 1px solid var(--gl-hair); }
.st-h > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.st-h-val { font: 500 12px/1 var(--gl-read); letter-spacing: .04em; text-transform: none; color: var(--gl-text2); }
.st-lab { flex: none; font-size: 11.5px; letter-spacing: .15em; color: var(--gl-text2); white-space: nowrap; }
.st-strip { display: flex; align-items: center; gap: 8px; padding: 9px 12px; }

/* ---------- top bar ---------- */
.st-top { position: relative; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 0 14px; min-width: 0; background: var(--gl-card); border-bottom: 1px solid var(--gl-key); }
/* the mini wordmark: the rainbow band at Studio scale (six 2 px lines, 22 px wide, 4 px pitch) + GENERALLY LEGAL */
.st-wm { flex: none; display: flex; align-items: center; gap: 9px; }
.st-band-mini { display: grid; gap: 2px; flex: none; }
.st-band-mini > i { display: block; width: 22px; height: 2px; }
.st-wm-t { font: 700 15px/1 var(--gl-display); letter-spacing: .08em; color: var(--gl-text); white-space: nowrap; }
.st-menu { position: relative; flex: none; height: 30px; max-width: 220px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; box-sizing: border-box;
  border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key); color: var(--gl-text); font-size: 12px; letter-spacing: .12em; cursor: pointer; }
.st-menu:hover { box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-show-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-caret { width: 10px; height: 10px; flex: none; color: var(--gl-text); }
.st-caret svg { display: block; width: 100%; height: 100%; }
.st-menu select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 14px; }
.st-vsep { flex: none; width: 1px; height: 24px; background: var(--gl-hair); }
/* what is on air: the segment's mini band chip · its name · its run time · beat progress in the accent */
.st-live { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.st-live .st-lc { width: 22px; }
.st-live-name { font: 700 15px/1 var(--gl-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-live-t { flex: none; font: 500 14px/1 var(--gl-read); color: var(--gl-text); }
.st-live-prog { position: relative; flex: none; width: 120px; height: 4px; border-radius: 2px; background: var(--gl-hair); overflow: hidden; }
.st-live-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--st-acc); transition: width .4s var(--gl-ease-b); }
.st-icon { position: relative; flex: none; width: 30px; height: 30px; padding: 6px; box-sizing: border-box; display: grid; place-items: center; border: 0; border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text); }
.st-icon:hover { box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-icon svg { display: block; width: 18px; height: 18px; }
.st-icon.is-off { color: var(--gl-text2); }
.st-badge { position: absolute; right: -7px; top: -7px; min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 5px; display: grid; place-items: center; border-radius: 9px;
  background: var(--gl-text); color: var(--gl-black); font: 700 11px/1 var(--gl-num); box-shadow: 0 0 0 2px var(--gl-card); }
.st-badge.is-new { animation: st-pop .5s var(--gl-ease-b); }
/* GO LIVE (an outline pill) -> ON AIR (the live family's pill, a dark dot) */
.st-golive { flex: none; height: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--gl-key);
  background: transparent; color: var(--gl-text); font-size: 12px; letter-spacing: .12em; }
.st-golive:hover { box-shadow: inset 0 0 0 1.5px var(--st-acc); }
.st-golive.is-live { background: var(--st-acc); color: var(--st-on-acc); box-shadow: none; animation: st-flicker calc(8.3s / max(var(--gl-motion, 1), .01)) 3.1s infinite; }
.st-golive.is-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-on-acc); }
.st-clock { flex: none; min-width: 92px; text-align: right; font: 700 20px/1 var(--gl-num); letter-spacing: .04em; color: var(--gl-text2); }
.st-clock.is-air { color: var(--gl-text); }

/* ---------- main grid ---------- */
.st-main { position: relative; display: grid; grid-template-columns: var(--st-L) minmax(0, 1fr); gap: 12px; padding: 12px; min-height: 0; min-width: 0; }
@media (max-width: 1700px) { .st-app { --st-L: 318px; } }
.st-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.st-right { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 12px; min-height: 0; min-width: 0; }
.st-mons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-width: 0; }
.st-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 430px; grid-template-rows: minmax(0, 1fr); gap: 12px; min-height: 0; align-items: start; }
@media (max-width: 1700px) { .st-bottom { grid-template-columns: minmax(0, 1fr) 330px; } }
.st-drawer { position: absolute; left: calc(var(--st-L) + 24px); right: 12px; top: 55%; bottom: 12px; }   /* top: set on open (studio.js) */

/* ---------- RUNDOWN (tray.js) ---------- */
.st-rundown { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.st-tray { position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--gl-key) transparent; }
.st-slot { position: relative; width: 100%; display: grid; grid-template-columns: 20px 24px minmax(0, 1fr) 50px 40px; align-items: center; column-gap: 4px; height: 38px; padding: 0 12px 0 14px; box-sizing: border-box;
  border: 0; border-radius: 0; box-shadow: inset 0 -1px 0 var(--gl-hair); background: transparent; color: var(--gl-text); text-align: left; font: 500 13px/1 var(--gl-read);
  touch-action: none; user-select: none; -webkit-user-select: none; }
.st-slot:hover { background: color-mix(in oklab, var(--gl-raised) 60%, var(--gl-card)); }
.st-n { font: 600 12px/1 var(--gl-label); color: var(--gl-text2); }
.st-n .st-ic { display: block; width: 13px; height: 13px; color: var(--gl-text2); }
.st-n .st-ic svg { display: block; width: 100%; height: 100%; }
/* the mini band chip: three 3 px lines on a 5 px pitch in the look's family (a look swatch, not decoration) */
.st-lc { display: block; flex: none; width: 18px; height: 13px; background: repeating-linear-gradient(to bottom, var(--gl-accent) 0 3px, transparent 3px 5px); }
.st-name { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.st-nm { overflow: hidden; text-overflow: ellipsis; font: 600 13px/1 var(--gl-display); letter-spacing: .05em; color: var(--gl-text); }
.st-k { color: var(--gl-text2); font: 500 12.5px/1 var(--gl-read); white-space: nowrap; text-transform: capitalize; overflow: hidden; }
.st-d { font: 500 13px/1 var(--gl-read); color: var(--gl-text); text-align: right; }
.st-tag, .st-airtag { flex: none; display: none; font-size: 10.5px; letter-spacing: .15em; color: var(--gl-text); }
.st-airtag { color: var(--st-acc); }
.st-ph { flex: none; display: none; height: 17px; padding: 0 5px; align-items: center; box-sizing: border-box; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--st-warn); color: var(--st-warn);
  font-size: 9.5px; letter-spacing: .1em; }
.st-slot.has-ph .st-ph { display: inline-flex; }
.st-slot.is-sel:not(.is-live) .st-tag { display: inline; }
.st-slot.is-sel:not(.is-live) { background: color-mix(in oklab, var(--gl-raised) 75%, var(--gl-card)); }
.st-slot.is-done .st-nm, .st-slot.is-done .st-k, .st-slot.is-done .st-d { color: var(--gl-text2); }
.st-slot.is-live { background: color-mix(in srgb, var(--st-acc) 12%, var(--gl-card)); }
.st-slot.is-live::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--st-acc); }
.st-slot.is-air .st-airtag, .st-tape.is-playing .st-airtag { display: inline; }
.st-slot .st-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; display: none; z-index: 1; }
.st-slot .st-prog > i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--st-acc); transition: width .4s var(--gl-ease-b); }
.st-slot.is-air .st-prog { display: block; }
.st-slot.is-missing .st-nm { color: var(--gl-text2); text-decoration: line-through; }
.st-slot.is-dragging { opacity: .3; }
.st-slot.is-flash { animation: st-flash .7s ease-out; }
.st-slot.is-new { animation: st-in .5s var(--gl-ease-b); }
/* the INTRO row: a tape glyph, its on/off lamp; playing = the live recipe; rendering = the progress line */
.st-tape .st-n { color: var(--gl-text2); }
.st-lamp-i { display: block; width: 9px; height: 9px; margin-left: 4px; box-sizing: border-box; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gl-key); }
.st-tape.is-on .st-lamp-i { background: var(--gl-text); box-shadow: none; }
.st-tape:not(.is-on) .st-nm { color: var(--gl-text2); }
.st-tape.is-sel { background: color-mix(in oklab, var(--gl-raised) 75%, var(--gl-card)); }
.st-tape.is-playing { background: color-mix(in srgb, var(--st-acc) 12%, var(--gl-card)); }
.st-tape.is-playing::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--st-acc); }
.st-tape.is-rendering .st-prog { display: block; }
.st-tape.is-rendering .st-prog > i { background: var(--gl-text2); }
/* "+ LIBRARY" (RUNDOWN head) and TAG (PROGRAM head): small outline pills */
.st-hbtn { flex: none; height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px 0 8px; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--gl-key);
  background: transparent; color: var(--gl-text); font-size: 10.5px; letter-spacing: .12em; }
.st-hbtn .st-plus { font: 400 15px/1 var(--gl-read); margin-top: -1px; }
.st-hbtn:hover { box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-hbtn.is-open { background: var(--gl-text); color: var(--gl-black); box-shadow: none; }
.st-tagbtn .st-lamp-i { margin-left: 0; width: 7px; height: 7px; }
.st-tagbtn.is-on .st-lamp-i { background: var(--st-acc); box-shadow: none; }
/* drag */
.st-ghost { position: fixed; z-index: 50; pointer-events: none; }
.st-ghost .st-slot { background: var(--gl-raised); box-shadow: inset 0 0 0 1px var(--gl-key); border-radius: 5px; }
.st-gap-mark { display: block; height: 2px; margin: -1px 6px; border-radius: 1px; background: var(--gl-text); position: relative; z-index: 2; }

/* ---------- BEATS (the live disc, C: done = text2 + a check, current = the accent fill) + the PREVIEW head strip ---------- */
.st-beats-panel { min-width: 0; }
.st-beats { display: flex; gap: 8px; min-width: 0; }
.st-beats-pgm { flex: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.st-beats-pgm::-webkit-scrollbar { display: none; }
.st-chip { position: relative; flex: none; height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; border: 0; border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text); font-size: 12px; letter-spacing: .12em; white-space: nowrap; }
.st-chip:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-chip .st-ck { display: none; width: 12px; height: 12px; }
.st-chip .st-ck svg { display: block; width: 100%; height: 100%; }
.st-chip.is-past { color: var(--gl-text2); }
.st-chip.is-past .st-ck { display: block; }
.st-beats-pgm .st-chip.is-on { background: var(--st-acc); color: var(--st-on-acc); box-shadow: none; }
.st-beats-empty { color: var(--gl-text2); font: 500 13px/30px var(--gl-read); }

/* ---------- monitors: true 16:9 renders of the program page ---------- */
.st-mon { padding: 8px 8px 10px; min-width: 0; }
.st-mh { display: flex; align-items: center; gap: 8px; height: 28px; margin: 0 2px 6px; min-width: 0; }
.st-mon-d { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px/1 var(--gl-read); color: var(--gl-text2); }
.st-air-dot { display: none; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st-acc); }
.st-pgm.is-onair .st-air-dot { display: block; }
.st-pgm.is-onair .st-mon-l { color: var(--gl-text); }
/* the bezel: as wide as the panel, capped so the bottom row keeps its mixer (the rest of the column ~ 550 px) */
.st-bezel { position: relative; width: min(100%, calc((100vh - 550px) * 1.7778)); margin: 0 auto; }
.st-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--gl-black); box-shadow: 0 0 0 1px var(--gl-key); }
.st-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: transparent; transition: opacity .18s linear; }
.st-screen iframe.is-loading { opacity: 0; }
.st-screen video.st-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--gl-black); cursor: pointer; }
.st-screen.is-empty { background: var(--gl-well); }
.st-pvw.is-lib .st-screen { box-shadow: 0 0 0 1px var(--gl-text2); }
.st-pgm.is-onair .st-screen { box-shadow: 0 0 0 2px var(--st-acc); }
/* the PREVIEW head's beat chips (click = preview that beat): compact, right-aligned while they fit */
.st-beats-pvw { flex: 1; min-width: 0; flex-wrap: nowrap; gap: 5px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.st-beats-pvw > :first-child { margin-left: auto; }
.st-beats-pvw::-webkit-scrollbar { display: none; }
.st-beats-pvw .st-chip { height: 28px; padding: 0 8px; font-size: 10px; letter-spacing: .1em; color: var(--gl-text2); border-radius: 5px; }
.st-beats-pvw .st-chip.is-on { color: var(--gl-text); box-shadow: inset 0 0 0 1px var(--st-acc); }
.st-beats-pvw .st-chip.is-pv { background: var(--gl-text); color: var(--gl-black); box-shadow: none; }
.st-beats-pvw .st-beats-empty { line-height: 28px; }

/* ---------- the switcher: TRANSITION picker · A NEXT · B BACK · AUTO · TAKE (C S7) ---------- */
.st-trans { gap: 8px; }
.st-trans .st-lab { margin-right: 4px; }
.st-kinds { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.st-kind .st-lc { display: none; width: 16px; }
.st-kind.is-on { box-shadow: inset 0 0 0 1.5px var(--gl-text); }
.st-kind.is-on .st-lc { display: block; }
.st-kind.is-def:not(.is-on)::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--gl-text2); }
.st-kind:disabled { opacity: .45; }
.st-key { flex: none; height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 6px; box-sizing: border-box; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key);
  background: transparent; color: var(--gl-text2); font-size: 12px; letter-spacing: .12em; }
.st-key:hover:not(:disabled) { color: var(--gl-text); box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-key b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gl-text2); font: 700 10px/1 var(--gl-label); letter-spacing: 0; color: var(--gl-text); }
.st-key:disabled { opacity: .45; }
.st-key.is-hit { animation: st-press .3s var(--gl-ease-b); }
.st-auto { flex: none; height: 48px; padding: 0 18px; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text2); font-size: 14px; letter-spacing: .12em; }
.st-auto.is-on { color: var(--gl-text); box-shadow: inset 0 0 0 1.5px var(--gl-text); }
.st-take { flex: none; position: relative; height: 48px; width: 120px; padding: 0; border: 0; border-radius: 5px; background: var(--st-acc); color: var(--st-on-acc);
  font: 700 20px/1 var(--gl-label); letter-spacing: .12em; animation: st-flicker calc(7.3s / max(var(--gl-motion, 1), .01)) 1.7s infinite; }
.st-take-word { position: relative; padding-left: .12em; }
.st-take:hover:not(:disabled) { filter: brightness(1.06); }
.st-take:disabled { background: transparent; color: var(--gl-text2); box-shadow: inset 0 0 0 1px var(--gl-key); animation: none; }
.st-take.is-hit { animation: st-take .4s var(--gl-ease-b); }

/* ---------- the bottom row: MIXER | EDIT (tabs in its head) · TWEAK + PENS ---------- */
.st-deck { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.st-tabs { gap: 2px; padding: 0 6px; }
.st-tab { position: relative; height: 32px; padding: 0 8px; border: 0; background: none; color: var(--gl-text2); font-size: 11.5px; letter-spacing: .15em; }
.st-tab:hover { color: var(--gl-text); }
.st-tab.is-on { color: var(--gl-text); }
.st-tab.is-on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--gl-text); }
.st-mixer { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--gl-key) transparent; }
.st-mixer .gx-ch:last-child, .st-tweaks .gx-ch:last-child { box-shadow: none; }
.st-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 12px 10px; }
.st-tweak { display: flex; flex-direction: column; max-height: 100%; min-height: 0; }
.st-tweaks { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gl-key) transparent; }
/* PENS (status bar): whose colour is whose (pen = frame = author dot); a lit ring = that person's page is connected */
.st-pens { display: inline-flex; align-items: center; gap: 14px; margin-right: 6px; padding-right: 18px; border-right: 1px solid var(--gl-hair); height: 14px; }
.st-pen { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--gl-read); color: var(--gl-text2); white-space: nowrap; }
.st-pen-d { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--gl-card), 0 0 0 2.5px transparent; }
.st-pen.is-on { color: var(--gl-text); }
.st-pen.is-on .st-pen-d { box-shadow: 0 0 0 1.5px var(--gl-card), 0 0 0 3px var(--c); }

/* ---------- editor (editor.js) ---------- */
.st-ed-head { flex: none; display: flex; align-items: center; gap: 12px; min-height: 40px; border-bottom: 1px solid var(--gl-hair); }
.st-ed-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; font: 600 13px/1.2 var(--gl-display); letter-spacing: .05em; text-transform: uppercase; color: var(--gl-text); }
.st-ed-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ed-looks { flex: none; display: flex; align-items: center; gap: 6px; }
.st-sw { position: relative; flex: none; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 0; background: var(--gl-accent); box-shadow: none; }
.st-sw:hover { transform: translateY(-1px); }
.st-sw.is-on { box-shadow: 0 0 0 2px var(--st-card), 0 0 0 3.5px var(--st-text); }
.st-sw.is-def::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--st-text2); }
.st-eject { flex: none; width: 28px; height: 28px; padding: 4px; box-sizing: border-box; display: grid; place-items: center; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text2); }
.st-eject svg { display: block; width: 18px; height: 18px; }
.st-eject:hover { color: var(--gl-text); box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-eject.is-arm { background: var(--gl-text); color: var(--gl-black); box-shadow: none; }
.st-eject.is-off { opacity: .4; cursor: not-allowed; }
.st-ed-body { flex: 1; min-height: 0; overflow: auto; padding: 2px 4px 4px 0; scrollbar-width: thin; scrollbar-color: var(--gl-key) transparent; }
.st-ed-empty { flex: 1; display: grid; place-items: center; min-height: 80px; color: var(--gl-text2); font: 500 13px/1 var(--gl-read); }
.st-f { display: block; margin-top: 10px; }
.st-f-lab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; font-size: 10.5px; letter-spacing: .12em; color: var(--gl-text2); }
.st-f-lab small { margin-left: auto; font: 500 11px/1 var(--gl-read); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--gl-text2); }
.st-f-lab small.is-over { color: var(--st-warn); }
.st-f input, .st-f textarea { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key); background: var(--gl-well); color: var(--gl-text);
  font: 500 14px/1.3 var(--gl-read); outline: none; }
.st-f textarea { resize: vertical; min-height: 58px; }
.st-f input:focus, .st-f textarea:focus { box-shadow: inset 0 0 0 1.5px var(--gl-text); }
.st-f input[type="number"] { width: 6rem; font-variant-numeric: tabular-nums; }
.st-f input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gl-text); box-shadow: none; }
.st-f.is-changed > .st-f-lab > span::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--gl-text); margin-left: 6px; vertical-align: 1px; }
.st-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-list { display: grid; gap: 5px; }
.st-li { display: flex; gap: 5px; align-items: center; }
.st-li input, .st-li textarea { flex: 1; }
.st-li small { font: 500 11px/1 var(--gl-read); font-variant-numeric: tabular-nums; color: var(--gl-text2); }
.st-x-sm, .st-addrow { flex: none; width: 28px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text2); }
.st-x-sm svg { display: block; width: 14px; height: 14px; }
.st-x-sm:hover, .st-addrow:hover { color: var(--gl-text); box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-addrow { width: 32px; height: 28px; justify-self: start; font: 400 18px/1 var(--gl-read); }
.st-grp { margin-top: 12px; padding-left: 10px; border-left: 1px solid var(--gl-hair); }
.st-grp > .st-f-lab { margin-bottom: 0; }
.st-grp .st-f { margin-top: 7px; }
.st-rows { display: grid; gap: 8px; }
.st-row { display: grid; gap: 4px; align-items: center; }
.st-row input[type="number"] { width: 100%; height: 100%; text-align: center; padding: 0; }
.st-hr { margin: 14px 0 2px; height: 1px; background: var(--gl-hair); }
.st-ed-lib { flex: 1; display: grid; place-items: center; padding: 12px; }
.st-tag.is-lib { display: inline; flex: none; color: var(--gl-text2); }
.st-btn { height: 40px; padding: 0 18px; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text); font-size: 12px; letter-spacing: .12em; }
.st-btn:hover { box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-btn.is-accent { background: var(--gl-text); color: var(--gl-black); box-shadow: none; }
.st-btn.is-accent:hover { filter: brightness(.94); }

/* ---------- INTRO panel (intro.js): power · TODAY'S GUESTS · RENDER + lamp · ▶ ---------- */
.st-intro { min-height: 0; }
.st-power { flex: none; width: 28px; height: 28px; padding: 4px; box-sizing: border-box; display: grid; place-items: center; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text2); }
.st-power svg { display: block; width: 18px; height: 18px; }
.st-power.is-on { background: var(--gl-text); color: var(--gl-black); box-shadow: none; }
.st-intro-body { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.st-today { flex: none; font-size: 10.5px; letter-spacing: .12em; color: var(--gl-text2); }
.st-guests { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; max-width: 460px; }
.st-guest { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.st-gpic { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.05; padding: 0; overflow: hidden; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--gl-key); background: var(--gl-well); }
.st-gpic:hover { box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-gpic img { position: absolute; left: 3%; right: 3%; bottom: 0; width: 94%; height: 96%; object-fit: contain; object-position: center bottom; display: block; }
.st-guest:not(.has-portrait) .st-gpic img { opacity: .5; }
.st-guest.is-busy .st-gpic img, .st-guest[data-busy] .st-gpic img[src^="blob:"] { left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(1); opacity: .7; }
.st-gcam { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; color: var(--gl-text2); }
.st-gcam svg { display: block; width: 100%; height: 100%; }
/* cutting the sticker: one thin line sweeps the photo (a line that counts progress, not a texture) */
.st-gscan { display: none; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gl-text); animation: st-scan 1.1s var(--gl-ease-sheen) infinite alternate; }
.st-guest.is-busy .st-gscan { display: block; }
.st-guest[data-busy="up"] .st-gscan { background: var(--gl-text2); }
.st-guest input { width: 100%; box-sizing: border-box; min-width: 0; height: 30px; padding: 0 6px; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key); background: var(--gl-well); color: var(--gl-text);
  font: 500 13px/1 var(--gl-read); text-align: center; outline: none; }
.st-guest input::placeholder { color: var(--gl-text2); }
.st-guest input:focus { box-shadow: inset 0 0 0 1.5px var(--gl-text); }
.st-guest.needs-name input { box-shadow: inset 0 0 0 1.5px var(--st-warn); animation: st-need 1.6s ease-in-out infinite; }
.st-guest.is-err .st-gpic { box-shadow: inset 0 0 0 1.5px var(--st-warn); }
.st-gx { position: absolute; right: -7px; top: -7px; z-index: 2; width: 24px; height: 24px; padding: 3px; box-sizing: border-box; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gl-key); background: var(--gl-card);
  color: var(--gl-text2); display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.st-gx svg { display: block; width: 14px; height: 14px; }
.st-guest:hover .st-gx, .st-gx:focus-visible, .st-gx.is-arm { opacity: 1; }
.st-gx.is-arm { background: var(--gl-text); color: var(--gl-black); box-shadow: none; }
.st-gadd { width: 100%; aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text2); font: 500 12px/1 var(--gl-read); }
.st-gadd-ic { width: 24px; height: 24px; }
.st-gadd-ic svg { display: block; width: 100%; height: 100%; }
.st-gadd:hover { color: var(--gl-text); box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-guest.is-drop .st-gpic, .st-gadd.is-drop { box-shadow: inset 0 0 0 2px var(--gl-text); }
.st-rrow { flex: none; display: flex; gap: 8px; max-width: 460px; }
.st-render { position: relative; flex: 1; height: 44px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text); font-size: 13px; letter-spacing: .12em; }
.st-render:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-render:disabled:not(.is-running) { opacity: .5; }
/* the render lamp: grey = no guests · warm white breathing = stale · grey breathing = rendering · green = done · orange ring = failed */
.st-rlamp { width: 10px; height: 10px; flex: none; border-radius: 50%; box-sizing: border-box; box-shadow: inset 0 0 0 1.5px var(--gl-key); background: transparent; }
.st-rlamp.is-stale { background: var(--gl-text); box-shadow: none; animation: st-breathe 1.6s ease-in-out infinite; }
.st-rlamp.is-running { background: var(--gl-text2); box-shadow: none; animation: st-breathe .9s ease-in-out infinite; }
.st-rlamp.is-done { background: var(--st-ok); box-shadow: none; }
.st-rlamp.is-error { box-shadow: inset 0 0 0 1.5px var(--st-warn); }
.st-rbar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gl-hair); }
.st-render:not(.is-running) .st-rbar { display: none; }
.st-rbar > i { display: block; height: 100%; background: var(--gl-text); transform-origin: left center; transform: scaleX(0); transition: transform .6s linear; }
.st-play { flex: none; width: 44px; height: 44px; padding: 12px; box-sizing: border-box; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text); display: grid; place-items: center; }
.st-play svg { display: block; width: 100%; height: 100%; }
.st-play:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-play:disabled { color: var(--gl-text2); opacity: .5; }
.st-rerr { flex: none; max-width: 460px; font: 500 12px/1.3 var(--gl-read); color: var(--st-warn); overflow-wrap: anywhere; }

/* a short window: smaller guest cards so the RENDER row stays in view */
@media (max-height: 960px) { .st-guests, .st-rrow, .st-rerr { max-width: 372px; } .st-intro-body { gap: 8px; padding-top: 8px; } }

/* ---------- CROWD (board.js): C's pads (a 14 % tint, a 55 % keyline, a 22 px stroke icon, one word) ---------- */
.st-board { flex: none; }
.st-board .st-h { gap: 8px; padding-right: 8px; }
.st-pads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.st-crowd { position: relative; min-width: 0; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 14px; box-sizing: border-box; overflow: hidden; border: 0; border-radius: 6px;
  background: color-mix(in srgb, var(--c) 14%, var(--gl-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, var(--gl-card)); color: var(--gl-text); text-align: left; }
.st-crowd:hover { background: color-mix(in srgb, var(--c) 22%, var(--gl-card)); }
.st-crowd:active { background: color-mix(in srgb, var(--c) 30%, var(--gl-card)); }
.st-crowd-icon { width: 22px; height: 22px; flex: none; color: var(--c); }
.st-crowd-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-crowd b { min-width: 0; font-size: 13px; letter-spacing: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-crowd.is-hit { animation: st-press .3s var(--gl-ease-b); }
/* the pad that actually played glows in its colour for the sound's length (a soft pulse, not a strobe) */
.st-crowd.is-lit { box-shadow: inset 0 0 0 1.5px var(--c); animation: st-lit 1.1s ease-in-out infinite; }
.st-crowd.is-jev::after, .st-crowd.is-jevout::after { position: absolute; right: 6px; top: 5px; height: 16px; padding: 0 5px; display: flex; align-items: center; border-radius: 3px;
  font: 700 9.5px/1 var(--gl-label); letter-spacing: .1em; white-space: nowrap; }
.st-crowd.is-jev::after { content: "JEV"; background: var(--gl-agent); color: var(--gl-black); }
.st-crowd.is-jevout::after { content: "JEV OUT"; box-shadow: inset 0 0 0 1px var(--gl-text2); color: var(--gl-text2); }
/* Jev's odds after a JEV PICK: a solid 2 px bar along the bottom of every pad */
.st-odds { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--c) 25%, var(--gl-card)); opacity: 0; transition: opacity .3s; }
.st-odds > i { display: block; height: 100%; border-radius: 1px; background: var(--c); transform-origin: left center; transform: scaleX(var(--odds, 0)); transition: transform .7s var(--gl-ease-b); }
.st-board.has-odds .st-odds { opacity: 1; }
.st-jevpick { flex: none; height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px 0 6px; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text); }
.st-jevpick:hover { box-shadow: inset 0 0 0 1px var(--gl-agent); }
.st-jevpick .st-crowd-icon { width: 15px; height: 15px; color: var(--gl-text); }
.st-jevpick b { font-size: 10px; letter-spacing: .12em; }
.st-jevpick .st-jev-dot { transform-origin: 12px 12px; }
.st-jevpick.is-thinking .st-jev-dot { animation: st-spin 1.6s linear infinite; }
.st-jevpick.is-flash { animation: st-press .45s var(--gl-ease-b); }
.st-ears { flex: none; display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 6px; box-sizing: border-box; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--gl-key); color: var(--gl-text2); }
.st-ears-icon { width: 15px; height: 15px; flex: none; }
.st-ears-icon svg { display: block; width: 100%; height: 100%; }
.st-ears-lamp { width: 7px; height: 7px; flex: none; border-radius: 50%; box-sizing: border-box; box-shadow: inset 0 0 0 1.5px var(--gl-key); }
.st-ears-who { font-size: 10px; letter-spacing: .12em; color: var(--gl-text); min-width: 0; }
.st-ears-who:empty { display: none; }
.st-ears.is-on { color: var(--gl-text); box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-ears.is-on .st-ears-lamp { background: var(--st-ok); box-shadow: none; animation: st-breathe 1.6s ease-in-out infinite; }
.st-ears.is-heard .st-ears-lamp { background: var(--gl-text); }

/* ---------- ON CANVAS (the live board's cards, top first): author dot · name · author ---------- */
.st-layers { flex: 1 1 0; min-height: 74px; display: flex; flex-direction: column; }
.st-ly-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gl-key) transparent; }
.st-ly { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 36px; padding: 0 14px; box-shadow: inset 0 -1px 0 var(--gl-hair); font: 500 14px/1 var(--gl-read); }
.st-ly-c { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.st-ly-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ly-w { color: var(--gl-text2); font: 500 12.5px/1 var(--gl-read); }
.st-ly.is-hidden .st-ly-n { color: var(--gl-text2); }
.st-ly.is-sel { background: color-mix(in srgb, var(--sc) 10%, var(--gl-card)); box-shadow: inset 3px 0 0 var(--sc), inset 0 -1px 0 var(--gl-hair); }
.st-ly-empty { padding: 11px 14px; color: var(--gl-text2); font: 500 13px/1 var(--gl-read); }

/* ---------- LIBRARY drawer (over the bottom row; both monitors stay in view) ---------- */
.st-drawer { z-index: 8; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; background: var(--gl-card); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--gl-text2);
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .22s var(--gl-ease-b), transform .3s var(--gl-ease-b), visibility 0s linear .3s; }
.st-drawer.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--gl-ease-b), transform .3s var(--gl-ease-b), visibility 0s; }
.st-x { flex: none; width: 28px; height: 28px; padding: 5px; box-sizing: border-box; display: grid; place-items: center; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text2); }
.st-x svg { display: block; width: 16px; height: 16px; }
.st-x:hover { color: var(--gl-text); box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-cases { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; align-content: start;
  scrollbar-width: thin; scrollbar-color: var(--gl-key) transparent; }
.st-case { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--gl-key); background: var(--gl-raised); overflow: hidden; cursor: pointer; }
.st-case:hover { box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-case.is-sel { box-shadow: inset 0 0 0 1.5px var(--gl-text); }
.st-case .st-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--gl-well); overflow: hidden; }
.st-case .st-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.st-case .st-thumb .st-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.st-fallback-chip .st-lc { width: 36px; height: 23px; }
.st-case .st-spine { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; }
.st-case .st-spine span { flex: 1; min-width: 0; font-size: 10.5px; letter-spacing: .1em; color: var(--gl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-case .st-in { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; padding: 0 0 2px; box-sizing: border-box; display: grid; place-items: center; z-index: 2; border-radius: 50%;
  border: 0; background: var(--gl-text); color: var(--gl-black); font: 400 20px/1 var(--gl-read); }
.st-case .st-in:hover { filter: brightness(.92); }
.st-case .st-count { flex: none; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--gl-key); color: var(--gl-text); font: 600 10px/1 var(--gl-read); }

/* ---------- inbox popover ---------- */
.st-pop { position: fixed; z-index: 30; width: 380px; max-height: 60vh; display: flex; flex-direction: column; box-sizing: border-box; background: var(--gl-card); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--gl-key); overflow: hidden; }
.st-pop-list { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--gl-key) transparent; }
.st-msg { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; box-shadow: inset 0 -1px 0 var(--gl-hair); }
.st-msg .st-who { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--gl-key); color: var(--gl-text); font: 700 11px/1 var(--gl-label); }
.st-msg p { flex: 1; margin: 3px 0 0; font: 500 14px/1.3 var(--gl-read); }
.st-msg .st-ok { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 5px; box-sizing: border-box; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--gl-key); background: transparent; color: var(--gl-text); }
.st-msg .st-ok:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gl-text2); }
.st-msg .st-ok svg { display: block; width: 100%; height: 100%; }
.st-msg.is-done { opacity: .45; }
.st-msg.is-done .st-ok { color: var(--gl-text2); }
.st-pop-head .st-btn { height: 22px; padding: 0 8px; font-size: 10px; }
.st-pop-empty { padding: 18px 4px; text-align: center; color: var(--gl-text2); font: 500 13px/1 var(--gl-read); }

/* ---------- status bar ---------- */
.st-status { display: flex; align-items: center; gap: 18px; padding: 0 14px; border-top: 1px solid var(--gl-key); background: var(--gl-card); color: var(--gl-text2); font: 500 12.5px/1 var(--gl-read);
  font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; }
.st-conn { display: inline-flex; align-items: center; gap: 7px; }
.st-conn > i { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; box-shadow: inset 0 0 0 1.5px var(--gl-text2); }
.st-conn.is-ok { color: var(--gl-text); }
.st-conn.is-ok > i { background: var(--st-ok); box-shadow: none; }
.st-lamp { height: 20px; display: inline-flex; align-items: center; gap: 7px; padding: 0 2px; border: 0; background: none; color: var(--gl-text2); font: 500 12.5px/1 var(--gl-read); }
.st-lamp i { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; box-shadow: inset 0 0 0 1.5px var(--gl-text2); transition: background-color .2s; }
.st-lamp.is-saved i { background: var(--st-ok); box-shadow: none; }
.st-lamp.is-dirty i { background: var(--gl-text); box-shadow: none; }
.st-lamp.is-dirty, .st-lamp.is-error { color: var(--gl-text); }
.st-lamp.is-saving i { background: var(--gl-text2); box-shadow: none; animation: st-breathe .8s ease-in-out infinite; }
.st-lamp.is-error i { box-shadow: inset 0 0 0 2px var(--st-warn); }

/* ---------- toasts ---------- */
.st-toasts { position: fixed; left: 50%; bottom: 40px; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.st-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 14px; box-sizing: border-box; background: var(--gl-card); color: var(--gl-text);
  border-radius: 8px; box-shadow: inset 0 0 0 1px var(--gl-text2); font-size: 12px; letter-spacing: .12em; animation: st-toast .3s var(--gl-ease-b); }
.st-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-warn); }
.st-toast.is-ok::before { background: var(--st-ok); }
.st-toast button { height: 28px; padding: 0 10px; border: 0; border-radius: 5px; background: var(--gl-text); color: var(--gl-black); font: 600 11px/1 var(--gl-label); letter-spacing: .12em; }
.st-toast button.is-alt { background: transparent; box-shadow: inset 0 0 0 1px var(--gl-key); color: var(--gl-text); }
.st-toast.is-out { animation: st-toast-out .26s var(--gl-ease-exit) forwards; }

/* ---------- motion (scales with --gl-motion through the durations; reduced motion stops the loops) ---------- */
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
@keyframes st-in { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes st-flash { 0% { background: color-mix(in srgb, var(--st-acc) 40%, var(--gl-card)); } 100% { background: color-mix(in srgb, var(--st-acc) 12%, var(--gl-card)); } }
@keyframes st-press { 0% { transform: translateY(1px) scale(.98); } 100% { transform: none; } }
@keyframes st-take { 0% { transform: scale(.97); filter: brightness(1.25); } 100% { transform: none; filter: none; } }
/* C's flicker: a bright fill flutters +6 / -3.5 % luminance for ~200 ms at irregular moments; never on text alone, never a blink */
@keyframes st-flicker { 0%, 58% { filter: none; } 59% { filter: brightness(1.06); } 60.5% { filter: brightness(.965); } 62%, 86% { filter: none; } 87% { filter: brightness(1.04); } 88.5%, 100% { filter: none; } }
@keyframes st-lit { 0%, 100% { background: color-mix(in srgb, var(--c) 22%, var(--gl-card)); } 50% { background: color-mix(in srgb, var(--c) 40%, var(--gl-card)); } }
@keyframes st-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes st-toast { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes st-toast-out { to { transform: translateY(8px); opacity: 0; } }
@keyframes st-scan { from { top: 0; } to { top: calc(100% - 2px); } }
@keyframes st-need { 0%, 100% { box-shadow: inset 0 0 0 1.5px var(--st-warn); } 50% { box-shadow: inset 0 0 0 1px var(--gl-key); } }
@media (prefers-reduced-motion: reduce) {
  .st-take, .st-golive.is-live, .st-crowd.is-lit, .st-rlamp, .st-ears-lamp, .st-lamp i, .st-gscan, .st-guest.needs-name input, .st-jevpick .st-jev-dot { animation: none !important; }
}

/* ---------- narrow windows (the operator page's studio drawer): one column that scrolls ---------- */
@media (max-width: 1100px) {
  html, body { overflow: auto; }
  .st-app { position: static; min-width: 0; min-height: 0; grid-template-rows: 48px auto 24px; --st-L: 0px; }
  .st-top { flex-wrap: nowrap; overflow: hidden; gap: 10px; }
  .st-live, .st-vsep, .st-wm-t { display: none; }
  .st-main { display: flex; flex-direction: column; }
  .st-left, .st-right, .st-mons, .st-bottom { display: contents; }
  .st-trans { flex-wrap: wrap; }
  .st-bezel { width: 100%; }
  .st-deck { min-height: 300px; }
  .st-drawer { position: fixed; left: 12px; right: 12px; bottom: 12px; height: 60vh; }
  /* in the operator page's drawer the switcher and the rundown come first (the page itself is program) */
  .st-trans { order: 1; } .st-beats-panel { order: 2; } .st-rundown { order: 3; } .st-pvw { order: 4; } .st-deck { order: 5; } .st-board { order: 6; }
  .st-tweak { order: 7; } .st-layers { order: 8; min-height: 160px; } .st-pgm { order: 9; }
}