feat(engagement): localize limits and streaks

Use reported user timezones for daily response limits, expose couple streak state and reminders, and improve swipe and live-drawing synchronization with focused tests and documentation.

apps/mobile/app/(app)/index.tsx

@@ -4,10 +4,11 @@ import { useFocusEffect } from 'expo-router';
 import Animated, { FadeInDown } from 'react-native-reanimated';
 import { Ionicons } from '@expo/vector-icons';
 import { BlurView } from 'expo-blur';
-import { useAuthStore, usePacksStore, useSubscriptionStore } from '../../src/store';
+import { useAuthStore, usePacksStore, useStreakStore, useSubscriptionStore } from '../../src/store';
 import { GradientBackground } from '../../src/components/ui';
 import { Paywall } from '../../src/components/paywall';
 import { CompactHeader, ContentRow, LiveDrawTile } from '../../src/components/discovery';
+import { StreakDisplay } from '../../src/components/StreakDisplay';
 import { colors, spacing, typography, radius } from '../../src/theme';
 import type { QuestionPack, Category } from '../../src/types';
 
@@ -68,6 +69,7 @@ function groupPacksByCategory(
 export default function DiscoveryScreen() {
   const { user, partner, couple } = useAuthStore();
   const { packs, categories, fetchPacks, getPackProgress } = usePacksStore();
+  const { fetchStreak } = useStreakStore();
   const { subscription } = useSubscriptionStore();
   const { width } = useWindowDimensions();
   const [showPaywall, setShowPaywall] = useState(false);
@@ -81,7 +83,8 @@ export default function DiscoveryScreen() {
   useFocusEffect(
     useCallback(() => {
       fetchPacks();
-    }, [])
+      fetchStreak();
+    }, [fetchStreak])
   );
 
   // Group packs by category
@@ -114,6 +117,11 @@ export default function DiscoveryScreen() {
         showsVerticalScrollIndicator={false}
       >
         <View style={[styles.innerContainer, isWideScreen && styles.innerContainerWide]}>
+          {/* Shared streak - hidden entirely for couples with nothing running */}
+          <View style={styles.streakSlot}>
+            <StreakDisplay delay={50} />
+          </View>
+
           {/* Live Draw Activity Tile */}
           <LiveDrawTile delay={100} />
 
@@ -209,6 +217,9 @@ const styles = StyleSheet.create({
     color: colors.textSecondary,
     textAlign: 'center',
   },
+  streakSlot: {
+    paddingHorizontal: spacing.lg,
+  },
   bottomSpacer: {
     height: spacing.lg,
   },