/*
 * Finestra modale (<dialog> aperto con showModal): intestazione con titolo e chiudi, corpo che scorre, piede fisso.
 * Desktop: centrata; sotto i 768px a tutto schermo, entra dal basso. Senza JS (html:not(.js)) diventa una normale
 * sezione della pagina, così il contenuto resta raggiungibile.
 * Markup: dialog.dialog-sheet > .dialog-sheet__head (h2.dialog-sheet__title + .dialog-sheet__close) + __body + __foot.
 */
@layer components {
  .dialog-sheet {
    width: min(var(--dialog-sheet-w, 880px), 100vw - 48px); max-width: none;
    max-height: min(90dvh, 960px); padding: 0; border: 0; overflow: hidden;
    border-radius: var(--radius-xl); background: var(--color-bg); color: var(--color-ink);
    box-shadow: 0 24px 64px rgb(0 0 0 / 0.25);
    &::backdrop { background: rgb(20 35 29 / 0.55); }
    &[open] { display: flex; flex-direction: column; animation: dialog-sheet-in .28s cubic-bezier(.2, .8, .2, 1); }
  }
  body:has(.dialog-sheet[open]) { overflow: hidden; }

  .dialog-sheet__head {
    position: relative; flex: none; display: flex; align-items: center; justify-content: center;
    min-height: 68px; padding: 12px 64px; border-bottom: 1px solid var(--color-line);
  }
  .dialog-sheet__title { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
  .dialog-sheet__close {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; background: transparent; color: var(--color-ink);
    &:hover { background: var(--color-surface); }
  }
  .dialog-sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 32px 32px; }
  .dialog-sheet__foot {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 24px; border-top: 1px solid var(--color-line); background: var(--color-bg);
  }

  @keyframes dialog-sheet-in { from { opacity: 0; transform: translateY(24px); } }

  @media (max-width: 767px) {
    .dialog-sheet {
      width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; border-radius: 0;
      &[open] { animation-name: dialog-sheet-up; }
    }
    .dialog-sheet__body { padding: 20px var(--gutter) 28px; }
    .dialog-sheet__foot { padding: 12px var(--gutter); }
    @keyframes dialog-sheet-up { from { transform: translateY(100%); } }
  }

  /* Senza JS: sezione normale */
  html:not(.js) .dialog-sheet {
    position: static; display: block; width: auto; max-height: none; margin: 0; overflow: visible;
    border-radius: 0; box-shadow: none; border-top: 1px solid var(--color-line);
    & .dialog-sheet__body { overflow: visible; }
  }
}