/* The operator desk keeps preparation separate from the output feeds. */
body.operator-layout .app{max-width:1920px;padding:0 20px 24px}
body.operator-layout .topbar{height:56px}
body.operator-layout .layout{grid-template-columns:170px minmax(0,1fr);gap:16px;padding-top:14px}
body.operator-layout .sidebar{padding:10px;top:12px}
body.operator-layout .sidebar-foot{display:none}
body.operator-layout #operatorDesk{display:block!important;margin:0 0 16px;border:1px solid #35483e;border-radius:14px;background:#111b17;overflow:hidden}
body.operator-layout.songs-mode .main{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:12px}
body.operator-layout.songs-mode .main>#operatorDesk{grid-column:1/-1;grid-row:1}
body.operator-layout.songs-mode .main>#songWorkspace{grid-column:1;grid-row:2;max-height:none;overflow:visible}
body.operator-layout.songs-mode .main>#graphicsStudio{grid-column:2;grid-row:2}
body.operator-layout.songs-mode .gfx-content{display:block}
.operator-heading{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:12px}
.operator-heading h1{font-size:20px;margin:0 0 3px}
.operator-heading span{font-size:11px;color:#a5b4ab}
.operator-monitors{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px}
.operator-monitors>section{min-width:0}
.operator-monitor-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;height:34px;color:#c8ef91}
.operator-monitor-label span{color:#99aaa0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.operator-monitor-label select{background:#202e26;color:#e5efe8;border:1px solid #425449;border-radius:6px;padding:4px;max-width:65%}
.operator-live-label{color:#ff9b9b}
#operatorPreview,#operatorLive{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;border:1px solid #425449;border-radius:8px;background:repeating-conic-gradient(#202823 0% 25%,#29332d 0% 50%) 50%/24px 24px}
#operatorPreview>.gfx-stage,#operatorPreview>.screenbox,#operatorPreview>.capture-stage,#operatorPreview>#mediaPreview{width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;border:0!important;border-radius:0!important}
#operatorPreview .screen-content strong{font-size:clamp(16px,1.8vw,30px)}
#operatorPreview .screen-content small{font-size:12px}
#operatorPreview canvas,#operatorPreview video{width:100%;height:100%;object-fit:contain}
.operator-frame{position:absolute;inset:0;overflow:hidden}
.operator-frame[hidden]{display:none}
.operator-frame iframe{position:absolute;inset:0;width:1920px;height:1080px;transform-origin:0 0;border:0;pointer-events:none}
.operator-actions{display:flex;align-items:center;gap:10px;padding:12px 16px;flex-wrap:wrap}
.operator-actions>div{display:flex;gap:6px}
.operator-actions select{background:#202e26;color:#e5efe8;border:1px solid #425449;border-radius:8px;padding:6px;max-width:140px}
#operatorDestination{margin-left:auto;color:#a5b4ab;font-size:11px}
#operatorGo{min-width:120px;padding:12px 22px;font-size:15px;font-weight:800}
.operator-actions button:disabled{opacity:.4;cursor:not-allowed}
.operator-overlay-strip{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#0c1511;border-top:1px solid #2b3b31;font-size:11px;flex-wrap:wrap}
#operatorLayers{display:flex;gap:6px;flex:1;flex-wrap:wrap;color:#94a399}
#operatorLayers button{font-size:11px;padding:6px 9px}
#operatorLayers button[aria-pressed=true]{border-color:#8ca976;color:#d8f5bc}
#operatorScreenState{color:#93a49a;font-size:10px}
#operatorDialog{color:#e3eee6;background:#132019;border:1px solid #52664f;border-radius:14px;width:min(780px,94vw);max-height:88vh;padding:18px}
#operatorDialog::backdrop{background:#000b}
#operatorDialog>header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
#operatorDialog h2{font-size:18px;margin:0}
#operatorDialogBody{display:grid;gap:18px}
#operatorDialogBody .gfx-inspector{display:block!important;max-height:none;position:static}
#operatorDialogBody .screen-actions{display:flex!important}
body.operator-layout .operator-native-action,body.operator-layout .operator-legacy-output{display:none!important}
body.operator-layout .bible-live-preview,body.operator-layout .bible-workspace-heading,body.operator-layout #bibleWorkspace>.theme-controls,body.operator-layout #bibleWorkspace>.lower-style,body.operator-layout #bibleAppearance{display:none!important}
#operatorDialogBody #bibleAppearance{display:block!important}
body.operator-layout #graphicsStudio .gfx-inspector{display:none!important}
body.operator-layout .main>.heading{display:none}
body.operator-layout #graphicsStudio .gfx-heading{margin:4px 0 8px}
body.operator-layout #graphicsStudio .gfx-heading h1,body.operator-layout #graphicsStudio .gfx-heading p,body.operator-layout #graphicsStudio .gfx-heading .eyebrow{display:none}
body.operator-layout.graphics-mode .gfx-layout{grid-template-columns:1fr}
body.operator-layout.bible-mode .bible-workspace-grid{grid-template-columns:1fr}
body.operator-layout #songList,body.operator-layout #suggestionList{max-height:260px;overflow:auto}
body.operator-layout #gfxSlideList{max-height:220px;overflow:auto}
body.operator-layout .gfx-preview{padding:0}
body.operator-layout .gfx-preview .gfx-toolbar{padding:6px 0}
body.operator-layout .capture-layout{grid-template-columns:minmax(180px,.6fr) minmax(280px,1.4fr)}
body.operator-layout .capture-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.operator-layout .capture-controls hr{display:none}
body.operator-layout .capture-controls>p{grid-column:1/-1}
body.operator-monitor .output-top,body.operator-monitor .output-bottom{display:none!important}
@media(min-width:1550px){.operator-monitors{max-width:1180px;margin:auto}}
@media(max-width:850px){body.operator-layout .layout{grid-template-columns:130px minmax(0,1fr)}.operator-monitors{gap:8px;padding:0 10px}.operator-monitor-label span{display:none}.operator-actions{padding:10px}.operator-actions>div{flex-wrap:wrap}#operatorDestination{display:none}#operatorGo{margin-left:auto;min-width:100px}body.operator-layout .capture-layout{grid-template-columns:1fr}}
@media(max-width:600px){body.operator-layout .layout{display:block}.operator-monitors{grid-template-columns:1fr 1fr}.operator-heading{padding:10px}body.operator-layout .app{padding:0 8px 18px}body.operator-layout .sidebar{position:static}.operator-actions{gap:6px}.operator-actions button{font-size:11px}.operator-overlay-strip{padding:8px}#operatorScreenState{width:100%}}
@media(max-width:600px){body.operator-layout.songs-mode .main{display:block}}

/* Separate, always-visible output feeds; the preview is the only editable view. */
body.output-composite.output-media canvas{z-index:3}
body.operator-layout #operatorDesk[hidden]{display:none!important}
.operator-monitors{grid-template-columns:1.15fr 1fr 1fr;max-width:none}
#operatorOverlayLive{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;border:1px solid #425449;border-radius:8px;background:repeating-conic-gradient(#202823 0% 25%,#29332d 0% 50%) 50%/24px 24px}
.operator-target{border-color:#c8ef91!important}
.operator-feed-caption{font-size:11px;line-height:1.4;min-height:16px;margin:6px 0;color:#b7c6bd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.operator-actions{align-items:center}.operator-actions>div{flex-wrap:wrap}
#operatorGo{min-width:180px;font-size:13px}
body.operator-layout[data-operator-workspace=media] #operatorPreviewPanel{display:none}
body.operator-layout[data-operator-workspace=media] .operator-monitors{grid-template-columns:1fr 1fr}
body.operator-layout[data-operator-workspace=media] #mediaPreview{display:none}
body.operator-layout .media-workspace-grid{min-height:0;grid-template-columns:1fr 320px}
body.operator-layout .media-library-pane{max-height:340px}
body.operator-layout .media-preview{min-height:0}
body.operator-layout.graphics-mode .gfx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
body.operator-layout.graphics-mode .gfx-template{padding:10px}
body.operator-layout.graphics-mode .gfx-mini{display:none}
body.operator-layout.graphics-mode #gfxStack{margin-top:8px}
body.operator-layout.songs-mode .song-mode-controls{display:none}
.operator-actions select{max-width:190px}
@media(max-width:850px){.operator-monitors{grid-template-columns:1fr 1fr}.operator-monitors>#operatorPreviewPanel{grid-column:1/-1;max-width:450px;width:100%;justify-self:center}body.operator-layout .media-workspace-grid{grid-template-columns:1fr}body.operator-layout.graphics-mode .gfx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Graphics is an artwork desk, not a camera monitor. */
body.operator-layout.graphics-mode .operator-monitors>section:not(#operatorPreviewPanel){display:none}
body.operator-layout.graphics-mode .operator-monitors{display:block;max-width:720px;margin:0 auto}
body.operator-layout.graphics-mode #operatorPreviewPanel{max-width:none;width:100%}
body.operator-layout.graphics-mode #operatorPreview{background:repeating-conic-gradient(#202823 0% 25%,#354139 0% 50%) 50%/24px 24px}
body.operator-layout.graphics-mode #operatorPreview>.gfx-stage{background:transparent}
body.operator-layout.graphics-mode #operatorAppearance{border-color:#c8ef91;color:#d8f5bc}
#operatorSendGroup{font-weight:800}
.operator-live-navigation{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 16px;border-top:1px solid #36493c;background:#17251d;flex-wrap:wrap}
.operator-live-navigation[hidden]{display:none}
#operatorNavigationLabel{font-size:12px;color:#efc89e}
#operatorNavigationStatus{font-size:11px;color:#bbcabe}
body.operator-layout.graphics-mode .operator-heading span{display:none}
.scripture-quick-search{margin:8px 0 12px}
#scriptureBookOptions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
#scriptureBookOptions[hidden],#scriptureNumberPicker[hidden]{display:none}
#scriptureBookOptions button{padding:7px 12px;border:1px solid #43516b;border-radius:6px;background:#18243a;color:#eef3ff;cursor:pointer}
#scriptureBookOptions button[aria-selected="true"]{background:#254d82;border-color:#80b8ff}
#scriptureNumberPicker{display:flex;align-items:end;flex-wrap:wrap;gap:10px}
#scriptureNumberPicker strong{align-self:center}
#scriptureNumberPicker label{display:grid;gap:4px;font-size:12px}
#scriptureNumberPicker input{width:78px;padding:8px}
.songitem[data-song-row]{cursor:pointer}
.songitem[data-song-row]:focus-visible{outline:2px solid #80b8ff;outline-offset:-2px}
.has-background-loop{position:relative!important;isolation:isolate;overflow:hidden}
.background-loop-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}
.background-loop-preview[hidden]{display:none}
.has-background-loop .screen-label,.has-background-loop .screen-text,.has-background-loop .screen-ref{position:relative}
.operator-graphic-preview-modes{display:flex;gap:8px;padding:0 0 8px;flex-wrap:wrap}
.operator-graphic-preview-modes[hidden]{display:none}
.operator-graphic-preview-modes button[aria-pressed="true"]{background:#c8ef91;color:#142016;border-color:#c8ef91}
#operatorPreview .screenbox.bible-preview-lower{display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0 5% 7%!important}
#operatorPreview .bible-preview-lower .screen-content{position:relative!important;inset:auto!important;width:88%;max-width:none;padding:8px 12px;transform:none!important;border-radius:4px}
#operatorPreview .bible-preview-lower .screen-label{font-size:8px;margin-bottom:4px}
#operatorPreview .bible-preview-lower .screen-content small{font-size:10px;margin-top:4px}
#gfxPhotoLoaded{display:grid;gap:6px;padding:8px;border:1px solid #52664f;border-radius:8px;background:#101b16}
#gfxPhotoLoaded[hidden]{display:none}
#gfxPhotoThumbnail{display:block;width:100%;max-height:220px;object-fit:contain;aspect-ratio:16/9;background:repeating-conic-gradient(#26352d 0% 25%,#3d4e43 0% 50%) 50%/18px 18px}
#gfxPhotoDetails{font-size:12px;color:#c8ef91;overflow-wrap:anywhere}
#gfxEditorStatus{padding:9px;border:1px solid #435b49;border-radius:6px;white-space:normal}
#gfxEditorStatus:empty{display:none}
#operatorDialog .gfx-save-actions{position:sticky;bottom:0;background:#132019;padding:12px 0!important;z-index:2}
/* Keep typing and voice search alongside one another under the monitors. */
body.operator-layout.bible-mode .bible-workspace-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:12px}
body.operator-layout.bible-mode #bibleWorkspaceSearch,body.operator-layout.bible-mode #bibleWorkspaceOutput{min-width:0}
body.operator-layout.bible-mode #bibleWorkspaceOutput>.card{margin-top:0}
body.operator-layout.songs-mode .main{grid-template-columns:minmax(0,2.2fr) minmax(245px,1fr)}
body.operator-layout.songs-mode .song-workspace-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:12px}
body.operator-layout.songs-mode #songLibrarySlot,body.operator-layout.songs-mode #songOutputSlot{min-width:0}
body.operator-layout.songs-mode #songOutputSlot>.card{margin-top:0}
body.operator-layout.songs-mode #songOutputSlot>.card>.cardhead{display:flex}
body.operator-layout.songs-mode #songOutputSlot .help.transcript{display:block;max-height:65px}
body.operator-layout:is(.songs-mode,.bible-mode) .listening{flex-wrap:wrap;gap:8px;padding:10px}
body.operator-layout:is(.songs-mode,.bible-mode) .listen-copy{min-width:120px;flex:1}
body.operator-layout:is(.songs-mode,.bible-mode) .audio-check select{max-width:100%;min-width:0}
body.operator-layout:is(.songs-mode,.bible-mode) .inputrow{flex-wrap:wrap}
body.operator-layout:is(.songs-mode,.bible-mode) .inputrow input{width:100%;min-width:0;flex:1 1 140px}
body.operator-layout:is(.songs-mode,.bible-mode) #suggestionList{max-height:140px}
body.operator-layout.bible-mode #versePreview{max-height:150px;overflow:auto}
body.operator-layout.songs-mode #gfxSlideList{max-height:300px}
body.operator-layout:is(.songs-mode,.bible-mode) .cardhead{padding:12px}
body.operator-layout:is(.songs-mode,.bible-mode) .cardhead span{font-size:10px}
@media(max-width:1050px){body.operator-layout.songs-mode .main{grid-template-columns:minmax(0,1fr)}body.operator-layout.songs-mode .main>#songWorkspace{grid-column:1;grid-row:2}body.operator-layout.songs-mode .main>#graphicsStudio{grid-column:1;grid-row:3}}
@media(max-width:650px){body.operator-layout.bible-mode .bible-workspace-grid,body.operator-layout.songs-mode .song-workspace-grid{grid-template-columns:minmax(0,1fr)}}
.gfx-group-controls{display:flex;align-items:end;flex-wrap:wrap;gap:8px;width:100%;padding:8px 0}
.gfx-group-controls label{display:grid;gap:4px;font-size:12px;color:#c8ef91;flex:1;min-width:140px}
.gfx-group-controls select{padding:8px;border:1px solid #52664f;border-radius:6px;background:#101b16;color:#eff6f0;min-width:0;width:100%}
#gfxGroupLive{width:100%;font-size:11px;color:#c7d2cb}
.gfx-group-browser{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:12px 0}
.gfx-group-card{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:12px;text-align:left;background:#101b16;border:1px solid #41594b;border-radius:9px;color:#ecf4ee}
.gfx-group-card[aria-pressed="true"]{border:2px solid #c8ef91;background:#203221}
.gfx-group-card strong{font-size:15px}.gfx-group-card small{font-size:11px;color:#b6c7bc}
.gfx-group-contents{display:grid;gap:6px;font-size:12px;color:#d9e5dc}
.gfx-group-element{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.gfx-group-element img{width:46px;height:27px;object-fit:contain;border:1px solid #53685a;border-radius:3px;background:repeating-conic-gradient(#26352d 0% 25%,#3d4e43 0% 50%) 50%/8px 8px}
#gfxSelectedGroupHeading{font-size:13px;color:#c8ef91;margin:12px 0 6px}

.scripture-preview .screen-label{display:none!important}.scripture-preview .screen-content small{text-align:center!important;display:block;width:100%}
.operator-text-colour{display:flex;align-items:center;gap:8px;font-size:12px}.operator-text-colour input{width:36px;height:30px;padding:2px}.operator-text-colour[hidden]{display:none!important}
.dialog-drag-handle{cursor:grab;touch-action:none;user-select:none}.dialog-drag-handle.dragging{cursor:grabbing}#operatorDialog>header{position:sticky;top:-18px;z-index:3;background:#132019;padding:12px 0}#operatorDialog::backdrop,#songStyleDialog::backdrop{background:#0002}
/* Keep slide preview and its live controls beside the two actual output feeds. */
body.operator-layout[data-operator-workspace=media] #operatorPreviewPanel{display:block!important;min-width:0}
body.operator-layout[data-operator-workspace=media] .operator-monitors{grid-template-columns:1.15fr 1fr 1fr;max-width:none}
body.operator-layout[data-operator-workspace=media] #operatorPreview{display:block;aspect-ratio:16/9}
body.operator-layout[data-operator-workspace=media] #mediaPreview{display:grid!important;min-height:0}
body.operator-layout[data-operator-workspace=media] .media-workspace-grid{grid-template-columns:1fr;min-height:0}
body.operator-layout[data-operator-workspace=media] .media-library-pane{height:min(64vh,640px);min-height:350px;max-height:none}
body.operator-layout[data-operator-workspace=media] .media-grid{flex:1 1 auto;height:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
body.operator-layout[data-operator-workspace=media] .media-card-actions .primary{flex:1;min-height:34px}
body.operator-layout[data-operator-workspace=media] .media-grid::-webkit-scrollbar{width:10px}
body.operator-layout[data-operator-workspace=media] .media-grid::-webkit-scrollbar-thumb{background:#53675a;border:2px solid #0d1512;border-radius:8px}
@media(max-width:1000px){body.operator-layout[data-operator-workspace=media] .operator-monitors{grid-template-columns:1fr 1fr}body.operator-layout[data-operator-workspace=media] #operatorPreviewPanel{grid-column:1/-1;max-width:760px;width:100%;justify-self:center}}
