.chip {
  display: inline-flex;
  min-block-size: var(--tap-min);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-sm) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}
.chip__icon { flex: none; }
.chip--accent { color: var(--color-on-accent); border-color: var(--color-accent); background: var(--color-accent); }