/* ==========================================================
   SWITCHER: one segmented control for every switcher type, in the Apple manner.
   A soft filled track; the selected option is a raised "thumb". No outlines.
   background type -> each segment carries a colour swatch; others -> text only.
   Colours come from the context: --sw-fg / --sw-bg (stage colours on the stage,
   NOIZE ink / paper in the phone sheet), so it reads on any background.
   ========================================================== */
.switcher{ position:absolute; bottom:33px; left:var(--sx); transform:translateX(var(--sshift,0)) scale(var(--ui,1)); transform-origin:50% 100%;
  --sw-fg:var(--stage-fg); --sw-bg:var(--stage-bg);
  transition:left .7s var(--ease), transform .7s var(--ease); }

.sw{ display:inline-flex; height:40px; padding:3px; gap:2px; border-radius:999px; font-family:var(--shell); color:var(--sw-fg);
  background:color-mix(in srgb, var(--sw-fg) 10%, transparent); }
.sw button{ height:34px; padding:0 16px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
  font:var(--t-control); white-space:nowrap; color:color-mix(in srgb, var(--sw-fg) 72%, transparent);
  transition:background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.sw button:hover{ color:var(--sw-fg); }
.sw button[aria-pressed="true"]{ color:var(--sw-fg); font-weight:600;
  background:color-mix(in srgb, var(--sw-bg) 82%, #fff 18%);
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.08); }
/* labels reserve their semibold width, so segments never shift when one is selected */
.sw button span{ display:inline-flex; flex-direction:column; }
.sw button span::after{ content:attr(data-l); font-weight:600; height:0; overflow:hidden; visibility:hidden; }

/* colour segments: a swatch before the label */
.sw-swatches button{ padding:0 16px 0 7px; }
.sw-swatches i{ width:20px; height:20px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sw-fg) 22%, transparent); }

/* glass (overlay pages, Phase 1): frosted track, lighter frosted thumb */
.sw.is-glass{ --sw-fg:#fff; background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2); }
.sw.is-glass button{ color:rgba(255,255,255,.8); }
.sw.is-glass button[aria-pressed="true"]{ color:#fff; background:rgba(255,255,255,.28); box-shadow:none; }

/* a stage control over a full-bleed photo sits top right (the glass toggle) */
.page[data-sw="top-right"] .switcher{ top:33px; bottom:auto; left:auto; right:33px; transform:scale(var(--ui,1)); transform-origin:100% 0; }

/* discoverability: a page with more views glows its switcher twice on arrival (main.js hintSwitcher) */
.switcher.is-hint{ border-radius:99px; animation:sw-hint 1.2s cubic-bezier(.4,0,.2,1) .5s 2; }
@keyframes sw-hint{ 0%, 100%{ box-shadow:0 0 0 0 transparent; } 50%{ box-shadow:0 0 0 7px color-mix(in srgb, var(--stage-fg, #111) 16%, transparent); } }