/* Shared modal viewport layout
   - keep every native dialog aligned near the top
   - reserve a consistent top gap
   - scroll inside the dialog when its content exceeds the viewport */
:root {
  --admin-modal-top-gap: 50px;
  --admin-modal-bottom-gap: 16px;
}

dialog[open] {
  top: var(--admin-modal-top-gap);
  bottom: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-height: calc(100dvh - var(--admin-modal-top-gap) - var(--admin-modal-bottom-gap));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Let review content use the dialog itself as the scroll container. */
dialog[open].completion-review-dialog > .completion-review-shell {
  max-height: none;
  overflow: visible;
}

@supports not (height: 100dvh) {
  dialog[open] {
    max-height: calc(100vh - var(--admin-modal-top-gap) - var(--admin-modal-bottom-gap));
  }
}

@media (max-width: 900px) {
  :root {
    --admin-modal-top-gap: 50px;
    --admin-modal-bottom-gap: 12px;
  }
}