/* ─── Shared dialog foundation ───────────────────────────────────────────
   One stylesheet for the app's confirm dialogs. Property values are copied
   verbatim from the canonical confirm-dialog cssText in
   js/init/reset-clear.js (chooseEraseAction) so dialogs migrated off
   style.cssText render pixel-identical.

   Consumed by js/ui/ui-dialog.js (window.UiDialog.confirm). The hand-rolled
   confirm-dialog clones (init/reset-clear.js, init/lifecycle.js,
   cloudsync/qr/share-mode-dialog.js, cloudsync/ui/dialogs.js,
   cloudsync/bridges/course-picker.js) migrate to these classes
   incrementally.

   Keyframes (fadeIn / slideUpFull) and the z-index token scale both live in
   main.css. */

/* Full-viewport scrim; flex-centers the card. */
.ui-dialog-scrim {
  position: fixed;
  inset: 0;
  background: rgba(12, 18, 26, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-dialog);
  padding: 16px;
  animation: fadeIn 0.2s ease;
}

.ui-dialog-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: slideUpFull 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ui-dialog-title {
  margin: 0 0 10px 0;
  color: var(--ink);
  font-size: var(--text-2xl);
}

.ui-dialog-msg {
  margin: 0 0 14px 0;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: 1.4;
}

.ui-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-dialog-btn {
  flex: 1 1 120px;
}

/* Button kinds — values match the existing hand-rolled dialogs:
   danger  = reset-clear.js confirm buttons (background:var(--danger);color:white)
   primary = cloudsync/ui/dialogs.js confirm (background:var(--accent);color:#fff;font-weight:700)
   neutral = plain .btn, no overrides.

   Specificity note: the theme micro-contrast passes for inactive .btn
   controls (game-shell.css dark, ui-polish.css light) both match
   `.btn:not(.accent):not(.active):not(.is-open)` at specificity (0,6,0)
   — and (0,7,0) on :hover — which outguns a single kind class. The
   originals were inline style.cssText, so they always won. The extra
   selectors below mirror that specificity (this sheet loads after both)
   so kind buttons keep their semantic colors in both themes, hovered or
   not. */
.ui-dialog-btn--danger,
:root .btn.ui-dialog-btn.ui-dialog-btn--danger:not(.active):not(.is-open),
:root .btn.ui-dialog-btn.ui-dialog-btn--danger:not(.active):not(.is-open):hover {
  background: var(--danger);
  color: white;
}

.ui-dialog-btn--primary,
:root .btn.ui-dialog-btn.ui-dialog-btn--primary:not(.active):not(.is-open),
:root .btn.ui-dialog-btn.ui-dialog-btn--primary:not(.active):not(.is-open):hover {
  background: var(--accent, #4a9eff);
  color: #fff;
  font-weight: 700;
}