/* stepper.css: the 6-step post stepper (_stepper.html). Tokens only. Class prefix: stepper. */
.stepper { margin: var(--space-3) 0 var(--space-4); }
.stepper__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.stepper__item { min-width: 0; padding: var(--space-2) var(--space-2) var(--space-2); border-top: var(--stroke-rule) solid var(--st-neutral); }
.stepper__item--neutral { border-top-color: var(--st-neutral); }
.stepper__item--progress { border-top-color: var(--st-progress); }
.stepper__item--success { border-top-color: var(--st-success); }
.stepper__item--warning { border-top-color: var(--st-warning); }
.stepper__item--danger { border-top-color: var(--st-danger); }
.stepper__item--suggest { border-top-color: var(--st-suggest); }
.stepper__item--neutral .stepper__state { color: var(--st-neutral); }
.stepper__item--progress .stepper__state { color: var(--st-progress); }
.stepper__item--success .stepper__state { color: var(--st-success); }
.stepper__item--warning .stepper__state { color: var(--st-warning); }
.stepper__item--danger .stepper__state { color: var(--st-danger); }
.stepper__item--suggest .stepper__state { color: var(--st-suggest); }
.stepper__head { display: flex; align-items: baseline; gap: var(--space-2); }
.stepper__num { color: var(--ink-2); }
.stepper__label { color: var(--ink); overflow-wrap: anywhere; }
a.stepper__label:focus-visible { outline: var(--stroke-rule) solid var(--ink); outline-offset: 2px; }
.stepper__state { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); }
.stepper__reason { margin: var(--space-1) 0 0; color: var(--ink-2); }
.stepper__item[aria-current="step"] .stepper__label { text-decoration: underline; text-decoration-thickness: var(--stroke-hair); text-underline-offset: var(--space-1); }
.stepper__item[aria-current="step"] { background: var(--st-neutral-bg); }

/* Compact: one thin row, no reason */
.stepper--compact { margin: var(--space-2) 0; }
.stepper--compact .stepper__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.stepper--compact .stepper__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0 0; }
.stepper--compact .stepper__state { margin-top: 0; }

@media (min-width: 640px) {
  .stepper__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .stepper__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}