style: adopt CSS cascade layers + reduced-motion guard (Phase 2A)

[keyxmakerx]

Summary

Phase 2A free-wins CSS adoption for the Foundry module side. Adds disciplined cascade ordering and an accessibility floor across all four module CSS files. No behavioral change.

Cites:

• 2026-05-21-core-tenets §T-B2 (plugin isolation at the CSS layer)
• 2026-05-21-core-tenets §T-B3 (production-grade UI / accessibility floor)
• 2026-05-22-ui-modernization-decisions.md Q4 (@layer hybrid), Q6 (reduced-motion total-disable), Q7 (Foundry-module flat layer)
• reports/coordinator/2026-05-22-modern-ui-patterns-discovery.md §3.3, §3.10, §5 Foundry phase
• dispatches/foundry/FM-CSS-FREE-WINS.md
• reports/foundry/2026-05-21-fm-hygiene-audit.md §1 (D1/D6 — this PR is the Phase 2A free-wins precursor to the larger CSS organization decision)

Changes

File	Change
styles/chronicle-sync.css	Added @layer foundry-host, chronicle-sync; master declaration (this file loads first per module.json#/styles). Added global prefers-reduced-motion @media block. Wrapped entire content in @layer chronicle-sync { … }.
styles/import-wizard.css	Wrapped content in @layer chronicle-sync { … }.
styles/map-viewer.css	Wrapped content in @layer chronicle-sync { … }.
styles/sync-calendar-pr3.css	Wrapped content in @layer chronicle-sync { … }.

What this enables

Foundry-host CSS arrives unlayered (effectively in the implicit highest layer). Declaring foundry-host as a named layer forces it below chronicle-sync. Practical effect: any rule inside @layer chronicle-sync { … } wins over Foundry's .window-app cascade, without needing specificity hacks.

Future module CSS no longer needs the .window-app .my-thing .my-other-thing specificity-stacking pattern; rules inside @layer chronicle-sync win over Foundry's host CSS by virtue of layer ordering.

Accessibility

@media (prefers-reduced-motion: reduce) block respects WCAG 2.1 SC 2.3.3 and the OS-level user preference. Total-disable approach per Q6 of the UI modernization decisions: animations + transitions + scroll-behavior + view-transition pseudo-elements all silenced when the user has opted in.

The block lives outside the chronicle-sync layer so it also tames Foundry-host animation, not just module CSS.

Verification

• ✅ node --test tools/test-*.mjs → 250/250 pass (locally, against in-place edits before push)
• ✅ node tools/check-package-descriptor.mjs → OK (0 warnings)
• ✅ All four CSS files brace-balanced ({-count === }-count per file)
• ✅ module.json#/styles declares chronicle-sync.css first → master @layer declaration is the first thing the browser sees
• ⚠️ Operator-side Foundry-world smoke test pending — visual regression for sync dashboard, sync calendar, map viewer, and import wizard remains to be confirmed in a running Foundry instance. (No Foundry runtime available in CI / module-side automated tests.)

Out of scope

• View Transitions API integration on tab containers — future work
• Splitting chronicle-sync.css (2531 lines) into sidecars — that's FM-HYGIENE-AUDIT Chunk 6, separate decision (D1/D6)
• WS-reconnect setTimeout fix at scripts/sync-dashboard.mjs:1158 — Phase 4
• Refactoring existing specificity-stacked selectors to take advantage of the new layer ordering — opportunistic, landed as needed in future work

Note on commit history

This PR has two commits instead of one because the local commit-signing path returned HTTP 400 "missing source" during the session (same infra issue documented in PR #49's status report). Workaround was the GitHub MCP push_files pattern, which serializes large file contents per call. The two commits implement one logical change:

1. 7694775 — wrap the three sidecar CSS files
2. 53ff2f1 — chronicle-sync.css with the master @layer declaration + reduced-motion guard + wrap

Squash-on-merge will collapse cleanly if desired.

Followups

Status report at reports/foundry/2026-05-22-fm-css-free-wins.md (separate commit on claude/setup-working-memory-vROh3) will include:

• Operator-facing smoke-test guidance
• Note on specificity-stacked selectors observed during the audit that could now be simplified opportunistically
• Signing infrastructure followup flag (cross-link to existing PR FM-SCRUB-SCHEMA-URL + FM-CAL-DASHBOARD-LINK: scrub operator hostname; surface Sync Calendar from dashboard + scene controls #49 note)

---

🤖 Cites dispatches/foundry/FM-CSS-FREE-WINS.md. Generated by Claude Code.

---

Generated by Claude Code