fix(mobile): make the phone header tab strip read as live tabs

[Ark0N]

What was wrong

On a phone, the session tab strip in the header looked switched off. Every inactive tab was transparent, so each one was grey 11px text floating in an unmarked gap, with nothing that reads as tappable. Each tab also carried a boxed Alt+N digit, a keyboard shortcut hint a phone can't use. Names were capped at 50px, so tabs sharing a w1- prefix mostly showed the prefix (w1-inge…, or just w1- on the tab at the edge). And the tab that didn't fit was cut off mid-word, right against the connection dot.

Captured at a 402px iPhone viewport with invented session names. The off-screen drawer shadow described under "Not in this PR" is hidden in these captures so it doesn't muddy the comparison.

What changed

Everything is in the phone block (max-width: 599px) of src/web/public/mobile.css. Tablets and desktop are unchanged.

• Tabs are chips. Every header tab gets a fill and border from the skin's --control-bg-hover / --control-border-hover tokens, and the name is --text at weight 500. The light skins already repaint the header with --glass-bg and define their own control tokens, so they get matching chips without an override block. The active tab keeps its accent fill and border (those are !important in styles.css).
• The chip selector stays at (0,1,0). It's written :where(.header) .session-tab. As .header .session-tab it would tie with .session-tab[data-color="red"] in styles.css and win on load order, which would wipe the colour stripe off colour-tagged tabs. Scoping to .header also leaves sidebar layout alone, because there the list moves out of the header.
• No Alt+N digit on phones. Inactive tabs also drop their empty .tab-actions container, which was adding 4px to the right side of every chip.
• More name, bigger dot. The name cap goes from 50px to 80px (the hidden digit gives back 20px of that), the idle status dot from 4px to 6px, and the gap between tabs from 2px to 6px.
• Edge fade, no JS. The strip gets a mask whose two fade widths follow its own horizontal scroll through a scroll-driven animation (animation-timeline: scroll(self inline), with the widths registered via @property). At the start only the right edge fades, at the end only the left, and in between both. A strip that fits has an inactive timeline, so it gets no mask. Browsers without scroll timelines (Firefox today) skip the @supports block and keep the old hard edge.

Tap targets

The active tab keeps its min-width: 44px label reserve, which is what stops a thumb aimed at the middle of the tab from landing on the gear icon. With every phone tab now numberless and the dot 2px wider, the reserve it actually needs drops from 38px to 36px, and the arithmetic in the comment is updated to match. Checked in Chromium at 360, 393, 402 and 430px: tapping the centre of an active tab named w9 hits the tab, not the gear or the close button.

Testing

• New test/mobile-tab-strip-chips.test.ts (postcss, runs in the CI gate). It pins three ways this breaks with no visible error: the chip selector gaining specificity; @property moving inside the @media block, where it's invalid, so the fade stops interpolating; and animation-timeline being declared before the animation shorthand, which resets it. I broke each one on purpose and the test failed each time.
• test/mobile/tabs.test.ts now expects the 80px cap. That suite isn't in the CI gate. npm run test:mobile -- test/mobile/tabs.test.ts gives 30/31 on this branch and the same 30/31 on master. The one failure ("switching tabs with the keyboard closed does not leave the terminal textarea focused") fails the same way on master.
• npm test passes: 433 files, 8307 tests.
• Browser checks (Playwright at 402x874 with an iPhone user agent and --safe-area-top forced to 62px): the dark, og and four light skins; the home screen, an active session, and the strip scrolled to the middle and to the end. The per-colour left border still renders red, and the computed styles of sidebar-layout rows and of the 700px tablet strip are unchanged.
• Not yet checked on a physical iPhone. Safari 26 and later support scroll-driven animations, so the fade should work there, and older iOS keeps the hard edge.

Not in this PR

On the light skins a dark shadow runs down the right edge of the screen. It comes from the closed notification drawer (#notifDrawer) and approvals drawer: both are parked just past the right edge of the viewport, and their leftward box-shadow bleeds into view. It has nothing to do with the tab strip and shows up on master too, so it's left for a separate fix.