/**
 * Portal status / label pills — small chips (content-width), not buttons.
 *
 * Visual grammar (deliberate contrast with `.portal-btn`):
 * - Status pills: darker filled background + white text (looks like a label)
 * - Actionable CTAs: light / gold surface + dark text (`.portal-btn`)
 *
 * Keep smaller than `.portal-btn--xs`; non-interactive by default.
 * `.portal-legal-completion__status-pill*` aliases share the same metrics.
 */

.portal-pill,
.portal-legal-completion__status-pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--color-midnight, #1e3a5f);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

/* Only real controls / links should receive clicks */
a.portal-pill,
button.portal-pill,
.portal-pill--interactive,
a.portal-legal-completion__status-pill,
button.portal-legal-completion__status-pill {
  pointer-events: auto;
  cursor: pointer;
  user-select: auto;
  text-decoration: none;
}

.portal-pill--info,
.portal-legal-completion__status-pill--info {
  background: var(--color-sapphire, #3d6b99);
  border-color: color-mix(in srgb, var(--color-sapphire, #3d6b99) 80%, #000);
  color: #fff;
}

.portal-pill--pending,
.portal-legal-completion__status-pill--pending {
  background: #9a3b06;
  border-color: color-mix(in srgb, #9a3b06 80%, #000);
  color: #fff;
}

.portal-pill--attention,
.portal-legal-completion__status-pill--attention {
  background: #912018;
  border-color: color-mix(in srgb, #912018 80%, #000);
  color: #fff;
}

.portal-pill--success,
.portal-legal-completion__status-pill--evidenced {
  background: #0b5c2c;
  border-color: color-mix(in srgb, #0b5c2c 80%, #000);
  color: #fff;
}

.portal-pill--warning {
  background: #8a6a1f;
  border-color: color-mix(in srgb, #8a6a1f 80%, #000);
  color: #fff;
}

/* Dark theme: slightly lifted fills, still solid + light text (not button-like) */
body.theme-dark .portal-pill,
body.theme-dark .portal-legal-completion__status-pill {
  background: #2a4a6e;
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

body.theme-dark .portal-pill--info,
body.theme-dark .portal-legal-completion__status-pill--info {
  background: #3d6b99;
  border-color: rgba(125, 168, 212, 0.35);
  color: #fff;
}

body.theme-dark .portal-pill--pending,
body.theme-dark .portal-legal-completion__status-pill--pending {
  background: #b54708;
  border-color: rgba(245, 158, 11, 0.35);
  color: #fff;
}

body.theme-dark .portal-pill--attention,
body.theme-dark .portal-legal-completion__status-pill--attention {
  background: #b42318;
  border-color: rgba(248, 113, 113, 0.35);
  color: #fff;
}

body.theme-dark .portal-pill--success,
body.theme-dark .portal-legal-completion__status-pill--evidenced {
  background: #0f7a3a;
  border-color: rgba(52, 211, 153, 0.35);
  color: #fff;
}

body.theme-dark .portal-pill--warning {
  background: #8a6a1f;
  border-color: rgba(200, 164, 77, 0.4);
  color: #fff;
}