/* A step is however long its instructions are, so it's padded like any
   other row rather than to the two lines a swipe row usually holds. */
.step {
  --swipe-padding-block: var(--size-3);
}

/* Steps in a part read as a timeline, the line running down through their
   numbers, so there's no rule between them. The row's divider is a border
   image drawn at a width of its own, so the border and the image both go. */
.steps > .step + .step {
  border-block-start-width: 0;
  border-image: none;
}

/* The number's column runs the full height of the row, out over its
   padding, so the line above and below the number meets the next row's.
   The first and last in a part have nothing to reach for on one side. */
.step__marker {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-block: calc(-1 * var(--swipe-padding-block));

  &::before,
  &::after {
    background-color: var(--color-border);
    content: "";
    flex: 1;
    inline-size: var(--border-2);
  }

  .step:first-child &::before,
  .step:last-child &::after {
    visibility: hidden;
  }
}

/* Numbers are counted afresh in every part. */
.step__number {
  align-items: center;
  block-size: var(--size-7);
  border: var(--border-2) solid var(--color-border);
  border-radius: var(--rounded-full);
  color: var(--color-text-subtle);
  display: flex;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-semibold);
  inline-size: var(--size-7);
  justify-content: center;
}

.step__instructions {
  text-wrap: pretty;

  p + p {
    margin-block-start: var(--size-2);
  }
}

.step__part {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-block-start: var(--size-4);
}