.user-journey-root {
  display: grid;
  gap: 12px;
}

.journey-principles,
.journey-grid,
.journey-status-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.journey-principle,
.journey-card,
.journey-status-card {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  padding: 12px;
}

.journey-principle {
  color: var(--mimir-text, #111827);
  font-weight: 750;
}

.journey-card {
  display: grid;
  gap: 9px;
}

.journey-card-head {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.journey-card h3,
.journey-status-card h3 {
  color: var(--mimir-text, #111827);
  font-size: 0.98rem;
  margin: 0;
}

.journey-card p,
.journey-status-card p {
  color: var(--mimir-muted, #6b7280);
  font-size: 0.86rem;
  margin: 0;
}

.journey-card ol {
  color: var(--mimir-text, #111827);
  display: grid;
  gap: 4px;
  font-size: 0.86rem;
  margin: 0;
  padding-left: 1.15rem;
}

.journey-meta {
  color: var(--mimir-muted, #6b7280);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  gap: 6px;
}

.journey-chip {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  text-transform: capitalize;
  white-space: nowrap;
}

.journey-chip.status-live {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.journey-chip.status-beta,
.journey-chip.status-planned {
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
}

.journey-chip.status-blocked {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.journey-chip.status-premium-planned {
  background: #eef2f7;
  color: #475569;
}

.journey-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.journey-toolbar select {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 999px;
  color: var(--mimir-text, #111827);
  min-height: 36px;
  padding: 7px 12px;
}

#user-journeys-summary[data-state="ready"] {
  color: #047857;
}

#user-journeys-summary[data-state="error"] {
  color: #b91c1c;
}