/* Safe-area fallback — INERT unless the bridge asks for it.
 *
 * The web core already handles insets the right way: viewport-fit=cover plus
 * env(safe-area-inset-*) on every fixed element. Under Android 15/16 enforced
 * edge-to-edge that is exactly the correct primitive, and on iOS it has always
 * been correct.
 *
 * This file exists for one failure mode only: an Android WebView that draws
 * edge-to-edge but reports env(safe-area-inset-top) as 0, which would put the
 * header under the status bar. src/native-bridge.js measures the real value at
 * startup and on every resize/orientation change, and sets
 *
 *     <html data-inset-fallback="1">
 *
 * only when that condition is actually true. Every rule below is scoped to that
 * attribute, so if the device reports insets correctly this file changes
 * nothing at all.
 *
 * NOT VERIFIED ON HARDWARE. The measurement is real, but whether any device
 * actually needs the fallback can only be established on a physical Android 15
 * or 16 phone. If the device test shows correct insets, delete this file and
 * the flag with it rather than shipping dead CSS.
 *
 * The heights are the platform defaults, not guesses about a particular phone:
 * 24dp status bar, 48dp three-button navigation bar. They are only used when the
 * platform refuses to tell us the real numbers.
 */

:root[data-inset-fallback="1"] {
  --fhb-fallback-top: 24px;
  --fhb-fallback-bottom: 48px;
}

/* Top chrome: the app header and the Atlas bars that sit against the top edge. */
:root[data-inset-fallback="1"] header,
:root[data-inset-fallback="1"] .app-header,
:root[data-inset-fallback="1"] #topBar {
  padding-top: var(--fhb-fallback-top);
}

/* Bottom chrome: the tab bar. */
:root[data-inset-fallback="1"] .tabbar,
:root[data-inset-fallback="1"] #tabbar,
:root[data-inset-fallback="1"] nav.tabs {
  padding-bottom: var(--fhb-fallback-bottom);
}

/* Anything the app pins above the tab bar (toasts, the plate pager). */
:root[data-inset-fallback="1"] .float-bottom,
:root[data-inset-fallback="1"] .toast {
  bottom: calc(16px + var(--fhb-fallback-bottom));
}