/*
  OnePlus/Android (and some WebViews) can render the system status bar over the page when scrolling.
  This adds a safe top padding + a fixed background strip so the status bar area never overlaps content.
*/

@media (max-width: 768px) {
  :root {
    /* Fallback to 28px if safe-area is 0 */
    --statusbar-h: max(env(safe-area-inset-top), 28px);
    /* Matches Tailwind bg-slate-50 */
    --statusbar-bg: rgb(248 250 252);
  }

  html,
  body {
    background: var(--statusbar-bg);
  }

  body {
    padding-top: var(--statusbar-h);
  }

  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--statusbar-h);
    background: var(--statusbar-bg);
    z-index: 1000;
    pointer-events: none;
  }
}