/* How much of the screen the phone keeps for itself. --------------------------------------------------------------------------- For the standalone pages: the squad list, the referee screen, the scanner and anything else that builds its own document rather than extending layout.html. Those pages have no stylesheet of their own to put this in, so they link this one and then use the variables wherever their own top or bottom edge is. Android publishes the real window insets as --safe-area-inset-* on and keeps them current as the keyboard opens and the phone turns. iOS answers env(), which reports nothing unless the page carries viewport-fit=cover, so make sure it does. --app-min-inset-top is a floor that app-bars.js sets on iOS for any device that still reports zero. Only one source is ever present, so max() picks the platform without either side knowing about the other, and all of them are zero in a browser: a page that links this and uses it looks exactly the same on the web. Pair it with /app-bars.js, which supplies the floor and picks the status bar's icon colour from the page's own theme-color. */ :root { --app-inset-top: max( var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 0px), var(--app-min-inset-top, 0px) ); --app-inset-bottom: max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)); --app-inset-left: max(var(--safe-area-inset-left, 0px), env(safe-area-inset-left, 0px)); --app-inset-right: max(var(--safe-area-inset-right, 0px), env(safe-area-inset-right, 0px)); }