Install-as-app guide and iPhone safe-area support

- Install banner (phones), Settings guide and dialog with iPhone/iPad and Android steps,
  native Install button where supported; steps also on the dashboard Account page
- apple-touch-icon now a PNG (iOS ignores SVG icons)
- Shared pwa-safe.css: dark cap behind the status bar/Dynamic Island in the installed app,
  inset-aware offline banner, pull-to-refresh, bottom bars, full-screen map, dialogs
- Landscape-aware content gutters; measured top-bar height; viewport-fit=cover on every page

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

app/public/pwa-safe.css

@@ -0,0 +1,30 @@
+/* Shared PWA safe-area rules: notch / Dynamic Island, rounded corners, home indicator (iPhone 14–17 etc.).
+   Needs <meta name="viewport" content="..., viewport-fit=cover"> on the page. */
+
+/* Installed iPhone apps draw under the status bar with white text (black-translucent).
+   A dark cap behind that zone keeps the clock and battery readable on light themes too. */
+@media (display-mode: standalone) {
+  body::before {
+    content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 100000; pointer-events: none;
+    height: env(safe-area-inset-top, 0px); background: #070c14;
+  }
+}
+
+/* Never let page content slide under the sensor housing or rounded corners in landscape */
+/* (main app and dashboard add side insets to their own containers; simple pages use .safe-sides) */
+.safe-sides { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
+
+/* Fixed overlays that hug the top / sides / bottom */
+.offline-banner { padding-top: calc(0.4rem + env(safe-area-inset-top, 0px)); }
+.ptr-indicator { top: env(safe-area-inset-top, 0px); }
+.learn-back-top { right: max(1rem, calc(0.6rem + env(safe-area-inset-right, 0px))); }
+
+/* Bottom bars: clear the home indicator and the rounded bottom corners */
+.bottom-nav { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
+
+/* Full-screen map: keep controls off the notch, corners and home indicator */
+body.map-fs #tab-unified-map { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
+body.map-fs .unified-map-wrap { height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
+
+/* Modal dialogs: stay inside the safe area on short (landscape) screens */
+dialog { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.5rem); overflow: auto; }