/* DeafMonitor — shared mobile fullscreen modal base.
 *
 * Desktop (≥769px) is unchanged. At ≤768px every overlay marked .dm-fs-overlay
 * (or a known alias) becomes a true visual-viewport sheet:
 *   overlay = 100vh / 100dvh / 100svh, inset 0, overflow hidden
 *   sheet   = 100% of the overlay + safe-area insets
 *   body    = internal scroll (or the sheet itself if no .dm-fs-body)
 *   close   = position:fixed so it stays reachable above iOS chrome
 *
 * Later unprefixed boxed rules (padding 24px, max-height calc(100vh - 48px))
 * must not win — every fullscreen declaration uses !important.
 */

@media (max-width: 768px) {
  /* overflow:hidden is enough to stop the page scrolling behind the
     overlay. Do not set height:100%/100dvh on html/body — that collapses
     the document and resets window.scrollY when the modal closes. */
  html.dm-fs-open,
  html.dm-fs-open body,
  html.dm-reader-open,
  html.dm-reader-open body {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .dm-fs-overlay.open,
  .dm-fs-overlay.show,
  .dm-fs-overlay.dm-open,
  .dm-fs-overlay.dm-fs-is-open,
  .dm-fs-overlay.is-on,
  .dm-reader-overlay.open,
  .vid-modal-overlay.open,
  .vid-modal-ov.open,
  .dmgv-ov.open,
  .auth-overlay.open,
  .auth-overlay.dm-open,
  .pm-overlay.open,
  .dm-evd-ov.open,
  .dm-evsub-ov.open,
  .adv-modal.show,
  .dm-case-modal.open,
  .scr-modal.open,
  .dw-modal-bd:not([hidden]),
  .dm-bug-modal-bg.open,
  .dm-consent-overlay,
  .srch-ov.open,
  .srch-overlay.open,
  #sb-claim-modal,
  #sb-report-modal,
  #listingOverlay.open,
  #scQrOverlay.is-on {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    min-height: 100svh;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    box-sizing: border-box;
    overscroll-behavior: none;
    transform: none !important;
  }

  .dm-fs-overlay.open .dm-fs-sheet,
  .dm-fs-overlay.show .dm-fs-sheet,
  .dm-fs-overlay.dm-open .dm-fs-sheet,
  .dm-fs-overlay.dm-fs-is-open .dm-fs-sheet,
  .dm-reader-overlay.open .dm-reader-box,
  .vid-modal-overlay.open .vid-modal,
  .vid-modal-overlay.open #vidModalBox,
  .vid-modal-ov.open .vid-modal,
  .dmgv-ov.open .dmgv-modal,
  .auth-overlay.open .auth-box,
  .auth-overlay.dm-open .auth-box,
  .pm-overlay.open .pm-modal,
  .dm-evd-ov.open .dm-evd,
  .dm-evsub-ov.open .dm-evsub-box,
  .adv-modal.show,
  .dm-case-modal.open .dm-case-modal-box,
  .scr-modal.open .scr-modal-box,
  .dw-modal-bd:not([hidden]) .dw-modal,
  .dm-bug-modal-bg.open .dm-bug-modal,
  .dm-consent-overlay .dm-consent-card,
  #sb-claim-modal .sb-modal,
  #sb-report-modal .sb-modal,
  #listingOverlay.open .auth-box,
  #scQrOverlay.is-on .sc-qr-card {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
    align-content: start;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    transform: none !important;
  }

  /* Reader keeps a side rail + scrolling article. Video sheets scroll as
     one column so the player is never clipped to a 50/50 flex split. */
  .dm-fs-overlay.open .dm-fs-sheet:has(.dm-fs-body),
  .dm-reader-overlay.open .dm-reader-box {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .dm-fs-overlay.open .dm-fs-body,
  .dm-reader-overlay.open .dm-reader-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .dm-reader-overlay.open .dm-reader-rail {
    flex: 0 0 54px !important;
    width: 54px;
    max-height: none !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .dm-reader-overlay.open .dm-reader-box {
    flex-direction: row !important;
    align-items: stretch !important;
  }

  .vid-modal-overlay.open .vid-modal,
  .vid-modal-ov.open .vid-modal,
  .dmgv-ov.open .dmgv-modal {
    grid-template-columns: 1fr !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .vid-modal-overlay.open .vid-modal > div,
  .vid-modal-ov.open .vid-modal-main,
  .vid-modal-ov.open .dm-reader-side,
  .dmgv-ov.open .dmgv-main,
  .dmgv-ov.open .dmgv-side {
    max-height: none !important;
    overflow: visible !important;
  }

  .dm-fs-overlay.open .dm-fs-close,
  .dm-fs-overlay.show .dm-fs-close,
  .dm-reader-overlay.open .dm-reader-close,
  .vid-modal-overlay.open .vid-modal-close,
  .vid-modal-ov.open .vid-modal-close,
  .dmgv-ov.open .dmgv-close,
  .auth-overlay.open .auth-close,
  .pm-overlay.open .pm-close,
  .dm-evd-ov.open .dm-evd-close,
  .dm-evsub-ov.open .dm-evsub-close,
  .adv-modal.show .adv-modal-x,
  .dm-bug-modal-bg.open .dm-bug-close,
  .dw-modal-bd:not([hidden]) .dw-modal-x {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 30 !important;
  }

  /* Docked sheets (cookie banner): stay bottom-anchored, never clipped. */
  .dm-fs-dock,
  .dm-cookie-consent {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    box-sizing: border-box;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-fs-overlay.open,
  .dm-reader-overlay.open,
  .vid-modal-overlay.open,
  .vid-modal-ov.open,
  .dmgv-ov.open { animation: none }
}