/* Dialog: finestra con testa fissa e corpo che scorre, sul <dialog> nativo. A tutto schermo sul telefono.
   Lo apre e lo chiude la pagina con showModal()/close() (es. js/valuation.js). */

@layer components {
  .dialog {
    width: min(920px, calc(100% - 32px));
    max-width: none;
    max-height: min(92dvh, 960px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--ground);
    color: var(--ink);
    box-shadow: var(--shadow-menu);
    overflow: hidden;

    &[open] { display: flex; flex-direction: column; }
    &::backdrop { background: var(--scrim); }
  }
  .dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 16px;
    padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 40px) 16px;
    box-shadow: 0 1px 0 var(--line);

    & h2 { font-size: var(--step-lead); }
    & p { margin-top: 6px; max-width: 64ch; color: var(--ink-soft); font-size: var(--step-small); }
    & .round .icon { width: 18px; height: 18px; }
  }
  .dialog-body {
    padding: 24px clamp(20px, 3vw, 40px) clamp(20px, 3vw, 32px);
    overflow-y: auto;
    overscroll-behavior: contain;

    & .msgs { margin-bottom: 20px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .dialog[open] { animation: dialog-pop var(--dur) var(--ease); }
    .dialog[open]::backdrop { animation: dialog-fade var(--dur) var(--ease); }
  }
  @media (max-width: 640px) {
    .dialog { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  }
}

@keyframes dialog-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes dialog-fade { from { opacity: 0; } }