Improve mobile spacing and safe-area handling

[battaglia-v]

Summary

• add responsive spacing tokens, safe-area helpers, and touch-target utility classes to global styles
• slim down sticky navigation/header surfaces for mobile while keeping mission summary accessible on larger screens
• tighten hero and card padding across daily lessons, notifications, profile, practice, and translate flows for compact mobile layouts

Testing

• npm test

---

Codex Task

[vercel]

Deployment failed with the following error:

Hobby accounts are limited to daily cron jobs. This cron expression (10 * * * *) would run more than once per day. Upgrade to the Pro plan to unlock all Cron Jobs features on Vercel.

Learn More: https://vercel.link/3Fpeeb1

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Prevent double spacing on page-shell layouts

The new .page-shell/.page-shell-content styles now force a flex column with gap: var(--space-section-sm) while the page wrappers still apply Tailwind space-y-* utilities (e.g. app/[locale]/daily-lessons/page.tsx line 27 uses page-shell-content … space-y-6). Because flex gaps and space-y margins both apply, every section wrapper now has roughly twice the vertical spacing (gap plus margin), leading to visibly stretched layouts across all pages using these classes. Please remove one of the two spacing mechanisms so the vertical rhythm matches the intended space-y values.

Useful? React with 👍 / 👎.