/*
 * Traffic light (Colony::Health): <span class="health health--red"><span class="health__dot"></span>…</span>
 */
.health {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  vertical-align: middle;
}

.health__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--color-surface);
}

.health--green .health__dot { background: var(--color-success); }
.health--amber .health__dot { background: var(--color-warning); }
.health--red .health__dot { background: var(--color-danger); }
.health--green { color: var(--color-success-text); }
.health--amber { color: var(--color-warning-text); }
.health--red { color: var(--color-danger-text); }

.health__reasons {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
}