[mobile][W3] Tool touch-ups: /me example chips + /shindan compressed head

[jasonhnd]

Context (read this first)

• Repo: jasonhnd/jobs → mirai-shigoto.com. /me is the best-performing interactive surface (54s engagement); /shindan is the locked no-occupation 9-question entry. Both have small mobile presentation defects. Flows, questions, scoring, routing locks: all unchanged (docs/ME_CONSOLIDATION.md §5 — do not touch redirects).
• 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.5 (this issue).
• Visual reference: mockups/shots/pair-6.png, pair-7.png. Written spec wins over mockup pixels. Known mockup extras you must NOT copy: the orange 調べる button on the /me form (Appendix A scopes 調べる to the home #mhSearchBtn only), the kicker text additions on /shindan, and the shortened /shindan lead line.

Scope

• src/pages/me.astro + src/pages/_me-inline.js (chip wiring)
• src/pages/shindan.astro, src/pages/_shindan-css.ts (+ _shindan.js only for the optional one-char progress-label change)

Spec — /me (presentation only)

1. Placeholder must not truncate at 390px: 気になる職業を入力（例：看護師、営業） — note the FULL-WIDTH parentheses/colon (current markup uses half-width; both the text and the punctuation change).
2. Replace the empty dashed #meEmpty content with:
   • Five example chips whose labels are exact title_ja values from public/data.search.json so rankMatches(label)[0] resolves deterministically: 一般事務 経理事務 データ入力 看護師 保育士. (Verified: the previous candidate 事務職 has ZERO matches in the corpus; 経理/営業 are ambiguous — do not use fuzzy labels.)
   • Chip tap runs the same path as typing+selecting: loadSearchIndex()+loadPositions() → rankMatches(label) → selectJob(matches[0].id) (add wireChips() alongside wireQuiz()/wireShare() in _me-inline.js). Fallback rule: if a query somehow yields no match, fill the input with the text and focus it — never render a dead end.
   • Hint タップですぐ表示されます (≥12px) + preview card: 職業を選ぶと、ここに出ます：① AI影響度と556職中の位置 ② 全39ランキングでの順位 ③ 似た5職業.
3. Do not add new element ids (anchorIds are tracked in tests/baseline/internal-links.jsonl; /me already registers 40 — new ids force a baseline regen). Chips use classes + data-*. Keep #meEmpty itself.
4. Keep: #meInput combobox behavior, no-occupation link, all result sections, quiz, gap, share, ?id= URL handling, all GA4 events. (Verified: no unit test asserts the placeholder/empty-box strings — no test edits expected.)

Spec — /shindan (presentation only)

1. Compress the head so Q1 with both choice buttons is fully visible within the first 844px (incl. 48px top bar), measured in a consent-decided state (banner dismissed, or [mobile][W0] Compact one-line cookie consent bar (site-wide) #320's compact bar — wave order guarantees [mobile][W0] Compact one-line cookie consent bar (site-wide) #320 precedes this issue). Authorized levers: move the 9問/3軸/556 stats card (aside.shindan-proof) below the questions (or into a <details>), compress head paddings/margins/hero grid, remove reserved empty space (.shindan-status min-height). Copy strings unchanged (H1, kicker, lead, questions from worktype-copy.ts). If Q1 still exceeds 844px after spacing-only compression, stop and report measurements in the PR — the owner decides the next lever.
2. The progress indicator already exists (.shindan-progress / #shindanProgressFill / #shindanProgressText, updated by updateProgress() in _shindan.js) — do NOT rebuild it. Optional one-char polish: append 問 to the label (n / 9 → n / 9問) — that edit touches the hashed _shindan.js, so recompute via bun run check:csp-hashes.
3. Do NOT touch: one-page nine-question structure, result rendering, share, ?self= handling, funnel events (shindan_start/shindan_step fire exactly as today).

Acceptance

• PR screenshots 390×844 before/after: /me (empty state with chips) and /shindan (Q1 + both buttons fully visible, consent-decided state).
• Tapping each of the five chips renders the same result as typing that exact title and selecting it (spot-check 一般事務 and 看護師; note occupation ids in the PR).
• bun run typecheck && bun run test && bun run verify:gates && bun run test:e2e green; capture:seo-baseline diff clean (no new ids); check:csp-hashes unchanged unless _shindan.js was edited (then recomputed).