/* Shared stage-switch nav styles — the third piece of the stage-nav component,
   alongside stage-nav.js (renderer) and stage-nav.config.js (per-deployment tab
   list). Previously duplicated in all 10 stage pages, which is how max-width
   drifted into two variants and clipped the 8-stage strip on half of them.

   Loaded AFTER studio.css and BEFORE each page's own stylesheet, so a page can
   still override. Composite chrome rules that merely MENTION .stage-switch
   (idle-fade, hover-restore, grouped with .ex-switch etc.) stay in their pages —
   they style cross-cutting behaviour, not this component. */

.stage-switch { display:flex; align-items:stretch; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; background:rgba(18,18,31,.82); border:1px solid var(--line); border-radius:14px; backdrop-filter:blur(8px); overflow-x:auto; scrollbar-width:none; -webkit-tap-highlight-color:transparent; max-width:94vw; }
.stage-switch::-webkit-scrollbar { display:none }
.stage-btn { display:flex; align-items:center; gap:6px; padding:8px 13px; white-space:nowrap; color:var(--paper-dim); text-decoration:none; border-right:1px solid var(--line); transition:color .2s, background .2s; -webkit-tap-highlight-color:transparent; }
.stage-btn:last-child { border-right:none }
.stage-btn:hover { color:var(--paper); background:rgba(232,240,246,.05) }
.stage-btn.active { color:var(--ink); background:var(--paper); cursor:default }
.stage-btn .sb-num { font-size:9px; opacity:.6 }
.stage-btn.active .sb-num { opacity:.5 }