/* ════════════════════════════════════════════════════════════════════════════
   cfin-state-pill.css — THE ONE SHARED STATUS PILL, PUBLIC HALF
   Decision #95 ("B7"), part 2.
   ════════════════════════════════════════════════════════════════════════════

   `frontend/src/shared/kit/statusPill.module.css` is the geometry's source of
   truth (the mock's `.sev` capsule: inline-flex, no declared width, 13px/600
   text, tinted fill, pill radius). The app and admin sides consume it as a JS
   module; the public site has no build step for that, so this file restates
   the SAME rule in plain CSS, against the SAME generated tokens
   (`static/css/generated/cfin-theme.tokens.css`, built from the one
   `siteTokens.js` source) rather than a second, hand-picked palette.

   Every token below already exists in the generated file for an unrelated
   reason (the admin badge restyle in this same PR repoints them too) — no new
   token had to be invented for the public site:

       --cfin-sev-success / --cfin-sev-warn / --cfin-sev-error   (sev ink)
       --cfin-accent-tint                                        (accent fill)
       --cfin-fill-tertiary                                      (neutral fill)
       --color-text-secondary                                    (neutral ink)
       --cfin-radius-pill                                        (pill radius)
       --cfin-text-caption-1-size / -leading                     (13px rung)

   `color-mix()` repeats the kit's own 14-16% tint math so a light/dark toggle
   recomputes it instead of a second, hand-picked rgba().

   Load this AFTER `generated/cfin-theme.tokens.css` and BEFORE a shell's own
   CSS, on every public page that draws an account/engine/document state word
   (currently: /verify). An inline-flex span with no declared width NEVER
   stretches to its row/column — the same invariant the kit's own header
   documents (a ~134px "Halted" pill, measured on admin's People, was a parent
   stretching an unsized child; this class carries no `width` either). */

.cfin-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--cfin-radius-pill);
  font-size: var(--cfin-text-caption-1-size, 0.75rem);
  line-height: var(--cfin-text-caption-1-leading, 1.333);
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
}

.cfin-state-pill svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.cfin-state-pill--success {
  background: color-mix(in srgb, var(--cfin-sev-success) 14%, transparent);
  color: var(--cfin-sev-success);
}

.cfin-state-pill--warning {
  background: color-mix(in srgb, var(--cfin-sev-warn) 16%, transparent);
  color: var(--cfin-sev-warn);
}

.cfin-state-pill--critical {
  background: color-mix(in srgb, var(--cfin-sev-error) 14%, transparent);
  color: var(--cfin-sev-error);
}

.cfin-state-pill--accent {
  background: var(--cfin-accent-tint);
  color: var(--color-accent);
}

.cfin-state-pill--neutral {
  background: var(--cfin-fill-tertiary);
  color: var(--color-text-secondary);
}