[mobile][W3] Home mobile first screen: 調べる button, monthly movers, door cards

[jasonhnd]

Context (read this first)

• Repo: jasonhnd/jobs → mirai-shigoto.com. JA-only static Astro site. Home is ~3% of entering sessions but carries brand + returning visitors. Current mobile first screen: hero + search whose submit button is mislabeled 診断, followed by a half-screen quiz promo band (see mockups/shots/live-home.png).
• Base branch is preview. Your PR targets preview. NEVER push, merge, or open a PR to main. Never trigger a production deploy. The owner reviews everything on preview and personally decides promotion.
• Wave gate: start only after wave 1 ([mobile][W1] Rankings template: list-first first screen, fold intro/ai-fact/stats (39 pages) #321, [mobile][W1] Compare template: pinned two-name bar + metric rows (20 pages) #322) is merged into preview.
• Referee spec: docs/MOBILE_SHAPES.md — §0, §3, §4.7 (this issue).
• Visual reference: mockups/shots/pair-5.png, frame-01.png. Written spec wins over mockup pixels. Do NOT copy the mockup's English door-card captions (39 LISTS → / 20 PAIRS → etc.) — JA-only site; use the JA strings below.

Scope — mobile (<768px) presentation only; desktop hero/treemap untouched

• src/index-source.html (button label, new modules, CSS order re-ranking)
• src/pages/_index-bindings.ts (__HOME_MOVERS__ placeholder substitution)
• src/pages/_index.css + src/pages/_index-css.ts (styles AND the critical-CSS range update — see point 6)
• src/pages/_index-inline.js (TOP10 pill restyle)
• src/templates/Ranking.ts (compact movers renderer — template layer per check:architecture conventions)
• analytics/spec.yaml (description-text touch-up only, see point 4)

Spec

Mobile order after the top bar (use the existing CSS order mechanism in the @media (max-width:768px) block — DOM stays, visual order changes, matching how .mobile-hero/.m-top10 are ordered today):

1. Hero: existing kicker/H1 area + the mobile search form. Change #mhSearchBtn label 診断 → 調べる (verified safe: wireSearchSubmit binds by form/input id, not button text). H1: the string あなたの仕事は、AIでどう変わる？ is now registered in spec Appendix A as owner-approved working copy — apply it to the mobile hero H1; the owner signs final copy at PR review (if rejected there, revert to the current H1 — one-line change). Keep the existing example chips (adding 保育士 optional; note your choice in the PR). Check the input's padding-right (currently sized for a 2-char button) still fits the 3-char button at 390px and 320px.
2. TOP10 horizontal swipe (#mTop10): restyle cards to carry a §3.3 risk pill. Fact: _index-inline.js is a classic script (no imports) — inline the pill thresholds score<4.0→low, <7.0→mid, else→high (the site-wide pill-UI cutoffs from src/lib/risk.ts; do NOT use the entry-page riskTierJs cutoffs here). _index.css lacks a mid/amber pill token — add one aligned with the site palette (#8B6B2A on rgba(212,167,73,.16)).
3. NEW 今月の変動 module: two columns ↑上がった / ↓下がった, 2–3 rows each (名前 + ±Δ), rows link to /{id}; module header links to plain /rankings (no #movers anchor — it does not exist on that page). Data: loadRankingMovers(graph) (as used by src/pages/rankings/index.astro); render via a NEW compact template function in src/templates/Ranking.ts (reuse its private helpers); inject via a NEW __HOME_MOVERS__ placeholder in _index-bindings.ts. Note: bindHomeFacts only validates __ACTIVE_BATCH_*__ placeholders — add your own assertion that __HOME_MOVERS__ was substituted, or a typo will silently ship.
4. NEW four door cards (2×2), JA captions: ランキング（AI・年収・需要で並べる / 39 のランキング）→ /rankings; 比較する（2つの仕事を並べて見る / 20 ペア）→ /compare; 職業マップ（static mini-heatmap — copy/adapt the existing hardcoded .m-map-preview-svg markup; there is no build-time injection pipeline despite an old comment claiming one）→ /map; 自分の現在地（reuse the existing nav copy 職業を入力 → 全 39 ランキングでの位置）→ /me with the existing tracking attrs + data-entry-source="home_door" (the delegated listener forwards it as-is; also append home_door to the source value list in me_entry_click's description text in analytics/spec.yaml — description only, no schema change).
5. The shipped 診断 entry band (.home-entry-band) is visually re-ordered below the door cards via CSS order — DOM untouched, band kept.
6. Critical CSS: src/pages/_index-css.ts slices _index.css into above-the-fold ranges — new modules MUST be covered (add a range or place the new CSS inside an existing range's boundaries), otherwise the movers/doors flash unstyled and tests/e2e/home-css-loading.spec.ts (CLS < 0.1) may fail.
7. Everything below (KPI band, treemap section, hub sections, footer) unchanged in content and DOM order.

Invariants

§3.5 (JSON-LD _index-json-ld.json, title/meta unchanged; the H1 + button label are the only copy changes, both Appendix-A registered). §3.1 floors (input ≥16px — verify). §3.6: _index-inline.js is a hashed asset — recompute hashes. No new element ids beyond what the movers/doors strictly need (prefer classes; new /{id} hrefs from movers rows WILL appear in the internal-links baseline — regen per documented procedure and commit).

Acceptance

• PR screenshots: 390×844 before/after of / (first screen + one scroll), 320px width sanity shot of the search bar, desktop ≥1280 after-shot proving hero/treemap unchanged.
• Button reads 調べる; search navigates identically.
• Movers module renders real build-time data; rows link to occupation pages; header links to /rankings.
• TOP10 cards show risk pills with correct band colors (spot-check a low/mid/high trio).
• bun run typecheck && bun run test && bun run verify:gates && bun run test:e2e green — home-css-loading.spec.ts especially; baselines regenerated only for intended diffs (movers hrefs) and listed in the PR; capture:seo-baseline title/meta/JSON-LD rows zero-diff; check:csp-hashes recomputed for _index-inline.js.