Mixed Status Stepper

<!--
  Status is explicit here rather than derived from an index, so a step can fail:
  the error step gets a red marker and red title, and its state is spelled out in
  sr-only text so it never rides on colour alone. Vertical, so it never fights a
  phone.
-->
<nav aria-label="Progress" class="w-full">
  <ol>
    <li class="flex gap-4">
      <div class="flex flex-col items-center">
        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-600 text-sm font-semibold text-white">
          <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-3.5-3.5a1 1 0 1 1 1.4-1.4l2.8 2.8 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/></svg>
        </span>
        <span aria-hidden="true" class="mt-1 w-px flex-1 bg-blue-600"></span>
      </div>
      <div class="pb-8">
        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Details submitted<span class="sr-only"> (complete)</span></h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your account information was saved.</p>
      </div>
    </li>
    <li class="flex gap-4">
      <div class="flex flex-col items-center">
        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-red-600 text-sm font-bold text-white">!</span>
        <span aria-hidden="true" class="mt-1 w-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
      </div>
      <div class="pb-8">
        <h3 class="text-sm font-semibold text-red-600 dark:text-red-400">Payment failed<span class="sr-only"> (error)</span></h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your card was declined. Try another payment method.</p>
      </div>
    </li>
    <li class="flex gap-4" aria-current="step">
      <div class="flex flex-col items-center">
        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 border-blue-600 text-sm font-semibold text-blue-600 dark:text-blue-400">3</span>
      </div>
      <div>
        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Confirmation<span class="sr-only"> (current)</span></h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Review and place your order.</p>
      </div>
    </li>
  </ol>
</nav>