Admin stylesheet cleanup, no visual change

[theobong]

What changed

Stylesheet cleanup for the operator dashboard with no visible change:

• 246 CSS classes that nothing renders are deleted (about 1,600 lines), along with empty media blocks and unused animations.
• Duplicate selectors and identical rules are merged.
• Raw hex colors that equal an existing color variable now use that variable.
• 48 unreferenced CSS variables are removed.
• Four class names with no CSS rule are dropped from the markup.
• CSS comments keep only the why.

The built CSS shrinks from about 160 KB to 117 KB.

Visible in: admin (nothing should look different).

Before you start

• Where: staging admin.civfix.dev, once Admin test harness and characterization safety net #38 to Admin comment and em dash sweep #41 and this PR have merged to main. Compare side by side with production admin.civfix.org, which still has the old CSS.
• Sign in as: operator.
• Stacked on: Admin comment and em dash sweep #41. Review only this PR's own commits; test with Admin comment and em dash sweep #41 merged.
• Size: 2386 counted lines, most of them deleted dead CSS. This is a campaign PR; the author approved PRs over the 400-line cap for this cleanup.

Verify

[Admin]

1. Open the "Dashboard" on staging and on production side by side, at the same window width. Expect: identical tiles, typography, spacing and colors, including the live map pins and their legend.
2. Open "Reports" and select a report with photos. Expect: the list rows, the selected-row accent bar, the detail header pin and the photo thumbnails look the same as production.
3. Open "Users", pick an account and switch its "Activity" tabs. Expect: the tabs and their counts look the same, including the active tab.
4. Open "Mail" and switch between the "Outreach" and "Inbox" folders. Expect: the folder switch and mail rows look the same.
5. Open "Events", select a cleanup, and click "Link reports". Expect: the linked-report cards and the picker look the same.
6. Open "Signup pages", select a page, and look at the preview. Expect: the blocks and the search-preview lines look the same.
7. Open "Analytics". Expect: the category breakdown rows and the empty sparkline text ("No data yet") look the same.
8. Narrow the window below 640 px wide on "Reports". Expect: the same responsive layout as production.

Regression

Every section: [Admin]

1. Visit every section from the Dashboard tiles and the "Host platform" card. Hover buttons and rows, and open a confirm dialog and the photo viewer. Expect: no visual difference from production.
2. Turn on "reduce motion" in the OS. Expect: animations stay suppressed, as before.

Not covered

• A pixel diff was not run (there is no browser in CI). Neutrality was proven on the built CSS instead (see Verification).

Findings addressed

• ADM-CSS-001: 246 dead classes are deleted: 380 whole rules, 8 selector lists trimmed, 17 empty media blocks, 4 unused keyframes (pulseSoft, draftPing, panelFadeIn, sheetRise). Kept, with reasons:
  • leaflet-*, because Leaflet applies them;
  • kind-* and hue-*, because the code builds them dynamically;
  • the divIcon HTML classes;
  • .body, which collides with .qrow .body.
• ADM-CSS-002: 18 duplicate selectors in the same media context are merged, and 14 same-family identical rule bodies are consolidated. Coincidental matches are left alone.
• ADM-CSS-003: 52 hex literals now use variables: #fff becomes var(--card) for surfaces or var(--fg-on-color) for text on color, plus --ink-3 and --sun-600. Leaflet pin fills that equal a token use style="fill:var(--x)". No color value changed.
• ADM-CSS-005: compose-modal, hub-spark-empty, res-row and the pg-seo wrapper class had no CSS rule, and are removed from the markup.
• 48 custom properties nothing references are deleted, including --sidebar-w and unused palette steps, spacing, radius and duration tokens. --cat-* stays: it is built dynamically and mirrors the contract.
• CSS comments: banners, labels that restated the selector, and references to "PinIt", "prototype" and campaign notes are gone. Stale "no hex here" and "utility class" claims are gone. The why comments remain.

Decisions for the reviewer

• Unused tokens: the unused palette and scale tokens are deleted rather than kept for later. If the team wants the full ported token scale available, revert the "delete custom properties" commit on its own.
• Tailwind stays, supplying only its base reset. Removing it would mean vendoring the MIT-licensed reset plus two raw hex colors.
• Colors not aligned: the admin color variables still differ from the @civfix/shared tokens (for example --bloom #FF7A6B against the token #F0685C). Aligning them would visibly recolor production, so it is left as an open design decision.

Verification

• Node v22.23.2. pnpm lint, pnpm typecheck, pnpm build and pnpm test pass: 98 files, 1,056 tests.
• A throwaway script parsed the built CSS before and after each step and compared every selector's merged declarations per media context, resolving var() from :root:
  • Dead CSS step: 399 selectors removed, each containing a dead class; 0 changed declarations; 0 cascade-order changes.
  • Merge, token and comment steps: 0 selectors added or removed; 0 changed winning declarations. The 2,882 cascade-order flips all involve rules that can never apply to the same element; the script classified each one.
• An independent adversarial review rebuilt its own cascade model across 17 viewport widths, with reduced-motion and hover states. It found no difference in the winning value for about 9,900 class combinations taken from the markup, and confirmed every deleted class and variable is unreferenced.

🤖 Generated with Claude Code