/* =============================================================================
   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;
    /* At least as wide as the oblong track; keep the 44px hit height. */
    min-inline-size: var(--touch-target);
    inline-size: auto;
    block-size: var(--touch-target);
    flex: 0 0 auto;
    padding-inline: var(--space-2xs);
    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; }
  }

  /* Wider oblong track + absolute knob so Chromium/WebKit subpixel translate
     can't push the circle past the pill edge when ON. */
  .switch__track {
    position: relative;
    display: block;
    inline-size: 3rem;
    block-size: 1.625rem;
    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 {
    position: absolute;
    inset-block-start: 0.1875rem;
    inset-inline-start: 0.1875rem;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: inset-inline-start var(--dur-fast) var(--ease);
  }
  .switch[aria-checked="true"] .switch__knob {
    inset-inline-start: calc(100% - 1.25rem - 0.1875rem);
  }
}