/* QPal responsive popup boundary and centering.
   Popup height is measured from the live Set A row to the Quick Insights
   footer. Modal overlays are centered on every screen, blur the background,
   and hide the dashboard dock while open. */

:root {
  --qpal-popup-max-height: calc(
    100dvh - max(16px, env(safe-area-inset-top, 0px)) -
    max(16px, env(safe-area-inset-bottom, 0px))
  );
}

.qpal-popup-height-limited {
  box-sizing: border-box !important;
  max-height: var(--qpal-popup-max-height) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.qpal-popup-centered-overlay,
.qpal-dock-page-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 4700 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  box-sizing: border-box !important;
  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)) !important;
  overflow: auto !important;
  backdrop-filter: blur(10px) saturate(92%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(92%) !important;
  overscroll-behavior: contain;
}

.qpal-popup-centered-overlay > *,
.qpal-popup-centered-overlay > .qpal-popup-height-limited,
.qpal-popup-centered-overlay > dialog,
.qpal-dock-page-modal-overlay > .qpal-dock-page-modal-panel {
  align-self: center !important;
  justify-self: center !important;
  margin: auto !important;
}


.qpal-dock-page-modal-overlay {
  background: rgba(5, 4, 3, .7) !important;
}

body.qpal-popup-modal-open .qpal-dashboard-dock {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


.qpal-dashboard-modal-snapshot {
  position: fixed;
  inset: 0;
  z-index: 4600;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.qpal-dashboard-modal-snapshot,
.qpal-dashboard-modal-snapshot * {
  pointer-events: none !important;
}

/* Content Library keeps its heading and tabs visible while only the long list
   uses the remaining measured height. */
.qpal-shared-library-dialog,
.qpal-shared-library-dialog.qpal-popup-height-limited {
  max-height: var(--qpal-popup-max-height) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.qpal-shared-library-dialog .qpal-shared-library-list {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}

/* Subject Performance and Mock Board retain their existing cards and data.
   When opened, the dock module places the card in this centered modal overlay. */
.game-container.subject-insights-view,
.game-container.mock-board-history-view {
  box-sizing: border-box !important;
  max-height: var(--qpal-popup-max-height) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.qpal-dock-page-modal-overlay > .game-container.subject-insights-view,
.qpal-dock-page-modal-overlay > .game-container.mock-board-history-view {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin: auto !important;
}

@supports not (height: 100dvh) {
  :root {
    --qpal-popup-max-height: calc(
      100vh - max(16px, env(safe-area-inset-top, 0px)) -
      max(16px, env(safe-area-inset-bottom, 0px))
    );
  }
}