Fit the planner and comparison on a phone

[greenido]

Why

At 375px wide:

• Planner: the sticky resort column took ~85% of the width, so only one day was visible at a time.
• Compare: ~650px of filters and toolbar came before the first result, then one full screen per resort card.

What

• Planner (phones): the resort column is capped and truncated and pass badges are hidden, so all 7 days fit. A new "Best pick each day" list reads the grid by column (bestPerDay() in lib/planner.ts, with tests). Tapping a row opens that resort.
• Compare (phones): a compact ranked list with one line per resort: rank, name, region/distance, temp, ❄️/☀️/💨 flags, 24h snow and score. The cards stay from sm up.
• Filters: pass and region chips become a single swipeable row on phones instead of wrapping onto 5 lines. The toolbar description is hidden on phones, sort labels are shortened and the map button shows only its icon, so the controls fit on one line.
• Desktop: unchanged.

Testing

• tsc --noEmit, next lint and all 9 offline test suites pass, including 2 new bestPerDay tests.
• Checked in the browser at 375×812: no sideways page scroll, all 7 planner days visible, and tapping a compact Compare row opens the resort.
• Checked at 1440×900: Planner and Compare look the same as before.

Merge order

This is 1 of 3. All three branch off main and edit different parts of app/page.tsx. I merged them locally in order 1 → 2 → 3 and there were no conflicts.

🤖 Generated with Claude Code