/* One scrollable screen surrounds each content-sized card. */
dialog.page-dialog {
  inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none;
  padding: 24px 16px; border: 0; border-radius: 0; background: transparent;
  overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; box-shadow: none;
}
dialog.page-dialog[open] { display: flex; flex-direction: column; }
dialog.page-dialog .dialog-surface {
  width: 100%; flex: 0 0 auto; margin: auto; padding: 0; min-width: 0;
  border: 1px solid #e3e9f3; border-radius: var(--card-radius); background: #fff;
  overflow: visible; box-shadow: 0 25px 100px #081c4840;
}
.registration-surface { max-width: 1210px; }
.privacy-surface { max-width: 1012px; }
.poster-surface { max-width: 830px; }
.program-surface { max-width: 1000px; }
.program-dialog[data-program-type="discussion"] .program-surface { max-width: 700px; }
dialog.page-dialog .admin-detail-surface { max-width: 590px; padding: 26px 29px; }
dialog.page-dialog .wizard-shell,
dialog.page-dialog .wizard-main,
dialog.page-dialog .wizard-form {
  display: block; height: auto; min-height: 0; max-height: none; overflow: visible;
}
dialog.page-dialog .wizard-main:has(.wizard-success:not([hidden])) { min-height: 0; }
dialog.page-dialog .wizard-body,
dialog.page-dialog .wizard-success,
dialog.page-dialog .privacy-dialog-content,
dialog.page-dialog .program-detail-content,
dialog.page-dialog .poster-dialog-body {
  height: auto; max-height: none; overflow: visible;
}
dialog.page-dialog .poster-dialog-body { background: transparent; }
dialog.page-dialog .poster-dialog-body img { border-radius: 0; }
dialog.page-dialog .wizard-footer,
dialog.page-dialog .privacy-dialog-footer { border-radius: 0 0 var(--card-radius) var(--card-radius); }
dialog.page-dialog .wizard-header,
dialog.page-dialog .privacy-dialog-header,
dialog.page-dialog .poster-dialog-toolbar,
dialog.page-dialog .program-dialog-toolbar {
  position: sticky; top: -24px; z-index: 2; background: #fff;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
@media (max-width: 700px) {
  dialog.page-dialog { padding: 12px; }
  dialog.page-dialog .wizard-header,
  dialog.page-dialog .privacy-dialog-header,
  dialog.page-dialog .poster-dialog-toolbar,
  dialog.page-dialog .program-dialog-toolbar { top: -12px; }
  dialog.page-dialog .admin-detail-surface { padding: 22px; }
}

/* Draw the close icon geometrically to avoid font baseline offsets. */
.wizard-close, #close-poster, #close-program-detail,
.dialog-heading > .dialog-close, .dialog-heading > .purge-close,
#close-media-preview { position: relative; padding: 0; font-size: 0 !important; flex-shrink: 0; }
:is(.wizard-close, #close-poster, #close-program-detail, .dialog-heading > .dialog-close, .dialog-heading > .purge-close, #close-media-preview)::before,
:is(.wizard-close, #close-poster, #close-program-detail, .dialog-heading > .dialog-close, .dialog-heading > .purge-close, #close-media-preview)::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px;
  border-radius: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg);
}
:is(.wizard-close, #close-poster, #close-program-detail, .dialog-heading > .dialog-close, .dialog-heading > .purge-close, #close-media-preview)::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Shared registration-style close controls for every modal header. */
dialog :is(.wizard-close, #close-poster, #close-program-detail, .dialog-heading > .dialog-close, .dialog-heading > .purge-close, #close-media-preview) {
  display: grid; place-items: center; position: relative; flex: 0 0 34px;
  width: 34px; height: 34px; min-width: 34px; min-height: 34px; max-width: 34px; max-height: 34px;
  padding: 0; border: 0; border-radius: 50%; background: #f0f3f8; color: #687993;
  font-size: 0 !important; line-height: 1; box-shadow: none; cursor: pointer;
}
dialog :is(.wizard-close, #close-poster, #close-program-detail, .dialog-heading > .dialog-close, .dialog-heading > .purge-close, #close-media-preview):hover { color: #122d61; background: #e5eaf3; }
dialog :is(.wizard-close, #close-poster, #close-program-detail, .dialog-heading > .dialog-close, .dialog-heading > .purge-close, #close-media-preview):focus-visible { outline: 2px solid #92b3e2; outline-offset: 3px; }