/* One moving surface survives rerenders of the buttons inside a switch. */
.motion-switch { position: relative; isolation: isolate; }
.motion-switch::before {
  content: ''; position: absolute; top: 0; left: 0; z-index: -1;
  pointer-events: none; border-radius: 10px;
  width: var(--pill-width); height: var(--pill-height);
  transform: translate(var(--pill-x), var(--pill-y));
  background: var(--pill-background, #d4a84f29);
  box-shadow: inset 0 0 0 1px #d4a84f55;
  transition: transform 280ms cubic-bezier(.22,1,.36,1), width 280ms cubic-bezier(.22,1,.36,1), height 280ms cubic-bezier(.22,1,.36,1);
}
.city-switcher.motion-switch { --pill-background: #d6ad52; }
.sidebar .nav.motion-switch::before {
  border-radius: 15px;
  background: linear-gradient(160deg, #ffffff25, #ffffff08), var(--accent-soft);
  box-shadow: inset 0 1px 0 #ffffff40, inset 0 0 0 1px #ffffff16, 0 3px 10px #0002;
  transition-duration: 380ms;
}
body .sidebar .nav.motion-switch .nav-link.active { background: transparent; box-shadow: none; }
body .motion-switch button[aria-pressed="true"],
body.embedded .motion-switch button[aria-pressed="true"] {
  background: transparent; box-shadow: none; border-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  body button {
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, scale 140ms cubic-bezier(.22,1,.36,1);
  }
  body button:active:not(:disabled) { scale: .97; }
  .motion-switch button:active:not(:disabled) { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-switch::before { transition: none !important; }
}
/* Keep target geometry stable while the indicator travels. */
body .motion-switch button:active { transform: none; }