Topic page UI/UX overhaul — visual hierarchy, affordances, intuitiveness

[AndreRobitaille]

Problem

The topic show page is the primary landing page for residents arriving from the homepage. Homepage redesign (shipped Apr 10, 2026) links top story and wire cards to meeting pages, but we need to switch these to topic pages once the topic page is good enough to be the destination. Currently it isn't.

Real-user testing and editorial review confirm:

Content quality issues

• Key Decisions is empty for most topics — even topics with documented votes/contracts show "No votes or motions recorded" because Motion.agenda_item_id is nil (see Link motions to agenda items in ExtractVotesJob #76). This is the biggest credibility gap.
• Record entries are low-information — 8 of 10 entries for a topic like "lead service lines" just say "appeared on the agenda." These should summarize what happened, not just note presence.
• Record entries don't link to meeting pages — the committee name and date are plain text, not links. Dead ends for someone who wants to dig deeper.
• Coming Up is empty most of the time — agendas aren't published far in advance. No guidance on when the topic will come back (e.g., "typically discussed at Public Utilities Committee").

Visual/UX issues

• Links look like plain text — no underline, no button treatment, no hover cue
• Cards don't signal interactivity — no cursor change, no hover state
• Sections blend together — no visual distinction between zones
• No visual hierarchy within sections — everything same weight
• Empty sections actively harm credibility — showing "no votes" when votes clearly happened (per the Record section) makes the site look broken

Goal

Make the topic page good enough to be the primary destination from the homepage. A resident should:

1. Understand what this topic is about (header + description) ✓ already works
2. Know what to watch for (What to Watch callout) ✓ already works
3. See the narrative arc (The Story) ✓ already works
4. See concrete decisions and votes (Key Decisions) ✗ broken — needs Link motions to agenda items in ExtractVotesJob #76
5. Browse the history with links to source meetings (Record) ✗ needs enrichment
6. Know when it's coming back (Coming Up or "typically discussed at...") ✗ needs fallback

Dependencies

• Link motions to agenda items in ExtractVotesJob #76 (motion-to-agenda-item linking) — required to populate Key Decisions
• Homepage redesign concept doc at docs/superpowers/specs/2026-04-10-homepage-redesign-design.md
• Audience doc at docs/AUDIENCE.md

Design Principles (from homepage redesign session)

• Primary audience: casually interested residents, 35+, many 60+, arriving from Facebook
• They are scanners, not studiers — mobile-heavy, need the gist fast
• Explicit click affordances required — older residents don't know to click unless it looks like a button/link
• Topic names are government jargon — always pair with plain-language description
• Link to meetings from Record entries so residents can dig deeper
• Hide empty sections rather than showing "no data" messages that erode trust

Scope

• View layer changes (show.html.erb, CSS, helpers)
• Record entry enrichment (may need TopicBriefing generation changes to produce richer factual_record entries)
• Key Decisions population depends on Link motions to agenda items in ExtractVotesJob #76
• No new models or schema changes expected