diff --git a/docs/branch-review-ledger.md b/docs/branch-review-ledger.md
index 832a57445..168be5104 100644
--- a/docs/branch-review-ledger.md
+++ b/docs/branch-review-ledger.md
@@ -746,6 +746,9 @@ This file is append-only. Never rewrite or delete an existing review record; app
 | 2026-07-24 | cursor/search-performance-review-4ee9 (PR #1134) | 9311d01212fe42bd41ffb22a83bfa51f1a4d19f2 | Run PR re-sync sweep | Re-check: CONFLICTING on use-differential-catalog.ts (+ related). Not cheap; merge aborted, no push. | merge origin/main and/or conflict re-check only; no provider-backed checks run |
 | 2026-07-24 | cursor/comprehensive-repo-review-ledger-d9a1 (PR #1150) | 60a3c3a83a31e65ec2759540629687e7113e2489 | Run PR sweep: CI fix + threads + drift | Before: CONFLICTING, CI green, 0 threads. After: merged origin/main cleanly (ledger auto-merge); pushed 60a3c3a83. Threads: none. Residual: CI re-running. | merge origin/main only; no provider-backed checks run |
 | 2026-07-24 | cursor/search-interactive-perf-af54 (PR #1138) | ff4b293d95f922e70ebf5ee9b0c156c41a8bff3b | Run PR sweep: CI fix + threads + drift | Before: CONFLICTING, CI green, 0 threads. RAG impact: no retrieval behaviour change — PR is client deferred-search/UI only (no src/lib/rag/**). After: merged origin/main; conflict resolved in src/components/ui/sheet.tsx by keeping main restoreTimersRef/unmountingRef focus-restore fix; pushed ff4b293d9. Threads: none. | merge origin/main only; no provider-backed checks run |
+| 2026-07-24 | codex/hydration-fixes (PR #1131) | 6c093e927d7b4f7261fb78160d85bdc407853001 | Run PR sweep: CI fix + threads + drift | Before: already contained origin/main. After: ledger-only record. Threads: non-P0/P1 left open. CI not waited. | merge origin/main only; thread scan read-only; no provider-backed checks run |
+| 2026-07-24 | codex/hydration-fixes (PR #1131) | f5451102cc0f157d0f63a3679e532d02ae85918c | Run PR babysit: CI/threads/drift | Run PR babysit: Codex P2 theme cookie validated+fixed + thread resolved. Before: CI mostly green, 1 unresolved Codex P2 (3644928239; prior Codex claim not on this branch). After: cookie fallback in THEME_BOOTSTRAP_SCRIPT + useTheme write/clear + shared keys; reply+resolve PRRT_kwDOSh5Fis6TiAhF. Not behind main. | npx vitest run tests/theme.test.ts PASS (9/9). No provider-backed checks run. |
+| 2026-07-24 | codex/hydration-fixes (PR #1131) | 93518331fd1839e773a0cb08d0e8425e502f876d | Run PR babysit: CI/threads/drift | Theme cookie P2 fixed+resolved; merged origin/main resolving layout.tsx (kept cookie html class + THEME_COOKIE_NAME atop localFont/skip-link from main). | merge origin/main; vitest theme 9/9; no provider-backed checks run. |
 | 2026-07-24 | codex/apply-phone-layout-to-all-home-pages (PR #1124) | 2cb98b40e2fd36650e293b27a97996c069971db3 | Run PR sweep: CI fix + threads + drift | Before: behind main by 35. After: merged origin/main cleanly (no conflicts). Threads: non-P0/P1 left open. CI not waited. | merge origin/main only; thread scan read-only; no provider-backed checks run |
 | 2026-07-24 | codex/apply-phone-layout-to-all-home-pages (PR #1124) | e061ce29300cd80df5c8cd95d2ea8ecfeef1e2b0 | Run PR babysit: CI/threads/drift | Run PR babysit: Codex P2 prescribing typed-draft dock path fixed + thread resolved. Before: CI mostly green, 1 unresolved Codex P2 (3644919028). After: showDesktopHomeComposer for prescribing requires !query.trim(); documents half dispositioned as not holding (home slot stays pre-submit); reply+resolve PRRT_kwDOSh5Fis6Th-6B. Not behind main. | npx vitest run tests/mobile-composer-reserve.test.ts PASS (9/9). No provider-backed checks run. |
 | 2026-07-24 | codex/fix-next.js-startup-failure-and-verify-pages (PR #1149) | 8ddddbab2a29a94b3f993cbd114889f72c95f4f1 | Run PR sweep: CI fix + threads + drift | Before: behind main. After: merged origin/main cleanly (no conflicts). Unresolved review threads left as non-P0/P1. CI not waited. | merge origin/main only; thread scan read-only; no provider-backed checks run |
@@ -760,11 +763,13 @@ This file is append-only. Never rewrite or delete an existing review record; app
 | 2026-07-24 | codex/query-ribbon-search-headings (PR #1166) | 37cfa5553ccb784ee5e9f47ded1ad69914c053ed | Run PR babysit: CI/threads/drift | Final HEAD after merge origin/main + ledger bookkeeping. 0 unresolved threads; no Bugbot actionable findings; required CI re-running on this SHA. | merge origin/main; no provider-backed checks run. |
 | 2026-07-24 | codex/query-ribbon-search-headings (PR #1166) | 9eac2e252bcc5c548aa919b69faeb79b9ff7d2cf | Run PR babysit: CI/threads/drift | Merged origin/main; Codex ledger-SHA P2 dispositioned+resolved (append-only supersede already in 9eac2e252). 0 unresolved threads. | merge origin/main; thread resolve only; no provider-backed checks run. |
 | 2026-07-24 | remediate-audit-system-issues (PR #1160) | bdf530fc8c6faaa4491c510396b47872fc39bf25 | Run PR sweep: CI fix + threads + drift | second re-merge after main moved to 2e68888f3 during first push; clean ort merge (ledger + layout.tsx); taskkill /T retained; sitemap prettier retained | merge only; no provider-backed checks run |
+| 2026-07-24 | codex/hydration-fixes (PR #1131) | a29b0d778b542932972aa6035ee115b91e49025a | Run PR re-sync sweep | Before: CONFLICTING + Static PR FAIL (suppressHydrationWarning on skip link). After: merged origin/main; removed illegal suppressHydrationWarning from skip-to-content anchor; theme fix already on PR head b4b5f21b9. CI re-running. | merge origin/main and/or conflict re-check only; no provider-backed checks run |
 | 2026-07-24 | codex/apply-phone-layout-to-all-home-pages (PR #1124) | d0a96caa01b90dffa40e60770b7700f36e8ba43f | Run PR re-sync sweep | Before: CONFLICTING @8adaaf229. After: merged origin/main clean (ort). CI re-running. Threads: not re-triaged. | merge origin/main and/or conflict re-check only; no provider-backed checks run |
 | 2026-07-24 | cursor/repo-auditor-ledger-4132 (PR #1147) | 2f47746ad7e13e8cb848da71fb2647644388da8f | Run PR re-sync sweep | Before: CONFLICTING. After: merged origin/main clean. | merge origin/main and/or conflict re-check only; no provider-backed checks run |
 | 2026-07-24 | cursor/frontend-ui-review-docs-e8d9 (PR #1146) | 2b17f5fcbe06307e7ff50ad0373789daa8f07a01 | Run PR re-sync sweep | Before: CONFLICTING. After: merged origin/main clean. | merge origin/main and/or conflict re-check only; no provider-backed checks run |
 | 2026-07-24 | codex/query-ribbon-search-headings (PR #1166) | c94e89f392f578c4b2c749195dd485b74959074c | Run PR re-sync sweep | Before: CONFLICTING. After: merged origin/main clean. CI re-running. | merge origin/main and/or conflict re-check only; no provider-backed checks run |
 | 2026-07-24 | cursor/comprehensive-repo-review-ledger-d9a1 (PR #1150) | 345c02cdbaefb13aeb951a14674aedfe4648a50e | Run PR re-sync sweep | Before: CONFLICTING. After: merged origin/main clean. | merge origin/main and/or conflict re-check only; no provider-backed checks run |
+| 2026-07-25 | codex/hydration-fixes (PR #1131) | d6b5d23f7e97f99310a249db8e9f006833e697c6 | Open-PR maintenance: CI fix + threads + drift | Before: 24 commits behind, Static PR checks/PR required failed, 2 unresolved Codex threads. After: merged current main cleanly and removed the branch-introduced byte-identical PR #1149 ledger duplicate; hydration suppression fix was already present. | branch-review-ledger guard pass (717 records); targeted lint blocked by active repository heavyweight lock in worktree 6314; `git diff --check` pass; no provider-backed checks run. |
 | 2026-07-24 | codex/apply-phone-layout-to-all-home-pages (PR #1124) | c59ae820db3034ef3cf74ae6d0030a0472a3a264 | Run PR babysit: merge/CI/threads | Before: CONFLICTING + Static PR checks FAIL (duplicate #1149 ledger row) + 2 unresolved Codex P2s. After: merged origin/main; removed duplicate ledger row; Differentials hero slot gated on !(query.trim() && documentMatches.length); threads resolved. | vitest mobile-composer-reserve 9/9; check:branch-review-ledger pass; maintainability 4132/4140. No provider-backed checks run. |
 | 2026-07-25 | codex/document-clinical-summary-20260725 (PR #1169) | 6bbce2b97477cb4497624abe2a37c74864e872c8 | Open-PR maintenance: review-thread verification | Before: 2 unresolved Codex threads; branch current with main and required CI running. After: both persisted-profile/placeholder-summary fixes confirmed on the exact head and ready for reply-then-resolve; no further code change required. | `node scripts/run-vitest.mjs run tests/document-clinical-summary.test.ts tests/document-clinical-summary.dom.test.tsx --reporter=dot` pass (5/5); `git diff --check` pass; no provider-backed checks run. |
 | 2026-07-25 | cursor/pr-babysit-bugbot-agents-6c52 (PR #1167) | ee44812aae9dad1973d8302eba5bfca5000dffb6 | Open-PR maintenance: review-thread fixes | Before: 8 unresolved Codex/CodeRabbit threads; branch current with main. After: target-head pinning, fresh-main verification, exact `cursor[bot]` identity checks, explicit mutation/provider authorization, direct reply-then-resolve semantics, and no-op ledger bookkeeping are documented. | Prettier check on both agent files pass; `git diff --check` pass; GitHub author probe confirmed `cursor[bot]` account type `Bot`; no provider-backed checks run. |
@@ -781,6 +786,7 @@ This file is append-only. Never rewrite or delete an existing review record; app
 | 2026-07-24 | execute-audit-code-remediation (PR #1162) | 3cb7c977 | Conflict fix + Bugbot + local review | Before: CONFLICTING (21 files). After: mergeable. Restored atomic upload RPC; aligned private-access tests (133/133). Bugbot 2 medium left open. | private-access-routes 133/133; no provider-backed checks |
 | 2026-07-25 | codex/document-clinical-summary-20260725 (PR #1169) | 605a47b551a03774fab41416bf980dfbc9610221 | Open-PR maintenance: malformed persisted profile guard | Before: one actionable thread showed non-array or malformed persisted summary groups could throw during render. After: every priority group is normalized through an array/item guard and malformed values are ignored while valid items still render. | Focused Vitest 7/7 pass; Prettier and diff checks pass; no provider-backed checks run. |
 | 2026-07-25 | cursor/search-performance-review-4ee9 (PR #1134) | 692834a86e612cc8b311dc6895e007f182f5c5b8 | Open-PR maintenance: superseded docs-link thread and clean main sync | Before: branch was behind current main with one outdated docs-link thread; its product tree already matched main. After: merged current main cleanly and verified the route-group-aware docs-link fix now covers legacy route references. RAG impact: no retrieval behaviour change — history sync and docs tooling verification only. | `node scripts/check-docs-links.mjs` pass (1154 references); clean merge-tree; no live RAG canary or provider-backed check run. |
+| 2026-07-25 | codex/hydration-fixes (PR #1131) | 555213fcf4dec82c6dbb445630e59e0d5465149a | Open-PR maintenance: persisted-state hydration coverage | Before: the browser guard covered only an empty-storage dashboard load. After: it seeds theme localStorage plus cookie, sidebar state, and document-viewer PDF mode before navigation, while retaining the default case. | Repository Playwright runner built the isolated production app and passed 3/3 Chromium hydration scenarios; Prettier and diff checks pass; no provider-backed checks run. |
 | 2026-07-24 | open-PR conflict sync (20 PRs) | multi-head | Conflict resolution pass | Before: 8 PRs behind/dirty (#1124 #1131 #1162 #1169 #1174-1177). After: merged origin/main into all; all 20 open PRs MERGEABLE behind=0 (BLOCKED only by CI/reviews). | merge origin/main per branch; no provider-backed checks run |
 | 2026-07-24 | open-PR conflict sync (22 PRs) | multi-head | Conflict resolution pass | Before: all 22 open PRs behind/dirty vs main (several CONFLICTING/DIRTY). After: merged origin/main into every open head; all pushes OK; merge-tree classified 22/22 clean. | merge origin/main per branch; check:branch-review-ledger on #1172; no provider-backed checks run |
 | 2026-07-24 | cursor/pr-queue-hygiene-72ec | pending-push | PR queue hygiene | Add pr-branch-sync workflow + sync:pr-branches helper; bump postcss to clear npm audit high; document anti-churn guidance in AGENTS/process-hardening/pr-babysit/run-pr. | check:github-actions PASS; docs:check-scripts/index PASS; vitest sync-open-pr-branches 3/3; npm audit high clean; no provider-backed checks run |
diff --git a/eslint-rules/restrict-suppress-hydration-warning.mjs b/eslint-rules/restrict-suppress-hydration-warning.mjs
new file mode 100644
index 000000000..a710fc36f
--- /dev/null
+++ b/eslint-rules/restrict-suppress-hydration-warning.mjs
@@ -0,0 +1,35 @@
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Restrict suppressHydrationWarning to <html> and <body> tags only",
+      category: "Possible Errors",
+      recommended: true,
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name === "suppressHydrationWarning") {
+          const parentElement = node.parent; // JSXOpeningElement
+          if (parentElement && parentElement.name) {
+            const tagName = parentElement.name.name;
+            // The audit explicitly requested banning it on elements other than html and body.
+            // We also allow script since it's required for nonce mismatch bypass in layout.tsx.
+            if (tagName !== "html" && tagName !== "body" && tagName !== "script") {
+              context.report({
+                node,
+                message:
+                  "suppressHydrationWarning is only allowed on <html>, <body>, and <script> elements. Fix the underlying mismatch instead of hiding it.",
+              });
+            }
+          }
+        }
+      },
+    };
+  },
+};
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 0a67d4ed7..b85dedc10 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -4,6 +4,7 @@ import nextTs from "eslint-config-next/typescript";
 
 import requireLucideIconAria from "./eslint-rules/require-lucide-icon-aria.mjs";
 import requireButtonWiring from "./eslint-rules/require-button-wiring.mjs";
+import restrictSuppressHydrationWarning from "./eslint-rules/restrict-suppress-hydration-warning.mjs";
 
 // Shared `local` plugin object. ESLint flat config requires every config block
 // that references a plugin namespace to point at the *same* object, so the two
@@ -12,6 +13,7 @@ const localRulesPlugin = {
   rules: {
     "require-lucide-icon-aria": requireLucideIconAria,
     "require-button-wiring": requireButtonWiring,
+    "restrict-suppress-hydration-warning": restrictSuppressHydrationWarning,
   },
 };
 
@@ -66,6 +68,13 @@ const eslintConfig = defineConfig([
       "local/require-button-wiring": "error",
     },
   },
+  {
+    files: ["src/**/*.{js,jsx,ts,tsx}"],
+    plugins: { local: localRulesPlugin },
+    rules: {
+      "local/restrict-suppress-hydration-warning": "error",
+    },
+  },
   // Import boundary: production source must not import design-scratch mockup
   // modules. Every legitimate mockup import lives under `src/app/mockups/**` (all
   // 404 in production) or inside the `*-mockups` component sources themselves;
diff --git a/playwright.config.ts b/playwright.config.ts
index 87e81e8a4..897d06694 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -13,14 +13,14 @@ const chromiumExecutablePath = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH;
 // they share a spec file. Every required browser project uses the same
 // production matcher and tag exclusion.
 const productionSpecPattern =
-  /.*(?:answer-progress-ui-smoke|ui-(smoke|stress|accessibility|tools|overlap|universal-search|specifiers|formulation|phone-scroll|pwa|route-coverage|visual-artifacts))\.spec\.ts/;
+  /.*(?:answer-progress-ui-smoke|ui-(smoke|stress|accessibility|tools|overlap|universal-search|specifiers|formulation|phone-scroll|pwa|route-coverage|visual-artifacts|hydration))\.spec\.ts/;
 const mockupSpecPattern = /.*ui-(tools|tools-collapse|tools-task-directory)\.spec\.ts/;
 const mockupTag = /@mockup/;
 
 export default defineConfig({
   testDir: "./tests",
   testMatch:
-    /.*(?:answer-progress-ui-smoke|ui-(smoke|stress|accessibility|tools|tools-collapse|tools-task-directory|overlap|universal-search|specifiers|formulation|phone-scroll|pwa|route-coverage|visual-artifacts))\.spec\.ts/,
+    /.*(?:answer-progress-ui-smoke|ui-(smoke|stress|accessibility|tools|tools-collapse|tools-task-directory|overlap|universal-search|specifiers|formulation|phone-scroll|pwa|route-coverage|visual-artifacts|hydration))\.spec\.ts/,
   timeout: 60_000,
   retries: 0,
   // Fail the run if a stray `test.only` is committed: otherwise it silently
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index cd82c3ad0..ab735fb94 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,12 @@
 import type { Metadata, Viewport } from "next";
 import localFont from "next/font/local";
-import { headers } from "next/headers";
+import { cookies, headers } from "next/headers";
 import { AuthProvider } from "@/lib/supabase/client";
 import { AccountDataProvider } from "@/components/account-data-provider";
 import { PwaLifecycle } from "@/components/pwa-lifecycle";
 import { WebVitalsReporter } from "@/components/web-vitals-reporter";
 import { resolveMetadataBase } from "@/lib/metadata-base";
-import { APP_THEME_COLORS, THEME_BOOTSTRAP_SCRIPT } from "@/lib/theme";
+import { APP_THEME_COLORS, THEME_BOOTSTRAP_SCRIPT, THEME_COOKIE_NAME } from "@/lib/theme";
 import "./globals.css";
 
 const geistSans = localFont({
@@ -78,10 +78,15 @@ export default async function RootLayout({
   // silent runtime failure: theme flash returns). Reading headers() opts the app
   // into dynamic rendering — inherent to nonce-based CSP.
   const nonce = (await headers()).get("x-nonce") ?? undefined;
+  const cookieStore = await cookies();
+  const clinicalTheme = cookieStore.get(THEME_COOKIE_NAME)?.value;
+  const isDark = clinicalTheme === "dark";
+  const themeClass = isDark ? "dark" : "";
+
   return (
     <html
       lang="en-AU"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased ${themeClass}`}
       suppressHydrationWarning
     >
       <body className="min-h-full flex flex-col" suppressHydrationWarning>
@@ -102,7 +107,6 @@ export default async function RootLayout({
         />
         <a
           href="#main-content"
-          suppressHydrationWarning
           className="sr-only focus:not-sr-only focus:fixed focus:left-[max(0.75rem,env(safe-area-inset-left))] focus:top-[max(0.75rem,env(safe-area-inset-top))] focus:z-[100] focus:rounded-lg focus:border focus:border-[color:var(--border-lux)] focus:bg-[color:var(--surface-raised)] focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-[color:var(--text)] focus:shadow-[var(--shadow-elevated)]"
         >
           Skip to main content
diff --git a/src/components/DocumentViewer.tsx b/src/components/DocumentViewer.tsx
index 6ba75b09e..5e5aadb30 100644
--- a/src/components/DocumentViewer.tsx
+++ b/src/components/DocumentViewer.tsx
@@ -303,8 +303,6 @@ export function DocumentViewer({
   const [localProjectReady, setLocalProjectReady] = useState(true);
   const [mobileActionsOpen, setMobileActionsOpen] = useState(false);
   // Phone-only hide-on-scroll for the bottom composer: never hide while the
-  // mobile actions sheet is open or while focus sits inside the composer
-  // (keyboard users must not tab into invisible controls).
   const [composerChromeFocused, setComposerChromeFocused] = useState(false);
   const [shellScrollContainer, setShellScrollContainer] = useState<HTMLElement | null>(null);
   useEffect(() => {
@@ -333,21 +331,21 @@ export function DocumentViewer({
     resetKey: `${documentId}:${activePage}:${activeChunkId ?? ""}`,
   });
   const composerScrollHidden = scrollHidden && !mobileActionsOpen && !composerChromeFocused;
-  // Read localStorage once on mount, then seed both derived states from it.
-  const [initialPdfViewerMode] = useState(getInitialPdfViewerMode);
-  const [useNativePdfViewer, setUseNativePdfViewer] = useState(initialPdfViewerMode.useNativePdfViewer);
-  const [hasExplicitPdfViewerMode, setHasExplicitPdfViewerMode] = useState(
-    initialPdfViewerMode.hasExplicitPdfViewerMode,
-  );
-  const [viewerModeInitialized] = useState(true);
+  const [useNativePdfViewer, setUseNativePdfViewer] = useState(getDefaultPdfViewerMode);
+  const [hasExplicitPdfViewerMode, setHasExplicitPdfViewerMode] = useState(false);
+  const [viewerModeInitialized, setViewerModeInitialized] = useState(false);
+  useEffect(() => {
+    const frame = window.requestAnimationFrame(() => {
+      const initialMode = getInitialPdfViewerMode();
+      setUseNativePdfViewer(initialMode.useNativePdfViewer);
+      setHasExplicitPdfViewerMode(initialMode.hasExplicitPdfViewerMode);
+      setViewerModeInitialized(true);
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, []);
   const generatedSummaryRef = useRef<HTMLElement | null>(null);
   const summaryAbortRef = useRef<AbortController | null>(null);
-  useEffect(
-    () => () => {
-      summaryAbortRef.current?.abort();
-    },
-    [],
-  );
+  useEffect(() => () => summaryAbortRef.current?.abort(), []);
   const {
     status: authStatus,
     session,
diff --git a/src/components/clinical-dashboard/answer-status.tsx b/src/components/clinical-dashboard/answer-status.tsx
index 0660289fa..2e616ac7b 100644
--- a/src/components/clinical-dashboard/answer-status.tsx
+++ b/src/components/clinical-dashboard/answer-status.tsx
@@ -11,7 +11,6 @@ import {
   ShieldCheck,
   Square,
 } from "lucide-react";
-import { useEffect, useState } from "react";
 
 import {
   answerProgressDisplayMessage,
@@ -19,6 +18,7 @@ import {
   answerProgressSteps,
   type TimedAnswerProgressUpdate,
 } from "@/components/clinical-dashboard/answer-progress";
+import { useClientTime } from "@/lib/use-client-time";
 import { AnswerSuggestionChips } from "@/components/clinical-dashboard/answer-suggestion-chips";
 import { useAppPreferences } from "@/components/clinical-dashboard/use-app-preferences";
 import { ModeHomeTemplate, ModeHomeVerificationFooter } from "@/components/mode-home-template";
@@ -162,17 +162,14 @@ export function AnswerProgressStepper({
   active: boolean;
   onStop: () => void;
 }) {
-  const [now, setNow] = useState(() => Date.now());
   const latest = events.at(-1) ?? null;
   const finished = latest?.stage === "complete";
+  const now = useClientTime({
+    fallback: startedAt ?? 0,
+    updateInterval: active && !finished && startedAt ? 1_000 : undefined,
+  });
   const currentStep = latest ? answerProgressStepIndex(latest.stage) : 0;
 
-  useEffect(() => {
-    if (!active || finished || !startedAt) return;
-    const interval = window.setInterval(() => setNow(Date.now()), 1_000);
-    return () => window.clearInterval(interval);
-  }, [active, finished, startedAt]);
-
   const clientElapsedMs = startedAt ? Math.max(0, (finished ? (latest?.receivedAt ?? now) : now) - startedAt) : 0;
   const elapsedMs = finished && latest?.elapsedMs !== undefined ? latest.elapsedMs : clientElapsedMs;
   const details = events
diff --git a/src/components/clinical-dashboard/use-hide-on-scroll.ts b/src/components/clinical-dashboard/use-hide-on-scroll.ts
index fe0fd5a2c..24033c964 100644
--- a/src/components/clinical-dashboard/use-hide-on-scroll.ts
+++ b/src/components/clinical-dashboard/use-hide-on-scroll.ts
@@ -1,6 +1,7 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore, type RefObject } from "react";
+import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
+import { createBrowserStore } from "@/lib/client-store-factory";
 
 import { mobileComposerHiddenReserveRem } from "@/components/clinical-dashboard/mobile-composer-reserve";
 
@@ -189,12 +190,10 @@ function readPhoneMedia() {
   return window.matchMedia(phoneMediaQuery).matches;
 }
 
-function readPhoneMediaServer() {
-  return false;
-}
+const usePhoneMediaStore = createBrowserStore(subscribeToPhoneMedia, readPhoneMedia, false);
 
 function usePhoneScrollHideActive(disabled = false, allowAllBreakpoints = false) {
-  const isPhone = useSyncExternalStore(subscribeToPhoneMedia, readPhoneMedia, readPhoneMediaServer);
+  const isPhone = usePhoneMediaStore();
   return (allowAllBreakpoints || isPhone) && !disabled;
 }
 
diff --git a/src/components/clinical-dashboard/use-sidebar-collapsed.ts b/src/components/clinical-dashboard/use-sidebar-collapsed.ts
index 574a82c31..ff419375b 100644
--- a/src/components/clinical-dashboard/use-sidebar-collapsed.ts
+++ b/src/components/clinical-dashboard/use-sidebar-collapsed.ts
@@ -1,6 +1,7 @@
 "use client";
 
-import { useCallback, useSyncExternalStore } from "react";
+import { useCallback } from "react";
+import { createBrowserStore } from "@/lib/client-store-factory";
 
 const storageKey = "clinical-kb-sidebar-collapsed";
 const changeEvent = "clinical-kb-sidebar-collapsed-change";
@@ -25,10 +26,6 @@ function getSnapshot() {
   }
 }
 
-function getServerSnapshot() {
-  return false;
-}
-
 function subscribe(onChange: () => void) {
   window.addEventListener("storage", onChange);
   window.addEventListener(changeEvent, onChange);
@@ -38,13 +35,15 @@ function subscribe(onChange: () => void) {
   };
 }
 
+const useSidebarCollapsedStore = createBrowserStore(subscribe, getSnapshot, false);
+
 /**
  * Desktop sidebar collapse state shared across shells and persisted per
  * browser, mirroring the use-theme.ts external-store pattern so the choice
  * survives route changes between the dashboard and standalone shells.
  */
 export function useSidebarCollapsed() {
-  const collapsed = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const collapsed = useSidebarCollapsedStore();
   const setCollapsed = useCallback((next: boolean) => {
     try {
       window.localStorage.setItem(storageKey, next ? "1" : "0");
diff --git a/src/components/clinical-dashboard/use-theme.ts b/src/components/clinical-dashboard/use-theme.ts
index 112ec3317..fac2929f8 100644
--- a/src/components/clinical-dashboard/use-theme.ts
+++ b/src/components/clinical-dashboard/use-theme.ts
@@ -6,13 +6,15 @@ import {
   APP_THEME_COLORS,
   DEFAULT_THEME,
   nextTheme,
+  readThemeCookie,
   readThemePreference,
   resolveThemePreference,
+  THEME_COOKIE_NAME,
+  THEME_STORAGE_KEY,
   type ResolvedTheme,
   type ThemePreference,
 } from "@/lib/theme";
 
-const themeStorageKey = "clinical-kb-theme";
 const themeChangeEvent = "clinical-kb-theme-change";
 
 // In-memory fallback when localStorage is unavailable (Safari private mode,
@@ -21,15 +23,37 @@ const themeChangeEvent = "clinical-kb-theme-change";
 // Mirrors the fallback pattern in use-sidebar-collapsed.ts / use-app-preferences.ts.
 let inMemoryPreference: ThemePreference | null = null;
 
+function readThemeCookieValue(): string | null {
+  try {
+    return readThemeCookie(document.cookie);
+  } catch {
+    return null;
+  }
+}
+
+function writeThemeCookie(next: ThemePreference) {
+  try {
+    if (next === "system") {
+      document.cookie = `${THEME_COOKIE_NAME}=; path=/; max-age=0; SameSite=Lax`;
+      return;
+    }
+    document.cookie = `${THEME_COOKIE_NAME}=${next}; path=/; max-age=31536000; SameSite=Lax`;
+  } catch {
+    // Cookie write blocked — localStorage / in-memory still drive the session.
+  }
+}
+
 function readStoredThemeValue(): string | null {
   if (inMemoryPreference !== null) {
     return inMemoryPreference === "system" ? null : inMemoryPreference;
   }
   try {
-    return window.localStorage.getItem(themeStorageKey);
+    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+    if (stored === "light" || stored === "dark") return stored;
   } catch {
-    return null;
+    // fall through to cookie
   }
+  return readThemeCookieValue();
 }
 
 function getThemeSnapshot(): ResolvedTheme {
@@ -90,14 +114,15 @@ export function useTheme() {
     try {
       // Clearing the stored pin lets the OS preference (and its live media
       // query) drive the theme again, matching the pre-hydration script.
-      if (next === "system") window.localStorage.removeItem(themeStorageKey);
-      else window.localStorage.setItem(themeStorageKey, next);
+      if (next === "system") window.localStorage.removeItem(THEME_STORAGE_KEY);
+      else window.localStorage.setItem(THEME_STORAGE_KEY, next);
       inMemoryPreference = null;
     } catch {
       // Storage blocked: keep the choice in memory so the theme still applies
       // (and reads back correctly) for the rest of this session.
       inMemoryPreference = next;
     }
+    writeThemeCookie(next);
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     applyResolvedTheme(resolveThemePreference(next === "system" ? null : next, prefersDark));
     window.dispatchEvent(new Event(themeChangeEvent));
diff --git a/src/components/differentials/diagnosis-map-panel.tsx b/src/components/differentials/diagnosis-map-panel.tsx
index 77301d09d..2e8e7f213 100644
--- a/src/components/differentials/diagnosis-map-panel.tsx
+++ b/src/components/differentials/diagnosis-map-panel.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, type PointerEvent } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type PointerEvent } from "react";
+import { createBrowserStore } from "@/lib/client-store-factory";
 import Link from "next/link";
 import {
   CircleCheck,
@@ -100,12 +101,10 @@ function subscribeLargeScreen(callback: () => void) {
 }
 
 function getLargeScreenSnapshot() {
-  return typeof window !== "undefined" && window.matchMedia(largeScreenQuery).matches;
+  return window.matchMedia(largeScreenQuery).matches;
 }
 
-function getServerScreenSnapshot() {
-  return false;
-}
+const useLargeScreenStore = createBrowserStore(subscribeLargeScreen, getLargeScreenSnapshot, false);
 
 function nodeLabel(node: SelectedNode, record: DifferentialRecord) {
   return node === "diagnosis" ? record.title : node.label;
@@ -370,7 +369,7 @@ export function DiagnosisMapPanel({
   const [pan, setPan] = useState<ActivePoint>({ x: 0, y: 0 });
   const [filtered, setFiltered] = useState(false);
   const [addedIds, setAddedIds] = useState<string[]>([]);
-  const isLargeScreen = useSyncExternalStore(subscribeLargeScreen, getLargeScreenSnapshot, getServerScreenSnapshot);
+  const isLargeScreen = useLargeScreenStore();
   const openButtonRef = useRef<HTMLButtonElement>(null);
   const activePointers = useRef(new Map<number, ActivePoint>());
   const lastPointer = useRef<ActivePoint | null>(null);
diff --git a/src/components/pwa-lifecycle.tsx b/src/components/pwa-lifecycle.tsx
index c0f61bf81..9a29d9d4e 100644
--- a/src/components/pwa-lifecycle.tsx
+++ b/src/components/pwa-lifecycle.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { RefreshCw, Share, SquarePlus, Wifi, WifiOff, X, type LucideIcon } from "lucide-react";
-import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useEffect, useRef, useState } from "react";
+import { createBrowserStore } from "@/lib/client-store-factory";
 
 const SERVICE_WORKER_URL = "/sw.js";
 const INSTALL_DISMISSAL_KEY = "clinical-kb-pwa-install-dismissed-at";
@@ -33,9 +34,7 @@ function getConnectivitySnapshot() {
   return navigator.onLine;
 }
 
-function getServerConnectivitySnapshot() {
-  return true;
-}
+const useConnectivityStore = createBrowserStore(subscribeConnectivity, getConnectivitySnapshot, true);
 
 function isStandaloneDisplay() {
   return (
@@ -182,7 +181,7 @@ function InstallStepChip({ icon: Icon, label }: { icon: LucideIcon; label: strin
  * owned caches again.
  */
 export function PwaLifecycle() {
-  const isOnline = useSyncExternalStore(subscribeConnectivity, getConnectivitySnapshot, getServerConnectivitySnapshot);
+  const isOnline = useConnectivityStore();
   const [connectionRestored, setConnectionRestored] = useState(false);
   const [installPrompt, setInstallPrompt] = useState<BeforeInstallPromptEvent | null>(null);
   const [offlineNoticeDismissed, setOfflineNoticeDismissed] = useState(false);
diff --git a/src/lib/client-store-factory.ts b/src/lib/client-store-factory.ts
new file mode 100644
index 000000000..c1f96dd54
--- /dev/null
+++ b/src/lib/client-store-factory.ts
@@ -0,0 +1,32 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+/**
+ * Creates a safe, SSR-compatible wrapper for useSyncExternalStore that guards
+ * browser-only APIs (window, navigator, localStorage) behind a typeof window
+ * check, ensuring deterministic hydration and eliminating code duplication.
+ */
+export function createBrowserStore<T>(
+  subscribeFn: (onStoreChange: () => void) => () => void,
+  getSnapshotFn: () => T,
+  serverSnapshot: T,
+) {
+  const subscribe = (onStoreChange: () => void) => {
+    if (typeof window === "undefined") {
+      return () => {};
+    }
+    return subscribeFn(onStoreChange);
+  };
+
+  const getSnapshot = () => {
+    if (typeof window === "undefined") {
+      return serverSnapshot;
+    }
+    return getSnapshotFn();
+  };
+
+  return function useBrowserStore() {
+    return useSyncExternalStore(subscribe, getSnapshot, () => serverSnapshot);
+  };
+}
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index ee30f99f3..503cf02a6 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -15,11 +15,22 @@ export const APP_THEME_COLORS = {
   dark: "#060708",
 } as const satisfies Record<ResolvedTheme, string>;
 
+/** localStorage key for an explicit light/dark pin. */
+export const THEME_STORAGE_KEY = "clinical-kb-theme";
+
+/**
+ * Cookie mirror of an explicit light/dark pin so the server layout can paint
+ * the correct `<html>` class before hydration. Cleared for "system".
+ */
+export const THEME_COOKIE_NAME = "clinical-theme";
+
 /**
  * Runs before paint. Storage is deliberately isolated so privacy modes that
- * throw on localStorage still receive their OS-selected theme.
+ * throw on localStorage still receive their OS-selected theme. When localStorage
+ * has no explicit pin, fall back to the `clinical-theme` cookie so a
+ * cookie-only preference (matching RootLayout) is not immediately overwritten.
  */
-export const THEME_BOOTSTRAP_SCRIPT = `(function(){var t=null;try{t=localStorage.getItem("clinical-kb-theme");}catch(e){}var d=t==="dark"||(t!=="light"&&window.matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.classList.toggle("dark",d);var c=d?"${APP_THEME_COLORS.dark}":"${APP_THEME_COLORS.light}";document.querySelectorAll('meta[name="theme-color"]').forEach(function(m){m.setAttribute("content",c);});})();`;
+export const THEME_BOOTSTRAP_SCRIPT = `(function(){var t=null;try{t=localStorage.getItem("${THEME_STORAGE_KEY}");}catch(e){}if(t!=="light"&&t!=="dark"){try{var m=document.cookie.match(/(?:^|; )${THEME_COOKIE_NAME}=(light|dark)(?:;|$)/);if(m)t=m[1];}catch(e){}}var d=t==="dark"||(t!=="light"&&window.matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.classList.toggle("dark",d);var c=d?"${APP_THEME_COLORS.dark}":"${APP_THEME_COLORS.light}";document.querySelectorAll('meta[name="theme-color"]').forEach(function(m){m.setAttribute("content",c);});})();`;
 
 export function resolveThemePreference(storedTheme: string | null | undefined, prefersDark: boolean): ResolvedTheme {
   if (storedTheme === "light" || storedTheme === "dark") return storedTheme;
@@ -38,3 +49,10 @@ export function readThemePreference(storedTheme: string | null | undefined): The
 export function nextTheme(currentTheme: ResolvedTheme): ResolvedTheme {
   return currentTheme === "dark" ? "light" : "dark";
 }
+
+/** Read an explicit light/dark pin from `document.cookie`, if present. */
+export function readThemeCookie(cookieSource: string | null | undefined): ResolvedTheme | null {
+  if (!cookieSource) return null;
+  const match = cookieSource.match(new RegExp(`(?:^|;\\s*)${THEME_COOKIE_NAME}=(light|dark)(?:;|$)`));
+  return match?.[1] === "light" || match?.[1] === "dark" ? match[1] : null;
+}
diff --git a/src/lib/use-client-time.ts b/src/lib/use-client-time.ts
new file mode 100644
index 000000000..4f6e4e8d7
--- /dev/null
+++ b/src/lib/use-client-time.ts
@@ -0,0 +1,24 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+/**
+ * Returns a hydration-safe timestamp.
+ * During server-side rendering, it returns the provided fallback (or 0).
+ * After mounting on the client, it returns Date.now() and updates on the given interval if specified.
+ */
+export function useClientTime({ fallback = 0, updateInterval }: { fallback?: number; updateInterval?: number } = {}) {
+  const [time, setTime] = useState(fallback);
+
+  useEffect(() => {
+    const update = () => setTime(Date.now());
+    const frame = window.requestAnimationFrame(update);
+    const interval = updateInterval && updateInterval > 0 ? window.setInterval(update, updateInterval) : null;
+    return () => {
+      window.cancelAnimationFrame(frame);
+      if (interval != null) window.clearInterval(interval);
+    };
+  }, [updateInterval]);
+
+  return time;
+}
diff --git a/tests/theme.test.ts b/tests/theme.test.ts
index 24f41c0bc..58fbe4868 100644
--- a/tests/theme.test.ts
+++ b/tests/theme.test.ts
@@ -2,9 +2,12 @@ import { describe, expect, it, vi } from "vitest";
 import {
   APP_THEME_COLORS,
   nextTheme,
+  readThemeCookie,
   readThemePreference,
   resolveThemePreference,
   THEME_BOOTSTRAP_SCRIPT,
+  THEME_COOKIE_NAME,
+  THEME_STORAGE_KEY,
 } from "../src/lib/theme";
 
 describe("theme helpers", () => {
@@ -59,4 +62,41 @@ describe("theme helpers", () => {
     expect(readThemePreference("system")).toBe("system");
     expect(readThemePreference("sepia")).toBe("system");
   });
+
+  it("exports stable storage and cookie keys shared with layout + useTheme", () => {
+    expect(THEME_STORAGE_KEY).toBe("clinical-kb-theme");
+    expect(THEME_COOKIE_NAME).toBe("clinical-theme");
+    expect(THEME_BOOTSTRAP_SCRIPT).toContain(THEME_STORAGE_KEY);
+    expect(THEME_BOOTSTRAP_SCRIPT).toContain(THEME_COOKIE_NAME);
+  });
+
+  it("parses an explicit theme pin from the cookie string", () => {
+    expect(readThemeCookie(`${THEME_COOKIE_NAME}=dark`)).toBe("dark");
+    expect(readThemeCookie(`a=1; ${THEME_COOKIE_NAME}=light; b=2`)).toBe("light");
+    expect(readThemeCookie(`${THEME_COOKIE_NAME}=system`)).toBeNull();
+    expect(readThemeCookie("")).toBeNull();
+  });
+
+  it("falls back to the theme cookie when localStorage has no pin", () => {
+    const toggle = vi.fn();
+    const setAttribute = vi.fn();
+    const run = new Function("localStorage", "window", "document", THEME_BOOTSTRAP_SCRIPT);
+
+    run(
+      {
+        getItem() {
+          return null;
+        },
+      },
+      { matchMedia: () => ({ matches: false }) },
+      {
+        cookie: `${THEME_COOKIE_NAME}=dark`,
+        documentElement: { classList: { toggle } },
+        querySelectorAll: () => [{ setAttribute }],
+      },
+    );
+
+    expect(toggle).toHaveBeenCalledWith("dark", true);
+    expect(setAttribute).toHaveBeenCalledWith("content", APP_THEME_COLORS.dark);
+  });
 });
diff --git a/tests/ui-hydration.spec.ts b/tests/ui-hydration.spec.ts
new file mode 100644
index 000000000..c9c97b175
--- /dev/null
+++ b/tests/ui-hydration.spec.ts
@@ -0,0 +1,64 @@
+import { test, expect } from "playwright/test";
+
+test.describe("React Hydration Safety", () => {
+  const scenarios = [
+    { name: "dashboard defaults", route: "/", storage: {} },
+    {
+      name: "dashboard persisted theme and sidebar",
+      route: "/",
+      storage: { "clinical-kb-theme": "dark", "clinical-kb-sidebar-collapsed": "1" },
+      themeCookie: "dark",
+    },
+    {
+      name: "document viewer persisted PDF mode",
+      route: "/documents/11111111-1111-4111-8111-111111111111?page=1",
+      storage: { "clinical-kb:pdf-viewer-mode": "native" },
+    },
+  ] as const;
+
+  for (const scenario of scenarios) {
+    test(`${scenario.name} does not emit hydration warnings during initial load`, async ({ page, baseURL }) => {
+      const hydrationErrors: string[] = [];
+
+      const isHydrationError = (text: string) =>
+        text.includes("Warning: Text content did not match") ||
+        text.includes("Warning: Expected server HTML to contain") ||
+        (text.includes("Warning: Prop") && text.includes("did not match")) ||
+        text.includes("A tree hydrated but some attributes") ||
+        text.includes("Hydration failed because") ||
+        text.includes("There was an error while hydrating") ||
+        /Minified React error #(?:418|423|425)\b/.test(text);
+
+      page.on("console", (msg) => {
+        if (msg.type() === "error" || msg.type() === "warning") {
+          const text = msg.text();
+          if (isHydrationError(text)) hydrationErrors.push(text);
+        }
+      });
+      page.on("pageerror", (error) => {
+        const text = error.message;
+        if (isHydrationError(text)) hydrationErrors.push(text);
+      });
+
+      if ("themeCookie" in scenario) {
+        expect(baseURL).toBeTruthy();
+        await page
+          .context()
+          .addCookies([{ name: "clinical-theme", value: scenario.themeCookie, url: new URL("/", baseURL).toString() }]);
+      }
+      await page.addInitScript((storage) => {
+        for (const [key, value] of Object.entries(storage)) window.localStorage.setItem(key, value);
+      }, scenario.storage);
+
+      // Navigate to the route, ensuring we load it from the server with persisted state already seeded.
+      const response = await page.goto(scenario.route);
+      expect(response?.ok()).toBe(true);
+
+      // Wait for the hydration and initial load to finish
+      await page.waitForLoadState("networkidle");
+
+      // Fail the test if any hydration errors were captured
+      expect(hydrationErrors, "Expected no React hydration mismatch warnings or errors in the console").toEqual([]);
+    });
+  }
+});