/* Dialog: the shell the dialog components share (otp-dialog.html, confirm-dialog.html). A
   <dialog class="dialog"> opened with showModal() holds a .dialog-card, and the page behind it dims
   and blurs. The dialog grows into place as it opens and shrinks away the same way as it closes, while
   the dimming fades in and out with it. */
.dialog { width: min(440px, calc(100% - 2rem)); max-width: none; padding: 0; overflow: visible; border: 0; border-radius: 20px; color: var(--ink); background: transparent; transition: opacity .2s, transform var(--spring-duration) var(--spring); }
.dialog::backdrop { background: rgb(13 30 35 / 58%); backdrop-filter: blur(4px); transition: opacity .2s; }
.dialog-card { position: relative; padding: 2rem; border: 1px solid rgb(255 255 255 / 70%); border-radius: 20px; background: var(--surface); box-shadow: 0 24px 80px rgb(10 38 42 / 24%); text-align: center; }
@starting-style {
  .dialog[open] { opacity: 0; transform: var(--materialize); }
  .dialog[open]::backdrop { opacity: 0; }
}
/* Closing runs the opening backwards. It needs the overlay property, which keeps the dialog above the
   page while it fades out; browsers without it close the dialog at once. */
@supports (overlay: auto) {
  .dialog { transition: opacity .2s, transform var(--spring-duration) var(--spring), overlay .2s allow-discrete, display .2s allow-discrete; }
  .dialog::backdrop { transition: opacity .2s, overlay .2s allow-discrete, display .2s allow-discrete; }
  .dialog:not([open]) { opacity: 0; transform: var(--materialize); pointer-events: none; }
  .dialog:not([open])::backdrop { opacity: 0; }
}
@media (max-width: 480px) {
  .dialog-card { padding: 1.6rem 1.25rem 1.25rem; }
}