/* R48 review: only fixed chrome follows the visual viewport during native pinch.
   Keep body/content zoom, pointer coordinates and the organization's own zoom native. */
/* Desktop browser zoom reflows the CSS viewport. Let existing controls wrap
   instead of clipping; ResizeObserver keeps content below the resulting header. */
html body .app>main>.top{
 height:auto!important;min-height:76px;flex-wrap:wrap;gap:8px 10px!important;
 padding-top:10px!important;padding-bottom:10px!important;
}
html body .app>main>.top>.top-left,
html body .app>main>.top>.right{min-width:0;max-width:100%;flex-wrap:wrap}
html body .app>main>.top>.right{justify-content:flex-end}
html body .app>main>.top #pageTitle{min-width:0;white-space:normal;overflow-wrap:anywhere}
@media(max-width:560px){html body .app>main>.top{min-height:64px}}

html.paxon-viewport-zoom body .app>main>.top,
html.paxon-viewport-zoom body>header{
 position:fixed!important;
 top:var(--paxon-vv-top)!important;left:var(--paxon-vv-left)!important;right:auto!important;
 width:var(--paxon-vv-width)!important;max-width:none!important;margin:0!important;
 transform-origin:0 0!important;transform:scale(var(--paxon-vv-inverse-scale))!important;
}
html.paxon-viewport-zoom body #paxon-mobile-nav{
 top:var(--paxon-vv-bottom)!important;bottom:auto!important;
 left:var(--paxon-vv-center)!important;right:auto!important;
 width:min(560px,calc(var(--paxon-vv-width) - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))!important;
 transform-origin:0 0!important;
 /* Translate inside the inverse scale: height, gap and safe area are divided
    by the pinch factor, while the viewport anchor stays in layout pixels. */
 transform:scale(var(--paxon-vv-inverse-scale)) translate(-50%,-100%) translateY(calc(-12px - env(safe-area-inset-bottom,0px)))!important;
}