Expired Link Error

<!--
  The error state for a stale or used reset link. The warning glyph is amber and
  aria-hidden; the heading carries the meaning. The primary action is Request a
  new link, so the flow never dead-ends here.
-->
<div class="mx-auto w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-6 text-center shadow-sm sm:p-8 dark:border-gray-800 dark:bg-gray-950">
  <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-amber-50 text-amber-600 dark:bg-amber-950 dark:text-amber-400" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-6 w-6"><path d="M12 9v4" /><path d="M12 17h.01" /><path d="M10.3 3.9 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" /></svg>
  </span>
  <h1 class="mt-4 text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">This link has expired</h1>
  <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Reset links are valid for 30 minutes. Request a fresh one and we'll email it right over.</p>

  <button type="button" class="mt-6 w-full rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
    Request a new link
  </button>

  <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">
    <a href="#" class="font-medium text-blue-600 hover:text-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-blue-400 dark:focus-visible:ring-blue-400">Back to sign in</a>
  </p>
</div>