/* Native page zoom is replaced by a temporary reading gesture on touch screens. */
:where(html[data-mobile-interactions],html[data-mobile-interactions] *){touch-action:pan-x pan-y}
html[data-mobile-scroll-lock]{overflow:hidden;overscroll-behavior:none}
html[data-mobile-scroll-lock] body{position:fixed;top:var(--mobile-locked-top);left:0;right:0;width:100%;overflow:hidden!important}
html[data-mobile-interactions] :is(dialog,.selection-modal,.reference-atlas-index,.appointment-fields,.photo-viewer,.signature-fullscreen){overscroll-behavior:contain}
html[data-mobile-interactions] .modal-backdrop{top:var(--mobile-view-top,0px);bottom:auto;height:var(--mobile-view-height,100dvh);padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));overflow:hidden}
html[data-mobile-interactions] .selection-modal{max-height:calc(var(--mobile-view-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;min-height:0}
/* Center within the visible viewport without a transform that would conflict with pinch. */
html[data-mobile-interactions] :is(dialog,#appointmentEditor){position:fixed;top:calc(var(--mobile-view-top,0px) + 12px + env(safe-area-inset-top));bottom:calc(100dvh - var(--mobile-view-top,0px) - var(--mobile-view-height,100dvh) + 12px + env(safe-area-inset-bottom));height:fit-content;margin:auto;max-height:calc(var(--mobile-view-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
html[data-mobile-interactions] .journal-editor{width:100%;max-width:760px}
html[data-mobile-interactions] .journal-services{min-width:0}
html[data-mobile-interactions] .journal-services label{min-width:0;overflow-wrap:anywhere}
html[data-mobile-interactions] .journal-services input{flex:0 0 17px}
@media(max-width:480px){
  html[data-mobile-interactions][data-ui-scale]:not([data-ui-scale="100"]) .journal-services{grid-template-columns:minmax(0,1fr)}
}