/* =====================================================================================================
   AI Systems Group — Semantic State visual language (shared across all products)
   -----------------------------------------------------------------------------------------------------
   ONE badge vocabulary for the 14 shared semantic states (AI_SYSTEMS_GROUP_UNIFIED_PRODUCT_STANDARD.md
   §Semantic state contract). Meaning is FIXED company-wide; color is never the only cue — each badge
   pairs a token color with TEXT (and the caller adds an icon where useful). Pairs with the backend
   `state_contract.py` classifiers so the label a user sees always matches the state the server computed.

   Usage:  <span class="aisg-state s-verified">✓ Connected &amp; verified</span>
           <span class="aisg-state s-live_armed">● LIVE — armed</span>
   ===================================================================================================== */

.aisg-state {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--aisg-fs-xs); font-weight: 700; line-height: 1;
  padding: 3px 8px; border-radius: var(--aisg-radius-pill);
  border: 1px solid transparent; white-space: nowrap;
}

/* neutral / lifecycle */
.aisg-state.s-loading      { color: var(--aisg-text-2); background: var(--aisg-surface-3); }
.aisg-state.s-pending      { color: var(--aisg-warn-text); background: color-mix(in srgb, var(--aisg-warn) 16%, transparent); }
.aisg-state.s-success      { color: var(--aisg-success-text); background: color-mix(in srgb, var(--aisg-success) 16%, transparent); }
.aisg-state.s-empty        { color: var(--aisg-text-3); background: var(--aisg-surface-2); }
.aisg-state.s-offline      { color: var(--aisg-text-2); background: var(--aisg-surface-3); }
.aisg-state.s-error        { color: var(--aisg-danger-text); background: var(--aisg-danger-ink); border-color: color-mix(in srgb, var(--aisg-danger) 45%, transparent); }

/* freshness */
.aisg-state.s-stale        { color: var(--aisg-warn-text); background: color-mix(in srgb, var(--aisg-warn) 12%, transparent); }
.aisg-state.s-delayed      { color: var(--aisg-warn-text); background: color-mix(in srgb, var(--aisg-warn) 12%, transparent); }
.aisg-state.s-unavailable  { color: var(--aisg-text-3); background: var(--aisg-surface-2); border-color: var(--aisg-border); }

/* environments (a sample can NEVER read as production) */
.aisg-state.s-demo         { color: var(--aisg-ai-text); background: color-mix(in srgb, var(--aisg-accent) 16%, transparent); }
.aisg-state.s-test         { color: var(--aisg-info-text); background: color-mix(in srgb, var(--aisg-info) 14%, transparent); }
.aisg-state.s-paper        { color: var(--aisg-info-text); background: color-mix(in srgb, var(--aisg-info) 14%, transparent); }

/* execution mode — live danger is unmistakable */
.aisg-state.s-live_locked  { color: var(--aisg-text-2); background: var(--aisg-surface-3); border-color: var(--aisg-border-strong); }
.aisg-state.s-live_armed,
.aisg-state.s-verified.s-live_armed { color: #fff; background: var(--aisg-danger); border-color: var(--aisg-danger-text); }

/* verified/connected/live prices reuse success */
.aisg-state.s-verified,
.aisg-state.s-connected,
.aisg-state.s-live_streaming,
.aisg-state.s-live_snapshot { color: var(--aisg-success-text); background: color-mix(in srgb, var(--aisg-success) 16%, transparent); }
.aisg-state.s-reauthorization_required { color: var(--aisg-warn-text); background: color-mix(in srgb, var(--aisg-warn) 16%, transparent); }
.aisg-state.s-degraded,
.aisg-state.s-stale_session,
.aisg-state.s-permission_limited { color: var(--aisg-warn-text); background: color-mix(in srgb, var(--aisg-warn) 12%, transparent); }
.aisg-state.s-disconnected,
.aisg-state.s-not_configured { color: var(--aisg-text-3); background: var(--aisg-surface-2); border-color: var(--aisg-border); }

/* in-progress checks + research-lifecycle + market-closed prices */
.aisg-state.s-verifying,
.aisg-state.s-checking { color: var(--aisg-text-2); background: var(--aisg-surface-3); }
.aisg-state.s-research_only { color: var(--aisg-text-3); background: var(--aisg-surface-2); }
.aisg-state.s-shadow { color: var(--aisg-info-text); background: color-mix(in srgb, var(--aisg-info) 12%, transparent); }
.aisg-state.s-last_session { color: var(--aisg-text-2); background: var(--aisg-surface-3); border-color: var(--aisg-border); }