/* ===========================================================================
 * DD01 — Status pill. D27.
 *
 * The mocks carry status two ways and the distinction is deliberate: the
 * positive case gets a --surface-3 pill ("Shared"), the negative case gets
 * de-emphasised plain text with no pill at all ("Not Shared"). A pill on both
 * would make "hasn't happened yet" look like a state somebody chose.
 *
 * The semantic variants exist only where a DECISION state genuinely exists —
 * a claim that was approved or rejected, a trophy waiting on review. Do not
 * reach for them to colour-code a list.
 * ======================================================================== */

.ui-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  white-space: nowrap;
}

.ui-status--neutral {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-3);
  color: var(--text-primary);
}

/* No pill, no border, no padding to speak of — the whole point is that it
   recedes next to the pill above it. */
.ui-status--muted {
  padding: var(--space-2) var(--space-1);
  color: var(--text-placeholder);
}

/* The three semantic pills carry a wash, a 40-45% border and tinted text.
   The border is what makes them legible: a 14-16% wash alone is nearly
   invisible on this base. */
.ui-status--success {
  padding: var(--space-2) var(--space-3);
  background: var(--success-wash);
  border: var(--border-width) solid var(--success-border);
  color: var(--success-text);
}

.ui-status--warning {
  padding: var(--space-2) var(--space-3);
  background: var(--warning-wash);
  border: var(--border-width) solid var(--warning-border);
  color: var(--gold-100);
}

.ui-status--danger {
  padding: var(--space-2) var(--space-3);
  background: var(--danger-wash);
  border: var(--border-width) solid var(--danger-border);
  color: var(--danger-text);
}

/* The small pill, for a table row (D177): 20px, 11px text. In thirty rows a
   full-size bordered pill is read before the numbers beside it. Placed after
   the variants so its padding wins over theirs. */
.ui-status.ui-status--sm {
  height: var(--pill-height-sm);
  padding: 0 var(--space-2);
  gap: var(--space-1);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-leading);
}

.ui-status.ui-status--sm.ui-status--muted { padding: 0; }