/* Theater: dark canvas with terminal-like content; application controls use the shared tokens. */
.Theater .AppShellCanvas{background:var(--theater-bg)}

.Theater .TheaterTile:focus-visible{outline:2px solid var(--theater-text);outline-offset:-2px}
.TheaterTileHead>span:first-child{overflow:hidden;text-overflow:ellipsis}
.TheaterTile.is-burst{border-color:var(--theater-text)}
.TheaterTile.is-glitch pre{filter:contrast(1.25)}

.TheaterCanvas{display:block;flex:1;width:100%;min-height:0}
.TheaterAscii{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden}
.TheaterVideo{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;padding:var(--ds-space-1);font:400 var(--ds-text-ui)/1.4 var(--ds-font);color:var(--theater-text);text-align:center}
.TheaterVideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.TheaterVideoPlaceholder span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.TheaterTile[data-content=workflow]{container-type:size;color:var(--theater-text)}
.TheaterTile[data-content=workflow] .TheaterTileHead{padding:var(--ds-space-1) var(--ds-space-2);font:400 var(--ds-text-ui)/1.4 var(--ds-font)}
.TheaterWorkflow{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;min-height:0;gap:var(--ds-space-1);padding:var(--ds-space-2);font:400 var(--ds-text-ui)/1.4 var(--ds-font)}
.TheaterWorkflow>svg{display:block;flex:1;width:100%;min-height:0;overflow:visible}
.TheaterWorkflowCaption{min-height:20px;color:var(--theater-line);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.TheaterWorkflow .node.is-active>rect,.TheaterWorkflow .node.is-active>polygon{stroke:var(--theater-blue)!important;stroke-width:3px!important}
.TheaterWorkflow .node.is-done>rect,.TheaterWorkflow .node.is-done>polygon{stroke:var(--theater-green)!important;stroke-width:2px!important}
.TheaterWorkflow .node.is-error>rect,.TheaterWorkflow .node.is-error>polygon{stroke:var(--theater-red)!important;stroke-width:3px!important}
.TheaterWorkflow .node.is-error text{fill:var(--theater-red)!important}
.TheaterWorkflow .flowchart-link.is-active{stroke:var(--theater-text)!important}
.TheaterWorkflow .flowchart-link.is-error{stroke:var(--theater-red)!important}
@container (max-height:160px){.TheaterWorkflow{padding:var(--ds-space-1);gap:0}.TheaterWorkflowCaption{display:none}}

/* Detail view */
.TheaterDetail{width:min(960px,calc(100% - 32px));height:min(720px,calc(100dvh - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:hidden;color:var(--ds-ink);background:var(--ds-surface);border:var(--ds-border-width) solid var(--ds-line);border-radius:var(--ds-radius-panel)}
.TheaterDetail[open]{display:flex;flex-direction:column}
.TheaterDetail::backdrop{background:var(--theater-bg);opacity:.85}
.TheaterDetailHead{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2);flex:none;padding:var(--ds-space-1) var(--ds-space-2);border-bottom:var(--ds-border-width) solid var(--ds-line)}
.TheaterDetailTitle{margin:0;min-width:0;font-size:var(--ds-text-body);font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.TheaterDetailBody{display:flex;flex:1;min-width:0;min-height:0;padding:var(--ds-space-2);overflow:auto;scrollbar-width:none;background:var(--theater-bg)}
.TheaterDetailBody>.TheaterTile{flex:1;width:100%;min-width:0;min-height:0;cursor:default}
.TheaterDetailBody>.TheaterTile[data-content=terminal]{min-width:420px}

/* Toolbar, menus, profiles */
.TheaterSelectionCount{padding-inline:var(--ds-space-1);font-weight:500;white-space:nowrap}
.TheaterMenu{display:flex;flex-direction:column;gap:var(--ds-space-1)}
.TheaterMenuItem{text-align:start}
.TheaterProfiles{display:flex;flex-direction:column;gap:var(--ds-space-2)}
.TheaterProfileFeedback{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ds-space-1);margin:0}
.TheaterProfileList{max-height:240px;margin:0;padding:0;list-style:none;border-top:var(--ds-border-width) solid var(--ds-line)}
.TheaterProfileRow{display:flex;align-items:center;gap:var(--ds-space-1);padding-block:var(--ds-space-1);border-bottom:var(--ds-border-width) solid var(--ds-line)}
.TheaterProfileApply{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-1);flex:1;min-width:0;min-height:var(--ds-control-height);padding:var(--ds-space-1);color:var(--ds-ink);text-align:start;font-size:var(--ds-text-body);background:transparent;border:0;border-radius:var(--ds-radius-control);cursor:pointer}
.TheaterProfileApply:hover{background:var(--ds-soft)}
.TheaterProfileApply[aria-current=true]{font-weight:500}
.TheaterProfileName{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.TheaterProfileDelete{color:var(--ds-error)}
.TheaterProfileSave{align-self:flex-start}
.TheaterSaveDialog{width:min(400px,calc(100% - 32px));margin:auto;color:var(--ds-ink)}
.TheaterSaveDialog::backdrop{background:var(--theater-bg);opacity:.65}
.TheaterSaveForm{display:flex;flex-direction:column;gap:var(--ds-space-2)}
.TheaterDialogTitle{margin:0;font-size:var(--ds-text-title);font-weight:500;white-space:nowrap}
.TheaterSaveField{margin:0}
.TheaterFormActions{justify-content:flex-end}

/* Settings panel */
.TheaterSettings{display:flex;flex-direction:column}
.TheaterScope{color:var(--ds-muted);white-space:normal}
.TheaterTypeChoice{display:flex;flex-wrap:wrap;gap:var(--ds-space-1)}
.TheaterTypeChoice [aria-pressed=true]{background:var(--ds-accent-soft);border-color:var(--ds-focus)}
.TheaterMix{display:flex;flex-direction:column;gap:var(--ds-space-1)}
.TheaterMixRow{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) 48px;align-items:center;gap:var(--ds-space-1)}
.TheaterMixRow label{white-space:nowrap}
.TheaterMixRow output{text-align:end;font-variant-numeric:tabular-nums;color:var(--ds-muted)}
.TheaterVideoField{display:flex;flex-direction:column;gap:var(--ds-space-1)}
.TheaterVideoField .ds-help,.TheaterVideoField .ds-error{margin:0}
.TheaterInline{display:flex;gap:var(--ds-space-1)}
.TheaterMatrix{display:flex;flex-direction:column;gap:var(--ds-space-2)}
.TheaterMatrix .ds-error{margin:0}
.TheaterMatrixFields{display:grid;grid-template-columns:var(--ds-label-width) minmax(0,1fr);align-items:center;gap:var(--ds-space-1) var(--ds-space-2)}
.Theater .AppShellPanelBody{padding-top:0}
@media(max-width:360px){.TheaterMixRow{grid-template-columns:minmax(0,1fr) 48px}.TheaterMixRow .ShellRange{grid-column:1 / -1;grid-row:2}}
@media(prefers-reduced-motion:reduce){.TheaterTile.is-glitch pre{filter:none}}