/* Dialog
 * The one modal look for the whole app: confirmations, notices, and the
 * delete-account flow. dialog.js builds the confirm and notice kinds; a page
 * that needs more than a question and two buttons writes its own <dialog
 * class="dialog"> and gets the same frame.
 *
 * A native <dialog> for the same reasons as the drawer: focus trapping, Esc
 * and an inert page behind it come from the browser.
 *
 * This replaced window.confirm() and window.alert(), which cannot be styled
 * and look like the browser interrupting rather than the app asking.
 */

.dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
/* Same scrim as the navigation drawer, so the two read as one family. */
.dialog::backdrop { background: rgba(0, 0, 0, .45); }

.dialog-inner { padding: 24px; display: grid; gap: 12px; }

.dialog-title {
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  margin: 0;
}
.dialog-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.dialog-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

/* Links in the prose only; a button-styled link keeps its own colours. */
.dialog-text a, .dialog-note a { color: var(--accent-ink); }
.dialog .navprimary { text-align: center; }

/* The button row. Cancel sits first in the markup so it is what the browser
   focuses when the dialog opens: pressing Enter by reflex should never be the
   destructive choice. */
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
/* A notice has one button; it goes to the right, where the action always is. */
.dialog-actions-single { justify-content: flex-end; }

@media (prefers-reduced-motion: no-preference) {
  .dialog[open] { animation: dialog-in .16s ease-out; }
  @keyframes dialog-in {
    from { opacity: 0; translate: 0 8px; }
    to   { opacity: 1; translate: 0 0; }
  }
}

@media (max-width: 480px) {
  .dialog-inner { padding: 20px; }
  /* Stacked, with the action on top and Cancel beneath — the same order the
     account page's button rows take on a phone. */
  .dialog-actions { flex-direction: column-reverse; align-items: stretch; }
}