@layer components {
    /* Toggle-chip filter group. Each chip is a <label> wrapping a visually-hidden native
       checkbox; the check glyph + accent fill signal selection (both, never colour alone). */
    .app-toggle-button-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .app-toggle-button {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border: 0.5px solid var(--color-line);
        border-radius: var(--radius-pill);
        background: transparent;
        color: var(--color-ink-soft);
        font-size: var(--fs-ui);
        line-height: var(--lh-normal);
        cursor: pointer;
        user-select: none;
    }

    /* The native checkbox stays in the DOM (state, keyboard, serialization) but is visually hidden. */
    .app-toggle-button__input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    /* Check glyph is always present; collapsed until the chip is pressed. */
    .app-toggle-button__check {
        width: 0;
        opacity: 0;
        overflow: hidden;
        font-size: var(--fs-ui-sm);
        transition: width 0.1s ease, opacity 0.1s ease;
    }

    .app-toggle-button:hover {
        border-color: var(--color-accent);
    }

    /* Pressed: accent tint fill, accent border, accent text, check shown. */
    .app-toggle-button:has(.app-toggle-button__input:checked) {
        background: var(--color-accent-soft);
        border-color: var(--color-accent);
        color: var(--color-accent-deep);
    }

    .app-toggle-button:has(.app-toggle-button__input:checked) .app-toggle-button__check {
        width: 1em;
        opacity: 1;
    }

    /* Keyboard focus ring, driven by the hidden native input. */
    .app-toggle-button:has(.app-toggle-button__input:focus-visible) {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    .app-toggle-button--disabled,
    .app-toggle-button:has(.app-toggle-button__input:disabled) {
        opacity: 0.5;
        cursor: not-allowed;
    }
}