/* hx-status.css — Status + Indicator + Divider SSOT
 * Badge rules live in primitives/badge/badge.css
 */
 * hx-status.css — Status SSOT
 * Badge, Indicator, Status
 */
.hx-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: var(--hx-primary);
  color: var(--hx-on-primary);
  border-radius: var(--hx-radius-full);
  font-size: 11px;
}


/* Migrated from hx-primitives.css — Divider (status-related) (3.04.86) */
/* Divider primitive — token rules, light/dark via --hx-divider-* */
.hx-divider--rule {
  display: flex;
  align-items: center;
  gap: var(--hx-divider-label-gap);
  width: 100%;
  height: auto;
  min-height: 0;
  margin: var(--hx-divider-gap) 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hx-fg-muted);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  text-align: center;
}
.hx-divider--rule::before,
.hx-divider--rule::after {
  content: "";
  flex: 1 1 auto;
  height: var(--hx-divider-size);
  background: var(--hx-divider-color);
  border: 0;
}
.hx-divider--rule:not(:has(.hx-divider__label))::after { display: none; }
.hx-divider--strong { --hx-divider-color: var(--hx-divider-color-strong); }
.hx-divider--subtle { --hx-divider-color: var(--hx-line); }
.hx-divider--full {
  width: auto;
  margin-left: calc(var(--space-4) * -1);
  margin-right: calc(var(--space-4) * -1);
}
.hx-divider--rule.hx-divider--vert {
  flex-direction: column;
  align-self: stretch;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 48px;
  margin: 0;
}
.hx-divider--rule.hx-divider--vert::before,
.hx-divider--rule.hx-divider--vert::after {
  width: var(--hx-divider-size);
  height: auto;
  flex: 1 1 auto;
  min-height: 12px;
}
.hx-divider__label { padding: 0 var(--space-1); white-space: nowrap; }
.hx-div-card {
  width: min(360px, 100%);
  margin-right: auto;
  padding: var(--space-4);
  border: 1px solid var(--hx-line);
  border-radius: var(--radius-md);
  background: var(--hx-surface);
  text-align: left;
  color: var(--hx-fg);
}
.hx-div-card .hx-text { margin: 0; }
.hx-div-row { display: flex; justify-content: space-between; gap: var(--space-3); }
.hx-div-metrics {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
}
.hx-div-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hx-preview-card__stage:has(.hx-div-card),
.hx-preview-card__stage:has(.hx-div-metrics),
.hx-preview-card__stage:has(.hx-divider--rule) {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
html[data-ds-theme="dark"] .hx-div-card,
.hx-example[data-theme="dark"] .hx-div-card {
  background: var(--hx-surface);
  color: var(--hx-fg);
}

.hx-div-metrics > .hx-divider.hx-divider--vert,
.hx-preview-card__stage .hx-divider--rule.hx-divider--vert {
  display: block;
  flex: 0 0 1px;
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  height: auto;
  min-height: 48px;
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--hx-divider-color);
  background: var(--hx-divider-color);
  box-sizing: border-box;
}
.hx-div-metrics > .hx-divider.hx-divider--vert::before,
.hx-div-metrics > .hx-divider.hx-divider--vert::after,
.hx-preview-card__stage .hx-divider--rule.hx-divider--vert::before,
.hx-preview-card__stage .hx-divider--rule.hx-divider--vert::after {
  content: none;
  display: none;
}


/* Auto-migrated from hx-primitives.css (3.04.90) */

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-indicator {
  color: var(--hx-fg);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-divider--rule {
  border-color: var(--hx-line);
  background: var(--hx-line);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-status {
  color: var(--hx-fg);
  border-color: var(--hx-line);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status {
  display: inline-flex;
  align-items: center;
  gap: var(--hx-space-2);
  color: var(--hx-fg);
  font-size: 14px;
  line-height: 1.4;
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status__mark {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--hx-fg-muted);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status--ok .hx-status__mark { color: var(--hx-success); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status--warning .hx-status__mark { color: var(--hx-warning); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status--canceled .hx-status__mark { color: var(--hx-danger); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status--info .hx-status__mark { color: var(--hx-primary); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status__title { font-weight: 600; }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status__sub { color: var(--hx-fg-muted); font-size: 13px; }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hx-fg-muted);
  flex: 0 0 8px;
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status-dot--ok { background: var(--hx-success); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status-dot--warning { background: var(--hx-warning); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status-dot--problem { background: var(--hx-danger); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status-dot--info { background: var(--hx-primary); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status-dot--unstarted { background: var(--hx-fg-muted); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status-dot.is-pulse { animation: hx-status-pulse 1.6s ease-in-out infinite; }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status-dot-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hx-space-3);
  align-items: center;
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-status-dot-item {
  display: inline-flex;
  align-items: center;
  gap: var(--hx-space-2);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-status-dot-item {
  color: var(--hx-fg);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-status__sub {
  color: var(--hx-fg-muted);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
  .hx-status { font-size: 13px; gap: var(--hx-space-1); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
  .hx-status-dot-list { gap: var(--hx-space-2); }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-preview-card__stage[data-theme="dark"] .hx-status {
  color: var(--hx-fg);
  background: var(--hx-surface);
  border-color: var(--hx-line);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-btn:hover .hx-indicator {
  color: inherit;
  opacity: 1;
  background: var(--hx-surface-subtle);
  border-color: var(--hx-line);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */

/* Auto-migrated from hx-primitives.css (3.04.90) */

/* Auto-migrated from hx-primitives.css (3.04.90) */

/* Auto-migrated from hx-primitives.css (3.04.90) */

/* Auto-migrated from hx-primitives.css (3.04.90) */

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-preview-card[data-theme="light"] .hx-indicator {
  background: var(--hx-danger);
  color: var(--hx-surface);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-preview-card__stage[data-theme="light"] .hx-indicator--count {
  background: var(--hx-danger);
  color: var(--hx-surface);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-btn .hx-indicator {
  margin-inline-start: var(--hx-btn-gap);
  vertical-align: middle;
}


/* 3.04.94 — 4-variant readiness (light/dark × desktop/mobile)
   Controlled by data-theme + data-hx-vp on <html>.
   All styles token-driven. Composition with other primitives encouraged. */
html[data-theme="light"][data-hx-vp="desktop"],
html[data-theme="light"][data-hx-vp="mobile"],
html[data-theme="dark"][data-hx-vp="desktop"],
html[data-theme="dark"][data-hx-vp="mobile"] {
  /* tokens flip automatically */
}
/* === Indicator (aggregated variant) === */
/**
 * indicator.css — Indicator SSOT
 * Token-driven. 4-variant ready.
 */
.hx-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hx-indicator-bg);
  color: var(--hx-indicator-fg);
  border-radius: var(--hx-radius-full);
  min-width: 8px;
  height: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.hx-indicator--count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  color: var(--hx-indicator-fg);
}

.hx-indicator--info    { background: var(--hx-primary); }
.hx-indicator--success { background: var(--hx-success); }
.hx-indicator--warning { background: var(--hx-warning); }
.hx-indicator--error   { background: var(--hx-danger); }
.hx-indicator--neutral { background: var(--hx-fg-muted); }

/* Dark */
html[data-theme="dark"] .hx-indicator {
  background: var(--hx-indicator-bg);
  color: var(--hx-indicator-fg);
}

/* StatusDot pulsing — color only, fixed size */
.hx-status-dot.is-pulse,
.hx-status-dot.is-pulse::after {
  animation: hx-dot-pulse-color 1.4s ease-in-out infinite;
  transform: none;
}
@keyframes hx-dot-pulse-color {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.hx-status-dot.is-pulse::after {
  transform: none;
  animation: hx-dot-pulse-color 1.4s ease-in-out infinite;
}

/* Pulsing 100% → 50% opacity only */
@keyframes hx-dot-pulse-color {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.hx-status-dot.is-pulse,
.hx-status-dot.is-pulse::after {
  animation: hx-dot-pulse-color 1.4s ease-in-out infinite;
  transform: none;
}

/* Force pulse override */
.hx-status-dot.is-pulse,
.hx-app .hx-status-dot.is-pulse {
  animation: hx-dot-pulse-color 1.4s ease-in-out infinite;
}
@keyframes hx-dot-pulse-color {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Status + Indicator — Dark optimized (semantic tokens) */
html[data-theme="dark"] .hx-status--ok .hx-status__mark,
html[data-theme="dark"] .hx-status-dot--ok,
html[data-theme="dark"] .hx-indicator--success {
  color: var(--hx-success);
  background: var(--hx-success);
}
html[data-theme="dark"] .hx-status--warning .hx-status__mark,
html[data-theme="dark"] .hx-status-dot--warning,
html[data-theme="dark"] .hx-indicator--warning {
  color: var(--hx-warning);
  background: var(--hx-warning);
}
html[data-theme="dark"] .hx-status--error .hx-status__mark,
html[data-theme="dark"] .hx-status-dot--error,
html[data-theme="dark"] .hx-indicator--error {
  color: var(--hx-danger);
  background: var(--hx-danger);
}
html[data-theme="dark"] .hx-status--info .hx-status__mark,
html[data-theme="dark"] .hx-status-dot--info,
html[data-theme="dark"] .hx-indicator--info {
  color: var(--hx-primary);
  background: var(--hx-primary);
}
html[data-theme="dark"] .hx-status,
html[data-theme="dark"] .hx-status__label {
  color: var(--hx-fg);
}

/* Status Dark — white font, icons colored (not filled squares) */
html[data-theme="dark"] .hx-status,
html[data-theme="dark"] .hx-status__label,
html[data-theme="dark"] .hx-status__sub {
  color: var(--hx-fg);
}

html[data-theme="dark"] .hx-status__mark {
  background: transparent;
  color: inherit;
}

html[data-theme="dark"] .hx-status--ok .hx-status__mark {
  color: var(--hx-success);
  background: transparent;
}
html[data-theme="dark"] .hx-status--warning .hx-status__mark {
  color: var(--hx-warning);
  background: transparent;
}
html[data-theme="dark"] .hx-status--error .hx-status__mark,
html[data-theme="dark"] .hx-status--canceled .hx-status__mark {
  color: var(--hx-danger);
  background: transparent;
}
html[data-theme="dark"] .hx-status--info .hx-status__mark {
  color: var(--hx-primary);
  background: transparent;
}

/* Dots keep their background */
html[data-theme="dark"] .hx-status-dot--ok { background: var(--hx-success); }
html[data-theme="dark"] .hx-status-dot--warning { background: var(--hx-warning); }
html[data-theme="dark"] .hx-status-dot--error,
html[data-theme="dark"] .hx-status-dot--problem { background: var(--hx-danger); }
html[data-theme="dark"] .hx-status-dot--info { background: var(--hx-primary); }

/* Status label white in Dark — beat helix .hx-app .hx-status--* color */
html[data-theme="dark"] .hx-status,
html[data-theme="dark"] .hx-app .hx-status,
html[data-theme="dark"] .hx-status__label,
html[data-theme="dark"] .hx-status__title,
html[data-theme="dark"] .hx-status__copy,
html[data-theme="dark"] .hx-app .hx-status--ok,
html[data-theme="dark"] .hx-app .hx-status--warning,
html[data-theme="dark"] .hx-app .hx-status--error,
html[data-theme="dark"] .hx-app .hx-status--info {
  color: var(--hx-on-primary);
}

/* Component status badge (used in primitive headers) */
.hx-status-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--hx-space-2);
  padding: 2px 8px;
  border-radius: var(--hx-radius-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  background: var(--hx-surface-subtle);
  color: var(--hx-fg-muted);
  vertical-align: middle;
}
.hx-status-badge--ready {
  background: var(--hx-success-bg);
  color: var(--hx-success);
}
.hx-status-badge--migrating {
  background: var(--hx-warning-bg);
  color: var(--hx-warning);
}
.hx-status-badge--aggregated {
  background: var(--hx-info-bg);
  color: var(--hx-info);
}