Warning Alert Modal

<!--
  A warning is an alertdialog, not a dialog: it interrupted the user with
  something they need to act on. It is not destructive, so there is one button
  and focus lands on it - the single thing this dialog is asking for. Escape
  dismisses. Amber #b45309 on #fef3c7 clears AA; the lighter amber you reach for
  first does not, and this glyph is the only danger signal before the text.
-->
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
  <div class="absolute inset-0 bg-black/50" data-modal-close></div>
  <div
    role="alertdialog"
    aria-modal="true"
    aria-labelledby="warn-modal-title"
    aria-describedby="warn-modal-desc"
    class="relative max-h-[calc(100dvh-2rem)] w-full max-w-sm overflow-y-auto rounded-2xl border border-gray-200 bg-white p-6 text-center shadow-2xl dark:border-gray-800 dark:bg-gray-900"
  >
    <div class="inline-flex h-12 w-12 items-center justify-center rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300" aria-hidden="true">
      <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
        <path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
      </svg>
    </div>
    <h2 id="warn-modal-title" class="mt-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
      Your session is about to expire
    </h2>
    <p id="warn-modal-desc" class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
      You have been inactive for a while. Save your work now to avoid losing unsaved changes.
    </p>
    <div class="mt-6">
      <button
        type="button"
        data-modal-close
        class="w-full rounded-lg bg-amber-500 px-4 py-2 text-sm font-semibold text-white hover:bg-amber-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-amber-400 dark:focus-visible:ring-offset-gray-900"
      >
        Got it
      </button>
    </div>
  </div>
</div>