/* =============================================================================
   COMPONENT: switch — a pill toggle for on/off settings (Dusk slice 1: the
   "Web push" row). Rendered as a <button role="switch" aria-checked> so the
   state is announced and keyboard-operable. The button is a full 44px hit
   target; the visual track sits centred inside it. ON = accent track; OFF =
   border-strong track; the knob is surface-coloured. Color is never the only
   signal — the owning row always carries a text label/state beside it.
   ========================================================================== */
@layer components {
  .switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;

    &:focus-visible { outline: none; }
    &:focus-visible .switch__track { box-shadow: var(--focus-ring); }
    &:disabled { opacity: 0.55; cursor: not-allowed; }
  }

  .switch__track {
    display: inline-flex;
    align-items: center;
    inline-size: 2.75rem;
    block-size: 1.625rem;
    padding-inline: 0.1875rem;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    transition: background var(--dur-fast) var(--ease);
  }
  .switch[aria-checked="true"] .switch__track { background: var(--accent); }

  .switch__knob {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: translate var(--dur-fast) var(--ease);
  }
  .switch[aria-checked="true"] .switch__knob { translate: 1.125rem 0; }
}