/* A reversible, camera-first layout. No stream or role visibility rules are changed here. */
#watch-help{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.watch-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-bottom:12px}
.camera-layout-bar>.watch-toolbar{margin:0;flex-shrink:0}.camera-layout-bar:has(>.watch-toolbar)>.camera-layout-switch{margin-left:auto}
.watch-introduction{display:flex;flex-direction:column;gap:2px;min-width:0}.watch-introduction strong{font-size:14px;font-weight:600}.watch-introduction span{font-size:12px;color:var(--muted)}
.watch-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.watch-toggle{white-space:nowrap}.watch-toggle[aria-pressed="true"]{color:var(--accent);border-color:var(--accent-border);background:var(--accent-soft)}
.watch-wake[aria-pressed="true"]{color:var(--success);border-color:var(--success-border);background:var(--success-bg)}
.watch-awake-status{font-size:11px;color:var(--muted);margin:0 0 12px}
.watch-summary{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:18px 20px;margin:0 0 20px;display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(0,2fr);gap:24px;align-items:center}
.watch-job{min-width:0;display:flex;flex-direction:column;gap:5px}.watch-stage{color:var(--success);font-size:12px;font-weight:600}.watch-summary[data-state="waiting"] .watch-stage{color:var(--muted)}.watch-summary[data-state="attention"] .watch-stage{color:var(--warning)}
.watch-job-name{font-size:16px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.watch-metrics{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.watch-metrics>div{min-width:0}.watch-metrics dt{color:var(--muted);font-size:11px;margin:0 0 4px}.watch-metrics dd{color:var(--text);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;margin:0;overflow-wrap:anywhere}
body.watch-mode>header,body.watch-mode main>.page-heading,body.watch-mode main>.workspace-status,body.watch-mode main>footer{display:none}
body.watch-mode main{margin:0 auto;max-width:1900px;padding:24px clamp(16px,3vw,40px)}
body.watch-mode .workspace{display:block}
body.watch-mode .workspace>:not(#overview-camera-slot){display:none!important}
body.watch-mode .watch-toolbar{justify-content:space-between;margin-bottom:16px}
body.watch-mode .viewer-card .viewport{width:100%;max-height:calc(100dvh - 320px);min-height:240px}
body.watch-mode .camera-wall-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Fullscreen belongs to the existing camera viewer, including its own controls. */
body.watch-mode .viewer-card .viewport:fullscreen{max-height:none;min-height:0}
@media(max-width:1000px){.watch-summary{grid-template-columns:minmax(0,1fr);gap:16px}.watch-metrics{gap:12px}}
@media(max-width:600px){body.watch-mode main{padding:16px}.camera-layout-bar>.watch-toolbar{align-self:flex-end}.camera-layout-bar:has(>.watch-toolbar)>.camera-layout-switch{margin-left:0}.watch-toolbar-active{align-items:flex-start;flex-direction:column;gap:12px}.watch-toolbar-active .watch-actions{width:100%;justify-content:space-between}.watch-introduction span{font-size:11px}.watch-summary{padding:16px;margin-bottom:16px;gap:16px}.watch-metrics{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}.watch-job-name{font-size:15px}.watch-metrics dd{font-size:14px}body.watch-mode .camera-wall-grid{grid-template-columns:minmax(0,1fr)}body.watch-mode .viewer-card .viewport{min-height:0;max-height:none}}
@media(prefers-contrast:more){.watch-summary,.watch-toggle,.watch-wake{border-color:var(--text)}.watch-metrics dt,.watch-introduction span,.watch-awake-status{color:var(--text)}}
@media(prefers-reduced-motion:reduce){.watch-toolbar,.watch-summary{scroll-behavior:auto;transition:none}}