/* Shared programmer: the stage begins directly beneath navigation. */
#progCommandPanel[hidden],#progCommandsButton[hidden]{display:none!important}
body[data-mode=prog] .modeNav .navHome{margin-right:0}
#progCommandsButton{margin-right:auto;border-color:#496f80;color:#a8e5ef}
#progCommandPanel{position:fixed;z-index:110;top:145px;left:16px;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 165px);overflow:auto;padding:16px;border:1px solid #547789;border-radius:12px;background:#18212e;box-shadow:0 14px 55px #000b}
.progCommandPanelHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
body[data-mode=prog] #progCommandPanel .cueTop{display:block;margin-bottom:12px}
body[data-mode=prog] #progCommandPanel .cueTop h2{font-size:17px}
body[data-mode=prog] #progCommandPanel .cueTop .eyebrow{display:none}
body[data-mode=prog] #progCommandPanel .cueTop>.actions{flex-wrap:wrap;gap:7px}
body[data-mode=prog] #progCommandPanel .cueToolbar{display:flex;flex-wrap:wrap;margin:10px 0}
body[data-mode=prog] #progCommandPanel :is(#cueTracerStatus,#cueProgGestureHint){font-size:12px;line-height:1.5;margin:12px 0;overflow-wrap:anywhere}
body[data-mode=prog] #progCommandPanel #midiMonitorBar{margin:12px 0;display:flex;flex-wrap:wrap;align-items:center}
body[data-mode=prog] #progCommandPanel #midiMonitorBar strong{font-size:12px}
@media screen{
html[data-interface] body[data-mode=prog]:not(.separateStageScreen) #cueDesk{display:block}
html[data-interface] body[data-mode=prog]:not(.separateStageScreen) #cueDesk>.cueWorkspace,
html[data-interface] body[data-mode=prog]:not(.separateStageScreen) #cueDesk>.cueWorkspace:has(#cueEditor:not([hidden])){margin:0;grid-template-columns:var(--scene-columns)}
html[data-interface] body[data-mode=prog] #progScenePane{justify-content:flex-start}
body[data-mode=prog] #progMemoTools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
body[data-mode=prog] #progMemoTools>button{font-size:11px;padding:7px 9px;flex:1 1 calc(50% - 6px);min-width:0;justify-content:center}
body[data-mode=prog] #progMemoTools #openProgSceneAi{gap:4px}
body[data-mode=prog] #progLevelTools{order:1;width:100%;gap:7px;margin-top:4px;align-items:center}
body[data-mode=prog] #progLevelTools label{display:flex;align-items:center;gap:5px;flex:1;min-width:0;font-size:12px}
body[data-mode=prog] #progLevelTools input{width:100%;min-width:0;accent-color:var(--accent)}
html[data-interface=classic] body[data-mode=prog] #progLevelTools{display:none}
body[data-mode=prog] #progChases>#chasePlaybackControls{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:10px 0 0;padding-top:8px;border-top:1px solid #344050;font-size:11px}
body[data-mode=prog] #progChases>#chasePlaybackControls strong{max-width:100%;margin:0;font-size:11px}
body[data-mode=prog] #progChases>#chasePlaybackControls label{display:flex;gap:6px;align-items:center}
body[data-mode=prog] #progChases #activeChaseSpeed{flex:1;min-width:45px;width:100%}
body[data-mode=prog] .progDmxResetBar{position:relative;display:flex;justify-content:center;min-width:0}
body[data-mode=prog] .progDmxResetBar #cueTracerToggle{position:absolute;left:0;top:0;padding:7px 10px;font-size:12px;height:34px}
body[data-mode=prog] .chasePlaybackFooter{margin-top:9px}
@media(max-width:900px){
html[data-interface] body[data-mode=prog]:not(.separateStageScreen) #cueDesk>.cueWorkspace,
html[data-interface] body[data-mode=prog]:not(.separateStageScreen) #cueDesk>.cueWorkspace:has(#cueEditor:not([hidden])){grid-template-columns:var(--scene-columns)}
body[data-mode=prog] #progMemoTools{gap:4px}
body[data-mode=prog] #progMemoTools>button{font-size:10px;padding:6px 4px}
body[data-mode=prog] #progLevelTools{flex-direction:column;align-items:stretch}
}
}