/* ==========================================================================
   components/badges.css — pill / badge variants
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
}

/* === Color variants === */

.p-c {
  background: var(--accent-dim);
  color: var(--accent);
}

.p-g {
  background: var(--green-dim);
  color: var(--green);
}

.p-a {
  background: var(--amber-dim);
  color: var(--amber);
}

.p-r {
  background: var(--red-dim);
  color: var(--red);
}

.p-cy {
  background: var(--cyan-dim);
  color: var(--cyan);
}

.p-pk {
  background: var(--pink-dim);
  color: var(--pink);
}

.p-i {
  background: var(--accent2-dim);
  color: var(--accent2);
}

/* === Confidence pills (Accuracy v2) === */

.conf-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
  user-select: none;
}

.conf-pill--high {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid var(--green-dim);
}

.conf-pill--med {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid var(--amber-dim);
}

.conf-pill--low {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid var(--red-dim);
}