Coach Mark Spotlight

<!--
  Coach mark, scoped to this box. The dim layer is absolute inset-0 INSIDE the
  relative container - it never covers the document. The active row is lifted
  above the dim (z-20) so it reads as spotlit; the callout is width-clamped so it
  cannot overflow a 320px phone. Wire the Back/Next/Skip buttons and role=dialog
  focus handling with JS - see the React/TypeScript tabs.
-->
<div class="relative isolate mx-auto w-full max-w-md overflow-hidden rounded-xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-950">
  <ul class="space-y-2">
    <li class="relative z-20 flex items-center gap-3 rounded-lg border border-blue-500 bg-white px-3 py-2.5 text-sm text-gray-900 ring-2 ring-blue-500 dark:bg-gray-900 dark:text-gray-100">
      <span class="h-2.5 w-2.5 rounded-full bg-gray-300 dark:bg-gray-700" aria-hidden="true"></span>
      Create your workspace
    </li>
    <li class="relative flex items-center gap-3 rounded-lg border border-gray-200 bg-white/70 px-3 py-2.5 text-sm text-gray-600 dark:border-gray-800 dark:bg-gray-900/60 dark:text-gray-400">
      <span class="h-2.5 w-2.5 rounded-full bg-gray-300 dark:bg-gray-700" aria-hidden="true"></span>
      Invite your team
    </li>
    <li class="relative flex items-center gap-3 rounded-lg border border-gray-200 bg-white/70 px-3 py-2.5 text-sm text-gray-600 dark:border-gray-800 dark:bg-gray-900/60 dark:text-gray-400">
      <span class="h-2.5 w-2.5 rounded-full bg-gray-300 dark:bg-gray-700" aria-hidden="true"></span>
      Connect a data source
    </li>
  </ul>

  <div class="absolute inset-0 z-10 rounded-xl bg-gray-950/50" aria-hidden="true"></div>

  <div
    role="dialog"
    aria-modal="true"
    aria-labelledby="coach-title"
    tabindex="-1"
    class="absolute bottom-3 left-1/2 z-30 w-[calc(100%-1.5rem)] max-w-xs -translate-x-1/2 rounded-xl border border-gray-200 bg-white p-4 shadow-xl dark:border-gray-700 dark:bg-gray-900"
  >
    <p class="text-xs font-medium text-blue-600 dark:text-blue-400">Step 1 of 3</p>
    <h3 id="coach-title" class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Create your workspace</h3>
    <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Name it and pick a colour - this is where everything lives.</p>
    <div class="mt-4 flex items-center justify-between gap-2">
      <button type="button" class="rounded-md px-2 py-1.5 text-xs font-medium text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">Skip</button>
      <div class="flex items-center gap-2">
        <button type="button" disabled class="rounded-md border border-gray-300 px-3 py-1.5 text-xs font-semibold text-gray-700 disabled:opacity-40 dark:border-gray-700 dark:text-gray-200">Back</button>
        <button type="button" class="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700">Next</button>
      </div>
    </div>
  </div>
</div>