Accounts Phase 1c: sign-in UI, magic-link landing, auth store

- Shared reactive auth store (auth.user) + postJSON helper (sends the cookie).
- SignIn modal: email -> "check your inbox" (calm, no password); Google slots in
  here in Phase 2.
- /auth/verify route exchanges the magic-link token for a session, then home.
- Header shows "Sign in" or an account avatar; the You sheet gains "Signed in as
  …" + Sign out (or a Sign in row). Anonymous browsing is unchanged.

frontend/src/routes/+page.svelte

@@ -7,6 +7,8 @@
   import MoodNav from '$lib/components/MoodNav.svelte';
   import ArticleCard from '$lib/components/ArticleCard.svelte';
   import BoundariesPanel from '$lib/components/BoundariesPanel.svelte';
+  import SignIn from '$lib/components/SignIn.svelte';
+  import { auth, refresh as refreshAuth, logout as authLogout } from '$lib/auth.svelte.js';
 
   let moods = $state([]);
   let topics = $state([]);
@@ -19,6 +21,17 @@
   let showBoundaries = $state(false);
   let showHistory = $state(false);
   let showYou = $state(false); // mobile "You" sheet
+  let showSignIn = $state(false);
+
+  function openAccount() {
+    showYou = false;
+    if (auth.user) showYou = true; // account lives in the You sheet
+    else showSignIn = true;
+  }
+  async function signOut() {
+    await authLogout();
+    showYou = false;
+  }
   let loading = $state(true);
   let error = $state('');
 
@@ -227,6 +240,7 @@
     seenIds = new Set(P.loadJSON(SEEN_KEY, []));
     dismissed = new Set(P.loadJSON(DISMISSED_KEY, []));
     history = P.loadJSON(HISTORY_KEY, []);
+    refreshAuth(); // resolve any existing session (non-blocking)
     try {
       moods = await getJSON('/api/moods');
       topics = (await getJSON('/api/categories')).topics;
@@ -242,7 +256,15 @@
   });
 </script>
 
-<Header onBoundaries={() => (showBoundaries = !showBoundaries)} onHistory={() => (showHistory = !showHistory)} {filtersOn} />
+<Header
+  onBoundaries={() => (showBoundaries = !showBoundaries)}
+  onHistory={() => (showHistory = !showHistory)}
+  onaccount={openAccount}
+  user={auth.user}
+  {filtersOn}
+/>
+
+{#if showSignIn}<SignIn onclose={() => (showSignIn = false)} />{/if}
 
 <main class="container">
   {#if moods.length}
@@ -278,12 +300,22 @@
   {#if showYou}
     <section class="panel rise youmenu">
       <div class="phead"><h2>You</h2><button class="close" onclick={() => (showYou = false)}>done</button></div>
+      {#if auth.user}
+        <div class="acctline">Signed in as <strong>{auth.user.email}</strong></div>
+      {/if}
       <button class="yourow" onclick={() => { showYou = false; showBoundaries = true; }}>
         <span>Your boundaries</span>{#if filtersOn}<span class="dot">on</span>{/if}
       </button>
       <button class="yourow" onclick={() => { showYou = false; showHistory = true; }}>
         <span>What you've seen</span>{#if history.length}<span class="dot">{history.length}</span>{/if}
       </button>
+      {#if auth.user}
+        <button class="yourow" onclick={signOut}><span>Sign out</span></button>
+      {:else}
+        <button class="yourow" onclick={() => { showYou = false; showSignIn = true; }}>
+          <span>Sign in</span><span class="dot">save & sync</span>
+        </button>
+      {/if}
     </section>
   {/if}
 
@@ -413,6 +445,7 @@
   }
   .youmenu .yourow:last-child { border-bottom: none; }
   .youmenu .dot { background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; }
+  .youmenu .acctline { color: var(--muted); font-size: 0.85rem; padding: 4px 2px 10px; border-bottom: 1px solid var(--line); }
 
   .notice {
     text-align: center; color: var(--accent-deep); background: var(--accent-soft);