@layer components {
/* ── Tag pills ─────────────────────────────────────────── */
.tag-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.3;
  color: var(--swatch-fg, var(--muted));
  background: var(--swatch-bg, var(--bg));
}
.tag-pill--small { font-size: 10px; padding: 2px 7px; }
}