Onboarding Vertical

<section aria-label="Onboarding wizard" class="ws-onboarding mx-auto max-w-4xl px-4 py-12">
  <div class="flex gap-8">
    <!-- Vertical stepper sidebar -->
    <nav aria-label="Onboarding steps" class="w-56 shrink-0">
      <ol class="relative space-y-0" role="list">
        <!-- Step 1: Completed -->
        <li class="relative pb-8">
          <div class="absolute left-4 top-8 bottom-0 w-px bg-[var(--ws-onboarding-accent)]" aria-hidden="true"></div>
          <div class="flex items-center gap-3">
            <span class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-[var(--ws-onboarding-accent)] text-[var(--ws-onboarding-accent-text)]">
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
              </svg>
              <span class="sr-only">Completed:</span>
            </span>
            <span class="text-sm font-medium text-[var(--ws-onboarding-accent)]">Account</span>
          </div>
        </li>
        <!-- Step 2: Active -->
        <li class="relative pb-8" aria-current="step">
          <div class="absolute left-4 top-8 bottom-0 w-px bg-[var(--ws-onboarding-border)]" aria-hidden="true"></div>
          <div class="flex items-center gap-3">
            <span class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-[var(--ws-onboarding-accent)] bg-[var(--ws-onboarding-bg)] text-sm font-semibold text-[var(--ws-onboarding-accent)]">2</span>
            <span class="text-sm font-semibold text-[var(--ws-onboarding-accent)]">Profile</span>
          </div>
        </li>
        <!-- Step 3: Upcoming -->
        <li class="relative pb-8">
          <div class="absolute left-4 top-8 bottom-0 w-px bg-[var(--ws-onboarding-border)]" aria-hidden="true"></div>
          <div class="flex items-center gap-3">
            <span class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] text-sm font-medium text-[var(--ws-onboarding-text-soft)]">3</span>
            <span class="text-sm text-[var(--ws-onboarding-text-soft)]">Preferences</span>
          </div>
        </li>
        <!-- Step 4: Upcoming -->
        <li class="relative">
          <div class="flex items-center gap-3">
            <span class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] text-sm font-medium text-[var(--ws-onboarding-text-soft)]">4</span>
            <span class="text-sm text-[var(--ws-onboarding-text-soft)]">Complete</span>
          </div>
        </li>
      </ol>
    </nav>

    <!-- Form content area -->
    <div class="flex-1">
      <div class="rounded-lg border border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] p-6">
        <h2 class="text-lg font-semibold text-[var(--ws-onboarding-text)]">Complete Your Profile</h2>
        <p class="mt-1 text-sm text-[var(--ws-onboarding-text-soft)]">Tell us a bit about yourself so we can personalize your experience.</p>
        <div class="mt-6 space-y-4">
          <div>
            <label for="v-display-name" class="block text-sm font-medium text-[var(--ws-onboarding-text)]">Display Name</label>
            <input type="text" id="v-display-name" class="mt-1 block w-full rounded-md border border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] px-3 py-2 text-sm text-[var(--ws-onboarding-text)] placeholder-[var(--ws-onboarding-text-soft)] focus:border-[var(--ws-onboarding-accent)] focus:ring-1 focus:ring-[var(--ws-onboarding-accent)]" placeholder="Your name">
          </div>
          <div>
            <label for="v-bio" class="block text-sm font-medium text-[var(--ws-onboarding-text)]">Bio</label>
            <textarea id="v-bio" rows="3" class="mt-1 block w-full rounded-md border border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] px-3 py-2 text-sm text-[var(--ws-onboarding-text)] placeholder-[var(--ws-onboarding-text-soft)] focus:border-[var(--ws-onboarding-accent)] focus:ring-1 focus:ring-[var(--ws-onboarding-accent)]" placeholder="A short bio"></textarea>
          </div>
          <div>
            <label for="v-website" class="block text-sm font-medium text-[var(--ws-onboarding-text)]">Website</label>
            <input type="url" id="v-website" class="mt-1 block w-full rounded-md border border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] px-3 py-2 text-sm text-[var(--ws-onboarding-text)] placeholder-[var(--ws-onboarding-text-soft)] focus:border-[var(--ws-onboarding-accent)] focus:ring-1 focus:ring-[var(--ws-onboarding-accent)]" placeholder="https://example.com">
          </div>
        </div>
      </div>

      <!-- Navigation buttons -->
      <div class="mt-6 flex justify-between">
        <button type="button" class="rounded-md border border-[var(--ws-onboarding-border)] bg-[var(--ws-onboarding-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-onboarding-text)] transition-colors hover:opacity-80">Back</button>
        <button type="button" class="rounded-md bg-[var(--ws-onboarding-accent)] px-4 py-2 text-sm font-medium text-[var(--ws-onboarding-accent-text)] transition-colors hover:opacity-90">Continue</button>
      </div>
    </div>
  </div>
</section>