/*
 * Chips — a filter row. Each chip is a link or button; the active one
 * is soft primary. The row scrolls sideways on narrow screens rather
 * than wrapping into three lines under a table.
 *
 *   <div class="chips" role="tablist" aria-label="Status">
 *     <a class="chip chip--active" role="tab" aria-selected="true" href="?">All <span class="chip__count">128</span></a>
 *     <a class="chip" role="tab" href="?status=running">Running</a>
 *   </div>
 */
.chips {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 var(--sp-3);
    padding: 2px;
}
.chips::-webkit-scrollbar { display: none; }
.chips--wrap { flex-wrap: wrap; overflow: visible; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: 28px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.chip:hover { color: var(--color-text); background: var(--color-surface-hi); }
.chip--active, .chip[aria-selected="true"], .chip[aria-pressed="true"] {
    color: var(--color-primary-hi);
    background: var(--color-primary-soft);
    border-color: transparent;
}
.chip__count {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xxs);
    opacity: 0.8;
}
.chip .icon { width: 12px; height: 12px; }
/* Dismissable chip (active filters). */
.chip__remove { display: inline-flex; margin-left: var(--sp-half); opacity: 0.7; }
.chip__remove:hover { opacity: 1; }