Design QA: dark mode on all routes, header overlap fixes, token migration

[BigSimmo]

Summary

• Apply the resolved theme before first paint via an inline script in the root layout. Standalone routes (/applications, /medications/*, and now /services, /forms) never mounted useTheme, so they always rendered light for dark-theme users, and the dashboard flashed light before hydration.
• Fix the composer clear (✕) button overlapping typed text: the unlayered .answer-footer-search-input padding beats the conditional pr-11 utility, so the button is now a flex sibling with a reserved 44px slot (re-applied to the merged renderSearchComposer).
• Fix the standalone-home header status chips (Local only / Saved / avatar) sliding under the centered mode pill at lg–xl widths; they now reveal at min-[1400px] where the grid column fits them.
• Replace text-white on the clinical accent (bright light teal in dark theme, ~1.6:1 contrast) with the --clinical-accent-contrast token across Launch buttons, mode icons, and the scope badge.
• Migrate raw red-*/blue-*/amber-*/emerald-* palette classes in live surfaces (medication workspace, answer safety notice, settings mockup) to the semantic --danger/--info/--warning/--success token triads, so dark theme and forced-colors mode resolve correctly.
• Remove the now-dead .universal-header-ledger*/-avatar/-status-dot CSS orphaned by the header redesign on main; keep dose-ceiling values on one line with tabular figures.

Merged origin/main (PRs #118/#120) into the branch and resolved master-search-header.tsx in favor of main's restructured header, then re-applied the composer fix on top.

Verification

• npm run verify:cheap — lint, typecheck, 772 Vitest tests passed
• npm run verify:ui — 54 Chromium Playwright tests passed
• npm run verify:release — not run (no release claim)
• npm run format:check — fails on files untouched by this branch (CLAUDE.md, docs/rag-*, src/lib/rag*.ts, new rag tests); that drift pre-exists on main. All files touched here are prettier-clean.
• npm run check:production-readiness — not run (styling/theme only; no clinical workflow, privacy, env, Supabase, or governance behavior changed)
• npm run check:deployment-readiness — not run (no deployment behavior changed)

Additional browser QA: scripted element-overlap measurement across 640–1536px widths (zero overlapping header controls), theme-precedence checks (stored theme beats OS preference on all standalone routes), and composer geometry check (0px input/clear overlap).

Clinical Governance Preflight

Presentation-only change: colors, layout, and theme application. No ingestion, answer generation, search/ranking, document access, privacy, or env behavior touched.

• Source-backed claims still require linked source verification before clinical use
• No patient-identifiable document workflow was introduced or expanded without explicit governance approval
• Supabase target remains Clinical KB Database (sjrfecxgysukkwxsowpy)
• Service-role keys and private document access remain server-only
• Demo/synthetic content remains clearly separated from real clinical sources (demo notice restyled to the warning token, wording unchanged)
• Source metadata, review status, and outdated/unknown-source behavior remain conservative
• Deployment classification/TGA SaMD impact was checked when clinical decision-support behavior changed — N/A, no decision-support behavior changed

Notes

• Known non-blocking observation: the composer mic buttons remain non-functional placeholders (pre-existing; flagged for a wire-or-hide decision).

🤖 Generated with Claude Code

[Copilot]

Pull request overview

This PR improves theme correctness and UI layout consistency across routes, focusing on eliminating dark-mode flashes on standalone pages, fixing header/composer overlaps, and migrating hardcoded palette colors to semantic theme tokens (including forced-colors compatibility).

Changes:

• Apply resolved theme (stored preference > OS preference) before first paint via an inline script in the root layout.
• Fix header/composer layout issues (clear button text overlap; standalone header status chips overlapping the centered mode pill).
• Migrate multiple UI surfaces from raw Tailwind palette colors (red-*, blue-*, amber-*, emerald-*, text-white) to semantic CSS tokens (danger/info/warning/success + accent contrast).

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/app/layout.tsx	Adds an inline pre-paint theme resolver to set the dark class consistently on all routes.
src/components/clinical-dashboard/master-search-header.tsx	Adjusts composer clear-button layout and standalone header chip visibility breakpoint.
src/app/globals.css	Removes orphaned universal-header CSS and updates radius usage doc comment.
src/components/applications-launcher-page.tsx	Replaces text-white with --clinical-accent-contrast for better dark-theme contrast on accent surfaces.
src/components/ClinicalDashboard.tsx	Migrates demo notice color to --warning token and minor text wrapping adjustment.
src/components/clinical-dashboard/medication-prescribing-workspace.tsx	Migrates info/danger styling from raw palette classes to semantic token triads; keeps dose ceiling values on one line with tabular figures.
src/components/settings-search-mockups/settings-search-mockup-page.tsx	Migrates success status dot from bg-emerald-600 to semantic --success token.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.