/*
 * modal -- Dialog über der Seite, der die Bedienung anhält, bis er beantwortet
 * ist. Sitzt auf einem <dialog>: Fokusfalle, Escape und die Fläche darüber
 * (::backdrop) bringt der Browser mit, geöffnet wird mit showModal().
 * modal__head trägt Überschrift und Schließen-Knopf, modal__body den Inhalt,
 * modal__actions die Knöpfe am Fuß.
 * Ein Zustand: offen -- das Attribut [open] setzt der Browser selbst.
 */

.modal {
  /* dialog bringt eigene Voreinstellungen für Rand, Farbe und Breite mit;
     margin: auto von dort zentriert den Kasten und bleibt stehen */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  inline-size: min(28rem, calc(100vw - 2 * var(--page-gutter)));
  max-block-size: calc(100svh - 2 * var(--space-6));
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-large);
  background-color: var(--color-background);
  color: var(--color-text);
  box-shadow: var(--shadow-medium);
}

/* Geschlossen ist ein dialog display: none -- ohne diese Zeile bliebe der
   Kasten durch das display: flex oben immer sichtbar */
.modal:not([open]) {
  display: none;
}

/* Bewegt wird mit @keyframes und nicht mit transition -- die Begründung steht
   in drawer.css, die Mechanik ist dieselbe: [open] fährt ein, [data-leaving]
   fährt aus, und geschlossen wird erst im animationend. */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(var(--space-3));
  }
}

@keyframes modalFadeOut {
  to {
    opacity: 0;
    transform: translateY(var(--space-3));
  }
}

@keyframes modalBackdropFadeIn {
  from {
    opacity: 0;
  }
}

@keyframes modalBackdropFadeOut {
  to {
    opacity: 0;
  }
}

.modal[open] {
  animation: modalFadeIn var(--transition-fast);
}

.modal[data-leaving] {
  animation-name: modalFadeOut;
  animation-fill-mode: forwards;
}

.modal[open]::backdrop {
  background-color: var(--color-scrim);
  animation: modalBackdropFadeIn var(--transition-fast);
}

.modal[data-leaving]::backdrop {
  animation-name: modalBackdropFadeOut;
  animation-fill-mode: forwards;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  min-height: var(--tap-target);
}

.modal__title {
  font-size: var(--font-size-large);
}

/* Der Inhalt trägt das Scrollen, nicht der ganze Dialog -- so bleiben
   Überschrift und Knöpfe an ihrem Platz */
.modal__body {
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
}