/* ============================================================
   <app-switch> — project-owned switch

   Native <input type="checkbox" role="switch"> styled with
   appearance: none, paired with a sibling track span containing
   a thumb. The input remains the source of truth for focus,
   keyboard activation, form serialization, and a11y; the track
   and thumb are purely decorative (aria-hidden in markup).

   Deliberately mirrors app-checkbox.css — same hidden-input
   technique, same token set, same states — because a switch IS
   a checkbox semantically. Only the chrome differs.

   Lives in @layer components so it sits below @layer brand and
   @layer utilities — host brand overrides and per-element
   utility classes both win cleanly.

   Tokens consumed (semantic only):
     --color-accent       — on-state track fill
     --color-accent-deep  — focus halo
     --color-line         — off-state track fill
     --color-ink          — label text
     --color-surface      — thumb fill
     --color-error        — invalid-state outline
     --space-2            — label gap
     --dur-fast / --ease  — thumb + track transition
   ============================================================ */
@layer components {

    .app-switch {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        cursor: pointer;
        font-size: 0.9375rem;
        line-height: 1.4;
        color: var(--color-ink);
        user-select: none;
    }

    /* Native input — visually hidden but kept focusable and in the
       tab order. Same technique as .app-checkbox__input. */
    .app-switch__input {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        overflow: hidden;
        white-space: nowrap;
    }

    /* Visible track. 2:1 ratio is the conventional switch proportion. */
    .app-switch__track {
        position: relative;
        inline-size: 2.25rem;
        block-size: 1.25rem;
        flex: 0 0 auto;
        border-radius: 999px;
        background: var(--color-line);
        transition: background var(--dur-fast) var(--ease);
    }

    /* Thumb. Inset by 2px on all sides; travels the remaining width. */
    .app-switch__thumb {
        position: absolute;
        inset-block-start: 2px;
        inset-inline-start: 2px;
        inline-size: 1rem;
        block-size: 1rem;
        border-radius: 50%;
        background: var(--color-surface);
        box-shadow: 0 1px 2px rgb(0 0 0 / .25);
        transition: translate var(--dur-fast) var(--ease);
    }

    .app-switch__input:checked + .app-switch__track {
        background: var(--color-accent);
    }

    /* translate (not inset-inline-start) so the transition runs on the
       compositor rather than triggering layout on every frame. */
    .app-switch__input:checked + .app-switch__track .app-switch__thumb {
        translate: 1rem 0;
    }

    .app-switch:hover .app-switch__input:not(:disabled) + .app-switch__track {
        background: color-mix(in srgb, var(--color-line) 80%, var(--color-ink));
    }

    .app-switch:hover .app-switch__input:checked:not(:disabled) + .app-switch__track {
        background: var(--color-accent-deep);
    }

    .app-switch__input:focus-visible + .app-switch__track {
        outline: 2px solid var(--color-accent-deep);
        outline-offset: 2px;
    }

    .app-switch--disabled,
    .app-switch:has(.app-switch__input:disabled) {
        cursor: default;
        opacity: .55;
    }

    .app-switch__input:disabled + .app-switch__track {
        background: var(--color-line);
    }

    .app-switch__input.input-validation-error + .app-switch__track,
    .app-switch__input[aria-invalid="true"] + .app-switch__track {
        outline: 2px solid var(--color-error);
        outline-offset: 2px;
    }

    .app-switch__label {
        /* Inherits color from .app-switch; nothing to do unless a
           caller needs a different weight. */
    }

    /* Motion preference — respect the user's setting rather than
       animating regardless. */
    @media (prefers-reduced-motion: reduce) {
        .app-switch__track,
        .app-switch__thumb {
            transition: none;
        }
    }
}