/* Only the pre-registration quiz and form own this viewport. Leaving the flow
   removes the document lock; the cabinet and ceremony keep their own layout. */
html:has(.enrollment-viewport),
body:has(.enrollment-viewport),
#root:has(.enrollment-viewport) {
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body:has(.enrollment-viewport) { margin: 0; }

/* Extra specificity is intentional: Admission and Enrollment are separate
   lazy stylesheets and may arrive in either order. */
.enrollment-page.enrollment-viewport.registration-page.admission-registration,
.enrollment-page.enrollment-viewport.sorting-quiz-page {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  min-width: 0;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

/* Real overflow (keyboard, zoom, long errors) belongs to the card, not the
   document. Never hide the scrollbar or clip fields to simulate fitting. */
.enrollment-page.enrollment-viewport .admission-form-panel,
.enrollment-page.enrollment-viewport .sorting-quiz-card {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
.enrollment-page.enrollment-viewport.registration-page .admission-story {
  display: grid;
  min-height: 0;
  max-height: 100%;
  gap: 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.enrollment-page.enrollment-viewport.sorting-quiz-page aside {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* On tablets/phones, the form is the page: don't stack a second welcome
   screen and four large crests above or below it. */
@media (max-width: 1050px) {
  .enrollment-page.enrollment-viewport.registration-page.admission-registration {
    grid-template-columns: minmax(0, 640px);
    gap: 0;
  }
  .enrollment-page.enrollment-viewport.registration-page .admission-story {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .enrollment-page.enrollment-viewport.registration-page .admission-form-panel { grid-row: 1; }
}
@media (max-width: 850px) {
  .enrollment-page.enrollment-viewport.sorting-quiz-page { grid-template-rows: auto minmax(0, 1fr); }
  .enrollment-page.enrollment-viewport.sorting-quiz-page aside { max-height: 30vh; max-height: 30dvh; }
}
@media (max-width: 760px) {
  .enrollment-page.enrollment-viewport.registration-page .admission-form-panel { padding: 16px; }
  .enrollment-page.enrollment-viewport.registration-page .identity-name-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .enrollment-page.enrollment-viewport.registration-page .admission-form-panel > .enrollment-eyebrow,
  .enrollment-page.enrollment-viewport.registration-page .admission-form-panel > p:not(.enrollment-privacy) { display: none; }
  .enrollment-page.enrollment-viewport.registration-page .admission-form-panel h2 { font-size: 26px; }
}
@media (max-width: 360px) {
  .enrollment-page.enrollment-viewport.registration-page .identity-name-row { grid-template-columns: minmax(0, 1fr); }
}