Motion, states, typography and accessibility polish (Phase 11)

[Phantom-VK]

Summary

Polish pass across all six views. No new features, no new bridge methods.

A code review caught that the first version of the dialog-backdrop fix looked right in isolation but didn't actually work under Radix Presence -- see "Motion" below for what was actually wrong and how it's fixed now, verified by frame-sampling opacity through real open/close cycles rather than just checking computed styles at rest.

Not included: a full usability pass with a genuine next-day re-review (structurally can't happen in one sitting), and live screen reader verification under Orca/NVDA/VoiceOver (not available in this environment) -- both still outstanding before this ships.

Motion

Surface	Finding	Fix
Dialog backdrop	Referenced tailwindcss-animate classes that aren't installed -- dead, so it snapped in/out instantly	First attempt used a CSS transition, which reports animationName: "none" to Radix Presence (Presence only waits for animationend) -- still snapped both ways, confirmed by frame-sampling. Root-caused that DialogOverlay wraps its node in react-remove-scroll, which makes Presence's exit-detection unreliable for that element specifically (traced through Radix's actual source, not guessed). Fixed with forceMount (at both the DialogPortal and DialogOverlay layers) plus a delayed-visibility CSS transition that doesn't depend on Presence's animation detection at all. Verified both directions now animate correctly.
Dialog panel / Select popover	Same dead-transition issue	Real @keyframes + animation (what Presence needs), verified via the same frame sampling
Tooltip	Same dead tailwindcss-animate classes as the dialog (not wired into any view yet, but fixed for the next consumer)	Same @keyframes pattern
ContextBar	Animated width (layout-triggering)	transform: scaleX() + left origin
ContextBar / AnalysisProgress / Resources download bar	The determinate fill kept rounded-full while being scaled, so the corner radius scaled with it and flattened into a visible ellipse at low percentages	Removed rounded-full from the determinate fill (kept it on the indeterminate sliding pill, whose scale is fixed, not data-driven, so it doesn't squish)
Button / Switch / base Progress	transition-all	Narrowed to the actual properties that change
Notice banner	No entrance transition at all	@starting-style fade

Loading / empty / error states

Surface	Loading	Empty	Error
Registry grid	N/A (models preloaded before app renders)	Fixed -- had no empty state at all; silently blank grid	N/A
Parser results / logs	Determinate/indeterminate progress + dialog	Already named the next action	Surfaces via job.error
Compare results / projection	Job progress	Already named the next action (two distinct empty states)	Surfaces via job.error
Fit Check estimate	Already correct -- no bare spinner where progress is knowable	N/A	Already correct (verdict + reason)
Resources scan	Fixed -- spinner showed immediately even for a load resolving in <300ms	N/A	Fixed -- was a dead end with no retry
Resources download	Already correct (determinate/indeterminate, per-row)	N/A	Already correct, distinct from static notes
App boot (bridge)	Already correct	N/A	Fixed -- was a dead end with no retry

Added a small useDelayedFlag hook (200ms) so Resources' and Fit Check's initial-load spinners don't flash for fast loads.

Accessibility

• Keyboard: every interactive element is a real <button>/<a> (no raw div/span onClick), so reachability and Enter/Space activation already worked. Found and fixed 8 hand-rolled controls with no focus-visible styling.
• A follow-up review caught that adding outline-none to those 8 controls, paired with a box-shadow-based ring, strips the only focus indicator that survives forced-colors mode (Windows High Contrast) -- and that this wasn't unique to the 8 new controls: every focus-visible:ring-* control in the app already had this gap, including Button.tsx itself. Fixed with one global forced-colors: active rule restoring a real outline for :focus-visible everywhere, rather than patching 8 files and leaving the rest broken.
• Screen reader: every icon-only control already has a distinct accessible name. Live verification under a real screen reader not performed -- flagging as outstanding.
• Colour/contrast: contrast suite still green; confirmed prefers-contrast: more actually strengthens --border alpha (not a no-op).
• Preferences: prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast all already implemented from earlier work; spot-verified each does something real.

Typography and density

• grep -rn "text-\[\|font-size:" src/ | grep -v styles/ -- clean, no hardcoded sizes outside the type scale.
• Verified all six views at 1024x640 and 2560x1440 live in the built app: zero horizontal overflow anywhere.
• Found and fixed one real density defect: Resources had no max-w-* cap, so its rows stretched to ~2282px at 2560px wide (content stranded with huge dead whitespace). Capped to max-w-5xl, matching the convention used elsewhere.

Test plan

• npx tsc --noEmit clean
• npx vitest run -- 97 passing
• npm run build clean
• pytest -- 325 passing, src/norefund/gui/ untouched
• Verified live in the built app under Xvfb at each step, including frame-by-frame sampling of the dialog open/close cycle to confirm the animation fixes actually take effect (not just that the CSS parses)