.step-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  margin-block-start: var(--space-2);
  padding: 0;
  list-style: none;
}

.step-list__item {
  display: grid;
  grid-template-columns: var(--icon-md) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  color: var(--color-text-subtle);
}

.step-list__mark {
  display: grid;
  place-items: center;
  block-size: 1lh;
  font-size: var(--text-sm);
}

.step-list__mark svg {
  inline-size: var(--icon-md);
  block-size: var(--icon-md);
}

.step-list__mark:empty::before {
  content: "";
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-pill);
  background: currentColor;
}

.step-list__item--done .step-list__mark {
  color: var(--color-success);
}

.step-list__item--current .step-list__mark,
.step-list__item--attention .step-list__mark {
  color: var(--color-accent);
}

.step-list__text {
  display: grid;
  gap: var(--space-hair);
  min-inline-size: 0;
}

.step-list__name {
  color: var(--color-text);
  font-size: var(--text-sm);
}

.step-list__item--next .step-list__name {
  color: var(--color-text-muted);
}

.step-list__result {
  font-size: var(--text-xs);
}

.step-list__item > .disclosure {
  min-inline-size: 0;
}

.step-list__item--folds > .step-list__mark {
  margin-block-start: var(--space-3);
}