fix login confusion and enforce reactive subscription after login

frontend/src/routes/login/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import AuthShell from '$lib/components/AuthShell.svelte';
+	import { readShortcut } from '$lib/shortcut';
 
 	let { form } = $props();
 	let email = $state('');
@@ -9,6 +10,12 @@
 	let forgotLoading = $state(false);
 	let forgotSuccess = $state(false);
 
+	// Child sign-in target: jump straight to the fam join page when we know the
+	// family from a previous session; otherwise fall back to the root /join
+	// picker where the family is entered by name.
+	const shortcut = typeof window !== 'undefined' ? readShortcut() : null;
+	const childJoinHref = shortcut?.famSlug ? `/${shortcut.famSlug}/join` : '/join';
+
 	async function handleForgot() {
 		if (!forgotEmail || forgotLoading) return;
 		forgotLoading = true;
@@ -27,12 +34,17 @@
 	}
 </script>
 
-<AuthShell title="Log in" subtitle="Welcome back to FamDone.">
+<AuthShell
+	title="Log in"
+	subtitle="Welcome back to FamDone."
+	secondary={secondaryChild}
+>
 	{#if showForgot}
 		{#if forgotSuccess}
 			<p class="form-ok">
 				If an account exists for <strong>{forgotEmail}</strong>, a reset link is on its way.
 			</p>
+
 			<button
 				class="row-btn centered"
 				type="button"
@@ -86,10 +98,19 @@
 		<p class="alt">
 			Don't have a family yet? <a href="/signup">Create one</a>
 		</p>
-		<p>Trying to join as a child? Ask your parent to issue your QR code.</p>
 	{/if}
 </AuthShell>
 
+{#snippet secondaryChild()}
+	<div class="child-card">
+		<div>
+			<p class="child-title">Signing in as a child?</p>
+			<p class="child-hint">Join your family with a code from your parent.</p>
+		</div>
+		<a class="child-cta" href={childJoinHref}>Join as a child</a>
+	</div>
+{/snippet}
+
 <style>
 	form {
 		display: grid;
@@ -178,4 +199,36 @@
 		text-decoration: none;
 		font-weight: 500;
 	}
+	.child-card {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+	.child-title {
+		margin: 0;
+		font-size: 0.95rem;
+		font-weight: 700;
+		color: #374151;
+	}
+	.child-hint {
+		margin: 0.2rem 0 0;
+		font-size: 0.82rem;
+		color: #6b7280;
+	}
+	.child-cta {
+		display: inline-block;
+		white-space: nowrap;
+		background: #f5f3ff;
+		color: #4338ca;
+		font-size: 0.85rem;
+		font-weight: 600;
+		text-decoration: none;
+		padding: 0.55rem 0.9rem;
+		border-radius: 8px;
+		border: 1px solid #ddd6fe;
+	}
+	.child-cta:hover {
+		background: #ede9fe;
+	}
 </style>