/* The dialog that replaced the browser's `confirm()` and `alert()`.
   Markup is built by js/dialog.js; the toasts it can also raise are the
   flashed-message ones in flash.css, so a notice from the server and one from
   the page look the same. */

.cd-back {
  position: fixed;
  inset: 0;
  z-index: 4000;               /* over the sticky dialog bar, the toasts and the support widget */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 24, 38, .48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .18s ease;
}
.cd-back.in { opacity: 1; }
.cd-back.go { opacity: 0; }

.cd-panel {
  width: 100%;
  max-width: 420px;
  background: var(--c-card, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(10, 22, 38, .28);
  overflow: hidden;
  transform: translateY(8px) scale(.98);
  transition: transform .18s ease;
}
.cd-back.in .cd-panel { transform: none; }

.cd-head { display: flex; gap: 14px; padding: 20px 20px 4px; }

/* The icon tile, tinted by what is being asked. This is the part the browser
   could not do: its dialog looked the same whether it was asking to refresh a
   list or to delete somebody's account. */
.cd-ic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.cd-panel.info   .cd-ic { background: var(--c-info-bg, #f3effe); color: var(--c-info-ink, #6d3fd1); }
.cd-panel.ok     .cd-ic { background: var(--c-ok-bg, #e8f6ee);   color: var(--c-ok-ink, #1f9254); }
.cd-panel.warn   .cd-ic { background: var(--c-warn-bg, #fdf3e3); color: var(--c-warn-ink, #8a5a12); }
.cd-panel.danger .cd-ic { background: var(--c-bad-bg, #fdecec);  color: var(--c-bad-ink, #c0392b); }

.cd-body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }

/* !important on the colour because theme.css repaints every heading in night
   mode, the same reason dialog-head.css carries one. */
.cd-title {
  margin: 0 0 5px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--c-ink-strong, #111827) !important;
}
.cd-line {
  margin: 0 0 7px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-ink-2, #41526a);
  overflow-wrap: anywhere;
}
.cd-line:last-child { margin-bottom: 0; }

.cd-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 20px 20px;
}
.cd-btn {
  border: none;
  border-radius: 9px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  min-width: 92px;
}
.cd-btn:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.cd-btn-primary { background: var(--c-btn, #6d3fd1); color: #fff; }
.cd-btn-primary:hover { background: var(--c-btn-hover, #5b32b8); }
.cd-btn-danger  { background: var(--c-bad-ink, #c0392b); color: #fff; }
.cd-btn-danger:hover { filter: brightness(1.08); }
.cd-btn-ghost   { background: var(--c-inset2, #eef1f5); color: var(--c-ink-2, #41526a); }
.cd-btn-ghost:hover { background: var(--c-line, #e2e8f0); }

@media (max-width: 420px) {
  .cd-foot { flex-direction: column-reverse; }
  .cd-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-back, .cd-panel { transition: none; }
}