hotfix: offline banner as bottom pill instead of full-width top bar

The top bar still blocked the trip planner's top nav on mobile even
after #808's padding trick — nav layouts that position their own
sticky headers were ignoring the --offline-banner-h offset, and the
bar looked alarming for what is usually a 2s blip.

Redesign as a small floating pill anchored bottom-center, hovering
above the mobile bottom nav (calc(var(--bottom-nav-h) + 16px)). No
layout shift anywhere, nothing ever covers the nav, and the pill
looks like a passing status chip rather than an error banner.

Reverts the body padding-top / navbar top offset introduced in #808
since they're no longer needed with the pill positioning.

client/src/index.css

@@ -431,8 +431,6 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
   --safe-top: env(safe-area-inset-top, 0px);
   --nav-h: 0px;
   --bottom-nav-h: 0px;
-  /* Set by OfflineBanner when it's visible so body can reserve space. */
-  --offline-banner-h: 0px;
   --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
   --sp-1: 4px;
   --sp-2: 8px;
@@ -538,9 +536,7 @@ body {
   font-family: var(--font-system);
   background-color: var(--bg-primary);
   color: var(--text-primary);
-  transition: background-color 0.2s, color 0.2s, padding-top 0.15s ease;
-  /* Reserve space when OfflineBanner is visible; 0 when online. */
-  padding-top: var(--offline-banner-h, 0px);
+  transition: background-color 0.2s, color 0.2s;
 }
 
 /* ── Marker cluster custom styling ────────────── */