/* Fit the visible mobile viewport; scrolling must never hide the close control. */
#projects-dialog.project-dialog-ready {
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom));
  overflow: hidden;
}
#projects-dialog.project-dialog-ready .dialog-inner {
  --project-height: 88vh;
  --project-height: 88dvh;
  max-height: var(--project-height);
  max-height: min(var(--project-height), calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  overflow: hidden;
}
#projects-dialog .project-dialog-content {
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#projects-dialog .project-dialog-content::-webkit-scrollbar {
  width: 3px;
  background-color: rgba(243, 246, 250, 0.85);
}
#projects-dialog .project-dialog-content::-webkit-scrollbar-thumb { background-color: #0c4587; }
#projects-dialog #project-close-btn {
  background-color: #0c4587;
  opacity: 1;
}
#projects-dialog #project-close-btn::before {
  content: "";
  position: absolute;
  inset: -7px;
}
@media (max-width: 991px) {
  #projects-dialog.project-dialog-ready .dialog-inner { --project-height: 92vh; --project-height: 92dvh; }
}
@media (max-width: 575px) {
  #projects-dialog.project-dialog-ready .dialog-inner { --project-height: 95vh; --project-height: 95dvh; }
}