@layer components {
/* badges.css — Badge and avatar components
   Tiering rule (Northwest reference): a badge is a PILL only when it marks a
   step type or an *exceptional* state. Ordinary status and role read as plain
   text, so the eye finds problems instantly instead of scanning a wall of
   pastel. See UIGUIDE "Badges". */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

/* Pill treatment — opt-in, applied by the modifiers that earn it. */
.badge--question,
.badge--action,
.badge--message,
.badge--escalate,
.badge--resolve,
.badge--sub-flow,
.badge--form,
.badge--alert,
.badge--warning,
.badge--group {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
}

/* ─── Step type badges — pills, hue-derived, theme-aware via tokens ─── */
.badge--question { --step-hue: var(--hue-question); }
.badge--action   { --step-hue: var(--hue-action); }
.badge--message  { --step-hue: var(--hue-message); }
.badge--escalate { --step-hue: var(--hue-escalate); }
.badge--resolve  { --step-hue: var(--hue-resolve); }
.badge--sub-flow { --step-hue: var(--hue-subflow); }
.badge--form     { --step-hue: var(--hue-form); }

.badge--question,
.badge--action,
.badge--message,
.badge--escalate,
.badge--resolve,
.badge--sub-flow,
.badge--form {
  background: var(--step-bg);
  color: var(--step-text);
}

/* ─── Exceptional states — the only non-step pills ─── */
.badge--alert {
  background: var(--color-negative-soft);
  color: var(--color-negative);
}

.badge--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

/* ─── Ordinary status, role and info — plain text, no pill ─── */
.badge--draft,
.badge--published,
.badge--admin,
.badge--editor,
.badge--regular,
.badge--info,
.badge--default {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--color-ink-muted);
}

/* Published is the one status worth a little weight — still not a pill. */
.badge--published {
  color: var(--color-ink-subtle);
  font-weight: 600;
}

/* ─── Group chips — a token with a remove affordance, not a status ─── */
.badge--group {
  background: var(--color-canvas-alt);
  color: var(--color-ink-subtle);
  border: 1px solid var(--color-border);
}

.badge--group .badge__remove {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
  line-height: 1;
}

.badge--group .badge__remove:hover {
  opacity: 1;
}

/* ─── Avatars ─── */
.avatar--admin   { background: oklch(0.45 0.10 165); }
.avatar--editor  { background: var(--color-primary); }
.avatar--regular { background: var(--color-ink-muted); }

/* ─── Step type dots (for composition display) ─── */
.dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-ink-muted);
}

.dot--question { --step-hue: var(--hue-question); background: var(--step-dot); }
.dot--action   { --step-hue: var(--hue-action);   background: var(--step-dot); }
.dot--message  { --step-hue: var(--hue-message);  background: var(--step-dot); }
.dot--escalate { --step-hue: var(--hue-escalate); background: var(--step-dot); }
.dot--resolve  { --step-hue: var(--hue-resolve);  background: var(--step-dot); }
.dot--sub-flow { --step-hue: var(--hue-subflow);  background: var(--step-dot); }
.dot--form     { --step-hue: var(--hue-form);     background: var(--step-dot); }
}