/* VORA PWA 2.2.1 — installed Android system-bar protection.
   The Android status icons belong to the OS; VORA supplies an opaque backdrop
   so photographs, ticker and scrolled cards never appear behind them.
   This applies to the installed standalone PWA, never normal Chrome tabs. */
@media (display-mode: standalone) and (max-width: 1020px),
       (display-mode: fullscreen) and (max-width: 1020px) {
  :root {
    /* Some Android WebAPKs return a zero CSS env inset while drawing behind
       the transparent status bar. Reserve the usual 28 CSS px in that case. */
    --vora-pwa-safe-top: max(28px, env(safe-area-inset-top, 0px));
    --vora-pwa-system-ink: #081e37;
  }
  html {background-color: #081e37 !important;}
  /* Fixed shield stays opaque during scroll/overscroll. Android itself paints
     the status icons above web content; clicks fall through to the OS. */
  html::before {
    content: "";
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    height: var(--vora-pwa-safe-top);
    background: #081e37;
    pointer-events: none;
    z-index: 2147483646;
  }
  /* These offsets are owned by this final PWA stylesheet. Keep the floating
     menu clear of the system icons without making the page ticker sticky. */
  .floating-header.vora-system-header,
  .floating-header.vora-system-header.is-scrolled {
    top: calc(var(--vora-pwa-safe-top) + 5px) !important;
  }
  .vora-system-header .main-nav {
    top: calc(var(--vora-pwa-safe-top) + 70px) !important;
    max-height: calc(100dvh - var(--vora-pwa-safe-top) - 90px) !important;
  }
}
@media (display-mode: standalone) and (max-width:520px),
       (display-mode: fullscreen) and (max-width:520px) {
  .vora-system-header .main-nav {
    top: calc(var(--vora-pwa-safe-top) + 65px) !important;
  }
}