/* ═══════════════════════════════════════════════════
   .RAW SESSIONS — Live Studio
   Rebranded VDO.Ninja Studio fork
   ═══════════════════════════════════════════════════ */

:root {
	--bg: #0d0c0b;
	--panel: #141312;
	--panel-2: #1a1918;
	--panel-3: #222120;
	--line: rgba(255, 255, 255, 0.08);
	--line-strong: rgba(255, 255, 255, 0.14);
	--text: #E6DFD2;
	--muted: #948B7E;
	--soft: #6f685e;
	--accent: #C6763B;
	--accent-2: #D2542A;
	--danger: #D6412B;
	--warning: #ffc857;
	/* audit 5: declare the tokens every var(--bronze/--smoke/--offwhite, fallback) relied on so
	   they resolve from :root instead of the inline fallback (values match the existing fallbacks). */
	--bronze: #C6763B;
	--smoke: #948B7E;
	--offwhite: #E6DFD2;
	--success: #49f0a7;
	--ai-cyan: #3ee8d0;
	--radius: 6px;
	--stage-bg: #0a0908;
	--source-radius: 8px;
	--mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	color-scheme: dark;
}

html {
	height: 100%;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-width: 1040px;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	background: var(--bg);
	color: var(--text);
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
}

button,
input,
select {
	font: inherit;
	letter-spacing: inherit;
}

button {
	border: 0;
}

.hidden {
	display: none !important;
}

/* ── Studio Shell ── */

.studio-shell {
	height: 100dvh;
	min-height: 0;
	overflow: hidden;
}

.studio-shell[data-state="setup"] .studio-workspace {
	display: none;
}

.studio-shell[data-state="studio"] .room-gate {
	display: none;
}

/* ═══════════ ROOM GATE ═══════════ */

.room-gate {
	display: grid;
	min-height: 100dvh;
	place-items: center;
	background: var(--bg);
	background-image:
		radial-gradient(ellipse 70% 50% at 30% 60%, rgba(198, 118, 59, 0.04) 0%, transparent 100%),
		radial-gradient(ellipse 50% 40% at 70% 30%, rgba(214, 65, 43, 0.03) 0%, transparent 100%);
}

.room-gate__panel {
	width: min(520px, calc(100vw - 40px));
	padding: 32px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--panel);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.room-gate__brand {
	margin-bottom: 28px;
}

/* ── .RAW Logo ── */

.raw-logo-gate {
	display: flex;
	align-items: center;
	gap: 12px;
}

.raw-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--danger);
	box-shadow: 0 0 8px rgba(214, 65, 43, 0.5);
	animation: pulse-dot 2s ease-in-out infinite;
}

.raw-dot--btn {
	width: 7px;
	height: 7px;
}

.raw-dot--rec {
	background: #ff4040;
	box-shadow: 0 0 6px rgba(255, 64, 64, 0.6);
}

@keyframes pulse-dot {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.raw-wordmark {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.raw-wordmark .accent,
.accent {
	color: var(--accent);
}

.raw-sub {
	font-size: 9px;
	color: var(--muted);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin-top: 2px;
}

.raw-logo-small {
	display: flex;
	align-items: center;
	gap: 8px;
}

.raw-wordmark-sm {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ── Gate Episode Config ── */

.gate-episode-config {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 12px;
	margin-bottom: 16px;
}

.gate-field {
	display: grid;
	gap: 6px;
	margin-bottom: 14px;
	color: var(--muted);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.gate-field--wide {
	/* for title field */
}

.gate-episode-config .gate-field {
	margin-bottom: 0;
}

/* EP prefix input */
.ep-input-wrap {
	display: flex;
	align-items: center;
	background: var(--panel-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	overflow: hidden;
}
.ep-prefix {
	padding: 0 0 0 12px;
	font-size: 13px;
	font-family: var(--mono);
	color: var(--muted);
	user-select: none;
	flex-shrink: 0;
}
.ep-input-wrap input {
	border: none !important;
	background: transparent !important;
	padding-left: 2px !important;
	width: 60px;
}
.ep-input-wrap:focus-within {
	border-color: var(--accent);
}

/* Gate hint */
.gate-hint {
	font-size: 9px;
	text-transform: none;
	letter-spacing: 0.02em;
	color: var(--soft);
	font-weight: normal;
}

/* ── Gate Crew ── */

.gate-crew {
	margin-bottom: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.gate-crew__label {
	font-size: 10px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-bottom: 10px;
}

.gate-crew__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.crew-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel-2);
	font-size: 11px;
	color: var(--text);
}

.crew-chip__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.crew-chip__dot--human {
	background: var(--success);
}

.crew-chip__dot--ai {
	background: var(--ai-cyan);
}

.crew-chip--ai {
	border-color: rgba(62, 232, 208, 0.2);
}

.crew-chip small {
	font-size: 8px;
	color: var(--ai-cyan);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-left: 2px;
}

/* ── Gate Inputs ── */

.room-gate input,
.gate-field input,
.field-row input,
.field-row select {
	width: 100%;
	min-height: 38px;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	background: var(--bg);
	color: var(--text);
	padding: 7px 10px;
	text-transform: none;
	font-size: 13px;
}

.room-gate input:focus,
.gate-field input:focus,
.field-row input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 1px rgba(198, 118, 59, 0.3);
}

.room-gate__actions,
.output-actions,
.program-toolbar__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.room-gate__actions {
	justify-content: flex-end;
	padding-top: 8px;
}

.room-gate label {
	display: grid;
	gap: 6px;
	margin-bottom: 14px;
	color: var(--muted);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

/* ═══════════ BUTTONS ═══════════ */

.button,
.icon-button,
.tab-button,
.layout-preset {
	min-height: 34px;
	border-radius: 4px;
	cursor: pointer;
	transition:
		background 120ms ease,
		border-color 120ms ease,
		color 120ms ease,
		transform 100ms ease;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
	font-size: 12px;
	letter-spacing: 0.04em;
}

.button--compact {
	min-height: 30px;
	padding: 0 10px;
	font-size: 11px;
}

.button--primary {
	border-color: rgba(198, 118, 59, 0.6);
	background: var(--accent);
	color: #0d0c0b;
	font-weight: 700;
}

.button--primary:hover {
	background: #d4813f;
}

.button--secondary {
	background: rgba(255, 255, 255, 0.05);
}

.button--danger {
	border-color: rgba(214, 65, 43, 0.4);
	background: rgba(214, 65, 43, 0.12);
	color: #ff9d8a;
}

.button--danger-soft {
	border-color: rgba(214, 65, 43, 0.3);
	background: rgba(214, 65, 43, 0.08);
	color: #ff9d8a;
}

.button:hover,
.icon-button:hover,
.tab-button:hover,
.layout-preset:hover {
	transform: translateY(-1px);
}

.button:disabled,
.icon-button:disabled,
.tab-button:disabled,
.layout-preset:disabled {
	cursor: not-allowed;
	opacity: 0.4;
	transform: none;
}

.button--secondary:hover,
.icon-button:hover,
.layout-preset:hover {
	background: rgba(255, 255, 255, 0.08);
}

#toggle-join-sound[aria-pressed="true"] {
	border-color: rgba(73, 240, 167, 0.4);
	background: rgba(73, 240, 167, 0.1);
	color: #7af2bc;
}

.icon-button {
	display: inline-grid;
	width: 34px;
	place-items: center;
	border: 1px solid var(--line-strong);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	font-size: 1.1rem;
}

/* ═══════════ STUDIO WORKSPACE ═══════════ */

.studio-workspace {
	display: grid;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	grid-template-columns: 260px minmax(520px, 1fr) 320px;
	grid-template-rows: 56px auto 1fr;   /* topbar · session-bar · panels (feature: session metadata bar) */
	background: var(--bg);
}

/* Session metadata bar — full-width row under the topbar; controller-editable, synced to OBS. */
.session-bar {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 5px 18px;
	border-bottom: 1px solid var(--line);
	background: rgba(13, 12, 11, 0.9);
	flex-wrap: wrap;
	row-gap: 6px;
}
.session-bar__eyebrow {
	flex: 0 0 auto;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 9px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bronze, #c6763b);
}
.session-field {
	display: flex;
	align-items: center;
	gap: 7px;
}
.session-field > span {
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}
.session-field input {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--text);
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 12px;
	padding: 4px 8px;
	width: 64px;
}
.session-field--title {
	flex: 1 1 260px;
	min-width: 160px;
}
.session-field--title input {
	width: 100%;
}
.session-field input:focus {
	outline: none;
	border-color: var(--bronze, #c6763b);
}
.session-field input:disabled,
.session-field input[readonly] {
	opacity: 0.75;
	cursor: default;
}
.session-bar__hint {
	margin-left: auto;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ── Top Bar ── */

.topbar {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 18px;
	border-bottom: 1px solid var(--line);
	background: rgba(13, 12, 11, 0.96);
}

.topbar__identity {
	display: flex;
	align-items: center;
	gap: 12px;
}

.topbar__title {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
}

.topbar__room {
	display: block;
	margin: 1px 0 0;
	padding: 0;
	background: transparent;
	color: var(--muted);
	cursor: copy;
	font-size: 11px;
}

.topbar__status {
	display: flex;
	align-items: center;
	gap: 10px;
}

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 26px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--muted);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.status-pill[data-state="live"] {
	background: rgba(73, 240, 167, 0.1);
	color: var(--success);
}

.status-pill[data-state="error"] {
	background: rgba(214, 65, 43, 0.12);
	color: #ff9d8a;
}

/* Scene link: the full OBS source URL shown inline in the topbar, click anywhere to copy. */
.topbar__scene {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	max-width: 420px;
	padding: 0 10px 0 11px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--muted);
	cursor: copy;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.topbar__scene-label {
	flex: 0 0 auto;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--bronze, #c6763b);
}

.topbar__scene-url {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 0.01em;
	color: rgba(236, 231, 221, 0.82);
}

.topbar__scene i {
	flex: 0 0 auto;
	font-size: 14px;
	opacity: 0.7;
}

.topbar__scene:hover {
	background: rgba(198, 118, 59, 0.12);
	border-color: rgba(198, 118, 59, 0.4);
}

.topbar__scene:hover .topbar__scene-url {
	color: #f0e7dc;
}

.topbar__scene:hover i {
	opacity: 1;
	color: #e7b487;
}

/* ── Panels ── */

.scenes-panel,
.control-panel {
	min-height: 0;
	overflow: hidden;
	border-right: 1px solid var(--line);
	background: var(--panel);
}

.scenes-panel {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.control-panel {
	display: flex;
	flex-direction: column;
	border-right: 0;
	border-left: 1px solid var(--line);
}

.panel-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 14px;
}

.panel-heading__actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.scenes-panel > .panel-heading {
	align-items: flex-start;
	flex-direction: column;
}

.scenes-panel > .panel-heading .panel-heading__actions {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scenes-panel > .panel-heading .panel-heading__actions .button {
	min-width: 0;
	padding: 0 8px;
}

.panel-heading h2,
.program-toolbar h2 {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--accent);
}

/* ── Scene & Source Lists ── */

.scene-list,
.source-list {
	display: grid;
	gap: 8px;
	padding: 0 12px 14px;
	overflow: auto;
}

.scene-card,
.source-card {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel-2);
	color: var(--text);
}

.scene-card {
	display: grid;
	grid-template-columns: 78px 1fr;
	gap: 10px;
	padding: 8px;
	text-align: left;
}

.scene-card[aria-selected="true"] {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px rgba(198, 118, 59, 0.25);
}

.scene-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	background: var(--stage-bg);
}

.scene-thumb__box {
	position: absolute;
	border-radius: 2px;
	background: rgba(198, 118, 59, 0.65);
}

.scene-card__title {
	align-self: center;
	min-width: 0;
	font-size: 12px;
	font-weight: 700;
}

.scene-card__meta {
	margin-top: 3px;
	color: var(--soft);
	font-size: 10px;
}

.scene-card__badge {
	position: absolute;
	right: 7px;
	bottom: 7px;
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba(73, 240, 167, 0.1);
	color: var(--success);
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ── Program Panel ── */

.program-panel {
	display: grid;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: #0e0d0c;
}

.program-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-width: 0;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
}

.program-toolbar > div:first-child {
	flex: 1 1 160px;
	min-width: 0;
}

.program-toolbar__actions {
	justify-content: flex-end;
	flex-wrap: wrap;
}

.program-toolbar__label {
	color: var(--soft);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.scene-name-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.scene-name-input {
	width: min(360px, 100%);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text);
	font-size: 14px;
	font-weight: 700;
}

.scene-name-input:focus {
	outline: 1px solid var(--accent);
	outline-offset: 4px;
}

/* ── Stage ── */

.stage-shell {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	place-items: center;
	gap: 12px;
	min-width: 0;
	min-height: 0;
	padding: 12px 18px;
}

.stage-aspect {
	position: relative;
	width: 100%;
	max-width: min(1180px, calc((100vh - 248px) * 16 / 9));
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--stage-bg);
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

#director-frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.stage-bg {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: var(--stage-bg);
	opacity: 0;
}

.stage-aspect[data-layout-mode="custom"] .stage-bg {
	opacity: 0.32;
}

.stage-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
}

.stage-aspect[data-drop-active="true"] {
	border-color: rgba(73, 240, 167, 0.5);
}

.stage-empty {
	position: absolute;
	z-index: 4;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.stage-empty__text {
	color: rgba(198, 118, 59, 0.5);
	font-weight: 800;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	z-index: 1;
}

.static-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.15;
	image-rendering: pixelated;
}

.stage-aspect[data-has-layout="true"] .stage-empty {
	display: none;
}

/* ── Layout boxes ── */

.layout-box {
	position: absolute;
	min-width: 7%;
	min-height: 8%;
	border: 2px solid var(--accent);
	border-radius: var(--source-radius);
	background: rgba(198, 118, 59, 0.12);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
	cursor: move;
	/* audit 2.8: dropped the left/top/width/height transitions and will-change. These boxes are
	   pointer-events:none and transparent over the live video; will-change promoted each to its own
	   compositor layer stacked on the video, and animating position gained nothing. Keep only the
	   cheap colour transitions for editor selection feedback. */
	transition:
		background 120ms ease,
		border-color 120ms ease;
}

.stage-overlay[data-dragging="true"] .layout-box {
	transition:
		background 120ms ease,
		border-color 120ms ease;
}

.layout-box[data-selected="true"] {
	border-color: var(--accent-2);
	background: rgba(210, 84, 42, 0.15);
}

.layout-box[data-drop-target="true"] {
	border-color: var(--success);
	background: rgba(73, 240, 167, 0.15);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.3),
		0 0 0 3px rgba(73, 240, 167, 0.2);
}

.layout-box[data-cover="false"] {
	border-style: dashed;
	background: rgba(255, 255, 255, 0.05);
}

.layout-box__label {
	position: absolute;
	left: 7px;
	bottom: 7px;
	max-width: calc(100% - 14px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 2px 7px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.7);
	color: var(--text);
	font-size: 11px;
	font-weight: 700;
}

.layout-box__handle {
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 14px;
	height: 14px;
	border: 2px solid var(--bg);
	border-radius: 50%;
	background: var(--accent);
	cursor: nwse-resize;
}

/* ── Box Inspector ── */

.box-inspector {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	width: 100%;
	max-width: min(1180px, calc((100vh - 330px) * 16 / 9));
	min-height: 56px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
}

.box-inspector[data-empty="true"] {
	align-items: center;
}

.box-inspector[data-empty="true"] .box-inspector__actions,
.box-inspector[data-empty="true"] .box-inspector__fields {
	display: none;
}

.box-inspector__summary {
	display: grid;
	align-content: center;
	gap: 3px;
	min-width: 0;
}

.box-inspector__eyebrow {
	color: var(--soft);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.box-inspector__summary strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.box-inspector__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.box-inspector__fields {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.box-inspector__fields label {
	display: grid;
	grid-template-columns: 16px 1fr;
	align-items: center;
	gap: 5px;
	color: var(--soft);
	font-size: 11px;
	font-weight: 700;
}

.box-inspector__fields input {
	min-width: 0;
	min-height: 30px;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	background: var(--bg);
	color: var(--text);
	padding: 4px 6px;
}

/* ── Layout Strip ── */

.layout-strip {
	display: grid;
	grid-template-columns: repeat(9, minmax(84px, 1fr));
	gap: 8px;
	overflow-x: auto;
	padding: 10px 18px;
	border-top: 1px solid var(--line);
	background: #0e0d0c;
}

.layout-preset {
	display: grid;
	grid-template-rows: 32px 1fr;
	place-items: center;
	gap: 5px;
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--muted);
	font-size: 10px;
	font-weight: 700;
}

.preset-icon {
	position: relative;
	width: 54px;
	height: 26px;
	border-radius: 3px;
	background: var(--stage-bg);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.preset-icon::before,
.preset-icon::after,
.preset-icon span {
	content: "";
	position: absolute;
	border-radius: 2px;
	background: var(--accent);
}

.preset-icon--solo::before { inset: 4px; }

.preset-icon--duo::before { left: 4px; top: 4px; width: 20px; height: 20px; }
.preset-icon--duo::after { right: 4px; top: 4px; width: 20px; height: 20px; }

.preset-icon--pip::before { inset: 3px; }
.preset-icon--pip::after { right: 5px; bottom: 5px; width: 16px; height: 10px; background: var(--accent-2); }

.preset-icon--screen {
	background:
		linear-gradient(var(--accent), var(--accent)) 4px 4px / 34px 18px no-repeat,
		linear-gradient(var(--accent-2), var(--accent-2)) 42px 4px / 8px 5px no-repeat,
		linear-gradient(var(--accent-2), var(--accent-2)) 42px 11px / 8px 5px no-repeat,
		linear-gradient(var(--accent-2), var(--accent-2)) 42px 18px / 8px 4px no-repeat,
		var(--stage-bg);
}

.preset-icon--spotlight {
	background:
		linear-gradient(var(--accent), var(--accent)) 4px 4px / 31px 18px no-repeat,
		linear-gradient(var(--accent-2), var(--accent-2)) 40px 4px / 10px 5px no-repeat,
		linear-gradient(var(--accent-2), var(--accent-2)) 40px 11px / 10px 5px no-repeat,
		linear-gradient(var(--accent-2), var(--accent-2)) 40px 18px / 10px 4px no-repeat,
		var(--stage-bg);
}

.preset-icon--grid {
	background:
		linear-gradient(var(--accent), var(--accent)) 4px 4px / 20px 9px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 30px 4px / 20px 9px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 4px 17px / 20px 8px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 30px 17px / 20px 8px no-repeat,
		var(--stage-bg);
}

.preset-icon--nine {
	background:
		linear-gradient(var(--accent), var(--accent)) 4px 4px / 13px 5px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 21px 4px / 13px 5px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 38px 4px / 12px 5px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 4px 12px / 13px 5px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 21px 12px / 13px 5px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 38px 12px / 12px 5px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 4px 20px / 13px 4px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 21px 20px / 13px 4px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 38px 20px / 12px 4px no-repeat,
		var(--stage-bg);
}

.preset-icon--rows {
	background:
		linear-gradient(var(--accent), var(--accent)) 4px 4px / 46px 5px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 4px 11px / 46px 5px no-repeat,
		linear-gradient(var(--accent), var(--accent)) 4px 18px / 46px 5px no-repeat,
		var(--stage-bg);
}

.preset-icon--vertical::before { left: 5px; top: 3px; width: 18px; height: 22px; }
.preset-icon--vertical::after { right: 5px; top: 3px; width: 18px; height: 22px; }

/* ═══════════ TABS ═══════════ */

.tabs {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3px;
	padding: 8px;
	border-bottom: 1px solid var(--line);
	background: #100f0e;
}

.tab-button {
	min-width: 0;
	border: 1px solid transparent;
	background: transparent;
	color: var(--soft);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.tab-button[aria-selected="true"] {
	border-color: var(--line-strong);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
}

.tab-panel {
	min-height: 0;
	overflow: auto;
	padding-bottom: 18px;
}

/* ═══════════ CREW CARD (Markus AI) ═══════════ */

.crew-card {
	margin: 0 14px 12px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel-2);
}

.crew-card--ai {
	border-color: rgba(62, 232, 208, 0.15);
	background: rgba(62, 232, 208, 0.03);
}

.crew-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.crew-card__avatar {
	display: inline-grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 4px;
	background: var(--panel-3);
	font-size: 11px;
	font-weight: 800;
	color: var(--text);
	flex-shrink: 0;
}

.crew-card__avatar--ai {
	background: rgba(62, 232, 208, 0.1);
	color: var(--ai-cyan);
	border: 1px solid rgba(62, 232, 208, 0.2);
}

.crew-card__info {
	flex: 1;
	min-width: 0;
}

.crew-card__info strong {
	display: block;
	font-size: 13px;
}

.crew-card__role {
	font-size: 10px;
	color: var(--muted);
}

.ai-status {
	color: var(--ai-cyan);
}

.crew-card__badge {
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(62, 232, 208, 0.1);
	color: var(--ai-cyan);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ═══════════ SOURCE CARDS ═══════════ */

.source-card {
	padding: 12px;
}

.source-card[draggable="true"]:not([data-disconnected="true"]) {
	cursor: grab;
}

.source-card__header,
.source-card__actions,
.source-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.source-card__preview {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: 10px;
	border-radius: 5px;
	background: var(--stage-bg);
	color: var(--soft);
	font-size: 2rem;
}

.source-card__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.source-card__sample {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
}

.source-card__meter {
	position: absolute;
	left: 7px;
	right: 7px;
	bottom: 6px;
	height: 4px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
}

.source-card__meter span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--accent);
	transition: width 100ms ease;
}

.source-card__header {
	justify-content: space-between;
}

.source-card__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 800;
}

.source-card__slot {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: rgba(198, 118, 59, 0.12);
	color: var(--accent);
	font-size: 10px;
	font-weight: 800;
}

.source-card__meta {
	margin-top: 5px;
	color: var(--soft);
	font-size: 11px;
}

.source-card__state {
	display: inline-flex;
	width: fit-content;
	margin-top: 8px;
	padding: 3px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--muted);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.source-card__actions {
	flex-wrap: wrap;
	margin-top: 10px;
}

.source-card__actions .button {
	flex: 1 1 110px;
	min-height: 30px;
	padding: 0 10px;
}

.source-card__devices {
	display: grid;
	gap: 8px;
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid var(--line);
}

.source-card__device-row {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	color: var(--soft);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.source-card__device-row select {
	min-width: 0;
	width: 100%;
	height: 30px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--bg);
	color: var(--text);
	font-size: 12px;
}

.source-card__device-note {
	color: var(--soft);
	font-size: 11px;
}

.source-card__device-note--error {
	color: var(--warning);
}

.guest-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.source-card[data-on-stage="true"] {
	border-color: rgba(198, 118, 59, 0.4);
}

.source-card[data-disconnected="true"] {
	border-color: rgba(255, 200, 87, 0.25);
	opacity: 0.7;
}

.source-card[data-disconnected="true"] .source-card__preview::after {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(10, 9, 8, 0.6);
	color: #ffe6a2;
	content: "Disconnected";
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.source-card[data-disconnected="true"] .source-card__meter span {
	background: var(--warning);
}

/* ── Misc cards ── */

.source-empty,
.utility-card {
	display: grid;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel-2);
	color: var(--muted);
}

.source-empty__action {
	width: 100%;
}

.invite-card {
	padding: 14px 14px 0;
	margin: 0;
}

.password-card[data-empty="true"] input {
	color: var(--soft);
}

.utility-card {
	margin: 0 14px;
}

.utility-card__title {
	color: var(--text);
	font-weight: 800;
}

.field-row,
.check-row {
	margin: 0 14px 14px;
}

.field-row--stacked {
	gap: 6px;
}

.field-row {
	display: grid;
	gap: 6px;
	color: var(--muted);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.check-row {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--muted);
	font-size: 12px;
}

.check-row input {
	width: 16px;
	height: 16px;
}

.copy-row {
	display: grid;
	grid-template-columns: 1fr 34px;
	gap: 6px;
}

/* ── Output ── */

.output-status {
	display: grid;
	gap: 4px;
	margin: 0 14px 14px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel-2);
}

.output-status__label {
	color: var(--soft);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.output-status__value {
	color: var(--text);
	font-size: 12px;
	font-weight: 700;
}

.output-status[data-state="active"] {
	border-color: rgba(73, 240, 167, 0.3);
}

.output-actions {
	flex-wrap: wrap;
	padding: 0 14px;
}

.output-actions .button {
	flex: 1 1 130px;
}

/* ═══════════ TRANSCRIPT ═══════════ */

.transcript-section {
	border-top: 1px solid var(--line);
}

.transcript-log {
	max-height: 200px;
	overflow-y: auto;
	margin: 0 12px 12px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	font-size: 11px;
}

.transcript-empty {
	color: var(--soft);
	font-style: italic;
}

.transcript-line {
	padding: 3px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.03);
	color: var(--text);
}

.transcript-line--error {
	color: var(--warning);
}

.transcript-ts {
	color: var(--soft);
	font-size: 10px;
	margin-right: 6px;
}

.raw-select {
	min-height: 28px;
	padding: 2px 6px;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	background: var(--bg);
	color: var(--text);
	font-size: 11px;
	cursor: pointer;
}

/* ═══════════ OBS SETUP TAB ═══════════ */

.obs-guide {
	padding: 0 14px;
}

.obs-guide__intro {
	margin: 0 0 14px;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.5;
}

.obs-guide__intro strong {
	color: var(--text);
}

.obs-link-card {
	margin-bottom: 12px;
	padding: 12px;
	border: 1px solid var(--line);
	border-left: 2px solid var(--accent);
	border-radius: var(--radius);
	background: var(--panel-2);
}

.obs-link-card__label {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text);
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 4px;
}

.obs-link-card__label i {
	color: var(--accent);
	font-size: 14px;
}

.obs-link-card__desc {
	color: var(--muted);
	font-size: 10px;
	margin-bottom: 8px;
}

.obs-url {
	font-size: 10px !important;
	min-height: 32px !important;
	color: var(--muted) !important;
}

.stream-note {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 14px 14px;
	padding: 10px 12px;
	border: 1px solid rgba(214, 65, 43, 0.2);
	border-radius: var(--radius);
	background: rgba(214, 65, 43, 0.04);
	font-size: 11px;
	color: var(--muted);
	line-height: 1.5;
}

.stream-note i {
	color: var(--danger);
	font-size: 14px;
	flex-shrink: 0;
	margin-top: 1px;
}

.stream-note a {
	color: var(--accent);
}

.stream-status {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 14px 14px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel-2);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
}

.stream-status__indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--soft);
}

.stream-status[data-state="live"] .stream-status__indicator {
	background: var(--danger);
	box-shadow: 0 0 6px rgba(214, 65, 43, 0.5);
	animation: pulse-dot 1.5s ease-in-out infinite;
}

/* ═══════════ TOAST ═══════════ */

.toast {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 10002;   /* audit 4.6: above the standby ribbon/overlays so feedback is never hidden mid-show */
	max-width: min(480px, calc(100vw - 40px));
	transform: translate(-50%, 20px);
	opacity: 0;
	pointer-events: none;
	padding: 10px 14px;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	background: rgba(20, 19, 18, 0.96);
	color: var(--text);
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
	transition:
		transform 160ms ease,
		opacity 160ms ease;
}

.toast[data-show="true"] {
	transform: translate(-50%, 0);
	opacity: 1;
}

/* ═══════════ RESPONSIVE ═══════════ */

@media (max-width: 1180px) {
	body {
		min-width: 0;
	}

	.studio-workspace {
		grid-template-columns: 200px minmax(430px, 1fr) 290px;
	}

	.scene-card {
		grid-template-columns: 66px 1fr;
	}
}

@media (max-width: 900px) {
	html,
	body {
		height: auto;
		min-width: 0;
		min-height: 100vh;
		overflow: auto;
	}

	.studio-shell,
	.studio-workspace {
		height: auto;
		min-height: 100dvh;
		overflow: visible;
	}

	.studio-workspace {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto;   /* + session bar row */
	}
	.session-bar { grid-column: 1; }

	.topbar {
		grid-column: 1;
		gap: 12px;
	}

	.scenes-panel,
	.control-panel {
		overflow: visible;
		border: 0;
		border-bottom: 1px solid var(--line);
	}

	.control-panel {
		display: block;
	}

	.tab-panel {
		overflow: visible;
	}

	.scene-list {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(170px, 210px);
		overflow-x: auto;
		padding-bottom: 12px;
	}

	.scene-card {
		grid-template-columns: 72px 1fr;
	}

	.program-panel {
		grid-template-rows: auto minmax(300px, auto) auto;
	}

	.program-toolbar {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.program-toolbar__actions {
		flex-wrap: wrap;
	}

	.scene-name-input {
		width: min(560px, calc(100vw - 36px));
	}

	.stage-shell {
		padding: 12px;
	}

	.stage-aspect,
	.box-inspector {
		width: 100%;
	}

	.box-inspector {
		grid-template-columns: 1fr;
	}

	.box-inspector__actions {
		flex-wrap: wrap;
	}

	.box-inspector__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.layout-strip {
		grid-template-columns: repeat(9, 100px);
		overflow-x: auto;
	}

	.control-panel {
		border-top: 1px solid var(--line);
	}
}

@media (max-width: 520px) {
	.topbar {
		align-items: flex-start;
		flex-direction: column;
	}

	.topbar__status,
	.room-gate__actions,
	.output-actions {
		width: 100%;
	}

	.program-toolbar__actions .button,
	.output-actions .button {
		flex: 1 1 100%;
	}

	.panel-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.panel-heading__actions {
		width: 100%;
		flex-wrap: wrap;
	}

	.panel-heading__actions .button {
		flex: 1;
	}

	.box-inspector__actions .button,
	.box-inspector__actions .icon-button {
		flex: 1 1 34px;
	}

	.tabs {
		position: sticky;
		top: 0;
		z-index: 20;
	}

	.gate-crew__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gate-episode-config {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════
   REDESIGN LAYER — calmer, more spacious pass
   Overrides above rules by source order. Remove this
   block to revert to the original styling.
   ═══════════════════════════════════════════════════ */
:root{
	--line: rgba(255,255,255,.045);
	--line-strong: rgba(255,255,255,.08);
	--panel:#131211;
	--panel-2:#1a1917;
	--panel-3:#221f1d;
	--radius:7px;
}

/* — borders → elevation: kill outline noise — */
.button{ border:0; }
.button--secondary{ background:rgba(255,255,255,.05); }
.button--secondary:hover{ background:rgba(255,255,255,.09); }
.button--primary{ font-weight:600; }
.source-card{ border:0; background:var(--panel-2); padding:12px; }
.source-card__name{ font-weight:600; }
.crew-card{ border:0; background:var(--panel-2); }
.crew-card--ai{ border:0; background:rgba(62,232,208,.05); }

/* — scenes: quiet rows, accent spine when selected — */
.scene-card{ border:0; background:transparent; }
.scene-card:hover{ background:var(--panel-2); }
.scene-card[aria-selected="true"]{ border:0; background:var(--panel-2); box-shadow:inset 2px 0 0 var(--accent); }

/* — tabs: segmented, borderless — */
.tab-button{ border:0; }
.tab-button[aria-selected="true"]{ border:0; background:var(--panel-2); }

/* — inputs: soft fill, no hard outline — */
.field-row input, .field-row select, .raw-select{ border:0; background:var(--panel-2); }
.field-row input:focus, .field-row select:focus, .raw-select:focus{ outline:1px solid var(--accent); }

/* — preset strip: calmer, icons recede until hover — */
.layout-preset{ border:0; background:transparent; }
.layout-preset:hover{ background:var(--panel-2); transform:none; }
.layout-preset .preset-icon{ opacity:.5; transition:opacity 120ms ease; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.layout-preset:hover .preset-icon{ opacity:1; }

/* — stage as hero — */
.stage-aspect{ border-radius:12px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.45); }

/* — breathing room — */
.panel-heading{ padding:16px 18px 12px; }
.scene-name-input{ font-size:16px; }

/* — right panel: grouped sections — */
.panel-heading--section{ margin-top:8px; border-top:1px solid var(--line); padding-top:16px; }

/* ============================================================
   CONSOLE NEST LAYER — collapsible left/right sidebars
   Adds a seam handle to each sidebar; collapses to a thin
   labeled rail so the stage can breathe. State persisted.
   ============================================================ */
.scenes-panel,.control-panel{position:relative;}
.raw-collapse{position:absolute;top:50%;transform:translateY(-50%);z-index:30;width:18px;height:46px;
  display:grid;place-items:center;background:var(--panel-2,#1a1917);border:1px solid var(--line,rgba(255,255,255,.08));
  color:var(--smoke,#948B7E);cursor:pointer;border-radius:6px;transition:color .15s,background .15s;padding:0;}
.raw-collapse:hover{color:var(--offwhite,#E6DFD2);background:var(--panel,#141312);}
.raw-collapse svg{width:11px;height:11px;display:block;}
.raw-collapse--left{right:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;}
.raw-collapse--right{left:0;border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;}
.raw-rail{display:none;}
.studio-workspace[data-left="collapsed"]{grid-template-columns:40px minmax(520px,1fr) 320px;}
.studio-workspace[data-right="collapsed"]{grid-template-columns:260px minmax(520px,1fr) 40px;}
.studio-workspace[data-left="collapsed"][data-right="collapsed"]{grid-template-columns:40px 1fr 40px;}
.studio-workspace[data-left="collapsed"] .scenes-panel>*:not(.raw-rail),
.studio-workspace[data-right="collapsed"] .control-panel>*:not(.raw-rail){display:none!important;}
.studio-workspace[data-left="collapsed"] .scenes-panel .raw-rail,
.studio-workspace[data-right="collapsed"] .control-panel .raw-rail{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:14px;height:100%;}
.raw-rail__btn{width:26px;height:40px;display:grid;place-items:center;cursor:pointer;background:var(--panel-2,#1a1917);
  border:1px solid var(--line,rgba(255,255,255,.08));border-radius:6px;color:var(--bronze,#C6763B);padding:0;}
.raw-rail__btn:hover{color:var(--offwhite,#E6DFD2);}
.raw-rail__btn svg{width:12px;height:12px;display:block;}
.raw-rail__label{writing-mode:vertical-rl;text-orientation:mixed;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--smoke,#948B7E);user-select:none;}

/* ============================================================
   LAYOUTS POPOVER — presets summoned from the toolbar instead
   of an always-on bottom strip. The strip goes out of flow so
   the stage reclaims the vertical space.
   ============================================================ */
.program-panel{position:relative;}
.layout-strip{
  position:absolute!important;z-index:45;top:60px;right:16px;bottom:auto!important;left:auto!important;
  display:none!important;grid-template-columns:repeat(3,minmax(92px,1fr))!important;gap:6px!important;width:auto!important;
  background:var(--panel,#141312);border:1px solid var(--line,rgba(255,255,255,.10));border-radius:12px;
  padding:12px!important;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.program-panel[data-layouts="open"] .layout-strip{display:grid!important;}
.raw-layouts-btn[aria-expanded="true"]{color:var(--offwhite,#E6DFD2)!important;background:var(--panel-2,#1a1917)!important;}


/* ============================================================
   MOBILE COLLAPSE RESET — on phones the collapsed-sidebar grid
   rules must not override the single-column layout.
   ============================================================ */
@media (max-width:900px){
  .studio-workspace[data-left="collapsed"],
  .studio-workspace[data-right="collapsed"],
  .studio-workspace[data-left="collapsed"][data-right="collapsed"]{grid-template-columns:1fr;}
  .studio-workspace[data-left="collapsed"] .scenes-panel>*:not(.raw-rail),
  .studio-workspace[data-right="collapsed"] .control-panel>*:not(.raw-rail){display:revert !important;}
  .studio-workspace[data-left="collapsed"] .scenes-panel .raw-rail,
  .studio-workspace[data-right="collapsed"] .control-panel .raw-rail{display:none !important;}
}


/* ============================================================
   PHASE 1 — SESSION & MODE (Build <-> Live, on-air, session timer)
   Self-contained enhancement layer over app.js/host.js.
   ============================================================ */
:root{ --rec:#E0483B; --ok:#5FA46A; --warn:#E5A63C; }
.raw-session{display:flex;align-items:center;gap:10px;margin-left:8px}
.raw-onair{display:none;align-items:center;gap:8px;padding:5px 11px;border-radius:7px;border:1px solid rgba(224,72,59,.45);background:rgba(224,72,59,.1);color:#ff8f84;font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.raw-onair .od{width:8px;height:8px;border-radius:50%;background:#E0483B;box-shadow:0 0 10px rgba(224,72,59,.7);animation:rawpulse 1.5s ease-in-out infinite}
.raw-onair .ot{font-variant-numeric:tabular-nums;color:#E6DFD2;letter-spacing:.06em}
@keyframes rawpulse{50%{opacity:.35}}
body[data-session="live"] .raw-onair{display:inline-flex}
.raw-primary{font-family:inherit;font-size:12px;letter-spacing:.06em;cursor:pointer;border-radius:7px;padding:9px 15px;border:1px solid transparent;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.raw-primary--go{background:var(--bronze,#C6763B);color:#1a120b;font-weight:600;border-color:var(--bronze,#C6763B)}
.raw-primary--go:hover{background:#d5843f}
.raw-primary--end{background:transparent;color:#ff8f84;border-color:rgba(224,72,59,.5)}
.raw-primary--end:hover{background:rgba(224,72,59,.12)}
.raw-primary--confirm{background:#E0483B;color:#150c0a;border-color:#E0483B;font-weight:600}
.raw-modetoggle{font-family:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:transparent;border:1px solid var(--line,rgba(255,255,255,.12));color:var(--smoke,#948B7E);border-radius:6px;padding:8px 12px}
.raw-modetoggle:hover{color:var(--offwhite,#E6DFD2)}
.raw-modetoggle[hidden]{display:none}
.raw-editwarn{display:none;position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:9997;align-items:center;gap:10px;padding:7px 14px;border-radius:8px;font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#150c0a;background:var(--warn,#E5A63C);box-shadow:0 8px 30px rgba(0,0,0,.4)}
body[data-session="live"][data-mode="build"] .raw-editwarn{display:flex}
#studio-root[data-mode="live"] .raw-layouts-btn,
#studio-root[data-mode="live"] .program-toolbar__actions,
#studio-root[data-mode="live"] .scenes-panel .panel-heading__actions,
#studio-root[data-mode="live"] .control-panel .tabs .tab-button:not([data-tab="sources"]){display:none}
#studio-root[data-mode="live"] .layout-preset{pointer-events:none;opacity:.5}



/* ============================================================
   PHASE 2 — PEOPLE ROWS (compact participant rows + quick actions)
   Reshapes app.js's .source-card into a row; quick actions proxy
   the app's own (hidden) buttons, so all wiring is reused.
   ============================================================ */
.crew-card--ai{display:none}
.source-card{display:grid;grid-template-columns:40px 1fr;grid-template-areas:"prev head" "prev state" "prev quick";column-gap:11px;row-gap:3px;padding:10px 11px;align-items:center}
.source-card__preview{grid-area:prev;width:40px;height:40px;min-height:0;border-radius:8px;overflow:hidden;position:relative;align-self:center}
.source-card__preview img{width:100%;height:100%;object-fit:cover}
.source-card__header{grid-area:head;min-width:0}
.source-card__name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.source-card__meta{display:none}
.source-card__state{grid-area:state;font-size:10px;letter-spacing:.03em;display:flex;align-items:center;gap:7px;color:var(--smoke,#948B7E)}
.source-card__slot{font-size:9px}
.raw-quickbar{grid-area:quick;display:flex;align-items:center;gap:5px;margin-top:4px}
.source-card__actions{display:none}
.source-card[data-actions="open"] .source-card__actions{display:flex;flex-wrap:wrap;gap:6px;grid-column:1/-1;margin-top:8px}
.source-card[data-actions="open"] .source-card__actions .button{font-size:11px;padding:6px 10px}
.source-card[data-actions="open"] .source-card__actions .raw-proxied{display:none}
.source-card__actions ~ *{grid-column:1 / -1}
.source-card__meter{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.45)}
.source-card__meter span{display:block;height:100%;background:var(--ok,#5FA46A)}
.raw-qbtn{width:30px;height:28px;display:grid;place-items:center;border-radius:6px;cursor:pointer;background:transparent;border:1px solid var(--line,rgba(255,255,255,.1));color:var(--smoke,#948B7E);padding:0}
.raw-qbtn:hover{color:var(--offwhite,#E6DFD2)}
.raw-qbtn i{font-size:14px}
.raw-qbtn[data-active="off"]{color:#ff8f84;border-color:rgba(224,72,59,.4)}
.raw-qbtn--stage[data-on="true"]{color:var(--bronze,#C6763B);border-color:rgba(198,118,59,.5);background:rgba(198,118,59,.1)}



/* ============================================================
   PHASE 3 — CANVAS CLEANUP (Live mode removes transform controls)
   Build keeps outlines/handles/inspector; Live shows a clean
   program with participant name labels only.
   ============================================================ */
#studio-root[data-mode="live"] .layout-box{border-color:transparent;background:transparent;box-shadow:none;cursor:default;pointer-events:none}
#studio-root[data-mode="live"] .layout-box[data-selected="true"]{border-color:transparent;background:transparent}
#studio-root[data-mode="live"] .layout-box__handle{display:none}
#studio-root[data-mode="live"] .box-inspector{display:none}
#studio-root[data-mode="live"] .scene-name-input{pointer-events:none;border-color:transparent;background:transparent}
#studio-root[data-mode="live"] .scene-name-label{display:none}



/* ============================================================
   PHASE 5 — POLISH (focus states, transcript drawer, scene shortcuts)
   ============================================================ */
:where(button,a,select,input,[tabindex],.raw-qbtn,.raw-collapse,.raw-rail__btn,.layout-preset,.scene-card,.source-card,.raw-primary,.raw-modetoggle):focus-visible{outline:2px solid var(--accent-2,#D2542A);outline-offset:2px;border-radius:6px}
.transcript-section .panel-heading h2{cursor:pointer}
.raw-tr-caret{margin-left:6px;color:var(--smoke,#948B7E);background:transparent;border:0;cursor:pointer;display:inline-grid;place-items:center;width:20px;height:20px;transition:transform .15s}
.raw-tr-caret:hover{color:var(--offwhite,#E6DFD2)}
.raw-tr-caret i{font-size:13px}
.transcript-section[data-collapsed="true"] .raw-tr-caret{transform:rotate(-90deg)}
.transcript-section[data-collapsed="true"] #transcript-log{display:none}
.raw-tr-live{width:7px;height:7px;border-radius:50%;background:var(--rec,#E0483B);box-shadow:0 0 8px rgba(224,72,59,.6);margin-left:8px;display:none;vertical-align:middle}
body[data-transcript="on"] .raw-tr-live{display:inline-block}
.scene-card{position:relative}
.raw-scene-key{position:absolute;top:6px;right:6px;font-family:var(--mono,ui-monospace,monospace);font-size:9px;color:var(--smoke,#948B7E);background:rgba(0,0,0,.5);border:1px solid var(--line,rgba(255,255,255,.1));border-radius:4px;padding:1px 5px;letter-spacing:.05em;pointer-events:none}



/* ============================================================
   HEADER CONSOLIDATION + DISCONNECTED CLEANUP
   Groups the topbar into identity / status / session clusters
   (flex order + dividers, no DOM moves); dismiss for ghost rows.
   ============================================================ */
.topbar__status{gap:12px}
.raw-host-badge{order:1}
.raw-host-controls{order:2}
#connection-status{order:3;padding-left:12px;border-left:1px solid var(--line)}
#refresh-state{order:4;opacity:.6;transition:opacity .15s}
#refresh-state:hover{opacity:1}
.raw-session{order:5;padding-left:14px;border-left:1px solid var(--line);margin-left:0}
/* disconnected / ghost participant rows */
.source-card[data-disconnected="true"] .source-card__state{color:#ff8f84}
/* audit 4.2: the shared per-seat vocabulary, colour-coded consistently on the card. */
.source-card__state[data-state="live"]{color:#5FBE7E}
.source-card__state[data-state="nocam"]{color:#E0A93B}
.source-card__state[data-state="reconnecting"]{color:#ff8f84}
.source-card__state[data-state="connecting"]{color:var(--smoke,#948B7E)}
.source-card__state[data-state="absent"]{color:var(--soft,#6f685e)}
.raw-dismiss{width:30px;height:28px;display:grid;place-items:center;border-radius:6px;cursor:pointer;background:transparent;border:1px solid rgba(224,72,59,.4);color:#ff8f84;padding:0}
.raw-dismiss:hover{background:rgba(224,72,59,.12)}
.raw-dismiss i{font-size:13px}



/* ============================================================
   ROOM IN HEADER — invite + password lifted to a header popover,
   out of the Crew list (declutters the sidebar). Real nodes are
   moved, so all copy/update wiring is preserved.
   ============================================================ */
.raw-roomwrap{position:relative;display:inline-flex}
.raw-roombtn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12px;color:var(--smoke,#948B7E);background:transparent;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:7px;padding:7px 11px;cursor:pointer}
.raw-roombtn:hover{color:var(--offwhite,#E6DFD2)}
.raw-roombtn i{font-size:13px}
.raw-roombtn__c{font-size:10px;transition:transform .15s}
.raw-roomwrap[data-open="true"] .raw-roombtn{color:var(--offwhite,#E6DFD2);border-color:var(--line-strong,rgba(255,255,255,.2))}
.raw-roomwrap[data-open="true"] .raw-roombtn__c{transform:rotate(180deg)}
.raw-roompop{position:absolute;top:calc(100% + 8px);left:0;z-index:60;display:none;width:340px;max-width:min(340px,calc(100vw - 32px));background:var(--panel,#141312);border:1px solid var(--line-strong,rgba(255,255,255,.14));border-radius:12px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);flex-direction:column;gap:12px}
.raw-roomwrap[data-open="true"] .raw-roompop{display:flex}
.raw-roompop__title{font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze,#C6763B)}
.raw-roompop .field-row{width:100%}
.tab-panel[data-panel="sources"] .panel-heading--section:first-child{margin-top:0;border-top:0;padding-top:0}



/* ============================================================
   VIDEO-FORWARD CREW CARDS — the feed is the card; name+status
   overlaid on it; controls in a bar below. Missing feeds show
   an animated "static / NO SIGNAL" placeholder.
   ============================================================ */
.source-card{display:block;position:relative;padding:0;overflow:hidden;border-radius:10px}
.source-card__preview{width:100%;height:auto;aspect-ratio:16/9;min-height:0;border-radius:0;position:relative;overflow:hidden;align-self:auto}
.source-card__preview img{width:100%;height:100%;object-fit:cover}
.source-card__meta{display:none}
.source-card__preview .source-card__header{position:absolute;left:8px;bottom:9px;z-index:3;background:rgba(0,0,0,.62);padding:3px 9px;border-radius:6px;display:flex;gap:7px;align-items:center;max-width:calc(100% - 16px)}
.source-card__preview .source-card__name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.source-card__preview .source-card__slot{font-size:9px;color:var(--bronze,#C6763B)}
.source-card__preview .source-card__state{position:absolute;top:8px;left:8px;z-index:3;background:rgba(0,0,0,.55);padding:2px 8px;border-radius:5px;font-size:9px;letter-spacing:.06em;color:var(--smoke,#948B7E);display:flex;align-items:center;gap:6px}
.source-card__meter{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.45);z-index:2}
.raw-quickbar{display:flex;gap:6px;padding:8px 10px;background:var(--panel-2,#1a1917);align-items:center}
.raw-qbtn{background:rgba(0,0,0,.28)}
.source-card[data-actions="open"] .source-card__actions{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 10px;background:var(--panel-2,#1a1917);margin-top:0}
@keyframes rawstatic{0%{background-position:0 0}25%{background-position:-12px 6px}50%{background-position:8px -10px}75%{background-position:-6px 12px}100%{background-position:10px 4px}}
.source-card__preview:not(:has(img)){background-color:#0e0c0b;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");background-size:170px 170px;animation:rawstatic .45s steps(3) infinite}
.source-card__preview:not(:has(img)) i{display:none}
.source-card__preview:not(:has(img))::after{content:"NO SIGNAL";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.34em;color:rgba(230,223,210,.45);z-index:1;pointer-events:none}



/* ============================================================
   STAGE "NO SIGNAL" STATIC — Build-mode layout boxes whose source
   has no live video get the static texture (boxes with real video
   keep the see-through tint so the feed shows). Live stays clean.
   ============================================================ */
#studio-root[data-mode="build"] .layout-box[data-nofeed="true"]{
  background-color:#0e0c0b;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size:170px 170px;
  animation:rawstatic .45s steps(3) infinite;
}



/* ============================================================
   NATURAL STATIC (canvas) — replaces the CSS-loop static with
   true per-frame random noise so it never reads as a loop.
   ============================================================ */
.source-card__preview:not(:has(img)){background-image:none;animation:none}
#studio-root[data-mode="build"] .layout-box[data-nofeed="true"]{background-image:none;animation:none}
.raw-static-cv{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9;image-rendering:pixelated}
.source-card__preview:not(:has(img))::after{color:rgba(235,230,220,.85);text-shadow:0 1px 3px rgba(0,0,0,.95);z-index:4}
.layout-box__label,.layout-box__handle{z-index:2}



/* ============================================================
   STATIC v3 — clean standby (soft screen + faint grain + chip)
   ============================================================ */
.source-card__preview:not(:has(img)),
#studio-root .layout-box[data-nofeed="true"]{
  background:radial-gradient(ellipse 120% 120% at 50% 38%, #1b1613 0%, #0d0b0a 70%)!important;
  box-shadow:inset 0 0 60px 8px rgba(0,0,0,.55)!important;
}
.raw-static-cv{opacity:.10!important}
.source-card__preview:not(:has(img))::after{content:none!important}
.raw-sig{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;gap:9px;
  background:rgba(14,13,12,.55);border:1px solid rgba(255,255,255,.1);padding:7px 14px;border-radius:20px;
  font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.26em;color:rgba(230,223,210,.72);
  text-transform:uppercase;backdrop-filter:blur(3px);pointer-events:none;white-space:nowrap}
.raw-sig .d{width:6px;height:6px;border-radius:50%;background:var(--bronze,#C6763B);box-shadow:0 0 8px rgba(198,118,59,.7);animation:rawpulse 1.8s ease-in-out infinite}


/* ============================================================
   STATIC v4 — match the original #static-canvas ("NO SIGNAL")
   Dense dark-grey snow at full opacity over near-black, with a
   plain letterspaced label. Overrides the muted v3 above.
   ============================================================ */
.source-card__preview:not(:has(img)),
#studio-root .layout-box[data-nofeed="true"]{
  background:#0a0908!important;
  box-shadow:inset 0 0 70px 6px rgba(0,0,0,.5)!important;
}
.raw-static-cv{opacity:1!important;image-rendering:pixelated}
.raw-sig{
  background:none!important;border:0!important;backdrop-filter:none!important;
  padding:0!important;border-radius:0!important;
  color:rgba(228,222,210,.5)!important;letter-spacing:.42em!important;
  font-size:11px!important;text-shadow:0 1px 4px rgba(0,0,0,.9)!important;
}
.raw-sig .d{display:none!important}

/* ============================================================
   LIVE-SHOW SIMPLIFY — retire scene engine; left rail = MARKUS
   (transcript); program switches via Spotlight/Duo/Triple.
   Hide (never remove) so app.js keeps its element refs.
   ============================================================ */
/* left rail: drop scene management, keep transcript */
.scenes-panel #import-template,
.scenes-panel #export-template,
.scenes-panel #add-scene,
.scenes-panel #scene-list{display:none!important}
.scenes-panel[data-role="markus"] .panel-heading:first-child{margin-bottom:6px}
.scenes-panel[data-role="markus"] .panel-heading:first-child h2{
  letter-spacing:.28em;color:var(--bronze,#C6763B)}

/* program toolbar: hide scene-management controls + injected Layouts btn */
#move-scene-up,#move-scene-down,#duplicate-scene,#delete-scene,#go-live,
.scene-name-label,#active-scene-title,.raw-layouts-btn{display:none!important}

/* Spotlight / Duo / Triple: one connected segmented control (single unit, no gaps). */
.raw-modes{display:inline-flex;align-items:stretch;height:34px;
  border:1px solid rgba(255,255,255,.11);border-radius:9px;overflow:hidden;
  background:rgba(255,255,255,.03)}
.raw-mode{
  appearance:none;cursor:pointer;font-family:var(--mono,ui-monospace,monospace);
  display:inline-flex;align-items:center;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:0 15px;border:0;border-radius:0;
  color:rgba(236,231,221,.72);background:transparent;
  transition:background .12s ease,color .12s ease}
.raw-mode + .raw-mode{border-left:1px solid rgba(255,255,255,.09)}
.raw-mode:hover{color:#ECE7DD;background:rgba(255,255,255,.06)}
.raw-mode[aria-pressed="true"]{
  color:#1a120b;background:var(--bronze,#C6763B);font-weight:600;border-left-color:transparent}
.raw-mode[aria-pressed="true"] + .raw-mode{border-left-color:transparent}

/* ============================================================
   LOCK PROGRAM BOXES — layout is preset-driven only. No manual
   drag / resize / select; remove the orange bounding box.
   (Preserves the no-feed static background.)
   ============================================================ */
#studio-root .stage-overlay .layout-box{
  pointer-events:none!important;cursor:default!important;
  border-color:rgba(255,255,255,.10)!important}
#studio-root .stage-overlay .layout-box__handle{display:none!important}
#studio-root .stage-overlay .layout-box[data-selected="true"],
#studio-root .stage-overlay .layout-box[data-drop-target="true"]{
  background:transparent!important;box-shadow:none!important;
  border-color:rgba(255,255,255,.10)!important}
/* program.html renders its own WAITING state under these boxes; never paint over the program frame. */
#studio-root .stage-overlay .layout-box{background:transparent!important}
#studio-root .stage-overlay .layout-box[data-nofeed="true"]{background:transparent!important}

/* ============================================================
   MARKUS rail fix — stop the transcript controls clipping and
   keep content pinned to the top (Scenes list is hidden).
   ============================================================ */
.scenes-panel[data-role="markus"]{grid-template-rows:auto auto 1fr!important}
/* stack the transcript heading: title on top, controls full-width below */
.scenes-panel[data-role="markus"] .transcript-section .panel-heading{
  flex-direction:column;align-items:stretch;gap:8px}
.scenes-panel[data-role="markus"] .transcript-section .panel-heading__actions{
  width:100%;display:flex;gap:6px}
.scenes-panel[data-role="markus"] .transcript-section .panel-heading__actions .raw-select{flex:0 0 auto}
.scenes-panel[data-role="markus"] .transcript-section .panel-heading__actions #transcript-toggle{flex:1 1 auto;min-width:0;text-align:center}
/* let the log + placeholder wrap instead of clipping */
.scenes-panel[data-role="markus"] .transcript-log{margin:0 14px 14px}
.transcript-empty{overflow-wrap:anywhere}

/* ============================================================
   "MORE" LAYOUTS — bring back the preset popover trigger as a
   secondary button after Spotlight / Duo / Triple.
   ============================================================ */
.program-toolbar__actions{display:flex;align-items:center;gap:8px}
.raw-modes{order:1}
/* "More" is now a compact icon button (no label) sitting flush beside the segmented control. */
#studio-root .raw-layouts-btn{display:inline-flex!important;align-items:center;justify-content:center;order:2;
  width:34px;height:34px;padding:0;border-radius:9px;font-size:17px;line-height:1}
#studio-root .raw-layouts-btn i{margin:0}

/* ============================================================
   CREW RAIL — pinned host seats, guest divider, seat delete;
   hide the Design tab (design is hard-coded).
   ============================================================ */
.tab-button[data-tab="design"],.tab-panel[data-panel="design"]{display:none!important}
.source-card[data-host-seat="true"]{box-shadow:inset 3px 0 0 var(--bronze,#C6763B)}
.raw-seat-del{position:absolute;top:6px;right:6px;z-index:6;width:20px;height:20px;padding:0;line-height:1;
  border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(18,16,14,.72);
  color:rgba(236,231,221,.75);font-size:14px;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(2px)}
.raw-seat-del:hover{background:#D6412B;border-color:#D6412B;color:#fff}
.raw-seat-divider{padding:10px 14px 4px;font-family:var(--mono,ui-monospace,monospace);font-size:9px;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(228,222,210,.42)}

/* ============================================================
   CONTROL DESK — channel-strip audio mixer below the stage.
   ============================================================ */
#box-inspector{display:none!important}
.raw-desk{margin:16px 0 4px;border:1px solid var(--line,rgba(255,255,255,.08));border-radius:12px;
  background:var(--panel,#141312);overflow:hidden}
.raw-desk__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line,rgba(255,255,255,.06))}
.raw-desk__title{font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.24em;color:var(--bronze,#C6763B)}
.raw-desk__hint{font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.06em;color:rgba(236,231,221,.4)}
.raw-desk__toggle{margin-left:auto;appearance:none;border:0;background:none;color:rgba(236,231,221,.55);font-size:13px;line-height:1;cursor:pointer;padding:2px 6px}
.raw-desk__toggle:hover{color:#ECE7DD}
.raw-desk[data-collapsed="true"] .raw-desk__rack{display:none}
.raw-desk[data-collapsed="true"] .raw-desk__head{border-bottom:0}
.raw-desk__rack{display:flex;gap:10px;padding:14px;overflow-x:auto}
.raw-strip{flex:0 0 82px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px;
  border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.raw-strip--master{background:rgba(198,118,59,.09);border-color:rgba(198,118,59,.28)}
.raw-strip[data-offline="true"]{opacity:.45}
.raw-strip--focus{border-color:var(--bronze,#C6763B);box-shadow:0 0 0 1px var(--bronze,#C6763B)}
.raw-strip__name{font-family:var(--mono,ui-monospace,monospace);font-size:11px;color:#ECE7DD;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raw-strip__body{display:flex;align-items:stretch;gap:8px;height:132px}
.raw-fader{-webkit-appearance:slider-vertical;appearance:slider-vertical;width:22px;height:132px;accent-color:var(--bronze,#C6763B);cursor:pointer}
.raw-vu{width:8px;height:132px;border-radius:3px;background:rgba(0,0,0,.5);overflow:hidden;display:flex;align-items:flex-end}
.raw-vu__fill{display:block;width:100%;height:0%;background:linear-gradient(#6f9c5a,#C6763B 68%,#E0483B);transition:height .1s linear}
.raw-strip__btns{display:flex;gap:6px}
.raw-mbtn,.raw-sbtn{font-family:var(--mono,ui-monospace,monospace);font-size:11px;width:26px;height:24px;border-radius:6px;
  cursor:pointer;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(236,231,221,.8)}
.raw-mbtn.on{background:#E0483B;border-color:#E0483B;color:#fff}
.raw-sbtn.on{background:#C6763B;border-color:#C6763B;color:#1a120b}
.raw-mbtn:disabled,.raw-sbtn:disabled,.raw-fader:disabled{opacity:.4;cursor:not-allowed}
.raw-strip__state{font-family:var(--mono,ui-monospace,monospace);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(236,231,221,.5)}

/* Retire the Samples test-feed button (no longer used). */
#add-samples{display:none!important}

/* ============================================================
   CONTROL DESK v2 — hardware / console look (StudioLive-ish).
   Overrides the v1 desk styling above. CSS only.
   ============================================================ */
.raw-desk{background:linear-gradient(180deg,#1b1917,#111010);border:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.45)}
.raw-desk__head{background:linear-gradient(180deg,#262320,#1a1817);border-bottom:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.raw-desk__title{color:#E9C9A8}
.raw-desk__rack{gap:6px;padding:12px 12px 14px;
  background:linear-gradient(180deg,#161412,#0f0e0d)}

/* channel strip: recessed metal panel */
.raw-strip{flex:0 0 78px;gap:7px;padding:8px 7px 9px;border-radius:6px;border:1px solid #000;
  background:linear-gradient(180deg,#211f1d,#171513);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.015), 0 2px 4px rgba(0,0,0,.4)}
.raw-strip--master{background:linear-gradient(180deg,#2a211a,#1a1512);border-color:#000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(198,118,59,.25), 0 2px 6px rgba(0,0,0,.5)}
.raw-strip--focus{box-shadow:0 0 0 2px var(--bronze,#C6763B), inset 0 1px 0 rgba(255,255,255,.06)!important}

/* scribble-strip name plate */
.raw-strip__name{width:100%;text-align:center;padding:4px 4px;border-radius:3px;font-size:10px;letter-spacing:.08em;
  background:linear-gradient(180deg,#2c2926,#201e1c);border:1px solid #000;color:#ECE7DD;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 2px rgba(0,0,0,.4)}
.raw-strip--master .raw-strip__name{background:linear-gradient(180deg,#7c4a24,#5c371b);color:#fff;letter-spacing:.14em}

/* fader + meter live in a recessed groove */
.raw-strip__body{gap:8px;height:150px;padding:6px 5px;border-radius:4px;
  background:#0b0a09;box-shadow:inset 0 2px 7px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.03)}
.raw-fader{width:24px;height:100%;accent-color:var(--bronze,#C6763B)}

/* segmented LED meter with dB-style scale ticks */
.raw-vu{position:relative;width:13px;height:100%;border-radius:2px;background:#050504;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 6px rgba(0,0,0,.9)}
.raw-vu__fill{position:absolute;left:0;bottom:0;width:100%;height:0%;
  background:linear-gradient(to top,#37a94e 0%,#7cc247 42%,#e2c74a 68%,#e0793a 86%,#E0483B 100%);
  transition:height .09s linear}
.raw-vu::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:2px;
  background:repeating-linear-gradient(to top, rgba(0,0,0,.9) 0 1px, transparent 1px 4px)}
.raw-vu::before{content:"";position:absolute;top:0;left:-6px;width:4px;height:100%;pointer-events:none;
  background:repeating-linear-gradient(to top, rgba(255,255,255,.18) 0 1px, transparent 1px 14.6px)}

/* tactile M / S buttons */
.raw-mbtn,.raw-sbtn{width:28px;height:22px;border-radius:4px;font-size:10px;font-weight:600;
  border:1px solid #000;background:linear-gradient(180deg,#2a2724,#1c1a18);color:rgba(236,231,221,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.raw-mbtn.on{background:linear-gradient(180deg,#ff5a49,#c9382b);border-color:#7a1f16;color:#fff;
  box-shadow:0 0 8px rgba(224,72,59,.5), inset 0 1px 0 rgba(255,255,255,.3)}
.raw-sbtn.on{background:linear-gradient(180deg,#f0c24a,#c6902f);border-color:#7a561a;color:#241a09;
  box-shadow:0 0 8px rgba(214,150,60,.45), inset 0 1px 0 rgba(255,255,255,.4)}

.raw-strip__state{font-size:8px;letter-spacing:.16em;color:rgba(236,231,221,.42)}

/* ============================================================
   BROADCAST — logo bug, standby overlay, Logo/Standby buttons.
   ============================================================ */
/* Broadcast is its own category: a divider sets it apart from the layout controls to its left. */
.raw-bcast{display:inline-flex;gap:6px;align-items:center;order:3;
  margin-left:4px;padding-left:14px;border-left:1px solid rgba(255,255,255,.1)}

/* Your feed: the operator's personal camera toggle, grouped at the top of the Crew tab. */
.raw-selfcam{display:flex;align-items:center;gap:10px;margin:2px 14px 12px;padding:9px 12px;
  border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.02)}
.raw-selfcam__label{flex:0 0 auto;font-family:var(--mono,ui-monospace,monospace);font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(228,222,210,.42)}
.raw-selfcam .raw-hostcam-btn{margin-left:auto;flex:0 0 auto}
/* fable §3: the self mic/camera controls sit in the "Your feed" card. font-size a touch smaller so
   three controls fit; muted/off reads red (a warning), never the bronze "engaged" look. */
.raw-selfcam__ctl{flex:0 0 auto;font-size:11px;padding:8px 11px}
.raw-selfcam__ctl:disabled{opacity:.4;cursor:not-allowed}
.raw-selfcam__ctl[data-active="off"]{color:#fff;background:#c9382b;border-color:#7a1f16;font-weight:600}
.raw-selfcam__ctl[data-active="off"]:hover{background:#d5473a;border-color:#7a1f16}
/* fable §1: MONITOR bar — what YOU hear. "Hosts" (listening) reads calm/on; "Off" reads red. */
.raw-desk__monitor{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid rgba(0,0,0,.6);
  background:linear-gradient(180deg,rgba(38,35,32,.6),rgba(26,24,23,.6))}
.raw-desk[data-collapsed="true"] .raw-desk__monitor{display:none}
.raw-desk__monlabel{font-family:var(--mono,ui-monospace,monospace);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(228,222,210,.5)}
.raw-desk__monhint{font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.05em;color:rgba(236,231,221,.4)}
.raw-monbtn{appearance:none;cursor:pointer;font-family:var(--mono,ui-monospace,monospace);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:6px;font-weight:600;
  color:#0f1a12;background:#5bbd7a;border:1px solid #3f8f57;transition:all .12s ease}
.raw-monbtn[data-state="off"]{color:#fff;background:#c9382b;border-color:#7a1f16}
.raw-monbtn:disabled{opacity:.4;cursor:not-allowed;color:rgba(236,231,221,.6);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.raw-bcast-btn{appearance:none;cursor:pointer;font-family:var(--mono,ui-monospace,monospace);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border-radius:8px;
  color:rgba(236,231,221,.78);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);transition:all .12s ease}
.raw-bcast-btn:hover{color:#ECE7DD;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.raw-bcast-btn[aria-pressed="true"]{color:#1a120b;background:var(--bronze,#C6763B);border-color:var(--bronze,#C6763B);font-weight:600}
.raw-bcast--warn:hover{border-color:#E0483B;color:#fff}
.raw-bcast--warn[aria-pressed="true"]{background:#E0483B;border-color:#E0483B;color:#fff;box-shadow:0 0 12px rgba(224,72,59,.45)}

/* logo bug (broadcast corner ident) — static .RAW / MASTER_SESSIONS lockup,
   drawn directly in the stage corner (no iframe → cannot whiten the stage).
   White over the program video, soft shadow so it reads on any footage. */
.raw-logo-bug{position:absolute;right:18px;bottom:16px;z-index:8;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:0;background:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.8))}
.raw-logo-bug[hidden]{display:none}
.raw-logo-bug .rlb-ep{position:relative;font-family:var(--mono,ui-monospace,monospace);
  font-size:10px;font-weight:600;letter-spacing:.18em;color:#F2EEE6;padding-top:8px;margin-bottom:1px}
.raw-logo-bug .rlb-ep::before{content:"";position:absolute;top:0;left:1px;width:20px;height:2px;
  background:#F2EEE6;border-radius:2px}
.raw-logo-bug .rlb-title{font-family:"Helvetica Neue",Arial,"Arial Black",sans-serif;
  font-weight:900;font-size:30px;line-height:.9;letter-spacing:-.015em;color:#F5F1E9}
.raw-logo-bug .rlb-sub{font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;font-weight:500;letter-spacing:.1em;color:rgba(245,241,233,.92);margin-top:2px}
.raw-logo-bug.rlb-anim{animation:rlbin .5s ease both}
@keyframes rlbin{from{opacity:0;transform:translateY(7px) scale(.97)}to{opacity:1;transform:none}}

/* standby overlay (covers the program stage) */
.raw-standby-overlay{position:absolute;inset:0;z-index:22;background:#000;border-radius:inherit;overflow:hidden}
.raw-standby-frame{width:100%;height:100%;border:0;display:block}
.raw-standby-overlay.on{animation:sbfade .18s ease both}
@keyframes sbfade{from{opacity:0}to{opacity:1}}

/* Feeds edge-to-edge: thin hairline between touching layout boxes. */
#studio-root .stage-overlay .layout-box{border:1px solid rgba(255,255,255,.14)!important}

/* ============================================================
   JUMP IN — avatar chooser fronting the identity gate.
   ============================================================ */
.raw-jumpin{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 70% at 50% 40%, rgba(20,17,15,.72), rgba(6,5,5,.92));backdrop-filter:blur(6px)}
.raw-jumpin .ji-card{width:min(560px,calc(100vw - 32px));padding:26px 26px 20px;border-radius:16px;
  background:linear-gradient(180deg,#1a1817,#121110);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.6);font-family:var(--mono,ui-monospace,monospace)}
.raw-jumpin .ji-head{display:flex;align-items:center;gap:9px;margin-bottom:2px}
.raw-jumpin .ji-dot{width:9px;height:9px;border-radius:50%;background:#D6412B;box-shadow:0 0 10px rgba(224,72,59,.7)}
.raw-jumpin .ji-brand{font-size:15px;letter-spacing:.04em;color:#ECE7DD}
.raw-jumpin .ji-brand b{color:var(--bronze,#C6763B);font-weight:800}
.raw-jumpin .ji-title{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(236,231,221,.5);margin:2px 0 18px}
.raw-jumpin .ji-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:520px){.raw-jumpin .ji-tiles{grid-template-columns:repeat(2,1fr)}}
.raw-jumpin .ji-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 12px;cursor:pointer;
  border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);transition:all .14s ease}
.raw-jumpin .ji-tile:hover{background:rgba(255,255,255,.06);border-color:var(--bronze,#C6763B);transform:translateY(-2px)}
.raw-jumpin .ji-tile--active{border-color:var(--bronze,#C6763B);background:rgba(198,118,59,.1)}
.raw-jumpin .ji-av{width:64px;height:64px;border-radius:50%;background-size:cover;background-position:center;
  border:2px solid rgba(255,255,255,.14);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.raw-jumpin .ji-tile--guest .ji-av{filter:grayscale(.5) opacity(.85)}
.raw-jumpin .ji-name{font-size:14px;color:#ECE7DD;font-weight:600}
.raw-jumpin .ji-role{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,231,221,.45)}
.raw-jumpin .ji-guest{display:flex;gap:8px;margin-top:16px}
.raw-jumpin .ji-guest[hidden]{display:none}
.raw-jumpin .ji-guest-name{flex:1;min-width:0;background:#0d0c0b;border:1px solid rgba(255,255,255,.12);border-radius:8px;
  color:#ECE7DD;font-family:inherit;font-size:14px;padding:11px 12px}
.raw-jumpin .ji-guest-name:focus{outline:1px solid var(--bronze,#C6763B)}
.raw-jumpin .ji-guest-go{background:var(--bronze,#C6763B);border:0;border-radius:8px;color:#1a120b;font-family:inherit;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:0 16px;cursor:pointer}
.raw-jumpin .ji-foot{margin-top:16px;font-size:10px;letter-spacing:.06em;color:rgba(236,231,221,.4);text-align:center}

/* Jump In avatars: larger, rounded-square (show more of the photo). */
.raw-jumpin .ji-tiles{gap:14px}
.raw-jumpin .ji-tile{padding:10px 10px 12px;gap:9px}
.raw-jumpin .ji-av{width:100%;height:auto;aspect-ratio:1/1;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 16px rgba(0,0,0,.45)}
.raw-jumpin .ji-tile--guest .ji-av{filter:grayscale(.45) opacity(.9)}

/* Fix: the hidden attribute must actually hide the Jump In overlay
   (its display:flex above was overriding [hidden]). */
.raw-jumpin[hidden]{display:none!important}

/* ============================================================
   HOSTCAM (A1) — remote host's own camera publisher + Cam button.
   The publisher iframe must keep running to publish, so it is
   parked off-screen (never display:none, which can suspend media).
   ============================================================ */
.raw-hostcam-pub{
  position:fixed; left:-10000px; top:auto; bottom:0;
  width:2px; height:2px; opacity:0; pointer-events:none; overflow:hidden;
}
.raw-hostcam-pub iframe{width:2px;height:2px;border:0}
.raw-hostcam-btn.on{
  color:#1a120b!important; background:#d9524b!important; border-color:#d9524b!important;
  font-weight:600; box-shadow:0 2px 12px rgba(217,82,75,.4)!important;
}

/* ============================================================
   RESPONSIVE / MOBILE (audit pass) — the live-show redesign and
   the injected desk / toolbar / rails shipped with no responsive
   rules. Keep the stage inside its grid cell so the CONTROL DESK
   always fits, stop horizontal overflow on phones, and give the
   faders a vertical mode that works on modern Safari / iOS.
   ============================================================ */

/* 1) Desktop/laptop: fit the stage to its cell (leaving room for the
      control desk) instead of sizing off 100vh and pushing the desk
      off the bottom edge. */
@media (min-width: 901px){
  .program-panel{ min-height:0; }
  .program-panel .stage-shell{ grid-template-rows:minmax(0,1fr)!important; min-height:0; }
  /* audit 4.7: width-driven, so the preview is ALWAYS true 16:9 and matches OBS. Sizing off
     height:100% + max-width let the box become e.g. 1.46:1 on 1024x768. The width budget subtracts
     the topbar (~56), toolbar (~58) and the control desk (~310) from the viewport height. */
  .program-panel .stage-aspect{
    width:min(100%, calc((100vh - 56px - 58px - 310px) * 16 / 9))!important; height:auto!important;
    max-width:100%!important;
    margin-inline:auto;
  }
  .raw-desk{ margin-top:10px; }
}

/* 2) Phones / narrow: never let anything force a horizontal scroll. */
@media (max-width: 900px){
  html, body{ overflow-x:hidden; }
  .studio-workspace{ width:100%; max-width:100vw; overflow-x:hidden; }
  .topbar{ flex-wrap:wrap; row-gap:8px; height:auto; }
  .topbar__identity, .topbar__status{ flex-wrap:wrap; row-gap:6px; }
  .raw-session{ margin-left:0; }
  .program-toolbar{ flex-wrap:wrap; row-gap:8px; }
  .program-toolbar__actions{ flex-wrap:wrap; row-gap:6px; width:100%; }
  .raw-bcast{ flex-wrap:wrap; }
  .raw-modes{ flex-wrap:nowrap; }   /* segmented control stays one connected unit */
  .program-panel .stage-aspect{ width:100%!important; height:auto!important; max-width:100%!important; }
  .raw-desk{ max-width:100%; }
  .raw-desk__rack{ -webkit-overflow-scrolling:touch; }
  /* sidebar collapse handles are meaningless once panels stack */
  .raw-rail, .raw-rail__toggle{ display:none!important; }
}

/* 3) Vertical faders that work on current Safari/iOS (the old
      -webkit slider-vertical is dropped in newer WebKit). */
.raw-fader{ writing-mode: vertical-lr; direction: rtl; }

/* ============================================================
   A3 — authoritative host-control lock. host.js already dims the
   toolbar/layout/source actions for a non-host crew member
   (data-raw-self="standby"). Extend that to the control desk and
   the Go Live button, and NEVER lock a crew member out of
   publishing their own camera.
   ============================================================ */
.studio-workspace[data-raw-self="standby"] .raw-desk,
.studio-workspace[data-raw-self="observer"] .raw-desk,
.studio-workspace[data-raw-self="standby"] .raw-session .raw-primary,
.studio-workspace[data-raw-self="observer"] .raw-session .raw-primary{
  opacity:.4;pointer-events:none;filter:grayscale(.4);
}
/* own-camera publish is not a director control — keep it usable */
.studio-workspace[data-raw-self="standby"] .raw-hostcam-btn,
.studio-workspace[data-raw-self="observer"] .raw-hostcam-btn{
  opacity:1!important;pointer-events:auto!important;filter:none!important;
}

/* ============================================================
   SEAT ASSIGN — per-feed "SEAT" button. VDO gives incoming feeds
   random ids and no usable label, so the director assigns a feed
   to a host seat with one click (cycles none → RJ → Greg → Rafa).
   ============================================================ */
.source-card{position:relative}
.raw-seat-assign{
  position:absolute; top:8px; left:8px; z-index:6; cursor:pointer;
  font-family:var(--mono,ui-monospace,monospace); font-size:9px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:3px 7px; border-radius:5px;
  color:rgba(236,231,221,.72); background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.2);
}
.raw-seat-assign:hover{ color:#fff; border-color:rgba(255,255,255,.45); }
.raw-seat-assign[data-on="true"]{
  color:#1a120b; background:var(--bronze,#C6763B); border-color:var(--bronze,#C6763B);
}

/* Shared program / telemetry separation. */
#director-frame { position:fixed !important; left:-10000px !important; top:0 !important; width:640px !important; height:360px !important; opacity:0 !important; pointer-events:none !important; }
#program-frame { z-index:2; background:#0c0b0a; }
#stage-bg { z-index:1; }
.raw-hostcam-pub { position:fixed; left:-10000px; top:0; width:640px; height:360px; border:0; }
body:not([data-raw-self="host"]) #stage-overlay { pointer-events:none; }
body:not([data-raw-self="host"]) .raw-quickbar { pointer-events:none; opacity:.5; }
/* While standby is live the program frame is a full branded takeover; hide the console's
   transparent layout-box grid drawn over it so the console preview matches the clean OBS output
   (otherwise the standby reads as per-feed boxes rather than one full-screen card). */
body[data-program-standby="true"] #stage-overlay { opacity:0 !important; pointer-events:none !important; }
/* audit 4.3: an unmistakable red "ON STANDBY" ribbon over the console stage while standby is live.
   NOTE: unique class (raw-onair-standby) — host.js already defines .raw-standby-ribbon for its own
   observer take-control bar; reusing that name collided and drew it full-page. */
.raw-onair-standby{display:none;position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:60;
  align-items:center;gap:8px;background:#E0483B;color:#fff;font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;padding:6px 16px;border-radius:999px;
  box-shadow:0 6px 20px rgba(224,72,59,.5);pointer-events:none}
.raw-onair-standby__dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8);animation:sbribbon 1.4s ease-in-out infinite}
@keyframes sbribbon{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.raw-onair-standby__dot{animation:none}}
body[data-program-standby="true"] .raw-onair-standby{display:flex}
.raw-seat-assign,.raw-seat-del { display:none !important; }

/* ============================================================
   MOBILE PARTICIPANT VIEW — stage-first reflow (≤900px).
   The console stacks in DOM order (MARKUS/transcript → stage →
   crew), which buries the live stage. On a phone the stage is the
   whole point, so reflow to: sticky topbar → STAGE (hero) →
   program controls → crew → transcript, and tuck the director-only
   tools (presets, mixer, inspector) below. CSS-only; desktop is
   untouched (all rules are inside the phone media queries).
   ============================================================ */
@media (max-width:900px){
  /* Flex column lets us reorder the four workspace regions freely. */
  .studio-workspace{ display:flex!important; flex-direction:column; gap:0; }
  .studio-workspace > .topbar{ order:0; position:sticky; top:0; z-index:40;
    background:var(--panel,#131211); border-bottom:1px solid var(--line); }
  .studio-workspace > .program-panel{ order:1; }
  .studio-workspace > .control-panel{ order:2; }
  .studio-workspace > .scenes-panel{ order:3; }

  /* Program panel: the stage leads, every control sits beneath it. */
  .program-panel{ display:flex!important; flex-direction:column; gap:10px; padding:10px; min-height:0; }
  .program-panel .stage-shell{ order:0; padding:0; }
  .program-panel .program-toolbar{ order:1; }
  .program-panel .raw-desk{ order:2; }
  .program-panel .layout-strip{ order:3; }
  .program-panel .box-inspector{ order:4; }

  /* Full-bleed 16:9 stage, pinned high, never shrinks. */
  .program-panel .stage-aspect{ width:100%!important; height:auto!important;
    max-width:100%!important; max-height:none!important; aspect-ratio:16/9; margin:0!important; }

  /* Program controls: ONE clean swipeable row, not a wrapped 2D wall. The row and
     both injected sub-groups (.raw-modes, .raw-bcast) go nowrap and scroll together. */
  .program-toolbar{ flex-wrap:nowrap; row-gap:0; padding:0; }
  .program-toolbar__label{ display:none; }
  .program-toolbar__actions{ flex-wrap:nowrap!important; justify-content:flex-start; gap:6px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; padding-bottom:4px; scrollbar-width:none; }
  .program-toolbar__actions::-webkit-scrollbar{ display:none; }
  .program-toolbar__actions .raw-modes{ flex:0 0 auto; flex-wrap:nowrap!important; gap:0; }
  .program-toolbar__actions .raw-bcast{ flex:0 0 auto; flex-wrap:nowrap!important; gap:6px; }
  .program-toolbar__actions .button{ flex:0 0 auto!important; white-space:nowrap; width:auto!important; }

  /* Stray sidebar collapse handles are meaningless once panels stack full-width. */
  .raw-collapse, .raw-rail, .raw-rail__btn, .raw-rail__label{ display:none!important; }

  /* Presets + mixer: kept, but condensed and clearly secondary. */
  .layout-strip{ grid-template-columns:none!important; display:flex; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch; gap:6px; }
  .raw-desk__rack{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Secondary regions: quiet dividers, condensed transcript so it never dominates. */
  .scenes-panel, .control-panel{ border-top:1px solid var(--line); }
  .transcript-log{ max-height:160px; }
}

/* Phone-tight: reclaim vertical space so the stage owns the first screen. */
@media (max-width:600px){
  .studio-workspace > .topbar{ padding:8px 12px; }
  .program-panel{ padding:8px; gap:8px; }
  .transcript-log{ max-height:120px; }
  /* A non-director joining on a phone doesn't need the mixer (already disabled for
     them) eating a whole screen above the crew — collapse it away. Hosts keep it. */
  body:not([data-raw-self="host"]) .raw-desk{ max-height:0; overflow:hidden; padding:0; margin:0; border:0; }
}

/* ============================================================
   COMPACT DESKTOP (laptops ~901–1440px, and short heights).
   Between the phone reflow (<=900px) and a roomy desktop, the
   3-column grid squeezes the stage and wraps the toolbar into a
   ragged two rows. Trim both rails so the STAGE stays the main
   character, and tidy the mode buttons into one clean left row.
   ============================================================ */
@media (min-width:901px) and (max-width:1440px){
  .studio-workspace{ grid-template-columns: 184px minmax(0,1fr) 264px; }
  .studio-workspace[data-left="collapsed"]{ grid-template-columns:40px minmax(0,1fr) 264px; }
  .studio-workspace[data-right="collapsed"]{ grid-template-columns:184px minmax(0,1fr) 40px; }
  .studio-workspace[data-left="collapsed"][data-right="collapsed"]{ grid-template-columns:40px 1fr 40px; }

  /* Toolbar: drop the "PROGRAM" label and its reserved gap so the mode buttons
     sit in one tidy left-aligned row at a consistent, compact size. */
  .program-toolbar{ justify-content:flex-start; gap:10px; padding:10px 14px; }
  .program-toolbar__label{ display:none; }
  .program-toolbar > div:first-child{ flex:0 0 auto; }
  .program-toolbar__actions{ justify-content:flex-start; flex-wrap:wrap; gap:6px; }
  .raw-mode{ padding:7px 12px; font-size:11px; letter-spacing:.06em; }
  .raw-bcast-btn{ padding:7px 11px; font-size:11px; }
  .raw-hostcam-btn{ padding:7px 12px; font-size:11px; }
}

/* Short laptops (e.g. 13" at 1280×800): reclaim vertical space so the topbar +
   toolbar + control desk don't crush the stage. */
@media (min-width:901px) and (max-height:860px){
  /* audit 4.7: no max-height clamp (it would distort the now width-driven 16:9 box); the width
     formula already shrinks with viewport height. Slightly tighter budget for the reduced chrome. */
  .program-panel .stage-aspect{ width:min(100%, calc((100vh - 48px - 50px - 300px) * 16 / 9))!important; }
  .program-toolbar{ padding-block:8px; }
  .raw-desk{ margin-top:6px; }
}