/* The switch (padel-website-frrx.28): a native <input type="checkbox" role="switch" class="switch">
   drawn 34x20, accent when on; off, a --muted-2 track and border under a white thumb (3.13:1 on white, WCAG 1.4.11;
   frrx.32). Page-agnostic. It lives in its own file, not styles.css, because terms and privacy carry the cookie
   dialog but not styles.css; _cookie_head.html loads it for every page that extends base.html or carries the dialog.
   A standalone page that uses .switch without _cookie_head.html links this file itself. The fallbacks are
   styles.css's :root values, for the legal pages that have no tokens. */
.switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 34px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--muted-2, #8a948e);
  border-radius: 999px;
  background: var(--muted-2, #8a948e);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface, #fff);
  box-shadow: 0 1px 2px rgba(20, 30, 20, 0.22);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.switch:checked { background: var(--accent, #2b6a48); border-color: var(--accent, #2b6a48); }
.switch:checked::after { transform: translateX(14px); }
.switch:focus-visible { outline: 2px solid var(--accent, #2b6a48); outline-offset: 2px; }
.switch:disabled { opacity: 0.5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }
/* Forced colours paint every background as Canvas, which would hide the thumb and the on state. */
@media (forced-colors: active) {
  .switch::after { background: CanvasText; }
  .switch:checked { background: Highlight; border-color: Highlight; }
  .switch:checked::after { background: HighlightText; }
}
/* Toolbar size (the Rallies "Auto-play next"): same switch, 28x16. */
.switch.switch-sm { width: 28px; height: 16px; }
.switch.switch-sm::after { width: 10px; height: 10px; }
.switch.switch-sm:checked::after { transform: translateX(12px); }