/* ==========================================================================
   Pill / status token
   Small status or label chip: Paid/Active/Connected (green), a neutral
   category tag, or a dashed "needs info" prompt. Catalogued in preview/index.html.
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--color-bg);
  color: var(--color-text);
}

.pill--paid,
.pill--active,
.pill--on { background: #1da51d14; color: var(--color-success); } /* success tint — provisional, no token yet */

.pill--on::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}

.pill--dashed {
  background: none;
  border: var(--border-width) dashed var(--color-border-strong);
  color: var(--color-text-muted);
}

/* Record STATUS states (Peter, 24 Jul) — an at-a-glance read of where a record stands, next to
   its title: green = done/nothing to do, amber = waiting on someone else, red = needs you,
   grey = not started. Same 12% tint of the semantic token as the invoice row pills. */
.pill--wait { background: color-mix(in srgb, var(--color-active) 12%, transparent); color: var(--color-active); }
.pill--danger { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.pill--muted { background: var(--color-bg-subtle); color: var(--color-text-muted); }