/* Pills / tags — fill + border alphas are composed from the brand RGB
   channel tokens; the readable text shade is the theme-aware --bx-*-ink
   token, so each variant carries one color rule, not a light + dark hex. */
.bx .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--bx-r-pill);
  background: var(--bx-paper-2);
  color: var(--bx-ink-2);
  font-size: var(--bx-text-xs);
  font-weight: 600;
  border: 1px solid var(--bx-line);
}
.bx .pill .dot { width: 6px; height: 6px; border-radius: var(--bx-r-pill); background: currentColor; }

/* A wrapping row of pills — e.g. the audit-log quick filters. */
.bido-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.bx .pill-stays  { color: var(--bx-stays-ink);  background: rgba(var(--bx-accent-rgb),0.10); border-color: rgba(var(--bx-accent-rgb),0.30); }
.bx .pill-wheels { color: var(--bx-wheels-ink); background: rgba(var(--bx-teal-rgb),0.12);   border-color: rgba(var(--bx-teal-rgb),0.32); }
.bx .pill-vibes  { color: var(--bx-vibes-ink);  background: rgba(var(--bx-amber-rgb),0.12);  border-color: rgba(var(--bx-amber-rgb),0.32); }
.bx .pill-pros   { color: var(--bx-pros-ink);   background: rgba(var(--bx-pros-rgb),0.12);   border-color: rgba(var(--bx-pros-rgb),0.32); }
.bx .pill-good   { color: var(--bx-good-ink);   background: rgba(var(--bx-teal-rgb),0.12);   border-color: rgba(var(--bx-teal-rgb),0.32); }
.bx .pill-warn   { color: var(--bx-warn-ink);   background: rgba(var(--bx-amber-rgb),0.12);  border-color: rgba(var(--bx-amber-rgb),0.32); }
.bx .pill-bad    { color: var(--bx-bad-ink);    background: rgba(var(--bx-coral-rgb),0.10);  border-color: rgba(var(--bx-coral-rgb),0.32); }
/* Neutral state pill — statuses that are informational, not good/bad (e.g. a
   pending referral attribution that hasn't confirmed yet). */
.bx .pill-neutral { color: var(--bx-ink-3); background: var(--bx-fill-2); border-color: var(--bx-line); }

/* Dark surface only deepens the tint fill + border — the ink is theme-aware. */
.bx-dark .pill { background: rgba(var(--bx-white-rgb),0.06); color: var(--bx-ink-2); border-color: rgba(var(--bx-white-rgb),0.10); }
.bx-dark .pill-stays  { background: rgba(var(--bx-accent-rgb),0.14); border-color: rgba(var(--bx-accent-rgb),0.40); }
.bx-dark .pill-wheels { background: rgba(var(--bx-teal-rgb),0.14);   border-color: rgba(var(--bx-teal-rgb),0.40); }
.bx-dark .pill-vibes  { background: rgba(var(--bx-amber-rgb),0.16);  border-color: rgba(var(--bx-amber-rgb),0.40); }
.bx-dark .pill-pros   { background: rgba(var(--bx-pros-rgb),0.16);   border-color: rgba(var(--bx-pros-rgb),0.40); }
.bx-dark .pill-good   { background: rgba(var(--bx-teal-rgb),0.14);   border-color: rgba(var(--bx-teal-rgb),0.40); }
.bx-dark .pill-warn   { background: rgba(var(--bx-amber-rgb),0.16);  border-color: rgba(var(--bx-amber-rgb),0.40); }
.bx-dark .pill-bad    { background: rgba(var(--bx-coral-rgb),0.16);  border-color: rgba(var(--bx-coral-rgb),0.40); }
.bx-dark .pill-neutral { background: rgba(var(--bx-white-rgb),0.08); border-color: rgba(var(--bx-white-rgb),0.20); }