/* Shows > Stream setup (site/views/shows/stream.js). Desktop first; usable at 1280 wide.
   Two halves: the page (.st-*) and the editor's canvas (.se-*), which lives inside a shadow root next to the
   overlay's own stylesheets (live/live.css, live/overlay.css) - this sheet is linked there too, so the .se-* rules
   reach it. Sizes in the .se-* rules are px of the OBS canvas (the canvas is scaled down to fit the page). */

.st{display:grid;gap:var(--s-4);min-width:0}
.st-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.st-show{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;min-width:0}
.st-show select{max-width:360px}
.st-buttons{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.st-danger{color:var(--danger)}
.st-link{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.st-link:hover{color:var(--gold-2)}

/* the layout part: the canvas on the left (portrait), the panels on the right; landscape: the canvas across the top */
.st-grid{display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);gap:var(--s-4);align-items:start}
.st-grid[data-scene="landscape"]{grid-template-columns:minmax(0,1fr)}
.st-grid[data-scene="landscape"] .st-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.st-side{display:grid;gap:var(--s-4);min-width:0}
@media (max-width:1100px){.st-grid{grid-template-columns:minmax(0,1fr)}}
.st-preview-col{display:grid;gap:var(--s-3);justify-items:center;min-width:0}
.st-preview{position:relative;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--bg)}
.st-legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:0;padding:0;list-style:none;font-size:var(--fs-xs);color:var(--muted)}
.st-legend li{display:inline-flex;align-items:center;gap:6px}
.st-sw{display:inline-block;width:14px;height:10px;border-radius:2px}
.st-sw--covered{background:rgba(255,138,138,.35);border:1px solid var(--danger)}
.st-sw--camera{background:rgba(141,182,245,.18);border:1px dashed var(--blue-2)}
.st-sw--margin{border-left:2px dashed var(--gold);height:12px;width:6px}
.st-warn{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:var(--fs-sm);color:var(--warn);justify-self:stretch}
.st-ok{display:inline-flex;align-items:center;gap:6px;justify-self:stretch}
[data-warnings]{justify-self:stretch;display:grid;gap:var(--s-2)}

.st-widgets td,.st-widgets th{padding:6px 8px}
.st-widgets tr.is-sel td{background:var(--surface-2)}
.st-num{width:64px;text-align:right;font-variant-numeric:tabular-nums}
.st-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.st-options .st-wide{grid-column:1 / -1}

/* the parts that need a show */
.st-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);align-items:start}
.st-two .st-span{grid-column:1 / -1}
@media (max-width:1100px){.st-two{grid-template-columns:minmax(0,1fr)}}
.st-pins{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.st-pins li{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(120px,180px) auto;align-items:center;gap:var(--s-2)}
.st-pin-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-pin-moves{display:inline-flex}
.st-pick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.st-plan{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.st-plan-line{display:flex;flex-wrap:wrap;align-items:end;gap:var(--s-2);padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.st-plan-line .st-grow{flex:1 1 200px}
.st-plan-line .st-count{width:84px}
.st-line-state{flex-basis:100%}
.st-found{flex-basis:100%}
.st-plan-now{margin:0}
.st-owed{color:var(--warn);font-weight:700}
.st-obs{width:100%;table-layout:fixed}
.st-obs th{width:min(320px,40%);font-weight:600;color:var(--muted);text-align:left;white-space:normal}
.st-obs td{padding:6px 8px;vertical-align:middle;overflow:hidden}
.st-obs td:last-child{width:120px;text-align:right;overflow:visible;white-space:nowrap}
.st-url{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-xs)}
.st-pre{margin:0;padding:var(--s-3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);font-size:var(--fs-sm);white-space:pre-wrap}
.st-steps{margin:0;padding-left:1.2em;display:grid;gap:6px}

/* ---- the editor's canvas (inside the shadow root; px of the OBS canvas) ---- */
.se-scale{position:absolute;left:0;top:0;transform-origin:0 0}
.se-stage{overflow:hidden;
  background:linear-gradient(160deg,rgba(23,36,77,.9),rgba(6,11,26,.95) 60%),repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 40px,transparent 40px 80px)}
.se-band{position:absolute;left:0;right:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.se-band span{font:700 30px/1.2 var(--font);letter-spacing:.04em;text-transform:uppercase;opacity:.9}
.se-covered{background:repeating-linear-gradient(135deg,rgba(255,138,138,.28) 0 24px,rgba(255,138,138,.12) 24px 48px);border:3px solid var(--danger)}
.se-covered span{color:var(--danger)}
.se-camera{background:rgba(141,182,245,.08);border-top:3px dashed var(--blue-2);border-bottom:3px dashed var(--blue-2)}
.se-camera span{color:var(--blue-2)}
.se-vline,.se-hline{position:absolute;pointer-events:none}
.se-vline{top:0;bottom:0;border-left:3px dashed rgba(229,181,68,.7)}
.se-hline{left:0;right:0;border-top:3px dashed rgba(229,181,68,.7)}
.se-box{position:absolute;box-sizing:border-box;outline:3px dashed rgba(247,217,138,.55);outline-offset:0;cursor:move;touch-action:none;user-select:none}
.se-box .w{pointer-events:none}
.se-box:hover{outline-color:var(--gold-2)}
.se-box.is-sel{outline:5px solid var(--gold);z-index:2}
.se-box:focus-visible{outline:6px solid var(--blue-2);z-index:3}
.se-box.is-off{opacity:.35;outline-style:dotted}
/* the alert plays 7 seconds over the panels: drawn see-through here unless it is the one chosen */
.se-box[data-box="alert"]:not(.is-sel):not(.is-off) .w{opacity:.45}
.se-name{position:absolute;left:0;top:-44px;padding:4px 12px;border-radius:8px;background:rgba(6,11,26,.85);color:var(--gold-2);font:700 26px/1.2 var(--font);white-space:nowrap;pointer-events:none}
.se-box:not(.is-sel):not(:hover) .se-name{display:none}
.se-handle{position:absolute;right:-18px;bottom:-18px;width:36px;height:36px;border-radius:8px;background:var(--gold);border:3px solid var(--bg);cursor:nwse-resize}
.se-box:not(.is-sel) .se-handle{display:none}
@media (prefers-reduced-motion:reduce){.se-box{transition:none}}