/* ══════════════════════════════════════════════════════════════════════════
   Switch (on/off toggle) — the ONE style for every switch in the app:
   user app, admin.html, pricing.html. 2026-10-21 (Alex 10/20: ON and OFF were
   two similar greys).

   Markup: any element with class "toggle"; the state is the class "on"
   (every caller already reads/writes it). js/switch.js adds role="switch",
   aria-checked (kept in step with .on), and, for a <div>/<span> switch,
   tabindex="0" plus Space / Enter. Prefer <button type="button" class="toggle">.

   OFF  track --ds-switch-track-off (the unit-box fill), 1px --ds-switch-edge-off
        outline (>= 3:1 on the page in both themes, WCAG 1.4.11), grey knob left.
   ON   track + outline --ds-switch-track-on (the user's accent), white knob right.
   Focus (keyboard)  the app focus ring (--ds-focus-ring).
   Disabled          50% opacity of whichever state it is in; not clickable.
   Colours and size are tokens: tokens.css (--ds-switch-*) and accent.css.
   ══════════════════════════════════════════════════════════════════════════ */
.toggle {
  position: relative; display: inline-block; vertical-align: middle; flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--ds-switch-w); height: var(--ds-switch-h); min-width: 0; min-height: 0;
  margin: 0; padding: 0;
  border: 1px solid var(--ds-switch-edge-off); border-radius: var(--ds-r-pill);
  background: var(--ds-switch-track-off);
  appearance: none; -webkit-appearance: none; font: inherit; line-height: 0; color: inherit;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
/* knob: 2px inside the outline; ON moves it by (width - height) to the right edge */
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: calc(var(--ds-switch-h) - 6px); height: calc(var(--ds-switch-h) - 6px);
  border-radius: 50%; background: var(--ds-switch-knob-off);
  transition: transform .15s, background-color .15s;
}
.toggle.on { background: var(--ds-switch-track-on); border-color: var(--ds-switch-track-on); }
.toggle.on::after {
  background: var(--ds-switch-knob-on); box-shadow: var(--ds-switch-knob-shadow);
  transform: translateX(calc(var(--ds-switch-w) - var(--ds-switch-h)));
}
/* 44px hit area around the small track (invisible) */
.toggle::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: max(100%, var(--ds-tap)); height: max(100%, var(--ds-tap)); transform: translate(-50%, -50%);
}
.toggle:focus { outline: none; }
.toggle:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.toggle:disabled, .toggle[aria-disabled="true"], .toggle.disabled {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .toggle, .toggle::after { transition: none; }
}
/* Phones: a slightly bigger track for touch */
@media (max-width: 600px) {
  :root { --ds-switch-w: 40px; --ds-switch-h: 22px; }
}