/* The Explorer's view toolbar (viewer/viewbar.js): one flow positioned by toolbar.css, the
   same buttons (.seg), in groups with a thin rule between; its popovers (Layers, Scale, Exposure, Real and
   fiction; the carets of Stars, Spin, Light and Sound). Loaded after layout.css and toolbar.css. */
/* the rule between groups takes no room (the gap holds it), so a group starting a line is no narrower than
   elsewhere: its width must not depend on where it falls, or the row reflows every frame */
.viewbar .vb-group { position: relative; display: flex; align-items: center; flex: none; }
.viewbar .vb-group::before { content: ''; position: absolute; left: -5px; top: 2px; bottom: 2px; border-left: 1px solid var(--line); }
.viewbar .vb-group.vb-lead::before { display: none; }
/* Each group's caption sits over its buttons. */
.viewbar .vb-group { flex-direction: column; align-items: flex-start; align-self: stretch; justify-content: flex-end; }
.viewbar .vb-cap { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); line-height: 1; margin: 0 0 3px 1px; white-space: nowrap; }

.viewbar .vb-group[hidden], .viewbar .vb-split[hidden], .viewbar button[hidden], .viewbar .vp-items > button:disabled { display: none; }
.viewbar .seg { flex-wrap: nowrap; align-items: stretch; gap: 3px; }        /* apart, so two on side by side read as two */
.viewbar .seg button { white-space: nowrap; font-size: 11.5px; padding: 3px 5px; margin-left: 0; }
.viewbar .seg .vb-caret { margin-left: -1px; }
.viewbar .vb-split { display: flex; align-items: stretch; }
.viewbar .seg .vb-caret { padding: 3px 3px; min-width: 18px; }
.viewbar .vb-caret > .ic { width: 12px; height: 12px; }
.viewbar .vb-caret.vb-open, .viewbar .vb-menu.vb-open { color: var(--text); border-color: var(--accent); }
.viewbar .vb-menu::after { content: '▾'; margin-left: 6px; font-size: 10px; opacity: 0.8; }
.viewbar button .vb-n { margin-left: 6px; font-size: 10px; letter-spacing: 0.04em; text-transform: none; color: var(--accent); }
.viewbar button.on .vb-n { color: inherit; opacity: 0.75; }
.viewbar .vb-n:empty { display: none; }
#p-sound.na { opacity: 0.55; }

/* the order inside a group (the pages add theirs first or last) */
#p-paths { order: 1; } #p-pics { order: 2; } #p-sites { order: 3; } #p-surround { order: 4; } #p-system { order: 5; }
#p-orbits { order: 6; } #p-big { order: 7; } #p-irr { order: 8; }
#ss-orbits { order: 10; } #ss-small { order: 11; } #ss-belts { order: 12; } .vb-split:has(> #ss-craft) { order: 13; } #ss-shots { order: 14; }
.viewbar .live-show { order: 20; display: none; }      /* Spacecraft is the Satellites row's Featured chip (Layers) */
.vb-split:has(> #p-light) { order: 1; } .vb-split:has(> #p-sound) { order: 2; }   /* (the split, never its button: the caret would come first) */
#p-scalebar { order: 1; } #p-compare { order: 2; } .vb-split:has(> #p-sky) { order: 3; } .vp-items > #p-film, .vb-split:has(> #p-film) { order: 4; } #p-exposure { order: 5; } #p-wire { order: 6; }

/* ---- the popovers: under their button, as the camera bar's "⋯" menu */
.vb-pop { position: fixed; z-index: 20; box-sizing: border-box; min-width: 200px; max-width: min(360px, calc(100vw - 8px)); overflow-y: auto;
  overscroll-behavior: contain; padding: 6px 10px 8px; background: rgba(21, 23, 26, 0.97); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); color: var(--text); font-size: 12px; }
.vb-pop[hidden] { display: none; }
#vb-layers-pop { width: 330px; }
.vb-pop-head { display: none; }
.vb-pop label { display: flex; align-items: center; gap: 8px; min-width: 220px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.vb-pop label input[type=range] { flex: 1; min-width: 100px; }
.vb-pop label > .ic { display: none; }
.vb-pop .sc-lightrow, .vb-pop .sc-lightrow[hidden] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vb-pop .sc-lightrow button[hidden] { display: none; }
/* the overview's Size and Distance, and the craft enlarged */
.vb-pop .vp-items { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vb-pop .ss-group { display: flex; align-items: center; gap: 8px; }
.vb-pop .ss-lab { min-width: 64px; }
.vb-pop .ss-group .seg button { padding: 3px 7px; white-space: nowrap; }
.vb-pop .vp-items > button { background: rgba(11, 12, 14, 0.6); color: var(--dim); border: 1px solid var(--line); font: inherit; padding: 3px 8px;
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.vb-pop .vp-items > button:hover { color: var(--text); }
.vb-pop .vp-items > button.on { color: var(--accent); border-color: var(--accent); }
.vb-pop .vp-items > button[hidden] { display: none; }
/* the layer list (layer_menu.js) */
.vb-pop .vp-items.lib { display: block; }
.vb-pop .lrow .chips button, .vb-pop .lrow .sub button, .vb-pop .lrow .st .act, .vb-pop .lnotice .undo { min-height: 0; min-width: 0; }

/* ---- tablets: the row wraps; 40 px targets (layout.css's .seg rule) */
[data-lay=tab] body.explorer #stage > .viewbar { padding: 4px 6px; }
[data-lay=tab] .viewbar .seg .vb-caret { min-width: 30px; }
[data-lay=tab] .vb-pop .lrow .chips button { min-height: 30px; }
[data-lay=tab] .vb-pop button, [data-lay=phone] .vb-pop button { min-height: 36px; }
[data-lay=tab] .vb-pop .lrow .lmain, [data-lay=phone] .vb-pop .lrow .lmain { min-height: 36px; }

/* ---- phones: one line that scrolls sideways with labels;
   the popovers are bottom sheets, as the layer cards are */
[data-lay=phone] body.explorer #stage > .viewbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px 6px; }
[data-lay=phone] .viewbar::-webkit-scrollbar { display: none; }
[data-lay=phone] .viewbar .seg .vb-caret { min-width: 24px; padding: 3px 2px; }
[data-lay=phone] body.explorer #stage > .viewbar { column-gap: 9px; }
[data-lay=phone] .viewbar .vb-group::before { left: -5px; }

[data-lay=phone] .vb-pop { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto !important; max-width: none; min-width: 0;
  max-height: 62vh !important; max-height: 62dvh !important; z-index: 40; background: rgb(21, 23, 26); border-left: 0; border-top: 2px solid var(--accent); border-radius: 12px 12px 0 0;
  padding: 0 max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
[data-lay=phone] .vb-pop-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1;
  margin: 0 -12px 6px; padding: 12px 6px 4px 14px; background: rgb(21, 23, 26); border-bottom: 1px solid var(--line);
  color: var(--dim); text-transform: uppercase; letter-spacing: 0.15em; }
[data-lay=phone] .vb-pop-head::before { content: ''; position: absolute; top: 5px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: var(--line); }
.vb-x { min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--text); font: 22px/1 system-ui, sans-serif; cursor: pointer; }
.vb-x:hover { color: var(--accent); }
.vb-pop .vp-row { display: flex; align-items: center; gap: 8px; }

/* Film look's settings (filmlook.js) */
.vb-pop .fl-opts { display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.vb-pop .fl-row { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; }
.vb-pop .fl-row select { grid-column: 2 / 4; background-color: rgba(11, 12, 14, 0.6); color: var(--text); border: 1px solid var(--line); font: inherit; padding: 2px 4px; color-scheme: dark; }
.vb-pop .fl-row input[type=range] { width: 100%; accent-color: var(--accent); }
.vb-pop .fl-v { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.vb-pop .fl-reset { align-self: flex-start; background: rgba(11, 12, 14, 0.6); color: var(--dim); border: 1px solid var(--line); font: inherit; font-size: 11px; padding: 3px 10px;
  text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.vb-pop .fl-reset:hover { color: var(--text); border-color: var(--dim); }

/* Keep words on compact screens too: the unified row scrolls rather than turning into an icon puzzle. */
#viewbar .seg button:not(.ic-only):not(.vb-caret) { font-size: 11.5px; line-height: normal; letter-spacing: .08em; }
#viewbar .seg button:not(.ic-only):not(.vb-caret) > .ic { margin-right: 4px; }