/*
 * dialogs.css
 * Dialog = surface + native <dialog> sizing + backdrop.
 *
 * Built on the native <dialog> element — focus trap, escape-to-close,
 * and stacking are platform-provided. Visual treatment comes from
 * surface.css; tones tint the surface-header via the shared recipe.
 *
 * Open via element.showModal(); close via element.close().
 */

.dialog {
  width:     90%;
  max-width: 480px;
  padding:   0;            /* sub-regions own their padding */
  box-shadow: var(--shadow-lg);
  --overlay-from: scale(0.97);
}

.dialog::backdrop {
  background:      var(--scrim);
  backdrop-filter: blur(2px);
}

/* Close button — small ✕ in the top-right of surface-header */
.dialog-close {
  background:    transparent;
  border:        none;
  font-size:     var(--text-2xl);
  line-height:   1;
  color:         var(--ink-mute);
  cursor:        pointer;
  padding:       var(--space-3xs) var(--space-xs);
  border-radius: 4px;
}
.dialog-close:hover {
  color:      var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

/*
 * Toned dialogs tint the header, not the whole modal body.
 *
 * Resetting the three tint variables to `initial` re-fires the untoned
 * fallbacks in surface.css, so the body stays neutral — and because this
 * touches the tint vars rather than --surface-bg directly, .outlined and
 * .ghost still work on a dialog.
 *
 * The header can't read --bg-mix itself: tones are element-scoped (see
 * the @property registration in tones.css), so the dialog derives the
 * header's three colors here and passes them down as inheriting
 * properties. No tone names appear, so all seven tones work.
 */
.dialog {
  --surface-tint-bg:     initial;
  --surface-tint-border: initial;
  --surface-tint-color:  initial;

  /*
   * The modal's own ground. Assigned to --surface-ground and not to
   * --surface-bg: the .outlined and .ghost treatments set --surface-bg in
   * surface.css's base layer, and this file is a later one, so writing it
   * here would beat both variants on every dialog.
   */
  --surface-ground: var(--dialog-bg, var(--surface));

  --dialog-header-bg:     color-mix(in srgb, var(--bg-mix) 10%, var(--surface));
  --dialog-header-color:  color-mix(in srgb, var(--bg-mix) 55%, var(--ink));
  --dialog-header-border: color-mix(in srgb, var(--bg-mix) 30%, var(--surface));
}
.dialog > .surface-header {
  background:          var(--dialog-header-bg,     transparent);
  color:               var(--dialog-header-color,  var(--surface-color));
  border-bottom-color: var(--dialog-header-border, var(--surface-border));
}