/* ==========================================================================
   Tag Pill — flat, dotless counterpart to .status-pill, for categorising a row
   (client type, preferred contact) rather than reporting a live state.
   ========================================================================== */
.tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.tag-pill--gray {
  background-color: rgba(149, 165, 166, 0.15);
  color: #5d6d6e;
}

.tag-pill--blue {
  background-color: rgba(52, 152, 219, 0.12);
  color: #2980b9;
}

.tag-pill--purple {
  background-color: rgba(155, 89, 182, 0.12);
  color: #8e44ad;
}

.tag-pill--amber {
  background-color: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.tag-pill--green {
  background-color: var(--tint-green-16);
  color: #1e8e63;
}

.tag-pill--pink {
  background-color: rgba(236, 72, 153, 0.12);
  color: #be185d;
}

/* Outlined rather than tinted, for the second categorising pill in a row: an
   applicant's source sits beside their role, and two tinted pills side by side
   read as two states rather than one fact and its context. */
.tag-pill--outline {
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
}

/* Outlined in the brand navy rather than in grey: the emphatic outline, for the
   value in a pair that means "somebody is still watching this". A full QA check
   beside a spot check is the case in point (see QaCheck#check_type_color). */
.tag-pill--outline-dark {
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-primary-dark);
  color: var(--color-primary-dark);
}

/* Between amber and red, for a middle grading that has to read as worse than
   amber without being the loudest thing on the page. */
.tag-pill--orange {
  background-color: rgba(194, 101, 15, 0.14);
  color: #c2650f;
}

/* Solid rather than tinted — the one pill in the set that is meant to stop
   somebody scanning a table. Reserved for a critical QA failure. */
.tag-pill--critical {
  background-color: var(--color-danger-light);
  color: var(--color-white);
}