/* shared/switch.css — the site's one on/off switch (PR #45, PR45-Q27, Q29): a purple pill with a round white knob on
   the right for "on"; off is a dim track with the knob on the left. It moves only when its state changes, never on
   hover. Size follows --switch-h (default 0.95rem); the width follows the height. Decorative where it stands for a
   setting it doesn't hold itself (the footer's "Your privacy choices"): aria-hidden, the label names the control.
   First used in the footer's legal row; every future on/off control takes it from here. Linked by every page. */
.switch {
  --switch-h: 0.95rem;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: calc(var(--switch-h) * 1.9);
  height: var(--switch-h);
  border-radius: 999px;
  background: var(--color-brand-purple);
  transition: background 260ms var(--ease-standard);
}
.switch__knob {
  position: absolute;
  top: 2px;
  left: calc(100% - var(--switch-h) + 2px);
  width: calc(var(--switch-h) - 4px);
  height: calc(var(--switch-h) - 4px);
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: left 260ms var(--ease-standard);
}
.switch.is-off { background: rgba(var(--ink), 0.25); }
.switch.is-off .switch__knob { left: 2px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch__knob { transition: none; } }