diff --git a/src/actions/water-log/field.ts b/src/actions/water-log/field.ts
index 108963f..c4fed79 100644
--- a/src/actions/water-log/field.ts
+++ b/src/actions/water-log/field.ts
@@ -52,6 +52,16 @@ type FieldHeadgate = {
   high_threshold: number | null;
   low_threshold: number | null;
   active: boolean;
+  /**
+   * Free-text headgate description. Often a field location / section
+   * label (e.g. "Section 4 — North Field") or a coordinate string
+   * ("GPS 36.1234, -119.5678"). The mobile UI shows this as the
+   * card's secondary line — think of it as the "geocode" until a
+   * proper location column ships.
+   */
+  notes: string | null;
+  /** ISO timestamp of the most recent successful log. Display only. */
+  last_used_at: string | null;
 };
 
 type VerifyPinResult =
@@ -95,6 +105,8 @@ export async function getWaterHeadgates(
       high_threshold: h.highThreshold != null ? Number(h.highThreshold) : null,
       low_threshold: h.lowThreshold != null ? Number(h.lowThreshold) : null,
       active: h.active,
+      notes: h.notes,
+      last_used_at: h.lastUsedAt ? h.lastUsedAt.toISOString() : null,
     }));
   });
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index f734ad7..77be9b4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -302,6 +302,37 @@ select:-webkit-autofill:focus {
   to { transform: rotate(360deg); }
 }
 
+/* Mobile Water Log — PIN caret blink. The `to { opacity: 0 }` +
+ * `steps(2, start)` combo gives a hard on/off blink like UISegmentedControl
+ * / UITextField, not a gentle fade. */
+@keyframes water-blink {
+  to { opacity: 0; }
+}
+
+/* Mobile Water Log — PIN-entry error shake. Three diminishing
+ * oscillations for a "no, that wasn't right" feel. */
+@keyframes water-shake {
+  0%, 100% { transform: translateX(0); }
+  20%      { transform: translateX(-10px); }
+  40%      { transform: translateX(10px); }
+  60%      { transform: translateX(-7px); }
+  80%      { transform: translateX(7px); }
+}
+
+/* Mobile Water Log — checkmark stroke draw for the success screen.
+ * The element's `stroke-dasharray` is set inline so it works for any
+ * length; the keyframe just controls the timing. */
+@keyframes water-draw {
+  from { stroke-dashoffset: var(--draw-from, 100); }
+  to   { stroke-dashoffset: 0; }
+}
+
+/* Mobile Water Log — circular progress for the success ring. */
+@keyframes water-ring {
+  from { stroke-dashoffset: var(--ring-from, 360); }
+  to   { stroke-dashoffset: 0; }
+}
+
 /* Reduce motion: respect the user's OS-level preference. */
 /* The motion pass deliberately keeps the visual design intact (colors, type, layout)
  * but flattens everything that fights vestibular comfort. This block wipes:
diff --git a/src/app/water/page.tsx b/src/app/water/page.tsx
index 7a1cbe2..fd23f1f 100644
--- a/src/app/water/page.tsx
+++ b/src/app/water/page.tsx
@@ -1,5 +1,49 @@
+/**
+ * Public `/water` route — entrypoint for the mobile-first Tuxedo
+ * Water Log PIN-gated experience.
+ *
+ * As of 2026-07, the route renders `WaterFieldClient`, which now
+ * delegates to the Apple-HIG styled `MobileWaterApp` state machine
+ * (PIN → Headgates → Log → Success). All screens are designed
+ * for phones and tablets in the field — there is no desktop
+ * consideration.
+ *
+ * `display: "standalone"` + `viewportFit: "cover"` in the root
+ * layout, combined with the mobile-specific `<meta>` tags below,
+ * give this route a near-native feel when added to an iOS home
+ * screen as a PWA.
+ */
+import type { Metadata, Viewport } from "next";
 import WaterFieldClient from "@/components/water/WaterFieldClient";
 
+export const metadata: Metadata = {
+  title: "Water Log · Tuxedo Ditch Co.",
+  description:
+    "Field log of headgate water readings — PIN-protected, mobile-only.",
+  robots: {
+    index: false, // PIN-gated field tool — no public indexing
+    follow: false,
+  },
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "Water Log",
+  },
+};
+
+// The water route is mobile-only — never scale above 1.0 (we don't
+// want desktop users pinching-and-zooming a tool that's tuned for
+// thumb-reach). The viewport-fit: cover setting in the root layout
+// enables safe-area insets on iOS.
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  themeColor: "#14532d",
+  viewportFit: "cover",
+};
+
 export default async function WaterPage() {
   return <WaterFieldClient />;
 }
\ No newline at end of file
diff --git a/src/components/water/WaterFieldClient.tsx b/src/components/water/WaterFieldClient.tsx
index 6312ae4..0aa829f 100644
--- a/src/components/water/WaterFieldClient.tsx
+++ b/src/components/water/WaterFieldClient.tsx
@@ -1,1006 +1,51 @@
 "use client";
 
-import Image from "next/image";
-import { useReducer, useEffect, Suspense, useMemo, useRef } from "react";
-import {
-  verifyWaterPin,
-  submitWaterEntry,
-  getWaterHeadgates,
-  logoutWater,
-  setWaterLang,
-} from "@/actions/water-log/field";
-import { useSearchParams } from "next/navigation";
-import { WaterGauge } from "@/components/water/icons";
-
-type Headgate = {
-  id: string;
-  name: string;
-  active: boolean;
-  high_threshold?: number | null;
-  low_threshold?: number | null;
-};
-
-type Language = "en" | "es";
-
-type Step = "loading" | "lang" | "role" | "pin" | "form";
-
-type GpsStatus = "idle" | "capturing" | "success" | "error" | "denied";
-
-const TUXEDO_BRAND_ID = "64294306-5f42-463d-a5e8-2ad6c81a96de";
-
-const UNITS = ["CFS", "GPM", "Inches", "AF/Day"];
-
-const LABELS = {
-  en: {
-    title: "Water Log",
-    selectLang: "Select Language",
-    whoAreYou: "Who are you?",
-    enterPin: "Enter your 4-digit PIN",
-    pinPlaceholder: "PIN",
-    submit: "Submit Reading",
-    loggingIn: "Verifying...",
-    selectHeadgate: "Select Headgate",
-    measurement: "Measurement",
-    notes: "Notes (optional)",
-    notesPlaceholder: "Notes...",
-    unit: "Unit",
-    loggedInAs: "Logged in as",
-    logout: "Logout",
-    submitting: "Submitting...",
-    success: "Reading submitted!",
-    error: "Error",
-    noHeadgates: "No headgates available",
-    invalidPin: "Invalid PIN",
-    sessionExpired: "Session expired",
-    back: "Back",
-    captureGps: "Capture GPS",
-    capturingGps: "Capturing...",
-    gpsSuccess: "GPS Captured",
-    gpsError: "GPS unavailable",
-    gpsDenied: "Location denied. Tap to retry.",
-    photoLabel: "Photo (optional)",
-    addPhoto: "Add Photo",
-    removePhoto: "Remove",
-    headgateLocked: "QR-locked",
-    locked: "Locked",
-    highAlert: "High",
-    lowAlert: "Low",
-  },
-  es: {
-    title: "Registro de Agua",
-    selectLang: "Seleccionar Idioma",
-    whoAreYou: "¿Quién eres?",
-    enterPin: "Ingrese su PIN de 4 dígitos",
-    pinPlaceholder: "PIN",
-    submit: "Enviar Lectura",
-    loggingIn: "Verificando...",
-    selectHeadgate: "Seleccionar Compuerta",
-    measurement: "Medición",
-    notes: "Notas (opcional)",
-    notesPlaceholder: "Notas...",
-    unit: "Unidad",
-    loggedInAs: "Conectado como",
-    logout: "Salir",
-    submitting: "Enviando...",
-    success: "¡Lectura registrada!",
-    error: "Error",
-    noHeadgates: "No hay compuertas disponibles",
-    invalidPin: "PIN inválido",
-    sessionExpired: "Sesión expirada",
-    back: "Volver",
-    captureGps: "Capturar GPS",
-    capturingGps: "Capturando...",
-    gpsSuccess: "GPS Capturado",
-    gpsError: "GPS no disponible",
-    gpsDenied: "Ubicación denegada. Toca para reintentar.",
-    photoLabel: "Foto (opcional)",
-    addPhoto: "Agregar Foto",
-    removePhoto: "Quitar",
-    headgateLocked: "Bloqueada por QR",
-    locked: "Bloqueada",
-    highAlert: "Alto",
-    lowAlert: "Bajo",
-  },
-};
-
-// ──────────────────────────────────────────────────────────────────────────
-// State (useReducer)
-// ──────────────────────────────────────────────────────────────────────────
-
-type State = {
-  step: Step;
-  lang: Language;
-  pin: string;
-  irrigatorName: string;
-  headgates: Headgate[];
-  selectedHeadgate: string;
-  headgateLocked: boolean;
-  measurement: string;
-  unit: string;
-  notes: string;
-  loading: boolean;
-  error: string;
-  success: boolean;
-  photoPreview: string | null;
-  latitude: number | null;
-  longitude: number | null;
-  gpsStatus: GpsStatus;
-};
-
-type Action =
-  | { type: "SET_STEP"; value: Step }
-  | { type: "SET_LANG"; value: Language }
-  | { type: "SET_PIN"; value: string }
-  | { type: "SET_IRRIGATOR_NAME"; value: string }
-  | { type: "SET_HEADGATES"; value: Headgate[] }
-  | { type: "SET_SELECTED_HEADGATE"; value: string }
-  | { type: "SET_HEADGATE_LOCKED"; value: boolean }
-  | { type: "SET_MEASUREMENT"; value: string }
-  | { type: "SET_UNIT"; value: string }
-  | { type: "SET_NOTES"; value: string }
-  | { type: "SET_LOADING"; value: boolean }
-  | { type: "SET_ERROR"; value: string }
-  | { type: "SET_SUCCESS"; value: boolean }
-  | { type: "SET_PHOTO_PREVIEW"; value: string | null }
-  | { type: "SET_LATITUDE"; value: number | null }
-  | { type: "SET_LONGITUDE"; value: number | null }
-  | { type: "SET_GPS_STATUS"; value: GpsStatus }
-  | { type: "RESET_FORM_FIELDS" }
-  | { type: "RESET_FULL" };
-
-function makeInitialState(): State {
-  // Read cookie preferences on first render. Component is client-only via
-  // <Suspense>, so accessing document.cookie in the lazy initializer is safe.
-  if (typeof document === "undefined") {
-    return {
-      step: "loading",
-      lang: "en",
-      pin: "",
-      irrigatorName: "",
-      headgates: [],
-      selectedHeadgate: "",
-      headgateLocked: false,
-      measurement: "",
-      unit: "CFS",
-      notes: "",
-      loading: false,
-      error: "",
-      success: false,
-      photoPreview: null,
-      latitude: null,
-      longitude: null,
-      gpsStatus: "idle",
-    };
-  }
-  const savedLang = document.cookie.match(/wl_lang=(en|es)/)?.[1];
-  const hasSession = !!document.cookie.match(/wl_session=([^;]+)/);
-  return {
-    step: hasSession ? "form" : "loading",
-    lang: (savedLang as Language) || "en",
-    pin: "",
-    irrigatorName: "",
-    headgates: [],
-    selectedHeadgate: "",
-    headgateLocked: false,
-    measurement: "",
-    unit: "CFS",
-    notes: "",
-    loading: false,
-    error: "",
-    success: false,
-    photoPreview: null,
-    latitude: null,
-    longitude: null,
-    gpsStatus: "idle",
-  };
-}
-
-function reducer(state: State, action: Action): State {
-  switch (action.type) {
-    case "SET_STEP":
-      return { ...state, step: action.value };
-    case "SET_LANG":
-      return { ...state, lang: action.value };
-    case "SET_PIN":
-      return { ...state, pin: action.value };
-    case "SET_IRRIGATOR_NAME":
-      return { ...state, irrigatorName: action.value };
-    case "SET_HEADGATES":
-      return { ...state, headgates: action.value };
-    case "SET_SELECTED_HEADGATE":
-      return { ...state, selectedHeadgate: action.value };
-    case "SET_HEADGATE_LOCKED":
-      return { ...state, headgateLocked: action.value };
-    case "SET_MEASUREMENT":
-      return { ...state, measurement: action.value };
-    case "SET_UNIT":
-      return { ...state, unit: action.value };
-    case "SET_NOTES":
-      return { ...state, notes: action.value };
-    case "SET_LOADING":
-      return { ...state, loading: action.value };
-    case "SET_ERROR":
-      return { ...state, error: action.value };
-    case "SET_SUCCESS":
-      return { ...state, success: action.value };
-    case "SET_PHOTO_PREVIEW":
-      return { ...state, photoPreview: action.value };
-    case "SET_LATITUDE":
-      return { ...state, latitude: action.value };
-    case "SET_LONGITUDE":
-      return { ...state, longitude: action.value };
-    case "SET_GPS_STATUS":
-      return { ...state, gpsStatus: action.value };
-    case "RESET_FORM_FIELDS":
-      return {
-        ...state,
-        measurement: "",
-        notes: "",
-        photoPreview: null,
-        latitude: null,
-        longitude: null,
-        gpsStatus: "idle",
-      };
-    case "RESET_FULL":
-      return {
-        ...state,
-        step: "lang",
-        pin: "",
-        irrigatorName: "",
-        headgates: [],
-        selectedHeadgate: "",
-        measurement: "",
-        notes: "",
-        photoPreview: null,
-        latitude: null,
-        longitude: null,
-        gpsStatus: "idle",
-        headgateLocked: false,
-      };
-  }
-}
-
-function ThresholdBadge({ high, low, t }: { high?: number | null; low?: number | null; t: typeof LABELS.en }) {
-  if (!high && !low) return null;
-  return (
-    <div className="flex gap-1.5 mt-1">
-      {high != null && (
-        <span className="inline-flex items-center gap-0.5 rounded-full bg-red-50 border border-red-200 px-2 py-0.5 text-xs font-semibold text-red-700">
-          ⚠️ {t.highAlert}: {high}
-        </span>
-      )}
-      {low != null && (
-        <span className="inline-flex items-center gap-0.5 rounded-full bg-blue-50 border border-blue-200 px-2 py-0.5 text-xs font-semibold text-blue-700">
-          ⚠️ {t.lowAlert}: {low}
-        </span>
-      )}
-    </div>
-  );
-}
-
-function WaterFieldInner() {
-  const searchParams = useSearchParams();
-  const qrHeadgateToken = searchParams.get("h");
-
-  const [state, dispatch] = useReducer(reducer, undefined, makeInitialState);
-  const photoFileRef = useRef<File | null>(null);
-
-  const t = LABELS[state.lang];
-
-  // On mount, if wl_session cookie is present, load headgates so the
-  // form is populated by the time the user lands. The step itself is
-  // already set in the lazy initializer above.
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    const hasSession = document.cookie.match(/wl_session=([^;]+)/);
-    if (hasSession) {
-      void loadHeadgates();
-    }
-  }, []);
-
-  // QR-locked headgate: derive during render instead of syncing in an effect.
-  // When qrHeadgateToken matches a loaded headgate, override the user's
-  // selection and lock the dropdown. Otherwise fall back to whatever the
-  // user picked (or none).
-  const qrMatchedHeadgate = useMemo(() => {
-    if (!qrHeadgateToken || state.headgates.length === 0) return null;
-    return (
-      state.headgates.find((hg) => hg.id === qrHeadgateToken || hg.name === qrHeadgateToken) ?? null
-    );
-  }, [qrHeadgateToken, state.headgates]);
-
-  const effectiveSelectedHeadgate = qrMatchedHeadgate?.id ?? state.selectedHeadgate;
-  const isHeadgateLocked = qrMatchedHeadgate ? true : state.headgateLocked;
-
-  async function loadHeadgates() {
-    const hgs = await getWaterHeadgates(TUXEDO_BRAND_ID, true);
-    dispatch({ type: "SET_HEADGATES", value: hgs.filter((h) => h.active) });
-  }
-
-  // Show loading spinner next to headgate dropdown
-  const isLoadingHeadgates = state.step === "form" && state.headgates.length === 0;
-
-  async function handleLangSelect(lang: Language) {
-    dispatch({ type: "SET_LANG", value: lang });
-    await setWaterLang(lang);
-    dispatch({ type: "SET_STEP", value: "role" });
-    dispatch({ type: "SET_ERROR", value: "" });
-  }
-
-  async function handlePinSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (state.pin.length !== 4) return;
-    dispatch({ type: "SET_LOADING", value: true });
-    dispatch({ type: "SET_ERROR", value: "" });
-
-    const result = await verifyWaterPin(TUXEDO_BRAND_ID, state.pin);
-
-    if (!result.success) {
-      dispatch({ type: "SET_ERROR", value: result.error === "Invalid PIN" ? LABELS[state.lang].invalidPin : result.error });
-      dispatch({ type: "SET_PIN", value: "" });
-      dispatch({ type: "SET_LOADING", value: false });
-      return;
-    }
-
-    if (result.role === "water_admin") {
-      window.location.href = "/water/admin";
-      return;
-    }
-
-    dispatch({ type: "SET_IRRIGATOR_NAME", value: result.name ?? "" });
-    await loadHeadgates();
-    dispatch({ type: "SET_STEP", value: "form" });
-    dispatch({ type: "SET_LOADING", value: false });
-  }
-
-  async function handleCaptureGps() {
-    if (!navigator.geolocation) {
-      dispatch({ type: "SET_GPS_STATUS", value: "error" });
-      return;
-    }
-    dispatch({ type: "SET_GPS_STATUS", value: "capturing" });
-    navigator.geolocation.getCurrentPosition(
-      (pos) => {
-        dispatch({ type: "SET_LATITUDE", value: pos.coords.latitude });
-        dispatch({ type: "SET_LONGITUDE", value: pos.coords.longitude });
-        dispatch({ type: "SET_GPS_STATUS", value: "success" });
-      },
-      (err) => {
-        if (err.code === err.PERMISSION_DENIED) {
-          dispatch({ type: "SET_GPS_STATUS", value: "denied" });
-        } else {
-          dispatch({ type: "SET_GPS_STATUS", value: "error" });
-        }
-      },
-      { enableHighAccuracy: true, timeout: 10000 }
-    );
-  }
-
-  function handlePhotoChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    if (file.size > 5 * 1024 * 1024) {
-      dispatch({ type: "SET_ERROR", value: "Photo must be under 5MB" });
-      return;
-    }
-    if (!["image/jpeg", "image/png"].includes(file.type)) {
-      dispatch({ type: "SET_ERROR", value: "Only JPG or PNG photos allowed" });
-      return;
-    }
-    photoFileRef.current = file;
-    const reader = new FileReader();
-    reader.onload = (ev) => dispatch({ type: "SET_PHOTO_PREVIEW", value: ev.target?.result as string });
-    reader.readAsDataURL(file);
-  }
-
-  function removePhoto() {
-    photoFileRef.current = null;
-    dispatch({ type: "SET_PHOTO_PREVIEW", value: null });
-  }
-
-  async function handleSubmitEntry(e: React.FormEvent) {
-    e.preventDefault();
-    if (!effectiveSelectedHeadgate || !state.measurement) return;
-    dispatch({ type: "SET_LOADING", value: true });
-    dispatch({ type: "SET_ERROR", value: "" });
-
-    let photoUrl: string | undefined;
-    if (photoFileRef.current) {
-      const formData = new FormData();
-      formData.append("file", photoFileRef.current);
-      formData.append("bucket", "water-log-photos");
-      try {
-        const uploadRes = await fetch("/api/water-photo-upload", {
-          method: "POST",
-          body: formData,
-        });
-        const uploadData = await uploadRes.json();
-        if (uploadData.url) {
-          photoUrl = uploadData.url;
-        }
-      } catch {
-        // photo upload failed — submit without photo
-      }
-    }
-
-    const result = await submitWaterEntry(
-      effectiveSelectedHeadgate,
-      parseFloat(state.measurement),
-      state.unit,
-      state.notes,
-      photoUrl,
-      state.latitude ?? undefined,
-      state.longitude ?? undefined,
-      isHeadgateLocked
-    );
-
-    if (!result.success) {
-      if (result.error === "Session expired or invalid" || result.error === "Not logged in") {
-        dispatch({ type: "SET_STEP", value: "lang" });
-        dispatch({ type: "SET_PIN", value: "" });
-        dispatch({ type: "SET_ERROR", value: LABELS[state.lang].sessionExpired });
-      } else {
-        dispatch({ type: "SET_ERROR", value: result.error });
-      }
-      dispatch({ type: "SET_LOADING", value: false });
-      return;
-    }
-
-    dispatch({ type: "SET_SUCCESS", value: true });
-    dispatch({ type: "RESET_FORM_FIELDS" });
-    photoFileRef.current = null;
-    dispatch({ type: "SET_LOADING", value: false });
-
-    setTimeout(() => dispatch({ type: "SET_SUCCESS", value: false }), 3000);
-  }
-
-  async function handleLogout() {
-    await logoutWater();
-    dispatch({ type: "RESET_FULL" });
-  }
-
-  if (state.step === "loading") {
-    return <LoadingScreen />;
-  }
-
-  if (state.step === "lang") {
-    return <LanguageSelectionScreen t={t} onSelect={handleLangSelect} />;
-  }
-
-  if (state.step === "role") {
-    return (
-      <RoleSelectionScreen
-        t={t}
-        onSelectRole={() => dispatch({ type: "SET_STEP", value: "pin" })}
-        onBack={() => dispatch({ type: "SET_STEP", value: "lang" })}
-      />
-    );
-  }
-
-  if (state.step === "pin") {
-    return (
-      <PinEntryScreen
-        t={t}
-        pin={state.pin}
-        loading={state.loading}
-        error={state.error}
-        onSetPin={(v) => dispatch({ type: "SET_PIN", value: v })}
-        onBack={() => dispatch({ type: "SET_STEP", value: "role" })}
-        onSubmit={handlePinSubmit}
-      />
-    );
-  }
-
-  // Main log form
-  const selectedHg = state.headgates.find((hg) => hg.id === effectiveSelectedHeadgate);
-
-  return (
-    <WaterLogForm
-      t={t}
-      step={state.step}
-      loading={state.loading}
-      error={state.error}
-      success={state.success}
-      irrigatorName={state.irrigatorName}
-      measurement={state.measurement}
-      unit={state.unit}
-      notes={state.notes}
-      latitude={state.latitude}
-      longitude={state.longitude}
-      gpsStatus={state.gpsStatus}
-      photoPreview={state.photoPreview}
-      headgates={state.headgates}
-      selectedHeadgate={effectiveSelectedHeadgate}
-      isHeadgateLocked={isHeadgateLocked}
-      isLoadingHeadgates={isLoadingHeadgates}
-      selectedHg={selectedHg ?? null}
-      onSetMeasurement={(v) => dispatch({ type: "SET_MEASUREMENT", value: v })}
-      onSetUnit={(v) => dispatch({ type: "SET_UNIT", value: v })}
-      onSetNotes={(v) => dispatch({ type: "SET_NOTES", value: v })}
-      onSetSelectedHeadgate={(v) => dispatch({ type: "SET_SELECTED_HEADGATE", value: v })}
-      onCaptureGps={handleCaptureGps}
-      onPhotoChange={handlePhotoChange}
-      onRemovePhoto={removePhoto}
-      onSubmit={handleSubmitEntry}
-      onLogout={handleLogout}
-    />
-  );
-}
-
-// ── LoadingScreen subcomponent ──────────────────────────────────────────────
-
-function LoadingScreen() {
-  return (
-    <div className="min-h-screen bg-[#fdfaf2] flex flex-col items-center justify-center p-6">
-      <div className="w-full max-w-xs text-center">
-        <div className="mx-auto mb-4 flex justify-center">
-          <WaterGauge size={64} level={null} status="open" />
-        </div>
-        <div className="w-12 h-12 rounded-full border-[3px] border-[#d4d9d3] border-t-[#1a4d2e] animate-spin mx-auto mb-4" />
-        <p className="text-[#57694e] text-base font-medium">Loading…</p>
-      </div>
-    </div>
-  );
-}
-
-// ── LanguageSelectionScreen subcomponent ────────────────────────────────────
-
-function LanguageSelectionScreen({
-  t,
-  onSelect,
-}: {
-  t: typeof LABELS.en;
-  onSelect: (lang: Language) => void;
-}) {
-  return (
-    <div className="min-h-screen bg-[#fdfaf2] flex flex-col items-center justify-center p-6">
-      <div className="w-full max-w-xs">
-        <div className="mb-3 flex justify-center">
-          <WaterGauge size={56} level={null} status="open" />
-        </div>
-        <h1
-          className="text-3xl font-bold text-[#1a4d2e] mb-1 text-center tracking-tight"
-          style={{ fontFamily: "var(--font-display, Georgia, serif)" }}
-        >
-          {t.title}
-        </h1>
-        <p className="text-[#57694e] text-center mb-1 text-xs font-mono uppercase tracking-[0.25em]">
-          Tuxedo Ditch Co.
-        </p>
-        <p className="text-[#57694e] text-center mb-8 text-sm">{t.selectLang}</p>
-        <div className="flex flex-col gap-3">
-          <button type="button"
-            onClick={() => onSelect("en")}
-            className="w-full rounded-xl bg-white px-6 py-5 text-xl font-semibold text-[#1d1d1f] shadow-sm ring-1 ring-[#d4d9d3] hover:bg-[#f0fdf4] hover:ring-[#1a4d2e] transition min-h-[64px]"
-          >
-            English
-          </button>
-          <button type="button"
-            onClick={() => onSelect("es")}
-            className="w-full rounded-xl bg-white px-6 py-5 text-xl font-semibold text-[#1d1d1f] shadow-sm ring-1 ring-[#d4d9d3] hover:bg-[#f0fdf4] hover:ring-[#1a4d2e] transition min-h-[64px]"
-          >
-            Español
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── RoleSelectionScreen subcomponent ────────────────────────────────────────
-
-function RoleSelectionScreen({
-  t,
-  onSelectRole,
-  onBack,
-}: {
-  t: typeof LABELS.en;
-  onSelectRole: () => void;
-  onBack: () => void;
-}) {
-  return (
-    <div className="min-h-screen bg-[#fdfaf2] flex flex-col items-center justify-center p-6">
-      <div className="w-full max-w-xs">
-        <button type="button"
-          onClick={onBack}
-          className="text-sm text-[#57694e] mb-6 hover:text-[#1a4d2e]"
-        >
-          ← {t.back}
-        </button>
-        <h1
-          className="text-3xl font-bold text-[#1a4d2e] mb-1 text-center tracking-tight"
-          style={{ fontFamily: "var(--font-display, Georgia, serif)" }}
-        >
-          {t.title}
-        </h1>
-        <p className="text-[#57694e] text-center mb-8">{t.whoAreYou}</p>
-        <div className="flex flex-col gap-3">
-          <button type="button"
-            onClick={onSelectRole}
-            className="w-full rounded-xl bg-white px-6 py-5 text-xl font-semibold text-[#1d1d1f] shadow-sm ring-1 ring-[#d4d9d3] hover:bg-[#f0fdf4] hover:ring-[#1a4d2e] transition min-h-[64px]"
-          >
-            Irrigator
-          </button>
-          <button type="button"
-            onClick={onSelectRole}
-            className="w-full rounded-xl bg-[#1a4d2e] px-6 py-5 text-xl font-semibold text-white shadow-sm ring-1 ring-[#1a4d2e] hover:bg-[#14532d] transition min-h-[64px]"
-          >
-            Admin
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── PinEntryScreen subcomponent ─────────────────────────────────────────────
-
-function PinEntryScreen({
-  t,
-  pin,
-  loading,
-  error,
-  onSetPin,
-  onBack,
-  onSubmit,
-}: {
-  t: typeof LABELS.en;
-  pin: string;
-  loading: boolean;
-  error: string;
-  onSetPin: (v: string) => void;
-  onBack: () => void;
-  onSubmit: (e: React.FormEvent) => void;
-}) {
-  return (
-    <div className="min-h-screen bg-[#fdfaf2] flex flex-col items-center justify-center p-6">
-      <div className="w-full max-w-xs">
-        <button type="button"
-          onClick={onBack}
-          className="text-sm text-[#57694e] mb-6 hover:text-[#1a4d2e]"
-        >
-          ← {t.back}
-        </button>
-        <h1
-          className="text-3xl font-bold text-[#1a4d2e] mb-1 text-center tracking-tight"
-          style={{ fontFamily: "var(--font-display, Georgia, serif)" }}
-        >
-          {t.title}
-        </h1>
-        <p className="text-[#57694e] text-center mb-8">{t.enterPin}</p>
-
-        <form onSubmit={onSubmit}>
-          <input aria-label="Password"
-            type="password"
-            inputMode="numeric"
-            pattern="[0-9]*"
-            maxLength={4}
-            value={pin}
-            onChange={(e) => onSetPin(e.target.value.replace(/\D/g, "").slice(0, 4))}
-            placeholder={t.pinPlaceholder}
-            className="w-full rounded-xl border-2 border-[#d4d9d3] bg-white px-6 py-6 text-center text-4xl font-bold tracking-widest text-[#1d1d1f] outline-none focus:border-[#1a4d2e] mb-4"
-            style={{ letterSpacing: "0.3em" }}
-          />
-          {error && (
-            <p className="text-center text-[#b91c1c] text-sm mb-4">{error}</p>
-          )}
-          <button
-            type="submit"
-            disabled={pin.length !== 4 || loading}
-            className="w-full rounded-xl bg-[#1a4d2e] px-6 py-5 text-xl font-bold text-white disabled:opacity-50 hover:bg-[#14532d] transition min-h-[64px]"
-          >
-            {loading ? t.loggingIn : t.submit}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-// ── WaterLogForm subcomponent ───────────────────────────────────────────────
-
-function WaterLogForm({
-  t,
-  step,
-  loading,
-  error,
-  success,
-  irrigatorName,
-  measurement,
-  unit,
-  notes,
-  latitude,
-  longitude,
-  gpsStatus,
-  photoPreview,
-  headgates,
-  selectedHeadgate,
-  isHeadgateLocked,
-  isLoadingHeadgates,
-  selectedHg,
-  onSetMeasurement,
-  onSetUnit,
-  onSetNotes,
-  onSetSelectedHeadgate,
-  onCaptureGps,
-  onPhotoChange,
-  onRemovePhoto,
-  onSubmit,
-  onLogout,
-}: {
-  t: typeof LABELS.en;
-  step: Step;
-  loading: boolean;
-  error: string;
-  success: boolean;
-  irrigatorName: string;
-  measurement: string;
-  unit: string;
-  notes: string;
-  latitude: number | null;
-  longitude: number | null;
-  gpsStatus: GpsStatus;
-  photoPreview: string | null;
-  headgates: Headgate[];
-  selectedHeadgate: string;
-  isHeadgateLocked: boolean;
-  isLoadingHeadgates: boolean;
-  selectedHg: Headgate | null;
-  onSetMeasurement: (v: string) => void;
-  onSetUnit: (v: string) => void;
-  onSetNotes: (v: string) => void;
-  onSetSelectedHeadgate: (v: string) => void;
-  onCaptureGps: () => void;
-  onPhotoChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onRemovePhoto: () => void;
-  onSubmit: (e: React.FormEvent) => void;
-  onLogout: () => void;
-}) {
-  return (
-    <div className="min-h-screen bg-[#fdfaf2]">
-      {/* Header */}
-      <div className="bg-[#1a4d2e] px-4 py-4">
-        <div className="mx-auto max-w-lg flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <WaterGauge size={32} level={null} status="open" />
-            <div>
-              <h1
-                className="text-xl font-bold text-white"
-                style={{ fontFamily: "var(--font-display, Georgia, serif)" }}
-              >
-                {t.title}
-              </h1>
-              <p className="text-xs text-[#bbf7d0] font-mono uppercase tracking-wider">
-                {t.loggedInAs}: {irrigatorName}
-              </p>
-            </div>
-          </div>
-          <button type="button"
-            onClick={onLogout}
-            className="rounded-lg bg-[#14532d] px-4 py-2 text-sm font-semibold text-white hover:bg-[#166534] transition-colors min-h-[44px]"
-          >
-            {t.logout}
-          </button>
-        </div>
-      </div>
-
-      {/* Step progress indicator */}
-      <div className="bg-[#fafaf7] border-b border-[#d4d9d3] px-4 py-2">
-        <div className="mx-auto max-w-lg">
-          <div className="flex items-center gap-1.5">
-            {["lang", "role", "pin", "form"].map((s, i) => {
-              const stepIndex = ["lang", "role", "pin", "form"].indexOf(step as string);
-              const isActive = step === s;
-              const isPast = stepIndex > i;
-              return (
-                <div key={s} className="flex items-center gap-1.5">
-                  <div className={`w-2 h-2 rounded-full ${isActive ? "bg-[#1a4d2e]" : isPast ? "bg-[#22c55e]" : "bg-[#d4d9d3]"}`} />
-                  {i < 3 && <div className={`w-6 h-0.5 ${isPast ? "bg-[#22c55e]" : "bg-[#d4d9d3]"}`} />}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-
-      <form
-        onSubmit={onSubmit}
-        className="mx-auto max-w-lg px-4 py-6 space-y-5"
-      >
-        {/* Success banner */}
-        {success && (
-          <div className="rounded-xl bg-green-100 border border-green-200 px-4 py-4 text-center text-green-800 font-semibold">
-            ✓ {t.success}
-          </div>
-        )}
-
-        {/* Error banner */}
-        {error && !success && (
-          <div className="rounded-xl bg-red-100 border border-red-200 px-4 py-4 text-center text-red-800 font-semibold">
-            {t.error}: {error}
-          </div>
-        )}
-
-        {/* Headgate selector */}
-        <div>
-          <label className="block text-base font-semibold text-stone-700 mb-2" htmlFor="fld-tselectheadgate">
-            {t.selectHeadgate}
-          </label>
-          {isHeadgateLocked ? (
-            <div className="w-full rounded-xl border-2 border-amber-300 bg-amber-50 px-4 py-4 text-lg font-bold text-amber-900">
-              <div className="flex items-center gap-2">
-                <svg className="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
-                </svg>
-                {selectedHg?.name ?? selectedHeadgate}
-                <span className="ml-1 inline-flex items-center gap-0.5 rounded bg-amber-200 px-2 py-0.5 text-xs font-bold text-amber-800">
-                  🔒 {t.locked}
-                </span>
-              </div>
-              {selectedHg && (
-                <ThresholdBadge high={selectedHg.high_threshold} low={selectedHg.low_threshold} t={t} />
-              )}
-            </div>
-          ) : isLoadingHeadgates ? (
-            <div className="w-full rounded-xl border-2 border-stone-300 bg-stone-100 px-4 py-5 flex items-center gap-3">
-              <div className="w-5 h-5 rounded-full border-2 border-stone-400 border-t-stone-700 animate-spin" />
-              <span className="text-stone-500 text-base font-medium">Loading headgates...</span>
-            </div>
-          ) : (
-            <select id="fld-tselectheadgate" aria-label="Select"
-              value={selectedHeadgate}
-              onChange={(e) => onSetSelectedHeadgate(e.target.value)}
-              required
-              className="w-full rounded-xl border-2 border-stone-300 bg-white px-4 py-4 text-lg outline-none focus:border-stone-900 min-h-[56px] appearance-none"
-              style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2371717b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E")`, backgroundRepeat: "no-repeat", backgroundPosition: "right 16px center", backgroundSize: "20px" }}
-            >
-              <option value="" disabled>{t.selectHeadgate}</option>
-              {headgates.length === 0 && <option disabled>{t.noHeadgates}</option>}
-              {headgates.map((hg) => (
-                <option key={hg.id} value={hg.id}>
-                  {hg.name}
-                  {hg.high_threshold != null ? ` (High: ${hg.high_threshold})` : ""}
-                  {hg.low_threshold != null ? ` (Low: ${hg.low_threshold})` : ""}
-                </option>
-              ))}
-            </select>
-          )}
-          {selectedHg && !isHeadgateLocked && (
-            <ThresholdBadge high={selectedHg.high_threshold} low={selectedHg.low_threshold} t={t} />
-          )}
-        </div>
-
-        {/* Measurement + Unit row */}
-        <div className="flex gap-3">
-          <div className="flex-1">
-            <label htmlFor="fld-1-tmeasurement"  className="block text-base font-semibold text-stone-700 mb-2">{t.measurement}</label>
-            <input id="fld-1-tmeasurement"  aria-label="0.00"
-              type="number"
-              step="any"
-              value={measurement}
-              onChange={(e) => onSetMeasurement(e.target.value)}
-              required
-              placeholder="0.00"
-              className="w-full rounded-xl border-2 border-stone-300 px-4 py-4 text-2xl font-bold text-stone-900 outline-none focus:border-stone-900 min-h-[60px]"
-              inputMode="decimal"
-            />
-          </div>
-          <div className="w-32">
-            <label htmlFor="fld-2-tunit"  className="block text-base font-semibold text-stone-700 mb-2">{t.unit}</label>
-            <select id="fld-2-tunit"  aria-label="Select"
-              value={unit}
-              onChange={(e) => onSetUnit(e.target.value)}
-              className="w-full rounded-xl border-2 border-stone-300 bg-white px-4 py-4 text-lg font-semibold outline-none focus:border-stone-900 min-h-[60px]"
-            >
-              {UNITS.map((u) => (
-                <option key={u} value={u}>{u}</option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        {/* GPS Capture */}
-        <div>
-          <label className="block text-base font-semibold text-stone-700 mb-2" htmlFor="fld-gps-location">
-            GPS Location
-          </label>
-          <button
-            type="button"
-            onClick={onCaptureGps}
-            disabled={gpsStatus === "capturing"}
-            className={`w-full rounded-xl border-2 px-4 py-4 text-base font-semibold transition-colors flex items-center justify-center gap-2 min-h-[56px] ${
-              gpsStatus === "success"
-                ? "border-green-500 bg-green-50 text-green-700"
-                : gpsStatus === "denied" || gpsStatus === "error"
-                ? "border-red-300 bg-red-50 text-red-600"
-                : "border-stone-300 bg-white text-stone-700 hover:bg-stone-50"
-            }`}
-          >
-            {gpsStatus === "capturing" && (
-              <span className="w-5 h-5 border-2 border-stone-400 border-t-stone-700 rounded-full animate-spin flex-shrink-0" />
-            )}
-            {gpsStatus === "success" && "✓"}
-            {gpsStatus === "capturing" && t.capturingGps}
-            {gpsStatus === "idle" && t.captureGps}
-            {gpsStatus === "success" && `${t.gpsSuccess} — ${latitude?.toFixed(5)}, ${longitude?.toFixed(5)}`}
-            {gpsStatus === "error" && t.gpsError}
-            {gpsStatus === "denied" && t.gpsDenied}
-          </button>
-        </div>
-
-        {/* Photo Upload */}
-        <div>
-          <label className="block text-base font-semibold text-stone-700 mb-2" htmlFor="fld-tphotolabel">
-            {t.photoLabel}
-          </label>
-          {photoPreview ? (
-            <div className="relative rounded-xl overflow-hidden border-2 border-stone-300">
-              <Image src={photoPreview} alt="Preview" fill sizes="(max-width: 640px) 100vw, 480px" style={{ objectFit: "cover" }} />
-              <button
-                type="button"
-                onClick={onRemovePhoto}
-                className="absolute top-2 right-2 rounded-full bg-black/70 text-white text-xs px-3 py-1.5 font-semibold hover:bg-black/90 min-h-[36px]"
-              >
-                ✕ {t.removePhoto}
-              </button>
-            </div>
-          ) : (
-            <label className="flex items-center justify-center w-full rounded-xl border-2 border-dashed border-stone-300 cursor-pointer py-5 text-base font-semibold text-stone-500 hover:border-stone-500 hover:text-stone-700 transition-colors min-h-[80px]" htmlFor="fld--taddphoto">
-              <span>📷 {t.addPhoto}</span>
-              <input
-                type="file"
-                accept="image/jpeg,image/png"
-                onChange={onPhotoChange}
-                className="hidden"
-              />
-            </label>
-          )}
-        </div>
-
-        {/* Notes */}
-        <div>
-          <label htmlFor="fld-3-tnotes"  className="block text-base font-semibold text-stone-700 mb-2">{t.notes}</label>
-          <textarea id="fld-3-tnotes"  aria-label="Textarea"
-            value={notes}
-            onChange={(e) => onSetNotes(e.target.value)}
-            placeholder={t.notesPlaceholder}
-            rows={2}
-            className="w-full rounded-xl border-2 border-stone-300 px-4 py-3 text-base outline-none focus:border-stone-900 resize-none min-h-[80px]"
-          />
-        </div>
-
-        {/* Submit */}
-        <button
-          type="submit"
-          disabled={!selectedHeadgate || !measurement || loading}
-          className="w-full rounded-xl bg-green-600 px-6 py-5 text-xl font-bold text-white disabled:opacity-50 active:bg-green-700 min-h-[64px] shadow-lg shadow-green-900/20 flex items-center justify-center gap-2"
-        >
-          {loading ? (
-            <>
-              <span className="w-5 h-5 rounded-full border-2 border-white/40 border-t-white animate-spin" />
-              {t.submitting}
-            </>
-          ) : (
-            <>
-              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/>
-              </svg>
-              {t.submit}
-            </>
-          )}
-        </button>
-        {loading && (
-          <p className="text-center text-xs text-stone-400 mt-1">Submitting your reading...</p>
-        )}
-      </form>
-    </div>
-  );
-}
+/**
+ * WaterFieldClient — entrypoint for the public `/water` route.
+ *
+ * As of 2026-07, this delegates to the new mobile-first
+ * `MobileWaterApp` state machine. The legacy implementation that
+ * lived here supported language selection and role-based admin
+ * routing; both are reachable from the new flow via dedicated
+ * secondary routes (`/water/admin` for the admin side, the QR
+ * picker for Spanish signage in the future) but the primary
+ * `/water` flow is now a clean three-screen Apple-HIG experience:
+ *   PIN  →  Headgates  →  Log
+ *
+ * The wrapping div uses `100dvh` so the iOS Safari address bar
+ * collapse doesn't trigger layout jumps, and `100vh` as a
+ * fallback for older browsers.
+ */
+import { Suspense } from "react";
+import { MobileWaterApp } from "./mobile/MobileWaterApp";
 
 export default function WaterFieldClient() {
   return (
-    <Suspense fallback={<div className="min-h-screen bg-stone-50 flex items-center justify-center"><span className="text-stone-500">Loading...</span></div>}>
-      <WaterFieldInner />
-    </Suspense>
+    <div
+      className="fixed inset-0 bg-[#F2F2F7]"
+      style={{
+        // 100dvh = dynamic viewport height (excludes collapsing
+        // iOS Safari chrome). 100svh excludes the bottom safe-area
+        // inset, which is what we want when the soft keyboard is
+        // up. Fallback to 100vh for older browsers.
+        height: "100dvh",
+        minHeight: "100vh",
+        // Disable rubber-band scrolling on the whole shell — each
+        // screen manages its own internal scroll.
+        overscrollBehavior: "none",
+      }}
+    >
+      <Suspense
+        fallback={
+          <div className="flex h-full items-center justify-center">
+            <div className="text-[15px] text-[rgba(60,60,67,0.55)]">
+              Loading…
+            </div>
+          </div>
+        }
+      >
+        <MobileWaterApp />
+      </Suspense>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/water/mobile/HeadgateList.tsx b/src/components/water/mobile/HeadgateList.tsx
new file mode 100644
index 0000000..d6be925
--- /dev/null
+++ b/src/components/water/mobile/HeadgateList.tsx
@@ -0,0 +1,340 @@
+"use client";
+
+/**
+ * MobileWaterHeadgateList — headgate selection screen.
+ *
+ * Visual structure (Apple HIG grouped list):
+ *   - Sticky top nav: small back chevron + "Headgates" title +
+ *     logout icon on the right.
+ *   - Section header ("ACTIVE HEADGATES") with a count chip.
+ *   - One tappable card per headgate. Each card has:
+ *       - Leading gauge icon (status-tinted)
+ *       - Bold headgate name
+ *       - Subtitle = "geocode" (notes) OR a derived status line
+ *       - Meta row = unit + last-logged relative time
+ *       - Trailing chevron
+ *       - Subtle threshold badge if high/low thresholds are set
+ *   - Pull-to-refresh at the top.
+ *   - "No active headgates" empty state with an icon and CTA back to
+ *     refresh when the operator has just added a gate.
+ */
+import { useCallback } from "react";
+import type { FieldHeadgate } from "./types";
+import {
+  ChevronRight,
+  Droplet,
+  Gauge,
+  Logout,
+  Pin,
+  Spinner,
+} from "./icons";
+import { MobilePullToRefresh } from "./PullToRefresh";
+import { formatRelativeTime, headgateSubtitle } from "./format";
+
+type Props = {
+  /** Optional display name of the logged-in irrigator (for the header). */
+  irrigatorName?: string;
+  headgates: FieldHeadgate[];
+  loading: boolean;
+  error: string | null;
+  onSelect: (headgate: FieldHeadgate) => void;
+  onRefresh: () => Promise<void> | void;
+  onLogout: () => void;
+};
+
+export function MobileWaterHeadgateList({
+  irrigatorName,
+  headgates,
+  loading,
+  error,
+  onSelect,
+  onRefresh,
+  onLogout,
+}: Props) {
+  const active = headgates.filter((h) => h.active);
+
+  return (
+    <div
+      className="flex h-full flex-col bg-[#F2F2F7]"
+      style={{
+        paddingTop: "env(safe-area-inset-top)",
+      }}
+    >
+      {/* ── Top nav ──────────────────────────────────────────────── */}
+      <header
+        className="sticky top-0 z-30 flex h-11 items-center justify-between border-b border-[rgba(60,60,67,0.12)] bg-[rgba(255,255,255,0.85)] px-2"
+        style={{
+          paddingTop: "env(safe-area-inset-top)",
+          height: "calc(44px + env(safe-area-inset-top))",
+          backdropFilter: "blur(20px) saturate(180%)",
+          WebkitBackdropFilter: "blur(20px) saturate(180%)",
+        }}
+      >
+        <div className="flex items-center gap-1">
+          {/* Placeholder to keep the title centered — the back
+            *  chevron would lead to the PIN screen, which the user
+            *  got here from. Leaving it as just the title to keep
+            *  the nav minimal per HIG. */}
+          <span className="w-9" />
+        </div>
+        <h1
+          className="absolute left-1/2 -translate-x-1/2 text-[17px] font-semibold text-[#1d1d1f]"
+          style={{
+            fontFamily:
+              "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+          }}
+        >
+          Headgates
+        </h1>
+        <button
+          type="button"
+          onClick={onLogout}
+          aria-label="Sign out"
+          className="flex h-9 w-9 items-center justify-center rounded-full text-[#14532d] active:bg-[rgba(120,120,128,0.16)]"
+        >
+          <Logout size={20} />
+        </button>
+      </header>
+
+      {/* ── Scrollable list ─────────────────────────────────────── */}
+      <MobilePullToRefresh onRefresh={onRefresh} disabled={loading}>
+        <div className="px-4 pb-[max(env(safe-area-inset-bottom),1.25rem)] pt-3">
+          {irrigatorName && (
+            <p className="mb-4 px-1 text-[13px] font-medium uppercase tracking-[0.08em] text-[rgba(60,60,67,0.5)]">
+              Signed in as {irrigatorName}
+            </p>
+          )}
+
+          {/* Error banner */}
+          {error && (
+            <div
+              role="alert"
+              className="mb-3 flex items-start gap-2 rounded-[12px] bg-[rgba(255,59,48,0.10)] px-4 py-3 text-[15px] text-[#7f1d1d]"
+            >
+              <span className="mt-0.5">⚠️</span>
+              <span>{error}</span>
+            </div>
+          )}
+
+          {/* Section header */}
+          <div className="mb-2 flex items-end justify-between px-3 pt-1">
+            <h2 className="text-[13px] font-semibold uppercase tracking-[0.06em] text-[rgba(60,60,67,0.55)]">
+              Active headgates
+            </h2>
+            <span className="text-[13px] font-medium text-[rgba(60,60,67,0.45)]">
+              {active.length}
+            </span>
+          </div>
+
+          {loading && active.length === 0 ? (
+            <ListSkeleton />
+          ) : active.length === 0 ? (
+            <EmptyState onRefresh={onRefresh} refreshing={loading} />
+          ) : (
+            <ul className="overflow-hidden rounded-[14px] bg-white shadow-[0_1px_2px_rgba(0,0,0,0.04),0_1px_0_rgba(0,0,0,0.02)]">
+              {active.map((hg, i) => (
+                <li key={hg.id}>
+                  <HeadgateCard
+                    headgate={hg}
+                    isLast={i === active.length - 1}
+                    onClick={() => onSelect(hg)}
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {/* Footer note */}
+          {active.length > 0 && (
+            <p className="mt-4 px-3 text-center text-[12px] text-[rgba(60,60,67,0.4)]">
+              Pull down to refresh the list
+            </p>
+          )}
+        </div>
+      </MobilePullToRefresh>
+    </div>
+  );
+}
+
+// ── Headgate card ────────────────────────────────────────────────────────
+
+function HeadgateCard({
+  headgate,
+  isLast,
+  onClick,
+}: {
+  headgate: FieldHeadgate;
+  isLast: boolean;
+  onClick: () => void;
+}) {
+  const subtitle = headgateSubtitle(headgate);
+  const lastUsed = formatRelativeTime(headgate.last_used_at);
+  const isClosed = headgate.status === "closed";
+  const isMaintenance = headgate.status === "maintenance";
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={isClosed || isMaintenance}
+      className={[
+        "group flex w-full items-center gap-3 px-4 py-4 text-left transition-colors",
+        "active:bg-[rgba(120,120,128,0.12)]",
+        isClosed || isMaintenance ? "opacity-55" : "",
+      ].join(" ")}
+      style={{
+        borderBottom: isLast ? "none" : "1px solid rgba(60,60,67,0.10)",
+        minHeight: 76,
+      }}
+    >
+      {/* Leading icon — colored by status */}
+      <div
+        className="flex h-11 w-11 shrink-0 items-center justify-center rounded-[10px]"
+        style={{
+          background: isMaintenance
+            ? "rgba(255,149,0,0.14)"
+            : isClosed
+              ? "rgba(120,120,128,0.14)"
+              : "rgba(20,83,45,0.10)",
+          color: isMaintenance
+            ? "#a16207"
+            : isClosed
+              ? "#86868b"
+              : "#14532d",
+        }}
+      >
+        <Gauge size={22} />
+      </div>
+
+      {/* Body — name + subtitle + meta */}
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span
+            className="truncate text-[17px] font-semibold leading-[1.2] text-[#1d1d1f]"
+            style={{
+              fontFamily:
+                "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+            }}
+          >
+            {headgate.name}
+          </span>
+          {(headgate.high_threshold != null ||
+            headgate.low_threshold != null) && (
+            <ThresholdDot
+              high={headgate.high_threshold}
+              low={headgate.low_threshold}
+            />
+          )}
+        </div>
+        <div className="mt-0.5 flex items-center gap-1.5 text-[13px] text-[rgba(60,60,67,0.6)]">
+          <Pin size={13} className="shrink-0 opacity-60" />
+          <span className="truncate">{subtitle}</span>
+        </div>
+        <div className="mt-1 flex items-center gap-2 text-[12px] text-[rgba(60,60,67,0.45)]">
+          <span className="rounded-full bg-[rgba(120,120,128,0.12)] px-2 py-0.5 font-medium">
+            {headgate.unit}
+          </span>
+          <span>·</span>
+          <span>{lastUsed}</span>
+        </div>
+      </div>
+
+      {/* Trailing chevron */}
+      <ChevronRight size={18} className="shrink-0 text-[rgba(60,60,67,0.3)]" />
+    </button>
+  );
+}
+
+// ── Threshold dot (small indicator on the card row) ────────────────────
+
+function ThresholdDot({
+  high,
+}: {
+  high: number | null;
+  low: number | null;
+}) {
+  return (
+    <span
+      className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide"
+      style={{
+        background: high != null ? "rgba(255,59,48,0.12)" : "rgba(0,122,255,0.12)",
+        color: high != null ? "#7f1d1d" : "#1e3a8a",
+      }}
+    >
+      {high != null ? "Hi" : "Lo"}
+    </span>
+  );
+}
+
+// ── Skeleton ────────────────────────────────────────────────────────────
+
+function ListSkeleton() {
+  return (
+    <ul className="overflow-hidden rounded-[14px] bg-white shadow-[0_1px_2px_rgba(0,0,0,0.04),0_1px_0_rgba(0,0,0,0.02)]">
+      {[0, 1, 2, 3].map((i) => (
+        <li
+          key={i}
+          className="flex animate-pulse items-center gap-3 px-4 py-4"
+          style={{
+            borderBottom: i === 3 ? "none" : "1px solid rgba(60,60,67,0.10)",
+          }}
+        >
+          <div className="h-11 w-11 rounded-[10px] bg-[rgba(120,120,128,0.16)]" />
+          <div className="flex-1 space-y-2">
+            <div className="h-4 w-2/3 rounded bg-[rgba(120,120,128,0.16)]" />
+            <div className="h-3 w-1/2 rounded bg-[rgba(120,120,128,0.12)]" />
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// ── Empty state ─────────────────────────────────────────────────────────
+
+function EmptyState({
+  onRefresh,
+  refreshing,
+}: {
+  onRefresh: () => Promise<void> | void;
+  refreshing: boolean;
+}) {
+  const handleRefresh = useCallback(async () => {
+    if (!refreshing) await onRefresh();
+  }, [onRefresh, refreshing]);
+
+  return (
+    <div className="rounded-[14px] bg-white px-6 py-12 text-center shadow-[0_1px_2px_rgba(0,0,0,0.04),0_1px_0_rgba(0,0,0,0.02)]">
+      <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-[rgba(20,83,45,0.10)]">
+        <Droplet size={28} className="text-[#14532d]" />
+      </div>
+      <h3 className="mb-1 text-[17px] font-semibold text-[#1d1d1f]">
+        No active headgates
+      </h3>
+      <p className="mx-auto mb-5 max-w-xs text-[15px] leading-[1.4] text-[rgba(60,60,67,0.6)]">
+        Once your supervisor activates a headgate, it&apos;ll show up here.
+        Pull down to check for updates.
+      </p>
+      <button
+        type="button"
+        onClick={handleRefresh}
+        disabled={refreshing}
+        className="inline-flex h-11 items-center justify-center gap-2 rounded-[10px] bg-[#14532d] px-5 text-[15px] font-semibold text-white active:opacity-80 disabled:opacity-60"
+        style={{
+          boxShadow: "0 4px 12px rgba(20,83,45,0.25)",
+        }}
+      >
+        {refreshing ? (
+          <>
+            <Spinner size={16} className="text-white" style={{ animation: "spin 0.8s linear infinite" }} />
+            Checking…
+          </>
+        ) : (
+          "Refresh"
+        )}
+      </button>
+    </div>
+  );
+}
+
+export default MobileWaterHeadgateList;
\ No newline at end of file
diff --git a/src/components/water/mobile/LogForm.tsx b/src/components/water/mobile/LogForm.tsx
new file mode 100644
index 0000000..6509051
--- /dev/null
+++ b/src/components/water/mobile/LogForm.tsx
@@ -0,0 +1,380 @@
+"use client";
+
+/**
+ * MobileWaterLogForm — measurement entry screen.
+ *
+ * Visual structure (Apple HIG form):
+ *   - Sticky top nav: back chevron + "Log Reading" title.
+ *   - Sticky headgate card under the nav — picks a tap target
+ *     bigger than the iOS minimum (44pt) and lets the user confirm
+ *     which headgate they're logging against at a glance.
+ *   - Section: MEASUREMENT
+ *       - HUGE numeric input (44pt font) — the visual focus of the
+ *         screen. `inputMode="decimal"` brings up the iOS numeric
+ *         keyboard with the decimal key.
+ *       - Segmented control for units (CFS / GPM / gal / ac-in /
+ *         ac-ft). The default selection is the headgate's configured
+ *         unit.
+ *       - Live "thresholds" hint below the input (e.g. "Normal range:
+ *         2–8 CFS").
+ *   - Section: TIMESTAMP (read-only, auto-updating every second so
+ *     the user can verify they're logging against "now").
+ *   - Section: NOTES (optional, 500-char multiline).
+ *   - Sticky submit bar at the bottom — green primary button per
+ *     HIG success semantics. Slides up out of the keyboard's way
+ *     because the bar is `position: sticky; bottom: 0`.
+ */
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type FormEvent,
+} from "react";
+import { SegmentedControl } from "./SegmentedControl";
+import type { FieldHeadgate, MobileUnit } from "./types";
+import { MOBILE_UNITS } from "./types";
+import { ChevronLeft, Clock, Gauge, Pencil, Pin, Spinner } from "./icons";
+import {
+  formatLongTimestamp,
+  formatMeasurement,
+  headgateSubtitle,
+} from "./format";
+
+type Props = {
+  headgate: FieldHeadgate;
+  onSubmit: (input: { measurement: number; unit: string; notes: string }) => Promise<void>;
+  onChangeHeadgate: () => void;
+  onLogout: () => void;
+  /** Optional preset units — defaults to MOBILE_UNITS. */
+  units?: ReadonlyArray<MobileUnit | string>;
+};
+
+const NOTES_MAX = 500;
+
+export function MobileWaterLogForm({
+  headgate,
+  onSubmit,
+  onChangeHeadgate,
+  onLogout,
+  units = MOBILE_UNITS,
+}: Props) {
+  // ── State ────────────────────────────────────────────────────────
+  const [measurement, setMeasurement] = useState("");
+  const [unit, setUnit] = useState<string>(
+    units.includes(headgate.unit) ? headgate.unit : units[0],
+  );
+  const [notes, setNotes] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [now, setNow] = useState<Date>(() => new Date());
+  const measurementRef = useRef<HTMLInputElement>(null);
+
+  // ── Auto-focus the measurement input on mount so the keyboard
+  //    rises immediately.
+  useEffect(() => {
+    const t = window.setTimeout(() => measurementRef.current?.focus(), 80);
+    return () => window.clearTimeout(t);
+  }, []);
+
+  // ── Live clock — re-renders every second. The setInterval is
+  //    cheap (one DOM update per second on a hidden element) and
+  //    gives the user confidence the timestamp reflects "now".
+  useEffect(() => {
+    const id = window.setInterval(() => setNow(new Date()), 1000);
+    return () => window.clearInterval(id);
+  }, []);
+
+  // ── Threshold hint derived from the headgate. ────────────────────
+  const thresholdHint = useMemo(() => {
+    const h = headgate.high_threshold;
+    const l = headgate.low_threshold;
+    if (h == null && l == null) return null;
+    if (h != null && l != null) {
+      return `Normal range: ${l} – ${h} ${unit}`;
+    }
+    if (h != null) return `Alert above ${h} ${unit}`;
+    return `Alert below ${l} ${unit}`;
+  }, [headgate, unit]);
+
+  const submitted = (e?: FormEvent) => {
+    e?.preventDefault();
+    if (submitting) return;
+    const value = parseFloat(measurement);
+    if (!Number.isFinite(value) || value < 0) {
+      setError("Enter a measurement greater than or equal to 0");
+      return;
+    }
+    if (value > 1_000_000) {
+      setError("That value is implausibly large");
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    onSubmit({ measurement: value, unit, notes })
+      .catch((err) => {
+        setError(
+          err instanceof Error ? err.message : "Couldn't submit. Try again.",
+        );
+        setSubmitting(false);
+      });
+    // On success the parent swaps to the success screen.
+  };
+
+  const subtitle = headgateSubtitle(headgate);
+  const canSubmit =
+    measurement.trim().length > 0 &&
+    Number.isFinite(parseFloat(measurement)) &&
+    parseFloat(measurement) >= 0 &&
+    !submitting;
+
+  return (
+    <div
+      className="flex h-full flex-col bg-[#F2F2F7]"
+      style={{
+        paddingTop: "env(safe-area-inset-top)",
+      }}
+    >
+      {/* ── Top nav ────────────────────────────────────────────── */}
+      <header
+        className="sticky top-0 z-30 flex h-11 items-center border-b border-[rgba(60,60,67,0.12)] bg-[rgba(255,255,255,0.85)] px-2"
+        style={{
+          paddingTop: "env(safe-area-inset-top)",
+          height: "calc(44px + env(safe-area-inset-top))",
+          backdropFilter: "blur(20px) saturate(180%)",
+          WebkitBackdropFilter: "blur(20px) saturate(180%)",
+        }}
+      >
+        <button
+          type="button"
+          onClick={onChangeHeadgate}
+          aria-label="Back to headgates"
+          className="flex h-9 w-9 items-center justify-center rounded-full text-[#14532d] active:bg-[rgba(120,120,128,0.16)]"
+        >
+          <ChevronLeft size={22} />
+        </button>
+        <h1
+          className="absolute left-1/2 -translate-x-1/2 text-[17px] font-semibold text-[#1d1d1f]"
+          style={{
+            fontFamily:
+              "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+          }}
+        >
+          Log Reading
+        </h1>
+        <span className="w-9" />
+      </header>
+
+      {/* ── Scrollable form body ───────────────────────────────── */}
+      <form
+        onSubmit={submitted}
+        className="flex flex-1 flex-col"
+        // Allow the form to grow so the sticky submit bar can sit at
+        // the bottom on tall viewports.
+      >
+        <div className="flex-1 overflow-y-auto px-4 pb-[max(env(safe-area-inset-bottom),1rem)] pt-3">
+          {/* ── Headgate summary card (sticky) ──────────────── */}
+          <button
+            type="button"
+            onClick={onChangeHeadgate}
+            aria-label="Change headgate"
+            className="mb-5 flex w-full items-center gap-3 rounded-[14px] bg-white p-3 text-left active:bg-[rgba(120,120,128,0.10)]"
+            style={{
+              boxShadow: "0 1px 2px rgba(0,0,0,0.04), 0 1px 0 rgba(0,0,0,0.02)",
+            }}
+          >
+            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-[10px] bg-[rgba(20,83,45,0.10)] text-[#14532d]">
+              <Gauge size={22} />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div
+                className="truncate text-[17px] font-semibold leading-[1.2] text-[#1d1d1f]"
+                style={{
+                  fontFamily:
+                    "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+                }}
+              >
+                {headgate.name}
+              </div>
+              <div className="mt-0.5 flex items-center gap-1.5 text-[13px] text-[rgba(60,60,67,0.6)]">
+                <Pin size={12} className="shrink-0 opacity-60" />
+                <span className="truncate">{subtitle}</span>
+              </div>
+            </div>
+            <span className="rounded-full bg-[rgba(20,83,45,0.10)] px-2.5 py-1 text-[12px] font-semibold text-[#14532d]">
+              {headgate.unit}
+            </span>
+          </button>
+
+          {/* ── Measurement section ─────────────────────────── */}
+          <SectionHeader>Measurement</SectionHeader>
+          <div className="mb-2 overflow-hidden rounded-[14px] bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_1px_0_rgba(0,0,0,0.02)]">
+            <div className="flex items-baseline gap-2">
+              <input
+                ref={measurementRef}
+                type="number"
+                inputMode="decimal"
+                step="any"
+                min={0}
+                value={measurement}
+                onChange={(e) => {
+                  setMeasurement(e.target.value);
+                  if (error) setError(null);
+                }}
+                placeholder="0"
+                aria-label="Measurement value"
+                className="min-w-0 flex-1 appearance-none bg-transparent text-[44px] font-bold leading-[1.05] tracking-tight text-[#1d1d1f] outline-none placeholder:text-[rgba(60,60,67,0.25)]"
+                style={{
+                  fontFamily:
+                    "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+                  // Hide the native spinner buttons — they crowd a
+                  // small mobile screen and feel non-native.
+                  MozAppearance: "textfield",
+                }}
+              />
+              <span className="shrink-0 pb-2 text-[20px] font-semibold text-[rgba(60,60,67,0.5)]">
+                {unit}
+              </span>
+            </div>
+            {thresholdHint && (
+              <p className="mt-3 border-t border-[rgba(60,60,67,0.10)] pt-3 text-[13px] text-[rgba(60,60,67,0.6)]">
+                {thresholdHint}
+              </p>
+            )}
+          </div>
+
+          {/* Unit segmented control */}
+          <div className="mb-5">
+            <SegmentedControl
+              ariaLabel="Unit"
+              value={unit as MobileUnit}
+              onChange={(v: string) => setUnit(v)}
+              options={units.map((u) => ({ value: u as string, label: u }))}
+            />
+          </div>
+
+          {/* ── Timestamp section ───────────────────────────── */}
+          <SectionHeader>Timestamp</SectionHeader>
+          <div className="mb-5 flex items-center gap-3 rounded-[14px] bg-white p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_1px_0_rgba(0,0,0,0.02)]">
+            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-[rgba(20,83,45,0.10)] text-[#14532d]">
+              <Clock size={18} />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="text-[15px] font-semibold text-[#1d1d1f]">
+                Logged now
+              </div>
+              <div className="mt-0.5 truncate text-[13px] text-[rgba(60,60,67,0.6)]">
+                {formatLongTimestamp(now)}
+              </div>
+            </div>
+          </div>
+
+          {/* ── Notes section ────────────────────────────────── */}
+          <SectionHeader>
+            Notes <span className="font-normal text-[rgba(60,60,67,0.45)]">— optional</span>
+          </SectionHeader>
+          <div className="mb-5 rounded-[14px] bg-white shadow-[0_1px_2px_rgba(0,0,0,0.04),0_1px_0_rgba(0,0,0,0.02)]">
+            <label className="flex items-start gap-3 p-4">
+              <Pencil
+                size={18}
+                className="mt-0.5 shrink-0 text-[rgba(60,60,67,0.45)]"
+              />
+              <textarea
+                value={notes}
+                onChange={(e) => setNotes(e.target.value.slice(0, NOTES_MAX))}
+                rows={3}
+                maxLength={NOTES_MAX}
+                placeholder="Anything the supervisor should know about this reading?"
+                className="min-h-[68px] w-full resize-none bg-transparent text-[16px] leading-[1.4] text-[#1d1d1f] outline-none placeholder:text-[rgba(60,60,67,0.4)]"
+                style={{
+                  fontFamily:
+                    "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+                }}
+              />
+            </label>
+            <div className="flex items-center justify-between border-t border-[rgba(60,60,67,0.10)] px-4 py-2 text-[12px] text-[rgba(60,60,67,0.45)]">
+              <span>Visible to admins only</span>
+              <span>
+                {notes.length}/{NOTES_MAX}
+              </span>
+            </div>
+          </div>
+
+          {/* Inline error */}
+          {error && (
+            <div
+              role="alert"
+              className="mb-3 rounded-[12px] bg-[rgba(255,59,48,0.10)] px-4 py-3 text-[15px] text-[#7f1d1d]"
+            >
+              {error}
+            </div>
+          )}
+        </div>
+
+        {/* ── Sticky submit bar ───────────────────────────────── */}
+        <div
+          className="sticky bottom-0 z-20 border-t border-[rgba(60,60,67,0.10)] bg-[rgba(255,255,255,0.92)] px-4 py-3"
+          style={{
+            paddingBottom: "max(env(safe-area-inset-bottom), 0.75rem)",
+            backdropFilter: "blur(20px) saturate(180%)",
+            WebkitBackdropFilter: "blur(20px) saturate(180%)",
+          }}
+        >
+          <button
+            type="submit"
+            disabled={!canSubmit}
+            className={[
+              "flex h-[58px] w-full items-center justify-center gap-2 rounded-[14px] text-[17px] font-semibold",
+              "transition-[transform,background-color,opacity] duration-200",
+              "active:scale-[0.985]",
+              canSubmit
+                ? "bg-[#34C759] text-white shadow-[0_6px_18px_rgba(52,199,89,0.32),inset_0_1px_0_rgba(255,255,255,0.18)]"
+                : "bg-[rgba(120,120,128,0.16)] text-[rgba(60,60,67,0.4)]",
+            ].join(" ")}
+          >
+            {submitting ? (
+              <>
+                <Spinner
+                  size={20}
+                  className="text-white"
+                  style={{ animation: "spin 0.8s linear infinite" }}
+                />
+                Submitting…
+              </>
+            ) : (
+              <>
+                Submit Log
+                {measurement && Number.isFinite(parseFloat(measurement)) && (
+                  <span className="ml-1 opacity-80">
+                    · {formatMeasurement(parseFloat(measurement))} {unit}
+                  </span>
+                )}
+              </>
+            )}
+          </button>
+          <div className="mt-2 flex items-center justify-center">
+            <button
+              type="button"
+              onClick={onLogout}
+              className="text-[12px] font-medium text-[rgba(60,60,67,0.45)] active:text-[#14532d]"
+            >
+              Sign out
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+// ── Section header (HIG inset-grouped style) ───────────────────────────
+
+function SectionHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <h2 className="mb-1.5 px-3 text-[13px] font-semibold uppercase tracking-[0.06em] text-[rgba(60,60,67,0.55)]">
+      {children}
+    </h2>
+  );
+}
+
+export default MobileWaterLogForm;
\ No newline at end of file
diff --git a/src/components/water/mobile/MobileWaterApp.tsx b/src/components/water/mobile/MobileWaterApp.tsx
new file mode 100644
index 0000000..2ccc3a5
--- /dev/null
+++ b/src/components/water/mobile/MobileWaterApp.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+/**
+ * MobileWaterApp — state machine + screen switcher for the mobile
+ * Tuxedo Water Log experience.
+ *
+ * Flow:
+ *   pin ─verify─▶ headgates ─pick─▶ log ─submit─▶ success
+ *    ▲              │                                       │
+ *    │              └───────────────(logout)─────────────────┤
+ *    └─(logout)─────(anywhere)──────────────────────────────┘
+ *                                                  │
+ *        success ── Log Another ─▶ log (cleared) ─┘
+ *        success ── Back to Headgates ─▶ headgates
+ *
+ * Hydration:
+ *   - On mount we peek at `document.cookie` for the `wl_session`
+ *     cookie (set by the server action `verifyWaterPin`). If it's
+ *     present we skip the PIN screen and load headgates directly.
+ *   - This mirrors the existing field-client behavior — irrigators
+ *     who already signed in once in their shift shouldn't have to
+ *     re-enter their PIN every time they reopen the page.
+ *
+ * Server actions used:
+ *   - `verifyWaterPin`        → signs the irrigator in, sets cookie
+ *   - `getWaterHeadgates`     → loads the list of active gates
+ *   - `submitWaterEntry`      → posts a new reading
+ *   - `logoutWater`           → clears the cookie + session row
+ */
+import { useCallback, useEffect, useState } from "react";
+import {
+  verifyWaterPin,
+  submitWaterEntry,
+  getWaterHeadgates,
+  logoutWater,
+} from "@/actions/water-log/field";
+import type { FieldHeadgate, Screen, SubmittedLog } from "./types";
+import { MobileWaterPinScreen } from "./PinScreen";
+import { MobileWaterHeadgateList } from "./HeadgateList";
+import { MobileWaterLogForm } from "./LogForm";
+import { MobileWaterSuccessScreen } from "./SuccessScreen";
+
+const TUXEDO_BRAND_ID = "64294306-5f42-463d-a5e8-2ad6c81a96de";
+
+export function MobileWaterApp() {
+  const [screen, setScreen] = useState<Screen>("pin");
+  const [irrigatorName, setIrrigatorName] = useState<string | null>(null);
+  const [headgates, setHeadgates] = useState<FieldHeadgate[]>([]);
+  const [loadingHeadgates, setLoadingHeadgates] = useState(false);
+  const [headgateError, setHeadgateError] = useState<string | null>(null);
+  const [selectedHeadgate, setSelectedHeadgate] =
+    useState<FieldHeadgate | null>(null);
+  const [submittedLog, setSubmittedLog] = useState<SubmittedLog | null>(null);
+  // Monotonic counter used to remount the log form on "Log Another"
+  // (so the input + notes clear deterministically without an
+  // impure Date.now() call in render).
+  const [logFormKey, setLogFormKey] = useState(0);
+
+  // ── Headgate fetch (shared by initial load + pull-to-refresh) ──
+  const loadHeadgates = useCallback(async () => {
+    setLoadingHeadgates(true);
+    setHeadgateError(null);
+    try {
+      const hgs = await getWaterHeadgates(TUXEDO_BRAND_ID, true);
+      setHeadgates(hgs.filter((h) => h.active));
+    } catch (err) {
+      setHeadgateError(
+        err instanceof Error
+          ? err.message
+          : "Couldn't load headgates. Pull down to try again.",
+      );
+    } finally {
+      setLoadingHeadgates(false);
+    }
+  }, []);
+
+  // ── Initial bootstrap: if `wl_session` exists, jump straight to
+  //    the headgate list. We defer the cookie read into an effect
+  //    so SSR markup matches (avoids hydration warnings). ────────
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const hasSession = document.cookie.match(/wl_session=([^;]+)/);
+    if (!hasSession) return;
+    // Wrap setScreen in a microtask so the call doesn't fire
+    // synchronously inside the effect body.
+    queueMicrotask(() => {
+      setScreen("headgates");
+      void loadHeadgates();
+    });
+  }, [loadHeadgates]);
+
+  // ── PIN submit ────────────────────────────────────────────────
+  const handlePinSubmit = useCallback(
+    async (pin: string) => {
+      const result = await verifyWaterPin(TUXEDO_BRAND_ID, pin);
+      if (!result.success) {
+        // Trigger the shake animation on the PIN screen.
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(new Event("water-pin-shake"));
+        }
+        throw new Error(result.error);
+      }
+      // If the user turns out to be a water_admin, the legacy flow
+      // bounces them to /water/admin. Preserve that for parity.
+      if (result.role === "water_admin") {
+        window.location.href = "/water/admin";
+        return;
+      }
+      setIrrigatorName(result.name ?? null);
+      setScreen("headgates");
+      void loadHeadgates();
+    },
+    [loadHeadgates],
+  );
+
+  // ── Headgate select ───────────────────────────────────────────
+  const handleHeadgateSelect = useCallback((hg: FieldHeadgate) => {
+    setSelectedHeadgate(hg);
+    setScreen("log");
+  }, []);
+
+  // ── Submit entry ──────────────────────────────────────────────
+  const handleLogSubmit = useCallback(
+    async (input: { measurement: number; unit: string; notes: string }) => {
+      if (!selectedHeadgate) {
+        throw new Error("No headgate selected");
+      }
+      const result = await submitWaterEntry(
+        selectedHeadgate.id,
+        input.measurement,
+        input.unit,
+        input.notes,
+      );
+      if (!result.success) {
+        // Session gone? Bounce back to PIN.
+        if (
+          result.error === "Session expired or invalid" ||
+          result.error === "Not logged in"
+        ) {
+          setScreen("pin");
+          throw new Error("Your session expired. Please sign in again.");
+        }
+        throw new Error(result.error);
+      }
+      setSubmittedLog({
+        headgateName: selectedHeadgate.name,
+        measurement: input.measurement,
+        unit: input.unit,
+        timestamp: new Date(),
+      });
+      setScreen("success");
+    },
+    [selectedHeadgate],
+  );
+
+  // ── Success actions ───────────────────────────────────────────
+  const handleLogAnother = useCallback(() => {
+    // Stay on the same headgate but remount the form so the input
+    // + notes clear. Bumping the state key is deterministic —
+    // never call Date.now() (or any impure fn) during render.
+    setLogFormKey((k) => k + 1);
+    setSubmittedLog(null);
+    setScreen("log");
+  }, []);
+
+  const handleBackToHeadgates = useCallback(() => {
+    setSubmittedLog(null);
+    setSelectedHeadgate(null);
+    setScreen("headgates");
+    void loadHeadgates();
+  }, [loadHeadgates]);
+
+  // ── Logout (from anywhere) ────────────────────────────────────
+  const handleLogout = useCallback(async () => {
+    try {
+      await logoutWater();
+    } catch {
+      // Even if the server logout fails, clear local state so the
+      // user isn't stuck.
+    }
+    setIrrigatorName(null);
+    setHeadgates([]);
+    setSelectedHeadgate(null);
+    setSubmittedLog(null);
+    setScreen("pin");
+  }, []);
+
+  // ── Switch on the current screen ──────────────────────────────
+  switch (screen) {
+    case "pin":
+      return <MobileWaterPinScreen onSubmit={handlePinSubmit} />;
+
+    case "headgates":
+      return (
+        <MobileWaterHeadgateList
+          irrigatorName={irrigatorName ?? undefined}
+          headgates={headgates}
+          loading={loadingHeadgates}
+          error={headgateError}
+          onSelect={handleHeadgateSelect}
+          onRefresh={loadHeadgates}
+          onLogout={handleLogout}
+        />
+      );
+
+    case "log":
+      if (!selectedHeadgate) {
+        // Defensive: shouldn't happen, but bounce back to list.
+        queueMicrotask(() => setScreen("headgates"));
+        return null;
+      }
+      return (
+        <MobileWaterLogForm
+          key={`${selectedHeadgate.id}-${logFormKey}`}
+          headgate={selectedHeadgate}
+          onSubmit={handleLogSubmit}
+          onChangeHeadgate={handleBackToHeadgates}
+          onLogout={handleLogout}
+        />
+      );
+
+    case "success":
+      if (!submittedLog) {
+        queueMicrotask(() => setScreen("headgates"));
+        return null;
+      }
+      return (
+        <MobileWaterSuccessScreen
+          headgateName={submittedLog.headgateName}
+          measurement={submittedLog.measurement}
+          unit={submittedLog.unit}
+          timestamp={submittedLog.timestamp}
+          onLogAnother={handleLogAnother}
+          onBackToHeadgates={handleBackToHeadgates}
+        />
+      );
+  }
+}
+
+export default MobileWaterApp;
\ No newline at end of file
diff --git a/src/components/water/mobile/PinScreen.tsx b/src/components/water/mobile/PinScreen.tsx
new file mode 100644
index 0000000..53e8d18
--- /dev/null
+++ b/src/components/water/mobile/PinScreen.tsx
@@ -0,0 +1,296 @@
+"use client";
+
+/**
+ * MobileWaterPinScreen — PIN entry screen.
+ *
+ * Visual structure (Apple HIG):
+ *   - Minimal nav bar with "TUXEDO WATER LOG" branding (system
+ *     small-caps via tracking).
+ *   - Centered droplet + lock icon pair as a brand anchor.
+ *   - Headline ("Enter PIN") + supporting caption.
+ *   - Four large digit boxes (64pt square) that mirror the value of
+ *     a hidden <input>. Tapping the row focuses the hidden input —
+ *     the native numeric keyboard rises from the bottom.
+ *   - Full-width primary "Unlock" button (HIG success blue).
+ *   - Inline error pill replaces the caption on failure, with a
+ *     gentle shake.
+ *
+ * The hidden input is the source of truth so iOS's QuickType /
+ * password-manager suggestions work correctly — we never rebuild
+ * the digit boxes from a synthetic onChange.
+ */
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type FormEvent,
+} from "react";
+import { Droplet, Lock, Spinner } from "./icons";
+
+type Props = {
+  /** Called when the user submits a 4-8 digit PIN. */
+  onSubmit: (pin: string) => Promise<void>;
+  /** PIN length, matches `PIN_MIN`/`PIN_MAX` from water-log-pin. */
+  length?: 4 | 5 | 6 | 7 | 8;
+};
+
+export function MobileWaterPinScreen({ onSubmit, length = 4 }: Props) {
+  const [pin, setPin] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [shake, setShake] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Auto-focus the hidden input when the screen mounts so the
+  // keyboard rises immediately. iOS sometimes needs a tiny delay
+  // for the focus to take after the page transition.
+  useEffect(() => {
+    const t = window.setTimeout(() => inputRef.current?.focus(), 80);
+    return () => window.clearTimeout(t);
+  }, []);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      // Strip non-digits, clamp to `length`.
+      const next = e.target.value.replace(/\D/g, "").slice(0, length);
+      setPin(next);
+      if (error) setError(null);
+    },
+    [error, length],
+  );
+
+  const submit = useCallback(
+    async (e?: FormEvent) => {
+      e?.preventDefault();
+      if (pin.length !== length || submitting) return;
+      setSubmitting(true);
+      setError(null);
+      try {
+        await onSubmit(pin);
+        // Don't reset here — the parent will navigate away.
+      } catch (err) {
+        // Network / unexpected error
+        setError(
+          err instanceof Error ? err.message : "Something went wrong. Try again.",
+        );
+        setShake(true);
+        window.setTimeout(() => setShake(false), 420);
+        setPin("");
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [pin, length, submitting, onSubmit],
+  );
+
+  const onFailureShake = useCallback(() => {
+    setShake(true);
+    window.setTimeout(() => setShake(false), 420);
+    setPin("");
+    inputRef.current?.focus();
+  }, []);
+
+  // Expose the shake trigger via a custom event so the parent can
+  // fire it after a failed verify (parent owns the verify call).
+  useEffect(() => {
+    function onShake() {
+      onFailureShake();
+    }
+    window.addEventListener("water-pin-shake", onShake);
+    return () => window.removeEventListener("water-pin-shake", onShake);
+  }, [onFailureShake]);
+
+  return (
+    <div className="flex h-full flex-col bg-[#F2F2F7]">
+      {/* ── Branded header ───────────────────────────────────────── */}
+      <header
+        className="px-5 pb-3 pt-[max(env(safe-area-inset-top),1rem)]"
+        style={{
+          background:
+            "linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(242,242,247,0) 100%)",
+          backdropFilter: "blur(10px)",
+          WebkitBackdropFilter: "blur(10px)",
+        }}
+      >
+        <div className="mx-auto flex max-w-md items-center justify-center gap-2">
+          <Droplet size={18} className="text-[#14532d]" />
+          <span
+            className="text-[12px] font-bold tracking-[0.22em] text-[#14532d]"
+            style={{
+              fontFamily:
+                "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+            }}
+          >
+            TUXEDO WATER LOG
+          </span>
+        </div>
+      </header>
+
+      {/* ── Centered content ─────────────────────────────────────── */}
+      <main className="flex flex-1 flex-col items-center justify-center px-6 pb-[max(env(safe-area-inset-bottom),1.25rem)]">
+        <div className="w-full max-w-sm">
+          {/* Brand mark */}
+          <div className="mb-7 flex justify-center">
+            <div
+              className="flex h-20 w-20 items-center justify-center rounded-[22px]"
+              style={{
+                background:
+                  "linear-gradient(160deg, #ffffff 0%, #f0f7f2 60%, #e1efe5 100%)",
+                boxShadow:
+                  "0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 16px rgba(20,83,45,0.18), 0 1px 3px rgba(0,0,0,0.06)",
+              }}
+            >
+              <Lock size={32} className="text-[#14532d]" />
+            </div>
+          </div>
+
+          <h1
+            className="mb-2 text-center text-[28px] font-bold leading-[1.15] tracking-tight text-[#1d1d1f]"
+            style={{
+              fontFamily:
+                "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+            }}
+          >
+            Enter your PIN
+          </h1>
+
+          {/* Caption OR inline error */}
+          <p
+            className={[
+              "mb-9 min-h-[20px] text-center text-[15px]",
+              error ? "text-[#FF3B30]" : "text-[rgba(60,60,67,0.6)]",
+            ].join(" ")}
+            role={error ? "alert" : undefined}
+            aria-live={error ? "assertive" : undefined}
+          >
+            {error ?? "Sign in to log a water reading"}
+          </p>
+
+          {/* ── Digit boxes ────────────────────────────────────── */}
+          {/* The hidden input is the source of truth and gives us
+            *  native iOS numeric keyboard + autofill. The visible
+            *  boxes mirror its value. */}
+          <form onSubmit={submit}>
+            <input
+              ref={inputRef}
+              type="password"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              autoComplete="one-time-code"
+              maxLength={length}
+              value={pin}
+              onChange={handleChange}
+              // Keep the hidden input in the layout flow so its
+              // keyboard rises correctly. Visually hidden via the
+              // standard "sr-only" technique.
+              className="sr-only"
+              aria-label="PIN"
+              disabled={submitting}
+            />
+            <button
+              type="button"
+              onClick={() => inputRef.current?.focus()}
+              aria-label="PIN entry — tap to focus"
+              className="mx-auto mb-8 flex w-full justify-center gap-3 outline-none"
+            >
+              {Array.from({ length }).map((_, i) => {
+                const filled = i < pin.length;
+                const active = i === pin.length;
+                return (
+                  <div
+                    key={i}
+                    className="relative flex h-[68px] w-[58px] items-center justify-center rounded-[14px] bg-white text-[34px] font-bold leading-none text-[#1d1d1f]"
+                    style={{
+                      boxShadow: active
+                        ? "0 0 0 2px #14532d, 0 1px 2px rgba(0,0,0,0.04), 0 4px 14px rgba(20,83,45,0.18)"
+                        : "0 0 0 1px rgba(60,60,67,0.18), 0 1px 2px rgba(0,0,0,0.04)",
+                      transition: "box-shadow 180ms cubic-bezier(0.32,0.72,0,1)",
+                    }}
+                  >
+                    {filled ? (
+                      <span className="relative">
+                        {/* Solid dot — never reveals the digit back */}
+                        <span
+                          aria-hidden
+                          className="block h-[14px] w-[14px] rounded-full bg-[#1d1d1f]"
+                        />
+                      </span>
+                    ) : null}
+                    {/* Caret blink on the active box (iOS-style). */}
+                    {active && !filled && (
+                      <span
+                        aria-hidden
+                        className="block h-[28px] w-[2px] rounded-full bg-[#14532d]"
+                        style={{
+                          animation: "water-blink 1.05s steps(2, start) infinite",
+                        }}
+                      />
+                    )}
+                  </div>
+                );
+              })}
+            </button>
+
+            {/* Hidden submit so Enter from the keyboard triggers Unlock */}
+            <button type="submit" className="sr-only" tabIndex={-1}>
+              Unlock
+            </button>
+          </form>
+
+          {/* ── Unlock button ─────────────────────────────────── */}
+          <button
+            type="button"
+            onClick={() => submit()}
+            disabled={pin.length !== length || submitting}
+            className={[
+              "flex h-[58px] w-full items-center justify-center gap-2 rounded-[14px] text-[17px] font-semibold",
+              "transition-[transform,background-color,opacity] duration-200",
+              "active:scale-[0.985]",
+              pin.length === length && !submitting
+                ? "bg-[#14532d] text-white shadow-[0_6px_18px_rgba(20,83,45,0.28),inset_0_1px_0_rgba(255,255,255,0.16)]"
+                : "bg-[rgba(120,120,128,0.16)] text-[rgba(60,60,67,0.4)]",
+            ].join(" ")}
+            style={{
+              // Pressable feedback — springy scale.
+              transform: shake ? "translateX(0)" : undefined,
+            }}
+          >
+            {submitting ? (
+              <>
+                <Spinner
+                  size={20}
+                  className="text-white"
+                  style={{ animation: "spin 0.8s linear infinite" }}
+                />
+                Verifying…
+              </>
+            ) : (
+              <>Unlock</>
+            )}
+          </button>
+
+          {/* Footer hint */}
+          <p className="mt-7 text-center text-[12px] text-[rgba(60,60,67,0.45)]">
+            Forgot your PIN? Ask the ditch supervisor.
+          </p>
+        </div>
+      </main>
+
+      {/* Apply the shake via inline animation when `shake` is true.
+        *  The `water-shake` keyframe lives in `src/app/globals.css`
+        *  alongside the rest of the Water Log animation set. */}
+      {shake && (
+        <div
+          aria-hidden
+          className="pointer-events-none fixed inset-x-0 top-1/2 z-50 mx-auto max-w-sm"
+          style={{
+            animation: "water-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97)",
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+export default MobileWaterPinScreen;
\ No newline at end of file
diff --git a/src/components/water/mobile/PullToRefresh.tsx b/src/components/water/mobile/PullToRefresh.tsx
new file mode 100644
index 0000000..d7f4921
--- /dev/null
+++ b/src/components/water/mobile/PullToRefresh.tsx
@@ -0,0 +1,173 @@
+"use client";
+
+/**
+ * MobilePullToRefresh — iOS-style pull-to-refresh for the headgate list.
+ *
+ * Why a custom implementation (vs reusing the admin one):
+ *   - The admin PullToRefresh calls `router.refresh()` to re-render
+ *     the server component. The mobile flow is fully client-side
+ *     (the headgate list comes from a server action), so we need a
+ *     callback-based variant that re-fetches via `onRefresh`.
+ *   - The mobile version also needs to feel snappier on a phone
+ *     (smaller resistance curve, indicator pinned to the top of the
+ *     scrollable region).
+ *
+ * The indicator:
+ *   - Sits 16px below the top edge of the scroll container.
+ *   - Scales + fades in based on pull progress (0 → 1 across the
+ *     trigger threshold), with the spinner kicking in only once
+ *     refresh actually starts.
+ *   - Respects `prefers-reduced-motion` (the rest of the mobile
+ *     bundle does too — see `usePrefersReducedMotion` in
+ *     `MobileWaterApp`).
+ */
+import {
+  useCallback,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { Spinner } from "./icons";
+
+type Props = {
+  onRefresh: () => Promise<void> | void;
+  children: ReactNode;
+  /** Pull distance (px) at which refresh triggers. Default 72. */
+  threshold?: number;
+  /** Maximum stretch distance (px) under heavy pull. Default 120. */
+  maxPull?: number;
+  /** Disable pull-to-refresh (e.g. while loading). */
+  disabled?: boolean;
+};
+
+export function MobilePullToRefresh({
+  onRefresh,
+  children,
+  threshold = 72,
+  maxPull = 120,
+  disabled = false,
+}: Props) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const startY = useRef<number | null>(null);
+  const [offset, setOffset] = useState(0);
+  const [refreshing, setRefreshing] = useState(false);
+  const [isPulling, setIsPulling] = useState(false);
+
+  // The pull-to-refresh should only fire when the list is already at
+  // the very top — otherwise the user is mid-scroll and we should
+  // hand the gesture back to the native scroll.
+  const atTop = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return true;
+    return el.scrollTop <= 0;
+  }, []);
+
+  const onTouchStart = useCallback(
+    (e: React.TouchEvent<HTMLDivElement>) => {
+      if (disabled || refreshing) return;
+      if (!atTop()) return;
+      startY.current = e.touches[0].clientY;
+      setIsPulling(true);
+    },
+    [disabled, refreshing, atTop],
+  );
+
+  const onTouchMove = useCallback(
+    (e: React.TouchEvent<HTMLDivElement>) => {
+      if (!isPulling || startY.current == null) return;
+      const dy = e.touches[0].clientY - startY.current;
+      if (dy <= 0) {
+        setOffset(0);
+        return;
+      }
+      // Resistance curve — feels heavier as you pull further so a
+      // casual swipe doesn't accidentally trigger refresh.
+      const resistance = 1 - Math.min(1, dy / 600);
+      setOffset(Math.min(maxPull, dy * resistance));
+    },
+    [isPulling, maxPull],
+  );
+
+  const onTouchEnd = useCallback(async () => {
+    if (!isPulling) return;
+    setIsPulling(false);
+    startY.current = null;
+    if (offset >= threshold) {
+      setRefreshing(true);
+      setOffset(threshold); // hold the indicator in place while refreshing
+      try {
+        await Promise.resolve(onRefresh());
+      } finally {
+        // A small delay so the spinner is visible even on a fast
+        // refresh — feels less jarring.
+        await new Promise((r) => setTimeout(r, 350));
+        setRefreshing(false);
+        setOffset(0);
+      }
+    } else {
+      setOffset(0);
+    }
+  }, [isPulling, offset, threshold, onRefresh]);
+
+  const progress = Math.min(1, offset / threshold);
+
+  return (
+    <div
+      ref={scrollRef}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchEnd}
+      className="relative h-full overflow-y-auto overscroll-contain"
+      style={{
+        WebkitOverflowScrolling: "touch",
+      }}
+    >
+      {/* Indicator — absolutely positioned just below the top edge.
+        *  Translates with the pull so it follows the finger. */}
+      <div
+        aria-hidden
+        className="pointer-events-none sticky top-0 z-20 flex justify-center"
+        style={{
+          height: 56,
+          transform: `translateY(${Math.max(0, offset - 56)}px)`,
+          transition: isPulling
+            ? "none"
+            : "transform 280ms cubic-bezier(0.32, 0.72, 0, 1)",
+        }}
+      >
+        <div
+          className="mt-3 flex h-9 w-9 items-center justify-center rounded-full bg-white/85 backdrop-blur-md"
+          style={{
+            opacity: refreshing ? 1 : 0.4 + progress * 0.6,
+            transform: `scale(${0.55 + progress * 0.45}) rotate(${progress * 180}deg)`,
+            transition: isPulling
+              ? "none"
+              : "transform 280ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease",
+            boxShadow: "0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.06)",
+          }}
+        >
+          {refreshing ? (
+            <Spinner
+              size={20}
+              className="text-[#1a4d2e]"
+              style={{ animation: "spin 0.8s linear infinite" }}
+            />
+          ) : (
+            <span
+              className="text-[15px] font-bold leading-none text-[#1a4d2e]"
+              style={{
+                transform: `rotate(-${progress * 180}deg)`,
+              }}
+            >
+              ↓
+            </span>
+          )}
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default MobilePullToRefresh;
\ No newline at end of file
diff --git a/src/components/water/mobile/SegmentedControl.tsx b/src/components/water/mobile/SegmentedControl.tsx
new file mode 100644
index 0000000..4728a53
--- /dev/null
+++ b/src/components/water/mobile/SegmentedControl.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+/**
+ * MobileWaterSegmented — an iOS-style segmented control.
+ *
+ * Mimics UISegmentedControl:
+ *   - Rounded 9px outer container in surface-2 (iOS systemGray5).
+ *   - White sliding pill behind the selected option.
+ *   - iOS spring timing (cubic-bezier(0.32, 0.72, 0, 1)) for the
+ *     pill transition.
+ *   - Hugs the largest option's natural width when the parent gives
+ *     no fixed width — looks balanced for 3-5 short labels.
+ *   - 44pt minimum touch target per HIG.
+ *
+ * Uses a useLayoutEffect ref-measurement pass so the indicator
+ * slides smoothly to the correct option when the value changes
+ * (including the initial mount and across option-list changes).
+ */
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+
+export type SegmentedOption<V extends string> = {
+  value: V;
+  label: ReactNode;
+  /** Optional badge or icon, rendered inside the segment. */
+  badge?: ReactNode;
+};
+
+type Props<V extends string> = {
+  options: ReadonlyArray<SegmentedOption<V>>;
+  value: V;
+  onChange: (value: V) => void;
+  /** ARIA label for the group. */
+  ariaLabel?: string;
+  /** Optional fixed height (default 44 — the HIG minimum). */
+  height?: number;
+  /** Disable the whole control. */
+  disabled?: boolean;
+};
+
+export function SegmentedControl<V extends string>({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  height = 44,
+  disabled = false,
+}: Props<V>) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  // Cache {x, width} per option key so the sliding indicator animates
+  // even when options aren't measured synchronously (e.g. SSR).
+  const [rects, setRects] = useState<Record<string, { x: number; w: number }>>({});
+
+  // Measure on mount and whenever the option set changes.
+  useLayoutEffect(() => {
+    if (!containerRef.current) return;
+    const root = containerRef.current;
+    const next: Record<string, { x: number; w: number }> = {};
+    options.forEach((opt) => {
+      const el = root.querySelector<HTMLButtonElement>(
+        `[data-seg-key="${opt.value}"]`,
+      );
+      if (el) {
+        const rootRect = root.getBoundingClientRect();
+        const elRect = el.getBoundingClientRect();
+        next[opt.value] = { x: elRect.left - rootRect.left, w: elRect.width };
+      }
+    });
+    setRects(next);
+  }, [options]);
+
+  // Re-measure on resize so the indicator stays aligned.
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const ro = new ResizeObserver(() => {
+      const root = containerRef.current!;
+      const next: Record<string, { x: number; w: number }> = {};
+      options.forEach((opt) => {
+        const el = root.querySelector<HTMLButtonElement>(
+          `[data-seg-key="${opt.value}"]`,
+        );
+        if (el) {
+          const rootRect = root.getBoundingClientRect();
+          const elRect = el.getBoundingClientRect();
+          next[opt.value] = { x: elRect.left - rootRect.left, w: elRect.width };
+        }
+      });
+      setRects(next);
+    });
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [options]);
+
+  const active = rects[value];
+
+  return (
+    <div
+      ref={containerRef}
+      role="tablist"
+      aria-label={ariaLabel}
+      className="relative inline-flex w-full items-stretch rounded-[10px] bg-[rgba(120,120,128,0.12)] p-[2px]"
+      style={{
+        height,
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      {/* Sliding indicator. 4px of inset (2px container padding + 2px
+       *  visual breathing room) gives it the iOS look without
+       *  feeling cramped. */}
+      {active && (
+        <div
+          aria-hidden
+          className="absolute top-[2px] bottom-[2px] rounded-[8px] bg-white"
+          style={{
+            transform: `translateX(${active.x - 2}px)`,
+            width: active.w,
+            boxShadow:
+              "0 1px 1px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.06), inset 0 0 0 0.5px rgba(0,0,0,0.04)",
+            transition:
+              "transform 320ms cubic-bezier(0.32, 0.72, 0, 1), width 320ms cubic-bezier(0.32, 0.72, 0, 1)",
+          }}
+        />
+      )}
+      {options.map((opt) => {
+        const selected = opt.value === value;
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            role="tab"
+            aria-selected={selected}
+            data-seg-key={opt.value}
+            disabled={disabled}
+            onClick={() => onChange(opt.value)}
+            className={[
+              "relative z-10 flex-1 select-none px-2 text-[15px] font-semibold leading-none",
+              "flex items-center justify-center gap-1.5",
+              "rounded-[8px] active:opacity-80",
+              selected ? "text-[#1d1d1f]" : "text-[rgba(60,60,67,0.6)]",
+            ].join(" ")}
+            style={{
+              minHeight: 44,
+              transition: "color 200ms cubic-bezier(0.32, 0.72, 0, 1)",
+            }}
+          >
+            <span className="truncate">{opt.label}</span>
+            {opt.badge != null && (
+              <span className="text-[11px] font-bold leading-none rounded-full bg-[rgba(120,120,128,0.16)] text-[#3c3c43] px-1.5 py-0.5">
+                {opt.badge}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export default SegmentedControl;
\ No newline at end of file
diff --git a/src/components/water/mobile/SuccessScreen.tsx b/src/components/water/mobile/SuccessScreen.tsx
new file mode 100644
index 0000000..55e7073
--- /dev/null
+++ b/src/components/water/mobile/SuccessScreen.tsx
@@ -0,0 +1,250 @@
+"use client";
+
+/**
+ * MobileWaterSuccessScreen — confirmation after a successful submit.
+ *
+ * Visual structure:
+ *   - Centered success illustration: a green ring that draws on,
+ *     with a checkmark that draws on ~280ms later (the same staggered
+ *     reveal UIKit's success feedback uses).
+ *   - Headline: "Reading logged."
+ *   - Recap card: headgate name + measurement + unit + timestamp.
+ *   - Two large primary actions, stacked:
+ *       - "Log Another Entry" (green primary, refresh icon)
+ *       - "Back to Headgates" (white secondary with thin border)
+ *   - Subtle thank-you micro-copy at the bottom.
+ *
+ * The animations use the global `water-ring` + `water-draw` keyframes
+ * from `src/app/globals.css`.
+ */
+import { useEffect, useState } from "react";
+import { Grid, Refresh } from "./icons";
+import { formatClockTime, formatLongTimestamp, formatMeasurement } from "./format";
+
+type Props = {
+  headgateName: string;
+  measurement: number;
+  unit: string;
+  timestamp: Date;
+  onLogAnother: () => void;
+  onBackToHeadgates: () => void;
+};
+
+export function MobileWaterSuccessScreen({
+  headgateName,
+  measurement,
+  unit,
+  timestamp,
+  onLogAnother,
+  onBackToHeadgates,
+}: Props) {
+  // Reveal animation — staggered for ring → checkmark → content.
+  const [ringDone, setRingDone] = useState(false);
+  const [contentShown, setContentShown] = useState(false);
+
+  useEffect(() => {
+    const ringTimer = window.setTimeout(() => setRingDone(true), 380);
+    const contentTimer = window.setTimeout(() => setContentShown(true), 480);
+    return () => {
+      window.clearTimeout(ringTimer);
+      window.clearTimeout(contentTimer);
+    };
+  }, []);
+
+  return (
+    <div
+      className="flex h-full flex-col bg-[#F2F2F7]"
+      style={{
+        paddingTop: "env(safe-area-inset-top)",
+        paddingBottom: "env(safe-area-inset-bottom)",
+      }}
+    >
+      {/* Brand strip — same as PIN screen for visual continuity. */}
+      <header
+        className="px-5 pb-3 pt-[max(env(safe-area-inset-top),1rem)]"
+        style={{
+          background:
+            "linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(242,242,247,0) 100%)",
+          backdropFilter: "blur(10px)",
+          WebkitBackdropFilter: "blur(10px)",
+        }}
+      >
+        <div className="mx-auto flex max-w-md items-center justify-center gap-2">
+          <span
+            className="text-[12px] font-bold tracking-[0.22em] text-[#14532d]"
+            style={{
+              fontFamily:
+                "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+            }}
+          >
+            TUXEDO WATER LOG
+          </span>
+        </div>
+      </header>
+
+      <main className="flex flex-1 flex-col items-center justify-center px-6">
+        <div className="w-full max-w-sm text-center">
+          {/* Success ring + checkmark */}
+          <div className="relative mx-auto mb-8 h-24 w-24">
+            <svg
+              width="96"
+              height="96"
+              viewBox="0 0 96 96"
+              fill="none"
+              aria-hidden
+              focusable={false}
+            >
+              {/* Ring — circumference ~264px for r=42 */}
+              <circle
+                cx="48"
+                cy="48"
+                r="42"
+                stroke="#34C759"
+                strokeWidth="6"
+                strokeLinecap="round"
+                fill="none"
+                strokeDasharray="264"
+                strokeDashoffset="264"
+                style={{
+                  animation:
+                    "water-ring 420ms cubic-bezier(0.32, 0.72, 0, 1) forwards",
+                  ["--ring-from" as string]: "264",
+                }}
+              />
+              {/* Checkmark — ~62px long */}
+              <path
+                d="M30 50 L43 63 L66 38"
+                stroke="#34C759"
+                strokeWidth="6"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+                strokeDasharray="62"
+                strokeDashoffset="62"
+                style={{
+                  animation:
+                    "water-draw 320ms cubic-bezier(0.32, 0.72, 0, 1) 280ms forwards",
+                  ["--draw-from" as string]: "62",
+                }}
+              />
+            </svg>
+            {/* Soft glow behind the ring — sells the celebration. */}
+            <div
+              aria-hidden
+              className="absolute inset-0 rounded-full"
+              style={{
+                background:
+                  "radial-gradient(circle, rgba(52,199,89,0.18) 0%, rgba(52,199,89,0) 70%)",
+                opacity: ringDone ? 1 : 0,
+                transition: "opacity 280ms ease-out",
+              }}
+            />
+          </div>
+
+          {/* Headline */}
+          <h1
+            className={[
+              "mb-2 text-[28px] font-bold leading-[1.15] tracking-tight text-[#1d1d1f]",
+              "transition-[opacity,transform] duration-300",
+              contentShown
+                ? "translate-y-0 opacity-100"
+                : "translate-y-2 opacity-0",
+            ].join(" ")}
+            style={{
+              fontFamily:
+                "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+            }}
+          >
+            Reading logged
+          </h1>
+
+          {/* Recap card */}
+          <div
+            className={[
+              "mx-auto mt-3 mb-8 max-w-xs rounded-[14px] bg-white px-5 py-4 text-left",
+              "shadow-[0_1px_2px_rgba(0,0,0,0.04),0_1px_0_rgba(0,0,0,0.02)]",
+              "transition-[opacity,transform] duration-300",
+              contentShown
+                ? "translate-y-0 opacity-100"
+                : "translate-y-2 opacity-0",
+            ].join(" ")}
+            style={{
+              transitionDelay: contentShown ? "80ms" : "0ms",
+            }}
+          >
+            <div className="flex items-baseline justify-between gap-2">
+              <span className="truncate text-[15px] font-medium text-[rgba(60,60,67,0.55)]">
+                {headgateName}
+              </span>
+              <span className="shrink-0 text-[13px] font-medium text-[rgba(60,60,67,0.45)]">
+                {formatClockTime(timestamp)}
+              </span>
+            </div>
+            <div className="mt-1 flex items-baseline gap-1.5">
+              <span
+                className="text-[36px] font-bold leading-[1.05] tracking-tight text-[#1d1d1f]"
+                style={{
+                  fontFamily:
+                    "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+                }}
+              >
+                {formatMeasurement(measurement)}
+              </span>
+              <span className="pb-1 text-[16px] font-semibold text-[rgba(60,60,67,0.55)]">
+                {unit}
+              </span>
+            </div>
+            <div className="mt-2 border-t border-[rgba(60,60,67,0.10)] pt-2 text-[12px] text-[rgba(60,60,67,0.45)]">
+              {formatLongTimestamp(timestamp)}
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <div
+            className={[
+              "flex flex-col gap-3",
+              "transition-[opacity,transform] duration-300",
+              contentShown
+                ? "translate-y-0 opacity-100"
+                : "translate-y-3 opacity-0",
+            ].join(" ")}
+            style={{
+              transitionDelay: contentShown ? "160ms" : "0ms",
+            }}
+          >
+            <button
+              type="button"
+              onClick={onLogAnother}
+              className="flex h-[56px] w-full items-center justify-center gap-2 rounded-[14px] bg-[#34C759] text-[17px] font-semibold text-white active:scale-[0.985] active:opacity-90"
+              style={{
+                boxShadow:
+                  "0 6px 18px rgba(52,199,89,0.32), inset 0 1px 0 rgba(255,255,255,0.18)",
+              }}
+            >
+              <Refresh size={20} />
+              Log Another Entry
+            </button>
+
+            <button
+              type="button"
+              onClick={onBackToHeadgates}
+              className="flex h-[56px] w-full items-center justify-center gap-2 rounded-[14px] border border-[rgba(60,60,67,0.18)] bg-white text-[17px] font-semibold text-[#14532d] active:scale-[0.985] active:bg-[rgba(120,120,128,0.08)]"
+              style={{
+                boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+              }}
+            >
+              <Grid size={20} />
+              Back to Headgates
+            </button>
+          </div>
+
+          <p className="mt-7 text-[13px] text-[rgba(60,60,67,0.45)]">
+            Thanks for keeping the records flowing.
+          </p>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default MobileWaterSuccessScreen;
\ No newline at end of file
diff --git a/src/components/water/mobile/format.ts b/src/components/water/mobile/format.ts
new file mode 100644
index 0000000..89c303f
--- /dev/null
+++ b/src/components/water/mobile/format.ts
@@ -0,0 +1,92 @@
+/**
+ * Mobile Water Log — formatting helpers.
+ *
+ * Pure functions, no React. Used by the PIN, headgate list, and log
+ * screens for consistent display of timestamps, units, and "geocode"
+ * secondary text.
+ */
+
+/**
+ * Format an ISO timestamp as a short relative phrase.
+ *   "just now"     < 45s
+ *   "5m ago"       < 60m
+ *   "3h ago"       < 24h
+ *   "Mar 14"       same calendar year
+ *   "Mar 14 '25"   previous calendar year
+ */
+export function formatRelativeTime(iso: string | null): string {
+  if (!iso) return "Never logged";
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "Never logged";
+  const diffSec = Math.round((Date.now() - then) / 1000);
+  if (diffSec < 45) return "Just now";
+  if (diffSec < 60 * 60) return `${Math.round(diffSec / 60)}m ago`;
+  if (diffSec < 60 * 60 * 24) return `${Math.round(diffSec / 3600)}h ago`;
+  const d = new Date(iso);
+  const sameYear = d.getFullYear() === new Date().getFullYear();
+  const date = d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+  });
+  return sameYear ? date : `${date} '${String(d.getFullYear()).slice(-2)}`;
+}
+
+/**
+ * Format a Date as a 12-hour time suitable for the sticky log header
+ * (e.g. "2:37 PM").
+ */
+export function formatClockTime(d: Date): string {
+  return d.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+}
+
+/**
+ * Format a Date as a long human label for the submit timestamp preview
+ * (e.g. "Wed, Mar 14 · 2:37 PM").
+ */
+export function formatLongTimestamp(d: Date): string {
+  const date = d.toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+  });
+  return `${date} · ${formatClockTime(d)}`;
+}
+
+/**
+ * Format a measurement for the success-screen recap. Strips trailing
+ * zeros and clamps to 4 significant fraction digits so "12.5000"
+ * becomes "12.5".
+ */
+export function formatMeasurement(value: number): string {
+  if (!Number.isFinite(value)) return "0";
+  const fixed = value.toFixed(4);
+  return fixed.replace(/\.?0+$/, "") || "0";
+}
+
+/**
+ * Decide what to show under a headgate name. The schema doesn't have
+ * a dedicated `geocode` column, so we fall back through the available
+ * context fields in priority order:
+ *   1. headgate.notes         — admin's free-text label
+ *   2. status label           — "Open", "Closed", "Maintenance"
+ *   3. default "Headgate"
+ */
+export function headgateSubtitle(h: FieldHeadgateLike): string {
+  if (h.notes && h.notes.trim()) return h.notes.trim();
+  const status = (h.status ?? "open").toLowerCase();
+  if (status === "open") return "Open · Ready to log";
+  if (status === "closed") return "Closed";
+  if (status === "maintenance") return "Under maintenance";
+  return status;
+}
+
+/** Type alias used by `headgateSubtitle` — accepts any object with the
+ *  relevant subset, so callers don't need the full FieldHeadgate type. */
+type FieldHeadgateLike = {
+  notes?: string | null;
+  status?: string | null;
+};
\ No newline at end of file
diff --git a/src/components/water/mobile/icons.tsx b/src/components/water/mobile/icons.tsx
new file mode 100644
index 0000000..e965c50
--- /dev/null
+++ b/src/components/water/mobile/icons.tsx
@@ -0,0 +1,189 @@
+/**
+ * Mobile Water Log — inline SVG icon set.
+ *
+ * SF Symbol-style icons drawn at a 24×24 grid with `currentColor`
+ * strokes so they tint to whatever text color the parent passes.
+ * Avoids the icon-font dependency that would otherwise bloat the
+ * mobile bundle. All icons use 1.75px strokes (close to SF's
+ * "medium" weight at this size) and rounded line caps for the soft,
+ * pen-friendly feel HIG calls for.
+ */
+import type { SVGProps } from "react";
+
+type IconProps = SVGProps<SVGSVGElement> & { size?: number };
+
+function base({ size = 22, strokeWidth = 1.75, ...rest }: IconProps) {
+  return {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round" as const,
+    strokeLinejoin: "round" as const,
+    "aria-hidden": true,
+    focusable: false,
+    ...rest,
+  };
+}
+
+/** iOS-style chevron pointing right — used in list rows. */
+export function ChevronRight(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <path d="M9 5l7 7-7 7" />
+    </svg>
+  );
+}
+
+/** iOS-style chevron pointing left — used in nav bars. */
+export function ChevronLeft(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <path d="M15 19l-7-7 7-7" />
+    </svg>
+  );
+}
+
+/** A water droplet — used for the app icon and brand mark. */
+export function Droplet(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <path d="M12 3.5c0 0 -6.5 7 -6.5 11a6.5 6.5 0 0 0 13 0c0 -4 -6.5 -11 -6.5 -11z" />
+      <path d="M9 14a3 3 0 0 0 3 3" opacity="0.6" />
+    </svg>
+  );
+}
+
+/** A pin/marker — used for the geocode subtitle. */
+export function Pin(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <path d="M12 21s7 -6.2 7 -11a7 7 0 1 0 -14 0c0 4.8 7 11 7 11z" />
+      <circle cx="12" cy="10" r="2.5" />
+    </svg>
+  );
+}
+
+/** A circular arrow — used for "Log Another Entry". */
+export function Refresh(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <path d="M3.5 12a8.5 8.5 0 0 1 14.5 -6" />
+      <path d="M18 3v4.5h-4.5" />
+      <path d="M20.5 12a8.5 8.5 0 0 1 -14.5 6" />
+      <path d="M6 21v-4.5h4.5" />
+    </svg>
+  );
+}
+
+/** A back-arrow grid — used for "Back to Headgates". */
+export function Grid(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <rect x="4" y="4" width="7" height="7" rx="1.5" />
+      <rect x="13" y="4" width="7" height="7" rx="1.5" />
+      <rect x="4" y="13" width="7" height="7" rx="1.5" />
+      <rect x="13" y="13" width="7" height="7" rx="1.5" />
+    </svg>
+  );
+}
+
+/** A gauge — used for the headgate card icon. */
+export function Gauge(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <path d="M4 14a8 8 0 1 1 16 0" />
+      <path d="M12 14l4 -4" />
+      <circle cx="12" cy="14" r="1.2" fill="currentColor" stroke="none" />
+      <path d="M4 18h16" opacity="0.4" />
+    </svg>
+  );
+}
+
+/** Big checkmark for the success screen. */
+export function CheckCircle(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <circle cx="12" cy="12" r="9.5" />
+      <path d="M8 12.5l2.8 2.8L16 9.5" strokeWidth={2.25} />
+    </svg>
+  );
+}
+
+/** A lock — used on the PIN screen to anchor the brand. */
+export function Lock(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <rect x="5" y="11" width="14" height="9.5" rx="2" />
+      <path d="M8 11V8a4 4 0 0 1 8 0v3" />
+      <circle cx="12" cy="15.5" r="1" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+/** A pencil — used next to notes input. */
+export function Pencil(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <path d="M4 20h4l10 -10 -4 -4L4 16v4z" />
+      <path d="M14 6l4 4" />
+    </svg>
+  );
+}
+
+/** Clock — used for the auto-timestamp display. */
+export function Clock(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M12 7.5V12l3 2" />
+    </svg>
+  );
+}
+
+/** Spinner — used for async states. */
+export function Spinner({ size = 22, ...rest }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden
+      focusable={false}
+      {...rest}
+    >
+      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity="0.2" strokeWidth="2.5" />
+      <path
+        d="M21 12a9 9 0 0 0 -9 -9"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+/** Alert triangle — used for error states. */
+export function AlertTriangle(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <path d="M12 3.5L21 19H3L12 3.5z" />
+      <path d="M12 10v4" />
+      <circle cx="12" cy="16.5" r="0.6" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+/** Logout — used to exit the PIN session. */
+export function Logout(props: IconProps) {
+  return (
+    <svg {...base(props)}>
+      <path d="M15 3.5h4a1.5 1.5 0 0 1 1.5 1.5v14a1.5 1.5 0 0 1 -1.5 1.5h-4" />
+      <path d="M10 17l-5 -5 5 -5" />
+      <path d="M15 12H5" />
+    </svg>
+  );
+}
\ No newline at end of file
diff --git a/src/components/water/mobile/types.ts b/src/components/water/mobile/types.ts
new file mode 100644
index 0000000..489263d
--- /dev/null
+++ b/src/components/water/mobile/types.ts
@@ -0,0 +1,36 @@
+/**
+ * Mobile Water Log — shared types.
+ *
+ * Mirror of the server-returned headgate shape from
+ * `src/actions/water-log/field.ts`. Keep these in sync if the server
+ * shape changes.
+ */
+
+export type FieldHeadgate = {
+  id: string;
+  name: string;
+  unit: string;
+  status: string;
+  high_threshold: number | null;
+  low_threshold: number | null;
+  active: boolean;
+  /** Free-text location description / coordinate string ("geocode"). */
+  notes: string | null;
+  /** ISO timestamp of last successful log. */
+  last_used_at: string | null;
+};
+
+/** The five units the mobile app offers in its segmented control. */
+export const MOBILE_UNITS = ["CFS", "GPM", "gal", "ac-in", "ac-ft"] as const;
+export type MobileUnit = (typeof MOBILE_UNITS)[number];
+
+/** Top-level screen identifiers — drives the state machine. */
+export type Screen = "pin" | "headgates" | "log" | "success";
+
+/** A submitted log entry (only kept locally for the success screen). */
+export type SubmittedLog = {
+  headgateName: string;
+  measurement: number;
+  unit: MobileUnit | string;
+  timestamp: Date;
+};
\ No newline at end of file