/* Phone-native overrides — used only by the (phone) build.
   Removes the desktop "stage" and lets the real device be the bezel. */

html, body { height: 100%; background: var(--bg); }

/* Kill the dark desktop stage + watermark */
.app-stage { position: fixed; inset: 0; background: var(--bg); display: block; }
.app-stage::before { display: none; }
.stage-mark { display: none; }

#root { width: 100%; height: 100%; }

/* App fills the viewport; respect the device's safe areas */
.app--native {
  width: 100%;
  height: 100%;
  height: 100dvh;
  border-radius: 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
}

/* Tab bar clears the home indicator */
.app--native .tabbar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app--native .app-scroll {
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

/* Bottom sheet also respects the home indicator */
.app--native .sheet-foot {
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
}

/* ── Courts map · Dynamic Island / notch clearance (P5 BUG-2) ──
   The Courts map screen is `position:absolute; inset:0`, so it renders FULL-BLEED to
   the true top of the app (it escapes the app's safe-area top padding — that padding
   only shifts in-flow content). That is what we want: the map paints edge-to-edge
   behind the Dynamic Island. But its floating controls sit at fixed offsets from that
   true top (search row 52px, zoom column 120px), which puts them UNDER the island on
   inset devices. Push both down by env(safe-area-inset-top) so they clear it while
   keeping their relative spacing. `!important` because the offsets are inline styles.
   Loaded only by the bezel-free phone build → the desktop bezel build is untouched;
   the 0px fallback keeps parity anywhere the inset is absent. */
.bezel-free-frame .sr-map-toolbar {
  top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}
.bezel-free-frame .sr-map-zoom {
  top: calc(80px + env(safe-area-inset-top, 0px)) !important;
}