fix(apps): make the Apps tab a full-width phone launcher on mobile

[MichaelTaylor3d]

TLDR

The Apps tab now reads unmistakably as a phone home-screen launcher on mobile. Fixes the #51 follow-up feedback: "I still don't see a breakpoint where the app looks like square rounded icons on a phone launcher screen."

Problem

.app-home-grid used grid-template-columns: repeat(auto-fit, 72px) + justify-content: center, so on a phone a handful of icons rendered as a small centered cluster with fixed gaps — a web widget, not a home screen.

What changed (CSS + test only)

At the mobile breakpoint (<= 560px, covering 360 / 390 / 414px):

• Full-width, evenly-distributed columns — repeat(4, 1fr) spanning the whole shell width with even gutters (column-gap: 8px, row-gap: 26px), replacing the centered fixed-px cluster. Resolves to four equal tracks: 76px @360, 83.5px @390, 89.5px @414.
• Larger squircle icons that scale with the cell — clamp(56px, 17vw, 72px); the 22% squircle radius + soft drop shadow come from the existing base rule.
• Receded heading/intro — smaller Apps heading (21px) + intro (13px) so the icon grid is the hero, like a status-bar header over a home screen (kept for a11y/SEO, never deleted).
• Labels stay centered + 2-line clamped; tap targets stay >= 44px (WCAG 2.5.8).
• Desktop/tablet unchanged — keeps the existing centered auto-fit, 88px cluster.

AppIcon (reused/CRITICAL — 4 consumers) is re-skinned via mobile-scoped .app-tile-icon-frame descendant selectors only; its API is untouched. !important is needed solely to beat AppIcon's inline width/height (the <img> attrs + the fallback span's inline style). No markup change — the AppTile/AppsHomeScreen structure and unit tests are unchanged.

Blast radius checked (CLAUDE.md §2.0)

• impact(AppTile, upstream) -> 0 callers, LOW.
• impact(AppIcon, upstream) -> CRITICAL, reused by AppTile / AppCard / FeaturedSlide / AppDetailPage — so I did not touch its API or its base .app-icon rule. Store cards (.app-card-head .app-icon) and Detail (.detail-head .app-icon) are unaffected because every new rule is scoped under .app-tile-icon-frame / .apps-home* inside the phone media query.
• detect_changes(all) -> 3 files, 0 changed symbols, 0 affected processes, risk low.

How verified

• Unit: npm run test:coverage -> 190 passed, coverage 99.65% (>= 80%).
• Typecheck/lint: tsc --noEmit clean; ESLint 0 errors.
• a11y (WCAG 2.2 AA via axe): npm run test:a11y -> 66 passed, incl. /apps axe-clean in dark AND light, ARIA list semantics + keyboard order intact.
• New regression tests: full-width 4-up launcher grid asserted at 360 / 390 / 414px (exactly 4 equal tracks, each > 74px — proving full-width vs the old fixed-72px cluster).
• Visual verification (§6.5) — screenshots below at 360/390/414 (dark + light) + desktop 1280, opened and inspected. It reads as a launcher.

Bump

0.3.0 -> 0.3.1 (patch — visual refinement, no public API/behaviour change).

Screenshots

Mobile — dark

360px	390px	414px

Mobile — light

360px	414px

Desktop 1280 (no regression — centered cluster preserved)

Closes the #51 mobile-launcher follow-up.