/* gd-dialog: the modal primitive, on native <dialog>.

   The browser owns layering (top layer, so no z-index here), inertness and
   focus. This file owns paint only -- tokens, never raw values, so a venue
   accent swap re-tints it with no code change. */

gd-dialog { display: contents; }

/* The element itself is the hit target for backdrop clicks, so it must fill
   the viewport rather than shrink-wrap the card. */
gd-dialog .dlg {
  border: 0; padding: 0; background: none; color: var(--ink);
  max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
gd-dialog .dlg:not([open]) { display: none; }
gd-dialog .dlg::backdrop {
  background: var(--scrim);
  backdrop-filter: blur(var(--blur-veil));
}

gd-dialog .dlg-card {
  width: 100%; max-width: 480px;
  background: linear-gradient(180deg, var(--sheet-tint-top), var(--sheet-tint-bottom));
  border: 1px solid var(--accent-soft-border); border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--gap-grid) 22px calc(18px + env(safe-area-inset-bottom));
  animation: gd-dialog-up var(--dur-sheet) var(--ease-out);
}
@keyframes gd-dialog-up { from { transform: translateY(100%); } }

gd-dialog .dlg-title { margin: 0;
  font: 500 var(--type-title-lg)/1.2 var(--font-display); color: var(--ink); }
gd-dialog .dlg-body { margin: 8px 0 0;
  font: var(--type-ui)/1.55 var(--font-ui); color: var(--ink-2); }
gd-dialog .dlg-actions { margin-top: var(--gap-grid); }

/* DANGER TONE. --garnet has meant "errors and destructive marks" since the
   first tokens file and no destructive action had ever used it -- the whole
   reason a delete confirmation and a save confirmation were rendering as the
   same gold button (operator handset, 2026-07-25).

   The destructive action is a BORDERED garnet control, not a filled one, and
   it is deliberately quieter than the safe primary beside it. Apple HIG and
   Material agree on the shape: the destructive choice is recognisable, and
   it is never the visual default. */
gd-dialog .btn.danger {
  background: var(--garnet-wash);
  border: 1px solid var(--garnet-ink);
  color: var(--garnet-ink);
  font-weight: 600;
}
gd-dialog .btn.danger:active { background: var(--garnet); color: var(--ink); }
gd-dialog .btn.danger[disabled] { opacity: .45; cursor: default; }

/* A danger-toned dialog says what it is before the guest reads a word. */
gd-dialog .dlg.tone-danger .dlg-card { border-color: var(--garnet-ink); }

@media (prefers-reduced-motion: reduce) {
  gd-dialog .dlg-card { animation: none; }
}

/* Desktop: a centred dialog rather than a sheet riding the bottom edge. */
@media (min-width: 900px) {
  gd-dialog .dlg { align-items: center; }
  gd-dialog .dlg-card {
    border-bottom: 1px solid var(--accent-soft-border);
    border-radius: var(--radius-card);
    padding-bottom: var(--gap-grid);
    animation: none;
  }
}