/*
 * Status chips, shared by every page that shows one.
 *
 * Extracted for the same reason as tokens.css and buttons.css. interview-record.css is
 * loaded by the meeting page and defines `.pill-enabled` — but the `.pill` base it builds
 * on lived in app-home.css, which the meeting page does not load, so an enabled prompt's
 * chip in the post-interview panel had its colours and no chip shape at all.
 *
 * Needs tokens.css.
 */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-surface-soft);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-ink-soft);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* One per interview status, as the dashboard lists them. */
.pill-new       { background: #e7ecff; color: #3b55a0; }
.pill-active    { background: #e7f7ec; color: #2d7a43; }
.pill-launched  { background: #eef3ff; color: #3b5bdb; }
.pill-concluded { background: var(--c-surface-soft); color: var(--c-muted); }
.pill-aborted   { background: #fef2f2; color: #b91c1c; }
.pill-muted     { background: var(--c-surface-soft); color: var(--c-muted); }
.pill-linked    { background: #f3e8ff; color: #7e22ce; }