/* Reading gestures outside journal forms use a temporary transform 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}
html[data-mobile-interactions] body[data-page="cabinet"] #programModal .selection-modal{max-height:calc(var(--mobile-view-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
/* Center within the visible viewport without a transform that would conflict with pinch. */
html[data-mobile-interactions] :is(dialog,#appointmentEditor):not(:where(body[data-page="cabinet"] .support-center)){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))}
/* Journal geometry also follows native zoom; shared support geometry is unchanged. */
html[data-mobile-interactions] #journalEditor{top:var(--journal-view-top,0px);left:var(--journal-view-left,0px);right:auto;width:var(--journal-view-width,100%);height:var(--journal-view-height,100dvh)}
html[data-mobile-interactions] .journal-editor{display:flex;flex-direction:column;align-self:center;width:100%;max-width:760px;max-height:calc(var(--journal-view-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:0;overflow:hidden}
html[data-mobile-interactions] .journal-editor>.modal-heading{flex:0 0 auto;padding-right:44px}
html[data-mobile-interactions] .journal-editor>.modal-heading>div{min-width:0;overflow-wrap:anywhere}
html[data-mobile-interactions] .journal-editor>.modal-close{width:44px;height:44px;z-index:1}
html[data-mobile-interactions] #journalForm{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}
html[data-mobile-interactions] .journal-form-body{flex:1 1 auto;min-height:0;min-width:0;padding:2px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html[data-mobile-interactions] .journal-form-actions{position:static;flex:0 0 auto}
/* Keep one full-size field and its focus outline visible above a short keyboard. */
html[data-mobile-interactions] #journalEditor[data-journal-compact] .journal-editor{padding:12px}
html[data-mobile-interactions] #journalEditor[data-journal-compact] .modal-heading{padding-right:48px}
html[data-mobile-interactions] #journalEditor[data-journal-compact] .modal-icon{display:none}
html[data-mobile-interactions] #journalEditor[data-journal-compact] .modal-close{top:8px;right:8px}
html[data-mobile-interactions] #journalEditor[data-journal-compact] h2{margin-top:0;font-size:calc(18px * var(--ui-text-scale,1));line-height:1.2}
html[data-mobile-interactions] #journalEditor[data-journal-compact] #journalEditorSubtitle{margin-top:2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-mobile-interactions] #journalEditor[data-journal-compact] .journal-form-body{min-height:calc(var(--cabinet-control-height,44px) + 4px)}
html[data-mobile-interactions] #journalEditor[data-journal-compact] .journal-form-actions{margin-top:8px;padding:0}
html[data-mobile-interactions] #journalEditor[data-journal-compact] .journal-form-actions button{min-height:var(--cabinet-control-height,44px)}
html[data-mobile-interactions] #journalEditor[data-journal-form-scroll] #journalForm{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html[data-mobile-interactions] #journalEditor[data-journal-form-scroll] .journal-form-body{flex:0 0 auto;overflow:visible}
html[data-mobile-journal-open],html[data-mobile-journal-open] body,html[data-mobile-journal-open] #journalEditor,html[data-mobile-journal-open] #journalEditor *{touch-action:manipulation}
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}
/* Profile fields scroll inside the visible window, not behind the keyboard. */
html[data-mobile-interactions] body[data-page="cabinet"] #profileEditor[open]{
  display:flex;flex-direction:column;overflow:hidden;
  top:calc(var(--profile-view-top,0px) + 12px + env(safe-area-inset-top));bottom:auto;
  left:calc(var(--profile-view-left,0px) + max(12px,(var(--profile-view-width,100vw) - 600px)/2));right:auto;
  width:min(600px,calc(var(--profile-view-width,100vw) - 24px));max-width:none;
  max-height:calc(var(--profile-view-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:0;
}
html[data-mobile-interactions] body[data-page="cabinet"] #profileEditor>header{flex:0 0 auto;min-width:0}
html[data-mobile-interactions] body[data-page="cabinet"] #profileEditorForm{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}
html[data-mobile-interactions] body[data-page="cabinet"] .profile-editor-body{flex:1 1 auto;min-width:0;min-height:0;padding:2px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html[data-mobile-interactions] body[data-page="cabinet"] #profileEditorForm>footer{flex:0 0 auto;position:static}
html[data-mobile-interactions] body[data-page="cabinet"] #profileEditor[data-profile-compact]{padding:12px}
html[data-mobile-interactions] body[data-page="cabinet"] #profileEditor[data-profile-compact]>header{margin-bottom:8px;gap:8px}
html[data-mobile-interactions] body[data-page="cabinet"] #profileEditor[data-profile-compact] h2{font-size:calc(18px * var(--ui-text-scale,1));line-height:1.2;overflow-wrap:anywhere}
html[data-mobile-interactions] body[data-page="cabinet"] #profileEditor[data-profile-compact] .profile-editor-body{min-height:calc(var(--cabinet-control-height,44px) + 4px)}
html[data-mobile-interactions] body[data-page="cabinet"] #profileEditor[data-profile-compact] footer{margin-top:8px}
html[data-mobile-interactions] body[data-page="cabinet"] #profileEditor[data-profile-form-scroll] #profileEditorForm{overflow-y:auto;overscroll-behavior:contain}
html[data-mobile-interactions] body[data-page="cabinet"] #profileEditor[data-profile-form-scroll] .profile-editor-body{flex:0 0 auto;overflow:visible}
html[data-mobile-profile-open],html[data-mobile-profile-open] body,
html[data-mobile-profile-open] #profileEditor,html[data-mobile-profile-open] #profileEditor *{touch-action:manipulation}
/* Keep navigation at the page bottom; never float it above an editor/keyboard. */
html[data-cabinet-keyboard] body[data-page="cabinet"] .mobile-bottom-nav,
html[data-mobile-scroll-lock] body[data-page="cabinet"] .mobile-bottom-nav,
body[data-page="cabinet"]:has(dialog[open],.modal-backdrop:not([hidden]),.reference-atlas:not([hidden])) .mobile-bottom-nav{visibility:hidden;pointer-events:none}
/* Shared support owns viewport updates and close/scroll/focus restoration. */
@media(max-width:900px), (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  body[data-page="cabinet"] dialog.support-center[open]{
    top:var(--support-viewport-top,0px);left:var(--support-viewport-left,0px);right:auto;bottom:auto;
    width:var(--support-viewport-width,100vw);max-width:var(--support-viewport-width,100vw);
    height:var(--support-viewport-height,100dvh);max-height:var(--support-viewport-height,100dvh);
    margin:0;border:0;border-radius:0;
    padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  }
  body[data-page="cabinet"] dialog.support-center::backdrop{background:var(--white,#fff)}
}
@media(max-width:480px){
  html[data-mobile-interactions][data-ui-scale]:not([data-ui-scale="100"]) .journal-services{grid-template-columns:minmax(0,1fr)}
}