/* A single flow: groups share every row instead of reserving separate camera and scene strips. */
body.explorer #stage { --bar: 48px; }
body.explorer #stage > .camerabar.viewbar { position: absolute; top: 0; left: 0; right: 82px; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 7px 12px;
  box-sizing: border-box; padding: 5px 6px; background: rgba(11, 12, 14, .86); border-bottom: 1px solid var(--line);
  pointer-events: auto; user-select: none; }
/* Short/touch views scroll one labelled row, leaving the scene room to breathe. */
@media (max-width: 640px), (max-height: 640px) {
  body.explorer #stage > .camerabar.viewbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 3px; padding-bottom: 3px; }
}
#tb-toggle { position: absolute; top: 4px; right: 6px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 4px;
  box-sizing: border-box; width: 72px; min-height: 26px; padding: 3px 5px; border: 1px solid transparent;
  background: rgba(11, 12, 14, 0.6); color: var(--dim);
  font: inherit; font-size: 11px; cursor: pointer; }
#tb-toggle:hover { color: var(--text); border-color: var(--dim); }
#tb-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#tb-toggle .ic { margin: 0; width: 12px; height: 12px; }
#tb-toggle[aria-expanded=true] .ic { transform: rotate(180deg); }
body.explorer #stage.tb-collapsed > .camerabar, body.explorer #stage.tb-collapsed > .viewbar { display: none; }
html[data-lay=phone] #tb-toggle, html[data-lay=tab] #tb-toggle { min-height: 40px; }

body.explorer #stage > .label { top: calc(var(--bar) + 8px); }
body.explorer #phud, body.explorer .ss-hud { top: calc(var(--bar) + 28px); }
body.explorer #stage > .help { top: calc(var(--bar) + 6px); max-height: calc(100% - var(--bar) - 50px); }
body.explorer #channels { top: calc(var(--bar) + 8px); max-height: calc(100% - var(--bar) - 16px); }
body.explorer .imgpanel { top: calc(var(--bar) + 30px); max-height: calc(100% - var(--bar) - 100px); }
body.explorer .ss-crumb { top: calc(var(--bar) + 5px); }
body.explorer #when { max-width: 260px; }

/* Focus removes chrome without changing scene controls or the user's normal folds. */
body.explorer.focus-hide-header > header, body.explorer.focus-hide-timeline > #timeline,
body.explorer.focus-hide-timeline #stage > .timeline,
body.explorer.focus-hide-controls #tb-toggle,
body.explorer.satellite-card-hidden #stage > .live-card { display: none !important; }
body.explorer.focus-hide-overlays #stage > :not(canvas):not(#viewbar):not(#tb-toggle):not(.live-card):not(.ss-input):not(.fly-badge):not(.fly-pad):not(.craft-visit),
body.explorer.focus-hide-overlays .cv-panel { display: none !important; }
body.explorer.focus-hide-header.focus-hide-timeline main.lay { padding: 0; }
body.explorer.focus-hide-header.focus-hide-timeline #stage { border: 0; }
#focus-settings { margin-left: -5px; padding-left: 4px; padding-right: 4px; }
#focus-settings .ic { margin: 0; }
#focus-options { z-index: 65; width: 285px; }
#focus-options label { min-width: 0; padding: 5px 0; color: var(--text); cursor: pointer; }
#focus-options input { accent-color: var(--accent); }
#focus-options p { color: var(--dim); font-size: 12px; line-height: 1.5; margin-bottom: 0; }
.focus-title { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; padding: 7px 0; }
.focus-enter, #focus-exit { font: inherit; text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.focus-enter { margin-top: 8px; width: 100%; }
#focus-exit { position: fixed; top: max(6px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); z-index: 70;
  opacity: 0; pointer-events: none; min-height: 40px; transition: opacity .15s; }
#focus-exit[hidden] { display: none; }
#focus-exit.revealed, #focus-exit:focus-visible, #focus-exit:hover { opacity: 1; pointer-events: auto; }
#focus-exit:focus-visible { outline: 2px solid var(--accent); }

body.explorer.focus-hide-overlays > :is(.tl-card, .tip),
body.explorer.focus-hide-timeline > .tl-pop { display: none !important; }
@media (pointer: coarse), (max-width: 640px) {
  #focus-options label { min-height: 40px; box-sizing: border-box; }
  #focus-settings { min-width: 40px; }
}

/* Flight has its own exit; avoid covering it with the temporary Focus exit. */
body.explorer:has(#stage.flying) #focus-exit { display: none; }