@layer components {
  /* A small inline chip — kind/role/status label used across the bar, account and lists.
     Sentence-case and soft rather than shouty uppercase; inline-flex so it can lead with
     an icon (see .badge svg). */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15em 0.55em;
    font-size: var(--text-x-small);
    font-weight: 600;
    line-height: 1.5;
    text-transform: capitalize;
    white-space: nowrap;
    color: var(--color-subtle);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-small);
  }
  /* Kind/type icon inside a badge — scales with the label, never shrinks. */
  .badge svg { inline-size: 0.95em; block-size: 0.95em; flex: none; }

  /* Offering lifecycle: live is public (green), draft is in progress (amber); archived keeps
     the default muted look — it's the past. */
  .badge--live {
    color: var(--color-positive);
    background: color-mix(in oklab, var(--color-positive) 10%, transparent);
    border-color: color-mix(in oklab, var(--color-positive) 35%, transparent);
  }
  .badge--draft,
  .badge--pending {
    color: var(--color-caution);
    background: color-mix(in oklab, var(--color-caution) 12%, transparent);
    border-color: color-mix(in oklab, var(--color-caution) 35%, transparent);
  }
}