[mobile][W1] Compare template: pinned two-name bar + metric rows (20 pages)

[jasonhnd]

Context (read this first)

• Repo: jasonhnd/jobs → mirai-shigoto.com. JA-only static Astro site. /compare/* receives 34.4% of entering sessions at ~7s engagement; below 600px the two jobs stack vertically so the page's core promise (side-by-side) disappears.
• 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 [mobile][W0] Compact one-line cookie consent bar (site-wide) #320 is merged into preview.
• Referee spec: docs/MOBILE_SHAPES.md — read §0, §3, §4.4 (this issue).
• Visual reference: mockups/shots/pair-4.png, frame-05.png. Written spec wins over mockup pixels. Known mockup deviations you must NOT copy: 就業者数 win-coloring (stays neutral), skills TOP5 folded (stays visible), related pairs folded (stays as today).

Problem

Current first screen at 390px (mockups/shots/live-compare.png): H1 → sub (contains leftover English "side-by-side") → long intro → .ai-fact start. Zero comparison data visible; .versus-hero collapses to one column <600px.

Scope — one template, 20 pages

• src/pages/compare/[pair].astro (order, pinned bar, metric rows, folded block, CSS)
• src/pages/compare/_compare-bindings.ts (metric-row bindings incl. displacement lookup)

Spec

1. Compact <h1> (text unchanged; CSS-only compaction on mobile).
2. Pinned duel bar directly under the header, mobile only: grid 1fr 34px 1fr; each side is one whole-side <a> (≥44px hit area, §3.2) to that occupation's page, containing the job name (serif) + pill AI {score}/10 (existing .risk-pill low/mid/high classes — note: the live pill system is .risk-pill + --risk-pill-* vars in src/lib/canonical-css.ts; the .m-risk-* classes in styles/mobile-tokens.css are NOT in the live render path). Center vs.
   Breakpoint fact: the mobile top bar renders only at ≤768px (canonical-css.ts), so pin with position:sticky; top:48px inside @media (max-width:768px) — do not use the 900px figure for this. At ≥769px keep the existing .versus-hero untouched (desktop non-regression); hide the duel bar there.
3. Metric rows after the bar, all viewports, order: 年収 (平均) / 仕事が減るリスク / 就業者数 / 月間労働時間 / 関連資格 / 求人倍率 — row labels reuse the existing compare-hub label strings verbatim (compare-hub.ts; e.g. it says 関連資格, not 必要資格, and 年収 (平均), not 中央値). Skip a row when either side lacks the value.
   Data note (authorized): 仕事が減るリスク (AIOIS displacement) does NOT exist in the current compare bindings — read it in _compare-bindings.ts via the graph parameter already passed in (graph.occupations.get(...)?.aiRisk?.aiois?.displacement ?? null); skip the row when null. Do not restructure compare-hub.ts.
   Win-highlight rule: accent the better side ONLY for 年収 (higher), 月間労働時間 (shorter), 求人倍率 (higher). AI scores, 就業者数, 資格 stay neutral.
4. Folded block <details class="chap"><summary>この比較の読み方・出典</summary> placed after the metric rows and before MeEntry (MeEntry keeps its adjacency to the skills section). Contents in order, byte-identical inner content: the former .sub line (with the copy fix below), the .intro paragraph (keep class="intro" — JSON-LD speakable references it), the 比較すべき主要観点/選び方の判断ヒント grid, the full existing 項目別比較表 table (§3.5 no deletion — headline rows AND full table both stay), the .ai-fact block.
5. Reuse the .chap CSS + desktop-open helper introduced by [mobile][W1] Rankings template: list-first first screen, fold intro/ai-fact/stats (39 pages) #321 (same wave — coordinate so there is ONE shared implementation; if [mobile][W1] Rankings template: list-first first screen, fold intro/ai-fact/stats (39 pages) #321 has not merged yet when you start, include the identical shared snippet and reconcile at merge).
6. Copy fix (approved): in the sub line replace side-by-side with 並べて.
7. Unchanged: #wrapper data-attrs + the recent-compare localStorage script (CSP-hashed — byte-identical), skills TOP5 section (visible), FAQ, cross-hub, related pairs, escape-routes.

Invariants

§3.5 (title/meta/JSON-LD/H1 unchanged; sub-line fix is body copy). §3.1 floors; §3.2 tap areas. No new element ids (internal-links baseline); classes only.

Acceptance

• PR screenshots: 390×844 before/after of /compare/kango-vs-helper at top AND mid-scroll (bar pinned); desktop ≥1280 after-shot showing .versus-hero unchanged.
• No English remains in the sub line.
• 仕事が減るリスク row renders real displacement values for both sides on /compare/kango-vs-helper (0.6 / 0.5 with current data).
• bun run typecheck && bun run test && bun run verify:gates && bun run test:e2e green; add a unit test for the new metric-row binding logic (none exists for _compare-bindings.ts today).
• bun run capture:seo-baseline diff clean for title/meta/JSON-LD.
• bun run check:csp-hashes: recent-compare script hash unchanged; a new/updated hash only if the shared desktop-open snippet lands here.