/* ==========================================================================
   Confirmation dialog — stands in for the browser's confirm box
   ========================================================================== */

/* A native <dialog>, so it is the browser putting this in the top layer: no
   z-index of ours competes with the drawer or the tab strip while it is open.

   `margin: auto` is what centres a modal dialog, and it comes from the browser's
   own stylesheet — which the reset at the top of application.css wipes with
   `* { margin: 0 }`. Without it back the dialog sits in the page's top corner. */
.confirm-dialog {
  margin: auto;
  padding: 0;
  border: none;
  background: none;
  max-width: min(30rem, calc(100vw - var(--space-8)));
  color: var(--color-text);
  overflow: visible;
}

.confirm-dialog::backdrop {
  background-color: rgba(15, 30, 45, 0.4);
  backdrop-filter: blur(3px);
  animation: confirm-dialog-backdrop-in var(--transition-base);
}

.confirm-dialog[open] .confirm-dialog__panel {
  animation: confirm-dialog-in var(--transition-slow);
}

.confirm-dialog__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.confirm-dialog__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.confirm-dialog__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-danger);
  background-color: var(--tint-danger-10);
}

.confirm-dialog__icon[hidden] {
  display: none;
}

.confirm-dialog__title {
  margin: 0;
  font-family: var(--font-family-bold);
  font-size: var(--font-size-large);
  color: var(--color-primary-dark);
}

.confirm-dialog__message {
  margin: 0;
  /* Indented to line up with the title rather than the icon, so the two read as
     one block. */
  padding-left: calc(36px + var(--space-3));
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.confirm-dialog__message[hidden] {
  display: none;
}

.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

@keyframes confirm-dialog-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes confirm-dialog-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}