/* ==========================================================================
 * AIM MOBILE KIT — chip rows
 *
 * Decision: docs/decisions/0151-the-mobile-language-two-modes-safe-areas-and-device-permissions.md
 * Build plan + status: docs/MOBILE_LANGUAGE_PLAN.md (wave W1, items h and i)
 *
 * Loaded globally from the layouts. Phone layout rules live ONLY inside
 * @media (max-width: 767px); desktop keeps its existing behaviour.
 * The reconnect banner (W1 item i) was held back 2026-10-07: a custom
 * #components-reconnect-modal replaces Blazor's default overlay at EVERY width,
 * so it would change desktop too. Awaiting James's call (MOBILE_LANGUAGE_PLAN.md).
 *
 * Tokens consumed from aim-canonical.css: --raised, --line, --ink, --ink-muted,
 * --brand-on, --action, --on-action, --lift-2, --radius-sm, --text-sm,
 * --navbar-height, and the ADR-0151 mobile set --tap, --radius-control,
 * --text-m-label.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Chip row (opt-in: .aim-chip-row > .aim-chip, .aim-chip--on = selected)
 *    Desktop: wraps, like every other toolbar (responsive.md §3 toolbar rows).
 * -------------------------------------------------------------------------- */
.aim-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 767px) {
    /* One scrolling line that runs to the screen edge (Queue.dc "chip row"). */
    .aim-chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-inline: 16px;
        margin-inline: -16px;
    }

    .aim-chip-row::-webkit-scrollbar {
        display: none;
    }

    /* A toolbar holding a chip row keeps the search field on its own full-width line. */
    .aim-table-toolbar:has(> .aim-chip-row) {
        flex-wrap: wrap;
    }

    .aim-table-toolbar:has(> .aim-chip-row) > .aim-table-toolbar__search {
        flex: 1 1 100%;
        width: 100%;
    }

    .aim-table-toolbar:has(> .aim-chip-row) > .aim-chip-row {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Chip = a word-carrying control, so a rounded SQUARE (12px control step), never a capsule. */
    .aim-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 0 14px;
        border: 2px solid var(--line);
        border-radius: var(--radius-control);
        background: var(--raised);
        color: var(--ink-muted);
        font-size: var(--text-m-label);
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
        scroll-snap-align: start;
        cursor: pointer;
    }

    [data-mode="field"] .aim-chip {
        min-height: var(--tap);
    }

    .aim-chip--on {
        background: var(--brand-on);
        color: var(--on-action);
        border-color: var(--brand-on);
    }

    .aim-chip:focus-visible {
        outline: 2px solid var(--action);
        outline-offset: 2px;
    }
}