/* A status always includes its readable label; colour is supplementary. */
.status-badge {
  --badge-text: var(--page-muted, var(--center-muted, #605b56));
  --badge-bg: var(--page-soft, var(--center-muted-surface, #f3f1ee));
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--badge-text) 28%, transparent);
  border-radius: 5px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.status-badge:is([data-state="active"], [data-state="public"], [data-state="confirmed"]) { --badge-text: #256246; --badge-bg: #e4f3e9; }
.status-badge:is([data-state="pending"], [data-state="under_review"]) { --badge-text: #79531c; --badge-bg: #faf0d8; }
.status-badge:is([data-state="blocked"], [data-state="cancelled"]) { --badge-text: #973c3c; --badge-bg: #f8e6e3; }
:is(.dark, [data-theme="dark"]) .status-badge:is([data-state="active"], [data-state="public"], [data-state="confirmed"]) { --badge-text: #9cdbb7; --badge-bg: #243d30; }
:is(.dark, [data-theme="dark"]) .status-badge:is([data-state="pending"], [data-state="under_review"]) { --badge-text: #f2c47e; --badge-bg: #493b25; }
:is(.dark, [data-theme="dark"]) .status-badge:is([data-state="blocked"], [data-state="cancelled"]) { --badge-text: #f3b0a7; --badge-bg: #492d2b; }