Add the account area and account-synced Appearance preferences

Stage 1 PR 6 (ADR 0062). /account shows who is signed in; /account/appearance
chooses System, Light, or Dark and reduced motion (System, Reduce, Allow).

- Core: ekklesia_core_user_preference, one typed, CHECK-constrained,
  nullable column per preference (null = never chosen), migration
  0008_user_preferences (additive), @ekklesia/core/account store, and the
  authenticated-baseline permission core.account.self.manage.
- API: GET /api/v1/account (name, email, preferences) and partial
  PATCH /api/v1/account/preferences, self-only by construction: no user id
  is accepted anywhere; trusted Origin and body limit on the mutation.
- Shell: the account control shows name, email, and initials (never the
  unvetted image URL) and offers Account, Appearance, Sign out; native
  radio groups apply a choice at once through the ADR 0060 controller and
  save it; the server's answer wins and a failed save reverts.
- First paint: a classic, same-origin, render-blocking appearance.js in
  <head> applies a two-word localStorage cache before paint (no inline
  script, CSP unchanged). The account replaces the cache on every load,
  sign-out clears it, and other tabs follow via the storage event.
- Deploy smoke: real-Chromium checks for light/dark, OS emulation,
  overrides, reload persistence, pre-paint, Shadow DOM modules, reduced
  motion, the display staying light, and phone width; the browser
  container gets a 512 MiB /dev/shm so a long session no longer fails
  requests with ERR_INSUFFICIENT_RESOURCES.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

surfaces/shell/tests/shell-navigation.test.tsx

@@ -384,12 +384,13 @@ describe("the account area", () => {
     expect(trigger.getAttribute("aria-haspopup")).toBe("menu");
     expect(trigger.getAttribute("aria-expanded")).toBe("false");
     expect(trigger.textContent).toContain("Your account");
-    // Only the opaque user id is known to the shell, and it is never shown.
+    // This harness serves no account, so the control names the area; the opaque user id is never
+    // shown either way. With an account it names the person (account-appearance.test.tsx).
     expect(container.textContent).not.toContain("user-1");
     expect(query("host-account-menu-list")).toBeNull();
   });
 
-  it("opens on activation with focus on its first item, and offers only actions that work today", async () => {
+  it("opens on activation with focus on its first item, and offers only destinations that work", async () => {
     await render();
     const trigger = required("host-account-menu");
 
@@ -400,9 +401,14 @@ describe("the account area", () => {
     expect(trigger.getAttribute("aria-expanded")).toBe("true");
     expect(trigger.getAttribute("aria-controls")).toBe(menu.id);
     const items = [...menu.querySelectorAll('[role="menuitem"]')];
-    expect(items.map((item) => item.textContent)).toEqual(["Sign out"]);
+    expect(items.map((item) => item.textContent)).toEqual(["Account", "Appearance", "Sign out"]);
     expect(document.activeElement).toBe(items[0]);
-    expect(menu.querySelector("a")).toBeNull();
+    // Account and Appearance are real links to real pages (ADR 0062); Sign out is an action.
+    expect([...menu.querySelectorAll("a")].map((link) => link.getAttribute("href"))).toEqual([
+      "/account",
+      "/account/appearance",
+    ]);
+    expect(items[2]?.tagName).toBe("BUTTON");
   });
 
   it("opens from the keyboard with ArrowDown, and Escape closes it and returns focus", async () => {
@@ -411,6 +417,8 @@ describe("the account area", () => {
     await focus(trigger);
 
     await key(trigger, "ArrowDown");
+    expect(document.activeElement).toBe(required("host-account-link"));
+    await key(required("host-account-link"), "ArrowUp");
     expect(document.activeElement).toBe(required("host-logout"));
 
     await key(required("host-logout"), "Escape");