[www] Redesign and verify the Pagefind search experience

Goal

Turn the existing Pagefind integration into a coherent, bilingual search experience with clear hierarchy and verified interaction states across desktop, mobile, light theme, and dark theme.

Current state

Search is functional; this is not an implementation-from-zero task.

• The current production build indexes 150 pages in Chinese and English.
• Chinese and English queries return results.
• apps/www/src/styles/search-trigger.css already styles the trigger, input, result list, and related Pagefind elements.
• Full results are production-only: Astro dev mode does not provide a real Pagefind index, so validation requires a build and preview.

The remaining problem is that the current CSS is a thin, global skin over Pagefind/Starlight DOM rather than a deliberately verified search design. Page results, nested section results, excerpts, and match highlights become visually dense. Loading, empty, populated, keyboard-active, and load-more states have not been treated as one documented system.

The mobile header entry point is also affected by the broader responsive-shell problem. Coordinate with the mobile-shell issue rather than duplicating unrelated header work here.

Relevant starting points:

• apps/www/src/styles/search-trigger.css
• apps/www/src/components/override/Header.astro
• apps/www/astro.config.mjs

Suggested workflow

1. Build and preview the site so Pagefind serves real results.
2. Audit Chinese and English queries with long titles, nested headings, excerpts, and highlighted matches.
3. Establish clear visual hierarchy for the trigger, dialog, search field, page results, nested section results, and result metadata.
4. Cover loading, empty, populated, load-more, and failure states.
5. Preserve Starlight/Pagefind semantics, focus management, and keyboard behavior.
6. Verify narrow and desktop layouts in both themes.

AI-assisted DOM analysis and CSS exploration are welcome. Final visual judgment, keyboard testing, touch scrolling, and result readability must be checked manually.

Acceptance criteria

• Chinese and English search return results for their respective locale.
• Page results and nested section results are visually and semantically distinguishable.
• Loading, empty, populated, and load-more states have clear presentation.
• Search can be opened and operated by keyboard and dismissed with Escape.
• Focus returns to the search trigger after dismissal.
• Long titles, excerpts, and highlighted matches remain readable.
• The dialog works at a 390px viewport and on desktop without document-wide overflow.
• Light and dark themes are both manually verified.
• The PR includes at least one mobile and one desktop screenshot.
• corepack pnpm@10.32.1 --filter apps-www build passes, followed by manual production-preview testing.

Out of scope

• Replacing Pagefind.
• Changing search ranking or indexing semantics.
• Rewriting documentation to manipulate search results.
• Refactoring the entire header as part of this issue.