Refactor admin modals: replace backdrop divs with native <dialog> elements for improved accessibility and functionality

src/scss/components/_admin-modal.scss

@@ -1,49 +1,62 @@
 /* ---------- admin modal dialogs ---------- */
-.admin-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(15, 12, 10, 0.8);
-  backdrop-filter: blur(0.25rem);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1.5rem;
-  opacity: 0;
-  pointer-events: none;
-  // Closed modals must be visibility: hidden, not just transparent —
-  // otherwise their fields stay focusable and Safari offers saved logins
-  // for an invisible Username field. The visibility switch waits for the
-  // fade-out to finish so the close animation still plays.
-  visibility: hidden;
-  transition: opacity .2s ease, visibility 0s linear .2s;
-}
-
-.admin-modal-backdrop.is-open {
-  opacity: 1;
-  pointer-events: auto;
-  visibility: visible;
-  transition: opacity .2s ease, visibility 0s;
-}
-
+/* Native <dialog> modals. The browser handles the overlay (::backdrop),
+   focus trapping, inertness of the page behind, and Esc. A closed dialog
+   is display: none, so its fields can't hold focus or trigger autofill.
+   Open/close fades rely on @starting-style for the entry and
+   allow-discrete to keep display and overlay alive through the exit. */
 .admin-modal {
   background: var(--surface);
+  color: inherit;
   border: 1px solid var(--rule);
   border-radius: 0.25rem;
-  width: 100%;
+  width: calc(100% - 3rem);
   max-width: 36rem;
   max-height: 90vh;
+  margin: auto;
   overflow-y: auto;
   padding: 2rem;
   box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
+  opacity: 0;
   transform: translateY(0.75rem);
-  transition: transform .2s ease;
+  transition:
+    opacity .2s ease,
+    transform .2s ease,
+    overlay .2s ease allow-discrete,
+    display .2s ease allow-discrete;
 }
 
-.admin-modal-backdrop.is-open .admin-modal {
+.admin-modal[open] {
+  opacity: 1;
   transform: translateY(0);
 }
 
+.admin-modal::backdrop {
+  background-color: rgba(15, 12, 10, 0);
+  backdrop-filter: blur(0);
+  transition:
+    background-color .2s ease,
+    backdrop-filter .2s ease,
+    overlay .2s ease allow-discrete,
+    display .2s ease allow-discrete;
+}
+
+.admin-modal[open]::backdrop {
+  background-color: rgba(15, 12, 10, 0.8);
+  backdrop-filter: blur(0.25rem);
+}
+
+@starting-style {
+  .admin-modal[open] {
+    opacity: 0;
+    transform: translateY(0.75rem);
+  }
+
+  .admin-modal[open]::backdrop {
+    background-color: rgba(15, 12, 10, 0);
+    backdrop-filter: blur(0);
+  }
+}
+
 .modal-header {
   display: flex;
   justify-content: space-between;