/* modal.css - gedeelde, STABIELE modal-basis (additieve opt-in utility, B-88).
   Een bespoke modal neemt de stabiele maat over door .modal-venster (+ een tier)
   NAAST zijn eigen __venster-klasse te zetten; de bestaande BEM-namen, de scrim,
   de kop/body/voet-opmaak en de focus-trap/Esc-logica blijven ongemoeid.

   Deze utility bepaalt ALLEEN: breedte, hoogte en het flex-kolom-frame + de clip,
   zodat alleen de body intern scrollt (kop en voet staan stil = geen "spring" bij
   tabwissel, async laden of meerstaps). Ze zet bewust GEEN position/z-index, zodat
   de eigen plaatsing (flex-center, top:12vh, margin-top, ...) en de z-index-stack
   van elke modal intact blijven.

   Opt-in, twee handgrepen per modal:
     1) markup: class="<bespoke>__venster modal-venster modal-venster--groot"
        en markeer de scrollende inhoud-div met .modal-body (of geef de eigen
        body-div: flex:1 1 auto; min-height:0; overflow-y:auto).
     2) css: schrap op het bespoke __venster de eigen width/height/max-height/
        display:flex/overflow (die levert deze utility nu).
   Een afwijkende maat zet je als LOKALE token op het venster, bv.
     .pl-modal { --modal-w-groot: min(760px, 100%); }
   zodat de churn per modal een of twee declaraties blijft. Vlakke kaart
   (1px-rand + schaduw), geen accentbalk. De tokens staan in styles/tokens.css. */

/* Het frame: flex-kolom, overflow verborgen zodat alleen de body scrollt.
   Standaardmaat = groot, zodat een vergeten tier nooit een piepklein venster geeft. */
.modal-venster {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--modal-radius, var(--radius));
  box-shadow: var(--modal-schaduw, var(--shadow));
  width: var(--modal-w-groot);
  height: clamp(
    var(--modal-h-min, 360px),
    var(--modal-h-groot, 88vh),
    calc(100dvh - var(--modal-marge, 8vh))
  );
}

/* Tiers: een vaste maat = een stilstaand venster. */
.modal-venster--klein {
  width: var(--modal-w-klein);
  /* klein: GEEN vaste height; alleen anti-krimp + viewport-plafond */
  height: auto;
  min-height: var(--modal-minh-klein, 180px);
  max-height: calc(100dvh - var(--modal-marge, 8vh));
}
.modal-venster--middel {
  width: var(--modal-w-middel);
  height: clamp(
    var(--modal-h-min, 360px),
    var(--modal-h-middel, 70vh),
    calc(100dvh - var(--modal-marge, 8vh))
  );
}
.modal-venster--groot {
  width: var(--modal-w-groot);
  height: clamp(
    var(--modal-h-min, 360px),
    var(--modal-h-groot, 88vh),
    calc(100dvh - var(--modal-marge, 8vh))
  );
}
.modal-venster--breed {
  width: var(--modal-w-breed);
  height: clamp(
    var(--modal-h-min, 360px),
    var(--modal-h-breed, 88vh),
    calc(100dvh - var(--modal-marge, 8vh))
  );
}

/* De ENIGE scroller binnen een tier-venster. Markeer de body met .modal-body, of
   laat het component zijn eigen body-klasse deze drie regels geven. min-height:0
   is cruciaal: zonder dat groeit de body i.p.v. te scrollen (de klassieke
   flexbox-overflow-valkuil). */
.modal-venster > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Smal scherm: elke VASTE tier valt terug op bijna-schermvullend; nul extra werk
   per modal. De kleine dialoog blijft compact (alleen iets bredere marge). */
@media (max-width: 640px) {
  .modal-venster--middel,
  .modal-venster--groot,
  .modal-venster--breed {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .modal-venster--klein { width: calc(100vw - 24px); }
}