Fix the iOS install sheet: exact Safari flow, chips, iOS blue, layout

Steps
- iOS now uses the exact flow: Safari users get 4 steps (⋯ → Share/More →
  Add to Home Screen → Add); non-Safari (CriOS/FxiOS/EdgiOS/in-app) get a
  first 'Open this page in Safari' step and 5 total. The vague 'in some
  browsers it's under…' wording is gone.

Chips and icons
- The ⋯ chip renders a single three-dot icon (icon-only pill) instead of
  the icon plus an '⋯' character (which showed two sets of dots).
- The More chip uses a chevron-down icon instead of the rounded-square.
- The accent pill uses real iOS blue: #0A84FF dark / #007AFF light, still
  the only coloured element.
- Steps and chips share one 16px type scale; chip labels are medium weight.

Typography and layout
- Numbers are small muted circles in a fixed 24px column, aligned with the
  first text line via matching line-height.
- Removed trailing periods after chips; steps tightened.
- Bottom padding is calc(24px + env(safe-area-inset-bottom)) and a
  secondary 'Maybe later' button sits below the steps.
- max-height 90dvh with inner scrolling; 36×4px low-contrast handle with
  real swipe-down-to-close (momentum off, spring back).
- App card shows the hostname only (no port), truncated.

Themes
- Dark (default): layered surfaces #1c1c1e sheet / #2c2c2e card / #3a3a3c
  chips with 8% white borders; subtle logo tile instead of solid white;
  backdrop is 50% black with 4px blur.
- Light only when the app theme was explicitly set to light, ignoring the
  system preference; borders #e0e0e0, chip fills #f2f2f2.

Also fixes a crash the test pressure exposed: a 429 (rate-limited)
/api/health response crashed Settings at health.vision.available.
fetchHealth now rejects non-OK/malformed responses so the dialog shows its
error banner instead of the app error screen.

Install-sheet suite now 64 checks; pwa/final-ux/security/contrast green.

lib/client-api.ts

@@ -200,12 +200,25 @@ export type Health = {
 };
 
 export async function fetchHealth(): Promise<Health> {
+  let response: Response;
   try {
-    const response = await fetch("/api/health", { cache: "no-store", headers: authHeaders() });
-    return (await response.json()) as Health;
+    response = await fetch("/api/health", { cache: "no-store", headers: authHeaders() });
   } catch {
     throw new ApiError("Could not reach the Freezmo server.", "network");
   }
+  const body = (await response.json().catch(() => null)) as (Partial<Health> & { error?: string; kind?: string }) | null;
+  if (!response.ok) {
+    throw new ApiError(
+      body?.error ?? `The health check failed with HTTP ${response.status}.`,
+      body?.kind ?? "http",
+    );
+  }
+  // Guard against anything that isn't a health payload (e.g. a proxy error
+  // page) so consumers can rely on the shape.
+  if (!body || typeof body !== "object" || !body.vision || !body.text) {
+    throw new ApiError("The Freezmo server sent an unexpected health response.", "bad_response");
+  }
+  return body as Health;
 }
 
 export type KeyCheck =