/* Mobile diagnostic popups — match OSIRIS MOBILE. Open state only. Desktop unchanged. No floating page ×. */ @media (max-width: 768px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-height: 500px) { body:has(.osiris-diag-popup.osiris-diag-open) { overflow: hidden !important; } .osiris-diag-overlay.osiris-diag-open, #gpInviteOverlay[style*="display: block"], #gpInviteOverlay[style*="display:block"] { inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 100dvh !important; background: #ffffff !important; z-index: 11000 !important; } /* Full available browser viewport — edge to edge, top to bottom. */ html:not(.osiris-eqr-diag-cascade) #osirisDiagPopup.osiris-diag-open:not([data-osiris-metrics-gate="1"]), html:not(.osiris-eqr-diag-cascade) #osirisEqrPopup.osiris-diag-open, #osirisPremiumPopup.osiris-diag-open, html:not(.osiris-gp-attached) #gpInvitePopup.osiris-diag-open { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; inset: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; height: 100dvh !important; min-height: 100dvh !important; max-height: none !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; z-index: 11010 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } html.osiris-eqr-diag-cascade #osirisEqrPopup.osiris-diag-open, html.osiris-eqr-diag-cascade #osirisDiagPopup.osiris-diag-open, html.osiris-gp-attached #gpInvitePopup.osiris-diag-open { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; z-index: 11015 !important; } /* Slim green header like OSIRIS MOBILE — safe-area only, no fake 47px. */ #osirisDiagPopup.osiris-diag-open .osiris-diag-header, #osirisEqrPopup.osiris-diag-open .osiris-diag-header, #osirisPremiumPopup.osiris-diag-open .osiris-diag-header, #gpInvitePopup.osiris-diag-open .osiris-diag-header { flex: 0 0 auto !important; position: relative !important; padding: calc(env(safe-area-inset-top, 0px) + 8px) 48px 8px 14px !important; overflow: visible !important; } html.osiris-gp-attached #gpInvitePopup.osiris-diag-open .osiris-diag-header { padding-top: 8px !important; } #osirisDiagPopup.osiris-diag-open .osiris-diag-kicker, #osirisEqrPopup.osiris-diag-open .osiris-diag-kicker, #osirisPremiumPopup.osiris-diag-open .osiris-diag-kicker, #gpInvitePopup.osiris-diag-open .osiris-diag-kicker { font-size: 8px !important; letter-spacing: 0.18em !important; margin-bottom: 2px !important; line-height: 1.2 !important; } #osirisDiagPopup.osiris-diag-open .osiris-diag-header h3, #osirisEqrPopup.osiris-diag-open .osiris-diag-header h3, #osirisPremiumPopup.osiris-diag-open .osiris-diag-header h3, #gpInvitePopup.osiris-diag-open .osiris-diag-header h3 { font-size: 18px !important; line-height: 1.15 !important; margin: 0 !important; padding: 0 !important; padding-right: 8px !important; } /* One small ×, right of title row, inside the header only. */ #osirisDiagPopup.osiris-diag-open .osiris-diag-close, #osirisEqrPopup.osiris-diag-open .osiris-diag-close, #osirisPremiumPopup.osiris-diag-open .osiris-diag-close, #gpInvitePopup.osiris-diag-open .osiris-diag-close { position: absolute !important; top: calc(env(safe-area-inset-top, 0px) + 8px) !important; right: max(10px, env(safe-area-inset-right, 0px)) !important; z-index: 5 !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: transparent !important; border-radius: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } html.osiris-gp-attached #gpInvitePopup.osiris-diag-open .osiris-diag-close { top: 8px !important; } #osirisDiagPopup.osiris-diag-open .osiris-diag-severity-bar, #osirisEqrPopup.osiris-diag-open .osiris-diag-severity-bar { flex: 0 0 auto !important; } #osirisDiagPopup.osiris-diag-open .osiris-diag-body, #osirisEqrPopup.osiris-diag-open .osiris-diag-body, #osirisPremiumPopup.osiris-diag-open .osiris-diag-body, #gpInvitePopup.osiris-diag-open .osiris-diag-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #osirisDiagPopup.osiris-diag-open .osiris-diag-footer, #osirisEqrPopup.osiris-diag-open .osiris-diag-footer, #gpInvitePopup.osiris-diag-open .osiris-diag-footer { flex: 0 0 auto !important; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } } /* Close controls only. Sheet size, colour, type and scrolling stay in styles.css. With no status-bar inset these tops are the original 11px and 10px. Pharmacopeia used to sit under the fixed header (z-index 10050), which covered its ×. */ @media (max-width: 768px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-height: 500px) { #shopPanel.shop-panel.open .shop-close { top: calc(env(safe-area-inset-top, 0px) + 11px) !important; pointer-events: auto !important; } /* Both sheets are position:fixed on the body. No parent transform, filter or opacity traps Pharmacopeia. Medications (#osirisEqrPopup) paints at 11010, above the 10060 used to clear the header, so Pharmacopeia opened behind it. This sits just above that popup and under Botanica at 21000. */ #suggestionsPanel.suggestions-panel.open { z-index: 11020 !important; } #suggestionsPanel.suggestions-panel.open .suggestions-close { top: calc(env(safe-area-inset-top, 0px) + 10px) !important; z-index: 5 !important; pointer-events: auto !important; } }