/* Modal nativo — modules/dialog.js
   <dialog class="dialog"><button class="dialog__close" data-dialog-close>…</button> … </dialog> */

.dialog {
  width: min(40rem, calc(100% - 2 * var(--gutter, 1rem)));
  max-height: calc(100dvh - 2rem);
  padding: var(--sp-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--c-bg);
  color: var(--c-text);
  box-shadow: 0 2rem 5rem rgb(15 18 64 / .3);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dialog::backdrop { background: rgb(15 18 64 / .6); backdrop-filter: blur(4px); }

.dialog[open] { animation: dialog-in var(--dur-base, .4s) var(--ease-glide) both; }
.dialog[open]::backdrop { animation: dialog-fade var(--dur-base, .4s) var(--ease-out) both; }
@keyframes dialog-in { from { opacity: 0; translate: 0 1.5rem; } }
@keyframes dialog-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dialog[open], .dialog[open]::backdrop { animation: none; } }

.dialog__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.dialog__close:hover { background: var(--c-bg-soft); }
.dialog__close svg { width: 1.1rem; height: 1.1rem; }
.dialog__title { font-weight: var(--fw-light); padding-right: 3rem; }
.dialog__title strong { font-weight: var(--fw-semibold); }
.dialog__text { margin-block: var(--sp-2) var(--sp-4); color: var(--c-text-muted); }