/* Both observation surfaces stay present. Preference changes area and reading order. */
.view-priority { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
.view-priority > span { color: var(--muted); margin-right: 6px; }
.view-priority button[aria-pressed=true] { background: var(--cyan); color: var(--accent-ink); }
.dashboard.radar-layout-active { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(0,1fr); grid-template-areas: 'camera radar' 'details stats'; align-items: start; }
.radar-layout-active > .video-panel { grid-area: camera; min-width: 0; }
.radar-layout-active > .trajectory { grid-area: radar; min-width: 0; }
.radar-layout-active > .maincol { grid-area: details; }
.radar-layout-active > .sidecol { grid-area: stats; }
.dashboard.radar-layout-active.radar-priority { grid-template-areas: 'radar camera' 'details stats'; }
.radar-layout-active .trajectory #world { height: clamp(280px,30vw,440px); }
.radar-layout-active.radar-priority .trajectory #world { height: clamp(360px,40vw,560px); }
.radar-layout-active.radar-priority .video-panel .panelhead,
.radar-layout-active.radar-priority .video-panel .analysisbar { flex-wrap: wrap; }
.radar-layout-active.radar-priority .stage:not(.has-source) { min-height: 310px; }
@media (max-width: 820px) {
  .dashboard.radar-layout-active { grid-template-columns: minmax(0,1fr); grid-template-areas: 'camera' 'radar' 'details' 'stats'; }
  .dashboard.radar-layout-active.radar-priority { grid-template-areas: 'radar' 'camera' 'details' 'stats'; }
  .radar-layout-active > .maincol { display: block; }
  .radar-layout-active .trajectory #world { height: 250px; }
  .radar-layout-active.radar-priority .trajectory #world { height: 380px; }
}
@media (max-width: 390px) {
  .view-priority { gap: 6px; }
  .view-priority > span { flex-basis: 100%; }
  .radar-layout-active .trajectory .panelhead { flex-wrap: wrap; }
  .radar-layout-active.radar-priority .trajectory #world { height: 340px; }
}

/* Viewport workspace: the secondary surface remains visible as an inset. */
html.observation-open, html.observation-open body { overflow: hidden !important; }
#tab-observe.observation-expanded {
  position: fixed; inset: 0; z-index: 25; width: 100%; height: 100vh; height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--panel); display: flex; flex-direction: column; gap: 0;
}
.observation-expanded .view-priority { flex: 0 0 auto; margin: 0; padding: 8px; flex-wrap: nowrap; gap: 6px; }
.observation-expanded .view-priority > span { display: none; }
.observation-expanded .view-priority button { min-height: 44px; padding: 8px 12px; font-size: 12px; white-space: nowrap; }
.observation-expanded #viewExpand { margin-left: auto; }
.observation-expanded .dashboard.radar-layout-active { display: block; position: relative; flex: 1; min-height: 0; margin: 0; }
.observation-expanded .dashboard > .maincol,
.observation-expanded .dashboard > .sidecol,
.observation-expanded .video-panel > :not(.stage):not(.analysisbar),
.observation-expanded .analysisbar .extra-controls,
.observation-expanded .trajectory > :not(#world) { display: none; }
.observation-expanded .dashboard > .video-panel { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0; margin: 0; }
.observation-expanded .video-panel .stage { flex: 1; min-height: 0 !important; aspect-ratio: auto !important; border-radius: 0; }
.observation-expanded .analysisbar { flex: 0 0 auto; margin: 0; padding: 8px; gap: 6px; flex-wrap: nowrap; }
.observation-expanded .analysisbar button { min-height: 44px; font-size: 12px; padding: 8px 12px; }
.observation-expanded .dashboard > .trajectory { position: absolute; z-index: 5; right: 12px; top: 12px; width: clamp(128px, 28vw, 250px); height: clamp(100px, 16vh, 180px); padding: 0; margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px #0005; }
.observation-expanded .dashboard .trajectory #world { width: 100%; height: 100%; }
.observation-expanded .dashboard.radar-priority > .trajectory { inset: 0 0 60px; width: auto; height: auto; border-radius: 0; box-shadow: none; }
.observation-expanded .dashboard.radar-priority > .video-panel { z-index: 6; pointer-events: none; background: transparent; }
.observation-expanded .radar-priority .video-panel .stage { position: absolute; right: 12px; top: 12px; width: clamp(112px,25vw,250px); height: clamp(100px,22vh,200px); border-radius: 12px; pointer-events: auto; }
.observation-expanded .radar-priority .video-panel .analysisbar { position: absolute; bottom: 0; left: 0; right: 0; background: var(--panel); pointer-events: auto; }
.observation-expanded .radar-priority .videoHUD,
.observation-expanded .radar-priority .stage-label { display: none; }
body.marking .observation-expanded .trajectory { visibility: hidden; }
body.marking .observation-expanded .analysisbar { visibility: hidden; }
.object-hud { position: absolute; z-index: 4; bottom: 52px; left: 10px; width: min(300px, calc(100% - 20px)); max-height: 32%; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 4px; }
.object-hud-card { display: grid; gap: 3px; padding: 7px 9px; margin: 0; border: 0; border-radius: 8px; text-align: left; background: #101e29ed; color: #f1f7fa; min-height: 44px; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.object-hud-card strong { font-size: 12px; }
.object-hud-card[aria-pressed=true] { box-shadow: inset 3px 0 #63e5d2; }
.object-hud-card:hover { background: #183443; color: #fff; }
.object-hud-card span { color: #d4e6ee; }
body.marking .object-hud, .observation-expanded .radar-priority .object-hud { display: none; }
.stage.fill-preview video, .stage.fill-preview #synthetic { object-fit: cover; object-position: center; }
#cameraFraming { position: absolute; z-index: 6; top: 12px; left: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid #a5bec455; border-radius: 10px; color: #f1f7fa; background: #101e29ed; font-size: 12px; }
#cameraFraming:hover { background: #183443; }
body.marking #cameraFraming { visibility: hidden; }