/* qxmd303 last-wins: mobile website Quizrr, app MARKS 2×2 footer, draggable PIP room.
   Website rules stay under html[data-qx-shell="web"]. App MARKS player stays 2×2. */

/* ===== App: if MARKS player is on screen, hide leaked Quizrr chrome ===== */
html[data-qx-shell="app"] body:has(.eg-test-root) .qzrr-cbt,
html[data-qx-shell="app"] body:has(.eg-test-root) .qzrr-footer-actions,
html[data-qx-shell="app"] body:has(.eg-test-root) .qzrr-black-bar,
html[data-qx-shell="app"] body:has(.eg-test-root) .qzrr-side-toggle {
  display: none !important;
}

/* ===== App + any MARKS test: ONE pinned 2×2 footer (two above, two below) ===== */
html body .eg-test-root[data-eg-mode="test"] > #egFoot,
html body .eg-test-root[data-eg-mode="test"] #egFoot,
html body .eg-test-root[data-eg-mode="test"] .eg-foot,
html body .eg-test-root[data-eg-mode="test"] .eg-foot-marks-test,
html body #egFoot.eg-foot-marks-test,
html[data-qx-shell="app"] .eg-test-root[data-eg-mode="test"] #egFoot,
html[data-qx-shell="app"] #egFoot.eg-foot-marks-test,
.eg-test-root.eg-qxeg2[data-eg-mode="test"] #egFoot,
.eg-test-root.eg-qxeg4[data-eg-mode="test"] #egFoot,
.eg-test-root.eg-qxeg5[data-eg-mode="test"] #egFoot,
.eg-test-root.eg-qxeg6[data-eg-mode="test"] #egFoot {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 48px 48px !important;
  grid-auto-flow: row !important;
  grid-auto-rows: 48px !important;
  flex-direction: unset !important;
  flex-wrap: nowrap !important;
  align-content: start !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 8px !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  inset: auto 0 0 0 !important;
  transform: none !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: calc(120px + max(36px, env(safe-area-inset-bottom, 0px))) !important;
  max-height: none !important;
  padding: 10px 12px calc(10px + max(36px, env(safe-area-inset-bottom, 0px))) !important;
  z-index: 2147483000 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

html body .eg-test-root[data-eg-mode="test"] #egFoot #qxClearBtn,
html body .eg-test-root[data-eg-mode="test"] #qxClearBtn {
  grid-area: 1 / 1 !important;
  order: 1 !important;
}
html body .eg-test-root[data-eg-mode="test"] #egFoot #qxReviewNextBtn,
html body .eg-test-root[data-eg-mode="test"] #qxReviewNextBtn {
  grid-area: 1 / 2 !important;
  order: 2 !important;
}
html body .eg-test-root[data-eg-mode="test"] #egFoot #qxPrevBtn,
html body .eg-test-root[data-eg-mode="test"] #qxPrevBtn {
  grid-area: 2 / 1 !important;
  order: 3 !important;
}
html body .eg-test-root[data-eg-mode="test"] #egFoot #qxSaveBtn,
html body .eg-test-root[data-eg-mode="test"] #qxSaveBtn,
html body .eg-test-root[data-eg-mode="test"] #qxSaveBtn.eg-btn-next {
  grid-area: 2 / 2 !important;
  order: 4 !important;
  justify-self: stretch !important;
  margin-left: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

html body .eg-test-root[data-eg-mode="test"] #egFoot .eg-btn,
html body .eg-test-root[data-eg-mode="test"] #qxClearBtn,
html body .eg-test-root[data-eg-mode="test"] #qxReviewNextBtn,
html body .eg-test-root[data-eg-mode="test"] #qxPrevBtn,
html body .eg-test-root[data-eg-mode="test"] #qxSaveBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  position: relative !important;
  float: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Second copy of the footer must never paint */
html body .eg-test-root[data-eg-mode="test"] #egFoot ~ #egFoot,
html body .eg-test-root[data-eg-mode="test"] .eg-foot-marks-test ~ .eg-foot-marks-test {
  display: none !important;
}

/* NTA test: only MARKS header (X | timer | Submit). Hide extras / leaked tools. */
html body .eg-test-root[data-eg-mode="test"][data-qx-format="nta"] > .eg-top-tools,
html body .eg-test-root[data-eg-mode="test"][data-qx-format="nta"] .eg-qx-extras,
html body .eg-test-root[data-eg-mode="test"][data-qx-format="nta"] .qx-prac-tools {
  display: none !important;
}

/* Header stays at the top — never a second bottom bar */
html body .eg-test-root[data-eg-mode="test"] > .eg-top,
html body .eg-test-root[data-eg-mode="test"] .eg-top {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
}

/* Practice stays Previous | Check | Next — one row */
html body .eg-test-root[data-eg-mode="practice"] #egFoot,
html body .eg-test-root[data-eg-mode="practice"] .eg-foot-practice {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr 1fr !important;
  grid-template-rows: none !important;
  flex-direction: row !important;
}

/* ===== Website mobile Quizrr — phone Chrome only ===== */
@media (max-width: 900px) {
  html[data-qx-shell="web"] body.marks-test-active:has(.qzrr-cbt),
  html[data-qx-shell="web"] body.allen-cbt-active:has(.qzrr-cbt) {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    overscroll-behavior: none !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-black-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    max-height: 44px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 8px !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-black-title {
    flex: 0 1 auto !important;
    max-width: min(38vw, 160px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-black-tools {
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    min-width: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-tool-btn {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-body {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-main-col,
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-q-area,
  html[data-qx-shell="web"] .qzrr-cbt #qzrrQArea {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-q-area,
  html[data-qx-shell="web"] .qzrr-cbt #qzrrQArea {
    padding: 12px 12px 28px !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-act-left,
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-act-right {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-column: 1 / -1 !important;
    gap: 8px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-footer-actions .qzrr-btn,
  html[data-qx-shell="web"] .qzrr-cbt #qxReviewNextBtn,
  html[data-qx-shell="web"] .qzrr-cbt #qxClearBtn,
  html[data-qx-shell="web"] .qzrr-cbt #qxPrevBtn,
  html[data-qx-shell="web"] .qzrr-cbt #qxSaveBtn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt #qxPrevBtn { order: 0 !important; }
  html[data-qx-shell="web"] .qzrr-cbt #qxSaveBtn { order: 1 !important; }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-side-toggle {
    display: flex !important;
    z-index: 60 !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt:not(.qzrr-side-collapsed) .qzrr-side {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(280px, 88vw) !important;
    z-index: 80 !important;
    max-width: 88vw !important;
  }
}

@media (max-width: 420px) {
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-footer-actions .qzrr-btn,
  html[data-qx-shell="web"] .qzrr-cbt #qxReviewNextBtn,
  html[data-qx-shell="web"] .qzrr-cbt #qxClearBtn,
  html[data-qx-shell="web"] .qzrr-cbt #qxPrevBtn,
  html[data-qx-shell="web"] .qzrr-cbt #qxSaveBtn {
    font-size: 12px !important;
    padding: 0 6px !important;
  }
  html[data-qx-shell="web"] .qzrr-cbt .qzrr-black-title {
    max-width: min(30vw, 110px) !important;
  }
}

/* ===== qxmd304: standard question size, pan/scroll only, no pinch ===== */
html.qx-test-zoom,
html.qx-test-zoom body,
html body.marks-test-active,
html body.allen-cbt-active,
html body .eg-test-root,
html body .eg-test-root .eg-body,
html body .eg-test-root .eg-q-card,
html body .eg-test-root .eg-main,
html body .qzrr-cbt,
html body .qzrr-cbt .qzrr-q-area,
html body .qzrr-cbt #qzrrQArea,
html body .mtk-main,
html body .qx-prac-body {
  touch-action: pan-x pan-y !important;
}

html body .eg-test-root .eg-q-card,
html body .eg-test-root #egMain,
html body .eg-test-root .eg-main,
html body .eg-test-root #egQArea,
html body .qzrr-cbt .qzrr-q-area,
html body .qzrr-cbt #qzrrQArea,
html body .mtk-main {
  zoom: 1 !important;
}

html body .eg-test-root[data-eg-mode="test"] .eg-body,
html body .qzrr-cbt .qzrr-q-area,
html body .qzrr-cbt #qzrrQArea {
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

html body .eg-test-root[data-eg-mode="test"] > .eg-top,
html body .eg-test-root[data-eg-mode="test"] .eg-marks-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
}
html body .eg-test-root[data-eg-mode="test"] #egMarksExitBtn,
html body .eg-test-root[data-eg-mode="test"] .eg-marks-x {
  display: inline-flex !important;
  order: 0 !important;
  margin-right: 0 !important;
}
html body .eg-test-root[data-eg-mode="test"] #qxSubmitTop,
html body .eg-test-root[data-eg-mode="test"] .eg-marks-submit {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  order: 2 !important;
  margin-left: 0 !important;
}

html[data-qx-shell="web"] .qzrr-cbt .qzrr-q-area,
html[data-qx-shell="web"] .qzrr-cbt #qzrrQArea {
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  zoom: 1 !important;
}

html body .eg-test-root .qzrr-zoom-circle,
html body .eg-test-root .qzrr-top-zoom-fab,
html body .qzrr-cbt .qzrr-zoom-circle,
html body .qzrr-cbt .qzrr-top-zoom-fab,
html body .eg-test-root #egZoomIn,
html body .eg-test-root #egZoomOut,
html body .eg-test-root #egZoomInHdr,
html body .eg-test-root #egZoomOutHdr {
  display: none !important;
}

/* ===== qxmd305: pan wide questions, pin 2×2 foot, tappable ✕ + Submit ===== */
html body .eg-test-root .eg-body,
html body .eg-test-root.eg-qxmd182 .eg-body,
html body .eg-test-root[data-eg-mode="test"] .eg-body,
html body .eg-test-root[data-eg-mode="practice"] .eg-body,
html body .qzrr-cbt .qzrr-q-area,
html body .qzrr-cbt #qzrrQArea,
html body .mtk-test-root .mtk-main,
html body .qx-prac-body {
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior: contain !important;
}
html body .eg-test-root .eg-main,
html body .eg-test-root.eg-qxmd182 .eg-main,
html body .eg-test-root .eg-q-card,
html body .eg-test-root.eg-qxmd182 .eg-q-card {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
html body .eg-test-root .eg-q-stem,
html body .eg-test-root #egQArea,
html body .qzrr-cbt .qzrr-q-area .mtk-q-text,
html body .qzrr-cbt .qzrr-q-area .qx-question-body {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}
html body .eg-test-root .eg-q-stem img,
html body .eg-test-root #egQArea img,
html body .qzrr-cbt #qzrrQArea img {
  max-width: 100% !important;
  height: auto !important;
}

html body .eg-test-root.eg-qxmd182[data-eg-mode="test"] > #egFoot.eg-foot-marks-test,
html body .eg-test-root.eg-qxmd182[data-eg-mode="test"] > #egFoot,
html body .eg-test-root.eg-qxtool8[data-eg-mode="test"] #egFoot,
html body .eg-test-root[data-eg-mode="test"] > #egFoot.eg-foot-marks-test,
html body .eg-test-root[data-eg-mode="test"] #egFoot,
html body #egFoot.eg-foot-marks-test {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 48px 48px !important;
  grid-auto-flow: row !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  inset: auto 0 0 0 !important;
  transform: none !important;
  zoom: unset !important;
  filter: none !important;
  contain: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: auto !important;
  min-height: calc(120px + max(36px, env(safe-area-inset-bottom, 0px))) !important;
  max-height: none !important;
  padding: 10px 12px calc(10px + max(36px, env(safe-area-inset-bottom, 0px))) !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  flex-wrap: nowrap !important;
}
html body .eg-test-root[data-eg-mode="test"] #egFoot #qxClearBtn,
html body .eg-test-root.eg-qxmd182[data-eg-mode="test"] #qxClearBtn { grid-area: 1 / 1 !important; }
html body .eg-test-root[data-eg-mode="test"] #egFoot #qxReviewNextBtn,
html body .eg-test-root.eg-qxmd182[data-eg-mode="test"] #qxReviewNextBtn { grid-area: 1 / 2 !important; }
html body .eg-test-root[data-eg-mode="test"] #egFoot #qxPrevBtn,
html body .eg-test-root.eg-qxmd182[data-eg-mode="test"] #qxPrevBtn { grid-area: 2 / 1 !important; }
html body .eg-test-root[data-eg-mode="test"] #egFoot #qxSaveBtn,
html body .eg-test-root.eg-qxmd182[data-eg-mode="test"] #qxSaveBtn {
  grid-area: 2 / 2 !important;
  transform: none !important;
  margin-left: 0 !important;
  left: auto !important;
}

html body .eg-test-root[data-eg-mode="test"] > .eg-top,
html body .eg-test-root[data-eg-mode="test"] .eg-marks-top {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  z-index: 300 !important;
  isolation: isolate !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
html body .eg-test-root[data-eg-mode="test"] #egMarksExitBtn,
html body .eg-test-root[data-eg-mode="test"] .eg-marks-x {
  display: inline-flex !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  z-index: 320 !important;
  cursor: pointer !important;
}
html body .eg-test-root[data-eg-mode="test"] #qxSubmitTop,
html body .eg-test-root[data-eg-mode="test"] .eg-marks-submit {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  z-index: 320 !important;
  cursor: pointer !important;
  position: relative !important;
}

html[data-qx-shell="web"] .qzrr-cbt .qzrr-black-bar > #qzrrExitX,
html[data-qx-shell="web"] .qzrr-cbt #qzrrExitX {
  display: inline-flex !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  z-index: 20150 !important;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: none !important;
}
html[data-qx-shell="web"] .qzrr-cbt .qzrr-black-bar > #qxSubmitTop,
html[data-qx-shell="web"] .qzrr-cbt #qxSubmitTop {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  z-index: 20150 !important;
  min-height: 30px !important;
  height: 30px !important;
  background: #fff !important;
  color: #ef4444 !important;
  -webkit-text-fill-color: #ef4444 !important;
  border: 1px solid #ef4444 !important;
}

html body #egMarksOverview.open .eg-mk-ov-foot,
html body .eg-marks-overview.open .eg-mk-ov-foot {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
  flex-shrink: 0 !important;
}

/* qxmd306: beat html body #app-main #egFoot (2 IDs) + lift above phone nav */
html body #app-main .eg-test-root[data-eg-mode="test"] #egFoot,
html body #app-main #egFoot.eg-foot-marks-test {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 46px 46px !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
  min-height: calc(120px + max(36px, env(safe-area-inset-bottom, 0px))) !important;
  padding: 10px 12px calc(10px + max(36px, env(safe-area-inset-bottom, 0px))) !important;
  z-index: 2147483000 !important;
  background: #ffffff !important;
  visibility: visible !important;
  pointer-events: auto !important;
}