@layer components {
    /* Labelled on/off control. A native checkbox carries the state,
     * semantics and keyboard handling; the pill track and sliding
     * thumb are its skin. The label sits before the track so a thumb-
     * tapping finger never lands on the value. Wrap the row in a
     * <label> to make the whole strip toggle the control. */
    .switch {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        cursor: pointer;
    }
    .switch-label {
        font-size: var(--text-sm);
        color: var(--fg);
    }

    /* The input drives state and focus but leaves the visual flow; the
     * track/thumb that follow it in source order render the control. */
    .switch-input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
    }
    .switch-track {
        position: relative;
        flex-shrink: 0;
        width: 40px;
        height: 24px;
        border-radius: var(--radius-pill);
        background: var(--bg-active);
        transition: background var(--duration-fast) var(--easing-out);
    }
    /* --fg-on-accent is white in both themes: the raised thumb reads on
     * the grey off-track and the accent on-track alike. */
    .switch-thumb {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--fg-on-accent);
        box-shadow: var(--shadow-sm);
        transition: transform var(--duration-fast) var(--easing-out);
    }

    .switch-input:checked + .switch-track {
        background: var(--accent);
    }
    .switch-input:checked + .switch-track .switch-thumb {
        transform: translateX(16px);
    }
    .switch-input:focus-visible + .switch-track {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
    .switch:has(.switch-input:disabled) {
        cursor: not-allowed;
        color: var(--fg-muted);
    }
    .switch-input:disabled + .switch-track {
        opacity: 0.5;
    }
}