/* Structural variants belong here; feature templates own their content and form boundaries. */
dialog.modal[data-modal-variant] > .modal-box {
  width: calc(100% - 2rem);
  max-width: 32rem;
  max-height: 90vh;
  max-height: 90dvh;
  padding: 1rem;
  overflow-y: auto;
}
dialog.modal[data-modal-variant="confirmation"] > .modal-box { max-width: 28rem; }
dialog.modal[data-modal-variant="wide-form"] > .modal-box { max-width: 42rem; }
dialog.modal[data-modal-variant="workspace"] > .modal-box { max-width: 48rem; }
dialog.modal[data-modal-variant="selector"] > .modal-box,
dialog.modal[data-modal-variant="preview"] > .modal-box { max-width: 56rem; }
dialog.modal[data-modal-variant="preview"] > .modal-box,
dialog.modal[data-modal-variant="fullscreen"] > .modal-box {
  display: flex;
  flex-direction: column;
  height: 90vh;
  height: 90dvh;
}
dialog.modal[data-modal-variant] .modal-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}
dialog.modal[aria-busy="true"] > .modal-box :is(button, input, select, textarea) {
  pointer-events: none;
  opacity: .6;
}
@media (min-width: 48rem) {
  dialog.modal[data-modal-variant] > .modal-box { padding: 1.5rem; }
}
dialog.modal[data-modal-variant="fullscreen"] > .modal-box {
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  padding: 0;
  margin: 0;
  border-radius: 0;
}