/* ================= Bottom tab bar (native app shell only) ================= Map / Settings / Profile. Hidden entirely on the web; native.js tags inside the Capacitor shell (ANDROID_IOS.md PR 6). Included on map.html and base.html (so every base-derived page — about, settings, profile, legal, privacy, feedback — gets it too). */ .bottom-nav { display: none; } .native-app .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: #ffffff; border-top: 1px solid #ece3d5; z-index: 1200; } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: #7c6f64; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 11px; -webkit-tap-highlight-color: transparent; } .bottom-nav-item.active { /* Icons carry a permanent amber accent dot (baked into the SVG), so state is shown by stroke darkness — ink-soft vs. ink — not a color swap. */ color: #251a12; font-weight: 600; } .bottom-nav-icon { display: flex; line-height: 1; } .bottom-nav-icon svg { width: 22px; height: 22px; display: block; } /* map.html defines --safe-bottom at :root and keys nearly every bottom-anchored control off it (legend, filter sheets, OSM attribution, FAB). Redefining the variable here for the native shell makes all of them clear the tab bar too, without touching each consumer individually. */ .native-app { --safe-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); } /* base.html pages (about/settings/profile/legal/...): reserve space in the scrollable content area, and drop the old footer-nav (Map link + version + copyright), now redundant with the tab bar + Settings page. */ .native-app .content { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 20px); } .native-app .footer-nav { display: none; } /* about.html's "Back to Map" CTA is redundant with the Map tab in the shell. */ .native-app .back-to-map { display: none; } /* map.html's Leaflet zoom/locate controls (top-right) are positioned at a fixed `--safe-top + 104px` in map.css, sized for the web where .topbar starts at `--safe-top + 10px`. The native shell's .app-titlebar pushes .topbar down an extra 44px (see ".native-app .topbar" above), but the controls' offset was never shifted to match — so in the app they always sit 44px too high, overlapping the search pill / filter chips. Confirmed on a physical iPhone 14 (zoom +/- and the locate arrow buried under the pill row); add the same 44px here. */ .native-app .leaflet-top.leaflet-right { top: calc(var(--safe-top) + 148px); } /* map.css already keys the OSM attribution's margin-bottom off --safe-bottom, which this file redefines above to include the 56px tab bar — so it should already clear the tab bar. Pin it explicitly here too (higher specificity, same file that owns the tab bar's height) so the two rules can't drift apart and there's no reliance on custom-property cascade order between two separate stylesheets. */ .native-app .leaflet-control-attribution { margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); } /* map.css sits the #status toast only 14px above the same --safe-bottom baseline the OSM attribution's bottom edge sits flush on, so in the native shell the two nearly touch. Confirmed cramped on physical iPhone 14 and Pixel devices; give the toast more clearance above the attribution strip. */ .native-app #status { bottom: calc(var(--safe-bottom) + 34px); }