/* The dialog that replaced window.confirm.
 *
 * Last in the cascade on purpose — the filename decides the order here, and
 * this has to win over the global `button` rule and anything a page sets on a
 * form. See confirm_dialog.js for what fills it in.
 *
 * Deliberately small and quiet. It is asking one question about one thing, and
 * a wide panel with an icon and a coloured banner treats "delete a draft quote"
 * as an emergency, which is how people learn to dismiss it without reading. */
.confirm {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

/* Dimmed rather than blacked out: the row somebody is acting on should still
   be visible behind the question, because it is the answer to "which one". */
.confirm::backdrop {
  background: rgba(23, 25, 26, .38);
}

.confirm-body {
  display: block;
  padding: 22px 22px 18px;
  margin: 0;
}

.confirm-title {
  margin: 0;
  font: 600 16px/1.35 var(--ui);
  color: var(--ink);
}

.confirm-text {
  margin: 8px 0 0;
  font: 400 14px/1.55 var(--ui);
  color: var(--ink-2);
}

/* `hidden` is set by the script when the message was a single sentence, and a
   display rule here would beat it — the trap this codebase has hit before. */
.confirm-text[hidden] { display: none; }

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* The global `button` rule paints a dark pill and repaints it on hover; the
   two here are ordinary app buttons and inherit that correctly. What they must
   not inherit is a form's own layout, since the dialog's <form> is only there
   to make method="dialog" work. */
.confirm-actions .button { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .confirm[open] { animation: confirm-in 120ms ease-out; }
  .confirm[open]::backdrop { animation: confirm-fade 120ms ease-out; }
}

@keyframes confirm-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes confirm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}