feat: ZIP → rep lookup, member page redesign, letter improvements

ZIP lookup (GET /api/members/by-zip/{zip}):
- Two-step geocoding: Nominatim (ZIP → lat/lng) then Census TIGERweb
  Legislative identify (lat/lng → congressional district via GEOID)
- Handles at-large states (AK, DE, MT, ND, SD, VT, WY)
- Added rep_lookup health check to admin External API Health panel

congress_api.py fixes:
- parse_member_from_api: normalize state full name → 2-letter code
  (Congress.gov returns "Florida", DB expects "FL")
- parse_member_from_api: read district from top-level data field,
  not current_term (district is not inside the term object)

Celery beat: schedule sync_members daily at 1 AM UTC so chamber,
district, and contact info stay current without manual triggering

Members page redesign: photo avatars, party/state/chamber chips,
phone + website links, ZIP lookup form to find your reps

Draft letter improvements: pass rep_name from ZIP lookup so letter
opens with "Dear Representative Franklin," instead of generic salutation;
add has_document filter to bills list endpoint

UX additions: HelpTip component, How It Works page, "How it works"
sidebar nav link, collections page description copy

Authored-By: Jack Levy

frontend/components/shared/BillCard.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { TrendingUp, Calendar, User, FileText, FileClock, FileX } from "lucide-react";
+import { TrendingUp, Calendar, User, FileText, FileClock, FileX, Tag } from "lucide-react";
 import { Bill } from "@/lib/types";
 import { billLabel, chamberBadgeColor, cn, formatDate, partyBadgeColor, trendColor } from "@/lib/utils";
 import { FollowButton } from "./FollowButton";
@@ -28,12 +28,15 @@ export function BillCard({ bill, compact = false }: BillCardProps) {
               </span>
             )}
             {tags.map((tag) => (
-              <span
+              <Link
                 key={tag}
-                className="text-xs px-1.5 py-0.5 rounded-full bg-accent text-accent-foreground"
+                href={`/bills?topic=${tag}`}
+                onClick={(e) => e.stopPropagation()}
+                className="inline-flex items-center gap-0.5 text-xs px-1.5 py-0.5 rounded-full bg-accent text-accent-foreground hover:bg-accent/70 transition-colors"
               >
+                <Tag className="w-2.5 h-2.5" />
                 {tag}
-              </span>
+              </Link>
             ))}
           </div>
 

frontend/components/shared/HelpTip.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { HelpCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface HelpTipProps {
+  content: string;
+  className?: string;
+}
+
+export function HelpTip({ content, className }: HelpTipProps) {
+  const [visible, setVisible] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!visible) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [visible]);
+
+  return (
+    <div className={cn("relative inline-flex items-center", className)} ref={ref}>
+      <button
+        type="button"
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        onClick={() => setVisible((v) => !v)}
+        aria-label="Help"
+        className="text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <HelpCircle className="w-3.5 h-3.5" />
+      </button>
+      {visible && (
+        <div className="absolute left-5 top-0 z-50 w-64 bg-popover border border-border rounded-md shadow-lg p-3 text-xs text-muted-foreground leading-relaxed">
+          {content}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/shared/Sidebar.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import {
   Bookmark,
+  HelpCircle,
   LayoutDashboard,
   FileText,
   Users,
@@ -28,6 +29,7 @@ const NAV = [
   { href: "/following", label: "Following", icon: Heart, adminOnly: false, requiresAuth: true },
   { href: "/collections", label: "Collections", icon: Bookmark, adminOnly: false, requiresAuth: true },
   { href: "/notifications", label: "Notifications", icon: Bell, adminOnly: false, requiresAuth: true },
+  { href: "/how-it-works", label: "How it works", icon: HelpCircle, adminOnly: false, requiresAuth: false },
   { href: "/settings", label: "Admin", icon: Settings, adminOnly: true, requiresAuth: false },
 ];