/* Pin the app to the visible viewport; the document itself never scrolls. */
html.app-viewport{height:100%;overflow:hidden;overscroll-behavior:none}
body.app-viewport{position:fixed;inset:0;width:100%;height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
.app-shell.app-frame{position:fixed;top:var(--app-viewport-top,0px);left:0;right:0;bottom:auto;margin:0 auto;width:100%;height:100vh;height:var(--app-viewport-height,100dvh);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;box-sizing:border-box;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom));background:var(--bg,#fafbfc)}
.app-frame>.topbar{grid-row:1;min-width:0;margin:0;padding:0 0 18px;z-index:2;background:var(--bg,#fafbfc)}
.app-frame>main,.app-frame>.app-scroll{grid-row:2;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scroll-padding-block:20px;padding-bottom:24px}
.app-scroll:focus-visible{outline:2px solid var(--accent,#b42338);outline-offset:-2px}
.app-frame>.bottom-nav{grid-row:3;position:relative;inset:auto;transform:none;width:100%;max-width:none;margin:12px 0 0;z-index:2;background:#fff}
.app-frame>p.membership-note{grid-row:3;margin:12px 0 0;font-size:13px}
@media(max-height:500px){.app-frame>.topbar{padding-bottom:10px}.app-frame>.topbar .brand-logo{max-height:64px;object-fit:contain}.app-frame>.bottom-nav{margin-top:8px}}