/* =============================================================================
   The alternatives picker. Unlayered on purpose — unlayered CSS beats every
   @layer, so a variant stylesheet can never accidentally restyle this control.
   It carries its own colours and adapts to the OS theme, not to the variant.
   ========================================================================== */

#switcher {
  --sw-bg:     rgba(255, 255, 255, 0.72);
  --sw-ink:    #1b1b1b;
  --sw-muted:  rgba(27, 27, 27, 0.5);
  --sw-line:   rgba(27, 27, 27, 0.12);
  --sw-active: #1b1b1b;
  --sw-on:     #ffffff;

  position: fixed;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  z-index: 100;
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
  #switcher {
    --sw-bg:     rgba(24, 24, 26, 0.72);
    --sw-ink:    #f0ece4;
    --sw-muted:  rgba(240, 236, 228, 0.5);
    --sw-line:   rgba(240, 236, 228, 0.14);
    --sw-active: #f0ece4;
    --sw-on:     #16161a;
  }
}

/* Unlayered rules beat any @layer, so a variant cannot override what the
   switcher declares. It CAN still reach properties the switcher only inherits
   (a sweeping `* { }` in a variant matches these elements directly, and a
   direct match beats inheritance). So declare the inheritable type properties
   outright — #switcher * also out-specifies a bare `*`. */
#switcher, #switcher * {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  letter-spacing: 0.08em;
  word-spacing: normal;
  text-transform: uppercase;
  text-align: left;
  text-indent: 0;
  line-height: 1;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  visibility: visible;
}

.sw {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: var(--sw-bg);
  border: 1px solid var(--sw-line);
  color: var(--sw-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 34px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: opacity 260ms ease, translate 320ms cubic-bezier(.2,.8,.2,1);
}

.sw__label { color: var(--sw-muted); }

.sw__options { display: flex; gap: 2px; }

.sw__opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sw-muted);
  font: inherit;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.sw__opt:hover { color: var(--sw-ink); background: var(--sw-line); }

.sw__opt[aria-pressed="true"] {
  background: var(--sw-active);
  color: var(--sw-on);
}

.sw__key {
  opacity: 0.55;
  font-size: 9px;
  padding-top: 1px;
}

.sw__peek {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--sw-line);
  background: var(--sw-bg);
  color: var(--sw-muted);
  font: inherit;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 240ms ease;
}

#switcher.is-hidden .sw {
  opacity: 0;
  pointer-events: none;
  translate: -50% 12px;
}

#switcher.is-hidden:hover .sw__peek { opacity: 1; pointer-events: auto; }

/* crossfade while a variant swaps in */
#app {
  transition: opacity 200ms ease;
}

#app.is-swapping { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sw, .sw__opt, .sw__peek, #app { transition-duration: 1ms; }
}