/* SLE-TH-chip — filter / tag / status pill.
 *
 * Variants:
 *   .suite-chip                — base pill (border + radius + padding)
 *   .suite-chip.on / .is-active — active state
 *   .suite-chip--warn / --error / --success — semantic colours
 *
 * Promoted from matos `.m-chip` on 2026-06-14 (suite-wide CSS consolidation).
 * campscout `.po-tag` retains a separate identity because its variants
 * (owner / editor / viewer / permit-auto / permit-manual) overlap badge
 * tokens rather than the warn / error / success semantic set.
 *
 * Depends on tokens.css.
 */
.suite-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2h); border: 1px solid var(--g2); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--g4); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.suite-chip:hover { background: var(--g1); color: var(--text); }
.suite-chip.on, .suite-chip.is-active { background: var(--bk); color: var(--white); border-color: var(--bk); }
@media (prefers-color-scheme: dark) {
  .suite-chip.on, .suite-chip.is-active { background: var(--g4); color: var(--bk); border-color: var(--g4); }
}
.suite-chip--warn { background: var(--bg-warn); color: var(--fg-warn); border-color: transparent; }
.suite-chip--error { background: var(--bg-error); color: var(--fg-error); border-color: transparent; }
.suite-chip--success { background: var(--bg-success); color: var(--fg-success); border-color: transparent; }