website: Fix the phone navbar, the tab icon and the social card (#2690)

Three things the docs pages got wrong away from a desktop window.

**The navbar was not responsive.** Every control kept its desktop size,
so the five of them plus the site title overflowed a phone; the
hamburger, which VitePress leaves unordered, sorted ahead of the search
and sat against the title; and the star button was `w-full` below `lg`,
which left a wide gap in the bar between 768px and 1024px. Below 768px
the controls are now 2rem squares, the star count is dropped, and the
language menu joins the sections inside the hamburger screen through
`nav-screen-content-after` — the screen variant `LanguageSwitcher.vue`
already had and nothing rendered. The appearance switch stays on the bar
at every width instead of moving into a `…` flyout and then into the
screen, so the toolbar is the landing page's at any size.

**The hamburger opened onto nothing.** `.VPNav` carried the blur, and
`backdrop-filter` makes its element the containing block for fixed
descendants — that collapsed `.VPNavScreen`, anchored `top: nav-height;
bottom: 0`, to zero height. The blur moves to `.VPNavBar`, which does
not wrap the screen.

**The tab icon did not follow the theme.** It was a
`prefers-color-scheme` pair, so it tracked the OS and not the site's own
appearance toggle. One link now, repointed by `useThemeFavicon`.

**The social card was soft on Slack.** It was captured at
`deviceScaleFactor: 1`; Slack re-encodes at its own preview size, and a
1x source arrives blurred on a high-density screen. `og.png` and
`og-dark.png` are regenerated at 2x (2400x1260) and the `og:image:width`
/ `og:image:height` tags state the stored size.

Checked at 360 / 390 / 640 / 768 / 820 / 1280 / 1440, both locales and
both themes, on the production build.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>