/* Domus Pura shared status primitives/components (opt-in) */

.dp-badge,
.dp-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--dp-border-width) solid transparent;
  border-radius: var(--dp-radius-pill);
  font-size: var(--dp-font-size-xs);
  font-weight: var(--dp-font-weight-semibold);
  line-height: var(--dp-line-height-tight);
  padding: var(--dp-space-1) var(--dp-space-3);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

.dp-badge--neutral,
.dp-status--neutral {
  background: var(--dp-color-bg-muted);
  border-color: var(--dp-color-border-medium);
  color: var(--dp-color-text-secondary);
}

.dp-badge--info,
.dp-status--info {
  background: var(--dp-color-accent-muted);
  border-color: var(--dp-color-accent);
  color: var(--dp-color-accent);
}

.dp-badge--review,
.dp-status--review {
  background: var(--dp-color-demo-bg);
  border-color: var(--dp-color-demo);
  color: var(--dp-color-demo);
}

.dp-badge--pending,
.dp-status--pending,
.dp-badge--warning,
.dp-status--warning {
  background: var(--dp-color-warning-bg);
  border-color: var(--dp-color-warning);
  color: var(--dp-color-warning);
}

.dp-badge--success,
.dp-status--success {
  background: var(--dp-color-success-bg);
  border-color: var(--dp-color-success);
  color: var(--dp-color-success);
}

.dp-badge--danger,
.dp-status--danger {
  background: var(--dp-color-danger-bg);
  border-color: var(--dp-color-danger);
  color: var(--dp-color-danger);
}

.dp-badge--demo,
.dp-status--demo {
  background: var(--dp-color-demo-bg);
  border-color: var(--dp-color-demo);
  color: var(--dp-color-demo);
}

.dp-status-timeline {
  display: grid;
  gap: var(--dp-space-3);
}

.dp-status-timeline__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--dp-space-3);
  align-items: start;
}

.dp-status-timeline__marker {
  width: var(--dp-space-3);
  height: var(--dp-space-3);
  margin-top: var(--dp-space-1);
  border-radius: var(--dp-radius-pill);
  background: var(--dp-color-accent);
  box-shadow: 0 0 0 var(--dp-border-width) var(--dp-color-border-soft);
}

.dp-status-timeline__body {
  min-width: 0;
  color: var(--dp-color-text-secondary);
  overflow-wrap: anywhere;
}