/* ============================================================================
   Components - Pills
   system/components/pills.css

   Small inline labels for tags, filters, categories, status badges.

   See sibling pills.md.
   ============================================================================ */

.gm .gm-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  padding: 4px 12px;
  font-family: var(--gm-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: var(--gm-radius-sm);
  background: var(--gm-border-subtle);
  color: var(--gm-accent-strong);
  border: 1px solid var(--gm-border-default);
  white-space: nowrap;
}

.gm .gm-pill.gm-pill-active {
  background: var(--gm-accent);
  color: var(--gm-bg-base);
  border-color: var(--gm-accent);
}

.gm .gm-pill.gm-pill-warn {
  background: rgba(245, 124, 0, 0.12);
  color: var(--gm-warning);
  border-color: rgba(245, 124, 0, 0.4);
}

.gm .gm-pill.gm-pill-danger {
  background: rgba(252, 165, 165, 0.12);
  color: var(--gm-danger);
  border-color: rgba(252, 165, 165, 0.4);
}