/** * Font scale: 3 levels (1rem / 100%, +20%, +30%). Class on from in-app A A A control. */ :root, html { font-size: 100% !important; } html.font-120 { font-size: 120% !important; } html.font-130 { font-size: 130% !important; } /* Body fills viewport and does not scroll; only #app main scrolls. */ /* Android Chrome: --visual-viewport-height set by JS so footer fits in visible area. */ /* iOS Safari: .ios class sets height to 100svh and reserves bottom safe area so footer is fully visible. */ html { height: 100%; height: var(--visual-viewport-height, 100%); min-height: 100%; min-height: -webkit-fill-available; } body { margin: 0; height: 100%; height: var(--visual-viewport-height, 100%); min-height: 100%; min-height: -webkit-fill-available; overflow: hidden; touch-action: pan-x pan-y; } #app { display: flex; flex-direction: column; height: 100%; height: var(--visual-viewport-height, 100%); min-height: 0; overflow: hidden; } /* iOS: constrain to small viewport and reserve safe area so footer content is visible above home indicator. */ html.ios, html.ios body, html.ios #app { height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh; } html.ios #app { padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; } /* Footer at bottom of layout (not fixed) so it’s always visible when height is set from visual viewport. */ #app > footer.app-footer { flex-shrink: 0; padding-bottom: max(0.25rem, env(safe-area-inset-bottom)); } /* Reserve space at bottom of main so last content doesn’t touch footer. */ #app > main { padding-bottom: 0.5rem; }